@font-face{font-family:"Baloo 2";src:url(fonts/Baloo2.ttf);font-weight:400 800;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/Nunito.ttf);font-weight:200 900;font-display:swap}
:root{
  --fundo:#FFF4E6;--creme:#FFFBF4;--tinta:#4A3B4E;--suave:#7A6D80;
  --rosa:#FFB5C2;--rosa2:#F58FA6;--menta:#BDEBD6;--verde:#6CC59B;--verde2:#4FA67E;
  --ceu:#BFE3F5;--azul:#7FB8E8;--azul2:#5B97CF;--sol:#FFE08A;--sol2:#F2C230;--lilas:#D7C2F2;--lilas2:#A98BE0;--coral:#FF9E8A;
  --sombra:0 6px 0 rgba(74,59,78,.12);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--fundo);color:var(--tinta);font-family:Nunito,system-ui,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;touch-action:manipulation}
#app{max-width:480px;min-height:100%;margin:0 auto;position:relative;overflow:hidden;padding:calc(env(safe-area-inset-top) + 14px) 18px calc(env(safe-area-inset-bottom) + 18px)}
.tela{min-height:calc(100dvh - 40px);display:flex;flex-direction:column;gap:14px;animation:entra .35s ease both}
.calmo .tela{animation:none}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* fundo fofinho */
.bolhas-fundo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bolhas-fundo i{position:absolute;border-radius:50%;opacity:.55}
.nuvem{position:absolute;opacity:.9}

.topo{display:flex;align-items:center;gap:10px}
.icone-btn{width:54px;height:54px;border-radius:20px;background:#fff;box-shadow:var(--sombra);display:flex;align-items:center;justify-content:center;flex:none}
.icone-btn svg{width:26px;height:26px}
.pill{height:46px;padding:0 16px;border-radius:18px;background:#fff;box-shadow:var(--sombra);display:flex;align-items:center;gap:6px;font:800 18px Nunito}
.titulo{font:800 26px/1.05 "Baloo 2";margin:0}
.sub{font:700 14px Nunito;color:var(--suave)}
.balao{background:#fff;border-radius:24px;padding:14px 18px;box-shadow:var(--sombra);font:800 19px/1.3 Nunito;position:relative}
.balao::before{content:"";position:absolute;left:-8px;top:22px;border:9px solid transparent;border-right-color:#fff;border-left:0}

.grande{height:78px;border-radius:30px;font:800 30px "Baloo 2";color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;width:100%}
.verde{background:var(--verde);box-shadow:0 7px 0 var(--verde2)}
.amarelo{background:var(--sol);box-shadow:0 7px 0 var(--sol2);color:var(--tinta)}
.branco{background:#fff;box-shadow:var(--sombra);color:var(--tinta)}
.grande:active,.opcao:active,.no:active{transform:translateY(4px);box-shadow:none}

/* início */
.logo{text-align:center;margin-top:10px}
.logo small{font:800 15px Nunito;letter-spacing:.14em;color:var(--verde2)}
.logo h1{margin:2px 0 0;font:800 56px/.9 "Baloo 2"}
.logo h1 span{color:var(--rosa2)}
.capi-grande{align-self:center;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#FFF0B8,#FFE08A);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 -10px 0 rgba(242,194,48,.25)}
.capi-grande svg{width:200px;height:200px}
.respira{animation:respira 3.2s ease-in-out infinite}
.calmo .respira{animation:none}
@keyframes respira{50%{transform:scale(1.04) translateY(-3px)}}
.linha-btns{display:flex;gap:12px}
.linha-btns>button{flex:1;height:62px;border-radius:24px;background:#fff;box-shadow:var(--sombra);font:800 17px Nunito;display:flex;align-items:center;justify-content:center;gap:8px}
.mt-auto{margin-top:auto}

/* trilha */
.trilha{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px;padding:4px 2px 24px}
.no{aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 40px/1 "Baloo 2";color:#fff;position:relative}
.no small{font:800 12px Nunito;opacity:.95;margin-top:2px;letter-spacing:.05em}
.no .est{position:absolute;bottom:-8px;display:flex;gap:1px}
.no .est svg{width:17px;height:17px}
.no.bloq{background:#fff !important;color:#C9C0CC;box-shadow:inset 0 0 0 4px #EDE6EF !important}
.no.atual{outline:7px solid rgba(255,224,138,.8)}
.calmo .no.atual{outline-width:5px}

/* jogos */
.barra{flex:1;height:18px;border-radius:99px;background:rgba(74,59,78,.08);overflow:hidden}
.barra i{display:block;height:100%;border-radius:99px;background:var(--verde);transition:width .4s}
.cartao{background:#fff;border-radius:34px;box-shadow:var(--sombra);padding:18px;display:flex;flex-direction:column;align-items:center;gap:8px;position:relative}
.cartao .fig svg{width:170px;height:170px}
.palavra{font:800 40px "Baloo 2";letter-spacing:.1em}
.palavra .falta{display:inline-block;min-width:38px;border-bottom:5px solid var(--coral);color:transparent}
.palavra .falta.ok{color:var(--verde2)}
.ouvir{position:absolute;right:14px;top:14px;width:58px;height:58px;border-radius:50%;background:var(--azul);box-shadow:0 5px 0 var(--azul2);display:flex;align-items:center;justify-content:center}
.ouvir svg{width:28px;height:28px}
.opcoes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.opcao{height:112px;border-radius:30px;background:#fff;box-shadow:var(--sombra);font:800 62px "Baloo 2";display:flex;align-items:center;justify-content:center}
.opcao.sil{font-size:42px;height:96px}
.opcao.certo{background:#E3F6EC;box-shadow:0 6px 0 var(--verde2);color:var(--verde2)}
.opcao.errado{animation:balanca .45s}
.calmo .opcao.errado{animation:none;opacity:.45}
@keyframes balanca{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.dica{text-align:center;font:700 15px Nunito;color:var(--suave)}
.slots{display:flex;gap:10px;justify-content:center}
.slot{min-width:104px;height:86px;border-radius:24px;border:4px dashed var(--coral);display:flex;align-items:center;justify-content:center;font:800 44px "Baloo 2";background:#FFF6F2}
.slot.cheio{border:none;background:var(--azul);color:#fff;box-shadow:0 6px 0 var(--azul2)}

/* traçar */
.tela-tracar canvas{width:100%;height:100%;touch-action:none;display:block}
.area-tracar{flex:1;min-height:340px;background:#fff;border-radius:34px;box-shadow:var(--sombra);position:relative;overflow:hidden}

/* memória */
.memo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.carta{aspect-ratio:3/4;border-radius:22px;perspective:600px}
.carta .in{width:100%;height:100%;position:relative;transition:transform .45s;transform-style:preserve-3d}
.calmo .carta .in{transition:transform .25s}
.carta.virada .in,.carta.par .in{transform:rotateY(180deg)}
.carta .f,.carta .v{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:flex;align-items:center;justify-content:center}
.carta .f{background:var(--lilas);box-shadow:var(--sombra)}
.carta .f svg{width:56%;opacity:.9}
.carta .v{background:#fff;box-shadow:var(--sombra);transform:rotateY(180deg);font:800 54px "Baloo 2"}
.carta .v svg{width:82%;height:82%}
.carta.par .v{background:#E3F6EC}

/* bolhas */
.aquario{flex:1;min-height:420px;position:relative;border-radius:34px;background:linear-gradient(#DDF1FB,#BFE3F5);box-shadow:var(--sombra);overflow:hidden}
.bolha{position:absolute;width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,rgba(255,255,255,.55) 35%,rgba(255,255,255,.25));border:3px solid rgba(255,255,255,.95);box-shadow:inset -6px -8px 0 rgba(127,184,232,.25);font:800 40px "Baloo 2";color:var(--tinta);display:flex;align-items:center;justify-content:center}
.bolha.estoura{animation:estoura .35s forwards}
@keyframes estoura{to{transform:scale(1.6);opacity:0}}

/* conquista */
.vitoria{background:var(--verde);color:#fff;border-radius:0;margin:-14px -18px;padding:60px 18px 26px;min-height:100dvh;text-align:center;align-items:center}
.vitoria h1{font:800 50px/1 "Baloo 2";margin:10px 0 0}
.figurinha{width:220px;background:#fff;color:var(--tinta);border-radius:30px;padding:16px;box-shadow:0 8px 0 var(--verde2);transform:rotate(-3deg);display:flex;flex-direction:column;align-items:center;gap:6px}
.figurinha small{font:800 13px Nunito;letter-spacing:.12em;color:var(--rosa2)}
.figurinha svg{width:140px;height:140px}

/* álbum */
.album{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.album>div{aspect-ratio:1;border-radius:24px;background:#fff;box-shadow:var(--sombra);display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 14px "Baloo 2"}
.album>div svg{width:62%;height:62%}
.album>div.vazio{background:rgba(255,255,255,.55);box-shadow:none;border:3px dashed #E6DCEA;color:#C9C0CC;font-size:28px}

/* pais */
.painel{background:#fff;border-radius:24px;box-shadow:var(--sombra);padding:6px 16px}
.item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:2px solid #F3EDF5}
.item:last-child{border:none}
.item b{font:800 17px Nunito;display:block}
.item span{font:600 13px/1.35 Nunito;color:var(--suave)}
.chave{width:60px;height:34px;border-radius:99px;background:#E6DCEA;position:relative;flex:none}
.chave::after{content:"";position:absolute;left:4px;top:4px;width:26px;height:26px;border-radius:50%;background:#fff;transition:left .2s}
.chave.on{background:var(--verde)}
.chave.on::after{left:30px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats div{background:#fff;border-radius:20px;box-shadow:var(--sombra);padding:12px;text-align:center;font:700 13px Nunito;color:var(--suave)}
.stats b{display:block;font:800 30px "Baloo 2";color:var(--tinta)}
.seg{display:flex;background:#F3EDF5;border-radius:16px;padding:4px;gap:4px;flex:none}
.seg button{height:42px;padding:0 12px;border-radius:12px;font:800 15px Nunito}
.seg button.on{background:var(--tinta);color:#fff}

.aviso-instalar{background:#fff;border-radius:24px;box-shadow:var(--sombra);padding:14px 16px;display:flex;gap:12px;align-items:center;font:700 14px/1.35 Nunito}
.aviso-instalar b{font:800 16px Nunito;display:block}
.aviso-instalar button{height:44px;padding:0 14px;border-radius:16px;background:var(--verde);color:#fff;font:800 15px Nunito;box-shadow:0 4px 0 var(--verde2);flex:none}

#confete{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
#confete i{position:absolute;top:-20px;width:12px;height:18px;border-radius:4px;animation:cai 1.8s ease-in forwards}
@keyframes cai{to{transform:translateY(110vh) rotate(540deg)}}
.oculto{display:none !important}