/* ── /download (15/10/2026) ──────────────────────────────────────────────
   Carregado so' pela /download (section Head), DEPOIS do site.css e do
   gth-ui.css. Tudo sob .download-page: nada global, e o cabecalho, o rodape e
   o botao do jogo (.btn do gth-ui.css) nao mudam.

   A janela tem 217 px: em cima a MESMA borda da home (.inventory-edge-top do
   home.css, que nao carrega aqui), embaixo a placa-base 1:1 (217x21). O
   corpo tem a mesma largura e as laterais sao o filete prateado das pontas
   da placa de base (#8c8e84), entao a moldura fecha sem esticar ornamento.

   A arte (1600x900) tem o contador de FPS no alto a direita e os botoes do
   jogo embaixo a direita: o recorte fica sempre no centro (portal e
   guardioes), longe dessas bordas. */

.download-page{
  box-sizing:border-box;
  max-width:1000px;margin:0 auto;
  padding:clamp(1rem,2.5vw,2rem) clamp(1rem,4vw,2rem) clamp(2rem,4vw,3.5rem);
}

.download-page__cartao{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  background:rgba(4,16,26,.9);
  border:1px solid var(--borda-forte);border-radius:2px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  overflow:hidden;
}

/* Desktop: a arte ocupa a coluna inteira; a coluna tem no maximo ~1,2:1,
   entao o recorte mostra de x~260 a x~1340 da arte. */
.download-page__arte{position:relative;margin:0;min-height:440px;overflow:hidden;background:#03080c}
.download-page__arte img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 40%;
}
.download-page__arte::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(4,16,26,0) 62%,rgba(4,16,26,.9) 100%);
}

.download-page__conteudo{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding:clamp(1.5rem,3vw,2.5rem);
}
.download-page__titulo{
  margin:0 0 .75rem;
  font-size:clamp(2rem,3.6vw,2.75rem);line-height:1.08;color:var(--nuvem);
}
.download-page__linha{
  margin:0 0 1.75rem;max-width:30ch;
  font-size:1.05rem;line-height:1.55;color:var(--texto);
}

/* janela do jogo: borda, corpo e placa na mesma largura */
.download-page__janela{flex:0 0 auto;width:217px}
.download-page__janela > img{display:block;width:217px;height:auto;max-width:none}

/* Borda de cima = a da home: janela_topo.png (601x38) no tamanho original,
   em tres fatias -- ponta esquerda (12 px), centro (193 px) e ponta direita
   (12 px). Recortada, nunca comprimida nem esticada. */
.download-page__topo{display:grid;grid-template-columns:12px minmax(0,1fr) 12px;width:217px;height:38px}
.download-page__topo span{display:block;background-image:url('/img/janela_topo.png');background-repeat:no-repeat;background-size:auto}
.download-page__topo span:first-child{background-position:left bottom}
.download-page__topo span:nth-child(2){background-position:center bottom}
.download-page__topo span:last-child{background-position:right bottom}
.download-page__corpo{
  box-sizing:border-box;width:217px;
  padding:1rem .4rem .95rem;text-align:center;
  background:#03080c;
  border-left:2px solid #8c8e84;border-right:2px solid #8c8e84;
}
/* o botao do jogo continua o do gth-ui.css; aqui so' a medida dentro da
   janela: "Download for Windows" cabe numa linha nos 217 px */
.download-page .download-page__corpo .btn.btn-grande.download-page__cta{
  width:100%;min-height:54px;padding:.45rem .3rem;
  font-size:1rem;letter-spacing:0;white-space:nowrap;
}

.download-page__conta{margin:1.1rem 0 0;font-size:.95rem}
.download-page__conta a{display:inline-block;padding:.5rem 0;color:var(--gelo)}
.download-page__conta a:hover{color:var(--nuvem);text-decoration:underline;text-underline-offset:3px}

/* Celular e tablet estreito: uma coluna. A arte vira faixa 16:9 ampliada
   1,4x a partir do centro (mostra x~230 a x~1370), para o botao caber na
   primeira tela. */
@media (max-width:760px){
  .download-page__cartao{grid-template-columns:1fr}
  .download-page__arte{min-height:0;aspect-ratio:16/9}
  .download-page__arte img{transform:scale(1.4);transform-origin:50% 35%}
  .download-page__arte::after{background:linear-gradient(180deg,rgba(4,16,26,0) 60%,rgba(4,16,26,.9) 100%)}
  .download-page__conteudo{align-items:center;text-align:center;padding:1.25rem 1rem 1.25rem}
  .download-page__linha{max-width:none;margin-bottom:1.1rem}
  .download-page__conta{margin-top:.6rem}
}
@media (max-width:420px){
  .download-page{padding-top:.75rem}
  .download-page__titulo{font-size:1.85rem}
}