/* ============================================================
   Atividade Kids — jogos.css
   Camada dos jogos (carregar DEPOIS de estilos.css nas 6 páginas
   de jogos). Contém: largura da coluna, peças acessíveis, barra
   "Modo calmo"/som, gate "▶ Começar", cartão de fim, bloco para o
   adulto, modo calmo, prefers-reduced-motion e ajustes de alvo.
   Paleta e fontes vêm do :root de estilos.css.
   ============================================================ */

:root{
  --tap:48px;      /* alvo mínimo do adulto */
  --tap-kid:64px;  /* alvo mínimo da criança */
  --coral-text:#BF3B16; --coral-btn:#D14320; --ink-faint:#7D6B5B;
  --ok:#4F6B36; --ok-bg:#EEF4E6; --err:#8C2A0F; --err-bg:#FBEDE8;
  --focus:0 0 0 3px var(--paper,#FBF4E9), 0 0 0 6px var(--coral-btn);
}

/* Coluna dos jogos, com a mesma largura em todas as faixas. */
main.games, main.wrap.games{ max-width:820px; }

/* ---------- foco visível em tudo que a criança/adulto toca ---------- */
.peca:focus-visible, .tab:focus-visible, .ak-btn:focus-visible, .speaker:focus-visible,
.voice:focus-visible, .btn-ouvir:focus-visible, .reset:focus-visible, .restart:focus-visible,
.nxt:focus-visible, .ak-bar button:focus-visible, .ak-gate__btn:focus-visible,
.zone-btn:focus-visible, .mix-swatch:focus-visible, .game-tabs button:focus-visible,
svg [tabindex]:focus-visible{ outline:3px solid var(--coral-btn); outline-offset:3px; box-shadow:var(--focus); }
svg [tabindex]:focus{ outline:none; }
svg [tabindex]:focus-visible{ outline:none; }
svg [tabindex]:focus-visible > .foco{ opacity:1; }

/* ---------- peça de jogo: <button class="peca"> ----------
   O reset fica em :where() (especificidade zero): fundo, borda e preenchimento próprios
   de cada peça (.letter, .opt, .tile, .fig...) em estilos.css continuam valendo. */
:where(.peca){ border:0; background:none; padding:0; margin:0; color:inherit; }
.peca{
  appearance:none; -webkit-appearance:none;
  cursor:pointer; touch-action:manipulation; /* fonte: estilos.css já tem button{font:inherit} */
  min-width:var(--tap-kid); min-height:var(--tap-kid);
  display:inline-flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none;
}
.peca[aria-disabled="true"], .peca:disabled{ cursor:default; }
.peca.is-selected{ outline:4px solid var(--coral-btn); outline-offset:3px; }
.peca.is-wrong{ box-shadow:0 0 0 4px var(--err-bg), 0 0 0 6px var(--err); }
.peca.is-correct{ box-shadow:0 0 0 4px var(--ok-bg), 0 0 0 6px var(--ok); }

/* botões do adulto (mín. 48 px) */
.restart, .reset, .btn-ouvir, .speaker, .voice, .nxt, .game-tabs button, .tab{ min-height:var(--tap); }
.restart{ padding:10px 16px; }
.voice{ width:54px; height:54px; }

/* ---------- abas: grade de cartões (menu de jogos), nunca fila rolável ----------
   Cada aba vira um cartão com a figura em cima e o nome embaixo; 2 colunas no celular. */
.games .tabs{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:10px;
  margin:0 0 18px; overflow:visible;
}
.games .tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  min-width:0; min-height:84px; padding:10px 8px; border-radius:16px;
  white-space:normal; text-align:center; line-height:1.2; overflow-wrap:anywhere;
}
.games .tab .emoji-dec{ display:block; font-size:1.9rem; line-height:1; }
.games .tab.active .emoji-dec{ filter:drop-shadow(0 1px 0 rgba(0,0,0,.15)); }
@media (max-width:720px){
  .games .tabs{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  /* no celular: figura ao lado do nome, para o menu não empurrar o jogo para longe */
  .games .tab{ flex-direction:row; justify-content:flex-start; gap:8px; min-height:56px; padding:8px 10px; font-size:14px; text-align:left; }
  .games .tab .emoji-dec{ font-size:1.6rem; flex:none; }
}

/* ---------- barra: Modo calmo + som ----------
   Fica no fluxo da página (não gruda no topo): assim nunca cobre abas nem peças. */
.ak-bar, .games .ak-bar{
  position:relative; top:auto; z-index:40; display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  margin:0 0 14px; padding:8px 0;
  background:var(--paper,#FBF4E9);
}
.ak-bar button{
  font-family:var(--display); font-weight:600; font-size:.95rem;
  min-height:var(--tap); padding:10px 16px; border-radius:999px; cursor:pointer;
  border:2px solid var(--line); background:var(--card,#fff); color:var(--ink); touch-action:manipulation;
}
.ak-bar__calmo[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ak-bar__live{ position:absolute; left:-9999px; }

/* ---------- gate "▶ Começar" ---------- */
.ak-gate{
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  margin:0 0 18px; padding:18px; background:var(--card,#fff); border:1px solid var(--line); border-radius:var(--radius,20px);
}
.ak-gate[hidden]{ display:none; }
.ak-gate__btn{
  font-family:var(--display); font-weight:700; font-size:1.5rem; min-height:72px; min-width:min(100%,280px);
  padding:14px 34px; border-radius:999px; border:0; cursor:pointer; touch-action:manipulation;
  background:var(--coral-btn); color:#fff; box-shadow:0 5px 0 #9E2F10;
}
.ak-gate__btn:active{ transform:translateY(3px); box-shadow:0 2px 0 #9E2F10; }
.ak-gate__txt{ margin:0; color:var(--ink-soft); font-weight:600; }

/* ---------- bloco "Para o adulto" ---------- */
.adulto{
  margin:0 0 18px; padding:14px 18px; border-radius:var(--radius,20px);
  background:#FFF9EC; border:1px solid #F0DDA8;
}
.adulto summary{ cursor:pointer; font-family:var(--display); font-weight:700; font-size:1.05rem; color:var(--ink); min-height:var(--tap); display:flex; align-items:center; gap:8px; list-style:none; }
.adulto summary::-webkit-details-marker{ display:none; }
.adulto summary::after{ content:"▾"; margin-left:auto; color:var(--ink-faint); }
.adulto[open] summary::after{ content:"▴"; }
.adulto p, .adulto ul{ margin:8px 0 0; color:var(--ink-soft); font-size:.95rem; line-height:1.55; }
.adulto ul{ padding-left:20px; }
.adulto li{ margin:3px 0; }
.adulto a{ color:var(--coral-text); font-weight:700; }

/* ---------- cartão de fim ---------- */
.ak-fim{
  margin:18px 0 0; padding:18px; border-radius:var(--radius,20px); text-align:center;
  background:var(--ok-bg); border:2px solid var(--ok);
}
.ak-fim[hidden]{ display:none; }
.ak-fim__t{ font-family:var(--display); font-weight:700; font-size:1.4rem; margin:0 0 6px; color:var(--ok); }
.ak-fim__real{ margin:0 0 12px; color:var(--ink); font-weight:600; }
.ak-fim__acoes{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.ak-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:var(--display); font-weight:600; font-size:1rem; min-height:var(--tap); padding:10px 20px;
  border-radius:999px; border:2px solid var(--coral-btn); background:var(--coral-btn); color:#fff;
  cursor:pointer; text-decoration:none; touch-action:manipulation;
}
.ak-btn--kid{ min-height:var(--tap-kid); font-size:1.15rem; padding:12px 24px; }
.ak-btn--ghost{ background:var(--card,#fff); color:var(--coral-text); }
.game.is-done .stage, .game.is-done .grid, .game.is-done .options{ opacity:.85; }

/* ---------- progresso em bolinhas ---------- */
.ak-progresso{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:10px 0 0; }
.ak-progresso span{ width:16px; height:16px; border-radius:50%; background:rgba(51,39,30,.15); }
.ak-progresso span.on{ background:var(--sage); }

/* ---------- marca de acerto (modo calmo / reduced-motion) ---------- */
.ak-marca{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; pointer-events:none; z-index:99;
  font-family:var(--display); font-weight:700; font-size:clamp(5rem,20vw,9rem); color:var(--ok);
}
.ak-marca.show{ display:flex; }

/* ---------- BNCC: campo TS sem roxo (mostarda) ---------- */
.bncc.bncc--ts, .bncc-badge.bncc--ts{ background:#FBEFC9; color:#8A6400; border-color:#E8CF7A; }
.bncc-line{ margin:0 0 14px; }
.bncc-line small{ color:var(--ink-faint); font-weight:600; }

/* ---------- ajustes de alvo / bugs pontuais ---------- */
.ring{ pointer-events:none; }                       /* anel não rouba o toque (B16) */
.face-part, svg.face [data-part]{ cursor:pointer; }
svg.face .foco{ fill:none; stroke:var(--coral-btn); stroke-width:6; opacity:0; pointer-events:none; }
.star{ min-width:var(--tap-kid); min-height:var(--tap-kid); display:inline-flex; align-items:center; justify-content:center; }
.item{ min-width:var(--tap-kid); min-height:var(--tap-kid); display:inline-flex; align-items:center; justify-content:center; padding:4px; border-radius:16px; }
.item.is-selected{ background:rgba(244,195,78,.35); }
.item.sorted{ min-width:auto; min-height:auto; }
.zone-btn{
  display:block; width:100%; font-family:var(--display); font-weight:700; font-size:1.05rem; text-align:center;
  min-height:var(--tap); border:0; background:none; border-radius:12px; cursor:pointer; color:var(--ink); margin-bottom:8px; touch-action:manipulation;
}
.zone.armed .zone-btn{ background:rgba(244,195,78,.35); }
.zone{ border-color:rgba(51,39,30,.45); }             /* borda tracejada com contraste */
.card{ display:block; position:relative; width:100%; aspect-ratio:1; }
.card .card-inner{ position:absolute; inset:0; }
.card.matched{ cursor:default; }
.card.matched .card-back::after{ content:"✓"; position:absolute; right:6px; top:4px; font-size:1rem; color:var(--ok); font-family:var(--display); font-weight:700; }
.colorBox.is-correct::after, .shapeOpt.is-correct::after{ content:"✓"; position:absolute; right:6px; top:2px; font-size:1.3rem; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.5); font-family:var(--display); font-weight:700; }
.colorBox, .shapeOpt{ position:relative; }
.opt.wrong, .letter.wrong, .fig.err, .num-btn.err{ border-color:var(--err); background:var(--err-bg); }
.opt.correct, .opt.right, .letter.correct{ border-color:var(--ok); background:var(--ok-bg); }
.mix-swatch{ min-width:var(--tap-kid); min-height:var(--tap-kid); }
.fruit{ min-width:var(--tap-kid); min-height:var(--tap-kid); }
.trace-stage{ width:min(340px,100%); }
.trace-info small{ display:block; color:var(--ink-faint); font-weight:600; font-size:.85rem; }
.pool .drop{ position:absolute; font-size:2.4rem; line-height:1; transform:translate(-50%,-50%); transition:top .9s ease; }
.pool .drop.afunda{ top:120px; }
.pool .drop.flutua{ top:26px; }
.agesel .agetab{ min-height:var(--tap); display:inline-flex; align-items:center; justify-content:center; }
.counter .lbl{ display:block; }

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce){
  .celebrate{ display:none !important; }
  .pop, .shake, .glow, .mix-result.spin, .mix-result.pop, .item.sorted, .ring.show, .opt.correct, .opt.wrong, .letter.correct, .letter.wrong, .star.lit, .fig.err, .num-btn.err{ animation:none !important; }
  .card-inner{ transition:none !important; }
}

/* ---------- MODO CALMO (html[data-modo="calmo"]) ---------- */
html[data-modo="calmo"] main.games, html[data-modo="calmo"] main.wrap{ filter:saturate(.72); }
html[data-modo="calmo"] body::after{ display:none; }                   /* sem grão */
html[data-modo="calmo"] .celebrate{ display:none !important; }         /* sem confete */
html[data-modo="calmo"] .pop, html[data-modo="calmo"] .shake, html[data-modo="calmo"] .glow,
html[data-modo="calmo"] .mix-result.spin, html[data-modo="calmo"] .mix-result.pop,
html[data-modo="calmo"] .item.sorted, html[data-modo="calmo"] .ring.show,
html[data-modo="calmo"] .opt.correct, html[data-modo="calmo"] .opt.wrong,
html[data-modo="calmo"] .letter.correct, html[data-modo="calmo"] .letter.wrong,
html[data-modo="calmo"] .star.lit, html[data-modo="calmo"] .fig.err, html[data-modo="calmo"] .num-btn.err{ animation:none !important; }
html[data-modo="calmo"] .card-inner{ transition:none; }
html[data-modo="calmo"] .hero{ background:var(--card); box-shadow:none; }
html[data-modo="calmo"] .game, html[data-modo="calmo"] .game:hover{ box-shadow:none; }
html[data-modo="calmo"] .hero__eyebrow{ display:none; }
html[data-modo="calmo"] .inst .txt, html[data-modo="calmo"] .game .inst, html[data-modo="calmo"] .instrucao p{ font-size:1.25rem; }
html[data-modo="calmo"] .game h2 .emoji-dec, html[data-modo="calmo"] .game-emoji{ display:none; }

/* Títulos e instruções permanecem legíveis sem comprimir os alvos infantis. */
.game{ scroll-margin-top:88px; }
.ak-bar button{ line-height:1.3; }
.ak-btn:hover{ color:#fff; text-decoration:none; background:var(--coral-btn-hover); }
.ak-btn--ghost:hover{ color:var(--coral-text); background:var(--paper-2); }
@media (max-width:480px){
  .game{ padding:18px 16px; }
  .hero{ padding:24px 20px; }
  .stage{ padding:14px 10px; gap:12px; }
  .instrucao{ flex-wrap:wrap; }
  .instrucao p{ min-width:min(180px, 100%); }
  .ak-bar{ gap:6px; }
  .ak-bar button{ padding:10px 12px; }
  .ak-fim__acoes .ak-btn{ width:100%; }
  .cmp-btn{ min-width:120px; }
}

/* Ajustes de voz: o painel usa a largura da barra, mesmo em 320 px. */
.ak-voice{ margin-left:auto; }
.ak-voice > summary{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--tap); padding:10px 16px; border:2px solid var(--line-strong);
  border-radius:999px; background:var(--card); color:var(--ink);
  font-family:var(--display); font-size:.95rem; font-weight:600; line-height:1.3;
  list-style:none; cursor:pointer; touch-action:manipulation;
}
.ak-voice > summary::-webkit-details-marker{ display:none; }
.ak-voice > summary::after{ content:"▾"; font-size:.7rem; }
.ak-voice[open] > summary{ background:var(--paper-2); }
.ak-voice[open] > summary::after{ content:"▴"; }
.ak-voice__panel{
  position:absolute; right:0; top:calc(100% + 6px); width:min(340px, 100%);
  max-height:calc(100dvh - var(--head-offset, 64px) - 108px); overflow-y:auto;
  overscroll-behavior:contain; padding:18px; background:var(--card);
  border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow-lg);
}
.ak-voice__panel label{ display:block; margin-bottom:12px; color:var(--ink-soft); font-weight:800; font-size:.9rem; }
.ak-voice__panel select{
  display:block; width:100%; min-width:0; min-height:var(--tap); margin-top:4px;
  padding:10px 12px; border:2px solid var(--line-strong); border-radius:12px;
  background:var(--card); color:var(--ink); font-size:1rem;
}
.ak-voice__panel .ak-voice__teste{ width:100%; border-color:var(--coral-btn); background:var(--coral-btn); color:#fff; }
.ak-voice__panel p{ margin-top:12px; color:var(--ink-soft); font-size:.85rem; line-height:1.5; }
@media (max-width:380px){
  .ak-bar > button, .ak-voice > summary{ padding:10px; font-size:.85rem; }
  .ak-voice > summary{ gap:4px; }
}

/* ---------- primeira tela no celular: "Começar" e o jogo sem rolar ---------- */
@media (max-width:520px){
  main.games{ padding-top:10px; }
  main.games .ak-bar{ margin-bottom:8px; padding:4px 0; }
  main.games .hero{ padding:14px 16px; margin-bottom:12px; }
  main.games .hero__eyebrow{ margin-bottom:4px; }
  main.games .hero__title{ font-size:1.65rem; margin-bottom:4px; }
  main.games .hero__sub{ font-size:.95rem; line-height:1.4; }
  /* seletor de idade numa linha só, rolável (a idade atual é trazida para a vista pelo jogos-comum.js) */
  main.games .agesel{ flex-wrap:nowrap; overflow-x:auto; margin-top:10px; padding:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  main.games .agesel::-webkit-scrollbar{ display:none; }
  main.games .agetab{ flex:none; padding:10px 14px; white-space:nowrap; }
  main.games .ak-gate{ padding:12px; margin-bottom:12px; gap:6px; }
  main.games .ak-gate__btn{ min-height:64px; font-size:1.35rem; }
}

/* ---------- consertos de jogo (passo 2.14) ---------- */
/* Ligue os pontos: 5 pontos grandes; o próximo pulsa (anel separado, que não rouba o toque) */
svg.pontos{ width:100%; max-width:420px; height:auto; display:block; margin:0 auto; overflow:visible; touch-action:manipulation; }
.dot{ cursor:pointer; }
.dot circle{ fill:#fff; stroke:var(--coral-btn); stroke-width:4; }
.dot text{ font-family:var(--display); font-size:28px; font-weight:700; fill:var(--coral-text); text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.dot.next circle{ fill:#FFF3C9; stroke-width:6; }
.dot.done circle{ fill:var(--coral-btn); }
.dot.done text{ fill:#fff; }
.pontos .line{ stroke:var(--sage); stroke-width:6; fill:none; stroke-linecap:round; }
.pontos .halo{ fill:none; stroke:#E8A93A; stroke-width:5; pointer-events:none; transform-box:fill-box; transform-origin:center; animation:ak-halo 1.2s ease-out infinite; }
.pontos .casa-extra{ pointer-events:none; }
@keyframes ak-halo{ from{ transform:scale(1); opacity:.95; } to{ transform:scale(1.45); opacity:0; } }
@media (prefers-reduced-motion: reduce){ .pontos .halo{ animation:none; transform:scale(1.18); } }
html[data-modo="calmo"] .pontos .halo{ animation:none; transform:scale(1.18); }

/* Trace a letra: a página não rola enquanto o dedo traça */
.trace-stage, .trace-stage canvas{ touch-action:none; overscroll-behavior:contain; }
.trace-stage{ -webkit-user-select:none; user-select:none; }

/* O que vem depois?: cartões 2×2 de largura fixa, texto quebra linha */
#seqTiles{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; width:min(100%, 340px); margin:0 auto; }
#seqTiles .steptile{ min-width:0; width:100%; min-height:96px; padding:10px 8px; justify-content:center; background:var(--coral-btn); color:#fff; }
#seqTiles .steptile .l{ font-size:.95rem; white-space:normal; overflow-wrap:anywhere; hyphens:auto; }
.seqslots{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:6px; width:min(100%, 480px); margin:0 auto; }
.seqslot{ width:auto; min-width:0; min-height:76px; }
.seqslot .l{ font-size:.7rem; overflow-wrap:anywhere; }

/* Encaixe a forma: alvo e 3 opções na mesma dobra */
#formaStage{ gap:10px; padding-block:14px; }
#formaStage .target{ font-size:1rem; }
#formaStage .target .big{ display:flex; justify-content:center; font-size:1rem; margin:0 0 4px; }
#formaStage .target .big svg{ width:104px; height:104px; }
@media (max-width:520px){
  #formaStage .shapeOpt{ width:clamp(72px, 22vw, 112px); height:clamp(72px, 22vw, 112px); }
  #formaStage .shapeOpt svg{ width:76%; height:76%; }
}

/* ---------- modo jogo (passo 2.14b): html.ak-jogando ----------
   Ao tocar "Começar" somem cabeçalho do site, hero, selos BNCC, link da ficha,
   bloco do adulto e tudo depois do jogo. Fica uma faixa pequena no canto
   (⚙ ajustes e jogos · Tela cheia · ✕ Sair), no fluxo da página: nada fixo
   por cima das peças. O jogo ocupa o resto da altura da tela. */
.ak-jogo{ display:none; }
html.ak-jogando body > header, html.ak-jogando body > footer, html.ak-jogando .skip,
html.ak-jogando main.games > :not(.ak-jogo):not(.game):not(.tabs):not(.ak-bar),
html.ak-jogando .game .bncc-line, html.ak-jogando .game .ativ__link, html.ak-jogando .game .bncc-badge{ display:none !important; }
html.ak-jogando:not(.ak-menu) main.games > .tabs, html.ak-jogando:not(.ak-menu) main.games > .ak-bar{ display:none; }
html.ak-jogando main.games{ max-width:none; padding:8px clamp(8px, 2vw, 32px) 12px; }
html.ak-jogando .ak-jogo{
  display:flex; justify-content:flex-end; align-items:center; gap:8px; flex-wrap:wrap;
  margin:0 0 8px;
}
.ak-jogo button{
  font-family:var(--display); font-weight:600; font-size:.95rem; line-height:1.2;
  min-height:var(--tap); min-width:var(--tap); padding:8px 14px; border-radius:999px; cursor:pointer;
  border:2px solid var(--line-strong, var(--line)); background:var(--card,#fff); color:var(--ink); touch-action:manipulation;
}
.ak-jogo .ak-jogo__menu{ margin-right:auto; padding:4px; font-size:1.7rem; line-height:1; }
.ak-jogo .ak-jogo__menu[aria-expanded="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.ak-jogo .ak-jogo__sair{ border-color:var(--coral-btn); color:var(--coral-text); }
.ak-jogo button:focus-visible{ outline:3px solid var(--coral-btn); outline-offset:3px; box-shadow:var(--focus); }
html.ak-jogando.ak-menu main.games > .ak-bar{ margin-bottom:8px; }
/* o jogo ativo preenche a tela abaixo da faixa (56 px + margens) */
html.ak-jogando .games-tabs .game.active{ min-height:calc(100vh - 80px); min-height:calc(100dvh - 80px); }
@media (max-width:520px){
  html.ak-jogando .ak-jogo button{ padding:8px 12px; font-size:.9rem; }
  html.ak-jogando .ak-jogo .ak-jogo__menu{ padding:4px; font-size:1.7rem; }
  html.ak-jogando .game{ padding:14px 12px; }
}

/* telão / lousa / computador: coluna sem teto e peças que crescem com a tela (clamp) */
@media (min-width:900px){
  html.ak-jogando .game{ padding:clamp(18px, 2vw, 40px); }
  /* conteúdo do jogo no meio da altura, sem um vão grande embaixo */
  html.ak-jogando .games-tabs .game.active{ display:flex; flex-direction:column; justify-content:center; }
  html.ak-jogando .game.active > *{ width:100%; flex:none; }
  html.ak-jogando .game.active > .grid, html.ak-jogando .game.active > .diferentes, html.ak-jogando .game.active > .trace-stage, html.ak-jogando .game.active > .trace-bar{ margin-inline:auto; }
  html.ak-jogando .game h2{ font-size:clamp(1.5rem, 2.4vw, 2.6rem); }
  html.ak-jogando .inst .txt, html.ak-jogando .instrucao p, html.ak-jogando .q{ font-size:clamp(1.05rem, 1.7vw, 2rem); }
  html.ak-jogando .game-head p, html.ak-jogando .ghead p{ font-size:clamp(1rem, 1.4vw, 1.6rem); }
  html.ak-jogando .stage{ min-height:clamp(280px, 50vh, 760px); gap:clamp(18px, 2vw, 40px); }
  /* 2–3 anos */
  html.ak-jogando .colorBox{ width:clamp(118px, min(14vw, 26vh), 300px); height:clamp(118px, min(14vw, 26vh), 300px); font-size:clamp(3.4rem, min(6vw, 11vh), 8rem); border-radius:clamp(26px, 2.4vw, 48px); }
  html.ak-jogando .shapeOpt, html.ak-jogando #formaStage .shapeOpt{ width:clamp(112px, min(14vw, 24vh), 280px); height:clamp(112px, min(14vw, 24vh), 280px); }
  html.ak-jogando .shapeOpt svg{ width:80%; height:80%; }
  html.ak-jogando #formaStage .target .big svg{ width:clamp(104px, 16vh, 220px); height:clamp(104px, 16vh, 220px); }
  html.ak-jogando .countItem{ font-size:clamp(3.6rem, min(9vw, 17vh), 10rem); }
  html.ak-jogando .animal{ width:clamp(132px, min(15vw, 30vh), 300px); }
  html.ak-jogando .animal .emoji{ font-size:clamp(3.6rem, min(7vw, 13vh), 8rem); }
  html.ak-jogando .animal .nome{ font-size:clamp(1rem, 1.4vw, 1.6rem); }
  html.ak-jogando svg.face{ width:min(100%, 62vh); height:auto; }
  /* 3–4 anos e extras: memória (4 colunas; 3 fileiras cabem na altura) */
  html.ak-jogando .grid{ max-width:min(100%, calc((100vh - 400px) * 4 / 3)); max-width:min(100%, calc((100dvh - 400px) * 4 / 3)); gap:clamp(12px, 1.4vw, 24px); }
  html.ak-jogando .grid .card{ font-size:clamp(1rem, 2.4vw, 3rem); }
  html.ak-jogando .mix-swatch{ min-width:clamp(64px, 11vw, 200px); min-height:clamp(64px, 11vw, 200px); font-size:clamp(1rem, 1.6vw, 1.8rem); }
  html.ak-jogando .sw-emoji{ font-size:clamp(2rem, 4vw, 4.4rem); }
  html.ak-jogando .zone-items .item, html.ak-jogando .tray .item{ font-size:clamp(2.4rem, 5vw, 6rem); }
  /* 4–5 anos */
  html.ak-jogando .letter{ width:clamp(96px, min(13vw, 24vh), 260px); height:clamp(96px, min(13vw, 24vh), 260px); font-size:clamp(3.2rem, min(7vw, 13vh), 9rem); border-radius:clamp(24px, 2vw, 44px); }
  html.ak-jogando .letters, html.ak-jogando .options{ gap:clamp(14px, 1.6vw, 32px); }
  html.ak-jogando .opt{ min-width:clamp(88px, min(12vw, 22vh), 240px); min-height:clamp(88px, min(12vw, 22vh), 240px); }
  html.ak-jogando .opt .big, html.ak-jogando .opt .e{ font-size:clamp(2.6rem, min(5vw, 9vh), 6.5rem); }
  html.ak-jogando .opt .lbl, html.ak-jogando .opt .l{ font-size:clamp(.9rem, 1.3vw, 1.6rem); }
  html.ak-jogando .stars-grid{ max-width:min(100%, 1200px); margin-inline:auto; }
  html.ak-jogando .star{ font-size:clamp(2.6rem, min(6vw, 11vh), 7rem); }
  html.ak-jogando .count-display{ font-size:clamp(4rem, 8vh, 8rem); min-height:auto; }
  html.ak-jogando .seq-row{ font-size:clamp(2.6rem, 5vw, 6rem); }
  html.ak-jogando .seq-cell, html.ak-jogando .seq-missing{ width:clamp(64px, 9vw, 160px); height:clamp(64px, 9vw, 160px); }
  /* 5–6 anos */
  html.ak-jogando .wordemoji, html.ak-jogando .food{ font-size:clamp(4rem, 12vh, 9rem); }
  html.ak-jogando .tile{ min-width:clamp(62px, min(9vw, 18vh), 180px); height:clamp(72px, min(9vw, 18vh), 180px); font-size:clamp(2rem, min(5vw, 9vh), 5rem); border-radius:clamp(14px, 1.4vw, 28px); }
  html.ak-jogando .slot{ width:clamp(62px, min(7vw, 13vh), 140px); height:clamp(72px, min(8vw, 15vh), 160px); font-size:clamp(2rem, 4vw, 4.4rem); }
  html.ak-jogando .sumeq{ font-size:clamp(1.9rem, 3vw, 3.6rem); }
  html.ak-jogando .grp{ font-size:clamp(2.3rem, 4vw, 4.6rem); }
  html.ak-jogando #seqTiles{ width:min(100%, 760px); }
  html.ak-jogando #seqTiles .steptile{ min-height:clamp(96px, 16vh, 180px); }
  html.ak-jogando .steptile .e{ font-size:clamp(2.2rem, 4vw, 4.4rem); }
  html.ak-jogando #seqTiles .steptile .l{ font-size:clamp(.95rem, 1.3vw, 1.5rem); }
  html.ak-jogando .seqslots{ width:min(100%, 1000px); }
  html.ak-jogando .seqslot{ min-height:clamp(76px, 13vh, 150px); }
  html.ak-jogando .seqslot .e{ font-size:clamp(2rem, 3.4vw, 4rem); }
  /* extras */
  html.ak-jogando .diferentes{ max-width:min(100%, calc((100vh - 300px) * 2)); max-width:min(100%, calc((100dvh - 300px) * 2)); gap:clamp(14px, 1.6vw, 32px); }
  html.ak-jogando .fig{ font-size:clamp(3.4rem, min(7vw, 13vh), 9rem); }
  html.ak-jogando .trace-stage, html.ak-jogando .trace-bar{ width:min(100%, 60vh, 640px); }
  html.ak-jogando .cmp-btn{ min-width:clamp(150px, 22vw, 420px); min-height:clamp(190px, 40vh, 520px); }
  html.ak-jogando .num-btn{ width:clamp(72px, min(9vw, 14vh), 160px); height:clamp(72px, min(9vw, 14vh), 160px); font-size:clamp(1.7rem, 3.4vw, 4rem); }
  /* interativas 2–4 */
  html.ak-jogando .fruit{ font-size:clamp(3.2rem, min(8vw, 15vh), 10rem); }
  html.ak-jogando svg.pontos{ max-width:min(100%, 70vh, 900px); }
}