:root{
  --bg1:#E8F4FF; --bg2:#FFF1F6; --ink:#2B2D42; --muted:#55597A; --card:#fff;
  --pink:#FFB3C7; --pink-d:#D94A72;
  --mint:#B5EAD7; --mint-d:#1E8A5E;
  --sky:#B8DCFF;  --sky-d:#2F74E0;
  --lemon:#FFE8A3; --lemon-d:#C99400;
  --lilac:#D9C8FF; --lilac-d:#7048D8;
  --clay:inset 0 -8px 0 rgba(0,0,0,.10), inset 0 6px 10px rgba(255,255,255,.7), 0 10px 20px rgba(43,45,66,.13);
  --clay-press:inset 0 -2px 0 rgba(0,0,0,.12), inset 0 4px 8px rgba(255,255,255,.6), 0 4px 8px rgba(43,45,66,.15);
  --pic:clamp(44px,7.5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;overscroll-behavior:none}
body{font-family:'Baloo 2',system-ui,sans-serif;color:var(--ink);background:linear-gradient(160deg,var(--bg1),var(--bg2)) fixed;
  -webkit-tap-highlight-color:transparent;overflow-x:hidden;touch-action:manipulation}
body:not([data-screen="welcome"]):not([data-screen="parent"]):not([data-screen="gate"]){user-select:none;-webkit-user-select:none}
.wrap{max-width:1100px;margin:0 auto;padding:12px 16px calc(16px + env(safe-area-inset-bottom));min-height:100vh;display:flex;flex-direction:column}
button{font-family:inherit;cursor:pointer;border:none;color:inherit;background:none;transition:transform .15s,box-shadow .15s}
button:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid var(--sky-d);outline-offset:3px}
.clay{border-radius:32px;box-shadow:var(--clay)}
button.clay:active{transform:translateY(4px) scale(.98);box-shadow:var(--clay-press)}
.muted{color:var(--muted);font-weight:500}
[hidden]{display:none!important}

header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.logo{font-size:clamp(24px,4vw,36px);font-weight:800;color:var(--sky-d);text-shadow:0 3px 0 #fff}
.logo{display:flex;align-items:center;gap:8px}
.logo-txt span{color:var(--pink-d)}
.logo-mascot{width:clamp(50px,7vw,66px);height:auto;flex:none;overflow:visible;filter:drop-shadow(0 4px 4px rgba(43,45,66,.18));animation:hop 2.4s ease-in-out infinite}
.logo-mascot .ear{transform-box:fill-box;transform-origin:50% 100%}
.logo-mascot .ear-l{animation:earL 3.2s ease-in-out infinite}
.logo-mascot .ear-r{animation:earR 3.2s ease-in-out infinite}
.logo-mascot .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4s infinite}
.logo-mascot .star{transform-box:fill-box;transform-origin:center;animation:twinkle 2.4s ease-in-out infinite}
@keyframes hop{0%,60%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-6px) rotate(-6deg)}45%{transform:translateY(0) rotate(3deg)}}
@keyframes earL{0%,70%,100%{transform:rotate(0)}78%{transform:rotate(-14deg)}86%{transform:rotate(4deg)}}
@keyframes earR{0%,20%,100%{transform:rotate(0)}28%{transform:rotate(14deg)}36%{transform:rotate(-4deg)}}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes twinkle{50%{transform:scale(1.25) rotate(20deg)}}
.hdr{display:flex;gap:10px;align-items:center}
.pill{display:flex;align-items:center;gap:6px;background:#fff;padding:6px 18px;font-size:24px;font-weight:800;border-radius:999px;box-shadow:var(--clay)}
.iconbtn{width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:var(--clay);flex:none;font-size:28px}
.iconbtn.sm{width:52px;height:52px;font-size:22px;background:var(--lemon)}
.iconbtn.lg{width:84px;height:84px;font-size:38px}
.iconbtn:disabled{opacity:.4}

.screen{display:none;flex:1}.screen.on{display:flex;flex-direction:column;animation:in .35s cubic-bezier(.3,1.5,.6,1)}
@keyframes in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.topbar h2{font-size:clamp(22px,3.5vw,32px);text-align:center}
.me{display:flex;align-items:center;gap:10px;font-size:26px}
.meava{font-size:44px;width:64px;height:64px;display:grid;place-items:center;background:#fff;border-radius:50%;box-shadow:var(--clay)}

.mascot{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 14px}
.m{font-size:72px;line-height:1;animation:float 3s ease-in-out infinite}
.m.big{font-size:110px}
@keyframes float{50%{transform:translateY(-8px)}}
.bubble{background:#fff;padding:12px 20px;border-radius:24px;font-size:clamp(20px,3vw,28px);font-weight:800;box-shadow:var(--clay);max-width:640px}
.bubble.small{font-size:clamp(18px,2.6vw,24px);font-weight:600}

/* parent forms */
.card{background:var(--card);border-radius:28px;box-shadow:var(--clay);padding:24px}
.form-card{max-width:640px;margin:0 auto;width:100%}
.form-card h1,.form-card h2{font-size:30px;margin-bottom:4px}
.form{display:flex;flex-direction:column;gap:16px;margin-top:16px;font-size:18px}
.form label,.field{display:flex;flex-direction:column;gap:6px;font-weight:600}
.form label.row{flex-direction:row;align-items:flex-start;gap:10px;font-weight:500}
.form label.row.need{color:var(--pink-d)}
.kidlist{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.kidlist button{display:flex;align-items:center;gap:8px;padding:8px 18px 8px 10px;border-radius:999px;background:#F1F3FA;font-size:20px;font-weight:700;min-height:56px;border:2px solid transparent}
.kidlist button.on{background:var(--mint);border-color:var(--mint-d)}
.kidlist .ka{font-size:30px}
.newbox{background:#F4F8FF;border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:10px}
.small{font-size:15px;margin-top:12px}
.phoneline{margin-top:14px;font-size:20px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.req{color:var(--pink-d)}
.linkbtn{color:var(--sky-d);font-weight:700;text-decoration:underline;font-size:17px;padding:6px}
.kidlist button small{font-size:14px;font-weight:600;color:var(--muted)}
.addkid{margin-top:14px}
#claimBox{margin-top:14px}
.form input:not([type=checkbox]),.form select{font:inherit;font-size:20px;padding:12px 16px;border-radius:16px;border:2px solid #D7DCEF;background:#fff;color:var(--ink)}
input[type=checkbox]{width:26px;height:26px;flex:none;accent-color:var(--mint-d)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{padding:10px 18px;border-radius:999px;background:#F1F3FA;font-size:18px;font-weight:600;min-height:48px;border:2px solid transparent}
.chips button.on{background:var(--mint);border-color:var(--mint-d)}
.chips button.on::before{content:'✓ '}
.pbtn{background:var(--sky-d);color:#fff;padding:12px 24px;border-radius:999px;font-size:18px;font-weight:800;min-height:48px}
.pbtn.big{font-size:24px;padding:14px}
.pbtn.ghost{background:#EEF2FB;color:var(--ink)}
.pbtn.danger{background:#FCE8EE;color:var(--pink-d)}
.btnrow{display:flex;gap:10px;flex-wrap:wrap}
.err{color:var(--pink-d);font-weight:600}
.gateq{font-size:40px;font-weight:800}

.avagrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:640px;margin:0 auto;width:100%}
.ava{aspect-ratio:1;font-size:clamp(48px,10vw,80px);background:#fff}

/* map */
.quick{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:14px}
.cta{background:var(--mint);padding:14px 30px;font-size:clamp(20px,3vw,28px);font-weight:800;min-height:72px}
.review{background:var(--lemon);padding:10px 22px;display:flex;align-items:center;gap:10px;font-size:20px;text-align:left;line-height:1.2;min-height:72px}
.review .re{font-size:34px}
.goals{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:-4px 0 14px}
.goals span{background:rgba(255,255,255,.85);border-radius:999px;padding:4px 14px;font-size:16px;font-weight:600;color:var(--muted)}
.subjgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:960px;margin:0 auto;width:100%}
.subj{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:22px 16px;min-height:220px;text-align:center}
@media (min-width:701px) and (orientation:portrait){ .subj{min-height:300px} .subjgrid{margin-top:20px} }
.subj .se{font-size:clamp(56px,9vw,80px);line-height:1.1}
.subj .sx{display:flex;flex-direction:column;align-items:center;gap:4px}
.subj .sn{font-size:clamp(26px,4vw,34px);font-weight:800}
.subj .sd{font-size:17px;color:var(--ink);opacity:.8;font-weight:600}
.subj .sp{margin-top:8px;font-size:18px;font-weight:800;background:rgba(255,255,255,.75);padding:4px 14px;border-radius:999px}
.path{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.node{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:14px 8px;min-height:150px;background:#fff;position:relative}
.node:nth-child(2n){transform:translateY(18px)}
.node .ne{font-size:clamp(44px,7vw,64px);line-height:1.1}
.node .nd{font-size:22px;font-weight:800}
.node .ns{font-size:18px;color:var(--muted);font-weight:600;min-height:24px}
.node.done{background:var(--mint)}
.node.locked{background:#ECEEF5;opacity:.75}
.node.today{background:var(--lemon);outline:4px dashed var(--lemon-d);outline-offset:4px;animation:bob 2s ease-in-out infinite}
@keyframes bob{50%{translate:0 -6px}}

/* day */
.acts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.act{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:20px 14px;min-height:170px;text-align:center}
.act .ae{font-size:56px;line-height:1.1}
.act .at{font-size:24px;font-weight:800;line-height:1.15}
.act .aw{font-size:16px;color:var(--muted);font-weight:600}
.act .ad{position:absolute;top:10px;right:14px;font-size:28px}
.t-sky{background:var(--sky)}.t-pink{background:var(--pink)}.t-mint{background:var(--mint)}.t-lilac{background:var(--lilac)}.t-lemon{background:var(--lemon)}

/* game */
.gbar{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.gmid{flex:1;text-align:center}
.gtitle{font-size:18px;font-weight:600;color:var(--muted)}
.dots{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.dots i{width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:inset 0 3px 4px rgba(0,0,0,.12)}
.dots i.done{background:var(--lemon-d);box-shadow:var(--clay)}
.dots i.now{outline:3px solid var(--sky-d)}
.lvl{font-size:16px;color:var(--lemon-d);min-width:48px;text-align:center}
.hintbtn{background:var(--lemon)}
.hintbtn.glow{animation:glow 1.2s ease-in-out infinite}
.stage{background:rgba(255,255,255,.9);padding:18px;flex:1;display:flex;flex-direction:column;align-items:center;gap:12px}
.q{display:flex;align-items:center;gap:12px;font-size:clamp(24px,4vw,38px);font-weight:800;text-align:center;justify-content:center}
.coach{background:#F2F0FF;border-radius:20px;padding:8px 18px;font-size:clamp(17px,2.4vw,22px);font-weight:600;text-align:center;max-width:720px}
.board{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}
.pic{position:relative;display:inline-flex;flex-direction:column;align-items:center;font-size:var(--pic);line-height:1.15;filter:drop-shadow(0 4px 0 rgba(0,0,0,.08))}
.pic small{font-size:16px;font-weight:600;color:var(--ink);line-height:1.2;max-width:140px;text-align:center}
.pic.pop{animation:boing .5s cubic-bezier(.3,1.6,.5,1) backwards}
@keyframes boing{from{transform:scale(0) rotate(-20deg)}}
.blob{display:block;width:1.1em;height:1.1em;border-radius:46% 54% 50% 50%;background:var(--c);box-shadow:inset 0 -6px 0 rgba(0,0,0,.15),inset 0 6px 8px rgba(255,255,255,.5)}
.numeral{font-weight:800;font-size:clamp(48px,8vw,72px);line-height:1}
.pic .numeral{font-size:inherit}
.pic[data-badge]::after,.pic.counted::after{content:attr(data-badge);position:absolute;top:-6px;right:-8px;background:var(--sky-d);color:#fff;font-size:18px;font-weight:800;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;line-height:1}
.items{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;min-height:120px;width:100%}
.tapcount .pic{cursor:pointer}
.answers{display:flex;justify-content:center;gap:clamp(12px,3vw,24px);flex-wrap:wrap;margin-top:auto;width:100%}
.opt{min-width:clamp(96px,15vw,140px);min-height:clamp(96px,15vw,140px);padding:10px;background:var(--sky);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.opt:nth-child(3n+2){background:var(--pink)}.opt:nth-child(3n){background:var(--lemon)}
.opt small{font-size:16px;font-weight:600}
.answers.pics .opt{background:#fff;border:3px solid #E7EAF6}
.answers.sizes .opt{background:#fff;min-width:clamp(110px,18vw,170px);min-height:clamp(120px,20vw,180px);align-items:center;justify-content:flex-end}
.opt.outline .pic{outline:3px dashed var(--lilac-d);outline-offset:4px;border-radius:12px}
.faded{opacity:.3;filter:grayscale(1)}
.glow{animation:glow 1s ease-in-out infinite;outline:5px solid var(--mint-d)}
@keyframes glow{50%{transform:scale(1.07)}}
.pulse{animation:pulse .9s ease-in-out 2}
@keyframes pulse{50%{transform:scale(1.12)}}
.wobble{animation:wobble .45s}
@keyframes wobble{20%,60%{transform:rotate(-6deg)}40%,80%{transform:rotate(6deg)}}
.dotsrow{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;min-height:10px;--pic:40px}
.ok{background:var(--mint);padding:14px 40px;font-size:28px;font-weight:800;min-height:72px}
.op{font-size:clamp(40px,7vw,60px);font-weight:800;color:var(--pink-d)}
.math{font-size:clamp(40px,7vw,64px);font-weight:800;display:flex;align-items:center;gap:12px}
.slot{min-width:clamp(80px,12vw,110px);height:clamp(80px,12vw,110px);border-radius:24px;border:5px dashed var(--sky-d);display:grid;place-items:center;font-size:clamp(44px,7vw,64px);font-weight:800;background:#fff;padding:0 8px}
.slot.filled{border-style:solid;border-color:var(--mint-d);background:var(--mint)}
.group{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:6px;max-width:min(100%,560px);min-height:110px;padding:14px;border-radius:28px;background:#F4F6FF;--pic:clamp(36px,6vw,56px)}
button.group{background:#F4F6FF}
.cmp{display:flex;align-items:center;justify-content:center;gap:clamp(10px,3vw,30px);width:100%;flex-wrap:wrap}
.cmp .group{flex:1;min-width:150px;position:relative}
.group.lined{display:grid;grid-template-columns:repeat(9,auto);justify-content:start;max-width:none}
.gcount{position:absolute;bottom:-14px;left:50%;translate:-50% 0;background:var(--lilac-d);color:#fff;font-size:26px;font-weight:800;border-radius:999px;padding:0 16px}
.pic.away{transition:transform 1s,opacity 1s}
.pic.away.gone{transform:translateY(-40px) rotate(-20deg);opacity:.25}
.pic.away.gone::before{content:'';position:absolute;inset:40% -4px auto;height:5px;background:var(--muted);rotate:-30deg;border-radius:4px}

/* drag & drop */
.src{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:14px;border-radius:28px;background:#F4F6FF;min-height:100px;max-width:520px;--pic:clamp(40px,6.5vw,60px)}
.mv{touch-action:none;cursor:grab}
.mv.sel{outline:4px solid var(--sky-d);border-radius:14px}
.dragging{position:fixed;z-index:60;pointer-events:none;transform:scale(1.12) rotate(-4deg)!important;transition:none;margin:0}
.give,.split{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.target{display:flex;align-items:flex-end;gap:14px}
.who{display:flex;flex-direction:column;align-items:center}
.goal{background:var(--lemon);border-radius:20px;padding:0 18px;box-shadow:var(--clay);font-size:44px}
.baskets{display:flex;gap:clamp(12px,4vw,40px);flex-wrap:wrap;justify-content:center}
.basket{position:relative;width:clamp(180px,30vw,280px);min-height:150px;padding:14px 14px 46px;border-radius:24px 24px 60px 60px;background:linear-gradient(#FFD9A8,#F7B26A);box-shadow:var(--clay);transition:transform .2s;--pic:clamp(34px,5vw,46px)}
.basket .in{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;min-height:60px}
.basket.hover,.bin.hover{transform:scale(1.05)}
.bcount{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:30px;color:#7A4B2A}
.slots{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;position:absolute;inset:14px 14px 46px;pointer-events:none;align-content:flex-start}
.slots i{width:44px;height:44px;border:3px dashed rgba(122,75,42,.45);border-radius:50%}
.found{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.chip{background:var(--mint);border-radius:999px;padding:4px 14px;font-weight:800;font-size:18px}
.sorter{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%}
.bin{min-height:170px;background:var(--sky);padding:12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.bin:nth-child(2){background:var(--mint)}
.binlbl{font-size:22px;font-weight:800}
.bin .in{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;--pic:clamp(32px,5vw,44px)}
.slotsrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.sslot{position:relative;min-width:clamp(90px,14vw,130px);min-height:clamp(100px,15vw,140px);border-radius:22px;border:4px dashed var(--lilac-d);background:#fff;display:grid;place-items:center;padding:6px}
.sslot .ord{position:absolute;top:-14px;left:-10px;background:var(--lilac-d);color:#fff;font-weight:800;width:32px;height:32px;border-radius:50%;display:grid;place-items:center}
.pattern{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;align-items:center;--pic:clamp(38px,6vw,56px)}
.pattern.units .pp[data-u="0"]{background:var(--lemon);border-radius:14px}
.pattern.units .pp[data-u="1"]{background:var(--sky);border-radius:14px}
.cards{display:grid;gap:12px;grid-template-columns:repeat(4,1fr);width:100%;max-width:640px}
.cards.c4{grid-template-columns:repeat(2,1fr);max-width:360px}
.cards.c6{grid-template-columns:repeat(3,1fr);max-width:480px}
.mcard{aspect-ratio:1;background:#fff;display:grid;place-items:center;border:3px solid #E7EAF6}
.mcard.down{background:var(--lilac)}
.mcard.down .face{visibility:hidden}
.mcard.down::after{content:'?';font-size:44px;font-weight:800;color:#fff;position:absolute}
.mcard{position:relative}
.mcard.sel{outline:5px solid var(--sky-d)}
.mcard.matched{background:var(--mint);opacity:.85}
.story{display:flex;justify-content:center;width:100%}
.panel{background:#FFF8E6;border-radius:28px;padding:20px;text-align:center;max-width:620px;box-shadow:var(--clay)}
.panel .pe{font-size:clamp(64px,12vw,110px);line-height:1.2}
.panel p{font-size:clamp(20px,3vw,28px);font-weight:600}
.storyhint{width:100%;display:flex;justify-content:center}
.storyhint .panel .pe{font-size:56px}
.cap{font-size:20px;font-weight:600;background:#FFF8E6;border-radius:16px;padding:6px 14px}

/* reward */
.finish{align-items:center;justify-content:center;text-align:center;gap:12px}
.finish h2{font-size:clamp(40px,7vw,60px);color:var(--pink-d);text-shadow:0 4px 0 #fff}
.bigstars{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;font-size:clamp(44px,8vw,64px)}
.bigstars span{animation:boing .6s cubic-bezier(.3,1.6,.5,1) backwards}
.sticker{display:flex;flex-direction:column;align-items:center;font-weight:600;color:var(--muted)}
.sticker b{font-size:90px;line-height:1.1;animation:boing .8s .6s cubic-bezier(.3,1.6,.5,1) backwards}
.badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:center}
.lead{font-size:24px;font-weight:600}
.stickergrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:10px;width:100%;font-size:56px;text-align:center}

.toast{position:fixed;left:50%;top:38%;z-index:70;transform:translate(-50%,-50%) scale(0);pointer-events:none;background:#fff;padding:16px 36px;border-radius:40px;box-shadow:var(--clay);font-size:clamp(34px,7vw,60px);font-weight:800;color:var(--mint-d);white-space:nowrap;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.toast.show{transform:translate(-50%,-50%) scale(1)}
.confetti{position:fixed;top:-20px;width:14px;height:20px;border-radius:4px;z-index:65;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* parent dashboard */
.parent{font-size:17px}
.phead{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.phead h2{font-size:26px}
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0;border-bottom:2px solid #EEF0F7;padding-bottom:10px}
.ptabs button{padding:8px 16px;border-radius:999px;font-weight:600;font-size:17px;min-height:44px}
.ptabs button.on{background:var(--sky-d);color:#fff}
#pbody h3{font-size:22px;margin:18px 0 6px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi{background:#F5F7FD;border-radius:18px;padding:12px 16px;display:flex;flex-direction:column}
.kpi b{font-size:30px;line-height:1.1}
.kpi span{color:var(--muted);font-size:15px}
.dom{display:grid;grid-template-columns:200px 1fr;align-items:center;gap:10px;margin:6px 0}
.dom h4{font-size:18px}
.dom .bar{display:flex;gap:3px;border-radius:12px;overflow:hidden;min-height:34px}
.seg{display:grid;place-items:center;font-weight:800;font-size:15px}
.st{display:inline-block;border-radius:999px;padding:2px 10px;font-weight:600;font-size:15px;white-space:nowrap}
.st-none{background:#EEF0F6;color:var(--muted)}.st-intro{background:#E6EEFF;color:#2E4E9E}.st-dev{background:#FFF1C9;color:#7A5A00}
.st-demo{background:#C9F0DE;color:#14583B}.st-review{background:#FFDDE7;color:#9C2448}
.tbl{width:100%;border-collapse:collapse;font-size:16px}
.tbl th,.tbl td{text-align:left;padding:8px;border-bottom:1px solid #EEF0F7;vertical-align:top}
.tbl th{color:var(--muted);font-weight:600}
.ev{font-size:15px}
.oc{font-size:15px;white-space:nowrap}
.oc-independent{color:#14583B}.oc-retry{color:#2E4E9E}.oc-assisted{color:#7A5A00}.oc-guided{color:var(--muted)}
.recs,.offline,.dec{list-style:none;display:flex;flex-direction:column;gap:8px}
.recs li,.offline li{background:#F7F8FD;border-radius:16px;padding:10px 14px}
.dec li{font-size:15px;border-left:4px solid var(--lilac);padding-left:10px}
.tag{background:var(--lilac-d);color:#fff;border-radius:999px;padding:1px 10px;font-size:14px;font-weight:800}
.spark{position:fixed;z-index:80;pointer-events:none;font-size:22px;font-style:normal;translate:-50% -50%;animation:spark .8s ease-out forwards}
@keyframes spark{to{transform:translate(var(--dx),var(--dy)) scale(.4);opacity:0}}
.flystar{position:fixed;z-index:80;pointer-events:none;font-size:40px;font-style:normal;translate:-50% -50%;transition:transform .7s cubic-bezier(.5,-.3,.7,1),opacity .7s}
.dots i.got{background:var(--lemon-d);animation:pulse .4s}
.combo{margin-top:4px;font-size:15px;white-space:nowrap;font-weight:800;color:#C2410C;background:#FFEAD5;border-radius:999px;padding:2px 12px;display:inline-block}
.combo.pop{animation:boing .45s cubic-bezier(.3,1.6,.5,1)}
.gmascot{font-size:40px;line-height:1;display:inline-block;transform-origin:50% 100%}
.gmascot.cheer{animation:cheer .7s cubic-bezier(.3,1.6,.5,1)}
.gmascot.sad{animation:wobble .5s}
@keyframes cheer{30%{transform:translateY(-18px) rotate(-10deg) scale(1.15)}60%{transform:translateY(0) rotate(6deg)}}
/* entrance: cards and answers pop in one after another */
.screen.on .subj,.screen.on .node,.screen.on .act,.screen.on .ava{animation:in .4s cubic-bezier(.3,1.5,.6,1) backwards}
.screen.on :is(.subj,.node,.act,.ava):nth-child(2){animation-delay:.05s}.screen.on :is(.subj,.node,.act,.ava):nth-child(3){animation-delay:.1s}
.screen.on :is(.subj,.node,.act,.ava):nth-child(4){animation-delay:.15s}.screen.on :is(.subj,.node,.act,.ava):nth-child(5){animation-delay:.2s}
.screen.on :is(.subj,.node,.act,.ava):nth-child(6){animation-delay:.25s}.screen.on :is(.subj,.node,.act,.ava):nth-child(n+7){animation-delay:.3s}
.screen.on .node.today{animation:bob 2s ease-in-out infinite}
.answers .opt{animation:boing .4s cubic-bezier(.3,1.6,.5,1) backwards}
.answers .opt:nth-child(2){animation-delay:.06s}.answers .opt:nth-child(3){animation-delay:.12s}.answers .opt:nth-child(4){animation-delay:.18s}
.growth h3{margin-top:18px}
.gr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.gr-list{display:flex;flex-direction:column;gap:10px;padding-left:20px;margin-top:6px}
@media print{
  @page{margin:14mm}
  body{background:#fff!important}
  body *{visibility:hidden}
  #pbody,#pbody *{visibility:visible}
  #pbody{position:absolute;inset:0 auto auto 0;width:100%}
  .noprint,.toast{display:none!important}
  .growth .kpi,.st,.note{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .tbl tr{break-inside:avoid}
}
.mood{display:flex;flex-direction:column;align-items:center;gap:6px;font-weight:600;color:var(--muted)}
.mood div{display:flex;gap:12px}
.mood button{width:64px;height:64px;border-radius:50%;background:#fff;font-size:36px;display:grid;place-items:center}
.form textarea{font:inherit;font-size:18px;padding:12px 16px;border-radius:16px;border:2px solid #D7DCEF;resize:vertical}
.fblist{display:flex;flex-direction:column;gap:8px;padding-left:20px;margin-top:10px}
.installbox{max-width:640px;margin:14px auto 0;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:16px;color:var(--muted)}
.ios-share{display:inline-block;border:2px solid var(--sky-d);color:var(--sky-d);border-radius:6px;padding:0 5px;font-weight:800;line-height:1.2}
.updatebar{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:90;background:var(--sky-d);color:#fff;font-weight:800;font-size:17px;padding:12px 22px;border-radius:999px;box-shadow:0 8px 20px rgba(47,116,224,.35);width:max-content;max-width:calc(100% - 24px);text-align:center;line-height:1.25;animation:boing .5s cubic-bezier(.3,1.6,.5,1)}
.legend{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px;font-size:14px}
.note{margin-top:16px;padding:10px 14px;border-radius:14px;background:#FFF8E6;color:#6B5310;font-size:15px}
details{margin-top:12px}summary{cursor:pointer;font-weight:600}

@media (max-width:700px){
  .path{grid-template-columns:repeat(2,1fr)}
  .node:nth-child(2n){transform:none}
  .iconbtn{width:56px;height:56px;font-size:24px}
  .dom{grid-template-columns:1fr}
  .avagrid{grid-template-columns:repeat(3,1fr)}
  .subj{min-height:0;padding:14px;flex-direction:row;text-align:left;gap:14px}
  .subj .sx{align-items:flex-start}
  .subj .sp{margin-top:4px}
  .tbl{font-size:14px}
  .lvl{display:none}
}
/* in a game the game bar replaces the app header (it has its own sound button) */
body[data-screen="game"] header{display:none}
.gmute{width:52px;height:52px;font-size:22px}
@media (max-width:420px){ .gmascot{display:none} .gbar{gap:8px} .gbar .iconbtn{width:50px;height:50px;font-size:22px} }
/* short portrait screens (small phones): tighter game */
@media (orientation:portrait) and (max-height:760px){
  :root{--pic:clamp(30px,8vw,42px)}
  .stage{padding:10px 12px;gap:8px}
  .board{gap:10px}
  .items{min-height:0;gap:6px}
  .group{min-height:0;padding:8px;gap:4px;--pic:clamp(26px,7vw,36px)}
  .src{min-height:0;padding:8px;gap:4px;--pic:clamp(28px,7.5vw,38px)}
  .basket{min-height:96px;padding:8px 8px 38px;--pic:clamp(24px,6vw,32px)}
  .math{font-size:clamp(30px,9vw,44px)}
  .slot{min-width:64px;height:64px;font-size:38px;border-width:4px}
  .opt{min-width:78px;min-height:78px;padding:6px}
  .numeral{font-size:clamp(36px,11vw,52px)}
  .sslot{min-width:72px;min-height:80px}
  .q{font-size:clamp(20px,6vw,28px)}
  .ok{padding:10px 30px;font-size:22px;min-height:56px}
}
/* phone in landscape: short screen — compact game so answers stay on screen */
@media (orientation:landscape) and (max-height:500px){
  :root{--pic:clamp(30px,9vh,44px)}
  .wrap{padding-top:6px}
  .gbar{margin-bottom:6px}
  .gbar .iconbtn{width:48px;height:48px;font-size:22px}
  .stage{padding:8px 12px;gap:6px}
  .board{gap:8px}
  .items{min-height:0;gap:6px}
  .group{min-height:0;padding:8px;--pic:clamp(26px,8vh,38px)}
  .src{min-height:0;padding:8px;--pic:clamp(28px,8vh,40px)}
  .basket{min-height:90px;padding:8px 8px 36px;--pic:clamp(24px,7vh,32px)}
  .math{font-size:clamp(30px,10vh,44px)}
  .numeral{font-size:clamp(34px,11vh,52px)}
  .opt{min-width:64px;min-height:64px;padding:4px}
  .give,.split{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
  .give{flex-wrap:nowrap}
  /* non-game screens in landscape phones */
  .subjgrid{grid-template-columns:repeat(3,1fr);gap:12px}
  .subj{min-height:0;padding:12px 10px;flex-direction:column;text-align:center}
  .subj .se{font-size:44px}
  .subj .sn{font-size:22px}
  .subj .sd{font-size:14px}
  .subj .sx{align-items:center}
  .path{grid-template-columns:repeat(7,1fr);gap:8px}
  .node{min-height:96px;padding:8px 4px}
  .node:nth-child(2n){transform:none}
  .node .ne{font-size:34px}
  .node .nd{font-size:16px}
  .node .ns{font-size:14px;min-height:18px}
  .mascot{margin:0 0 8px}
  .mascot .m{font-size:40px}
  .bubble{font-size:18px;padding:8px 14px}
  .acts{grid-template-columns:repeat(3,1fr);gap:10px}
  .goals{margin:-4px 0 8px}
  .goals span{font-size:14px;padding:2px 10px}
  .act{min-height:110px;padding:10px}
  .act .ae{font-size:38px}
  .act .at{font-size:18px}
  .avagrid{grid-template-columns:repeat(8,minmax(0,1fr));max-width:none;gap:8px}
  .ava{font-size:clamp(26px,6vw,48px)}
  .give .src{max-width:60%;flex:1}
  .goal{font-size:32px;padding:0 12px}
  .ok{padding:8px 28px;font-size:22px;min-height:52px}
  .group{max-width:none}
  .obj{flex-wrap:nowrap}
  .slot{min-width:64px;height:64px;font-size:40px;border-width:4px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}