/* Astrokdok: o estilo de toda tela. Cores da seção 2.6, tamanhos e toque da 2.9, combinados da 3.0.
   Só recursos que o Chrome de uns 5 anos atrás tem (a lista de 8.11); em flexbox, margem no lugar de gap. */
:root {
  --papel: #F3EEE4; --cartao: #E8E1D3; --tinta: #454B57; --grafite: #5E6168; --tinta-azul: #3B6490;
  --ceu-dia: #C9DDE8; --ceu-tarde: #EBCFB2; --noite: #27324B; --texto-noite: #D6CFC0; --lua: #EDE6D3;
  --serra: #C9A57F; --serra-sombra: #A88A6E; --mato: #A7B48E; --agua: #93B8C5; --giz: #3A4766;
  --madeira: #DDBB86; --ambar: #E6B66A; --texto-botao: #3A3F4A; --terracota: #C98B6B;
  --marca: #099268; --marca-clara: #0BAA7A;
  --dividendo: #F1DDB0; --divisor: #DDE4CF; --quociente: #E2DAEC; --resto: #F0D2C2;
  --altura: 100vh;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Sem "puxar para recarregar": o gesto recarregaria o jogo no meio da cena. */
html, body { margin: 0; height: 100%; overscroll-behavior-y: none; }
body {
  background: var(--papel); color: var(--tinta);
  font-family: system-ui, sans-serif; font-size: 18px; line-height: 1.5;
  font-variant-numeric: tabular-nums;
  touch-action: manipulation; overflow: hidden;
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
body.noite { background: var(--noite); color: var(--texto-noite); }
h1, h2, h3, p { margin: 0 0 8px; }
h1, .titulo { font-size: 24px; line-height: 1.3; }
h2 { font-size: 20px; line-height: 1.3; }
h3 { font-size: 18px; margin-top: 16px; }
.menor, .fonte, .ajuda { font-size: 16px; }
.forte { font-weight: 700; }
.riscado { text-decoration: line-through; }
button { font-family: inherit; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--tinta-azul); outline-offset: 2px; }

/* A casca: barra de 48 px em cima e o palco embaixo. As bordas do aparelho (entalhe, barra de gestos) ficam livres. */
#app {
  height: var(--altura); display: flex; flex-direction: column; max-width: 560px; margin: 0 auto;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.barra { flex: 0 0 48px; height: 48px; display: flex; align-items: center; padding: 0 4px; }
.barra-direita { display: flex; margin-left: auto; }
.icone {
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.icone + .icone { margin-left: 8px; }
.icone .ic { width: 28px; height: 28px; }
#palco { flex: 1 1 auto; position: relative; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* Cena: arte em cima, balão no meio, botões no terço de baixo, a 24 px da borda. */
.cena { display: flex; flex-direction: column; min-height: 100%; }
.cena-arte { flex: 1 1 auto; min-height: 140px; position: relative; overflow: hidden; }
.cena-arte.vazia { min-height: 0; }
.cena-arte > svg, .agencia-arte > svg, .arte-faixa > svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.cena-meio { flex: 0 0 auto; padding: 8px 16px 0; }
.cena-botoes { flex: 0 0 auto; padding: 8px 16px 24px; }
.ak-svg path, .ak-svg line { stroke-linecap: round; stroke-linejoin: round; }

/* Balão de fala (3.0): nome em negrito, no máximo 3 linhas. */
.balao {
  background: var(--cartao); color: var(--tinta); border: 2px solid var(--tinta); border-radius: 16px;
  padding: 10px 14px; min-height: 88px;
}
.balao[role="button"] { cursor: pointer; }
.balao-quem { display: block; font-weight: 700; }
.balao-texto { margin: 0; }

/* Cartão: caixa de texto com contorno de 2 px (2.7, superfícies vizinhas). */
.cartao {
  background: var(--cartao); color: var(--tinta); border: 2px solid var(--tinta); border-radius: 14px;
  padding: 12px 14px; margin: 0 0 8px;
}
.cartao .fonte { margin: 8px 0 0; }

/* Botões: toque de 48 px ou mais, 8 px entre um e outro. */
.btn {
  font: inherit; color: var(--tinta); cursor: pointer;
  min-height: 48px; min-width: 48px; border-radius: 14px; padding: 8px 16px;
  background: var(--cartao); border: 2px solid var(--tinta);
}
.btn-principal {
  display: block; width: 100%; min-height: 56px;
  background: var(--ambar); color: var(--texto-botao); font-weight: 700;
}
.btn-secundario { display: block; width: 100%; }
.btn-pequeno { display: inline-block; font-size: 16px; }
.btn + .btn { margin-top: 8px; }
.btn-pequeno + .btn-pequeno { margin-top: 0; }
.par { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; }
.par .btn { margin-top: 0; }
/* O toque responde na hora: um contorno por dentro enquanto o dedo está no botão (a tela não pisca). */
.btn:active, .tecla:active, .icone:active, .opcao:active, .campo:active, .grafite-canto:active { box-shadow: inset 0 0 0 3px var(--tinta); }
.pequenos { display: flex; flex-wrap: wrap; justify-content: center; margin: 4px -4px 0; }
.pequenos .btn { margin: 4px; }

/* Aviso curto no alto, 4 s, sem piscar. */
#aviso {
  position: fixed; left: 16px; right: 16px; top: 56px; max-width: 528px; margin: 0 auto;
  background: var(--cartao); color: var(--tinta); border: 2px solid var(--tinta); border-radius: 12px;
  padding: 10px 14px; z-index: 30; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
#aviso.ver { opacity: 1; visibility: visible; }

/* Caixa por cima da tela e painel de tela cheia. */
.dialogo-fundo {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 40;
  background: rgba(39, 50, 75, .55); display: flex; align-items: center; justify-content: center; padding: 16px;
}
.dialogo {
  background: var(--papel); color: var(--tinta); border: 2px solid var(--tinta); border-radius: 16px;
  padding: 16px; width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto;
}
.dialogo-botoes { margin-top: 12px; }
.painel {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 20;
  background: var(--papel); color: var(--tinta); display: flex; flex-direction: column;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
.painel-corpo, .dialogo { overscroll-behavior: contain; }
.painel-topo { max-width: 560px; width: 100%; margin: 0 auto; }
.painel-titulo { font-size: 24px; margin: 0 0 0 8px; }
.painel-corpo { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 32px; max-width: 560px; width: 100%; margin: 0 auto; }
.linha-mochila { padding: 8px 0 12px; border-bottom: 2px solid var(--cartao); }
.linha-mochila .menor { margin: 6px 0 0; }
.boletim h3 { border-top: 2px solid var(--cartao); padding-top: 12px; }
.observar { margin-bottom: 8px; }
.recomecar { margin-top: 32px; text-align: center; }

/* Tela em pé (3.12). */
#gire {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  background: var(--noite); color: var(--texto-noite);
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; font-size: 24px;
}

/* Teclado de números e campos (4.5). */
.teclado { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 8px; gap: 8px; margin-top: 8px; }
.tecla {
  min-height: 48px; padding: 0; font: inherit; font-size: 22px; color: var(--tinta);
  background: var(--cartao); border: 2px solid var(--tinta); border-radius: 12px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.tecla-ok { background: var(--ambar); color: var(--texto-botao); font-weight: 700; }
.campos { display: flex; flex-wrap: wrap; margin: 0 -4px; }
.campo {
  flex: 1 1 0; margin: 4px; min-width: 96px; min-height: 64px; padding: 6px 10px;
  display: flex; flex-direction: column; align-items: flex-start; text-align: left;
  font: inherit; color: var(--tinta); background: var(--papel); border: 2px solid var(--tinta); border-radius: 12px;
}
.campo.ativo { border-width: 4px; padding: 4px 8px; }
.campo-rotulo { font-size: 16px; }
.campo-valor { font-size: 28px; font-weight: 700; min-height: 1.3em; line-height: 1.3; }

/* Páginas com rolagem (Escola, Quadro, Oficina, Passaporte, Ficha). */
.pagina { padding: 8px 16px 24px; }
.pagina-botoes { margin-top: 16px; }
.subtitulo { font-size: 18px; }
.rotulo { display: block; font-size: 18px; font-weight: 700; margin: 16px 0 4px; }
.etiqueta {
  display: inline-block; font-size: 16px; font-weight: 400; margin-left: 8px;
  background: var(--papel); color: var(--tinta); border: 2px solid var(--tinta); border-radius: 999px; padding: 0 8px;
}
.arte-faixa { position: relative; height: 180px; overflow: hidden; }
.arte-faixa.alta { height: 240px; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista-simples { margin: 0; padding-left: 20px; }
.lista-simples li { margin-bottom: 6px; }
.btn-item, .item {
  display: flex; justify-content: space-between; align-items: center; width: 100%; text-align: left;
  min-height: 48px; margin-top: 8px; padding: 6px 12px; font: inherit; color: var(--tinta);
  border: 2px solid var(--tinta); border-radius: 12px; background: var(--cartao);
}
.item.parado { background: transparent; border-color: transparent; }
.item-estado { font-size: 16px; margin-left: 8px; }
.balao-lugar { margin-top: 8px; }

/* Abertura. */
.abertura-titulos { text-align: center; }
.titulo-jogo { display: inline-block; vertical-align: middle; font-size: 32px; margin: 0; }
.logo-mini { display: inline-block; vertical-align: middle; width: 56px; height: 40px; margin-right: 8px; }
.logo-mini svg { width: 100%; height: 100%; display: block; }
.abertura .subtitulo { margin: 0 0 8px; }
.faixa { background: var(--cartao); border-bottom: 2px solid var(--tinta); padding: 8px 16px; font-size: 16px; }
.faixa p { margin: 0 0 6px; }

/* Missão Zero: a folha do dia e o Grafite do canto. */
.folha-do-dia {
  background: var(--papel); color: var(--tinta); border: 2px solid var(--tinta); border-radius: 12px;
  padding: 8px 12px; margin-top: 8px; font-size: 20px; font-weight: 700;
}
.folha-do-dia p { margin: 0; }
/* O Grafite do canto fica no fim da tela, à esquerda, sem cobrir nenhum botão. */
.grafite-canto {
  display: block; width: 56px; height: 56px; margin: 12px auto 0 0; padding: 2px;
  border: 2px solid var(--tinta); border-radius: 50%; background: var(--papel); cursor: pointer;
}
.pequenos .grafite-canto { flex: 0 0 56px; margin: 0 auto 0 4px; align-self: center; }
.grafite-canto svg { width: 100%; height: 100%; display: block; }
.bate > svg { animation: bate .6s ease-in-out 1; }
@keyframes bate { 0%, 50%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-3px); } }

/* Ficha do astronauta. */
.ficha-topo { display: flex; align-items: flex-start; }
.ficha-campo { flex: 1 1 auto; min-width: 0; }
.ficha-boneco { flex: 0 0 104px; height: 140px; margin-left: 8px; }
.ficha-boneco svg, .passaporte-boneco svg { width: 100%; height: 100%; display: block; }
.entrada {
  font: inherit; font-size: 20px; width: 100%; min-height: 48px; padding: 6px 10px;
  color: var(--tinta); background: var(--papel); border: 2px solid var(--tinta); border-radius: 12px;
}
.ajuda { margin: 6px 0 0; }
.opcoes { display: flex; flex-wrap: wrap; margin: 0 -4px; }
.opcao {
  width: 48px; height: 48px; margin: 4px; padding: 3px; cursor: pointer;
  background: var(--cartao); border: 2px solid var(--tinta); border-radius: 14px;
}
.opcao svg { width: 100%; height: 100%; display: block; }
.opcao[aria-pressed="true"] { border-width: 4px; padding: 1px; box-shadow: 0 0 0 3px var(--ambar); }
/* O [Pronto] fica sempre à vista, preso no pé da tela, mesmo quando a ficha rola. */
.ficha-pronto { position: -webkit-sticky; position: sticky; bottom: 0; z-index: 2; margin: 20px -16px -24px; padding: 8px 16px 24px; background: var(--papel); }

/* Agência: sem rolar (3.5). */
.agencia { display: flex; flex-direction: column; min-height: 100%; }
.agencia-arte { flex: 1 1 auto; min-height: 120px; position: relative; overflow: hidden; }
.agencia-meio { padding: 8px 16px 0; }
.agencia-meio .btn-principal { margin-top: 8px; }
.portas { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; padding: 8px 16px 24px; }
.btn-porta {
  min-height: 56px; padding: 6px 8px; font-size: 16px; font-weight: 700; line-height: 1.25;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.btn-porta .etiqueta { margin: 4px 0 0; }
/* Tela baixa (menos de 600 px): a arte encolhe para a Agência caber sem rolar. */
.baixa .agencia-arte { min-height: 56px; }
.baixa .agencia-meio .btn-principal { min-height: 52px; }
.baixa .btn-porta { min-height: 52px; padding: 4px 6px; }
.baixa .btn-porta .etiqueta { margin-top: 2px; }
.btn-porta + .btn-porta { margin-top: 0; }
[data-toque] { cursor: pointer; }
.defeito { margin: 12px 0 4px; }
.recuo { margin-left: 22px; }

/* Quadro do Lado de Fora (6.4). */
.cartao-quadro { margin-top: 12px; }
.cartao-quadro p { margin-bottom: 4px; }
.destaque { font-weight: 700; border-left: 4px solid var(--terracota); padding-left: 8px; }
.estado { font-size: 16px; font-style: italic; }
.cartao-botoes { margin-top: 8px; }

/* Oficina e Passaporte. */
.porta-escotilha { margin-top: 16px; }
.porta-escotilha .menor { margin: 6px 0 0; }
.caderninho { min-height: 240px; }
.passaporte-boneco { width: 120px; height: 160px; margin: 0 auto; }
.apelido { text-align: center; font-size: 24px; font-weight: 700; }
.carimbos { display: flex; flex-wrap: wrap; justify-content: center; }
.carimbo {
  width: 120px; height: 120px; margin: 6px; padding: 10px; border-radius: 50%;
  border: 4px double var(--terracota); color: var(--tinta); font-size: 16px; font-weight: 700; line-height: 1.25;
  display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(-6deg);
}
.carimbo.falta { border: 3px dashed #C9C4BA; color: var(--grafite); font-weight: 400; transform: none; }
.luas li { display: flex; align-items: center; list-style: none; margin-left: -20px; }
.lua-mini { flex: 0 0 48px; width: 48px; height: 48px; margin-right: 10px; }
.lua-mini svg, .lua-perto svg { width: 100%; height: 100%; display: block; }
.lua-perto { width: 200px; height: 200px; margin: 0 auto; }

/* Até amanhã (7.3): a noite chega em 3 segundos, sem piscar. */
.sugestao { font-weight: 700; margin-top: 8px; }
.guardar-copia { margin-top: 8px; }
.guardar-copia .menor { margin: 0 0 4px; }
.guardar-copia.em-linha { display: flex; align-items: center; justify-content: space-between; }
.guardar-copia.em-linha .menor { margin: 0 8px 0 0; }
.guardar-copia.em-linha .btn { flex: 0 0 auto; }
.cena-curta .cena-arte { min-height: 96px; }
/* Até amanhã: os dois botões logo abaixo da fala; o [Guardar cópia] e o cartão de instalar vêm depois. */
.cena-extra { flex: 0 0 auto; padding: 0 16px 24px; }
.cena-extra .guardar-copia { margin-top: 0; }
.anoitecer .so-noite { opacity: 0; transition: opacity 3s ease-in-out; }
.anoitecer.escureceu .so-noite { opacity: 1; }
body.noite .cena-meio, body.noite .pagina { color: var(--texto-noite); }

/* Menos movimento (2.8): corta o que não ensina. */
@media (prefers-reduced-motion: reduce) {
  .bate > svg { animation: none; }
  .anoitecer .so-noite { transition: none; }
  #aviso { transition: none; }
}