:root{--azul:#1F5FD6;--azul-esc:#0B2A6B;--azul-sombra:#123F94;--amarelo:#FFC21A;--amarelo-sombra:#D99B00;--verde:#2BB673;--verde-sombra:#1C8A55;--coral:#FF6B57;--ceu:#EAF4FF;--linha:#C9DCF5;--cinza:#5B6F96}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--ceu);color:var(--azul-esc);font-family:'Nunito',system-ui,sans-serif;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#app{max-width:520px;margin:0 auto;min-height:100%;position:relative}
.tela{min-height:100dvh;display:flex;flex-direction:column;gap:12px;padding:max(16px,env(safe-area-inset-top)) 18px max(20px,env(safe-area-inset-bottom));position:relative;overflow:hidden}
.tela[hidden]{display:none}
.tela-azul{background:var(--ceu);align-items:center;justify-content:center;text-align:center}
.tela-creme{background:#FFF7E0}
.tela-noite{background:#0F2A66;color:#fff}
.tela-verde{background:#E9F9F0;align-items:center}
.tela-pais{background:#F4F7FC}
h1{margin:0;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:clamp(30px,8vw,40px);line-height:1.05}
.topo{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.icone-btn{width:48px;height:48px;border:none;border-radius:16px;background:#fff;box-shadow:0 3px 0 var(--linha);display:flex;align-items:center;justify-content:center;color:var(--azul-esc);flex:none}
.icone-btn svg{width:24px;height:24px}
.icone-escuro{background:#1F3F86;box-shadow:none;color:#fff}
.estrelas{display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 14px 6px 8px;box-shadow:0 2px 0 var(--linha);font-family:'Baloo 2',sans-serif;font-weight:800;font-size:24px}
.estrela{width:28px;height:28px;fill:var(--amarelo);stroke:#E0A400;stroke-width:1.2}
.balao{position:relative;background:#fff;border-radius:26px;padding:12px 14px 12px 18px;box-shadow:0 3px 0 var(--linha);display:flex;align-items:center;gap:12px;align-self:center;max-width:100%}
.balao p{margin:0;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:22px;line-height:1.15;color:var(--azul-esc)}
.balao .sub,.sub{font-family:'Nunito',sans-serif;font-size:13px;font-weight:700;color:var(--cinza)}
.balao-lado{flex:1;border-radius:22px 22px 22px 6px;margin-bottom:16px}
.som{flex:none;width:52px;height:52px;border-radius:50%;border:none;background:var(--azul);color:#fff;display:flex;align-items:center;justify-content:center}
.som svg{width:24px;height:24px}
.som.tocando{animation:pulso .8s ease-in-out infinite}
.kido-btn{border:none;background:none;padding:0;align-self:center}
.kido{width:min(240px,60vw);height:auto;display:block}
.kido-p{width:120px;height:120px;object-fit:contain;flex:none}
.kido-m{width:150px;height:150px;object-fit:contain;align-self:center}
.kido-linha{display:flex;align-items:flex-end;gap:6px}
.kido-bob{animation:bob 3s ease-in-out infinite}
.kido-pop{animation:pop .5s ease-out}
.kido-canta{animation:canta 1.4s ease-in-out infinite;width:min(190px,48vw)}
.cartao{background:#fff;border-radius:28px;padding:14px;box-shadow:0 4px 0 var(--linha);position:relative}
.missao-topo{display:flex;justify-content:space-between;align-items:center;padding:0 6px 10px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px}
.pontos{font-family:'Nunito',sans-serif;font-size:13px;color:var(--verde-sombra)}
.grade3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grade4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bloco{height:112px;border:none;border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:800;font-size:13px;transition:transform .15s}
.bloco:active,.carta:active,.btn:active{transform:scale(.94)}
.bloco-amarelo{background:var(--amarelo);box-shadow:0 5px 0 var(--amarelo-sombra)}
.bloco-azul{background:var(--azul);box-shadow:0 5px 0 var(--azul-sombra);color:#fff}
.bloco-off{background:#E3ECF8;color:#7C8FB3}
.bloco-off svg{width:46px;height:40px;stroke-width:3}
.bloco-grande{font-family:'Baloo 2',sans-serif;font-size:54px;line-height:1}
.bloco-hi{background:#fff;color:var(--azul);font-family:'Baloo 2',sans-serif;font-size:26px;line-height:1;padding:8px 12px;border-radius:16px 16px 16px 4px}
.btn-falar{margin-top:auto;width:100%;height:76px;border:none;border-radius:38px;background:var(--amarelo);box-shadow:0 6px 0 var(--amarelo-sombra);display:flex;align-items:center;justify-content:center;gap:12px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:24px;animation:anel 1.6s ease-out infinite}
.mic-bola{width:52px;height:52px;border-radius:50%;background:var(--azul-esc);color:var(--amarelo);display:flex;align-items:center;justify-content:center}
.mic-bola svg{width:26px;height:26px}
.btn{border:none;height:68px;border-radius:34px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:24px;width:100%;transition:transform .15s}
.btn[disabled]{opacity:.45}
.btn-verde{background:var(--verde);box-shadow:0 6px 0 var(--verde-sombra);color:#fff;margin-top:auto}
.btn-amarelo{background:var(--amarelo);box-shadow:0 6px 0 var(--amarelo-sombra)}
.btn-azul{background:var(--azul);box-shadow:0 5px 0 var(--azul-sombra);color:#fff}
.btn-p{height:48px;font-size:18px;margin-top:8px}
.barra{flex:1;height:18px;border-radius:9px;background:#F3E2B3;overflow:hidden}
.barra div{height:100%;width:0;background:var(--verde);border-radius:9px;transition:width .4s}
.rodada{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:18px}
.figura{height:clamp(220px,32vh,290px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 5px 0 #F0D9A0;overflow:hidden}
.fig{font-size:clamp(96px,26vw,130px);line-height:1;animation:bob 3s ease-in-out infinite}
.palavra{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:38px;letter-spacing:3px}
.palavra.certa{color:var(--verde)}
.selo{position:absolute;top:12px;right:12px;color:#fff;font-weight:800;font-size:16px;padding:6px 12px;border-radius:999px;animation:pop .4s}
.carta{height:128px;border:none;border-radius:28px;background:#fff;box-shadow:0 6px 0 #E9D49B;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif;transition:transform .15s}
.carta b{font-size:64px;line-height:.9}.carta i{font-style:normal;font-weight:700;font-size:26px;opacity:.8}
.carta.certa{background:var(--verde);box-shadow:0 6px 0 var(--verde-sombra);color:#fff!important;animation:pop .5s}
.carta.errada{animation:treme .45s}
.falar-area{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:10px}
.falar-area[hidden],[hidden]{display:none!important}
.mic{width:116px;height:116px;border:none;border-radius:50%;background:var(--amarelo);box-shadow:0 7px 0 var(--amarelo-sombra);display:flex;align-items:center;justify-content:center;color:var(--azul-esc)}
.mic svg{width:50px;height:50px}
.mic-dica{animation:dica 1.4s ease-in-out infinite}
.mic.gravando{background:var(--coral);box-shadow:0 7px 0 #C9452F;color:#fff;animation:anel-coral 1s ease-out infinite}
.mic.esperando{opacity:.6;animation:none}
.instrucao{font-family:'Baloo 2',sans-serif;font-weight:800;font-size:22px}
.titulo-conversa{flex:1;display:flex;flex-direction:column}
.titulo-conversa strong{font-family:'Baloo 2',sans-serif;font-size:24px;line-height:1}
.titulo-conversa span{font-size:13px;font-weight:700;color:#A9BCE6}
.chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;overflow:hidden;min-height:180px}
.msg{max-width:84%;padding:10px 14px;font-family:'Baloo 2',sans-serif;font-weight:700;font-size:20px;line-height:1.2;animation:pop .35s ease-out}
.msg-kido{align-self:flex-start;background:#fff;color:var(--azul-esc);border-radius:22px 22px 22px 6px}
.msg-eu{align-self:flex-end;background:var(--amarelo);color:var(--azul-esc);border-radius:22px 22px 6px 22px}
.msg-pensando{align-self:flex-start;background:#fff;border-radius:22px 22px 22px 6px;padding:14px 18px;display:flex;gap:6px}
.msg-pensando i{width:9px;height:9px;border-radius:50%;background:#7C8FB3;animation:ponto 1s infinite}
.msg-pensando i:nth-child(2){animation-delay:.15s}.msg-pensando i:nth-child(3){animation-delay:.3s}
.conversa-botoes{display:flex;justify-content:center}
.dica{margin:0;text-align:center;font-size:13px;font-weight:700;color:#A9BCE6}
.presente{border:none;background:none;display:flex;flex-direction:column;align-items:center;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px;animation:sacode 1.2s ease-in-out infinite}
.presente svg{width:150px;height:150px;stroke:none}
.album{width:100%}
.figurinha{aspect-ratio:1;border-radius:16px;background:#F2F6FA;border:3px dashed #C9D8E6;display:flex;align-items:center;justify-content:center;font-family:'Baloo 2',sans-serif;font-weight:800;color:#B9CFE0;font-size:22px;overflow:hidden}
.figurinha img{width:92%;height:92%;object-fit:contain}
.figurinha.tem{background:var(--ceu);border:3px solid #D7E4F5}
.figurinha.nova{border-color:var(--verde);animation:revela .7s cubic-bezier(.2,.9,.3,1.3) both}
.confete-area{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.confete{position:absolute;top:-30px;width:12px;height:18px;border-radius:3px;animation:cai linear forwards}
.pin{display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px;align-self:center}
.pin label{font-weight:800}
.pin input{height:64px;border-radius:20px;border:3px solid var(--linha);font:800 30px 'Baloo 2',sans-serif;text-align:center;letter-spacing:8px;color:var(--azul-esc);background:#fff}
.erro{color:#B42318;font-weight:800;min-height:1em;margin:0}
.pais-texto{font-size:15px;font-weight:700;color:var(--cinza);margin:0}
.pais-h1{font-size:26px;flex:1}
#pais-painel{display:flex;flex-direction:column;gap:12px}
.pais-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.pcard{background:#fff;border-radius:18px;padding:14px;box-shadow:0 2px 0 #DCE5F2;display:flex;flex-direction:column;gap:6px}
.pcard>span{font-size:13px;font-weight:800;color:var(--cinza)}
.pcard strong{font-family:'Baloo 2',sans-serif;font-size:26px;line-height:1.1}
.p-letras{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px}
.p-letras div{height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font:800 20px 'Baloo 2',sans-serif;background:#E3ECF8}
.p-letras .sabe{background:var(--verde);color:#fff}.p-letras .praticando{background:var(--amarelo)}
.legenda{margin:0;font-size:12px;font-weight:800;color:var(--cinza);display:flex;gap:10px;align-items:center}
.legenda i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:4px}
.l-sabe{background:var(--verde)}.l-prat{background:var(--amarelo)}.l-ainda{background:#E3ECF8}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-weight:800;font-size:14px;padding:6px 12px;border-radius:999px;background:var(--ceu);color:var(--azul)}
#p-frases{margin:0;padding-left:18px;font-weight:700}
.relatorio{margin:0;font-weight:600;line-height:1.45;white-space:pre-line}
.seg{display:flex;gap:8px}
.seg button{flex:1;height:44px;border-radius:12px;border:2px solid #D7E4F5;background:#fff;font-weight:800}
.seg button.on{background:var(--azul);border-color:var(--azul);color:#fff}
.chk{display:flex;align-items:center;gap:10px;font-weight:800}
.chk input{width:22px;height:22px;accent-color:var(--verde)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes treme{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes anel{0%{box-shadow:0 6px 0 var(--amarelo-sombra),0 0 0 0 rgba(255,194,26,.55)}100%{box-shadow:0 6px 0 var(--amarelo-sombra),0 0 0 22px rgba(255,194,26,0)}}
@keyframes anel-coral{0%{box-shadow:0 7px 0 #C9452F,0 0 0 0 rgba(255,107,87,.55)}100%{box-shadow:0 7px 0 #C9452F,0 0 0 30px rgba(255,107,87,0)}}
@keyframes dica{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes pulso{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes ponto{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-6px);opacity:1}}
@keyframes canta{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes sacode{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
@keyframes revela{0%{transform:scale(.2) rotate(-20deg);opacity:0}70%{transform:scale(1.15) rotate(6deg);opacity:1}100%{transform:scale(1)}}
@keyframes cai{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(540deg)}}
@media (min-width:700px){#app{max-width:920px}.tela-pais .pais-cards{grid-template-columns:repeat(3,1fr)}.p-letras{grid-template-columns:repeat(16,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* passo em inglês: orientação em pt no balão, o que ele repete em inglês destacado */
.balao .sub.en{font-family:'Baloo 2',sans-serif;font-size:22px;font-weight:800;color:var(--azul);margin-top:4px}
.palavra.frase{font-size:clamp(24px,6.5vw,30px);letter-spacing:0;text-align:center;line-height:1.15;padding:0 12px}
/* quem vai brincar */
.kido-quem{width:min(170px,42vw)}
.lista-criancas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%;max-width:420px}
.crianca-btn{border:none;border-radius:28px;background:#fff;box-shadow:0 6px 0 var(--linha);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:26px;color:var(--azul-esc);transition:transform .15s}
.crianca-btn:active{transform:scale(.94)}
.crianca-btn img{width:96px;height:96px;object-fit:contain;border-radius:50%;background:var(--ceu)}
.crianca-btn small{font-family:'Nunito',sans-serif;font-size:14px;color:var(--cinza);font-weight:800}
.link-pais{border:none;background:none;color:var(--cinza);font-weight:800;text-decoration:underline;margin-top:8px}
.quem-sou{border:none;background:#fff;border-radius:999px;padding:4px 14px 4px 4px;box-shadow:0 2px 0 var(--linha);display:flex;align-items:center;gap:8px;font-family:'Baloo 2',sans-serif;font-weight:800;font-size:20px;color:var(--azul-esc);margin-right:auto}
.quem-sou img{width:40px;height:40px;object-fit:contain;border-radius:50%;background:var(--ceu)}
.seg-criancas{flex-wrap:wrap}.seg-criancas button{flex:0 1 auto;padding:0 16px}
.nova-crianca{display:flex;gap:8px;margin-top:6px}
.nova-crianca input{flex:1;min-width:0;height:48px;border-radius:12px;border:2px solid #D7E4F5;font:700 16px 'Nunito',sans-serif;padding:0 12px}
.nova-crianca .btn{width:auto;padding:0 18px;margin:0}
.link-excluir{background:none;border:0;color:#B42318;font:800 15px 'Nunito',sans-serif;text-decoration:underline;padding:8px 0;cursor:pointer;align-self:flex-start}
.confirma{background:#FFF1F0;border:2px solid #F7C1BC;border-radius:14px;padding:12px;margin-top:6px}
.confirma p{margin:0 0 8px;font-weight:700;color:#7A1A12}
.confirma-botoes{display:flex;gap:8px;flex-wrap:wrap}.confirma-botoes .btn{width:auto;flex:1;margin:0;padding:0 14px}
.btn-vermelho{background:#D92D20;color:#fff}.btn-claro{background:#fff;color:#33415C;border:2px solid #D7E4F5}
/* níveis */
.nivel-card{display:flex;align-items:center;gap:12px;padding:10px 14px}
.nivel-card img{width:72px;height:72px;object-fit:contain;flex:none;animation:bob 3s ease-in-out infinite}
.nivel-info{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.nivel-info strong{font-family:'Baloo 2',sans-serif;font-size:19px;line-height:1.1}
.nivel-info span{font-size:13px;font-weight:800;color:var(--cinza)}
.barra-nivel{height:12px;border-radius:6px;background:#E3ECF8;overflow:hidden}
.barra-nivel div{height:100%;width:0;background:linear-gradient(90deg,var(--amarelo),#FF8A3D);border-radius:6px;transition:width .6s}
.tela-nivel{background:#1F5FD6;color:#fff;align-items:center;justify-content:center;text-align:center}
.raios{position:absolute;left:50%;top:42%;width:1400px;height:1400px;margin:-700px 0 0 -700px;
  background:repeating-conic-gradient(rgba(255,255,255,.14) 0 10deg,transparent 10deg 20deg);animation:gira 18s linear infinite;pointer-events:none}
.nivel-selo{position:relative;margin:0;background:var(--amarelo);color:var(--azul-esc);font:800 22px 'Baloo 2',sans-serif;padding:6px 20px;border-radius:999px;animation:pop .6s}
.nivel-novo{position:relative;width:min(300px,72vw);height:auto;animation:sobe 1s cubic-bezier(.2,.9,.3,1.3) both,bob 3s ease-in-out 1s infinite}
.tela-nivel h1{position:relative;font-size:clamp(28px,8vw,40px)}
.nivel-num{position:relative;margin:0;font-weight:800;font-size:16px;opacity:.9}
.tela-nivel .btn{position:relative;max-width:320px}
.figurinha.bloqueada img{filter:brightness(0) opacity(.18)}
.figurinha small{position:absolute;bottom:4px;font:800 12px 'Nunito',sans-serif;color:var(--cinza)}
.figurinha{position:relative}
@keyframes gira{to{transform:rotate(360deg)}}
@keyframes sobe{0%{transform:translateY(80px) scale(.3);opacity:0}100%{transform:translateY(0) scale(1);opacity:1}}