/* O Calango Fominha — layout
 *
 * A medida que manda é o palco que sobra com o teclado ABERTO. Num iPhone de
 * 414x896 isso deu 398x348: quase quadrado. Não é o formato que a gente
 * escolheria, é o que existe — e o desktop precisa funcionar com a mesma cena
 * num formato bem mais largo.
 *
 * Daí a divisão em três faixas horizontais empilhadas. Ela sobrevive a
 * qualquer proporção: no quadrado as faixas ficam gordas, no widescreen ficam
 * finas e a pista de corrida se alonga, que é justamente o eixo do jogo.
 *
 *   ┌───────────────────────┐
 *   │ vidas · sequência     │  HUD    (DOM: é texto, e leitor de tela lê)
 *   ├───────────────────────┤
 *   │        か             │  placa  ┐
 *   │  🦎────────────🪰     │  pista  ┘ canvas
 *   ├───────────────────────┤
 *   │ [ digite ]  [ ok ]    │  barra  (DOM: <input> de verdade)
 *   └───────────────────────┘
 */

.jogo-pagina { overflow: hidden; }
.jogo-pagina .rodape { display: none; }      /* o painel já leva a volta */

/* Durante a partida a barra sai de cena e o palco toma a tela inteira. É a
   diferença entre caber e não caber no celular com o teclado aberto. */
body.jogando .topo { display: none; }

/* `fixed` + altura vinda do visualViewport: é assim que a cena para de ficar
   atrás do teclado. Sem isso, no iOS a página rola por baixo dele. */
.jogo {
  position: fixed; left: 0; top: 0; width: 100%;
  display: flex; flex-direction: column;
  background: var(--fundo);
}

.j-hud {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 14px; min-height: 44px;
  font-size: .82rem; font-weight: 800; color: var(--cinza);
  border-bottom: 2px solid var(--linha);
}
.j-hud .j-vidas { font-size: .95rem; letter-spacing: 2px; }
.j-hud .j-seq { color: var(--laranja-baixo); }
.j-hud .j-capt { margin-left: auto; }
.j-hud .j-sair {
  font: inherit; font-weight: 900; cursor: pointer; flex: none;
  border: 0; background: none; color: var(--fraco); padding: 4px 2px;
}

.j-cena { flex: 1; min-height: 0; display: block; width: 100%; }

.j-barra { display: flex; gap: 8px; padding: 8px 10px; border-top: 2px solid var(--linha); }
.j-barra input {
  flex: 1; min-width: 0; font: inherit; font-weight: 800;
  /* 17px é o mínimo que impede o Safari de dar zoom ao focar o campo — abaixo
     disso ele amplia a página e a cena sai de quadro. */
  font-size: 17px; padding: 11px 14px;
  border: 2px solid var(--linha); border-radius: 12px;
  background: var(--papel); color: var(--tinta);
  text-align: center; letter-spacing: .06em;
}
.j-barra input:focus { border-color: var(--verde); outline: none; }
.j-barra input.errou { border-color: var(--vermelho); background: var(--vermelho-claro); }

/* ---------- telas de abertura e de fim ---------- */

/* Rola do TOPO, não centralizado verticalmente. Centralizar parecia elegante
   até a grade mudar de altura: a página inteira se reacomodava e o botão saía
   de baixo do cursor. Ancorado no topo, conteúdo novo cresce para baixo e nada
   do que já está na tela se move. */
.j-painel {
  position: absolute; inset: 0; z-index: 5;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--fundo);
}
.j-folha {
  max-width: var(--largura); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 22px 16px 40px; text-align: center;
}

/* os cartões são os mesmos do resto do site: papel, borda visível, canto mole */
.j-cartao {
  width: 100%; display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: var(--raio);
  border: 2px solid var(--linha); border-bottom-width: 4px;
  background: var(--papel);
}
.j-cartao h2 {
  margin: 0; font-size: .72rem; font-weight: 900;
  letter-spacing: .09em; text-transform: uppercase; color: var(--fraco);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.j-cartao h2 small { font-weight: 800; letter-spacing: 0; text-transform: none; }
.j-cartao h2 small b { color: var(--verde); }
/* Alinhado com os cartões, não com uma medida própria de leitura. O painel é
   uma coluna de blocos da mesma largura; um parágrafo mais estreito no meio
   lê-se como desalinhamento, não como cuidado tipográfico. No celular nunca
   apareceu porque lá a largura da tela já era o limite. */
.j-linha { font-size: .9rem; color: var(--cinza); align-self: stretch; }
.j-painel.oculto { display: none; }
.j-painel h1 { margin: 0; font-size: clamp(1.4rem, 5.5vw, 2rem); font-weight: 900; letter-spacing: -.03em; }
.j-painel p { margin: 0; font-size: .88rem; color: var(--cinza); }
.j-niveis { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.j-placar { display: flex; gap: 8px; justify-content: space-around; flex-wrap: wrap; }
.j-placar div { display: flex; flex-direction: column; }
.j-placar b { font-size: 1.7rem; font-weight: 900; line-height: 1; }
.j-placar span { font-size: .68rem; font-weight: 800; text-transform: uppercase;
                 letter-spacing: .07em; color: var(--fraco); }

/* ---------- coleção ---------- */

.j-colecao { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.j-bicho {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 62px; padding: 8px 6px; border-radius: 12px;
  border: 2px solid var(--linha); background: var(--papel);
}
.j-bicho.zero { opacity: .35; }
.j-bicho .e { font-size: 1.5rem; line-height: 1; }
.j-bicho .n { font-size: .68rem; font-weight: 900; color: var(--cinza); }

/* ---------- escolha de nível ---------- */

.j-nivel { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.j-nivel b { font-size: .82rem; }
.j-nivel small { font-size: .66rem; font-weight: 700; color: var(--fraco); }

.j-marca { font-size: 1.05rem; margin: 0 0 2px; }

/* ---------- grade de progresso ----------
   Três estados, e a cor diz qual: nunca visto, acertado sempre, e o que ainda
   falha. É a resposta visual para "o que eu preciso estudar". */

.j-grade {
  display: flex; flex-wrap: wrap; gap: 18px; justify-content: center;
  align-items: flex-start; align-self: center;
}
/* Cada grupo é uma tabela com as colunas da tabela de kana — 5 para o básico e
   o dakuten, 3 para o yōon. A coluna de cada célula vem do dado, então as
   casas que não existem ficam vazias em vez de a linha seguinte subir. */
.j-tabela { display: grid; gap: 4px; }
/* Largura AUTOMÁTICA com um mínimo. Fixa em 26px, os yōon (`きゃ`, dois
   caracteres) quebravam em duas linhas e vazavam da célula — o básico cabia e
   escondeu o problema até a tabela completa aparecer. */
.j-cel {
  min-width: 26px; height: 26px; padding: 0 4px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 700; white-space: nowrap;
  border: 2px solid var(--linha); background: var(--papel); color: var(--fraco);
}
.j-cel.firme { border-color: var(--verde); background: var(--verde-claro); color: var(--verde-baixo); }
.j-cel.falha { border-color: var(--laranja); background: var(--laranja-claro); color: var(--laranja-baixo); }

.j-legenda { font-size: .74rem; color: var(--fraco); }
.j-legenda b { color: var(--cinza); }

/* ---------- botões de ícone no HUD ---------- */

.j-icone {
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; flex: none;
  border: 0; background: none; padding: 5px 4px; opacity: .75;
}
.j-icone:hover { opacity: 1; }
.j-icone.j-sair { font-weight: 900; color: var(--fraco); font-size: 1.05rem; }
.j-mudo[aria-pressed="true"] { opacity: .4; }

/* ---------- as regras ----------
   Existe porque a pergunta "qual é o objetivo?" apareceu num teste com uma
   pessoa que tinha o jogo na frente e jogou bem. Mecânica que só se entende
   jogando muito não é mecânica intuitiva. */

.j-regras {
  margin: 0; padding: 0; list-style: none; text-align: left;
  display: flex; flex-direction: column; gap: 6px;
  font-size: .82rem; color: var(--cinza); align-self: stretch;
}
.j-regras li { padding-left: 15px; position: relative; }
.j-regras li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--verde);
}
.j-regras b { color: var(--tinta); }

/* o número principal do placar é o de pontos, e o tamanho diz isso */
.j-placar .j-grande b { font-size: 2.4rem; color: var(--verde); }
.j-bicho .v { font-size: .6rem; font-weight: 800; color: var(--fraco); }

/* ---------- o mascote nos painéis ----------
   Canvas e não <img>: os PNGs têm margem transparente diferente em cada pose,
   e um <img> mostraria a margem junto — as duas poses apareceriam em tamanhos
   diferentes. Desenhando pela caixa do alfa medida, ficam iguais. */

.j-mascote { width: 150px; height: 100px; display: block; }
@media (max-width: 620px) { .j-mascote { width: 116px; height: 78px; } }

/* ---------- relatório da rodada ----------
   O que escapou vem com a leitura junto: a lista só serve se responder
   "e qual era mesmo?" na hora, sem obrigar a procurar noutro lugar. */

.j-extra {
  display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
  font-size: .8rem; color: var(--fraco);
}
.j-extra b { color: var(--cinza); font-size: .95rem; }

.j-falhas { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.j-falha {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 11px; border-radius: 12px;
  border: 2px solid var(--laranja); background: var(--laranja-claro);
}
.j-falha b { font-size: 1.15rem; color: var(--tinta); }
.j-falha .r { font-size: .78rem; font-weight: 800; color: var(--laranja-baixo); }
.j-falha .q { font-size: .68rem; font-weight: 900; color: var(--fraco); }