/* Site do Normandia (Fase 21). Cores do HUD do jogo: painel azul-escuro, títulos dourados,
   verde da vida, azul da mana. Sem dependências além da fonte dos títulos (Google Fonts). */

:root {
  --fundo: #0f141d;
  --fundo-2: #151b27;
  --painel: #1b2230;
  --painel-borda: #2e3b52;
  --borda-destaque: #5a7fb5;
  --texto: #e7ebf2;
  --texto-suave: #a9b3c4;
  --ouro: #f2c84b;
  --ouro-escuro: #b88a1c;
  --verde: #46c25a;
  --verde-escuro: #2e7d32;
  --azul: #3a7bea;
  --vermelho: #e05a4f;
  --raio: 6px;
  --largura: 1080px;
  --fonte-titulo: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --fonte-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 16px/1.6 var(--fonte-texto);
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ouro); }
a:hover { color: #ffe08a; }
:focus-visible { outline: 3px solid var(--ouro); outline-offset: 2px; }

h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.2; color: var(--ouro); }
h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin: 0 0 0.6em; }
h3 { font-size: 1.25rem; margin: 0 0 0.4em; }

.conteudo { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 16px; }
.pular { position: absolute; left: -9999px; }
.pular:focus { left: 16px; top: 8px; z-index: 10; background: var(--painel); padding: 8px 12px; }

/* Topo e navegação */
.topo {
  position: sticky; top: 0; z-index: 5;
  background: rgba(15, 20, 29, 0.92);
  border-bottom: 1px solid var(--painel-borda);
  backdrop-filter: blur(6px);
}
.topo .conteudo { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ouro); font: 600 1.35rem var(--fonte-titulo); }
.marca img { width: 32px; height: 32px; image-rendering: pixelated; }
.menu { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; list-style: none; font-size: 0.95rem; }
.menu a { color: var(--texto-suave); text-decoration: none; padding: 6px 0; display: inline-block; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--ouro); }
@media (max-width: 640px) {
  .topo { position: static; }
  .topo .conteudo { justify-content: center; padding-top: 8px; padding-bottom: 6px; }
  .menu { justify-content: center; }
}

/* Abertura com o botão de download */
.abertura {
  position: relative;
  /* Pedaço da floresta repetido na horizontal (sem personagem nem nome atrás do título). */
  background: #2e7d32 url("../img/fundo-floresta.webp") left bottom / auto 100% repeat-x;
  image-rendering: pixelated;
  border-bottom: 3px solid var(--painel-borda);
}
.abertura::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 20, 0.55) 0%, rgba(10, 14, 20, 0.82) 70%, var(--fundo) 100%);
}
.abertura .conteudo { position: relative; image-rendering: auto; padding-top: clamp(48px, 10vw, 110px); padding-bottom: clamp(40px, 8vw, 90px); text-align: center; }
.abertura h1 {
  font-size: clamp(2.8rem, 11vw, 5.5rem); margin: 0; letter-spacing: 0.04em;
  text-shadow: 0 4px 0 #6b4a0c, 0 8px 18px rgba(0, 0, 0, 0.6);
}
.frase { font-size: clamp(1.05rem, 2.6vw, 1.3rem); max-width: 640px; margin: 14px auto 28px; color: var(--texto); text-shadow: 0 2px 6px #000; }

.baixar-area { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.botao-baixar {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: min(100%, 320px); padding: 14px 26px;
  background: linear-gradient(180deg, #57d36a 0%, var(--verde) 55%, #36a148 100%);
  color: #0d2611; text-decoration: none; border-radius: var(--raio);
  border: 2px solid #1d5a26; box-shadow: 0 4px 0 #1d5a26, 0 10px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.botao-baixar:hover { color: #0d2611; transform: translateY(-1px); box-shadow: 0 5px 0 #1d5a26, 0 12px 26px rgba(0, 0, 0, 0.5); }
.botao-baixar:active { transform: translateY(3px); box-shadow: 0 1px 0 #1d5a26; }
.botao-titulo { font: 700 1.35rem var(--fonte-titulo); }
.botao-detalhe { font-size: 0.95rem; font-weight: 600; }
.selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 0.9rem; }
.selo { background: rgba(27, 34, 48, 0.9); border: 1px solid var(--painel-borda); border-radius: 999px; padding: 3px 12px; color: var(--texto-suave); }
.aviso { max-width: 560px; margin: 4px auto 0; font-size: 0.88rem; color: #ffd98a; background: rgba(40, 30, 8, 0.85); border: 1px solid var(--ouro-escuro); border-radius: var(--raio); padding: 6px 12px; }
.novidade-build { max-width: 560px; margin: 0 auto; font-size: 0.9rem; color: var(--texto-suave); }
[hidden] { display: none !important; }

/* Seções */
.secao { padding: clamp(44px, 8vw, 80px) 0; }
.secao-alt { background: var(--fundo-2); border-top: 1px solid #1f2838; border-bottom: 1px solid #1f2838; }
.intro { color: var(--texto-suave); max-width: 720px; margin: -0.2em 0 1.6em; }

.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.cartao { background: var(--painel); border: 1px solid var(--painel-borda); border-radius: var(--raio); padding: 18px; }
.cartao p { margin: 0; color: var(--texto-suave); }
.cartao h3 { display: flex; align-items: center; gap: 8px; }
.cartao h3 img { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }
.icones-itens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; padding: 0; list-style: none; }
.icones-itens li { background: #121823; border: 1px solid var(--painel-borda); border-radius: 4px; padding: 4px; }
.icones-itens img { width: 32px; height: 32px; image-rendering: pixelated; }

/* Capturas */
.galeria { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.galeria figure { margin: 0; background: var(--painel); border: 1px solid var(--painel-borda); border-radius: var(--raio); overflow: hidden; display: flex; flex-direction: column; }
.galeria a { display: block; background: #0b0f16; flex: 1; }
.galeria img { width: 100%; object-fit: cover; object-position: top; }
.galeria figcaption { padding: 10px 12px; font-size: 0.92rem; color: var(--texto-suave); }
/* Linhas: lobos (6) | floresta (4) + acampamento (2) | equipamento (3) + ferreiro (3).
   As proporções das capturas recortadas fazem as figuras da mesma linha terem a mesma altura. */
.galeria .g6 { grid-column: span 6; }
.galeria .g4 { grid-column: span 4; }
.galeria .g3 { grid-column: span 3; }
.galeria .g2 { grid-column: span 2; }
.galeria .g3 img { aspect-ratio: 669 / 587; }
@media (max-width: 760px) {
  .galeria { grid-template-columns: 1fr; }
  .galeria .g6, .galeria .g4, .galeria .g3, .galeria .g2 { grid-column: auto; }
  .galeria .g3 img { aspect-ratio: auto; }
}

/* Instalação e requisitos */
.duas-colunas { display: grid; grid-template-columns: 3fr 2fr; gap: 28px; align-items: start; }
@media (max-width: 760px) { .duas-colunas { grid-template-columns: 1fr; } }
.passos { counter-reset: passo; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.passos li { counter-increment: passo; position: relative; padding: 12px 14px 12px 56px; background: var(--painel); border: 1px solid var(--painel-borda); border-radius: var(--raio); }
.passos li::before {
  content: counter(passo); position: absolute; left: 12px; top: 12px; width: 30px; height: 30px;
  display: grid; place-items: center; font: 700 1rem var(--fonte-titulo);
  background: var(--ouro); color: #2b1e00; border-radius: 4px;
}
.nota { margin-top: 16px; padding: 12px 14px; border-left: 4px solid var(--azul); background: #162238; border-radius: 0 var(--raio) var(--raio) 0; }
.nota p { margin: 0.3em 0; }
.lista-req { margin: 0; padding-left: 1.2em; }
.lista-req li { margin: 4px 0; }
kbd { font: 600 0.85em var(--fonte-texto); background: #252f42; border: 1px solid #3a4862; border-bottom-width: 2px; border-radius: 3px; padding: 0 5px; }

/* Patch log */
.patch-lista { display: grid; gap: 16px; }
.patch { background: var(--painel); border: 1px solid var(--painel-borda); border-radius: var(--raio); padding: 18px 20px; scroll-margin-top: 72px; }
.patch-topo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 6px; }
.patch-topo h3 { margin: 0; flex: 1 1 260px; }
.patch-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.85rem; color: var(--texto-suave); }
.patch-build { background: #203a24; color: #9fe6a9; border: 1px solid #2f6b39; border-radius: 999px; padding: 1px 10px; font-weight: 600; }
.patch-resumo { margin: 0 0 8px; color: var(--texto); }
.patch ul { margin: 0; padding-left: 1.2em; color: var(--texto-suave); }
.patch li { margin: 3px 0; }
.patch-mais { margin-top: 20px; }
.estado { color: var(--texto-suave); }

/* Créditos */
.creditos-lista { display: grid; gap: 12px; }
.credito { background: var(--painel); border: 1px solid var(--painel-borda); border-radius: var(--raio); padding: 14px 16px; }
.credito h3 { font-size: 1.1rem; }
.credito dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 0.92rem; }
.credito dt { color: var(--texto-suave); }
.credito dd { margin: 0; overflow-wrap: anywhere; }
.credito ul { margin: 0; padding-left: 1.1em; }
@media (max-width: 520px) { .credito dl { grid-template-columns: 1fr; } .credito dd { margin-bottom: 6px; } }
.pagina-topo { padding: 40px 0 8px; }
.pagina-topo h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 0.3em; }

/* Rodapé */
.rodape { border-top: 1px solid var(--painel-borda); padding: 28px 0 40px; color: var(--texto-suave); font-size: 0.9rem; }
.rodape .conteudo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.rodape p { margin: 0; }
.rodape a { color: var(--texto); }