/*
 * O visual do site público (2026-10-02; as páginas são montadas pelo servidor, ver server/src/site.ts).
 * A paleta é a do jogo (client/src/estilo.css). Letra de pixel só nos títulos grandes; o resto na
 * letra normal, pra ler bem.
 */
:root {
  --fundo: #f6f0e4; --areia: #efe6d4; --cartao: #fffdf8; --tinta: #1d2b3a; --tinta-suave: #4a5a6a;
  --principal: #c4553a; --principal-escuro: #a3432c; --link: #1f5f8b; --foco: #f2c94c;
  --linha: #e0d6c4; --mar: #2f6f8f; --verde: #5e7a3a; --noite: #16212e; --noite-cartao: #223143;
  --fonte: "Nunito", system-ui, sans-serif; --fonte-pixel: "Pixelify Sans", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fundo); color: var(--tinta); font-family: var(--fonte); font-size: 17px; line-height: 1.6; }
h1, h2 { font-family: var(--fonte-pixel); font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: .01em; }
h1 { font-size: clamp(34px, 5vw, 48px); }
h2 { font-size: clamp(30px, 4vw, 42px); }
h3 { font-weight: 800; line-height: 1.25; margin: 0 0 .4em; font-size: 20px; }
a { color: var(--link); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
.miolo { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.chapeu { font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--principal); margin-bottom: 8px; }
[hidden] { display: none !important; }

/* ---------- a barra do topo ---------- */
.barra { position: absolute; inset: 0 0 auto; z-index: 10; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; padding: 14px 20px; color: #fff; }
.barra.clara { position: static; color: var(--tinta); background: var(--cartao); border-bottom: 1px solid var(--linha); }
.barra .marca { font-family: var(--fonte-pixel); font-size: 20px; text-shadow: 0 2px 0 #0004; color: inherit; text-decoration: none; }
.barra.clara .marca { text-shadow: none; }
.barra .acoes { display: flex; align-items: center; gap: 12px; }
.jogar { background: var(--foco); color: var(--tinta); padding: 6px 14px; border-radius: 8px; font-weight: 800; text-decoration: none; font-size: 14px; }
@media (max-width: 420px) { .barra .marca { font-size: 16px; } }

/* O seletor de língua: um botão e uma lista com rolagem, que aguenta 15 línguas ou 50. */
.lingua { position: relative; font-size: 14px; font-weight: 700; }
.lingua summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  border-radius: 8px; border: 1px solid #ffffff66; white-space: nowrap; }
.barra.clara .lingua summary { border-color: var(--linha); }
.lingua summary::-webkit-details-marker { display: none; }
.lingua summary::after { content: "▾"; font-size: 11px; }
.lingua ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; margin: 0; padding: 6px; list-style: none;
  background: var(--cartao); color: var(--tinta); border-radius: 10px; box-shadow: 0 10px 30px #0004; min-width: 190px;
  max-height: 320px; overflow: auto; }
.lingua.pra-cima ul { top: auto; bottom: calc(100% + 6px); }
.lingua li a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--tinta); text-decoration: none; }
.lingua li a:hover { background: var(--fundo); }
.lingua li a[aria-current] { background: #f7e2b8; }

/* ---------- herói: a paisagem correndo, como na janela do jogo ---------- */
/* A altura da tela inteira, sempre (svh: no celular, sem contar a barra do navegador). */
.heroi { --escala: 6; position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 90px 20px calc(54px * var(--escala) * .75);
  background: #e9a35a url(img/ceu.png) center 30% / cover; }
@media (max-height: 760px), (max-width: 900px) { .heroi { --escala: 4; } }
@media (max-width: 520px) { .heroi { --escala: 3; } }
.heroi::before { content: ""; position: absolute; inset: 0; background: linear-gradient(#0d1a2899, #0d1a2822 55%, #0000); }
.paisagem { position: absolute; left: 0; right: 0; bottom: 0; height: calc(54px * var(--escala)); pointer-events: none; }
.camada { position: absolute; inset: 0; background-repeat: repeat-x; background-position-y: bottom;
  background-size: auto calc(54px * var(--escala)); image-rendering: pixelated; animation: correr linear infinite; }
.morros { background-image: url(img/morros.png); --largura: calc(584px * var(--escala)); animation-duration: 120s; }
.campo  { background-image: url(img/campo.png);  --largura: calc(684px * var(--escala)); animation-duration: 45s; }
.perto  { background-image: url(img/perto.png);  --largura: calc(284px * var(--escala)); animation-duration: 6s; }
@keyframes correr { from { background-position-x: 0; } to { background-position-x: calc(-1 * var(--largura)); } }
@media (prefers-reduced-motion: reduce) { .camada { animation: none; } }
.heroi .conteudo { position: relative; z-index: 2; text-align: center; max-width: 640px; width: 100%; }
.logo-titulo { margin: 0; }
.heroi .logo { width: min(440px, 80vw); height: auto; filter: drop-shadow(0 8px 18px #0006); }
.heroi .frase { color: #fff; font-size: clamp(19px, 2.4vw, 24px); font-weight: 800; margin: 14px 0 22px; text-shadow: 0 2px 8px #0008; }

/* ---------- o formulário da lista ---------- */
.lista { background: var(--cartao); border-radius: 14px; padding: 18px; box-shadow: 0 10px 30px #0004;
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; text-align: left; color: var(--tinta); }
.lista input { font: 600 16px var(--fonte); padding: 12px 14px; border: 2px solid var(--linha); border-radius: 10px; min-width: 0; color: var(--tinta); }
.lista input:focus { outline: 3px solid var(--foco); border-color: transparent; }
.lista button, .botao { font: 800 16px var(--fonte); background: var(--principal); color: #fff; border: 0; border-radius: 10px;
  padding: 12px 18px; cursor: pointer; white-space: nowrap; }
.lista button:hover, .botao:hover { background: var(--principal-escuro); }
.lista button:disabled, .botao:disabled { opacity: .6; cursor: default; }
.lista .robo, .lista .erro, .lista .miudo, .lista .pronto { grid-column: 1 / -1; }
.lista .robo:empty { display: none; }
.lista .erro { margin: 0; color: var(--principal-escuro); font-weight: 700; font-size: 14px; }
.lista .miudo { font-size: 13px; color: var(--tinta-suave); }
.lista .pronto { margin: 0; font-weight: 800; font-size: 17px; text-align: center; padding: 8px 0; }
@media (max-width: 640px) { .lista { grid-template-columns: 1fr; } }

/* ---------- seções ---------- */
section { padding: 90px 0; }
.duas { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 820px) { .duas { grid-template-columns: 1fr; gap: 28px; } section { padding: 64px 0; } }
.grande p { font-size: 18px; }

/* Um recorte do jogo, ampliado 2x sem borrar: mostra o clima sem contar a história. */
.recorte { border-radius: 16px; box-shadow: 0 6px 0 var(--linha); background-color: var(--areia); image-rendering: pixelated;
  background-image: url(img/praca.png); background-size: 3278px auto; background-repeat: no-repeat; }
.recorte.varanda { height: 420px; background-position: -1580px -340px; }
.recorte.janelas { height: 420px; background-position: -2560px -900px; }

.villaggio { background: linear-gradient(var(--areia), var(--fundo)); text-align: center; }
.villaggio .sub { max-width: 640px; margin: 0 auto; font-size: 18px; color: var(--tinta-suave); }
.carrossel { position: relative; max-width: 760px; margin: 34px auto 0; }
.trilho { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; box-shadow: 0 6px 0 var(--linha); }
.trilho::-webkit-scrollbar { display: none; }
.quadro { flex: 0 0 100%; scroll-snap-align: center; position: relative; margin: 0; }
.quadro .recorte { height: 450px; border-radius: 0; box-shadow: none; }
@media (max-width: 640px) { .quadro .recorte { height: 300px; } }
/* As imagens enviadas pela equipe (tela Imagens do painel): prints de pixel art, sem borrar. */
.quadro img { display: block; width: 100%; height: 450px; object-fit: cover; image-rendering: pixelated; background: var(--areia); }
@media (max-width: 640px) { .quadro img { height: 300px; } }
.foto img { display: block; width: 100%; height: 420px; object-fit: cover; image-rendering: pixelated; border-radius: 16px;
  box-shadow: 0 6px 0 var(--linha); background: var(--areia); }
.quadro figcaption { position: absolute; left: 12px; bottom: 12px; background: #16212ecc; color: #fff; font-weight: 700; font-size: 14px;
  padding: 4px 12px; border-radius: 99px; }
.seta { position: absolute; top: calc(50% - 20px); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--cartao); box-shadow: 0 3px 10px #0003; font-size: 22px; cursor: pointer; color: var(--tinta); }
.seta.esq { left: -14px; } .seta.dir { right: -14px; }
@media (max-width: 800px) { .seta.esq { left: 6px; } .seta.dir { right: 6px; } }
.pontinhos { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.pontinhos button { width: 10px; height: 10px; border-radius: 50%; border: 0; background: var(--linha); padding: 0; cursor: pointer; }
.pontinhos button.atual { background: var(--principal); width: 26px; border-radius: 99px; }

.objetivo { background: var(--noite); color: #e9e2d3; }
.objetivo h2 { color: #fff; }
.objetivo .chapeu { color: var(--foco); }
.objetivo .intro { max-width: 700px; font-size: 18px; color: #cfc7b6; }
.quatro { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
@media (max-width: 820px) { .quatro { grid-template-columns: 1fr; } }
.cartao { background: var(--noite-cartao); border-radius: 16px; padding: 24px; }
.cartao h3 { color: #fff; font-size: 21px; }
.cartao p { color: #cfc7b6; margin: 0 0 16px; font-size: 16px; }
.demo { background: var(--fundo); color: var(--tinta); border-radius: 12px; padding: 14px; font-size: 15px; }
.chip { display: inline-block; border-radius: 99px; padding: 3px 10px; font-weight: 700; font-size: 13px; margin: 3px 2px; }
.chip.ensina { background: #dcebd0; } .chip.aprende { background: #f7e2b8; }
.borrado { filter: blur(4px); transition: filter .2s; cursor: pointer; color: var(--tinta-suave); }
.borrado:hover, .borrado:focus { filter: none; outline: none; }
.npc { display: flex; gap: 10px; align-items: flex-start; }
.npc .rosto { width: 46px; height: 46px; border-radius: 10px; background: #e9b9a0; flex: none; display: grid; place-items: center; font-size: 22px; }
.balao { background: #fff; border-radius: 12px; padding: 8px 12px; box-shadow: 0 2px 0 var(--linha); }
.respostas { display: grid; gap: 6px; margin-top: 10px; }
.respostas span { background: #fff; border: 2px solid var(--linha); border-radius: 8px; padding: 4px 10px; font-weight: 700; font-size: 14px; }
.centro { text-align: center; }
.nome-objeto { font-size: 30px; font-weight: 800; }
.missao { display: grid; gap: 6px; }
.missao .titulo { font-weight: 800; }
.missao .feita { text-decoration: line-through; color: var(--tinta-suave); }

.novidade { background: var(--areia); padding: 50px 0; }
.novidade .faixa { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap;
  background: var(--cartao); border-radius: 16px; padding: 22px 26px; box-shadow: 0 4px 0 var(--linha); }
.novidade .quando { font-weight: 800; color: var(--principal); font-size: 14px; }
.novidade h3 { margin: 2px 0; }
.novidade p { margin: 0; color: var(--tinta-suave); }
.botao-linha { font-weight: 800; text-decoration: none; border: 2px solid var(--tinta); color: var(--tinta); padding: 10px 16px; border-radius: 10px; white-space: nowrap; }
.botao-linha:hover { background: var(--tinta); color: #fff; }

.perguntas { max-width: 760px; }
details.pergunta { background: var(--cartao); border-radius: 12px; padding: 14px 18px; margin: 10px 0; box-shadow: 0 3px 0 var(--linha); }
details.pergunta summary { font-weight: 800; cursor: pointer; }
details.pergunta p { margin: 10px 0 0; }

.chamada { background: var(--mar); color: #fff; text-align: center; }
.chamada h2 { color: #fff; }
.chamada .lista { max-width: 720px; margin: 26px auto 0; }

/* ---------- roadmap: a linha do tempo ---------- */
.topo { padding: 60px 20px 20px; }
.topo p { max-width: 640px; color: var(--tinta-suave); font-size: 18px; }
.linha-do-tempo { position: relative; max-width: 760px; margin: 20px auto 80px; padding-left: 34px; }
.linha-do-tempo::before { content: ""; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 3px; background: var(--linha); border-radius: 3px; }
.grupo { font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-suave); margin: 34px 0 10px; }
.item { position: relative; background: var(--cartao); border-radius: 14px; padding: 16px 20px; margin: 12px 0; box-shadow: 0 3px 0 var(--linha); }
.item::before { content: ""; position: absolute; left: -30px; top: 20px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--verde); border: 3px solid var(--fundo); }
.item.agora::before { background: var(--principal); box-shadow: 0 0 0 4px #c4553a44; }
.item.depois::before { background: var(--fundo); border: 3px solid var(--mar); }
.item.sonho::before { background: var(--fundo); border: 3px dashed var(--foco); }
.item .quando { font-weight: 800; font-size: 13px; color: var(--principal); }
.item.pronto .quando { color: var(--verde); }
.item.depois .quando { color: var(--mar); }
.item h3 { margin: 2px 0 4px; }
.item p { margin: 0; color: var(--tinta-suave); font-size: 16px; }

/* ---------- textos longos (privacidade, termos) e as páginas dos links do e-mail ---------- */
.legal { max-width: 760px; padding-top: 50px; padding-bottom: 80px; }
.legal h2 { font-family: var(--fonte); font-weight: 800; font-size: 22px; margin-top: 1.6em; }
.legal .atualizado { color: var(--tinta-suave); font-size: 14px; }
.acao { max-width: 560px; padding-top: 70px; padding-bottom: 100px; text-align: center; }
.acao .resultado { font-weight: 800; font-size: 18px; }

footer { background: var(--noite); color: #a9b3bf; padding: 40px 0; font-size: 14px; }
footer .miolo { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; }
footer a { color: #dfe6ee; }
footer .links { display: flex; gap: 16px; flex-wrap: wrap; }
footer .marca { font-family: var(--fonte-pixel); color: #fff; font-size: 18px; }
footer .lingua { color: #dfe6ee; }
footer .lingua summary { border-color: #ffffff33; }