/* Layout fluido: ocupa a largura e a altura da tela (notebooks e monitores grandes).
   Carregado por último, ajusta medidas fixas de style.css e perfis-adulto.css. */

#app { max-width: 1760px; padding: clamp(12px, 1.4vw, 26px) clamp(16px, 2.4vw, 44px) 32px; }

/* ---------- Mapa ---------- */
.mapa-grade { grid-template-columns: minmax(0, 1fr) clamp(300px, 23vw, 420px); gap: clamp(14px, 1.4vw, 24px); }
.trilha { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.no, .adulto .no { width: auto; }

/* Telas largas: mundos em duas colunas, para ver mais do mapa sem rolar */
@media (min-width: 1440px) {
  .mundos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
  .mundos .continuar { grid-column: 1 / -1; margin-bottom: 0; }
  .mundo { margin-bottom: 0; }
  .mundo-topo p { font-size: .92rem; }
  .trilha { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* ---------- Telas de digitação e jogos: ocupam a altura da janela ---------- */
.tela-licao, .tela-corrida, .tela-toupeira, .tela-meteoros {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 560px; padding-bottom: 14px;
}
.tela-licao > *, .tela-corrida > *, .tela-toupeira > *, .tela-meteoros > * { flex-shrink: 0; }

/* O teclado ganha todo o espaço que sobra e se mede pelo próprio espaço (container query) */
.tela-licao #kb, .tela-corrida #kb, .tela-toupeira #kb, .tela-meteoros #kb {
  flex: 1 1 auto; min-height: 200px; container-type: size; display: flex; justify-content: center; align-items: center;
}
.teclado-wrap { margin-top: 0; --maos-h: 118px; }
.tela-meteoros .teclado-wrap { --maos-h: 0px; }
@container (min-width: 1px) {
  .teclado, .compacto .teclado, .kb-jogo .teclado {
    --u: max(26px, min(84px, calc((100cqw - 24px - var(--maos-w, 0px)) / 17), calc((100cqh - var(--maos-h) - 24px) / 5.9)));
  }
}
.tela-meteoros #kb { flex: 0 1 34%; }
.tela-corrida #kb { flex-basis: 40%; }

/* Mãozinhas acompanham o tamanho do teclado */
.maos { gap: clamp(40px, 6vw, 110px); }
@container (min-height: 520px) {
  .teclado-wrap { --maos-h: 150px; }
  .dedo { width: 26px; }
  .mao-L .d-L5, .mao-R .d-R5 { height: 44px; }
  .mao-L .d-L4, .mao-R .d-R4 { height: 58px; }
  .mao-L .d-L3, .mao-R .d-R3 { height: 66px; }
  .mao-L .d-L2, .mao-R .d-R2 { height: 58px; }
  .palma { width: 160px; height: 58px; }
}
/* Pouca altura (notebook): as mãos vão para os lados do teclado, que fica maior */
@container (max-height: 470px) {
  .teclado-wrap:has(.maos) { --maos-h: 0px; --maos-w: 250px; flex-direction: row; gap: 14px; }
  .maos { display: contents; }
  .mao-L { order: -1; }
  .mao { transform: scale(.9); }
}
/* Muito pouca altura: sem mãos */
@container (max-height: 240px) {
  .teclado-wrap:has(.maos) { --maos-w: 0px; }
  .maos, .mao { display: none; }
}

/* Texto da lição cresce com a tela */
.caixa-texto { font-size: clamp(1.5rem, .9rem + 1.15vw, 2.5rem); padding: clamp(14px, 1.4vw, 26px) clamp(18px, 2vw, 34px); }
.caixa-texto.curta { font-size: clamp(1.35rem, .85rem + .9vw, 2.1rem); }
.adulto .caixa-texto { font-size: clamp(1.35rem, .8rem + 1vw, 2.2rem); }
.adulto .caixa-texto.curta { font-size: clamp(1.2rem, .75rem + .8vw, 1.9rem); }
@media (max-height: 760px) {
  .caixa-texto { max-height: calc(2 * 1.75em + 32px); }
  .tela-licao .progresso { margin-bottom: 8px; }
  .dica-tecla { margin: 6px 0 2px; }
}

/* Meteoros: o céu ocupa o espaço livre */
.tela-meteoros .ceu { flex: 1 1 auto; height: auto; min-height: 260px; }
.tela-meteoros .cidade { font-size: clamp(2rem, 2.6vw, 3rem); }
.meteoro .palavra { font-size: clamp(1.4rem, 1.1rem + .6vw, 2rem); }

/* Corrida: pista mais alta em telas grandes */
.raia-pista { height: clamp(40px, 4.6vh, 58px); }
.corredor { font-size: clamp(1.9rem, 3.4vh, 2.6rem); }
.raia-nome { width: clamp(110px, 9vw, 160px); }
@media (max-height: 680px) {
  .pista { padding: 6px 10px; margin-bottom: 8px; }
  .raia + .raia { margin-top: 3px; }
  .raia-pista { height: 32px; }
  .corredor { font-size: 1.5rem; }
  .raia-nome { font-size: .85rem; }
  .tela-corrida #kb { min-height: 160px; }
}

/* Pega-Toupeira: teclado pode crescer mais */
.tela-toupeira .teclado-wrap { --maos-h: 130px; }

/* ---------- Demais telas: largura confortável e centralizada ---------- */
.postura, .duelo { max-width: 1240px; }
.pais, .tela-conquistas .cartao { max-width: none; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grafico { height: clamp(180px, 24vh, 300px); }
.grade-conquistas { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.grade-dicas { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Telas estreitas (tablet / janela pequena) */
@media (max-width: 900px) {
  .tela-licao, .tela-corrida, .tela-toupeira, .tela-meteoros { height: auto; min-height: 100vh; }
  .tela-licao #kb, .tela-corrida #kb, .tela-toupeira #kb, .tela-meteoros #kb { flex: none; height: 46vw; min-height: 180px; }
}