:root{
  --fundo:#E4F2EA; --tinta:#1F2D3A; --suave:#56687A; --cartao:#FFFFFF; --slot:#C6DCCF;
  --vermelho:#E5484D; --amarelo:#F2B01E; --azul:#2F6FDB; --verde:#23965A; --roxo:#8B5CF6;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --fundo:#14212A; --tinta:#EAF2EE; --suave:#9DB0BC; --cartao:#1F2F3A; --slot:#2B4050; }
}
:root[data-theme="dark"]{ --fundo:#14212A; --tinta:#EAF2EE; --suave:#9DB0BC; --cartao:#1F2F3A; --slot:#2B4050; }
*,*::before,*::after{box-sizing:inherit}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px); background:var(--fundo)}
body{margin:0; min-height:100%; background:var(--fundo); color:var(--tinta);
  font-family:"Baloo 2", "Trebuchet MS", system-ui, sans-serif; -webkit-tap-highlight-color:transparent; user-select:none; -webkit-user-select:none}
main{max-width:560px; margin:0 auto; padding:16px 18px 28px; display:flex; flex-direction:column; min-height:100%}
button{font:inherit; color:inherit; cursor:pointer}
button:focus-visible{outline:3px solid var(--azul); outline-offset:3px}

/* Blocos de sílaba */
.linha{display:flex; flex-wrap:wrap; justify-content:center; gap:12px}
.bloco{font-family:"Andika", "Comic Sans MS", system-ui, sans-serif; font-weight:700;
  min-width:84px; height:84px; padding:0 14px; font-size:2.5rem; line-height:1;
  border:none; border-radius:14px; background:var(--c,var(--azul)); color:#fff;
  box-shadow:0 6px 0 rgba(0,0,0,.28); transition:transform .08s, box-shadow .08s, opacity .2s;
  display:inline-flex; align-items:center; justify-content:center}
.bloco.am{color:#1F2D3A}
.bloco:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.28)}
.bloco.fixo{background:var(--cartao); color:var(--tinta); box-shadow:0 6px 0 var(--slot)}
.bloco.off{opacity:.3; pointer-events:none}
.bloco.oculto{visibility:hidden}
.slot{min-width:84px; height:84px; border-radius:14px; border:3px dashed var(--suave);
  background:var(--slot); display:inline-flex; align-items:center; justify-content:center; padding:0}
.slot .bloco{margin:-3px}
.pop{animation:pop .35s ease-out}
.treme{animation:treme .4s}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes treme{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}

/* Início */
.titulo{margin:28px 0 6px}
.titulo .bloco{min-width:0; height:92px; font-size:3rem; pointer-events:none}
.titulo .bloco:nth-child(1){transform:rotate(-5deg)}
.titulo .bloco:nth-child(3){transform:rotate(4deg)}
.sub{text-align:center; color:var(--suave); font-size:1.15rem; margin:18px 0 20px}
.jogos{display:flex; flex-direction:column; gap:14px}
.jogo{display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  background:var(--cartao); border:none; border-radius:18px; padding:14px 18px;
  box-shadow:0 5px 0 var(--slot)}
.jogo:active{transform:translateY(3px); box-shadow:0 2px 0 var(--slot)}
.jogo .ic{font-size:2.6rem; width:56px; text-align:center}
.jogo b{display:block; font-size:1.35rem; font-weight:800; line-height:1.15}
.jogo small{color:var(--suave); font-size:1rem}
.caixa{display:flex; justify-content:center; margin-top:18px}
.caixa div{display:inline-flex; background:var(--cartao); border-radius:14px; padding:4px; gap:4px}
.caixa button[data-v]{font-family:"Baloo 2",sans-serif; font-size:1.05rem}
.caixa button{white-space:nowrap; border:none; background:none; border-radius:10px; padding:6px 18px;
  font-family:"Andika", sans-serif; font-weight:700; font-size:1.3rem; color:var(--suave)}
.caixa button[aria-pressed="true"]{background:var(--verde); color:#fff}
.nota{text-align:center; color:var(--suave); font-size:.95rem; margin-top:10px}

/* Jogo */
.topo{display:flex; align-items:center; justify-content:space-between; gap:10px}
.voltar{border:none; background:var(--cartao); border-radius:12px; padding:6px 14px; font-weight:800; font-size:1.05rem}
.pontos{display:flex; gap:5px}
.pontos i{width:11px; height:11px; border-radius:50%; background:var(--slot)}
.pontos i.feito{background:var(--verde)}
.pontos i.agora{background:var(--amarelo)}
.estrelas{font-weight:800; font-size:1.2rem; white-space:nowrap}
.palco{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; padding:18px 0}
.pergunta{font-size:1.25rem; font-weight:800; text-align:center; margin:0}
.figura{font-size:6.5rem; line-height:1; background:none; border:none; padding:6px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.figura:active{transform:scale(.94)}
.dica{color:var(--suave); font-size:.95rem; margin-top:-18px}
.alto{width:130px; height:130px; border-radius:50%; border:none; background:var(--azul); color:#fff;
  font-size:3.6rem; box-shadow:0 7px 0 rgba(0,0,0,.28)}
.alto:active{transform:translateY(4px); box-shadow:0 3px 0 rgba(0,0,0,.28)}
.revela{min-height:48px; font-family:"Andika",sans-serif; font-weight:700; font-size:1.8rem; text-align:center}

/* Fim */
.fim{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; text-align:center}
.fim .grande{font-size:2.6rem; letter-spacing:4px; line-height:1.3; max-width:320px}
.fim h2{margin:0; font-size:2rem; font-weight:800}
.fim p{margin:0; color:var(--suave); font-size:1.15rem}
.acao{border:none; border-radius:16px; padding:14px 26px; font-weight:800; font-size:1.25rem;
  background:var(--verde); color:#fff; box-shadow:0 5px 0 rgba(0,0,0,.25); min-width:240px}
.acao.sec{background:var(--cartao); color:var(--tinta); box-shadow:0 5px 0 var(--slot)}
.estrela-in{display:inline-block; animation:pop .4s both}
@media (prefers-reduced-motion: reduce){ .pop,.treme,.estrela-in{animation:none} .bloco,.jogo{transition:none} }
/* Gravação */
.grav-card{background:var(--cartao); border-radius:16px; padding:12px 16px; margin:14px 0 4px; font-size:1.02rem; line-height:1.4}
.grav-card p{margin:0 0 6px} .grav-card p:last-child{margin:0}
.filtros{display:flex; gap:8px; margin:14px 0 4px}
.filtros button{border:none; border-radius:12px; padding:6px 14px; font-weight:800; background:var(--cartao); color:var(--suave)}
.filtros button[aria-pressed="true"]{background:var(--verde); color:#fff}
.grav-sec{font-size:1.2rem; font-weight:800; margin:18px 0 8px}
.grav-lista{display:flex; flex-direction:column; gap:8px}
.grav-linha{display:flex; align-items:center; gap:8px; background:var(--cartao); border-radius:14px; padding:8px 10px 8px 14px; scroll-margin:90px}
.grav-linha.prox{outline:3px solid var(--amarelo)}
.grav-rot{flex:1; min-width:0; display:flex; align-items:center; gap:8px; font-family:"Andika","Comic Sans MS",sans-serif; font-weight:700; font-size:1.6rem}
.grav-rot .em{font-size:1.6rem}
.grav-est{font-family:"Baloo 2",sans-serif; font-weight:600; font-size:.9rem; color:var(--suave); white-space:nowrap}
.grav-est.ok{color:var(--verde)} .grav-est.pend{color:#B7791F}
.ico{width:50px; height:50px; flex:none; border:none; border-radius:12px; background:var(--slot); font-size:1.35rem; display:inline-flex; align-items:center; justify-content:center}
.ico.mic{background:var(--vermelho); color:#fff}
.ico.mic.ativo{background:#9F1D22; animation:pulsa 1s infinite}
@keyframes pulsa{50%{transform:scale(1.08)}}
.barra-salvar{position:sticky; bottom:0; margin-top:16px; padding:10px 0 12px; background:var(--fundo); display:flex; flex-direction:column; align-items:center; gap:6px}
.barra-salvar .acao{width:100%; min-width:0}
.barra-salvar .acao:disabled{opacity:.6}
.status{min-height:1.2em; text-align:center; color:var(--suave); font-size:.98rem}
.aviso{background:#FDECEC; color:#7A1F22; border-radius:12px; padding:10px 14px; font-size:1rem; margin-top:10px}
.jogo.gravar .ic{font-size:2.3rem}
@media (prefers-reduced-motion: reduce){ .ico.mic.ativo{animation:none} }
/* Tanque e corrida */
.tanque{display:flex; align-items:center; gap:8px; margin-top:10px}
.tq-ic{font-size:1.3rem}
.tq-barra{flex:1; height:16px; border-radius:10px; background:var(--slot); overflow:hidden; display:block}
.tq-barra i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--amarelo),var(--vermelho)); border-radius:10px; transition:width .5s ease-out}
.tq-barra.pulso{animation:pop .45s}
.tq-barra.mini{height:10px; margin-top:6px}
.corrida-card.cheio{background:var(--amarelo); color:#1F2D3A; box-shadow:0 5px 0 #B7791F}
.corrida-card.cheio small{color:#3D2E08}
.link-pais{border:none; background:none; color:var(--suave); text-decoration:underline; font-size:.95rem; padding:6px}
.carro-grande{font-size:5.5rem; line-height:1}
.corrida{display:flex; flex-direction:column; gap:10px}
.hud{display:flex; align-items:center; gap:12px}
.hud-tempo{flex:1; height:18px; border-radius:10px; background:var(--slot); overflow:hidden}
.hud-tempo i{display:block; height:100%; width:100%; background:var(--verde); border-radius:10px}
.hud-tempo i.acabando{background:var(--amarelo)}
.hud-moedas{font-weight:800; font-size:1.3rem; min-width:70px; text-align:right}
.pista-caixa{position:relative; border-radius:18px; overflow:hidden}
#pista{display:block; width:100%; touch-action:none}
.aviso-pista{position:absolute; left:0; right:0; top:28%; text-align:center; font-weight:800; font-size:4.2rem; color:#fff; text-shadow:0 4px 0 rgba(0,0,0,.35); pointer-events:none}
.aviso-pista.conta{font-size:3rem; top:8%}
.segurar{position:relative; overflow:hidden; touch-action:none; -webkit-touch-callout:none}
.segurar #seg-fill{position:absolute; left:0; top:0; bottom:0; width:0; background:rgba(0,0,0,.2)}
.segurar b{position:relative}
.pais-tit{font-size:1.8rem; font-weight:800; margin:18px 0 0}
.cfg p{font-weight:800; margin:8px 0 6px !important}
.cfg + .cfg{margin-top:12px}
.pais-info{color:var(--suave); margin-top:14px !important}
.grav-card + .acao{margin-top:14px}
.hud-tempo i{transform-origin:left center; will-change:transform}
.controles{display:flex; gap:12px}
.ctrl{flex:1; height:84px; border:none; border-radius:18px; background:var(--azul); color:#fff; font-size:2.6rem;
  box-shadow:0 6px 0 rgba(0,0,0,.28); touch-action:none; -webkit-user-select:none; user-select:none}
.ctrl:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.28)}
.selo-teste{margin:14px auto 0; width:fit-content; background:var(--amarelo); color:#1F2D3A; font-weight:800; border-radius:12px; padding:4px 14px; font-size:.95rem; text-align:center}
.cfg .caixa div{display:flex; width:100%}
.cfg .caixa button{flex:1; padding:6px 4px; font-size:1.1rem}
.cfg p.pais-info{font-weight:600}
body.correndo{touch-action:none; overscroll-behavior:none}
.dica-pista{position:absolute; left:0; right:0; top:52%; text-align:center; font-weight:800; font-size:1.15rem; color:#fff;
  text-shadow:0 2px 0 rgba(0,0,0,.4); pointer-events:none; transition:opacity .6s}
.dica-pista.some{opacity:0}
/* HUD de corrida */
.pista-caixa{background:#1A1C1E}
.hud2{position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; gap:8px; pointer-events:none}
.h-bloco{background:rgba(12,14,16,.72); color:#fff; border-radius:12px; padding:5px 12px; min-width:74px; text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); font-family:"Baloo 2",system-ui,sans-serif; line-height:1.05; position:relative}
.h-bloco small{display:block; font-size:.72rem; font-weight:600; color:#AEB6BD; letter-spacing:.04em}
.h-bloco b{font-size:1.45rem; font-weight:800; font-variant-numeric:tabular-nums}
.h-bloco b.acabando{color:#FFC53D}
.h-moedas{display:flex; align-items:center; gap:8px; padding:6px 14px}
.h-moedas b{font-size:1.9rem}
.moeda-ic{display:inline-block; width:24px; height:24px; border-radius:50%; flex:none; vertical-align:middle;
  background:radial-gradient(circle at 35% 30%, #FFF3B0 0 12%, #F4C430 45%, #A8750C 100%); box-shadow:inset 0 0 0 2px rgba(120,80,5,.55), 0 1px 2px rgba(0,0,0,.4)}
.moeda-ic.grande{width:34px; height:34px}
#hud-mais{position:absolute; right:6px; top:-4px; font-style:normal; font-weight:800; color:#FFD65A; opacity:0; font-size:1.1rem}
#hud-mais.sobe{animation:sobe .7s ease-out}
@keyframes sobe{0%{opacity:1; transform:translateY(8px)}100%{opacity:0; transform:translateY(-22px)}}
.hud-linha{position:absolute; left:0; right:0; bottom:0; height:6px; background:rgba(0,0,0,.45)}
.hud-linha i{display:block; height:100%; width:100%; background:#34C07A; transform-origin:left center; will-change:transform}
.hud-linha i.acabando{background:#FFC53D}
.placar-moedas{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.placar-moedas > div{background:var(--cartao); border-radius:16px; padding:10px 18px; min-width:130px; display:flex; flex-direction:column; align-items:center; gap:2px}
.placar-moedas b{font-size:2rem; font-weight:800; line-height:1.1}
.placar-moedas small{color:var(--suave); font-size:.95rem}
.placar-moedas .moeda-ic{margin-bottom:2px}
.cofre-mini{display:inline-flex; align-items:center; gap:4px; font-weight:800; color:var(--tinta)}
.cofre-mini .moeda-ic{width:16px; height:16px}
@media (prefers-reduced-motion: reduce){ #hud-mais.sobe{animation:none} }
.aviso-pista{font-size:3.2rem}
.aviso-pista.conta{top:16%; font-size:2.8rem}
.placar-moedas{flex-wrap:nowrap; width:100%; max-width:380px}
.placar-moedas > div{flex:1; min-width:0; justify-content:flex-end}

.pilha{display:inline-flex; margin-bottom:2px}
.pilha .moeda-ic + .moeda-ic{margin-left:-14px}
/* Palco do Rock */
.palco-caixa{background:#07060B}
.palco-card.cheio{background:#7C3AED; color:#fff; box-shadow:0 5px 0 #4C1D95}
.palco-card.cheio small{color:#EDE9FE}
.escolha{display:flex; gap:12px; width:100%; max-width:380px}
.escolha .acao{flex:1; min-width:0; padding:14px 8px}
.acao.roxo{background:#7C3AED}
.mult{position:absolute; right:-8px; top:-10px; font-style:normal; font-weight:800; font-size:.95rem; padding:0 6px; border-radius:8px; color:#111}
.mult.m2{background:#22D3EE} .mult.m3{background:#FACC15} .mult.m4{background:#F43F5E; color:#fff}
/* Prêmios */
.premios-tit{text-align:center; margin-top:6px}
.premios-tit h2{margin:4px 0 0; font-size:2rem; font-weight:800}
.premios-tit p{margin:4px 0 0; color:var(--suave); font-size:1.1rem}
.grade-premios{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px}
.premio{border:none; border-radius:20px; background:var(--cartao); box-shadow:0 5px 0 var(--slot); padding:16px 8px 12px; display:flex; flex-direction:column; align-items:center; gap:4px}
.premio span{font-size:3.2rem; line-height:1}
.premio b{font-size:1.3rem; font-weight:800}
.premio:active{transform:translateY(3px); box-shadow:0 2px 0 var(--slot)}
.premio.trancado{opacity:.45}
.licao{position:absolute; left:10px; right:10px; bottom:12px; text-align:center; color:#fff; font-weight:800; font-size:1rem; pointer-events:none; text-shadow:0 2px 0 rgba(0,0,0,.5)}
.licao.pop{animation:pop .45s}
/* App unificado */
.secao{font-size:1.25rem; font-weight:800; margin:22px 0 10px}
#externo{position:fixed; inset:0; display:flex; flex-direction:column; background:var(--fundo); z-index:50;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
#externo[hidden]{display:none}
.ext-barra{display:flex; align-items:center; gap:10px; padding:8px 12px}
.ext-barra .ext-tq{flex:1; margin:0}
.ext-premio{width:46px; height:46px; border:none; border-radius:14px; background:var(--cartao); font-size:1.5rem; opacity:.55; flex:none}
.ext-premio.cheio{opacity:1; background:var(--amarelo); box-shadow:0 4px 0 #B7791F; animation:pulsa 1.2s infinite}
.ext-frame{flex:1; width:100%; border:0; background:#fff}
body.com-app{overflow:hidden}
@media (prefers-reduced-motion: reduce){ .ext-premio.cheio{animation:none} }
/* Leitura de frases */
.frase{display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:10px 12px; max-width:100%}
.palavra{font-family:"Andika","Comic Sans MS",sans-serif; font-weight:700; font-size:2.3rem; line-height:1.1; border:none; border-radius:12px;
  background:var(--cartao); color:var(--tinta); padding:6px 12px; box-shadow:0 4px 0 var(--slot)}
.palavra:active{transform:translateY(3px); box-shadow:0 1px 0 var(--slot)}
.ponto{font-family:"Andika",sans-serif; font-weight:700; font-size:2.3rem; margin-left:-6px}
.sim-nao{display:flex; gap:14px; width:100%; max-width:380px}
.resposta{flex:1; border:none; border-radius:18px; padding:14px 8px; font-weight:800; font-size:1.4rem; color:#fff; display:flex; flex-direction:column; align-items:center; gap:2px; box-shadow:0 6px 0 rgba(0,0,0,.25)}
.resposta span{font-size:2.4rem; line-height:1}
.resposta.sim{background:var(--verde)} .resposta.nao{background:var(--vermelho)}
.resposta:active{transform:translateY(4px); box-shadow:0 2px 0 rgba(0,0,0,.25)}
.resposta.off{opacity:.3; pointer-events:none}
.revela-frase{min-height:84px; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:1.2rem; text-align:center}
.em-grande{font-size:3.4rem; line-height:1; position:relative}
.em-grande.riscado::after{content:""; position:absolute; left:-6px; right:-6px; top:50%; height:6px; background:var(--vermelho); transform:rotate(-20deg); border-radius:3px}
.dica-leia{color:var(--suave)}
.frase-slots{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; min-height:64px}
.slot-p{display:inline-block; width:96px; height:56px; border-radius:12px; border:3px dashed var(--suave); background:var(--slot)}
.frase-pecas{display:flex; flex-wrap:wrap; justify-content:center; gap:10px}
.bloco-p{background:var(--c,var(--azul)); color:#fff; box-shadow:0 5px 0 rgba(0,0,0,.28); font-size:1.9rem}
.bloco-p.am{color:#1F2D3A}
.bloco-p.oculto{visibility:hidden}
@media (max-width:380px){ .palavra, .ponto{font-size:1.9rem} .bloco-p{font-size:1.6rem} }
/* Escrever */
.traco{gap:14px; justify-content:flex-start; padding-top:10px}
.ouvir-mini{border:none; background:var(--azul); color:#fff; border-radius:12px; font-size:1.2rem; padding:4px 10px; margin-left:6px; vertical-align:middle}
.fig-mini{font-size:2.6rem; line-height:1; margin:-6px 0}
.lousa{position:relative; width:100%; background:#FFFFFF; border-radius:18px; box-shadow:0 5px 0 var(--slot); overflow:hidden}
.lousa canvas{display:block}
.lousa #cv-tinta{position:absolute; left:0; top:0}
.traco-msg{min-height:28px; text-align:center; font-size:1.1rem; color:var(--suave)}
.traco-msg b{color:var(--verde); font-size:1.4rem}
.traco-bts{display:flex; gap:12px; width:100%}
.traco-bts .acao{flex:1; min-width:0}
/* Sem instruções escritas: sinais visuais */
.convida{position:relative; animation:convida 1.1s ease-in-out 3}
.convida::after{content:"👆"; position:absolute; right:-6px; bottom:-10px; font-size:2.2rem; animation:toca .9s ease-in-out 4; pointer-events:none}
@keyframes convida{50%{transform:scale(1.07)}}
@keyframes toca{0%,100%{transform:translate(0,0)}50%{transform:translate(-6px,-10px)}}
.ouvir-grande{border:none; background:var(--azul); color:#fff; border-radius:18px; font-size:2rem; padding:6px 22px; box-shadow:0 5px 0 rgba(0,0,0,.25)}
.selo-ok{font-size:2.4rem; line-height:1}
.frase.pisca{animation:piscaF .5s ease-in-out 2}
@keyframes piscaF{50%{opacity:.35}}
.estrelas-traco{font-size:1.8rem; letter-spacing:4px}
@media (prefers-reduced-motion: reduce){ .convida, .convida::after, .frase.pisca{animation:none} }

.acao.icone{font-size:2rem; padding:8px}
/* ===== Trem: mapa de mundos ===== */
.mapa{position:relative; margin-top:10px; padding-bottom:30px}
.mundo{background:var(--fundo); border-radius:24px; margin-bottom:16px; padding:12px 0 4px; box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--cor) 35%, transparent)}
.mundo.fechado{filter:grayscale(.85); opacity:.6}
.mundo-tit{display:flex; align-items:center; gap:10px; padding:0 16px; color:var(--cor)}
.mundo-tit span{font-size:2rem} .mundo-tit b{font-size:1.2rem; font-weight:800}
.trilha{position:relative; margin:0 6px}
.trilha svg{position:absolute; inset:0; width:100%; height:100%}
.trilha polyline{fill:none; stroke:var(--cor); stroke-width:6; stroke-dasharray:2 12; stroke-linecap:round; vector-effect:non-scaling-stroke; opacity:.55}
.no{position:absolute; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; border:none;
  background:var(--cor); color:#fff; box-shadow:0 6px 0 rgba(0,0,0,.25); display:flex; flex-direction:column; align-items:center; justify-content:center}
.no .no-ic{font-size:1.9rem; line-height:1}
.no .no-est{position:absolute; bottom:-22px; font-size:1rem; letter-spacing:1px; white-space:nowrap}
.no .no-est i{font-style:normal; color:rgba(0,0,0,.18)} .no .no-est i.on{color:#F2B01E}
.no.boss{width:84px; height:84px; background:#F2B01E}
.no.trancado{background:#B8C2CC; box-shadow:0 6px 0 rgba(0,0,0,.15)}
.no.atual{outline:5px solid #fff; animation:pulsa 1.4s infinite}
.no:active{transform:translate(-50%,-46%)}
.no.treme{animation:treme .4s}
.trem-marca{position:absolute; font-size:2.6rem; pointer-events:none; filter:drop-shadow(0 4px 2px rgba(0,0,0,.25)); z-index:2; animation:balanca 1.2s ease-in-out infinite}
@keyframes balanca{50%{transform:translateY(-5px)}}

/* ===== Trem: fase ===== */
.trem-palco{justify-content:flex-start; gap:0; padding:8px 0 10px}
.tfig{font-size:clamp(6.5rem,34vw,9.5rem); line-height:1; background:none; border:none; padding:0; margin-top:auto; transition:transform .12s}
.tfig:active{transform:scale(.93)}
.tblocobaixo{margin-top:auto; width:100%; display:flex; flex-direction:column; align-items:center; gap:18px}
.trilhos{display:flex; align-items:flex-end; justify-content:center; gap:6px; width:100%; padding-bottom:12px;
  background:repeating-linear-gradient(90deg,#7A5A3A 0 6px,transparent 6px 26px) bottom/100% 8px no-repeat; border-bottom:5px solid #7A5A3A}
.trilhos .loco{font-size:3rem; line-height:1}
.trilhos.parte{animation:parte 1.2s ease-in forwards}
@keyframes parte{to{transform:translateX(-115%)}}
.vagao{position:relative; min-width:74px; height:66px; padding:0 12px 10px; border-radius:12px; border:4px solid #1D2B53; background:#FFD166;
  display:inline-flex; align-items:center; justify-content:center; font-family:"Andika",sans-serif; font-weight:700; font-size:2rem; color:#1D2B53}
.vagao > i{position:absolute; bottom:-12px; width:18px; height:18px; border-radius:50%; background:#1D2B53; border:3px solid #8E9BB5}
.vagao > i:nth-of-type(1){left:10px} .vagao > i:nth-of-type(2){right:10px}
.vagao.vazio{background:transparent; border-style:dashed; border-color:#475776}
.vagao.cheio{background:#FFB4A2}
.vagao.longo{font-size:1.9rem; padding:0 14px 10px}
.vagao.usado{visibility:hidden}
.vagao:active{transform:translateY(3px)}
.patio{display:flex; flex-wrap:wrap; justify-content:center; gap:22px 12px; padding-bottom:14px}
.tfrase{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 14px; font-family:"Andika",sans-serif; font-weight:700; font-size:2.1rem}
.tfrase.grande{font-size:2.4rem; margin-top:auto}
.tpal{border:none; background:none; padding:2px 2px; font:inherit; border-radius:10px}
.tpal:active{background:rgba(0,0,0,.06)}
.tpal .s1{color:#2563EB} .tpal .s2{color:#DC2626}
.vagao .s1{color:#2563EB} .vagao .s2{color:#DC2626}
.tpal.nova{background:#FFF3C4}
.pt{color:#DC2626}
.lacuna{position:relative; display:inline-block; width:110px; height:56px; border:4px dashed #475776; border-radius:12px; margin-bottom:10px}
.lacuna > i{position:absolute; bottom:-12px; width:16px; height:16px; border-radius:50%; background:#475776}
.lacuna > i:nth-of-type(1){left:12px} .lacuna > i:nth-of-type(2){right:12px}
.tcartas{margin-top:auto; display:flex; gap:12px; justify-content:center; width:100%; padding-bottom:14px}
.tcarta{flex:1; max-width:120px; aspect-ratio:1; border-radius:18px; border:4px solid #1D2B53; background:#fff; font-size:3.4rem; box-shadow:0 6px 0 #1D2B53}
.tcarta.certa{background:#C8F2D4} .tcarta.off{opacity:.3}
.tcarta:active{transform:translateY(4px); box-shadow:0 2px 0 #1D2B53}
@media (max-width:370px){ .vagao{min-width:64px; font-size:1.7rem} .tfrase{font-size:1.8rem} }
.no.atual{animation:pulsaNo 1.4s infinite}
.no.treme{animation:tremeNo .4s}
@keyframes pulsaNo{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.08)}}
@keyframes tremeNo{0%,100%{transform:translate(-50%,-50%)}25%,75%{transform:translate(calc(-50% - 7px),-50%)}50%{transform:translate(calc(-50% + 7px),-50%)}}

.trem-palco{min-height:calc(100vh - 150px); min-height:calc(100dvh - 150px)}
.pontos i.rep{background:#FDBA74}
.pontos i.rep.feito{background:var(--verde)}
.pontos i.rep.agora{background:var(--amarelo)}
/* ===== Mapa-múndi em pixel art ===== */
.pix{font-family:"Pixelify Sans","Courier New",monospace; letter-spacing:.5px}
.mapa-hud{position:sticky; top:0; z-index:5; display:flex; justify-content:space-between; align-items:center; margin:-16px -18px 0; padding:10px 14px;
  background:#1B1B2A; color:#F7D02C; border-bottom:4px solid #0D0D16}
.mapa-hud .voltar{background:#2E2E45; color:#FFFFFF; border:3px solid #0D0D16; border-radius:6px; box-shadow:0 3px 0 #0D0D16; font-weight:700}
.hud-est{font-size:1.35rem; font-weight:700; text-shadow:2px 2px 0 #000}
.mapa-mundo{position:relative; margin:0 -18px -28px; overflow:hidden; background:#1B1B2A}
.mapa-mundo canvas{display:block; image-rendering:pixelated; image-rendering:crisp-edges}
.placa{position:absolute; z-index:2; background:#8B5A2B; color:#FFF3D6; border:3px solid #3E2410; border-radius:4px; padding:4px 10px 5px;
  font-weight:700; font-size:1.05rem; line-height:1.1; box-shadow:0 4px 0 #3E2410; text-shadow:1px 1px 0 #3E2410}
.placa small{display:block; font-size:.78rem; font-weight:500; opacity:.9}
.placa.esquerda{left:10px} .placa.direita{right:10px; text-align:right}
.ponto{position:absolute; transform:translate(-50%,-50%); width:48px; height:48px; border:none; background:transparent; padding:0}
.ponto .num{position:absolute; left:26px; top:-18px; min-width:20px; padding:0 4px; background:#FFFFFF; color:#1B1B2A; border:2px solid #1B1B2A; border-radius:3px;
  font-weight:700; font-size:.95rem; line-height:1.1; box-shadow:0 2px 0 #1B1B2A}
.ponto .est-pix{position:absolute; left:50%; top:34px; transform:translateX(-50%); font-family:"Pixelify Sans",monospace; font-size:1rem; color:#F7D02C; text-shadow:1px 1px 0 #000; white-space:nowrap}
.ponto .est-pix b{color:rgba(0,0,0,.35); font-weight:400}
.ponto.atual::before{content:""; position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border:3px solid #FFFFFF; border-radius:50%; animation:anelPix 1s steps(4) infinite}
@keyframes anelPix{50%{transform:scale(1.35); opacity:.4}}
.ponto.treme{animation:tremeNo .4s}
.mapa-mundo .trem-marca{font-size:2.6rem; animation:balanca 1s steps(2) infinite}
/* ===== Feira das Contas ===== */
.conta-palco{min-height:calc(100vh - 150px); min-height:calc(100dvh - 150px); justify-content:flex-start; gap:0; padding:8px 0 10px}
.conta-visual{margin-top:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 14px; max-width:100%}
.grupo{background:rgba(255,255,255,.7); border-radius:18px; padding:10px 12px; box-shadow:0 4px 0 var(--slot); line-height:1.15; text-align:center; max-width:100%}
.cf{display:inline-block; font-size:2.4rem; margin:2px; cursor:pointer; transition:transform .12s, opacity .2s}
.cf:active{transform:scale(.85)}
.cf.contada{position:relative; filter:drop-shadow(0 0 6px #F2B01E)}
.cf.contada::after{content:attr(data-k); position:absolute; right:-6px; top:-6px; background:#1D2B53; color:#fff; font:700 .8rem "Baloo 2",sans-serif; border-radius:10px; padding:0 5px}
.cf.riscada{opacity:.3; position:relative}
.cf.riscada::before{content:""; position:absolute; left:-4px; right:-4px; top:50%; height:5px; background:#DC2626; transform:rotate(-30deg); border-radius:3px}
.cf.vazia{width:2.6rem; height:2.6rem; border:3px dashed #94A3B8; border-radius:12px; font:800 1.4rem "Baloo 2",sans-serif; color:#94A3B8; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle}
.junta .grupo{animation:pop .5s}
.sinal{font-size:2.4rem; font-weight:800; color:var(--tinta)}
.quadros{display:flex; flex-direction:column; gap:8px}
.dez{display:grid; grid-template-columns:repeat(5, 30px); gap:4px; background:#fff; border:3px solid #1D2B53; border-radius:8px; padding:4px}
.cel{width:30px; height:30px; border:1px solid #CBD5E1; border-radius:4px; display:flex; align-items:center; justify-content:center}
.cf.bola{width:22px; height:22px; border-radius:50%; background:#E5484D; margin:0; font-size:0}
.cf.bola.b{background:#2F6FDB}
.so-numeros{font-size:5rem; opacity:.25}
.conta-baixo{margin-top:auto; width:100%; display:flex; flex-direction:column; align-items:center; gap:18px; padding-bottom:10px}
.conta-expr{border:none; background:#fff; border-radius:18px; padding:8px 22px; box-shadow:0 5px 0 var(--slot); font:800 2.6rem "Andika",sans-serif; color:var(--tinta)}
.conta-expr .interro{color:#DC2626} .conta-expr .resp{color:var(--verde)}
.conta-ops{display:flex; gap:12px; justify-content:center; width:100%}
.conta-op{flex:1; max-width:92px; aspect-ratio:1; border:4px solid #1D2B53; border-radius:18px; background:#FFD166; font:800 2.4rem "Andika",sans-serif; color:#1D2B53; box-shadow:0 6px 0 #1D2B53}
.conta-op:active{transform:translateY(4px); box-shadow:0 2px 0 #1D2B53}
.conta-op.certa{background:#86EFAC} .conta-op.off{opacity:.3}
/* ===== Tela inicial por famílias ===== */
.titulo.mini{margin:6px 0 4px} .titulo.mini .bloco{height:56px; font-size:1.9rem; padding:0 10px}
.engrenagem{position:absolute; top:calc(8px + env(safe-area-inset-top,0px)); right:8px; width:34px; height:34px; border:none; background:transparent; color:var(--tinta);
  opacity:.14; font-size:1.2rem; border-radius:50%; touch-action:none; -webkit-user-select:none; user-select:none; z-index:3}
.engrenagem.segurando{opacity:.6; animation:gira 2s linear}
@keyframes gira{to{transform:rotate(360deg)}}
main{position:relative}
.familia{margin-top:16px; background:color-mix(in srgb, var(--c) 10%, var(--cartao)); border-radius:22px; padding:10px 12px 14px; box-shadow:inset 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent)}
.fam-tit{display:flex; align-items:center; gap:8px; color:var(--c); margin:0 0 8px 2px}
.fam-tit span{font-size:1.7rem; line-height:1} .fam-tit b{font-size:1.15rem; font-weight:800; letter-spacing:1px}
.tiles{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px}
.tile{position:relative; aspect-ratio:1; border:none; border-radius:20px; background:#fff; box-shadow:0 5px 0 color-mix(in srgb, var(--c) 55%, #000 10%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px; overflow:hidden}
.tile::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%)}
.tile:active{transform:translateY(3px); box-shadow:0 2px 0 color-mix(in srgb, var(--c) 55%, #000 10%)}
.tile-ic{position:relative; font-size:2.6rem; line-height:1}
.tile-chip{position:relative; font-family:"Andika",sans-serif; font-weight:700; font-size:.95rem; color:var(--c); background:color-mix(in srgb, var(--c) 12%, #fff); border-radius:8px; padding:1px 7px; white-space:nowrap}
.tile-chip i{font-style:normal; color:#DC2626}
.tile.destaque{grid-column:span 2; aspect-ratio:auto; min-height:104px}
.tile.destaque .tile-ic{font-size:3.4rem}
.tile.largo{grid-column:span 3; aspect-ratio:auto; min-height:92px; flex-direction:row; gap:14px}
.familia .tiles:has(.largo + .largo) .largo{grid-column:span 3}
.premio-tile .tq-barra{flex:1; max-width:48%; height:14px}
.premio-tile.cheio{background:#FFF3C4; animation:pulsa 1.4s infinite}
.tracado{font-family:"Andika",sans-serif; color:transparent; -webkit-text-stroke:1.5px currentColor; border-bottom:2px dashed; padding:0 4px}
.cursivinha{font-family:"Playwrite BR",cursive; font-size:1.1rem}
.tile.destaque .tile-chip{font-size:1rem}
/* ===== Sorteio ===== */
.sorteio{gap:26px}
.roleta{width:200px; height:200px; border-radius:50%; background:conic-gradient(#F43F5E 0 25%, #FACC15 0 50%, #22C55E 0 75%, #3B82F6 0); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 0 rgba(0,0,0,.2), inset 0 0 0 10px rgba(255,255,255,.5)}
.roleta span{width:130px; height:130px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center; font-size:4.6rem}
.roleta.parou{animation:pop .5s 2}
.rol-fila{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; opacity:.35; font-size:1.4rem}
/* ===== Mapa: marcos e nuvens ===== */
.marco{position:absolute; z-index:2; display:flex; align-items:center; gap:4px; background:var(--cor); border:3px solid #14141C; border-radius:14px; padding:2px 10px 2px 4px; box-shadow:0 4px 0 #14141C}
.marco span{font-size:1.8rem; line-height:1.1}
.marco b{color:#fff; font-size:1.5rem; font-weight:700; text-shadow:2px 2px 0 rgba(0,0,0,.4)}
.marco.esquerda{left:10px} .marco.direita{right:10px}
.marco.fechado{filter:grayscale(1); opacity:.7}
#mapaNuvens{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.nuvem{position:absolute; left:-120px; width:90px; height:26px; background:#fff; opacity:.75; border-radius:4px;
  box-shadow:18px -10px 0 -2px #fff, 44px -6px 0 0 #fff, 64px 2px 0 -4px #fff; image-rendering:pixelated; animation:nuvem linear infinite}
@keyframes nuvem{to{transform:translateX(calc(100vw + 240px))}}
.ponto .num{left:24px; top:-20px}
@media (prefers-reduced-motion: reduce){ .nuvem, .premio-tile.cheio{animation:none} }
.tracado{color:transparent; -webkit-text-stroke:1.5px var(--c); font-size:1.1rem}
.cfg .caixa div{flex-wrap:wrap}
.nuvem{border-radius:14px; opacity:.55; box-shadow:18px -10px 0 -2px #fff, 44px -6px 0 0 #fff, 64px 2px 0 -4px #fff}
.nuvem::after{content:""; position:absolute; inset:0; border-radius:inherit}
/* ===== Tela inicial: ESTUDAR e JOGAR ===== */
.duas{flex:1; display:flex; flex-direction:column; gap:18px; justify-content:center; padding:30px 0 10px; min-height:calc(100vh - 80px); min-height:calc(100dvh - 80px)}
.grande-escolha{position:relative; flex:1; max-height:340px; min-height:220px; border:none; border-radius:32px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; overflow:hidden}
.grande-escolha .ge-ic{font-size:7.5rem; line-height:1; position:relative; filter:drop-shadow(0 6px 0 rgba(0,0,0,.15))}
.grande-escolha.estudar{background:linear-gradient(160deg,#60A5FA,#2563EB); box-shadow:0 10px 0 #1E3A8A}
.grande-escolha.jogar{background:linear-gradient(160deg,#FBBF24,#F97316); box-shadow:0 10px 0 #9A3412}
.grande-escolha:active{transform:translateY(6px)}
.grande-escolha.estudar:active{box-shadow:0 4px 0 #1E3A8A} .grande-escolha.jogar:active{box-shadow:0 4px 0 #9A3412}
.grande-escolha.jogar.trancado{background:linear-gradient(160deg,#CBD5E1,#94A3B8); box-shadow:0 10px 0 #475569}
.grande-escolha.jogar.trancado .ge-ic{filter:grayscale(1); opacity:.55}
.grande-escolha.jogar.liberado{animation:brilhaJogo 1.6s ease-in-out infinite}
@keyframes brilhaJogo{50%{box-shadow:0 10px 0 #9A3412, 0 0 0 10px rgba(251,191,36,.35)}}
.grande-escolha::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 25% 15%, rgba(255,255,255,.45), transparent 55%)}
.misterio{position:absolute; top:18px; right:22px; width:58px; height:58px; border-radius:50%; background:#7C3AED; color:#fff; font:800 2.4rem "Baloo 2",sans-serif; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 0 #4C1D95; animation:balanca 1.4s ease-in-out infinite}
.cadeado{position:absolute; font-size:3.4rem; right:22px; top:16px}
.ge-brilho{position:absolute; font-size:2.6rem; right:22px; top:14px; animation:balanca 1s ease-in-out infinite}
.ge-tempo{position:absolute; right:18px; top:16px; background:rgba(0,0,0,.25); color:#fff; font:800 1.5rem "Baloo 2",sans-serif; border-radius:14px; padding:2px 12px}
.ge-barra{position:relative; width:70%; height:18px; border-radius:10px; background:rgba(255,255,255,.35); overflow:hidden}
.ge-barra i{display:block; height:100%; background:#FDE047; border-radius:10px; transition:width .6s}
.duas-mini{display:flex; gap:16px; width:100%; max-width:420px}
.grande-escolha.mini{min-height:150px} .grande-escolha.mini .ge-ic{font-size:4.6rem}
/* ===== Estudar: caixa misteriosa ===== */
.caixa-misterio{width:210px; height:210px; border:none; border-radius:36px; background:radial-gradient(circle at 30% 25%, #C4B5FD, #7C3AED); box-shadow:0 12px 0 #4C1D95; display:flex; align-items:center; justify-content:center}
.caixa-misterio .tampa{font-size:8rem; line-height:1}
.caixa-misterio.abrindo{animation:chacoalha .9s ease-in-out}
.caixa-misterio.aberta{transform:scale(.6); opacity:.35; transition:all .4s}
@keyframes chacoalha{10%,30%,50%,70%,90%{transform:rotate(-8deg) scale(1.03)}20%,40%,60%,80%{transform:rotate(8deg) scale(1.06)}}
.revelado{min-height:150px; display:flex; align-items:center; justify-content:center}
.rev-ic{font-size:8rem; line-height:1; filter:drop-shadow(0 8px 0 rgba(0,0,0,.15))}
.grade-premios.grande{margin-top:30px}
.grade-premios.grande .premio{min-height:150px} .grade-premios.grande .premio span{font-size:5rem}
.tempo-jogo i{background:linear-gradient(90deg,#22C55E,#FBBF24)!important}
#estudarJa{width:240px; flex:none}
/* ===== Estrelinhas do estudo (substituem a barra) ===== */
.slots-tanque{flex:1; display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.slots-tanque i{width:16px; height:16px; border-radius:50%; background:rgba(0,0,0,.08); box-shadow:inset 0 0 0 2px rgba(0,0,0,.15); display:inline-flex; align-items:center; justify-content:center; font-style:normal}
.slots-tanque i.on{background:#FACC15; box-shadow:inset 0 0 0 2px #CA8A04, 0 0 6px rgba(250,204,21,.8)}
.slots-tanque i.on::after{content:"★"; font-size:11px; color:#fff; line-height:1}
.slots-tanque.muitas i{width:12px; height:12px} .slots-tanque.muitas i.on::after{font-size:8px}
.slots-tanque.grande{position:relative; flex:none; justify-content:center; max-width:86%; gap:7px; background:rgba(255,255,255,.35); border-radius:18px; padding:10px}
.slots-tanque.grande i{width:30px; height:30px; background:rgba(255,255,255,.55); box-shadow:inset 0 0 0 3px rgba(0,0,0,.18)}
.slots-tanque.grande i.on::after{font-size:20px}
.slots-tanque.grande.muitas i{width:20px; height:20px} .slots-tanque.grande.muitas i.on::after{font-size:13px}
.slots-tanque.ext{max-width:none}
.slots-tanque i.pop{animation:estrelaAcende .6s ease-out}
@keyframes estrelaAcende{0%{transform:scale(.3)}60%{transform:scale(1.5)}100%{transform:scale(1)}}
.grande-escolha.jogar.trancado .slots-tanque i.on{background:#FACC15}

.slots-tanque.grande.ate10{max-width:218px}

.caixa-misterio{animation:caixaEntra .45s ease-out} @keyframes caixaEntra{from{transform:scale(.4) rotate(-10deg); opacity:0}}
.sorteio{justify-content:center; min-height:calc(100dvh - 120px)}
/* ===== Trilha dos números (antes, depois, sequência) ===== */
.bicho{width:100%; text-align:center; font-size:3.4rem; line-height:1; animation:balanca 1.4s ease-in-out infinite}
.trilha-num{display:flex; align-items:center; justify-content:center; flex-wrap:nowrap; gap:2px; max-width:100%}
.casa{min-width:58px; height:64px; padding:0 6px; border-radius:14px; background:#fff; border:4px solid #0891B2; box-shadow:0 5px 0 #0E7490;
  display:inline-flex; align-items:center; justify-content:center; font:800 2rem "Andika",sans-serif; color:#1D2B53}
.casa.buraco{border-style:dashed; color:#DC2626; background:#FEF3C7}
.casa.cheia{border-style:solid; color:#16A34A; background:#DCFCE7}
.passo{font-style:normal; font-size:1.6rem; color:#0891B2; font-weight:800}
@media (max-width:380px){ .casa{min-width:50px; height:56px; font-size:1.6rem} }
/* ===== Trilha dos números (antes, depois, sequência) ===== */
.bicho{width:100%; text-align:center; font-size:3.4rem; line-height:1}
.trilha-num{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px; width:100%}
.casa{min-width:54px; height:54px; padding:0 6px; border-radius:14px; background:#fff; border:3px solid #1D2B53; box-shadow:0 4px 0 #1D2B53;
  display:inline-flex; align-items:center; justify-content:center; font:800 1.8rem "Andika",sans-serif; color:#1D2B53}
.casa.buraco{background:transparent; border-style:dashed; color:#DC2626; box-shadow:none}
.casa.buraco.cheia{background:#86EFAC; border-style:solid; color:#14532D; box-shadow:0 4px 0 #1D2B53}
.passo{font-style:normal; font-size:1.6rem; color:#94A3B8; font-weight:800}
/* ===== Fim de atividade: tubo de estrelas até o 🎮 ===== */
.progresso{display:flex; align-items:flex-end; justify-content:center; gap:26px; margin-top:6px; min-height:calc(100dvh - 300px)}
.ganho{font:800 3rem "Baloo 2",sans-serif; color:#CA8A04; align-self:center; animation:pop .6s}
.ganho span{font-size:2.6rem}
.tubo-col{display:flex; flex-direction:column; align-items:center; gap:8px}
.marcador{display:flex; align-items:center; gap:4px; background:#94A3B8; border-radius:18px; padding:6px 12px; box-shadow:0 5px 0 #475569; position:relative}
.marcador span{font-size:2.8rem; line-height:1; filter:grayscale(1); opacity:.7} .marcador b{font-size:1.6rem}
.marcador.aberto{background:linear-gradient(160deg,#FBBF24,#F97316); box-shadow:0 5px 0 #9A3412, 0 0 0 8px rgba(251,191,36,.3)}
.marcador.aberto span{filter:none; opacity:1}
.marcador::after{content:""; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%); border:9px solid transparent; border-top-color:#94A3B8}
.marcador.aberto::after{border-top-color:#F97316}
.tubo{width:74px; height:min(52dvh, calc(var(--n) * 30px)); display:flex; flex-direction:column-reverse; gap:3px; padding:6px; background:#fff; border:4px solid #1D2B53; border-radius:0 0 26px 26px; box-shadow:inset 0 0 0 3px #E2E8F0}
.tubo i{flex:1; min-height:6px; border-radius:6px; background:#E2E8F0; display:flex; align-items:center; justify-content:center; font-style:normal}
.tubo i.on{background:linear-gradient(90deg,#FACC15,#FDE047); box-shadow:inset 0 0 0 2px #CA8A04}
.tubo:not(.fino) i.on::after{content:"★"; color:#fff; font-size:.95rem; line-height:1}
.tubo i.pop{animation:sobeEstrela .35s ease-out}
@keyframes sobeEstrela{0%{transform:scaleX(.4); filter:brightness(1.6)}100%{transform:scaleX(1)}}
.prog-botoes{display:flex; gap:16px; justify-content:center; margin-top:20px; min-height:150px}
.prog-botoes .grande-escolha{max-width:190px}
.prog-botoes .grande-escolha.so{max-width:260px}
/* ===== Estudo em dois botões ===== */
.estudo-par{flex:1; display:flex; gap:14px; max-height:340px; min-height:200px}
.estudo-par .grande-escolha{max-height:none; min-height:0}
.estudo-par .ge-ic{font-size:5.6rem}
.grande-escolha.escolher{background:linear-gradient(160deg,#34D399,#059669); box-shadow:0 10px 0 #065F46}
.grande-escolha.escolher:active{box-shadow:0 4px 0 #065F46}
.mini-ic{position:relative; font-size:1.3rem; background:rgba(255,255,255,.35); border-radius:12px; padding:2px 8px; letter-spacing:2px}
.estudo-par .misterio{width:46px; height:46px; font-size:1.9rem; top:12px; right:12px}
/* animação do estudo surpresa (por cima da tela) */
.ov-misterio{position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle, rgba(124,58,237,.92), rgba(46,16,101,.96)); animation:ovEntra .25s ease-out}
.ov-caixa{font-size:9rem; animation:chacoalha .65s ease-in-out}
.ov-rev{position:absolute; font-size:0; transition:font-size .35s cubic-bezier(.2,1.6,.4,1)}
.ov-misterio.abre .ov-caixa{transform:scale(1.8); opacity:0; transition:all .35s}
.ov-misterio.abre .ov-rev{font-size:10rem}
.ov-misterio.sai{opacity:0; transition:opacity .4s}
@keyframes ovEntra{from{opacity:0}}
/* áreas e opções */
.grade-areas{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px}
.area{aspect-ratio:1; border:none; border-radius:28px; background:linear-gradient(160deg, color-mix(in srgb, var(--c) 55%, #fff), var(--c)); box-shadow:0 8px 0 color-mix(in srgb, var(--c) 60%, #000)}
.area span{font-size:5rem; filter:drop-shadow(0 5px 0 rgba(0,0,0,.15))}
.area:active{transform:translateY(5px); box-shadow:0 3px 0 color-mix(in srgb, var(--c) 60%, #000)}
.area-chip{background:var(--c); border-radius:16px; padding:4px 16px; font-size:2rem; box-shadow:0 4px 0 color-mix(in srgb, var(--c) 60%, #000)}
.grade-opcoes{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:26px}
.opcao{aspect-ratio:1; border:none; border-radius:26px; background:#fff; box-shadow:0 7px 0 color-mix(in srgb, var(--c) 55%, #000 10%), inset 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent)}
.opcao span{font-size:4.4rem}
.opcao.destaque{grid-column:span 2; aspect-ratio:auto; min-height:170px}
.opcao.destaque span{font-size:6rem}
.opcao:active{transform:translateY(4px)}
@media (prefers-reduced-motion: reduce){ .ov-caixa{animation:none} }
/* ===== Estrelas ganhas nesta atividade ===== */
.sessao-est{flex:1; display:flex; flex-wrap:wrap; align-items:center; gap:2px; min-height:26px}
.sessao-est i{font-style:normal; font-size:1.35rem; line-height:1; color:#FACC15; text-shadow:0 0 6px rgba(250,204,21,.7), 0 2px 0 #CA8A04}
.sessao-est i.pop{animation:estrelaAcende .6s ease-out}
.sessao-n{font-size:1.2rem; opacity:.35}
/* ===== Cartão misterioso holográfico ===== */
.grande-escolha.misterioso{background:linear-gradient(170deg,#5B3A9E,#A45BB3 60%,#E9A7B8); box-shadow:0 10px 0 #3B1F6E; padding:14px}
.grande-escolha.misterioso:active{box-shadow:0 4px 0 #3B1F6E}
.holo{position:relative; width:100%; height:100%; min-height:120px; border-radius:18px; overflow:hidden; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(115deg,#6FA8FF 0%,#C9A6F0 22%,#F6B3D6 38%,#FBE7A1 55%,#A9EFE0 72%,#5BC7F2 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.35), 0 8px 24px rgba(40,0,80,.35); isolation:isolate}
.holo::before{content:""; position:absolute; inset:-40%; background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.55) 48%,transparent 60%); animation:reflexo 3.2s ease-in-out infinite; z-index:1}
.holo::after{content:""; position:absolute; inset:0; background:radial-gradient(rgba(255,255,255,.25) 1px, transparent 1px) 0 0/5px 5px; opacity:.5; mix-blend-mode:overlay}
@keyframes reflexo{0%{transform:translateX(-45%)}60%,100%{transform:translateX(45%)}}
.holo .q{position:relative; z-index:2; font:900 clamp(4.5rem,24vw,8rem)/1 "Baloo 2",sans-serif; background:linear-gradient(160deg,#E0176F,#8E2DB8); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 4px 0 rgba(90,10,80,.25)); animation:balanca 1.8s ease-in-out infinite}
.brilho{position:absolute; z-index:3; width:calc(22px * var(--s)); height:calc(22px * var(--s)); margin:calc(-11px * var(--s)) 0 0 calc(-11px * var(--s));
  background:radial-gradient(circle, #FFFBEA 0 10%, rgba(255,245,200,.0) 11%),
    linear-gradient(90deg, transparent 46%, #FFF7D6 50%, transparent 54%), linear-gradient(0deg, transparent 46%, #FFF7D6 50%, transparent 54%);
  filter:drop-shadow(0 0 4px #FFF3B0); animation:pisca 2.2s ease-in-out infinite; pointer-events:none}
@keyframes pisca{0%,100%{transform:scale(.3) rotate(0); opacity:.2}50%{transform:scale(1) rotate(45deg); opacity:1}}
.holo.grande{width:min(78vw,320px); height:min(52vw,210px)}
.holo.grande .q{font-size:8rem}
.ov-caixa{animation:chacoalha .65s ease-in-out}
.grande-escolha.misterioso.mini{padding:10px} .grande-escolha.misterioso.mini .holo{min-height:110px}
.grande-escolha.misterioso.mini .holo .q{font-size:4.2rem}
@media (prefers-reduced-motion: reduce){ .holo::before, .brilho, .holo .q{animation:none} }
/* ===== Escolha de estudo: ícone + amostra + nome curto ===== */
.area{aspect-ratio:auto; min-height:170px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px}
.area .area-ic{font-size:3.6rem; line-height:1; filter:drop-shadow(0 4px 0 rgba(0,0,0,.15))}
.area-am, .op-am{display:flex; gap:4px; align-items:center; justify-content:center; min-height:34px}
.area-nome{color:#fff; font-size:1.3rem; font-weight:800; text-shadow:0 2px 0 rgba(0,0,0,.25)}
.area-chip{color:#fff; font-weight:800; font-size:1.3rem}
.opcao{aspect-ratio:auto; min-height:168px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:10px 8px}
.opcao .op-ic{font-size:2.8rem; line-height:1}
.opcao.destaque{min-height:170px} .opcao.destaque .op-ic{font-size:3.6rem}
.op-nome{font-size:1.02rem; font-weight:800; color:#1F2D3A; line-height:1.15; text-align:center}
.am-bloco{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:32px; padding:0 5px; border-radius:7px; background:var(--c,#2563EB); color:#fff; font:700 1.05rem "Andika",sans-serif; box-shadow:0 3px 0 rgba(0,0,0,.2)}
.am-bloco.vazio{background:transparent; border:2px dashed #94A3B8; color:#DC2626; box-shadow:none}
.am-vag{display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:30px; border:3px solid #1D2B53; border-radius:6px; background:#FFD166; color:#1D2B53; font:700 1rem "Andika",sans-serif}
.am-frase{font:700 .9rem "Andika",sans-serif; color:#1D4ED8; background:#EFF6FF; border-radius:7px; padding:3px 7px; white-space:nowrap}
.am-traco{font:700 1.4rem "Andika",sans-serif; color:transparent; -webkit-text-stroke:1.5px #EA580C; border-bottom:2px dashed #EA580C; letter-spacing:2px; padding:0 4px}
.am-cursiva{font-family:"Playwrite BR",cursive; font-size:1.3rem; color:#EA580C; border-bottom:2px solid #F4A6A6; padding:0 6px}
.am-conta{font:800 1.05rem "Andika",sans-serif; color:#14532D; background:rgba(255,255,255,.85); border-radius:8px; padding:3px 8px; white-space:nowrap}
.area .am-bloco{background:rgba(255,255,255,.9); color:var(--c)} .area .am-traco{-webkit-text-stroke-color:#fff; border-bottom-color:#fff}
.area span, .opcao span{font-size:inherit; filter:none}
.area .area-ic{font-size:3.6rem} .opcao .op-ic{font-size:2.8rem} .opcao.destaque .op-ic{font-size:3.6rem}
.grade-opcoes, .grade-areas{grid-template-columns:repeat(2, minmax(0, 1fr))}
.opcao, .area{min-width:0; overflow:hidden}
.op-am, .area-am{font-size:1rem; max-width:100%; flex-wrap:wrap}
.am-frase{font-size:.85rem}
.am-traco{font-size:1.4rem} .am-cursiva{font-size:1.3rem} .am-conta{font-size:1.05rem}
/* ===== Configuração dos pais ===== */
.engrenagem.visivel{opacity:1; width:44px; height:44px; font-size:1.5rem; background:var(--cartao); box-shadow:0 3px 0 var(--slot); border-radius:14px; right:10px; top:calc(6px + env(safe-area-inset-top,0px))}
.duas{padding-top:56px}
.pin-tela{display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:20px}
.pin-cad{font-size:3rem}
.pin-tit{margin:0; font-weight:800; font-size:1.2rem; text-align:center}
.pin-pontos{display:flex; gap:14px}
.pin-pontos i{width:20px; height:20px; border-radius:50%; border:3px solid var(--tinta); display:block}
.pin-pontos i.on{background:var(--tinta)}
.pin-teclado{display:grid; grid-template-columns:repeat(3, 76px); gap:12px; margin-top:6px}
.pin-tecla{height:66px; border:none; border-radius:18px; background:var(--cartao); box-shadow:0 4px 0 var(--slot); font:800 1.8rem "Baloo 2",sans-serif; color:var(--tinta)}
.pin-tecla:active{transform:translateY(3px); box-shadow:0 1px 0 var(--slot)}
.pin-conta{font:800 2rem "Baloo 2",sans-serif; margin:0}
.pin-input{width:120px; text-align:center; font:800 1.8rem "Baloo 2",sans-serif; border:3px solid var(--slot); border-radius:14px; padding:6px}
.lib-grupo{margin:12px 0 6px !important; font-weight:800}
.lib-lista{display:flex; flex-direction:column; gap:6px}
.lib-item{display:flex; align-items:center; gap:10px; border:none; border-radius:12px; background:var(--fundo); padding:8px 10px; text-align:left; opacity:.55}
.lib-item span{font-size:1.5rem} .lib-item b{flex:1; font-weight:700; font-size:1rem; color:var(--tinta)}
.lib-item .chave{width:44px; height:26px; border-radius:13px; background:#CBD5E1; position:relative; flex:none; transition:background .2s}
.lib-item .chave::after{content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .2s; box-shadow:0 1px 2px rgba(0,0,0,.3)}
.lib-item.on{opacity:1} .lib-item.on .chave{background:var(--verde)} .lib-item.on .chave::after{left:21px}
/* ===== Histórias ===== */
.hist-capa .op-ic{font-size:3.4rem}
.hist-prog{font:700 .85rem "Baloo 2",sans-serif; color:#7C3AED; background:#F3E8FF; border-radius:8px; padding:0 8px}
.hist-palco{min-height:calc(100dvh - 120px); justify-content:space-between; padding:14px 0}
.h-fig{font-size:clamp(5rem,26vw,8rem); line-height:1; margin-top:auto; text-align:center}
.h-frase{display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:8px 12px; margin-top:auto; padding:0 4px}
.h-pal{border:none; background:none; padding:4px 3px; border-radius:12px; font:700 2.2rem "Andika",sans-serif; color:var(--tinta); line-height:1.15; display:inline-flex}
.h-pal:active{background:rgba(0,0,0,.05)}
.h-sil{display:inline-block; padding:0 1px; border-radius:8px; transition:background .12s, color .12s, transform .12s}
.h-sil.on{background:#FDE047; color:#1D2B53; transform:translateY(-4px) scale(1.12); box-shadow:0 3px 0 #CA8A04}
.h-sil.passou{background:#FEF9C3; transform:none; box-shadow:none}
.h-pal.lida .h-sil{color:#2563EB}
.h-pal.lendo{background:#FEF08A}
.h-pont{font:700 2.2rem "Andika",sans-serif; margin-left:-8px}
.h-nav{display:flex; gap:14px; justify-content:center; margin-top:auto; width:100%}
.h-bt{flex:1; max-width:110px; height:74px; border:none; border-radius:20px; background:var(--cartao); box-shadow:0 5px 0 var(--slot); font-size:2rem; color:var(--tinta)}
.h-bt.ouvir{background:#7C3AED; color:#fff; box-shadow:0 5px 0 #4C1D95}
.h-bt.prox{background:#22C55E; color:#fff; box-shadow:0 5px 0 #15803D}
.h-bt:disabled{opacity:.3}
.h-bt:active{transform:translateY(3px)}
@media (max-width:380px){ .h-pal, .h-pont{font-size:1.9rem} }

.opcao.destaque .op-am span{font-size:.85rem}
/* ===== Histórias: leitura sílaba por sílaba ===== */
button.h-fig{border:none; background:none; padding:0; cursor:pointer; transition:transform .12s}
button.h-fig:active{transform:scale(.94)}
.h-pal{display:inline-flex; gap:3px; padding:2px; border-radius:12px; font:700 2.2rem "Andika",sans-serif}
.h-sil{border:none; font:inherit; line-height:1.15; padding:2px 5px; border-radius:10px; transform:none!important; box-shadow:none}
.h-sil.espera{background:#EEF2F6; color:#CBD5E1}
.h-sil.atual{background:#FDE047; color:#1D2B53; box-shadow:0 3px 0 #CA8A04!important; animation:silAtual 1.1s ease-in-out infinite}
.h-sil.lida{background:#DCFCE7; color:#15803D}
@keyframes silAtual{50%{box-shadow:0 3px 0 #CA8A04, 0 0 0 5px rgba(253,224,71,.45)}}
.h-sil.treme{animation:treme .35s}
.h-frase.completa .h-sil.lida{background:transparent}
.h-pal.lendo{background:#FEF08A}
.h-pal.lendo .h-sil{background:transparent}
@media (max-width:380px){ .h-pal{font-size:1.85rem} }
.h-frase{gap:10px 26px} .h-pal{gap:2px}
/* karaokê da frase */
.h-sil.karaoke{background:#7C3AED!important; color:#fff!important; box-shadow:0 3px 0 #4C1D95!important; transform:translateY(-3px)!important}
.h-sil.cantada{background:#EDE9FE!important; color:#5B21B6!important}
/* karaokê: a sílaba enche de roxo da esquerda para a direita */
.h-sil{position:relative}
.h-sil.kfill{background-color:transparent!important; box-shadow:none!important; transform:none!important;
  background-image:linear-gradient(90deg,#7C3AED 0 var(--p,0%),#94A3B8 var(--p,0%) 100%)!important;
  -webkit-background-clip:text!important; background-clip:text!important; color:transparent!important; -webkit-text-fill-color:transparent}
.h-sil.kfill::after{content:""; position:absolute; left:4px; bottom:-3px; height:5px; width:calc((100% - 8px) * var(--p-num, 1)); max-width:calc(100% - 8px);
  background:linear-gradient(90deg,#7C3AED 0 var(--p,0%),transparent var(--p,0%)); border-radius:3px}
.h-sil.karaoke{box-shadow:none!important}
.h-bt.prox.travado{background:#CBD5E1; box-shadow:0 5px 0 #94A3B8; color:#fff}
.h-bt.prox.liberado{animation:pulsa 1.4s ease-in-out infinite}

button.h-fig.treme{animation:treme .35s}
.turbo-tempo{flex:1; display:flex; align-items:center; gap:8px; margin-left:10px}
.turbo-tempo .tq-barra{flex:1; height:12px}
.turbo-tempo b{font:800 1rem "Baloo 2",sans-serif; min-width:48px; text-align:right}
.palco-nave{position:relative; flex:1; min-height:calc(100vh - 110px); min-height:calc(100dvh - 110px); margin:0 -18px; border-radius:0; overflow:hidden; background:#070B18}
/* estrela que voa do centro da tela até o contador */
.estrela-voa{position:fixed; left:50%; top:45%; z-index:90; font-size:7rem; line-height:1; transform:translate(-50%,-50%) scale(.2); pointer-events:none;
  filter:drop-shadow(0 0 18px rgba(250,204,21,.9)); animation:estrelaNasce .45s cubic-bezier(.2,1.6,.4,1) forwards}
@keyframes estrelaNasce{to{transform:translate(-50%,-50%) scale(1)}}
.estrela-voa.indo{animation:none; transition:left .55s cubic-bezier(.4,0,.6,1) .45s, top .55s cubic-bezier(.4,0,.6,1) .45s, font-size .55s ease-in .45s, transform .55s ease-in .45s; font-size:1.35rem; transform:translate(-50%,-50%) scale(1) rotate(360deg)}
.sessao-est.recebe{animation:pulsa .4s}
/* card do controle: tubo vertical (igual ao do fim das atividades) */
.grande-escolha.jogar{flex-direction:row; gap:18px; padding:14px 20px}
.grande-escolha.jogar .ge-ic{font-size:6.5rem}
.tubo-card{position:relative; width:52px; height:78%; max-height:260px; display:flex; flex-direction:column-reverse; gap:3px; padding:5px; background:#fff; border:4px solid #1D2B53; border-radius:0 0 22px 22px; box-shadow:inset 0 0 0 3px #E2E8F0}
.tubo-card i{flex:1; min-height:4px; border-radius:5px; background:#E2E8F0; display:flex; align-items:center; justify-content:center; font-style:normal}
.tubo-card i.on{background:linear-gradient(90deg,#FACC15,#FDE047); box-shadow:inset 0 0 0 2px #CA8A04}
.tubo-card:not(.fino) i.on::after{content:"★"; color:#fff; font-size:.8rem; line-height:1}
.tubo-card::before{content:"🎮"; position:absolute; top:-30px; left:50%; transform:translateX(-50%); font-size:1.3rem; filter:grayscale(1); opacity:.7}
.grande-escolha.jogar.trancado .tubo-card{border-color:#334155}
/* card de escolher: ilustração das crianças lendo */
.criancas{width:92%; max-width:250px; height:auto; position:relative; filter:drop-shadow(0 6px 0 rgba(0,0,0,.15))}
.grande-escolha.escolher{padding:10px}
.tubo-card::before{content:none}
.grande-escolha.jogar .cadeado, .grande-escolha.jogar .ge-brilho, .grande-escolha.jogar .ge-tempo{right:auto; left:18px}
.tubo-card{margin-left:auto}

.tab-pais{width:100%; border-collapse:collapse; font-size:.95rem}
.tab-pais th{font-size:.8rem; color:var(--suave); font-weight:700; text-align:right; padding:2px 4px}
.tab-pais th:first-child{text-align:left}
.tab-pais td{padding:3px 4px; text-align:right; border-top:1px solid var(--slot)}
.tab-pais td:first-child{text-align:left; font-weight:700}
/* botão de sair por cima dos jogos em tela cheia */
.sair-jogo{position:absolute; left:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); z-index:20;
  width:52px; height:52px; border:none; border-radius:16px; background:rgba(255,255,255,.85); color:var(--tinta);
  font-size:1.5rem; box-shadow:0 3px 0 rgba(0,0,0,.25); backdrop-filter:blur(3px)}
.sair-jogo:active{transform:translateY(2px)}
.corrida{position:relative}
/* nome de quem está jogando, no topo do início */
.quem{position:absolute; top:calc(8px + env(safe-area-inset-top,0px)); left:8px; display:flex; align-items:center; gap:8px;
  border:none; background:var(--cartao); border-radius:16px; padding:5px 14px 5px 8px; box-shadow:0 3px 0 var(--slot); max-width:62%}
.quem .quem-ic{font-size:1.6rem; line-height:1}
.quem b{font-size:1.05rem; font-weight:800; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.area.atual{outline:4px solid #fff; outline-offset:-4px}
/* casinhas vazias do tubo mais visíveis */
.tubo-card i{background:#E2E8F0; box-shadow:inset 0 0 0 1px #CBD5E1}
.tubo-card{background:#F8FAFC}
/* tubo do card do 🎮: casinhas bem marcadas mesmo vazias */
.tubo-card{background:#EEF2F7; gap:4px; width:58px}
.tubo-card i{background:#fff; box-shadow:inset 0 0 0 2px #94A3B8}
.tubo-card i.on{box-shadow:inset 0 0 0 2px #CA8A04}
/* linha de perfil na área dos pais */
.linha-perfil{display:flex; flex-direction:column; gap:10px; margin-top:10px}
.campo-nome{width:100%; box-sizing:border-box; font:700 1.15rem "Baloo 2",sans-serif; color:var(--tinta);
  border:3px solid var(--slot); border-radius:14px; padding:10px 12px; background:#fff}
.bts-perfil{display:flex; gap:10px}
.bts-perfil .acao{flex:1; min-width:0; font-size:1rem; padding:10px 8px; white-space:nowrap}
/* mapa de domínio das sílabas (área dos pais) */
.fam{margin-top:8px}
.fam-topo{display:flex; justify-content:space-between; align-items:baseline; font-size:.95rem}
.fam-topo span{color:var(--suave); font-weight:700; font-size:.85rem}
.fam-barra{display:flex; height:10px; border-radius:6px; overflow:hidden; background:#E2E8F0; margin-top:3px}
.fam-barra i.dom{background:#22C55E}
.fam-barra i.ref{background:#FACC15}
.leg{display:inline-block; width:12px; height:12px; border-radius:4px; vertical-align:-2px}
.leg.dom{background:#22C55E} .leg.ref{background:#FACC15} .leg.nov{background:#E2E8F0}
/* números: barras de dez e unidades, reta numérica, opções */
.blocos{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:300px; margin:6px auto 4px; min-height:36px}
.blocos i{display:block; border-radius:4px}
.blocos i.dez{width:14px; height:60px; background:linear-gradient(#60A5FA,#2563EB); box-shadow:inset 0 0 0 1px #1E40AF}
.blocos i.um{width:14px; height:14px; background:#FACC15; box-shadow:inset 0 0 0 1px #CA8A04; align-self:flex-end}
.bloco.num{min-width:74px; font-size:1.9rem}
.pergunta-num{font:800 1.3rem "Baloo 2",sans-serif; color:var(--tinta); text-align:center; margin:8px 0}
.pergunta-num b{color:#2563EB}
.reta{display:flex; align-items:center; justify-content:center; gap:10px; margin:8px 0 14px; position:relative}
.reta::before{content:""; position:absolute; left:10%; right:10%; top:50%; height:4px; background:var(--slot); z-index:0}
.rt{position:relative; z-index:1; min-width:64px; padding:10px 6px; text-align:center; border-radius:14px; background:#fff; font:800 1.6rem "Baloo 2",sans-serif; color:var(--tinta); box-shadow:0 3px 0 var(--slot)}
.rt.centro{background:#2563EB; color:#fff; box-shadow:0 3px 0 #1E40AF; transform:scale(1.15)}
.rt.alvo{border:3px dashed #F97316; color:#F97316}
/* espelho */
.glifo{width:120px; height:130px; border:none; border-radius:22px; background:#fff; box-shadow:0 5px 0 var(--slot); font:700 6rem "Andika",sans-serif; color:var(--tinta); line-height:1}
.glifo span{display:inline-block}
.glifo.esp span{transform:scaleX(-1)}
.glifo.certo{background:#DCFCE7; box-shadow:0 5px 0 #16A34A}
.glifo.errado{background:#FEE2E2; box-shadow:0 5px 0 #DC2626; animation:treme .35s}
.am-bloco.esp{transform:scaleX(-1); opacity:.7}
/* versão no fim do início */
.versao{position:fixed; left:0; right:0; bottom:calc(6px + env(safe-area-inset-bottom,0px)); text-align:center; font:600 .72rem system-ui; color:var(--suave); opacity:.7; pointer-events:none}
details.fam summary{list-style:none; cursor:pointer}
details.fam summary::-webkit-details-marker{display:none}
.chips{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px}
.chip{font:700 .8rem "Baloo 2",sans-serif; padding:2px 8px; border-radius:8px; font-style:normal; background:#E2E8F0; color:#334155}
.chip.dom{background:#DCFCE7; color:#166534} .chip.ref{background:#FEF9C3; color:#854D0E} .chip.rev{background:#DBEAFE; color:#1E40AF}
.leg.rev{background:#60A5FA}
/* acabamento visual */
body{background:radial-gradient(120% 80% at 50% 0%, #F4FAF5 0%, var(--fundo) 60%)}
.grande-escolha, .opcao, .area, .grav-card{box-shadow:0 8px 0 rgba(0,0,0,.12), 0 14px 28px rgba(15,23,42,.10)}
.grande-escolha:active, .opcao:active, .area:active{transform:translateY(4px); box-shadow:0 4px 0 rgba(0,0,0,.12)}
.bloco, .h-bt, .acao{transition:transform .08s, box-shadow .08s}
/* antes e depois: mais ar entre a reta e as opções, opções coloridas */
.reta{margin:22px 0 40px}
.opcoes-num{gap:14px; margin-top:8px}
.bloco.num.cor0{background:#F97316; box-shadow:0 5px 0 #C2410C}
.bloco.num.cor1{background:#7C3AED; box-shadow:0 5px 0 #5B21B6}
.bloco.num.cor2{background:#0EA5E9; box-shadow:0 5px 0 #0369A1}
.bloco.num.certo{background:#22C55E !important; box-shadow:0 5px 0 #15803D !important}
/* coloque na ordem */
.grade-ordem{display:grid; gap:10px; width:100%; max-width:360px; margin:6px auto}
.celula{aspect-ratio:1; border:none; border-radius:18px; background:#fff; box-shadow:0 5px 0 var(--slot); font:800 clamp(2.4rem,10vw,3.4rem) "Baloo 2",sans-serif; color:#2563EB}
.celula.feita{background:#DCFCE7; color:#15803D; box-shadow:0 5px 0 #86EFAC; transform:scale(.94)}
.celula.errado{background:#FEE2E2; animation:treme .35s}
.celula.pisca{animation:pulsa .5s 3}
.trilha-ordem{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-top:14px}
.trilha-ordem i{min-width:34px; height:34px; border-radius:9px; background:#E2E8F0; display:flex; align-items:center; justify-content:center; font:800 1.05rem "Baloo 2",sans-serif; font-style:normal; color:#fff}
.trilha-ordem i.on{background:#22C55E}
.fase-tag{font-size:.8rem; background:#FDE68A; color:#92400E; border-radius:8px; padding:2px 8px; margin-left:6px; vertical-align:middle}
/* ===== tabuleiro (mesa de feltro, papel-cartão, latão) ===== */
.tb-volta{font:800 .95rem "Baloo 2",sans-serif; color:#F3E9D2; background:#2B2118; border-radius:10px; padding:4px 12px; letter-spacing:.3px}
.tb-mesa{margin:10px -18px 0; padding:14px 12px 10px; background:
  radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.08), transparent 60%),
  repeating-linear-gradient(45deg, rgba(0,0,0,.05) 0 2px, transparent 2px 6px), #1F5F3A}
.tb-svg{display:block; width:100%; height:auto; filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.tb-casa{transition:opacity .3s, transform .3s}
.tb-casa .tb-ic-casa, .tb-casa .tb-disco-casa{transition:transform .3s}
.tb-casa.passada{opacity:.5}
.tb-casa.passada .tb-rotulo{display:none}
.tb-casa .tb-rotulo{opacity:.9}
.tb-casa.atual .tb-disco-casa{stroke:#C9A227; stroke-width:5; transform:scale(1.28)}
.tb-casa.atual .tb-ic-casa{transform:scale(1.28) translateY(-1px)}
.tb-casa.atual .tb-rotulo rect{fill:#C9A227; opacity:1}
.tb-casa.atual .tb-rotulo text{fill:#2B2118}
.tb-casa.atual .tb-rotulo{opacity:1}
.tb-peao{will-change:transform}
.tb-roleta-caixa{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin:0 -18px; padding:16px 12px 24px; background:#1F5F3A}
.tb-roleta{position:relative; width:150px; height:150px; cursor:pointer; filter:drop-shadow(0 6px 8px rgba(0,0,0,.45)); -webkit-tap-highlight-color:transparent; transition:transform .12s}
.tb-roleta:active{transform:scale(.96)}
.tb-roleta:focus-visible{outline:3px solid #C9A227; outline-offset:4px; border-radius:50%}
.tb-disco{width:100%; height:100%; display:block; transform-origin:50% 50%}
.tb-roleta:not(.girando) .tb-disco{animation:tb-fisga 2.6s ease-in-out infinite}
.tb-ponteiro{position:absolute; left:50%; top:-10px; width:26px; height:42px; margin-left:-13px; transform:rotate(180deg); filter:drop-shadow(0 2px 2px rgba(0,0,0,.5))}
.tb-toque{font:800 .95rem "Baloo 2",sans-serif; color:#F3E9D2; letter-spacing:.3px; text-shadow:0 2px 3px rgba(0,0,0,.4); animation:tb-pisca 1.4s ease-in-out infinite}
.tb-roleta.girando + .tb-toque, .tb-roleta.girando ~ .tb-toque{visibility:hidden}
@keyframes tb-pisca{0%,100%{opacity:.5; transform:translateY(0)}50%{opacity:1; transform:translateY(-2px)}}
@keyframes tb-fisga{0%,92%,100%{transform:rotate(0)}96%{transform:rotate(-9deg)}}

/* ======================= JOGOS FONO (v0.17) ======================= */
.jf-palco{display:flex; flex-direction:column; align-items:center; gap:14px; padding-bottom:18px}
.jf-dica{margin:0; text-align:center; font:700 1.05rem "Andika",sans-serif; color:var(--texto, #2B2118); opacity:.85}
.jf-teste{margin:4px auto 0; padding:4px 12px; border-radius:99px; background:#FEF3C7; color:#92400E; font:700 .8rem "Andika",sans-serif; text-align:center; width:fit-content}
.jf-no{font-size:.72rem; opacity:.6; font-weight:700}
.escondido{visibility:hidden; opacity:0}
.jf-figs, .jf-ops{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; transition:opacity .35s}
.jf-fig{font-size:3.1rem; line-height:1; width:92px; height:92px; border-radius:22px; border:3px solid #2B2118; background:#FFF8EA; box-shadow:0 5px 0 #2B2118; cursor:pointer; transition:transform .15s, opacity .3s}
.jf-fig:active{transform:translateY(3px); box-shadow:0 2px 0 #2B2118}
.jf-fig.off, .jf-op.off, .jf-peixe.off{opacity:.25; pointer-events:none}
.jf-fig.pop, .jf-op.pop{transform:scale(1.12); border-color:#16A34A; box-shadow:0 5px 0 #16A34A}
.jf-cena{width:120px; height:120px; font-size:4.2rem}
.treme{animation:jf-treme .4s}
@keyframes jf-treme{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.jf-cartas{display:flex; gap:8px; justify-content:center; transition:transform .6s}
.jf-carta{min-width:62px; padding:12px 10px; border-radius:14px; background:#2563EB; color:#fff; font:800 1.6rem "Baloo 2",sans-serif; text-align:center; box-shadow:0 4px 0 #1E3A8A; transition:transform .5s, opacity .5s}
.jf-carta.some{opacity:0; transform:translateY(-40px) scale(.3) rotate(25deg)}
.jf-carta.sai{opacity:0; transform:rotateY(90deg)}
.jf-carta.nova{background:#EA580C; box-shadow:0 4px 0 #9A3412; animation:jf-pop .4s}
.jf-cartas.vira{transform:rotateY(180deg) scale(.9)}
@keyframes jf-pop{0%{transform:scale(.5)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
.jf-op{display:flex; gap:4px; padding:10px 12px; border-radius:16px; border:3px solid #2B2118; background:#FFF8EA; box-shadow:0 5px 0 #2B2118; cursor:pointer}
.jf-silb{font:800 1.35rem "Baloo 2",sans-serif; color:#2B2118; padding:2px 6px; border-radius:8px; background:#E0E7FF}
.jf-varinha{font-size:2.2rem; background:none; border:none; cursor:pointer}
.jf-mini{padding:10px 16px !important; font-size:1.3rem !important}
/* robô */
.jf-robo-bt{font-size:5.5rem; background:none; border:none; cursor:pointer; transition:transform .2s}
.jf-robo-bt.fala{animation:jf-robo .5s infinite alternate}
@keyframes jf-robo{from{transform:rotate(-6deg) scale(1)}to{transform:rotate(6deg) scale(1.06)}}
/* pula-frase */
.jf-pads{display:flex; gap:6px; flex-wrap:wrap; justify-content:center; min-height:54px; align-items:center}
.jf-pad{min-width:48px; padding:8px 8px; border-radius:50%/40%; background:#16A34A; color:#fff; font:800 1rem "Baloo 2",sans-serif; text-align:center; box-shadow:0 3px 0 #14532D}
.jf-pad.pop{animation:jf-pop .35s}
.jf-pula-linha{display:flex; gap:16px; align-items:center}
.jf-sapo{display:flex; flex-direction:column; align-items:center; font-size:3.6rem; background:#DCFCE7; border:3px solid #14532D; border-radius:50%; width:110px; height:110px; justify-content:center; cursor:pointer; box-shadow:0 5px 0 #14532D}
.jf-sapo small{font:800 .8rem "Baloo 2",sans-serif; color:#14532D; margin-top:-6px}
.jf-sapo.pula{animation:jf-pula .35s}
@keyframes jf-pula{50%{transform:translateY(-26px) scale(1.05)}}
/* fábrica */
.jf-esteira{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:16px; background:#E5E7EB; border:3px dashed #6B7280}
.jf-base{display:flex; gap:6px; align-items:center}
.jf-base b{font-size:2rem}
.jf-mais{font:800 1.8rem "Baloo 2",sans-serif; color:#6B7280}
.jf-peca-add{padding:10px 12px; border-radius:12px; background:#EA580C; color:#fff; font:800 1.5rem "Baloo 2",sans-serif; box-shadow:0 4px 0 #9A3412}
.jf-peca-add.cai{animation:jf-cai 1.4s ease-in}
@keyframes jf-cai{0%{transform:translateY(-30px)}60%{transform:translateY(0)}80%{transform:translateY(-6px)}100%{transform:translateY(0)}}
.jf-maquina{font-size:4.2rem; background:none; border:none; cursor:pointer}
/* dominó */
.jf-mesa{display:flex; align-items:center; gap:4px; padding:14px 10px; border-radius:18px; background:#14532D; min-height:120px; justify-content:center; width:100%; box-shadow:inset 0 4px 12px rgba(0,0,0,.35)}
.jf-peca{position:relative; display:grid; grid-template-columns:1fr 1fr; width:118px; height:74px; border-radius:12px; background:#FFFDF7; border:3px solid #2B2118; box-shadow:0 4px 0 #2B2118; cursor:pointer; padding:0; overflow:visible}
.jf-peca::after{content:""; position:absolute; left:50%; top:8px; bottom:8px; width:2px; background:#2B2118; opacity:.5}
.jf-peca-fig{position:absolute; left:50%; top:-22px; transform:translateX(-50%); font-size:1.9rem; filter:drop-shadow(0 2px 1px rgba(0,0,0,.3))}
.jf-meia{display:flex; align-items:center; justify-content:center; font:800 1.25rem "Baloo 2",sans-serif; color:#2B2118; padding-top:8px}
.jf-mesa .jf-peca{width:100px; transform:scale(.92)}
.jf-mesa .jf-peca.ponta .jf-meia:last-child{color:#fff; background:#EA580C; border-radius:0 9px 9px 0}
.jf-mesa .jf-peca.quebra{margin-left:14px}
.jf-encaixe{display:flex; align-items:center; justify-content:center; width:74px; height:66px; border-radius:12px; border:3px dashed #FDE68A; color:#FDE68A; font:800 1.1rem "Baloo 2",sans-serif; cursor:pointer; animation:tb-pisca 1.4s ease-in-out infinite}
.jf-mao{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:16px}
.jf-mao .jf-peca.sel{transform:translateY(-10px); border-color:#2563EB; box-shadow:0 8px 0 #2563EB}
.jf-mao .jf-peca.voa{animation:jf-voa .5s forwards}
@keyframes jf-voa{to{transform:translateY(-160px) scale(.8); opacity:0}}
/* pescaria */
.jf-lago{position:relative; display:flex; gap:14px; justify-content:center; padding:22px 12px; width:100%; border-radius:50% / 30%; background:radial-gradient(ellipse at 50% 30%, #7DD3FC, #0369A1)}
.jf-peixe{position:relative; width:86px; height:60px; border:none; cursor:pointer; background:#F97316; border-radius:50% 40% 40% 50%; box-shadow:0 4px 0 #9A3412; animation:jf-nada 2.2s ease-in-out infinite; animation-delay:var(--d)}
.jf-peixe::after{content:""; position:absolute; right:-16px; top:14px; border:16px solid transparent; border-left:18px solid #F97316; border-right:0}
.jf-peixe span{font:800 1.9rem "Baloo 2",sans-serif; color:#fff; text-shadow:0 2px 0 #9A3412}
.jf-peixe.fisgado{animation:jf-fisga .6s forwards}
@keyframes jf-nada{50%{transform:translateY(-8px) rotate(-4deg)}}
@keyframes jf-fisga{to{transform:translateY(-60px) rotate(-20deg) scale(1.15)}}
.jf-letra-ok{color:#EA580C; font-size:1.3em}
/* monstro */
.jf-bicho{font-size:6rem; line-height:1; transition:transform .2s}
.jf-bicho.nham{animation:jf-nham .5s 2}
@keyframes jf-nham{50%{transform:scale(1.2, .85)}}
.jf-palavra{font:800 2.6rem "Andika",sans-serif; letter-spacing:2px; color:#2B2118; padding:6px 22px; border-radius:16px; background:#FFF8EA; border:3px solid #2B2118}
.jf-fig.come{animation:jf-come .6s forwards}
@keyframes jf-come{to{transform:translateY(-200px) scale(.2); opacity:0}}
/* v0.18: tambor, trenzinho */
.jf-batidas{display:flex; gap:10px; justify-content:center; align-items:center; min-height:58px}
.jf-batida{width:26px; height:26px; border-radius:50%; background:#EA580C; box-shadow:0 3px 0 #9A3412}
.jf-batida.pop{animation:jf-pop .3s}
.jf-tambor-bt{font-size:4rem; width:118px; height:118px; border-radius:50%; border:3px solid #7C2D12; background:#FED7AA; box-shadow:0 6px 0 #7C2D12; cursor:pointer}
.jf-tambor-bt.bate{animation:jf-bate .18s}
@keyframes jf-bate{50%{transform:scale(.9) translateY(4px)}}
.jf-loco{display:flex; align-items:flex-end; gap:6px}
.jf-loco-maq{font-size:3.6rem; line-height:1}
.jf-vagao-vazio{display:flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:18px; border:3px dashed #2B2118; font:800 2rem "Baloo 2",sans-serif; color:#2B2118; opacity:.6}
/* v0.19: fases */
.jf-fase{color:#C9A227; letter-spacing:-2px; margin-right:4px}
.jf-teste-item{display:flex; align-items:center; gap:8px}
.jf-teste-item b{flex:1}
.jf-fases-bt{display:flex; gap:4px}
.jf-fase-bt{width:34px; height:34px; border-radius:10px; border:2px solid #2B2118; background:#FFF8EA; font:800 1rem "Baloo 2",sans-serif; color:#2B2118; box-shadow:0 3px 0 #2B2118; cursor:pointer}
.jf-fase-bt:active{transform:translateY(2px); box-shadow:0 1px 0 #2B2118}
.jf-peca.sofig .jf-meia{font-size:1.1rem; opacity:.7}
/* v0.20: dois mapas na tela inicial */
.grande-escolha .ge-nome{position:relative; font:800 1.35rem "Baloo 2",sans-serif; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.25)}
.grande-escolha.mapa-mat{background:linear-gradient(160deg,#FDBA74,#EA580C); box-shadow:0 10px 0 #9A3412; padding:10px}
.grande-escolha.mapa-mat:active{box-shadow:0 4px 0 #9A3412}
.mat-arte{display:flex; gap:6px}
.mat-arte i{font:800 2.6rem "Baloo 2",sans-serif; font-style:normal; color:#9A3412; background:#FFF7ED; border-radius:14px; width:56px; height:62px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 0 #9A3412}
.mat-arte i:nth-child(2){background:none; box-shadow:none; color:#fff; width:auto}
.mat-frutas{font-size:1.8rem; letter-spacing:2px}
/* v0.21: jogos sem texto para a criança */
.jf-palco .jf-dica{display:none}
.jf-teste + .jf-palco .jf-dica{display:block; font-size:.85rem; opacity:.6}
.jf-palco{position:relative}
.jf-ouvir{position:absolute; top:0; right:4px; z-index:2; width:52px; height:52px; border-radius:50%; border:3px solid #2B2118; background:#FFF8EA; font-size:1.6rem; box-shadow:0 4px 0 #2B2118; cursor:pointer}
.jf-maozinha{position:absolute; z-index:30; font-size:2.6rem; pointer-events:none; animation:jf-aponta .9s ease-in-out infinite; filter:drop-shadow(0 3px 2px rgba(0,0,0,.35))}
.jf-maozinha[hidden]{display:none}
@keyframes jf-aponta{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
/* rio do Pula-frase */
.jf-rio{display:flex; align-items:center; width:100%; min-height:130px; border-radius:22px; overflow:hidden; background:linear-gradient(180deg,#7DD3FC,#0284C7); box-shadow:inset 0 4px 10px rgba(0,0,0,.25)}
.jf-margem{flex:0 0 70px; align-self:stretch; display:flex; align-items:center; justify-content:center; background:#65A30D; border:none; font-size:2.4rem; padding:0}
.jf-chegada{background:#65A30D; cursor:pointer}
.jf-chegada.pop{animation:jf-pop .5s 2}
.jf-pedras{flex:1; display:flex; gap:4px; align-items:center; justify-content:flex-start; padding:0 6px; flex-wrap:nowrap; overflow:hidden; transition:transform .5s, opacity .5s}
.jf-pedras.afunda{transform:translateY(40px); opacity:.2}
.jf-pedra{position:relative; flex:0 1 50px; min-width:30px; height:30px; border-radius:50%; background:#9CA3AF; box-shadow:0 4px 0 #4B5563; display:flex; align-items:center; justify-content:center}
.jf-pedra.pop{animation:jf-pop .3s}
.jf-pedra small{position:absolute; top:34px; font:800 .75rem "Andika",sans-serif; color:#fff; text-shadow:0 1px 2px #000; white-space:nowrap}
.jf-sapo2{font-size:2.6rem; cursor:pointer; line-height:1; display:inline-block}
.jf-pedra .jf-sapo2{position:absolute; top:-38px; font-size:2.2rem}
.jf-sapo2.pula{animation:jf-pula .35s}
/* tambor: ✔ redondo, sem o botão largo */
.jf-pronto{width:84px; height:84px; border-radius:50%; border:none; background:#16A34A; color:#fff; font-size:2.4rem; font-weight:800; box-shadow:0 6px 0 #14532D; cursor:pointer}
.jf-pronto.pop{animation:jf-pop .4s 2}
/* v0.21.1: o sapo sumia (cortado pela caixa das pedras) e não dava para continuar pulando */
.jf-rio{cursor:pointer; min-height:150px}
.jf-pedras{align-self:stretch; overflow:visible; gap:3px; padding:0 4px}
.jf-pedra{flex:1 1 0; max-width:50px; min-width:22px; margin-top:34px}
.jf-pedra .jf-sapo2{top:-34px; font-size:2rem; z-index:2}
.jf-margem .jf-sapo2{font-size:2.8rem}
.jf-margem{flex-basis:58px}
.jf-pedra{min-width:20px}
/* v0.22: jogos de matemática */
.mt-ops{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.mt-num{min-width:84px; height:84px; padding:0 12px; border-radius:20px; border:3px solid #1D2B53; background:#FFD166; color:#1D2B53; font:800 2.2rem "Baloo 2",sans-serif; box-shadow:0 6px 0 #1D2B53; cursor:pointer}
.mt-num.pop{background:#86EFAC; transform:scale(1.08)} .mt-num.off{opacity:.3; pointer-events:none}
.mt-quadro{width:100%; padding:10px; border-radius:18px; background:#FFF8EA; border:3px solid #2B2118; box-sizing:border-box}
.mt-objs{display:grid; grid-template-columns:repeat(var(--cols), 1fr); gap:4px; justify-items:center}
.mt-obj{position:relative; font-size:1.7rem; line-height:1.15; cursor:pointer; transition:transform .5s, opacity .5s}
.mt-contar .mt-objs[style*="--cols:10"] .mt-obj{font-size:1.25rem}
.mt-obj.riscado::after{content:""; position:absolute; left:-2px; right:-2px; top:50%; height:3px; background:#DC2626; transform:rotate(-35deg); border-radius:2px}
.mt-obj.voa{transform:translate(60px,-120px) rotate(20deg); opacity:0}
.mt-grupos{display:flex; align-items:center; gap:8px; transition:gap .8s}
.mt-grupos.junta{gap:0} .mt-grupos.junta .mt-op{opacity:0; width:0; overflow:hidden}
.mt-cesta{padding:8px; border-radius:16px; background:#FEF3C7; border:3px dashed #D97706}
.mt-op{font:800 2rem "Baloo 2",sans-serif; color:#1D2B53; transition:opacity .5s}
.mt-conta{font:800 2.4rem "Baloo 2",sans-serif; color:#1D2B53; letter-spacing:2px; cursor:pointer}
.mt-armada{display:flex; flex-direction:column; align-items:flex-end; font:800 2.6rem "Baloo 2",sans-serif; color:#1D2B53; line-height:1.1; padding:6px 22px; border-radius:16px; background:#FFF8EA; cursor:pointer}
.mt-armada i{font-style:normal; margin-right:14px}
.mt-armada .mt-traco{border-top:4px solid #1D2B53; width:100%; text-align:right; color:#EA580C}
.mt-base10{display:flex; gap:6px; align-items:flex-end; padding:10px; border-radius:16px; background:#FFF8EA; cursor:pointer}
.mt-dez{display:block; width:14px; height:140px; background:repeating-linear-gradient(#2563EB 0 12px,#1E40AF 12px 14px); border-radius:4px}
.mt-uns{display:grid; grid-template-columns:repeat(3,14px); gap:2px; margin-left:8px}
.mt-um{display:block; width:14px; height:14px; background:#F59E0B; border-radius:3px}
.mt-casa{display:flex; flex-direction:column; align-items:center; cursor:pointer}
.mt-telhado{width:0; height:0; border-left:70px solid transparent; border-right:70px solid transparent; border-bottom:50px solid #B45309}
.mt-porta{width:110px; padding:14px 0; text-align:center; background:#FDE68A; border:4px solid #92400E; font:800 2.2rem "Baloo 2",sans-serif; color:#1D2B53}
.mt-cal{display:flex; gap:6px; cursor:pointer}
.mt-folha{min-width:54px; padding:14px 4px 10px; text-align:center; border-radius:10px; background:#fff; border:3px solid #2B2118; border-top-width:10px; font:800 1.6rem "Baloo 2",sans-serif; color:#1D2B53}
.mt-folha.buraco{color:#EA580C; border-style:dashed} .mt-folha.ok{color:#16A34A; border-style:solid; animation:jf-pop .4s}
.mt-bichos{display:flex; flex-wrap:wrap; gap:4px; justify-content:center}
.mt-graf{display:grid; grid-template-columns:28px repeat(var(--cols), 1fr); gap:3px; width:100%; max-width:320px}
.mt-eixo{font:700 .8rem "Baloo 2",sans-serif; color:#1D2B53; display:flex; align-items:center; justify-content:center}
.mt-cel{height:24px; border:2px solid #1D2B53; border-radius:4px; background:#fff; padding:0; cursor:pointer}
.mt-cel.on{background:#EC4899}
.mt-cel.errou{animation:jf-treme .4s}
.mt-rot{font-size:1.6rem; text-align:center}
.jf-palco.com-ouvir{padding-top:60px}
.mt-grupos{flex-wrap:wrap; justify-content:center; max-width:100%}
.mt-cesta{max-width:44%; box-sizing:border-box}
.mt-cesta .mt-obj{font-size:1.3rem}
.mt-sub .mt-obj{font-size:1.6rem}
/* v0.23: Natureza e Sociedade */
.estudo-par{flex-wrap:wrap}
.estudo-par .grande-escolha{flex:1 1 30%; min-width:0}
.grande-escolha.mapa-ns{background:linear-gradient(160deg,#5EEAD4,#0D9488); box-shadow:0 10px 0 #115E59; padding:10px}
.grande-escolha.mapa-ns:active{box-shadow:0 4px 0 #115E59}
.ns-arte{font-size:3.6rem; line-height:1}
.estudo-par .ge-nome{font-size:1.05rem}
.ns-palavra{padding:14px 12px; border-radius:16px; border:3px solid #2B2118; background:#FFF8EA; font:800 1.15rem "Andika",sans-serif; color:#2B2118; box-shadow:0 5px 0 #2B2118; cursor:pointer}
.ns-palavra.off, .ns-mat.off, .ns-cena.off, .ns-num.off, .ns-dn.off{opacity:.3; pointer-events:none}
.ns-palavra.pop, .ns-mat.pop, .ns-cena.pop, .ns-num.pop, .ns-dn.pop{transform:scale(1.08); box-shadow:0 0 0 4px #16A34A}
.ns-rot{display:block; font:800 .8rem "Andika",sans-serif; margin-top:4px}
.ns-mats{display:grid; grid-template-columns:repeat(2, 1fr); gap:10px; width:100%}
.ns-mat{min-height:74px; border-radius:16px; border:3px solid #2B2118; box-shadow:0 5px 0 #2B2118; cursor:pointer; display:flex; align-items:flex-end; justify-content:center; padding:6px}
.ns-mat b{background:rgba(255,255,255,.88); border-radius:8px; padding:2px 8px; font:800 .95rem "Andika",sans-serif; color:#2B2118}
.ns-mat.so-palavra{background:#FFF8EA; align-items:center}
.tx-madeira{background:repeating-linear-gradient(90deg,#B7791F 0 10px,#975A16 10px 13px,#C68B3A 13px 22px)}
.tx-metal{background:linear-gradient(135deg,#E5E7EB,#9CA3AF 40%,#F3F4F6 55%,#6B7280)}
.tx-vidro{background:linear-gradient(135deg,rgba(186,230,253,.9),rgba(224,242,254,.6) 45%,#fff 50%,rgba(186,230,253,.8))}
.tx-papel{background:repeating-linear-gradient(#fff 0 14px,#BFDBFE 14px 15px)}
.tx-tecido{background:repeating-linear-gradient(45deg,#F472B6 0 6px,#FBCFE8 6px 12px),#F472B6}
.tx-plastico{background:linear-gradient(160deg,#FDE047,#F97316); box-shadow:inset 0 6px 10px rgba(255,255,255,.6), 0 5px 0 #2B2118}
.tx-borracha{background:radial-gradient(circle at 30% 30%,#4B5563,#1F2937)}
.ns-cenas{display:flex; gap:10px; width:100%; justify-content:center}
.ns-cena, .ns-dn{flex:1; min-height:110px; border-radius:18px; border:3px solid #2B2118; box-shadow:0 5px 0 #2B2118; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer}
.ns-cena span, .ns-dn span{font-size:2.4rem}
.ns-cena b, .ns-dn b{font:800 .8rem "Andika",sans-serif; background:rgba(255,255,255,.85); border-radius:8px; padding:1px 6px; color:#2B2118}
.cena-ceu{background:linear-gradient(#BAE6FD,#E0F2FE)} .cena-terra{background:linear-gradient(#FDE68A,#A16207)} .cena-agua{background:linear-gradient(#38BDF8,#0369A1)}
.dn-dia{background:linear-gradient(#FDE68A,#FBBF24)} .dn-noite{background:linear-gradient(#1E3A8A,#0F172A)}
.dn-noite b{background:rgba(255,255,255,.9)}
.ns-num{flex:1; min-height:84px; border-radius:18px; border:3px solid #2B2118; background:#FFD166; font:800 2.4rem "Baloo 2",sans-serif; color:#1D2B53; box-shadow:0 5px 0 #2B2118; cursor:pointer}
.ns-legenda{display:flex; flex-direction:column; gap:4px; padding:8px 12px; border:2px dashed #2B2118; border-radius:12px; background:#fff}
.ns-legenda span{font:700 .9rem "Andika",sans-serif; display:flex; align-items:center; gap:6px}
.ns-legenda i{font-style:normal; display:inline-flex; width:26px; height:26px; align-items:center; justify-content:center; border:2px solid #2B2118; border-radius:6px; font-weight:800}
.estudo-par .mat-arte i{width:34px; height:44px; font-size:1.7rem; border-radius:10px}
.estudo-par .mat-arte{gap:3px}
.estudo-par .mat-frutas{font-size:1.2rem}
.estudo-par .ns-arte{font-size:2.8rem}
/* v0.23: três cartões na tela inicial — "1 + 2" cabia só com dois */
.estudo-par .mat-arte{gap:3px}
.estudo-par .mat-arte i{width:36px; height:44px; font-size:1.7rem; border-radius:10px}
.estudo-par .mat-frutas{font-size:1.3rem}
/* v0.23.2: ligar/desligar e ▶ testar na mesma linha */
.lib-linha{display:flex; gap:8px; align-items:stretch}
.lib-linha .lib-item{flex:1; min-width:0}
.lib-testar{flex:0 0 56px; border:none; border-radius:16px; background:#1D4ED8; color:#fff; font-size:1.4rem; box-shadow:0 4px 0 #1E3A8A; cursor:pointer}
.lib-testar:active{transform:translateY(2px); box-shadow:0 2px 0 #1E3A8A}
/* v0.23.5: casa começada e não terminada */
.tb-roleta.trancada .tb-disco{filter:grayscale(1) brightness(.8); animation:none}
.tb-roleta.trancada::after{content:"🔒"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:2.4rem}
.tb-roleta.trancada ~ .tb-toque{visibility:hidden}
.tb-casa.pendente .tb-disco-casa{animation:tb-pisca 1s ease-in-out infinite}
/* v0.24.2: a roleta aparece por cima do tabuleiro (congelado) e some depois do giro */
.tb-roleta-caixa{position:fixed; left:0; right:0; bottom:0; top:84px; z-index:40; margin:0; padding:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:rgba(15,23,42,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); animation:tb-entra .35s ease-out}
.tb-roleta-caixa .tb-roleta{width:250px; height:250px}
.tb-roleta-caixa .tb-ponteiro{width:34px; height:54px; margin-left:-17px; top:-14px}
.tb-roleta-caixa .tb-toque{font-size:1.2rem}
.tb-roleta-caixa.some{opacity:0; transform:scale(1.08); pointer-events:none; transition:opacity .4s, transform .4s}
.tb-roleta-caixa.oculta{display:none}
@keyframes tb-entra{from{opacity:0; transform:scale(.9)} to{opacity:1; transform:scale(1)}}
/* "1 + 2" cabe no cartão estreito */
.estudo-par .mat-arte{gap:2px; max-width:100%}
.estudo-par .mat-arte i{width:28px; height:38px; font-size:1.4rem; border-radius:8px}
.estudo-par .mat-arte i:nth-child(2){width:auto; font-size:1.2rem}
/* v0.24.4: três cartões nunca passam da largura da tela (em celulares com fonte grande saíam pela direita) */
.estudo-par{display:grid !important; grid-template-columns:repeat(3, minmax(0, 1fr)); flex-wrap:nowrap}
.estudo-par .grande-escolha{min-width:0; padding-left:6px; padding-right:6px}
.estudo-par .ge-nome{font-size:clamp(12px, 3.9vw, 21px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
.estudo-par .criancas{max-width:100%}
/* v0.25: trava anti-impulso */
.espera{animation:espera-balanca .45s}
@keyframes espera-balanca{25%{transform:rotate(-4deg) scale(.96)}75%{transform:rotate(4deg) scale(.96)}}
.jf-ouvir.escuta{animation:jf-pop .5s 2; background:#FDE68A}
/* v0.25.1: soma/subtração — conta de um lado, figuras do outro */
.mt-duo{display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; width:100%}
.mt-lado .mt-conta{font-size:2rem; white-space:nowrap; padding:8px 10px; border-radius:16px; background:#FFF8EA; border:3px solid #1D2B53}
.mt-ilustra{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:6px; padding:8px; border-radius:16px; background:#FEF3C7; border:3px dashed #D97706; min-height:90px; transition:gap .6s}
.mt-grupo{display:grid; grid-template-columns:repeat(5, auto); gap:2px}
.mt-fig{font-size:1.4rem; line-height:1.1; transition:transform .7s, opacity .7s}
.mt-fig.foi{transform:translate(40px,-80px) rotate(20deg); opacity:.15}
.mt-ilustra.junta{gap:0} .mt-ilustra.junta .mt-op{opacity:0; width:0; overflow:hidden}
.mt-ilustra{flex-direction:column; overflow:hidden}
.mt-ilustra .mt-op{font-size:1.4rem; line-height:1}
.mt-fig{font-size:1.15rem}
.mt-fig.foi{transform:scale(.45) translateY(10px); opacity:.18; filter:grayscale(1)}
/* v0.25.2: ordem da história */
.h-ordem-trilha{display:flex; gap:10px; justify-content:center; margin:30px 0 20px}
.h-ordem-vaga{width:84px; height:84px; border-radius:18px; border:3px dashed #92400E; display:flex; align-items:center; justify-content:center; font:800 1.6rem "Baloo 2",sans-serif; color:#92400E; background:#FFF8EA}
.h-ordem-vaga.cheia{border-style:solid; font-size:2.6rem; background:#DCFCE7}
.h-ordem-ops{display:flex; gap:12px; justify-content:center}
/* v0.25.3: dominó novo */
.jf-mesa2{display:flex; align-items:center; gap:4px; padding:18px 8px 12px; border-radius:18px; background:radial-gradient(ellipse at 50% 30%, #166534, #14532D); width:100%; min-height:120px; justify-content:center; box-shadow:inset 0 4px 12px rgba(0,0,0,.35); overflow:hidden}
.jf-dom{position:relative; display:flex; align-items:stretch; width:96px; height:58px; border-radius:10px; background:linear-gradient(#FFFFFF,#F1EDE3); border:2px solid #1F2937; box-shadow:0 4px 0 #1F2937; flex:none; cursor:pointer; user-select:none}
.jf-dom-meia{flex:1; display:flex; align-items:center; justify-content:center; font:800 1.2rem "Baloo 2",sans-serif; color:#1F2937; border-radius:8px}
.jf-dom-risco{width:2px; margin:8px 0; background:#1F2937; opacity:.6}
.jf-dom-fig{position:absolute; left:50%; top:-20px; transform:translateX(-50%); font-size:1.6rem; filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}
.jf-mesa2 .jf-dom{width:80px; height:50px; transform:none}
.jf-mesa2 .jf-dom.ponta .jf-dom-meia.b{background:#F97316; color:#fff}
.jf-mesa2 .jf-dom.quebra{margin-left:12px}
.jf-dom-meia.casa{background:#F97316; color:#fff}
.jf-encaixe2{flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; width:70px; height:54px; border-radius:10px; border:3px dashed #FDE68A; color:#FDE68A; font:800 1.1rem "Baloo 2",sans-serif; cursor:pointer; animation:tb-pisca 1.4s ease-in-out infinite}
.jf-encaixe2.sobre{background:rgba(253,230,138,.35); transform:scale(1.1)}
.jf-encaixe2.pop{animation:jf-pop .4s}
.jf-mao2{display:flex; gap:14px 10px; flex-wrap:wrap; justify-content:center; margin-top:22px}
.jf-mao2 .jf-dom.sel{transform:translateY(-8px); border-color:#2563EB; box-shadow:0 7px 0 #2563EB}
.jf-mao2 .jf-dom.arrastando{opacity:.35}
.jf-mao2 .jf-dom.voa{animation:jf-voa .5s forwards}
.jf-fantasma{opacity:.95; box-shadow:0 12px 24px rgba(0,0,0,.35) !important}
/* v0.25.4: bate no boneco e espera o verde */
.at-placar{display:flex; justify-content:space-between; width:100%; font:800 1.2rem "Baloo 2",sans-serif; color:#1D2B53}
.at-tocas{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; max-width:330px; padding:12px; border-radius:22px; background:#65A30D; box-shadow:inset 0 4px 10px rgba(0,0,0,.25)}
.at-toca{position:relative; height:88px; border:none; background:none; overflow:hidden; touch-action:none; cursor:pointer}
.at-buraco{position:absolute; left:8%; right:8%; bottom:6px; height:26px; border-radius:50%; background:#3F2A14; box-shadow:inset 0 6px 8px rgba(0,0,0,.6)}
.at-bicho{position:absolute; left:0; right:0; bottom:-60px; font-size:2.8rem; transition:bottom .18s ease-out; z-index:1}
.at-toca.sobe .at-bicho{bottom:14px}
.at-toca.levou .at-bicho{transform:scale(.8,.6); filter:brightness(1.3)}
.at-semaforo{display:flex; flex-direction:column; gap:12px; padding:16px 22px; border-radius:30px; background:#1F2937; box-shadow:0 8px 0 #111827}
.at-semaforo i{display:block; width:74px; height:74px; border-radius:50%; background:#374151; transition:background .15s, box-shadow .15s}
.at-semaforo.vermelho .vm{background:#EF4444; box-shadow:0 0 24px #EF4444}
.at-semaforo.amarelo .am{background:#F59E0B; box-shadow:0 0 24px #F59E0B}
.at-semaforo.verde .vd{background:#22C55E; box-shadow:0 0 30px #22C55E}
.at-semaforo.azul .vd{background:#3B82F6; box-shadow:0 0 30px #3B82F6}
.at-botao{width:120px; height:120px; border-radius:50%; border:4px solid #1F2937; background:#FDE68A; font-size:3.4rem; box-shadow:0 7px 0 #1F2937; touch-action:none; cursor:pointer}
/* v0.25.5: painel de prêmios com a imagem de cada jogo */
.grade-premios.grande{grid-template-columns:repeat(2, minmax(0,1fr)) !important; gap:14px !important}
.premio.premio-foto{position:relative; aspect-ratio:4/3; height:auto !important; padding:0; border-radius:20px; border:4px solid #1D2B53; background-size:cover; background-position:center; box-shadow:0 7px 0 #1D2B53; overflow:hidden}
.premio.premio-foto:active{transform:translateY(4px); box-shadow:0 3px 0 #1D2B53}
.premio-nome{position:absolute; left:0; right:0; bottom:0; padding:6px 8px; background:linear-gradient(transparent, rgba(0,0,0,.8)); color:#fff; font:800 .95rem "Baloo 2",sans-serif; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.premio-nome span{font-size:1.1rem}
.grade-premios.grande .premio.premio-foto{min-height:0; min-width:0; width:100%; display:block}
.grade-premios.grande .premio.premio-foto .premio-nome span{font-size:1.05rem}
.grade-premios.grande .premio.premio-foto .premio-nome{font-size:.95rem; font-weight:800}
/* v0.25.6: ✔ para conferir a montagem */
.jf-pronto.confere{display:block; margin:12px auto 0; animation:jf-pop .4s}
.jf-pronto.confere[hidden]{display:none}
#slots [data-i].sobre{outline:4px dashed #2563EB; outline-offset:3px}
#ops [data-k].arrastando, #slots [data-k].arrastando{opacity:.35}