/*
 * Páginas do site (/sobre, /como-jogar, /imprensa): HTML estático, sem carregar o jogo.
 * Mesmas cores do jogo (src/index.css): fundo #151225, detalhes dourados.
 * Fonte do sistema da Apple (San Francisco) no iPhone, iPad e Mac; nos outros aparelhos, a fonte do sistema mais próxima
 * (Segoe UI no Windows, Roboto no Android). A San Francisco não pode ser embutida no site (licença da Apple).
 */
:root {
  --fundo: #151225;
  --fundo-topo: #242040;
  --fundo-borda: #100e1c;
  --painel: rgba(255, 255, 255, 0.04);
  --linha: rgba(255, 255, 255, 0.1);
  --texto: #e7e3f5;
  --suave: #b3acd0;
  --ouro: #f5c45e;
  --ouro-escuro: #b8862b;
  --fogo: #ff7a45;
  --agua: #4fa8ff;
  --planta: #5fd37a;
  --terra: #d6a56a;
  --titulo: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", "Segoe UI Variable Display", "Segoe UI", Roboto, Arial, sans-serif;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI Variable Text", "Segoe UI", Roboto, Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(ellipse 120% 60% at 50% 0%, var(--fundo-topo) 0%, var(--fundo) 55%, var(--fundo-borda) 100%) fixed, var(--fundo);
  color: var(--texto);
  font: 17px/1.5 var(--sans);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ouro); }
a:hover { color: #ffd98a; }

h1, h2, h3 { font-family: var(--titulo); font-weight: 700; line-height: 1.12; letter-spacing: -0.025em; color: #fff; margin: 0 0 0.5em; text-wrap: balance; }
h3 { font-weight: 600; letter-spacing: -0.015em; }
h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); }
h2 { font-size: clamp(1.45rem, 4.5vw, 1.9rem); margin-top: 0.2em; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.pular { position: absolute; left: -9999px; }
.pular:focus { left: 12px; top: 12px; z-index: 10; background: #000; padding: 8px 12px; }

/* ---------- Topo ---------- */
.topo {
  position: sticky; top: 0; z-index: 5;
  background: rgba(16, 14, 28, 0.88);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo .conteudo { display: flex; align-items: center; gap: 12px; padding: 10px 16px; }
.marca { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font: 600 1.05rem var(--titulo); letter-spacing: -0.015em; white-space: nowrap; }
.marca img { width: 34px; height: 34px; border-radius: 8px; }
.menu { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { color: var(--suave); text-decoration: none; font-size: 0.92rem; padding: 6px 10px; border-radius: 8px; white-space: nowrap; }
.menu a:hover { color: #fff; background: var(--painel); }
.menu a[aria-current="page"] { color: var(--ouro); }
@media (max-width: 560px) {
  .topo .conteudo { flex-wrap: wrap; row-gap: 4px; }
  .marca span { display: none; }
  .menu { margin-left: 0; flex: 1; gap: 0; }
  .menu a { padding: 6px 7px; font-size: 0.88rem; }
  .topo .botao { padding: 8px 14px; font-size: 0.9rem; }
}

/* ---------- Estrutura ---------- */
.conteudo { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
main section { padding: 44px 0; }
main section + section { border-top: 1px solid var(--linha); }
.estreito { max-width: 720px; }
.chapeu { color: var(--ouro); font: 700 0.78rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.4em; }
.suave { color: var(--suave); }

/* ---------- Botões ---------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #ffd476 0%, var(--ouro) 45%, var(--ouro-escuro) 100%);
  color: #2a1a05; font: 600 1rem var(--sans); letter-spacing: -0.01em; text-decoration: none;
  padding: 12px 22px; border-radius: 12px; border: 1px solid #ffe2a3;
  box-shadow: 0 6px 18px rgba(245, 196, 94, 0.22);
  white-space: nowrap;
}
.botao:hover { color: #2a1a05; filter: brightness(1.06); }
.botao.grande { font-size: 1.15rem; padding: 15px 30px; }
.botao.secundario { background: var(--painel); color: #fff; border-color: var(--linha); box-shadow: none; }
.botao.secundario:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.acoes { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- Capa ---------- */
.capa { padding: 28px 0 40px; text-align: center; }
.capa .banner { border-radius: 18px; border: 1px solid var(--linha); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); margin: 0 auto 26px; width: 100%; max-width: 900px; }
.capa p.lead { text-wrap: balance; font-size: 1.15rem; color: var(--suave); max-width: 620px; margin: 0 auto 1.4em; }
.capa .acoes { justify-content: center; }
.selos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.selos li { font-size: 0.85rem; color: var(--suave); border: 1px solid var(--linha); border-radius: 999px; padding: 4px 12px; }

/* ---------- Grades e cartões ---------- */
.grade { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: 16px; padding: 18px; }
.cartao h3 { margin-bottom: 0.35em; }
.cartao p:last-child { margin-bottom: 0; }
.cartao.com-imagem { padding: 0; overflow: hidden; }
.cartao.com-imagem img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.cartao.com-imagem div { padding: 14px 16px 16px; }

.duas-colunas { display: grid; gap: 28px; align-items: center; grid-template-columns: minmax(0, 1fr); }
.duas-colunas > *, .grade > * { min-width: 0; }
@media (min-width: 760px) { .duas-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Cartas das criaturas */
.cartas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.carta { margin: 0; background: var(--painel); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; }
.carta img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.carta figcaption { padding: 8px 10px 10px; font-size: 0.85rem; line-height: 1.35; }
.carta strong { display: block; color: #fff; font-family: var(--titulo); font-size: 1rem; }
.carta[data-elemento="fogo"] { border-color: color-mix(in srgb, var(--fogo) 45%, transparent); }
.carta[data-elemento="agua"] { border-color: color-mix(in srgb, var(--agua) 45%, transparent); }
.carta[data-elemento="planta"] { border-color: color-mix(in srgb, var(--planta) 45%, transparent); }
.carta[data-elemento="terra"] { border-color: color-mix(in srgb, var(--terra) 45%, transparent); }


/* Passos numerados */
.passos { counter-reset: passo; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.passos li { counter-increment: passo; position: relative; padding: 14px 16px 14px 60px; background: var(--painel); border: 1px solid var(--linha); border-radius: 14px; }
.passos li::before {
  content: counter(passo); position: absolute; left: 14px; top: 14px;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ouro); color: #2a1a05; font: 700 1rem var(--sans);
}
.passos strong { color: #fff; }

/* Tabela */
.tabela { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.tabela th, .tabela td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linha); }
.tabela th { color: var(--suave); font-weight: 600; }
.rolar { overflow-x: auto; }

.fogo { color: var(--fogo); } .agua { color: var(--agua); } .planta { color: var(--planta); } .terra { color: var(--terra); }

/* Exemplo de conta */
.conta { font-size: 1.05rem; font-variant-numeric: tabular-nums; background: rgba(245, 196, 94, 0.08); border: 1px solid rgba(245, 196, 94, 0.3); border-radius: 12px; padding: 14px 16px; }

/* Perguntas frequentes */
details { background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 16px; }
details + details { margin-top: 10px; }
summary { cursor: pointer; font-weight: 700; color: #fff; }
details p { margin: 0.7em 0 0; color: var(--suave); }

/* Ficha (imprensa) */
.ficha { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.ficha dt { color: var(--suave); }
.ficha dd { margin: 0; }
@media (max-width: 480px) { .ficha { grid-template-columns: 1fr; } .ficha dd { margin-bottom: 8px; } }

.baixar { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.baixar a { display: block; text-decoration: none; color: var(--texto); background: var(--painel); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden; }
.baixar a:hover { border-color: var(--ouro); color: #fff; }
.baixar img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: #0c0a16; }
.baixar img.contida { object-fit: contain; padding: 10px; }
.baixar span { display: block; padding: 10px 12px; font-size: 0.9rem; }
.baixar small { color: var(--suave); }

blockquote { margin: 0; padding: 14px 18px; border-left: 3px solid var(--ouro); background: var(--painel); border-radius: 0 12px 12px 0; }

/* Chamada final */
.chamada { text-align: center; }
.chamada .acoes { justify-content: center; }

/* ---------- Rodapé ---------- */
.rodape { border-top: 1px solid var(--linha); padding: 28px 0 40px; color: var(--suave); font-size: 0.9rem; }
.rodape .conteudo { display: grid; gap: 10px; }
.rodape nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rodape a { color: var(--suave); }
.rodape a:hover { color: #fff; }

/* ---------- Carrossel (/sobre): criaturas e telas do jogo ---------- */
.carrossel { position: relative; max-width: 1200px; margin: 6px auto 0; --larg: 168px; --zoom: 1.2; }
@media (min-width: 760px) { .carrossel { --larg: 200px; } }
/* Telas do jogo: ficam numa coluna ao lado do texto */
.carrossel.telas { --larg: 170px; --zoom: 1.18; margin: 0; width: 100%; }
@media (min-width: 760px) { .carrossel.telas { --larg: 190px; } }
.carrossel-trilho {
  display: flex; gap: 10px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  /* Espaço nas pontas para a primeira e a última também ficarem no centro; em cima e embaixo, para o zoom não ser cortado */
  padding: 44px calc(50% - var(--larg) / 2) 52px;
  position: relative; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.carrossel.telas .carrossel-trilho { padding-top: 40px; padding-bottom: 44px; }
.carrossel-trilho::-webkit-scrollbar { display: none; }
.carrossel-trilho > * {
  --cor: var(--ouro);
  flex: 0 0 var(--larg); scroll-snap-align: center; cursor: pointer;
  transform: scale(0.82); opacity: 0.45; filter: saturate(0.6) brightness(0.8);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s, filter 0.5s, box-shadow 0.5s;
  user-select: none; -webkit-user-select: none;
}
.carrossel-trilho > [data-elemento="fogo"] { --cor: var(--fogo); }
.carrossel-trilho > [data-elemento="agua"] { --cor: var(--agua); }
.carrossel-trilho > [data-elemento="planta"] { --cor: var(--planta); }
.carrossel-trilho > [data-elemento="terra"] { --cor: var(--terra); }
.carrossel-trilho > .atual { transform: scale(var(--zoom)); opacity: 1; filter: none; position: relative; z-index: 1; cursor: default; }
.carrossel-trilho > .vizinha { transform: scale(0.92); opacity: 0.75; filter: saturate(0.85) brightness(0.9); }
.carrossel-trilho > .carta.atual { border-color: var(--cor); box-shadow: 0 20px 44px rgba(0, 0, 0, 0.6), 0 0 34px color-mix(in srgb, var(--cor) 40%, transparent); }
.carrossel-trilho .carta figcaption { text-align: center; }
.carrossel-trilho .carta figcaption span { margin-right: 0.15em; }
.carrossel-trilho > .tela { margin: 0; }
.carrossel-trilho > .tela img { border-radius: 16px; border: 1px solid var(--linha); transition: box-shadow 0.5s, border-color 0.5s; }
.carrossel-trilho > .tela.atual img { border-color: rgba(245, 196, 94, 0.55); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), 0 0 28px rgba(245, 196, 94, 0.18); }
.carrossel-trilho > .tela figcaption { font-size: 0.82rem; color: var(--suave); margin-top: 8px; text-align: center; line-height: 1.3; }
.carrossel-trilho > .tela.atual figcaption { color: #fff; }
.carrossel-seta {
  position: absolute; top: calc(50% - 30px); z-index: 2;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; padding: 0 0 3px;
  background: rgba(16, 14, 28, 0.75); color: #fff; border: 1px solid var(--linha);
  font: 400 30px/1 var(--sans); cursor: pointer;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.carrossel-seta:hover { border-color: var(--ouro); color: var(--ouro); }
.carrossel-seta.anterior { left: max(8px, calc(50% - var(--larg) * 1.9)); }
.carrossel-seta.proxima { right: max(8px, calc(50% - var(--larg) * 1.9)); }
.carrossel.telas .carrossel-seta.anterior { left: 4px; }
.carrossel.telas .carrossel-seta.proxima { right: 4px; }
.carrossel-pontos { display: flex; justify-content: center; gap: 6px; margin-top: 4px; }
.carrossel-pontos span { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.22); transition: width 0.3s, background 0.3s; }
.carrossel-pontos span.atual { width: 20px; background: var(--ouro); }
@media (prefers-reduced-motion: reduce) {
  .carrossel-trilho > *, .carrossel-trilho > .tela img, .carrossel-pontos span { transition: none; }
}

/* ---------- Texto justificado ---------- */
/* Hifenização em português evita buracos entre as palavras nas linhas justificadas */
main p, main li, blockquote, details p, .rodape p {
  text-align: justify; text-justify: inter-word;
  -webkit-hyphens: auto; hyphens: auto;
}
/* Textos centralizados (capa e chamada final): justificados, com a última linha no centro */
.capa p.lead, .chamada p { text-align-last: center; }
/* Legendas e rótulos curtos não se justificam */
main figcaption, .chapeu, .selos li, .baixar span, .passos li strong { text-align: inherit; -webkit-hyphens: manual; hyphens: manual; }
.chapeu { text-align: left; }
.capa .chapeu, .chamada .chapeu { text-align: center; }