/* Mochila Mágica — base comum dos jogos «Para os mais pequeninos» (puzzle, sílabas, quantidades, sequências).
   Ecrã inteiro primeiro: 100dvh, sem scroll, sem gestos do navegador; tudo grande para dedos pequenos. */
@font-face{font-family:"Fredoka";src:url(../../assets/fonts/fredoka-var.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Nunito";src:url(../../assets/fonts/nunito-var.woff2) format("woff2");font-weight:200 1000;font-display:swap}
:root{--cream:#FFF7EC;--cream2:#FCEBD3;--orange:#FF6B2C;--orange-d:#E2551A;--yellow:#FFC93C;--yellow-d:#E8A800;--green:#2DBE6C;--green-d:#1E9A54;--blue:#4F7DF3;--blue-d:#3A63D1;--navy:#1E2A4A;--ink2:#4A5573;--line:#F0DFC6;--pink:#E5484D;--purple:#9B5DE5;
  --ft:"Fredoka","Nunito",system-ui,sans-serif;--fb:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;color:var(--navy);font:600 1rem/1.35 var(--fb);touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;
  background:var(--cream2) radial-gradient(rgba(30,42,74,.06) 1.5px,transparent 1.6px) 0 0/22px 22px}
img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none;margin:0}
button:focus-visible,a:focus-visible{outline:4px solid var(--blue);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#app{position:relative;margin:0 auto;width:min(100vw,1100px);height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column;background:var(--cream);
  background-image:radial-gradient(circle at 6% 22%,rgba(255,201,60,.22) 0 110px,transparent 111px),radial-gradient(circle at 96% 74%,rgba(79,125,243,.08) 0 150px,transparent 151px),radial-gradient(circle at 88% 98%,rgba(255,107,44,.1) 0 120px,transparent 121px),radial-gradient(rgba(30,42,74,.05) 1.5px,transparent 1.6px);background-size:auto,auto,auto,26px 26px}
@media (min-width:1120px){#app{box-shadow:0 0 0 5px #fff,0 24px 70px rgba(30,42,74,.16)}}

/* ---------- barra de cima ---------- */
.top{flex:none;display:flex;align-items:center;gap:10px;padding:calc(var(--sat) + 10px) 12px 6px;position:relative;z-index:20}
.top .sp{flex:1;min-width:0;display:flex;justify-content:center}
.ib{flex:none;width:60px;height:60px;border-radius:50%;border:3px solid var(--line);background:#fff;display:inline-grid;place-items:center;box-shadow:0 5px 0 rgba(30,42,74,.12);padding:0;text-decoration:none;color:var(--navy);transition:transform .08s,box-shadow .08s}
.ib:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(30,42,74,.12)}
.ib svg{width:30px;height:30px;display:block}
.ib.back{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 5px 0 var(--orange-d);width:64px;height:64px}
.ib.back svg{width:34px;height:34px}
.ib.talk{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 5px 0 var(--blue-d)}
.ib.talk.on{animation:talk 1s ease-in-out infinite}
@keyframes talk{50%{transform:scale(1.08)}}
.starchip{flex:none;display:inline-flex;align-items:center;gap:6px;height:52px;padding:0 16px 0 12px;border-radius:999px;background:var(--navy);color:#fff;font:600 1.5rem/1 var(--ft);box-shadow:0 4px 0 rgba(30,42,74,.25)}
.starchip svg{width:28px;height:28px}
.starchip.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.18)}}
.dots{display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:center}
.dots i{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--line);display:block}
.dots i.done{background:var(--yellow);border-color:var(--yellow-d)}
.dots i.now{border-color:var(--blue);background:#E6EDFF;transform:scale(1.2)}

/* ---------- ecrã inicial ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:calc(var(--sat) + 84px) 16px calc(var(--sab) + 16px);z-index:10}
.screen .top{position:absolute;left:0;right:0;top:0}
h1,h2{font-family:var(--ft);font-weight:600;line-height:1.08;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2rem,8.4vw,3rem)} h2{font-size:clamp(1.7rem,7vw,2.4rem)}
.pill{display:inline-block;padding:.02em .4em .08em;border-radius:999px;background:var(--orange);color:#fff;line-height:1.12}
.pill.y{background:var(--yellow);color:var(--navy)} .pill.b{background:var(--blue)} .pill.g{background:var(--green)}
.hero{width:min(52vw,230px,27dvh);aspect-ratio:1;position:relative;margin:4px 0 10px}
.hero img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(30,42,74,.18));animation:bob 2.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}
.hello{display:flex;align-items:center;gap:10px;margin-top:10px;justify-content:center}
.bubble{background:#fff;border:3px solid var(--line);border-radius:22px;padding:8px 14px 9px;font:600 1.08rem/1.25 var(--ft);color:var(--navy);box-shadow:0 4px 0 rgba(30,42,74,.07);text-align:left}
.levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:min(100%,560px);margin-top:18px}
.lvl{border:4px solid var(--line);background:#fff;border-radius:28px;padding:10px 6px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;box-shadow:0 7px 0 rgba(30,42,74,.1);min-height:150px;justify-content:center;transition:transform .08s,box-shadow .08s}
.lvl:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(30,42,74,.1)}
.lvl .n{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font:600 2.3rem/1 var(--ft);color:#fff;background:var(--green);box-shadow:0 4px 0 var(--green-d)}
.lvl:nth-child(2) .n{background:var(--blue);box-shadow:0 4px 0 var(--blue-d)}
.lvl:nth-child(3) .n{background:var(--orange);box-shadow:0 4px 0 var(--orange-d)}
.lvl .ic{height:30px;display:flex;align-items:center;justify-content:center;gap:3px}
.lvl .ic svg{height:100%;width:auto;display:block}
.stars{display:flex;gap:2px;justify-content:center}
.stars svg{width:26px;height:26px;display:block}
.stars.big svg{width:min(17vw,76px);height:min(17vw,76px)}

/* ---------- jogo ---------- */
#game{position:absolute;inset:0;display:flex;flex-direction:column;z-index:5}
.say-row{flex:none;display:flex;align-items:center;gap:8px;padding:2px 12px 6px;justify-content:center}
.say-row .mini{width:54px;height:58px;object-fit:contain;flex:none;filter:drop-shadow(0 4px 3px rgba(30,42,74,.15))}
.say-row .mini.hop{animation:hop .5s}
@keyframes hop{40%{transform:translateY(-12px) scale(1.06)}}
.say-row .bubble{font-size:clamp(.98rem,4vw,1.15rem);max-width:min(64vw,480px)}
#area{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4px 12px calc(var(--sab) + 12px)}

/* peças arrastáveis */
.drag{touch-action:none;cursor:grab;position:relative;-webkit-user-select:none;user-select:none}
.drag.sel{outline:5px solid var(--blue);outline-offset:3px;transform:translateY(-6px) scale(1.04);z-index:3}
.drag.ghost{visibility:hidden}
#dlayer{position:fixed;inset:0;pointer-events:none;z-index:60}
#dlayer>*{position:fixed!important;margin:0!important;pointer-events:none;will-change:transform;cursor:grabbing;filter:drop-shadow(0 14px 12px rgba(30,42,74,.25))}
.back-home{transition:transform .22s ease-out}
.wiggle{animation:wig .5s}
@keyframes wig{20%{transform:rotate(-9deg)}40%{transform:rotate(8deg)}60%{transform:rotate(-6deg)}80%{transform:rotate(3deg)}}
.tgt.hover{outline:5px dashed var(--blue);outline-offset:2px}
.hint{animation:hint 1.1s ease-in-out infinite}
@keyframes hint{50%{box-shadow:0 0 0 8px rgba(255,201,60,.85)}}
.pop{animation:pop .4s cubic-bezier(.3,1.6,.6,1)}
@keyframes pop{0%{transform:scale(.6)}100%{transform:none}}

/* ---------- festa do Mochi ---------- */
.party{position:absolute;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(255,247,236,.95);text-align:center;padding:20px}
.party .m{width:min(52vw,250px,32dvh);height:auto;filter:drop-shadow(0 12px 10px rgba(30,42,74,.2));animation:jump .9s cubic-bezier(.3,1.5,.6,1)}
@keyframes jump{0%{transform:translateY(40%) scale(.5);opacity:0}60%{transform:translateY(-6%) scale(1.04);opacity:1}100%{transform:none}}
.party .bubble{font-size:clamp(1.5rem,6.5vw,2.2rem);text-align:center;margin-bottom:10px;padding:8px 22px 10px}
.party .stars{margin-top:8px}
.party .stars svg{width:54px;height:54px}
.party .stars svg.on{animation:starin .5s backwards}
.party .stars svg:nth-child(2){animation-delay:.15s}.party .stars svg:nth-child(3){animation-delay:.3s}
@keyframes starin{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25)}100%{transform:none}}
.conf{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.conf i{position:absolute;top:-20px;width:12px;height:16px;border-radius:3px;animation:fall 1.8s linear forwards}
@keyframes fall{to{transform:translateY(110dvh) rotate(540deg)}}
.lvlend{background:rgba(30,42,74,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lvlend .card{background:#fff;border-radius:34px;padding:18px 20px 22px;box-shadow:0 10px 0 rgba(30,42,74,.18);width:min(100%,420px);display:flex;flex-direction:column;align-items:center;position:relative}
.lvlend .m{width:min(40vw,170px,24dvh)}
.lvlend .plus{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:var(--yellow);color:var(--navy);border-radius:999px;padding:4px 16px 5px;font:600 1.5rem/1 var(--ft);box-shadow:0 4px 0 var(--yellow-d)}
.lvlend .plus svg{width:26px;height:26px}
.acts{display:flex;gap:14px;margin-top:18px;justify-content:center}
.acts .ib{width:72px;height:72px}
.acts .ib svg{width:36px;height:36px}
.acts .ib.go{background:var(--green);border-color:var(--green);color:#fff;box-shadow:0 5px 0 var(--green-d);width:88px;height:88px}
.acts .ib.go svg{width:44px;height:44px}

/* movimento reduzido: sem saltos, partículas nem abanões grandes (só cor) */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.reduced *,.reduced *::before,.reduced *::after{animation:none!important;transition:none!important}
.reduced .wiggle,.reduced .wiggle *{outline:5px solid var(--orange)!important;outline-offset:2px}
.reduced .conf{display:none}
.reduced .drag.sel{transform:none}
@media (max-height:640px){.lvl{min-height:120px}.hero{width:min(30vw,120px)}}

/* ---------- modo calmo (Pré-escolar): sem pontuação à vista, sem confettis, «Sair» com palavra e ícone ---------- */
.calm .starchip{display:none}
.ib.sair{width:auto;border-radius:999px;padding:0 20px 0 12px;gap:4px;display:inline-flex;align-items:center;font:600 1.3rem/1 var(--ft);color:#fff}
.ib.sair svg{width:30px;height:30px}
.acts .ib.go.sair{width:auto;height:88px;padding:0 28px 0 18px;font-size:1.7rem;text-decoration:none}
.lvl .n.dots3{display:flex;gap:5px;align-items:center;justify-content:center}
.lvl .n.dots3 i{width:12px;height:12px;border-radius:50%;background:#fff;display:block}
.calm .party .m{animation-duration:1.4s}
.calm-end .stars.big svg{width:min(22vw,96px);height:min(22vw,96px)}

/* ---------- jogos do Pré-escolar ---------- */
.calm #instr{display:none}
.calm .hello .bubble:empty{display:none}
.pre{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3.5dvh,40px);width:100%;height:100%}
.pre.row{flex-direction:row;gap:40px}
.pc{width:var(--pc);height:var(--pc);border-radius:32px;background:#fff;border:4px solid var(--line);box-shadow:0 8px 0 rgba(30,42,74,.12);display:flex;align-items:center;justify-content:center;padding:0}
.pc svg{width:78%;height:78%;display:block;overflow:visible;pointer-events:none}
.bins{display:flex;gap:clamp(10px,3vw,24px);justify-content:center;flex-wrap:wrap}
.bin{width:var(--bin);height:var(--bin);border:0;background:none;padding:0;display:flex;align-items:center;justify-content:center;border-radius:28px;position:relative}
.bin svg{width:100%;height:100%;display:block;overflow:visible;pointer-events:none}
.bin .in{position:absolute;left:50%;top:44%;width:46%;height:46%;transform:translate(-50%,-50%)}
.bin .in .pc{width:100%;height:100%;border:0;box-shadow:none;background:none}
.bin.hint{animation:hint 1.1s ease-in-out infinite}
.choice{width:var(--ch);height:var(--ch);border-radius:32px;background:#fff;border:4px solid var(--line);box-shadow:0 8px 0 rgba(30,42,74,.12);display:flex;align-items:center;justify-content:center;padding:0;position:relative}
.choice svg{width:84%;height:84%;display:block;overflow:visible;pointer-events:none}
.choice.ok{border-color:var(--green);background:#E9F9EF;box-shadow:0 8px 0 var(--green-d)}
.choice.hint{animation:hint 1.1s ease-in-out infinite}

/* ---------- Modo de apoio (classes no <html>, ver README do projeto) ---------- */
@font-face{font-family:"Atkinson Hyperlegible";src:url(../../assets/fonts/atkinson-regular.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(../../assets/fonts/atkinson-bold.woff2) format("woff2");font-weight:700 900;font-style:normal;font-display:swap}
html.mm-apoio-fonte{--fb:"Atkinson Hyperlegible",system-ui,sans-serif;--ft:"Atkinson Hyperlegible",system-ui,sans-serif}
html.mm-apoio-fonte .bubble,html.mm-apoio-fonte .syl,html.mm-apoio-fonte .lt,html.mm-apoio-fonte .num,html.mm-apoio-fonte .word{font-weight:700}
html.mm-apoio-letra{font-size:115%}
html.mm-apoio-letra .bubble{letter-spacing:.03em;word-spacing:.1em;line-height:1.4}
html.mm-apoio-letra .say-row .bubble{font-size:clamp(1.1rem,4.4vw,1.3rem)}
html.mm-apoio-letra .word{letter-spacing:.1em}

/* ---------- o avatar da criança (o «peão» do jogador); o Mochi continua a ser quem explica ---------- */
.pl-av{object-fit:contain;-webkit-user-drag:none;user-select:none;pointer-events:none}
.pl-av.pl-top{flex:none;width:56px;height:56px;border-radius:50%;background:#fff;border:3px solid var(--line);padding:3px;box-shadow:0 4px 0 rgba(30,42,74,.12)}
.pl-av.pl-top.hop{animation:hop .5s}
.hero .pl-hero{position:absolute;right:-38%;bottom:-6%;width:58%;height:58%;filter:drop-shadow(0 8px 6px rgba(30,42,74,.18));animation:bob 2.6s ease-in-out .7s infinite}
.duo{display:flex;align-items:flex-end;justify-content:center;gap:4px}
.party .pl-party{width:min(34vw,160px,21dvh);height:auto;aspect-ratio:1;filter:drop-shadow(0 10px 8px rgba(30,42,74,.18));animation:jump .9s cubic-bezier(.3,1.5,.6,1) .12s backwards}
.lvlend .pl-party{width:min(28vw,120px,17dvh)}
.calm .party .pl-party{animation-duration:1.4s}
html.av-mochi .pl-hero,html.av-mochi .pl-party{display:none}
@media (max-width:440px){#game .top{gap:7px}.pl-av.pl-top{width:46px;height:46px;padding:2px}#game .dots{gap:5px}#game .dots i{width:13px;height:13px;border-width:2.5px}}

/* ---------- Sombra dos bonecos: a mesma de .mm-boneco em site/assets/css/mochi.css (aprovada pelo Gonçalo, 01/11/2026) ----------
   Mesmos valores (elipse no chão + drop-shadow). Avatar da criança com os pés a 92 % (como .mm-av no site). */
.hero img,.say-row .mini,.party .m,.hero .pl-hero,.party .pl-party{--mm-sombra:radial-gradient(ellipse 40% 7% at 50% var(--mm-chao,95%),rgba(30,42,74,.12),rgba(30,42,74,.07) 45%,rgba(30,42,74,0) 100%);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.15));background:var(--mm-sombra) no-repeat}
.hero .pl-hero,.party .pl-party{--mm-chao:92%}