:root{--ink:#20334d;--sky1:#7fd8ff;--sky2:#d9f6ff;--sea:#19b5c9;--sand:#ffe2a8;--coral:#ff7a59;--sun:#ffc93c;--leaf:#2fbf71;--berry:#a05cf0;--ok:#27b864;--bad:#ff5a4e;--card:#fff;--shadow:0 6px 0 rgba(32,51,77,.14);}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:ui-rounded,"SF Pro Rounded","Nunito","Varela Round","Segoe UI",Roboto,system-ui,sans-serif;color:var(--ink);background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 55%,#fff6e0 100%);background-attachment:fixed;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}
#app{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;position:relative}
.screen{display:none;min-height:100vh;min-height:100dvh;padding:calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));flex-direction:column}
.screen.active{display:flex}
.hidden{display:none!important}
/* home */
.top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.pills{display:flex;background:rgba(255,255,255,.6);border-radius:999px;padding:3px}
.pill{padding:7px 12px;border-radius:999px;font-weight:800;font-size:14px;background:transparent;min-width:44px;min-height:36px}
.pill.on{background:var(--ink);color:#fff}
.wallet{display:flex;align-items:center;gap:5px;background:#fff;border-radius:999px;padding:6px 12px;font-weight:900;font-size:17px;box-shadow:0 3px 0 rgba(32,51,77,.12)}
.wallet.small{padding:5px 10px;font-size:16px}
.coin{display:inline-block;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0 0 18%,#ffd23f 20% 60%,#e7a800 62%);border:2px solid #c98f00}
.star-ic{color:#ffb800;font-size:20px;margin-left:6px;line-height:1}
.hero{text-align:center;margin-top:4px}
.island{width:100%;max-width:340px;height:auto;display:block;margin:0 auto -6px}
.parrot{transform-origin:96px 120px;animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px) rotate(-3deg)}}
.logo{font-size:56px;margin:0;letter-spacing:1px;font-weight:900;color:#fff;text-shadow:0 4px 0 var(--coral),0 8px 0 rgba(32,51,77,.18);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill}
.tagline{margin:6px 0 14px;font-weight:800;font-size:17px;opacity:.85}
.modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.mode{border-radius:24px;padding:14px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;box-shadow:var(--shadow);min-height:124px;transition:transform .1s}
.mode:active,.big:active,.ans:active,.key:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(32,51,77,.14)}
.mode .sym{font-size:46px;font-weight:900;line-height:1;width:58px;height:58px;display:grid;place-items:center;background:rgba(255,255,255,.25);border-radius:50%}
.mode .mname{font-size:19px;font-weight:900;margin-top:4px}
.mode .mlvl{font-size:13px;font-weight:800;opacity:.92}
.m-add{background:var(--leaf)}.m-sub{background:var(--coral)}.m-mul{background:#2f8fdd}.m-mix{background:var(--berry)}
.bottom{margin-top:auto;padding-top:16px;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.ghost{background:rgba(255,255,255,.75);border-radius:999px;padding:10px 14px;font-weight:800;font-size:15px;min-height:44px}
.ghost.danger{color:#c62f24;margin:18px auto 8px;display:block}
/* game */
.gtop{display:flex;align-items:center;gap:10px;justify-content:space-between}
.gtop h2{margin:0;font-size:22px}
.icon{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.8);font-size:20px;font-weight:900;flex:none}
.progress{flex:1;display:flex;gap:4px}
.progress i{flex:1;height:12px;border-radius:6px;background:rgba(255,255,255,.7)}
.progress i.ok{background:var(--ok)}.progress i.bad{background:var(--bad)}.progress i.now{background:var(--sun)}
.glevel{text-align:center;font-weight:800;margin:10px 0 6px;opacity:.75;font-size:15px}
.qcard{background:var(--card);border-radius:28px;box-shadow:var(--shadow);padding:26px 10px;text-align:center;margin:6px 0 16px}
.q{font-size:54px;font-weight:900;letter-spacing:1px;white-space:nowrap}
.q .blank{display:inline-block;min-width:1.3em;border-bottom:5px solid var(--sun);color:var(--sea)}
.qcard.pop{animation:pop .3s}
@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ans{background:#fff;border-radius:22px;min-height:88px;font-size:40px;font-weight:900;box-shadow:var(--shadow);border:4px solid transparent}
.ans.right{background:var(--ok);color:#fff}
.ans.wrong{background:var(--bad);color:#fff;animation:shake .4s}
.ans.dim{opacity:.45}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.pad .typed{background:#fff;border-radius:20px;min-height:66px;font-size:44px;font-weight:900;text-align:center;line-height:66px;margin-bottom:10px;box-shadow:inset 0 0 0 4px var(--sun)}
.pad .typed.right{background:var(--ok);color:#fff;box-shadow:none}.pad .typed.wrong{background:var(--bad);color:#fff;animation:shake .4s;box-shadow:none}
.keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.key{background:#fff;border-radius:16px;min-height:58px;font-size:28px;font-weight:900;box-shadow:0 4px 0 rgba(32,51,77,.14)}
.key.ok{background:var(--leaf);color:#fff}.key.del{background:#ffe9e2}
.switch{margin:14px auto 0;background:transparent;font-weight:800;opacity:.75;padding:8px 12px;font-size:15px;min-height:44px}
.feedback{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;background:rgba(32,51,77,.25);z-index:5}
.fb-in{background:#fff;width:100%;max-width:480px;border-radius:28px 28px 0 0;padding:20px 18px calc(18px + env(safe-area-inset-bottom));text-align:center;animation:up .25s ease-out}
@keyframes up{from{transform:translateY(100%)}}
.fb-title{font-size:26px;font-weight:900;margin:0;color:var(--coral)}
.fb-text{font-size:19px;font-weight:800;margin:6px 0 10px}
.fb-text b{font-size:26px;color:var(--ok)}
.hint{margin:0 0 14px}
.hint .row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;margin:4px 0}
.hint .grp{display:flex;flex-wrap:wrap;gap:4px;max-width:150px;justify-content:center;padding:6px;border-radius:12px;background:#fff6e0}
.hint .grp.b{background:#e6f7ff}
.hint .op{font-size:26px;font-weight:900;padding:0 4px}
.dot{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd27a,#ff9a2e 60%,#e2701a);position:relative}
.dot::after{content:"";position:absolute;width:6px;height:5px;background:var(--leaf);border-radius:50% 0;top:-3px;left:9px}
.dot.b{background:radial-gradient(circle at 35% 30%,#8fe0ff,#2f8fdd 70%)}
.dot.b::after{display:none}
.dot.x{opacity:.35}
.dot.x::before{content:"";position:absolute;left:-2px;right:-2px;top:8px;height:4px;background:var(--bad);transform:rotate(-40deg);border-radius:2px}
.hint .words{font-size:18px;font-weight:800;line-height:1.5}
.hint .mrow{display:flex;gap:4px;justify-content:center;margin:3px 0}
.big{display:block;width:100%;border-radius:20px;min-height:62px;font-size:22px;font-weight:900;box-shadow:var(--shadow)}
.big.go{background:var(--leaf);color:#fff}.big.alt{background:#fff;margin-top:12px}
.cheer{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);background:var(--ok);color:#fff;font-size:36px;font-weight:900;padding:14px 28px;border-radius:999px;z-index:6;box-shadow:0 8px 0 rgba(0,0,0,.12);animation:cheer .9s forwards;white-space:nowrap;pointer-events:none}
@keyframes cheer{0%{transform:translate(-50%,-30%) scale(.5);opacity:0}25%{transform:translate(-50%,-50%) scale(1.1);opacity:1}75%{opacity:1}100%{transform:translate(-50%,-80%) scale(1);opacity:0}}
/* results */
.res{margin:auto 0;text-align:center;background:#fff;border-radius:28px;padding:26px 18px;box-shadow:var(--shadow)}
.rstars{font-size:64px;letter-spacing:6px;line-height:1}
.rstars span{color:#e3e8ee}.rstars span.on{color:#ffb800;display:inline-block;animation:pop .5s backwards}
.rstars span.on:nth-child(2){animation-delay:.2s}.rstars span.on:nth-child(3){animation-delay:.4s}
.res h2{font-size:30px;margin:10px 0 4px}
.rscore{font-size:20px;font-weight:800;margin:4px 0}
.rcoins{font-size:18px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 0}
.rlevel{background:var(--sun);border-radius:16px;padding:10px;font-weight:900;font-size:19px}
.rbtns{margin-top:18px}
/* parents */
.pbody{padding-top:12px}
.pbody h3{margin:20px 0 8px;font-size:18px}
.pstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pstat{background:#fff;border-radius:18px;padding:12px 6px;text-align:center;box-shadow:0 3px 0 rgba(32,51,77,.1)}
.pstat b{display:block;font-size:22px}.pstat span{font-size:13px;font-weight:700;opacity:.75}
.plevels{display:grid;gap:8px}
.plv{background:#fff;border-radius:16px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;font-weight:800}
.plv>span{display:flex;flex-direction:column}.plv small{font-weight:700;opacity:.7;font-size:13px}.plv b{white-space:nowrap}
.pweak{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#ffe9e2;border-radius:12px;padding:8px 10px;font-weight:900;font-size:17px}
.chip small{font-weight:700;opacity:.7;font-size:12px;margin-left:4px}
.pweak.good .chip{background:#e2f7ea}
.pnote{font-size:14px;opacity:.8;margin:4px 0 8px;line-height:1.4}
.empty{opacity:.7;font-weight:700}
@media (max-height:690px){.q{font-size:46px}.qcard{padding:18px 8px}.ans{min-height:74px;font-size:34px}.island{max-width:260px}.logo{font-size:46px}.mode{min-height:108px}}
@media (min-width:600px){body{padding-top:20px}}

.mode.wide{grid-column:span 2;flex-direction:row;min-height:72px;gap:14px;padding:10px 16px;justify-content:flex-start;text-align:left}
.mode.wide .sym{width:50px;height:50px;font-size:28px}
.wtxt{display:flex;flex-direction:column}
.m-learn{background:#f2a516}.m-speed{background:#20334d}
.qnote{margin:8px 0 0;font-weight:800;font-size:17px;color:var(--coral)}
.qcard.miss{box-shadow:inset 0 0 0 4px var(--bad),var(--shadow)}
.qcard.miss .blank{color:var(--ok)}
.qcard.ok{box-shadow:inset 0 0 0 4px var(--ok),var(--shadow)}
.ans.locked{pointer-events:none}
#dotHint{margin:-6px 0 12px;background:rgba(255,255,255,.7);border-radius:18px;padding:6px}
.timer{flex:1;position:relative;height:28px;background:rgba(255,255,255,.7);border-radius:14px;overflow:hidden}
.timer i{position:absolute;left:0;top:0;bottom:0;background:var(--sun);width:100%;transition:width 1s linear}
.timer b{position:relative;display:block;text-align:center;line-height:28px;font-size:16px}
.lead{font-weight:800;text-align:center;margin:12px 0;font-size:17px;line-height:1.35}
.tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.tbtn{background:#fff;border-radius:18px;min-height:76px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900}
.tbtn b{font-size:30px}.tbtn small{font-size:12px;color:#f2a516;letter-spacing:-1px}
.trows{background:#fff;border-radius:22px;padding:8px 14px;box-shadow:var(--shadow);margin-bottom:12px}
.trow{display:flex;justify-content:center;align-items:center;font-size:24px;font-weight:900;height:33px;gap:8px;border-radius:10px}
.trow .tl{min-width:110px;text-align:right}
.trow .tv{min-width:56px;text-align:left;color:var(--sea)}
.trow.hid .tv{color:#c3cbd4}
.trow.cur{background:#fff3c9}
.trow.cur .tv{color:var(--ink)}
.trow.good .tv{color:var(--ok)}
.trow.bad{background:#ffe1dd}.trow.bad .tv{color:var(--bad)}
#lkeys .key{min-height:52px}
.sbody{padding-top:10px}
.sops{display:grid;gap:12px}
.sops .mode{flex-direction:row;min-height:80px;gap:14px;justify-content:flex-start;padding:10px 16px}
.sops .mode .sym{width:54px;height:54px;font-size:36px}
.sops .mlvl{margin-left:auto;font-size:16px}
.ptables{display:grid;gap:6px}
.ptab{display:grid;grid-template-columns:64px 1fr 52px;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:6px 10px;font-weight:800;font-size:15px}
.bar{height:12px;background:#e9eef3;border-radius:6px;overflow:hidden;display:flex}
.bar i{display:block;height:100%}.bar i.k{background:var(--ok)}.bar i.l{background:var(--sun)}
.ptab span:last-child{text-align:right}
.legend{font-size:13px;font-weight:700;opacity:.8;display:flex;gap:12px;margin-top:4px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}

@media (max-height:700px){.island{max-width:210px}.logo{font-size:40px}.tagline{margin:2px 0 10px;font-size:15px}.mode{min-height:96px;padding:10px 8px}.mode .sym{width:46px;height:46px;font-size:34px}.mode.wide{min-height:60px}.modes{gap:10px}.trow{height:29px;font-size:21px}#lkeys .key{min-height:46px}}
.pweak{margin-bottom:12px}

/* ===== v2: game scene ===== */
#game{padding-left:12px;padding-right:12px;gap:10px}
#game .gtop{gap:8px}
#game .glevel{flex:1;margin:0;font-size:14px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wallet.bump{animation:bump .35s}
@keyframes bump{40%{transform:scale(1.25)}}
.scene{position:relative;flex:1 1 auto;min-height:300px;border-radius:28px;overflow:hidden;
  background:linear-gradient(180deg,#5cc9ff 0%,#9be3ff 55%,#c9f3ff 77%,#19b5c9 77.2%,#0f9fb8 100%);box-shadow:inset 0 -6px 0 rgba(0,0,0,.06),0 6px 0 rgba(32,51,77,.12)}
.sun{position:absolute;right:18px;top:16px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle,#fff3b0 0 30%,#ffc93c 32%);box-shadow:0 0 0 10px rgba(255,201,60,.25),0 0 0 22px rgba(255,201,60,.12);animation:sunp 4s ease-in-out infinite}
@keyframes sunp{50%{transform:scale(1.08)}}
.cloud{position:absolute;width:90px;height:28px;background:#fff;border-radius:30px;opacity:.9;animation:drift 38s linear infinite}
.cloud:before,.cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud:before{width:40px;height:40px;left:14px;top:-18px}.cloud:after{width:30px;height:30px;left:46px;top:-12px}
.c1{top:30px;left:-100px}.c2{top:92px;left:-100px;transform:scale(.7);animation-duration:52s;animation-delay:-26s}
@keyframes drift{to{left:110%}}
.flyer{position:absolute;top:10px;left:-60%;display:flex;align-items:center;animation:fly 13s linear infinite;z-index:2;pointer-events:none}
.flyer .plane{width:86px;height:46px;animation:bob 1.6s ease-in-out infinite}
.flyer .prop{transform-origin:106px 36px;animation:prop .15s linear infinite}
@keyframes prop{50%{transform:scaleY(.2)}}
.flyer .rope{width:16px;height:2px;background:#20334d;opacity:.5;margin-right:-2px}
.banner{background:#fff;border:3px solid #ff5a4e;border-radius:6px 14px 14px 6px;padding:3px 12px;font-weight:900;font-size:14px;color:#ff5a4e;white-space:nowrap;animation:flap 1s ease-in-out infinite;transform-origin:right center}
@keyframes fly{0%{left:-60%}100%{left:110%}}
@keyframes bob{50%{transform:translateY(5px) rotate(-3deg)}}
@keyframes flap{50%{transform:skewY(3deg) scaleY(.92)}}
.scene .timer{position:absolute;left:14px;right:84px;top:16px;z-index:3;flex:none}
.balloons{position:absolute;left:0;right:0;top:max(78px,calc(38% - 110px));display:flex;justify-content:center;align-items:flex-end;gap:2px;z-index:3}
.balloons.rise{animation:rise .55s cubic-bezier(.2,1.4,.4,1) backwards}
.balloons.away{transition:transform .5s ease-in,opacity .5s;transform:translateY(-260px);opacity:0}
@keyframes rise{from{transform:translateY(240px);opacity:0}}
.bal{display:flex;flex-direction:column;align-items:center;animation:sway 3s ease-in-out infinite;animation-delay:calc(var(--d) * -1)}
@keyframes sway{50%{transform:translateY(-8px) rotate(2deg)}}
.bb{display:block;width:54px;height:64px;border-radius:50% 50% 47% 47%;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.75) 0 9%,rgba(255,255,255,0) 22%),var(--c);box-shadow:inset -6px -8px 0 rgba(0,0,0,.12);position:relative}
.bb:after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-5px;border:5px solid transparent;border-bottom:7px solid var(--c);transform:rotate(180deg)}
.str{display:block;width:2px;height:22px;background:rgba(32,51,77,.45)}
.crate{display:flex;align-items:center;justify-content:center;min-width:76px;height:66px;padding:0 6px;border-radius:12px;font-size:40px;font-weight:900;color:#5a3412;
  background:repeating-linear-gradient(0deg,#f2b56b 0 14px,#e6a456 14px 16px);border:4px solid #9c6b3c;box-shadow:0 5px 0 rgba(0,0,0,.15)}
.crate.n3{font-size:32px}
.sop{font-size:40px;font-weight:900;color:#fff;text-shadow:0 3px 0 rgba(32,51,77,.35);margin:0 3px 14px}
.bal.slot .crate{background:#fffbe8;border:4px dashed #ffb020;color:#ffb020;animation:glow 1.2s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 0 7px rgba(255,201,60,.45),0 5px 0 rgba(0,0,0,.12)}}
.bal.slot.ok .crate{background:var(--ok);border:4px solid #1c9a50;color:#fff;animation:pop .45s}
.bal.slot.reveal .crate{background:#ff8a3d;border:4px solid #d9661f;color:#fff;animation:pop .45s}
.bal.slot.shake{animation:shake .45s}
@keyframes pop{0%{transform:scale(.4)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
.qnote{position:absolute;left:12px;right:12px;bottom:76px;z-index:4;margin:0;text-align:center;background:#fff;border-radius:16px;padding:8px 10px;font-weight:900;font-size:17px;box-shadow:0 4px 0 rgba(32,51,77,.15);animation:pop .3s}
.scene .hint{position:absolute;left:10px;right:10px;bottom:118px;z-index:4;margin:0}
.voyage{position:absolute;left:0;right:0;bottom:6px;height:58px;z-index:2}
.isl{position:absolute;bottom:6px;width:56px;height:20px;border-radius:50%;background:#ffe2a8;box-shadow:inset 0 -4px 0 #f2c97a}
.isl.start{left:-14px;width:44px}
.isl.goal{right:-6px;width:70px;height:24px}
.isl.goal:before{content:"";position:absolute;left:30px;bottom:14px;width:5px;height:34px;background:#9c6b3c;border-radius:3px}
.isl.goal:after{content:"";position:absolute;left:12px;bottom:40px;width:42px;height:20px;background:radial-gradient(ellipse at 30% 60%,#2fbf71 0 45%,transparent 47%),radial-gradient(ellipse at 72% 55%,#27a862 0 45%,transparent 47%)}
.flag{position:absolute;right:2px;bottom:16px;background:#ff5a4e;color:#fff;font-weight:900;font-size:13px;padding:2px 6px 2px 5px;border-radius:3px 8px 8px 3px;z-index:1}
.route{position:absolute;left:12%;right:16%;bottom:14px;display:flex;justify-content:space-between;align-items:center}
.route i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.55)}
.route i.ok{background:#ffd23f;box-shadow:0 0 0 2px #fff}.route i.bad{background:#ff8a3d;box-shadow:0 0 0 2px #fff}
.boat{position:absolute;bottom:14px;width:52px;height:42px;margin-left:-26px;transition:left .9s cubic-bezier(.4,1.4,.5,1);animation:rock 1.8s ease-in-out infinite;z-index:3}
.boat svg,.rboat svg{width:100%;height:100%}
@keyframes rock{50%{transform:rotate(-6deg) translateY(2px)}}
.waves{position:absolute;left:0;right:0;bottom:0;height:16px;background:radial-gradient(circle at 10px -2px,transparent 10px,rgba(255,255,255,.35) 11px 13px,transparent 14px) 0 0/22px 16px repeat-x;animation:wave 3s linear infinite;z-index:1}
@keyframes wave{to{background-position:44px 0}}
/* answer tiles */
#game .answers{gap:12px;padding:2px 2px 4px}
#game .ans{min-height:100px;font-size:46px;color:#fff;border:0;border-radius:26px;text-shadow:0 3px 0 rgba(0,0,0,.18);
  animation:tileIn .5s cubic-bezier(.2,1.6,.4,1) backwards,tileFloat 2.4s ease-in-out infinite;animation-delay:calc(var(--i) * 80ms),calc(var(--i) * -0.6s + .5s)}
#game .ans.t0{background:linear-gradient(#ff7a6b,#ff5a4e);box-shadow:0 7px 0 #c9372d}
#game .ans.t1{background:linear-gradient(#5cb4ff,#2f8fdd);box-shadow:0 7px 0 #1d68ab}
#game .ans.t2{background:linear-gradient(#5be09a,#2fbf71);box-shadow:0 7px 0 #1f8c50}
#game .ans.t3{background:linear-gradient(#c08aff,#a05cf0);box-shadow:0 7px 0 #7535c4}
#game .ans:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(0,0,0,.2)}
#game .ans.wrong{animation:wobble .5s;filter:saturate(.3) brightness(.9)}
#game .ans.dim{opacity:.35;animation:none}
#game .ans.gone{visibility:hidden}
@keyframes tileIn{from{transform:scale(0) translateY(30px)}}
@keyframes tileFloat{50%{transform:translateY(-4px)}}
@keyframes wobble{15%{transform:rotate(-9deg)}30%{transform:rotate(8deg)}45%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}}
.flytile{position:fixed;z-index:20;display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:900;color:#fff;background:linear-gradient(#ffd23f,#ffb020);border-radius:24px;box-shadow:0 6px 0 #d48a00;transition:transform .42s cubic-bezier(.5,-.25,.4,1.25);pointer-events:none}
#fx{position:fixed;inset:0;pointer-events:none;z-index:30;overflow:hidden}
.cf{position:absolute;width:9px;height:14px;border-radius:2px;animation:cf 1.1s cubic-bezier(.2,.7,.4,1) forwards}
.cf.round{width:10px;height:10px;border-radius:50%}
@keyframes cf{0%{transform:translate(0,0) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 260px)) rotate(var(--r));opacity:0}}
.flycoin{position:fixed;width:26px;height:26px;z-index:31;transition:transform .6s cubic-bezier(.5,-.4,.5,1)}
#game .pad .typed{min-height:58px;line-height:58px;font-size:40px;margin-bottom:8px}
#game .pad .key{min-height:54px}
/* results */
.isles{position:relative;display:flex;justify-content:space-between;align-items:flex-end;margin:16px 0 4px;padding:30px 4px 6px;background:linear-gradient(180deg,#c9f3ff,#19b5c9);border-radius:18px;min-height:86px}
.isle{position:relative;width:30px;display:flex;flex-direction:column;align-items:center}
.isle i{display:block;width:30px;height:12px;border-radius:50%;background:#e7e2d6}
.isle.done i,.isle.cur i{background:#ffe2a8;box-shadow:inset 0 -3px 0 #f2c97a}
.isle.cur i:before{content:"🌴";position:absolute;top:-22px;left:5px;font-size:18px}
.isle b{font-size:12px;color:#fff;margin-top:2px}
.rboat{position:absolute;top:2px;width:38px;height:32px;margin-left:-19px;transition:left 1.4s cubic-bezier(.45,0,.3,1);animation:rock 1.8s ease-in-out infinite}
.rbest{font-weight:900;font-size:17px;margin:8px 0 0;opacity:.8}
.rbest.new{opacity:1;color:#d48a00;font-size:22px;animation:pop .6s}
/* home extras */
.trophyBtn{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;padding:12px 16px;border-radius:22px;background:linear-gradient(#ffe07a,#ffc93c);box-shadow:0 5px 0 #d9a21a;font-size:19px}
.trophyBtn span{font-size:30px}.trophyBtn b{flex:1;text-align:left}.trophyBtn small{font-weight:900;background:#fff;border-radius:999px;padding:4px 10px}
/* records */
.rtotals{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rtot{background:#fff;border-radius:16px;padding:8px 4px;text-align:center;box-shadow:0 3px 0 rgba(32,51,77,.1)}
.rtot span{font-size:22px;display:block}.rtot b{font-size:20px;display:block}.rtot small{font-size:11px;font-weight:700;opacity:.7}
.badges{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.badge{background:rgba(255,255,255,.55);border-radius:16px;padding:8px 2px;text-align:center;filter:grayscale(1);opacity:.5}
.badge span{font-size:28px;display:block}.badge small{font-size:10.5px;font-weight:800;line-height:1.15;display:block}
.badge.on{filter:none;opacity:1;background:#fff;box-shadow:0 3px 0 #ffc93c,inset 0 0 0 2px #ffc93c}
.rspeed{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.rsp{background:#fff;border-radius:18px;padding:10px 4px;text-align:center;box-shadow:0 3px 0 rgba(32,51,77,.1);opacity:.6}
.rsp.on{opacity:1}.rsp .cup{font-size:30px;display:block}.rsp b{font-size:28px;display:block}.rsp small{font-weight:700;font-size:12px}
.rpm{background:#fff;border-radius:16px;padding:8px 10px;margin-bottom:8px}
.rpm p{margin:0 0 6px;font-weight:900}.rpm .mixb{font-style:normal;font-weight:800;opacity:.8;margin-left:6px}
.lvs{display:flex;gap:4px;flex-wrap:wrap}
.lv{width:36px;text-align:center;border-radius:10px;background:#eef2f6;padding:3px 0;opacity:.55}
.lv.open{opacity:.9}.lv.on{background:#fff4cf;opacity:1;box-shadow:inset 0 0 0 2px #ffc93c}
.lv b{display:block;font-size:14px}.lv small{display:block;font-size:10px;color:#e7a800;line-height:1.1;min-height:11px}.lv em{display:block;font-style:normal;color:var(--ink);font-weight:800}
.rtables{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.rt{background:rgba(255,255,255,.6);border-radius:12px;text-align:center;padding:6px 0;font-weight:900}
.rt b{display:block}.rt.on{background:#fff;box-shadow:inset 0 0 0 2px #ffc93c}
/* parents history */
.phist{display:flex;flex-direction:column;gap:8px}
.hrow{background:#fff;border-radius:14px;padding:8px 10px}
.htop{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;font-size:14px}
.htop .hd{opacity:.65;font-weight:700}.htop b{flex:1}.htop .hs{font-weight:900}.htop .ht{opacity:.7;font-weight:700}
.hmiss{margin-top:4px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.hmiss .chip{font-size:13px;padding:3px 7px}.hmiss small{font-weight:700;opacity:.7}.hmiss .empty{font-size:13px}
.wideBtn{width:100%}
@media (max-height:700px){.scene{min-height:270px}.balloons{top:52px}.crate{height:58px;font-size:34px;min-width:66px}.bb{width:46px;height:54px}#game .ans{min-height:76px}}

.scene:after{content:"";position:absolute;left:8%;top:calc(77% - 10px);width:60px;height:12px;border-radius:50% 50% 0 0;background:#7fcf9a;opacity:.6}

/* ===== v3: depth / 3D look (CSS only, transforms for motion) ===== */
.defs{position:absolute;width:0;height:0;overflow:hidden}
body{background:linear-gradient(180deg,#6fd2ff 0%,#bdeeff 48%,#e9fbff 70%,#fff3d6 100%);background-attachment:fixed}
/* raised, squishy buttons */
.mode{position:relative;overflow:hidden;border-radius:26px;box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -5px 0 rgba(0,0,0,.14),0 7px 0 var(--edge,rgba(32,51,77,.28)),0 12px 18px rgba(32,51,77,.22);transition:transform .12s cubic-bezier(.3,1.6,.5,1),box-shadow .12s}
.mode:before{content:"";position:absolute;left:8%;right:8%;top:4px;height:42%;border-radius:22px 22px 50% 50%/22px 22px 18px 18px;background:linear-gradient(rgba(255,255,255,.38),rgba(255,255,255,0));pointer-events:none}
.mode>*{position:relative}
.mode:active{transform:translateY(5px) scale(.98,.96);box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.14),0 2px 0 var(--edge,rgba(32,51,77,.28)),0 4px 8px rgba(32,51,77,.2)}
.mode .sym{background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),rgba(255,255,255,.15) 60%);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12),0 3px 6px rgba(0,0,0,.12);text-shadow:0 3px 0 rgba(0,0,0,.18)}
.mode .mname{text-shadow:0 2px 0 rgba(0,0,0,.18)}
.m-add{background:linear-gradient(#5fe39a,#2fbf71 55%,#22a65f);--edge:#1a8048}
.m-sub{background:linear-gradient(#ff9f84,#ff7a59 55%,#ec6141);--edge:#bf4428}
.m-mul{background:linear-gradient(#6cc0ff,#2f8fdd 55%,#2479c2);--edge:#1a5a94}
.m-mix{background:linear-gradient(#c49aff,#a05cf0 55%,#8a45d9);--edge:#6a2fb0}
.m-learn{background:linear-gradient(#ffcb4f,#f2a516 60%,#de9306);--edge:#b37406}
.m-speed{background:linear-gradient(#3d5577,#20334d 60%,#17263b);--edge:#0d1726}
.big{position:relative;box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -4px 0 rgba(0,0,0,.12),0 6px 0 var(--edge,rgba(32,51,77,.22)),0 10px 16px rgba(32,51,77,.18);transition:transform .12s cubic-bezier(.3,1.6,.5,1)}
.big:active{transform:translateY(4px) scale(.98,.96);box-shadow:inset 0 2px 0 rgba(255,255,255,.3),0 2px 0 var(--edge,rgba(32,51,77,.22)),0 3px 6px rgba(32,51,77,.15)}
.big.go{background:linear-gradient(#5fe39a,#2fbf71 60%,#25a862);--edge:#1a8048;text-shadow:0 2px 0 rgba(0,0,0,.15)}
.big.alt{background:linear-gradient(#fff,#eef3f8);--edge:#c3cfdc}
.big.gold{background:linear-gradient(#ffe48a,#ffc93c 60%,#f5b51c);--edge:#c98f00;margin-bottom:12px;color:#5a3a00}
.trophyBtn{box-shadow:inset 0 3px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(0,0,0,.08),0 6px 0 #c98f00,0 10px 16px rgba(201,143,0,.3);transition:transform .12s}
.trophyBtn:active{transform:translateY(4px) scale(.98,.96)}
.ghost{background:linear-gradient(rgba(255,255,255,.95),rgba(236,244,250,.9));box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(32,51,77,.14),0 6px 10px rgba(32,51,77,.1);transition:transform .12s}
.ghost:active{transform:translateY(3px)}
.icon{background:linear-gradient(#fff,#e9f1f8);box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(32,51,77,.18),0 6px 10px rgba(32,51,77,.12)}
.icon:active{transform:translateY(3px)}
.wallet{background:linear-gradient(#fff,#f0f5fa);box-shadow:inset 0 2px 0 #fff,0 4px 0 rgba(32,51,77,.14),0 6px 10px rgba(32,51,77,.1)}
.coin{box-shadow:0 2px 0 #a87400,inset 0 -2px 0 rgba(0,0,0,.12)}
.logo{text-shadow:0 2px 0 #ffb9a6,0 4px 0 var(--coral),0 6px 0 #d9573a,0 10px 12px rgba(32,51,77,.28)}
.key{background:linear-gradient(#fff,#eef3f8);box-shadow:inset 0 2px 0 #fff,0 5px 0 #c3cfdc,0 8px 12px rgba(32,51,77,.12);transition:transform .1s}
.key:active{transform:translateY(4px);box-shadow:0 1px 0 #c3cfdc}
.key.ok{background:linear-gradient(#5fe39a,#2fbf71);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 5px 0 #1a8048}
.key.del{background:linear-gradient(#fff3ee,#ffdccf);box-shadow:inset 0 2px 0 #fff,0 5px 0 #e9b3a0}
.tbtn{background:linear-gradient(#fff,#eef3f8);box-shadow:inset 0 2px 0 #fff,0 5px 0 #c3cfdc,0 8px 12px rgba(32,51,77,.12);transition:transform .1s}
.tbtn:active{transform:translateY(4px)}
.res,.trows{box-shadow:0 6px 0 rgba(32,51,77,.1),0 14px 26px rgba(32,51,77,.16)}
/* the scene: layered sky, far islands, near island, sea (parallax with the voyage) */
.scene{--p:0;background:linear-gradient(180deg,#4fc2ff 0%,#8edcff 45%,#cdf3ff 76%,#e8fbff 77%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.35),inset 0 -8px 20px rgba(0,60,90,.15),0 7px 0 rgba(32,51,77,.16),0 14px 24px rgba(32,51,77,.18)}
.sun{background:radial-gradient(circle at 40% 38%,#fff8cf 0 22%,#ffd23f 45%,#f5a800 100%)}
.cloud{background:linear-gradient(#fff,#e3f1fa);box-shadow:0 6px 10px rgba(30,90,130,.12)}
.cloud:before,.cloud:after{background:linear-gradient(#fff,#f1f8fc)}
.c3{top:58px;left:-100px;transform:scale(.45);opacity:.7;animation-duration:70s;animation-delay:-50s}
.lay{position:absolute;left:-10%;right:-10%;pointer-events:none;transition:transform 1.1s cubic-bezier(.4,.1,.3,1)}
.lay svg{display:block;width:100%;height:100%}
.lay.far{bottom:23%;height:46px;transform:translateX(calc(var(--p) * -24px));z-index:0}
.lay.mid{left:auto;right:-14px;bottom:calc(23% - 14px);width:120px;height:70px;transform:translateX(calc(var(--p) * -60px));z-index:1}
.sea{position:absolute;left:0;right:0;bottom:0;height:23%;background:linear-gradient(180deg,#43d3e6 0%,#19b5c9 35%,#0f97b3 75%,#0a7f9c 100%);box-shadow:inset 0 3px 0 rgba(255,255,255,.55);z-index:0;overflow:hidden}
.glint{position:absolute;height:3px;border-radius:3px;background:rgba(255,255,255,.55);animation:glint 4s ease-in-out infinite}
.g1{left:12%;top:22%;width:38px}.g2{left:54%;top:46%;width:26px;animation-delay:-1.3s}.g3{left:30%;top:70%;width:46px;animation-delay:-2.6s}
@keyframes glint{0%,100%{transform:translateX(0) scaleX(.6);opacity:.25}50%{transform:translateX(14px) scaleX(1);opacity:.8}}
.scene:after{display:none}
.isl{background:radial-gradient(ellipse at 50% 30%,#fff2cc,#ffe2a8 55%,#e7bc6c);box-shadow:0 3px 0 rgba(10,100,120,.35)}
.boat{filter:none}
.boat svg{overflow:visible}
.route i{box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.route i.ok{background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd23f 50%,#e7a800)}
/* balloons: shaded, glossy, with soft shadow */
.bb{background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.95) 0 6%,rgba(255,255,255,.35) 13%,rgba(255,255,255,0) 26%),radial-gradient(circle at 60% 65%,rgba(0,0,0,0) 40%,rgba(0,0,0,.28) 100%),var(--c);box-shadow:inset -5px -7px 10px rgba(0,0,0,.18),inset 4px 3px 8px rgba(255,255,255,.25),0 10px 14px rgba(20,60,100,.18)}
.str{background:linear-gradient(90deg,rgba(32,51,77,.25),rgba(32,51,77,.55))}
/* crates: wooden boxes with a lid and a side face */
.crate{position:relative;border:0;border-radius:6px;color:#4a2a0d;text-shadow:0 1px 0 rgba(255,236,200,.7);
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,0) 30%,rgba(0,0,0,.08)),repeating-linear-gradient(0deg,#f2b56b 0 14px,#d9964c 14px 16px);
  box-shadow:inset 0 0 0 4px #a87442,inset 0 3px 0 5px rgba(255,220,170,.5),inset 0 -4px 0 4px rgba(90,52,18,.35),0 12px 14px -4px rgba(20,50,80,.35);margin-top:8px}
.crate:before{content:"";position:absolute;left:5px;right:-7px;top:-9px;height:9px;background:linear-gradient(90deg,#f7c98c,#e2a55e);border-radius:3px 3px 0 0;transform:skewX(-38deg);transform-origin:bottom;box-shadow:inset 0 0 0 2px #a87442}
.crate:after{content:"";position:absolute;top:-4px;right:-9px;width:9px;bottom:4px;background:linear-gradient(#c78b4b,#9a6430);transform:skewY(-50deg);transform-origin:left;border-radius:0 3px 3px 0;box-shadow:inset 0 0 0 2px #8a5a2b}
.bal.slot .crate{background:linear-gradient(#fffef4,#fff4c8);border:0;color:#f0a000;box-shadow:inset 0 0 0 4px #ffb020,inset 0 -5px 0 4px rgba(255,176,32,.25),0 12px 14px -4px rgba(20,50,80,.3);animation:none}
.bal.slot .crate:before{background:linear-gradient(90deg,#fff8d6,#ffe39a);box-shadow:inset 0 0 0 2px #ffb020}
.bal.slot .crate:after{background:linear-gradient(#ffd56a,#f0a000);box-shadow:none}
.bal.slot{position:relative}
.bal.slot:after{content:"";position:absolute;left:50%;bottom:-8px;width:96px;height:84px;margin-left:-48px;border-radius:24px;background:radial-gradient(closest-side,rgba(255,220,90,.55),rgba(255,220,90,0));z-index:-1;animation:halo 1.2s ease-in-out infinite}
@keyframes halo{50%{transform:scale(1.18);opacity:.55}}
.bal.slot.ok:after,.bal.slot.reveal:after{display:none}
.bal.slot.ok .crate{background:linear-gradient(#5fe39a,#27b864);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2);box-shadow:inset 0 0 0 4px #1c9a50,inset 0 3px 0 5px rgba(255,255,255,.35),0 12px 14px -4px rgba(20,50,80,.3)}
.bal.slot.ok .crate:before{background:linear-gradient(90deg,#8af0b8,#45cf82);box-shadow:inset 0 0 0 2px #1c9a50}.bal.slot.ok .crate:after{background:linear-gradient(#27b864,#167a40);box-shadow:none}
.bal.slot.reveal .crate{background:linear-gradient(#ffad6e,#ff8a3d);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.2);box-shadow:inset 0 0 0 4px #d9661f,inset 0 3px 0 5px rgba(255,255,255,.3),0 12px 14px -4px rgba(20,50,80,.3)}
.bal.slot.reveal .crate:before{background:linear-gradient(90deg,#ffc79b,#ff9d58);box-shadow:inset 0 0 0 2px #d9661f}.bal.slot.reveal .crate:after{background:linear-gradient(#ff8a3d,#c25414);box-shadow:none}
.sop{text-shadow:0 2px 0 #8aa9c4,0 4px 0 rgba(32,51,77,.35),0 6px 8px rgba(32,51,77,.25)}
/* answer tiles: glossy raised candy blocks with bevel + press-down */
#game .answers{perspective:600px}
#game .ans{position:relative;overflow:hidden;border-radius:26px;text-shadow:0 3px 0 rgba(0,0,0,.22);transform-style:preserve-3d;
  animation:tileIn .5s cubic-bezier(.2,1.6,.4,1) backwards,tileFloat3 2.6s ease-in-out infinite;animation-delay:calc(var(--i) * 80ms),calc(var(--i) * -0.65s + .5s);
  transition:transform .1s ease-out,box-shadow .1s}
#game .ans:before{content:"";position:absolute;left:7%;right:7%;top:5px;height:44%;border-radius:22px 22px 60% 60%/22px 22px 22px 22px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.08));pointer-events:none}
#game .ans:after{content:"";position:absolute;inset:0;border-radius:26px;box-shadow:inset 0 -7px 0 rgba(0,0,0,.14),inset 0 2px 0 rgba(255,255,255,.5);pointer-events:none}
#game .ans.t0{background:linear-gradient(#ff8f82,#ff5a4e 60%,#ef4a3e);box-shadow:0 8px 0 #b8322a,0 16px 18px rgba(184,50,42,.32)}
#game .ans.t1{background:linear-gradient(#78c4ff,#2f8fdd 60%,#2680cc);box-shadow:0 8px 0 #1a5e9c,0 16px 18px rgba(26,94,156,.32)}
#game .ans.t2{background:linear-gradient(#75e8a9,#2fbf71 60%,#27ab64);box-shadow:0 8px 0 #1a7f47,0 16px 18px rgba(26,127,71,.32)}
#game .ans.t3{background:linear-gradient(#cda6ff,#a05cf0 60%,#904ce0);box-shadow:0 8px 0 #6a2fb0,0 16px 18px rgba(106,47,176,.32)}
#game .ans:active{animation:none;transform:translateY(7px) scale(.98,.95)}
#game .ans.t0:active{box-shadow:0 1px 0 #b8322a,0 3px 6px rgba(0,0,0,.2)}#game .ans.t1:active{box-shadow:0 1px 0 #1a5e9c,0 3px 6px rgba(0,0,0,.2)}
#game .ans.t2:active{box-shadow:0 1px 0 #1a7f47,0 3px 6px rgba(0,0,0,.2)}#game .ans.t3:active{box-shadow:0 1px 0 #6a2fb0,0 3px 6px rgba(0,0,0,.2)}
@keyframes tileFloat3{0%,100%{transform:translateY(0) rotateX(0)}50%{transform:translateY(-4px) rotateX(6deg)}}
#game .ans.wrong{animation:wobble3 .55s}
@keyframes wobble3{15%{transform:rotate(-10deg) rotateY(14deg)}30%{transform:rotate(9deg) rotateY(-12deg)}45%{transform:rotate(-6deg)}60%{transform:rotate(4deg)}75%{transform:rotate(-2deg)}}
.flytile{background:linear-gradient(#ffe48a,#ffc93c 60%,#f5b51c);box-shadow:inset 0 3px 0 rgba(255,255,255,.5),0 7px 0 #c98f00,0 14px 18px rgba(0,0,0,.25);text-shadow:0 3px 0 rgba(0,0,0,.18)}
/* the big spoken fact */
.factBig{position:absolute;left:50%;top:calc(max(78px,38% - 110px) + 174px);z-index:5;display:flex;align-items:center;gap:6px;padding:8px 18px;border-radius:22px;white-space:nowrap;
  font-size:40px;font-weight:900;color:#fff;background:linear-gradient(#5fe39a,#27b864);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.12),0 6px 0 #1a8048,0 12px 18px rgba(0,0,0,.2);
  text-shadow:0 3px 0 rgba(0,0,0,.18);transform:translateX(-50%) scale(0);pointer-events:none}
.factBig i{font-style:normal;opacity:.85}
.factBig.show{transform:translateX(-50%) scale(1);transition:transform .35s cubic-bezier(.2,1.6,.4,1)}
.factBig.miss{background:linear-gradient(#ffad6e,#ff8a3d);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.12),0 6px 0 #c25414,0 12px 18px rgba(0,0,0,.2);font-size:46px}
.qnote{bottom:68px}
/* groups picture (the easier mini-step) */
.groups{position:absolute;inset:8px;z-index:8;border-radius:22px;background:linear-gradient(#fffdf4,#fff3d0);box-shadow:inset 0 2px 0 #fff,0 8px 0 #e8c97a,0 14px 24px rgba(0,0,0,.2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;animation:pop .35s}
.groups .gtitle{margin:0;font-weight:900;font-size:17px;color:#b86a00;text-align:center}
.groups .gcap{margin:0;font-weight:900;font-size:18px}
.groups .factBig{position:static;transform:none;font-size:36px}
.gpic{display:flex;flex-direction:column;gap:5px;align-items:center}
.grow{display:flex;gap:4px;animation:rowIn .3s backwards;animation-delay:calc(var(--i) * .12s)}
@keyframes rowIn{from{transform:translateX(-30px);opacity:0}}
.gpic.row2{flex-direction:row;flex-wrap:wrap;justify-content:center}
.gpic .grp{display:flex;flex-wrap:wrap;gap:4px;max-width:150px;justify-content:center;padding:6px;border-radius:12px;background:#fff;box-shadow:0 3px 0 rgba(0,0,0,.06)}
.gpic .grp.b{background:#e6f7ff}.gpic .grp.wide{max-width:240px}
.gpic .op{font-size:28px;font-weight:900}
.dot{box-shadow:inset -2px -3px 3px rgba(0,0,0,.15),0 2px 2px rgba(0,0,0,.12)}
.dot.s{width:16px;height:16px}.dot.xs{width:12px;height:12px}.dot.xs:after{width:4px;height:3px;left:6px;top:-2px}
/* learn: the row being read aloud */
.trow.say{background:#dff7ea;transform:scale(1.04);transition:transform .2s}
#listenBtn{margin-bottom:10px}
/* parents */
.pmost{display:flex;flex-direction:column;gap:6px}
.mrow{display:flex;align-items:center;gap:10px;background:#fff;border-radius:12px;padding:7px 10px;box-shadow:0 3px 0 rgba(32,51,77,.08)}
.mrow .mi{width:24px;height:24px;border-radius:50%;background:#ffe9e2;display:grid;place-items:center;font-weight:900;font-size:13px;flex:none}
.mrow b{font-size:18px;flex:1}.mrow .mw{font-weight:800;font-size:13px;opacity:.7}.mrow .mk{font-weight:900;font-size:12px;color:var(--ok);background:#e2f7ea;border-radius:8px;padding:2px 6px}
.ghost.dl{background:linear-gradient(#e9fff2,#c9f3dc);box-shadow:inset 0 2px 0 #fff,0 4px 0 #8fd4ad}
.ghost:disabled{opacity:.6}
@media (max-height:700px){.factBig{top:calc(52px + 150px);font-size:34px}.factBig.miss{font-size:38px}.crate:before{top:-7px;height:7px}.groups .factBig{font-size:30px}}
@media (prefers-reduced-motion:reduce){#game .ans{animation:tileIn .3s backwards}.lay{transition:none}}

.big.gold{font-size:19px}

/* parents' limits (v3.1) */
.psel{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tchip{min-height:48px;border-radius:14px;font-weight:900;font-size:20px;background:#fff;color:var(--ink);opacity:.55;box-shadow:inset 0 -3px 0 rgba(32,51,77,.12);transition:transform .1s}
.tchip.on{opacity:1;background:linear-gradient(180deg,#4fd08a,#24a35f);color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 4px 0 #17804a}
.tchip:active{transform:translateY(2px)}
.tchip.nope{animation:wob .35s}
@keyframes wob{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.ppre{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.pp{flex:1;min-height:44px;border-radius:999px;font-weight:900;font-size:16px;background:rgba(255,255,255,.8);color:var(--ink);box-shadow:0 3px 0 rgba(32,51,77,.12)}
.pp.on{background:var(--ink);color:#fff}
.selBadge{margin:4px auto 0;width:max-content;max-width:92%;text-align:center;font-weight:800;font-size:13px;padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.55);color:var(--ink);opacity:.8}
.selBadge.lim{background:#fff3c4;opacity:1;box-shadow:0 2px 0 rgba(32,51,77,.12)}
.pp[data-nmax="0"]{white-space:nowrap;font-size:14px;flex:1.4}

/* ===================== v4: mini-games ===================== */
.stage{position:absolute;inset:0;z-index:1;overflow:hidden;display:none}
.scene.gx .stage{display:block}
.scene.gx{background:#bfe9ff}
.scene.gx>.sun,.scene.gx>.cloud,.scene.gx>.lay,.scene.gx>.sea,.scene.gx>.flyer,.scene.gx>.balloons,.scene.gx>.voyage,.scene.gx>.waves{display:none}
.gbox{position:absolute;left:50%;bottom:0;transform-origin:50% 100%}
.bgl{position:absolute;inset:0;pointer-events:none}
.gprog{display:none;position:absolute;top:8px;left:50%;transform:translateX(-50%);z-index:4;gap:5px;padding:5px 8px;border-radius:99px;background:rgba(255,255,255,.75);box-shadow:0 2px 0 rgba(0,0,0,.08)}
.scene.gx .gprog{display:flex}
.gprog i{width:10px;height:10px;border-radius:50%;background:#d6dde6;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.gprog i.ok{background:#2fbf71}.gprog i.bad{background:#ff8a3d}
.scene.gx .factBig{top:34%}
.scene.gx .qnote{bottom:14px}
.scene.gx .hint{top:40px;bottom:auto}
.gobj{position:absolute;border:0;padding:0;background:none;font:inherit;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.gobj.dim{opacity:.4;filter:saturate(.5)}
.gobj .num{font-weight:900;line-height:1;text-shadow:0 2px 0 rgba(0,0,0,.25)}
@keyframes gwob{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg)}40%{transform:rotate(10deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
.gwob{animation:gwob .55s}
/* the calculation, big at the bottom */
.calc{position:relative;flex:none;min-height:92px;border-radius:26px;background:linear-gradient(#fff,#f1f6fb);box-shadow:inset 0 2px 0 #fff,inset 0 -6px 0 rgba(32,51,77,.08),0 7px 0 rgba(32,51,77,.16),0 14px 20px rgba(32,51,77,.14);display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 12px;flex-direction:column}
.calc.in{animation:calcIn .45s cubic-bezier(.2,1.5,.4,1)}
.calc.out{opacity:.35;transition:opacity .3s}
@keyframes calcIn{from{transform:translateY(16px) scale(.92);opacity:0}}
.cnums{display:flex;align-items:center;gap:8px;font-size:52px;font-weight:900;color:var(--ink);line-height:1}
.cnums i,.ceq i{font-style:normal;color:#8a97a8;font-size:.8em}
.cn{display:inline-flex;align-items:center;justify-content:center;min-width:.9em}
.cn.slot{min-width:1.5em;padding:4px 10px;border-radius:18px;color:#fff;background:linear-gradient(#ffd96b,#ffb020);box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -4px 0 rgba(0,0,0,.12),0 5px 0 #c98400;text-shadow:0 2px 0 rgba(0,0,0,.2);animation:slotGlow 1.6s ease-in-out infinite}
.cn.slot.ok{background:linear-gradient(#75e8a9,#27ab64);box-shadow:inset 0 2px 0 rgba(255,255,255,.5),0 5px 0 #1a7f47;animation:pop .4s}
.cn.slot.reveal{background:linear-gradient(#ffad6e,#ff8a3d);box-shadow:0 5px 0 #c25414;animation:pop .4s}
.cn.slot.shake{animation:shake .4s}
.cn.n3{font-size:.85em}
@keyframes slotGlow{50%{transform:scale(1.06)}}
.ctip{font-weight:900;font-size:14px;color:#b86a00;margin:-2px 0 -4px}
.calc.v-pic{flex-direction:row;gap:12px}
.cpic{display:flex;flex-direction:column;align-items:center;gap:2px}
.cside{display:flex;flex-direction:column;align-items:center;gap:2px}
.cside small{font-weight:900;font-size:20px;color:#5b6b80}
.ceq{display:flex;align-items:center;gap:6px;font-size:46px;font-weight:900}
.pbox{display:flex;align-items:center;gap:6px}
.parr{display:flex;flex-direction:column;gap:2px}
.prow{display:flex;gap:2px;animation:rowIn .3s backwards;animation-delay:calc(var(--i) * .1s)}
.pe{font-size:19px;line-height:1.05;display:inline-block}
.pgrp{display:flex;flex-wrap:wrap;max-width:76px;gap:1px;padding:3px;border-radius:10px;background:#eef6ff}
.pgrp.b{background:#fff3d6}.pgrp.w{max-width:120px}
.pe.x{opacity:.3;position:relative}.pe.x:after{content:"✕";position:absolute;left:0;right:0;top:0;text-align:center;color:#e8384f;font-weight:900;font-size:17px}
.pplus{font-weight:900;font-size:24px;color:#8a97a8}
.pcap{font-weight:900;font-size:12px;color:#5b6b80}
.qpic{position:absolute;left:50%;top:calc(max(78px,38% - 110px) + 150px);transform:translateX(-50%);z-index:3;background:rgba(255,255,255,.92);border-radius:18px;padding:6px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 5px 0 rgba(32,51,77,.15);animation:pop .35s}
.finmsg{position:absolute;left:50%;top:22%;z-index:9;transform:translateX(-50%);white-space:nowrap;font-size:26px;font-weight:900;color:#fff;padding:10px 20px;border-radius:999px;background:linear-gradient(#ff8fc4,#ff5aa5);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 6px 0 #c2357a,0 12px 18px rgba(0,0,0,.2);text-shadow:0 2px 0 rgba(0,0,0,.2);animation:finIn .6s cubic-bezier(.2,1.6,.4,1) backwards .2s}
@keyframes finIn{from{transform:translateX(-50%) scale(0)}}
/* game picker */
#picker .gtop h2{display:flex;flex-direction:column;align-items:center;line-height:1.05}
#picker .gtop h2 small{font-size:13px;opacity:.7}
.ggrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;padding-bottom:10px}
.gtile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;min-height:132px;border:0;border-radius:26px;padding:10px 8px 12px;color:#fff;font:inherit;font-weight:900;font-size:17px;text-shadow:0 2px 0 rgba(0,0,0,.2);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -6px 0 rgba(0,0,0,.14),0 7px 0 var(--sh),0 14px 18px rgba(0,0,0,.15);background:linear-gradient(var(--c1),var(--c2));animation:tileIn .5s cubic-bezier(.2,1.6,.4,1) backwards;animation-delay:calc(var(--i) * 60ms);overflow:hidden}
.gtile:active{transform:translateY(5px);box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 2px 0 var(--sh)}
.gtile b{position:relative;z-index:1;line-height:1.1;text-align:center}
.gtile .gprev{width:74px;height:74px;border-radius:50%;background:rgba(255,255,255,.25);box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center}
.gtile .gprev svg{width:62px;height:62px;overflow:visible}
.gtile.sel{outline:4px solid #fff;outline-offset:-4px}
.gtile.locked .gprev,.gtile.locked b{filter:grayscale(.8) brightness(.95);opacity:.6}
.gtile .lock{position:absolute;left:8px;right:8px;top:44px;z-index:2;font-size:13px;background:rgba(32,51,77,.78);border-radius:999px;padding:5px 6px;text-shadow:none}
.gtile.nope{animation:wobble3 .5s}
.gtile.wide{grid-column:1/-1;flex-direction:row;justify-content:center;gap:14px;min-height:96px}
.gtile.wide .gtx{display:flex;flex-direction:column;align-items:flex-start}
.gtile.wide small{font-size:13px;opacity:.9}
.gt-balloon{--c1:#7fd6ff;--c2:#2f9be0;--sh:#1d6fa8}.gt-gumball{--c1:#ff9ac0;--c2:#ff5a92;--sh:#c23468}.gt-fish{--c1:#55e0d2;--c2:#13a6b8;--sh:#0c7584}
.gt-rocket{--c1:#8f8cff;--c2:#5a4fd8;--sh:#3a31a0}.gt-frog{--c1:#8fe36a;--c2:#3fb34f;--sh:#2a7f36}.gt-cake{--c1:#ffc68a;--c2:#ff9640;--sh:#c26414}
.gt-garden{--c1:#ffe06b;--c2:#f5b400;--sh:#b88200}.gt-surprise{--c1:#d4a6ff;--c2:#a05cf0;--sh:#6a2fb0}
.pv-bob{animation:pvBob 2.2s ease-in-out infinite}.pv-bob.d2{animation-delay:-1.1s}
@keyframes pvBob{50%{transform:translateY(-4px)}}
.pv-jig{animation:pvJig 1.8s ease-in-out infinite;transform-origin:32px 24px}
@keyframes pvJig{25%{transform:rotate(6deg)}75%{transform:rotate(-6deg)}}
.pv-swim{animation:pvSwim 2.6s ease-in-out infinite alternate}
@keyframes pvSwim{from{transform:translateX(-5px)}to{transform:translateX(6px)}}
.pv-bub{animation:pvBub 2s ease-in infinite}@keyframes pvBub{from{transform:translateY(14px);opacity:0}50%{opacity:.8}to{transform:translateY(-6px);opacity:0}}
.pv-fl{animation:pvFl .25s ease-in-out infinite alternate;transform-origin:32px 41px}@keyframes pvFl{to{transform:scaleY(.75)}}
.gt-cake .pv-fl{transform-origin:32px 14px}
.pv-hop{animation:pvHop 1.4s cubic-bezier(.3,0,.4,1) infinite}@keyframes pvHop{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-10px)}}
.pv-sway{animation:pvSway 2.4s ease-in-out infinite;transform-origin:32px 60px}@keyframes pvSway{25%{transform:rotate(5deg)}75%{transform:rotate(-5deg)}}
.pv-fly{animation:pvFly 3s ease-in-out infinite}@keyframes pvFly{50%{transform:translate(-6px,6px)}}
.pv-shake{animation:pvShake 1.6s ease-in-out infinite;transform-origin:32px 58px}@keyframes pvShake{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-8deg)}82%{transform:rotate(8deg)}88%{transform:rotate(-5deg)}94%{transform:rotate(4deg)}}
@media (max-height:680px){.gtile{min-height:112px}.gtile .gprev{width:64px;height:64px}.gtile .gprev svg{width:54px;height:54px}.gtile.wide{min-height:80px}.calc{min-height:84px}.cnums{font-size:46px}}
.scene .qnote,.scene .factBig,.finmsg,.qpic{pointer-events:none}
.scene.gx .qnote{top:36px;bottom:auto;font-size:15px;padding:6px 10px;left:22px;right:22px}
.finmsg{font-size:21px;white-space:normal;text-align:center;width:max-content;max-width:88%}
@media (max-height:700px){.ggrid{gap:10px;margin-top:10px}.gtile{min-height:100px;padding:6px 6px 9px;font-size:15px}.gtile .gprev{width:56px;height:56px}.gtile .gprev svg{width:48px;height:48px}.gtile.wide{min-height:66px}.gtile .lock{top:30px}}
.calc{height:100px;min-height:0;overflow:hidden}
@media (max-height:680px){.calc{height:92px}}
.finmsg{font-size:19px;white-space:nowrap;max-width:none}

/* ===== wave 2 ===== */
.m-div{background:linear-gradient(#ffb36b,#ff8a3d 55%,#e86d1c);--edge:#b04e0c}
.modes .m-mix{min-height:64px}
.madeby{display:block;text-align:center;margin:10px auto 2px;font-size:12px;font-weight:700;color:rgba(32,51,77,.55);text-decoration:none;padding:6px 10px}
.madeby:active{color:var(--ink)}
/* parent gate */
.gate{position:fixed;inset:0;z-index:60;background:rgba(20,34,56,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.gcard{position:relative;width:100%;max-width:340px;background:linear-gradient(#fff,#f1f6fb);border-radius:28px;padding:20px 16px 16px;box-shadow:0 10px 0 rgba(32,51,77,.18),0 20px 40px rgba(0,0,0,.25);text-align:center}
.gcard h2{margin:0 0 4px;font-size:22px}
.gnote{margin:0;font-size:14px;opacity:.75}
.gq{margin:10px 0 6px;font-size:26px;font-weight:900}
.gtyped{height:52px;line-height:52px;margin:0 auto 12px;width:140px;border-radius:16px;background:#eef3f8;font-size:32px;font-weight:900;box-shadow:inset 0 3px 0 rgba(32,51,77,.08)}
.gtyped.no{animation:gNo .4s}
@keyframes gNo{20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.gcard .key{min-height:50px;font-size:24px}
.gcard .gx{position:absolute;right:10px;top:10px;width:40px;height:40px;border-radius:50%;background:#eef3f8;font-size:18px}
/* picker: 13 games, 3 per row */
.ggrid{grid-template-columns:repeat(3,1fr);gap:10px}
.gtile{min-height:118px;font-size:14px;padding:8px 4px 10px;line-height:1.1;text-align:center}
.gtile .gprev{width:60px;height:60px}.gtile .gprev svg{width:52px;height:52px}
.gtile .lock{font-size:11px}
@media (max-height:700px){.gtile{min-height:96px;font-size:13px}.gtile .gprev{width:50px;height:50px}.gtile .gprev svg{width:44px;height:44px}}
.gt-train{--c1:#ff9a8a;--c2:#e8483f;--sh:#a82a22}.gt-bee{--c1:#ffe680;--c2:#f2b705;--sh:#a87d00}.gt-basket{--c1:#ffb36b;--c2:#ff7a1a;--sh:#b04e0c}
.gt-pizza{--c1:#ff9d7a;--c2:#e8603f;--sh:#a83a20}.gt-turtle{--c1:#7fe3b0;--c2:#20b37a;--sh:#137a52}.gt-music{--c1:#b7a6ff;--c2:#7a5cf0;--sh:#4c33b0}
.pv-spin{animation:pvSpin 6s linear infinite;transform-origin:32px 34px}@keyframes pvSpin{to{transform:rotate(360deg)}}
.pv-walk{animation:pvWalk 2.4s ease-in-out infinite}@keyframes pvWalk{50%{transform:translateX(-5px)}}
/* tall phones: decor in the sky above a scene */
.tdeco{position:absolute;left:0;right:0;top:46px;height:calc(var(--top,0px) - 46px);display:none;pointer-events:none;z-index:0}
.stage.tall .tdeco{display:block}
.tdeco>*{position:absolute}
.td-sun{width:54px;height:54px;margin:-27px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff6c4,#ffd23f 50%,#f5a800);box-shadow:0 0 0 10px rgba(255,210,63,.18),0 0 30px rgba(255,200,40,.5);animation:tdPulse 4s ease-in-out infinite}
@keyframes tdPulse{50%{box-shadow:0 0 0 16px rgba(255,210,63,.1),0 0 40px rgba(255,200,40,.6)}}
.td-cloud{width:84px;height:28px;border-radius:20px;background:#fff;opacity:.9;transform:scale(var(--s,1));box-shadow:inset 0 -5px 0 rgba(150,190,220,.25);animation:tdDrift 14s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.td-cloud:before,.td-cloud:after{content:"";position:absolute;background:#fff;border-radius:50%}
.td-cloud:before{width:38px;height:38px;left:14px;top:-18px}.td-cloud:after{width:28px;height:28px;left:44px;top:-12px}
@keyframes tdDrift{to{transform:translateX(40px) scale(var(--s,1))}}
.td-e{font-size:26px;animation:tdFloat 5s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes tdFloat{50%{transform:translate(14px,-10px) rotate(6deg)}}
.td-bunt{left:-2%;right:-2%;top:0;height:44px;display:flex;justify-content:space-between;border-top:2px solid rgba(255,255,255,.7);border-radius:0 0 50% 50%/0 0 30% 30%}
.td-bunt i{display:block;width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;border-top:24px solid var(--c);filter:drop-shadow(0 3px 0 rgba(0,0,0,.12));transform-origin:50% 0;animation:tdFlag 2.4s ease-in-out infinite alternate;animation-delay:calc(var(--i) * -.3s);margin-top:calc(10px - 1.6px * (var(--i) - 5) * (var(--i) - 5) / 2.5 + 10px)}
@keyframes tdFlag{to{transform:rotate(7deg)}}
.td-star{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff;animation:tdTw 2s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes tdTw{50%{opacity:.25;transform:scale(.6)}}
.td-planet{width:56px;height:56px;margin:-28px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd1f0,#ff7ac8 55%,#b5368a);animation:tdFloat 7s ease-in-out infinite}
.td-planet:after{content:"";position:absolute;left:-16px;right:-16px;top:22px;height:12px;border-radius:50%;border:4px solid rgba(255,230,140,.9);transform:rotate(-14deg)}
.td-moon{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#dfe6f0 60%,#aab6c8);box-shadow:inset -6px -4px 0 rgba(0,0,0,.08)}
.td-lamp{width:2px;height:30px;background:rgba(80,60,40,.5);animation:tdSwing 3s ease-in-out infinite alternate;animation-delay:var(--d,0s);transform-origin:50% 0}
.td-lamp:after{content:"";position:absolute;left:-15px;top:28px;width:32px;height:18px;border-radius:16px 16px 4px 4px;background:var(--c);box-shadow:0 10px 24px var(--c)}
@keyframes tdSwing{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
.td-bub{width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.7),rgba(255,255,255,.05));animation:tdRise 5s ease-in infinite;animation-delay:var(--d,0s)}
@keyframes tdRise{0%{transform:translateY(30px);opacity:0}20%{opacity:1}100%{transform:translateY(-60px);opacity:0}}
.td-spot{width:140px;height:100%;margin-left:-70px;background:linear-gradient(var(--c,rgba(255,255,220,.3)),transparent);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);transform-origin:50% 0;animation:tdSwing 5s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.td-hab{width:46px;height:56px;margin-left:-23px;border-radius:50% 50% 44% 44%/58% 58% 42% 42%;background:repeating-linear-gradient(90deg,#ff5a4e 0 9px,#ffc93c 9px 18px,#2f8fdd 18px 27px);box-shadow:inset -6px -6px 0 rgba(0,0,0,.12);animation:tdFloat 8s ease-in-out infinite}
.td-hab:after{content:"";position:absolute;left:16px;top:62px;width:14px;height:11px;border-radius:2px 2px 4px 4px;background:#a8743c;box-shadow:0 -6px 0 -4px #7a4a1f}
@media (max-height:700px){.modes .mode{min-height:84px}.modes .mode.wide,.modes .m-mix{min-height:54px}.madeby{margin-top:4px}}