:root{
  --sky:#cfe6ff; --sky-top:#e2f1ff; --sky-deep:#a9d2ff; --blob:#ffffff; --blob-a:.6;
  --cloud:#ffffff; --panel-2:#f2f4ff; --panel-3:#e6e9ff; --muted:#d9d5ea; --ink:#2b2350; --ink-soft:#5d5580;
  --gum:#ff5c9a; --gum-deep:#d63a77; --sun:#ffd23f; --sun-deep:#e0a800; --star:#c48a00;
  --mint:#4fe3b0; --mint-deep:#1fb586; --grape:#8f63ff; --grape-deep:#6a3fd6;
  --tangerine:#ff9e4a; --good:#22c77f; --bad:#ff5a5a; --bad-bg:#ffd6d6;
  --sc:rgba(43,35,80,.14); --sc2:rgba(43,35,80,.16);
  --display:"Fredoka","Arial Rounded MT Bold","Helvetica Rounded",system-ui,sans-serif;
  --body:"Nunito","Avenir Next Rounded","Arial Rounded MT Bold",system-ui,sans-serif;
  --shadow:0 10px 0 var(--sc);
  --r:28px;
}
body[data-world="space"]{
  --sky:#1a2050; --sky-top:#2b3170; --sky-deep:#0b0f2a; --blob:#ffffff; --blob-a:.9;
  --cloud:#2c3372; --panel-2:#3b428f; --panel-3:#4a52a8; --muted:#5f66b3; --ink:#f6f4ff; --ink-soft:#c3bff0;
  --sc:rgba(0,0,0,.35); --sc2:rgba(0,0,0,.4); --bad-bg:#7a2f4a; --star:#ffd23f;
}
body[data-world="ocean"]{
  --sky:#1aa3b8; --sky-top:#6fe0e8; --sky-deep:#0a4f78; --blob:#ffffff; --blob-a:.35;
  --cloud:#eafcff; --panel-2:#d5f4f8; --panel-3:#bfeef5; --muted:#a8d9e2; --ink:#0b3d4f; --ink-soft:#2f6c80;
  --sc:rgba(5,50,70,.22); --sc2:rgba(5,50,70,.26); --gum:#ff7a59; --gum-deep:#d6532f;
}
body[data-world="jungle"]{
  --sky:#a8e69a; --sky-top:#dcf7c8; --sky-deep:#5cbf6c; --blob:#ffffff; --blob-a:.5;
  --cloud:#fffdf2; --panel-2:#f1f7de; --panel-3:#e3f0c6; --muted:#c9d9ad; --ink:#1f3d23; --ink-soft:#4b6b4f;
  --sc:rgba(20,60,25,.18); --sc2:rgba(20,60,25,.22); --gum:#ff7d3b; --gum-deep:#d65a1e; --grape:#7a4bd6; --grape-deep:#5a32ad;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--sky);color:var(--ink);font-family:var(--body);font-size:18px;
  background-image:
    radial-gradient(circle at 15% 20%, color-mix(in srgb,var(--blob) calc(var(--blob-a)*100%),transparent) 0 90px, transparent 91px),
    radial-gradient(circle at 80% 15%, color-mix(in srgb,var(--blob) calc(var(--blob-a)*80%),transparent) 0 60px, transparent 61px),
    radial-gradient(circle at 70% 85%, color-mix(in srgb,var(--blob) calc(var(--blob-a)*70%),transparent) 0 110px, transparent 111px),
    radial-gradient(circle at 10% 80%, color-mix(in srgb,var(--blob) calc(var(--blob-a)*60%),transparent) 0 70px, transparent 71px),
    linear-gradient(180deg,var(--sky-top) 0%, var(--sky) 60%, var(--sky-deep) 100%);
  background-attachment:fixed;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;overscroll-behavior:none;
  padding:calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
  min-height:100dvh;transition:background-color .4s;
}
body[data-world="space"]{
  background-image:
    radial-gradient(circle at 12% 18%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 78% 12%, #fff 0 2px, transparent 2.5px),
    radial-gradient(circle at 60% 40%, #fff 0 1.2px, transparent 2px), radial-gradient(circle at 30% 65%, #fff 0 1.8px, transparent 2.5px),
    radial-gradient(circle at 88% 70%, #fff 0 1.5px, transparent 2px), radial-gradient(circle at 45% 90%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 92% 35%, #ffd23f 0 2.2px, transparent 3px), radial-gradient(circle at 20% 92%, #ff9ad5 0 2px, transparent 3px),
    radial-gradient(circle at 70% 78%, #8f63ff44 0 90px, transparent 91px),
    linear-gradient(180deg,var(--sky-top) 0%, var(--sky) 55%, var(--sky-deep) 100%);
}
body[data-world="ocean"]{
  background-image:
    radial-gradient(circle at 15% 30%, #ffffff55 0 12px, transparent 13px), radial-gradient(circle at 25% 60%, #ffffff44 0 8px, transparent 9px),
    radial-gradient(circle at 80% 25%, #ffffff55 0 16px, transparent 17px), radial-gradient(circle at 70% 75%, #ffffff44 0 10px, transparent 11px),
    radial-gradient(circle at 90% 55%, #ffffff33 0 6px, transparent 7px), radial-gradient(circle at 40% 85%, #ffffff44 0 14px, transparent 15px),
    linear-gradient(180deg,var(--sky-top) 0%, var(--sky) 45%, var(--sky-deep) 100%);
}
body[data-world="jungle"]{
  background-image:
    radial-gradient(ellipse at 8% 100%, #3f9d4f 0 120px, transparent 121px), radial-gradient(ellipse at 95% 100%, #3f9d4f 0 150px, transparent 151px),
    radial-gradient(circle at 20% 20%, #ffffff66 0 60px, transparent 61px), radial-gradient(circle at 85% 18%, #ffd23f88 0 50px, transparent 51px),
    linear-gradient(180deg,var(--sky-top) 0%, var(--sky) 55%, var(--sky-deep) 100%);
}
body.disco,body.rainbow{background-image:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
button:focus-visible,[tabindex]:focus-visible{outline:4px solid var(--grape);outline-offset:3px}
.app{max-width:920px;margin:0 auto;min-height:calc(100dvh - 40px);display:flex;flex-direction:column;gap:14px}
.screen{display:flex;flex-direction:column;gap:18px;flex:1}
[hidden]{display:none !important}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px}
.brand{font-family:var(--display);font-weight:700;font-size:clamp(18px,3vw,26px);white-space:nowrap;letter-spacing:.3px;display:flex;align-items:center;gap:10px}
.brand .blob{width:38px;height:34px;border-radius:50% 50% 45% 55% / 60% 60% 40% 40%;background:linear-gradient(160deg,#ff5c9a,#8f63ff);display:grid;place-items:center;color:#fff;font-size:20px;box-shadow:0 4px 0 var(--sc2)}
.iconbtn{width:56px;height:56px;border-radius:18px;background:var(--cloud);box-shadow:0 4px 0 var(--sc2);font-size:24px;display:grid;place-items:center}
.iconbtn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sc2)}
.tools{display:flex;gap:8px;align-items:center}
.coins{font-family:var(--display);font-weight:700;font-size:20px;background:var(--sun);color:#2b2350;padding:0 14px;border-radius:999px;box-shadow:0 4px 0 var(--sun-deep);height:56px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.coins.bump{animation:bounce .5s}
@media (max-width:560px){.brand .txt{display:none}}

/* generic chunky button */
.btn{
  font-family:var(--display);font-weight:700;font-size:22px;letter-spacing:.3px;
  padding:14px 26px;border-radius:22px;color:#fff;background:var(--gum);
  box-shadow:0 7px 0 var(--gum-deep);transition:transform .08s,box-shadow .08s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:60px
}
.btn:active{transform:translateY(5px);box-shadow:0 2px 0 var(--gum-deep)}
.btn.mint{background:var(--mint);box-shadow:0 7px 0 var(--mint-deep);color:#1a2a22}
.btn.mint:active{box-shadow:0 2px 0 var(--mint-deep)}
.btn.sun{background:var(--sun);box-shadow:0 7px 0 var(--sun-deep);color:#2b2350}
.btn.sun:active{box-shadow:0 2px 0 var(--sun-deep)}
.btn.grape{background:var(--grape);box-shadow:0 7px 0 var(--grape-deep)}
.btn.grape:active{box-shadow:0 2px 0 var(--grape-deep)}
.btn.ghost{background:var(--cloud);color:var(--ink);box-shadow:0 7px 0 var(--sc2)}
.btn.ghost:active{box-shadow:0 2px 0 var(--sc2)}
.btn.big{font-size:28px;padding:18px 34px;min-height:74px}
.btn:disabled{opacity:.6}
.row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center}
.hint{text-align:center;color:var(--ink-soft);font-weight:700;margin:0}

/* HOME */
.hero{text-align:center;display:flex;flex-direction:column;gap:6px;padding-top:4px}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(32px,6vw,52px);margin:0;line-height:1.05;text-wrap:balance}
.hero h1 span{color:var(--gum)}
.hero p{margin:0;font-weight:700;color:var(--ink-soft);font-size:20px}
.worlds{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:640px){.worlds{grid-template-columns:repeat(2,1fr)}}
.world{
  background:var(--cloud);border-radius:22px;padding:12px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;
  box-shadow:0 6px 0 var(--sc);border:4px solid transparent;transition:transform .08s,box-shadow .08s;min-height:112px;justify-content:center
}
.world .ico{font-size:40px;line-height:1}
.world .wn{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.1;text-align:center}
.world .wt{font-size:13px;font-weight:800;color:var(--ink-soft);text-align:center;line-height:1.2}
.world.on{border-color:var(--gum);transform:scale(1.03)}
.world.locked{opacity:.55}
.world.locked .ico{filter:grayscale(1)}
.world:active{transform:translateY(4px)}
.levels{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:560px){.levels{grid-template-columns:repeat(3,1fr)}}
.level{
  position:relative;background:var(--cloud);border-radius:var(--r);padding:14px 10px 12px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:4px;
  transition:transform .08s,box-shadow .08s;min-height:132px;justify-content:center
}
.level:active{transform:translateY(6px);box-shadow:0 4px 0 var(--sc)}
.level .num{font-family:var(--display);font-weight:700;font-size:44px;line-height:1;color:var(--ink)}
.level .num small{font-size:22px;font-weight:600;color:var(--ink-soft)}
.level .pet{font-size:30px;line-height:1;height:34px;display:grid;place-items:center;filter:grayscale(1) opacity(.35);transition:filter .3s}
.level.won .pet{filter:none}
.level .stars{font-size:15px;letter-spacing:1px;color:var(--star);height:18px}
.level .stars .off{color:var(--muted)}
.level.mix{grid-column:span 2;background:linear-gradient(135deg,var(--cloud) 0%,#fff2a8 100%)}
.level.mix.locked{background:var(--cloud);color:var(--ink-soft)}
.level.mix .num{font-size:28px}
.level .lockmsg{font-size:14px;font-weight:700;color:var(--ink-soft);text-align:center}
.stat{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;font-weight:800;color:var(--ink-soft);font-size:16px}
.stat b{color:var(--ink)}
.made{text-align:center;font-family:var(--display);font-weight:600;color:var(--gum);font-size:21px;margin-top:auto;padding-top:8px}
.made b{color:var(--ink)}

/* LEARN */
.card{background:var(--cloud);border-radius:var(--r);box-shadow:var(--shadow);padding:22px}
.card h2{font-family:var(--display);font-weight:700;font-size:34px;margin:0 0 6px;text-align:center}
.table{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:520px){.table{grid-template-columns:repeat(2,1fr)}}
.fact{
  font-family:var(--display);font-size:24px;font-weight:600;background:var(--panel-2);border-radius:16px;padding:10px 12px;min-height:56px;
  display:flex;justify-content:space-between;align-items:center;gap:6px;font-variant-numeric:tabular-nums
}
.fact b{color:var(--grape);font-weight:700}
body[data-world="space"] .fact b{color:#ffd23f}
.fact:active{background:var(--panel-3)}
.table.hide .fact b{color:transparent;background:var(--panel-3);border-radius:8px;min-width:2.4em;text-align:center}
.table.hide .fact.reveal b{color:var(--grape);background:none}
body[data-world="space"] .table.hide .fact.reveal b{color:#ffd23f}
.learnrow{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:8px}

/* PLAY */
.hud{display:flex;align-items:center;gap:12px}
.progress{flex:1;height:22px;background:color-mix(in srgb,var(--cloud) 65%,transparent);border-radius:999px;overflow:hidden;box-shadow:inset 0 3px 0 rgba(0,0,0,.08)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--mint),var(--sun));border-radius:999px;transition:width .35s cubic-bezier(.3,1.4,.5,1)}
.progress.time i{transition:width 1s linear;background:linear-gradient(90deg,var(--tangerine),var(--sun))}
.chip{font-family:var(--display);font-weight:700;font-size:20px;background:var(--cloud);padding:6px 14px;border-radius:999px;box-shadow:0 4px 0 var(--sc);white-space:nowrap;font-variant-numeric:tabular-nums}
.chip.streak{background:var(--sun);color:#2b2350}
.chip.timer{background:var(--tangerine);color:#2b2350;min-width:76px;text-align:center}
.chip.timer.low{animation:bounce .5s infinite}
.qcard{background:var(--cloud);border-radius:var(--r);box-shadow:var(--shadow);padding:26px 18px 22px;text-align:center;position:relative;overflow:hidden}
.equation{font-family:var(--display);font-weight:700;font-size:clamp(56px,11vw,96px);line-height:1;letter-spacing:2px;font-variant-numeric:tabular-nums;display:flex;justify-content:center;align-items:center;gap:.18em;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.equation .x{color:var(--gum)}
.equation .ans{min-width:1.6em;display:inline-block;border-bottom:8px solid var(--grape);color:var(--grape);padding:0 .1em}
body[data-world="space"] .equation .ans{color:#ffd23f;border-bottom-color:#ffd23f}
.equation .ans.empty{color:var(--muted);border-bottom-color:var(--muted)}
.feedback{min-height:34px;font-family:var(--display);font-weight:600;font-size:24px;margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:10px}
.feedback.good{color:var(--good)} .feedback.bad{color:var(--bad)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.choice{
  font-family:var(--display);font-weight:700;font-size:44px;background:var(--cloud);border-radius:var(--r);
  padding:18px;box-shadow:0 8px 0 var(--sc2);min-height:96px;transition:transform .08s,box-shadow .08s,background .2s
}
.choice:active{transform:translateY(6px);box-shadow:0 2px 0 var(--sc2)}
.choice.right{background:var(--mint);color:#1a2a22;box-shadow:0 8px 0 var(--mint-deep);animation:bounce .5s}
.choice.wrong{background:var(--bad-bg);color:var(--bad);animation:shake .4s}
.choice:disabled{opacity:.85}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:420px;margin:0 auto;width:100%}
.key{
  font-family:var(--display);font-weight:700;font-size:36px;background:var(--cloud);border-radius:20px;min-height:68px;
  box-shadow:0 6px 0 var(--sc2);transition:transform .08s,box-shadow .08s
}
.key:active{transform:translateY(4px);box-shadow:0 2px 0 var(--sc2)}
.key.go{background:var(--mint);color:#1a2a22;box-shadow:0 6px 0 var(--mint-deep)}
.key.del{background:var(--panel-2);font-size:26px}
.cheer{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;font-size:90px;opacity:0}
.cheer.show{animation:pop .7s ease-out}
@media (orientation:landscape) and (min-width:900px){
  #play.grid{display:grid;grid-template-columns:1.2fr 1fr;grid-template-areas:"hud hud" "q a" "quit quit";align-items:center}
  #play.grid .hud{grid-area:hud} #play.grid .qcard{grid-area:q} #play.grid .choices,#play.grid .pad{grid-area:a} #play.grid .quitrow{grid-area:quit}
}
/* wacky twists */
.qcard.flip .equation{transform:rotate(180deg)}
.qcard.giant .equation{animation:wobble .6s infinite}
.qcard.tiny .equation{transform:scale(.55)}
.qcard.mirror .equation{transform:scaleX(-1)}
@keyframes wobble{0%,100%{transform:scale(1.22) rotate(-3deg)}50%{transform:scale(1.22) rotate(3deg)}}
.boss{position:absolute;top:2px;right:10px;font-size:72px;line-height:1;animation:bossWiggle .5s infinite alternate;filter:drop-shadow(0 6px 0 var(--sc2));z-index:2}
@keyframes bossWiggle{from{transform:rotate(-12deg) scale(1)}to{transform:rotate(12deg) scale(1.15)}}
.boss.ko{animation:ko .6s forwards}
@keyframes ko{to{transform:scale(2.5) rotate(360deg);opacity:0}}
body.disco{animation:disco .35s steps(1) infinite}
@keyframes disco{0%{background-color:#ffb3d9}25%{background-color:#b3e6ff}50%{background-color:#fff3a8}75%{background-color:#c9ffd9}}
body.disco .qcard{animation:hue 1s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
body.rainbow{animation:rainbowbg 3s linear infinite}
@keyframes rainbowbg{0%{background-color:#ffd6f5}20%{background-color:#fff3a8}40%{background-color:#c9ffd9}60%{background-color:#cfe6ff}80%{background-color:#e4dbff}100%{background-color:#ffd6f5}}
.shake{animation:shakeAll .35s}
@keyframes shakeAll{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,4px)}40%{transform:translate(6px,-4px)}60%{transform:translate(-4px,-3px)}80%{transform:translate(4px,3px)}}

/* rocket lane */
.lane{position:absolute;left:10px;top:12px;bottom:12px;width:44px;border-radius:999px;background:var(--panel-2);box-shadow:inset 0 0 0 3px var(--panel-3)}
.lane .rocket{position:absolute;left:50%;bottom:0;transform:translate(-50%,0);font-size:34px;line-height:1;transition:bottom .4s cubic-bezier(.3,1.4,.5,1)}
.lane .rocket.boost{animation:boost .4s}
@keyframes boost{0%{transform:translate(-50%,0) scale(1)}50%{transform:translate(-50%,-6px) scale(1.3)}100%{transform:translate(-50%,0) scale(1)}}
.lane .flag{position:absolute;left:50%;top:-6px;transform:translateX(-50%);font-size:22px}
.qcard.rocketmode{padding-left:64px}

/* monster munch */
.munch{display:flex;flex-direction:column;gap:14px;align-items:center}
.monster{font-size:110px;line-height:1;transform-origin:50% 80%;animation:breathe 2s ease-in-out infinite;position:relative;filter:drop-shadow(0 10px 0 var(--sc))}
.monster.chomp{animation:chomp .45s}
.monster.bleh{animation:bleh .5s}
@keyframes chomp{0%{transform:scale(1)}30%{transform:scale(1.35,.8)}60%{transform:scale(.9,1.2)}100%{transform:scale(1)}}
@keyframes bleh{0%,100%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}
.mtitle{font-family:var(--display);font-weight:700;font-size:clamp(24px,4.5vw,34px);text-align:center;margin:0;text-wrap:balance}
.mtitle b{color:var(--gum)}
.numgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%;max-width:560px}
.numgrid .num{
  font-family:var(--display);font-weight:700;font-size:40px;background:var(--cloud);border-radius:22px;min-height:82px;
  box-shadow:0 7px 0 var(--sc2);transition:transform .08s,box-shadow .08s,opacity .3s
}
.numgrid .num:active{transform:translateY(5px);box-shadow:0 2px 0 var(--sc2)}
.numgrid .num.ate{opacity:0;transform:scale(.2);pointer-events:none}
.numgrid .num.bad{background:var(--bad-bg);color:var(--bad);animation:shake .4s}

/* RESULT */
.result{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.result h2{font-family:var(--display);font-weight:700;font-size:clamp(34px,7vw,52px);margin:0;text-wrap:balance}
.bigstars{font-size:52px;letter-spacing:6px;color:var(--star)}
.bigstars .off{opacity:.25}
.score{font-family:var(--display);font-weight:600;font-size:24px;color:var(--ink-soft)}
.gift{
  width:190px;height:190px;border-radius:38px;background:linear-gradient(160deg,var(--sun),var(--tangerine));
  display:grid;place-items:center;font-size:100px;box-shadow:0 12px 0 var(--sun-deep);animation:wiggle 1.6s infinite;cursor:pointer
}
.gift:active{transform:scale(.95)}
.gift-label{font-family:var(--display);font-weight:600;font-size:22px;color:var(--grape)}
body[data-world="space"] .gift-label{color:#ffd23f}
.squishy{
  width:220px;height:200px;display:grid;place-items:center;font-size:120px;line-height:1;cursor:pointer;
  border-radius:48% 52% 45% 55% / 55% 55% 45% 45%;transform-origin:50% 100%;position:relative;
  -webkit-touch-callout:none;touch-action:none;
  box-shadow:0 14px 0 var(--sc), inset 0 -16px 0 rgba(0,0,0,.08), inset 0 10px 0 rgba(255,255,255,.35)
}
.squishy .face{display:block;line-height:1}
.squishy.hatch{animation:hatch .8s cubic-bezier(.3,1.6,.5,1)}
.squishy.squish{animation:squish .55s cubic-bezier(.3,1.5,.5,1)}
.squishy.peek{filter:grayscale(1) brightness(.6);opacity:.55}
.squishy.idle{animation:breathe 2.6s ease-in-out infinite}
.squishy.shiny{background:linear-gradient(160deg,#fff6c2,#ffd23f 55%,#ff9e4a) !important;box-shadow:0 14px 0 var(--sc),0 0 0 6px #fff3a8,0 0 40px #ffd23f99, inset 0 -16px 0 rgba(0,0,0,.08), inset 0 10px 0 rgba(255,255,255,.5)}
.squishy.shiny::before{content:"✨";position:absolute;top:-10px;left:-6px;font-size:36px;animation:twinkle 1.2s infinite alternate}
.squishy.shiny::after{content:"✨";position:absolute;bottom:4px;right:-8px;font-size:28px;animation:twinkle 1.5s .4s infinite alternate}
.mini.shiny::before{font-size:22px} .mini.shiny::after{font-size:18px}
@keyframes twinkle{from{opacity:.3;transform:scale(.7) rotate(-10deg)}to{opacity:1;transform:scale(1.15) rotate(10deg)}}
.hat{position:absolute;left:50%;transform:translateX(-50%) rotate(-8deg);font-size:64px;line-height:1;pointer-events:none;filter:drop-shadow(0 4px 0 var(--sc));z-index:2}
.mini .hat{font-size:34px}
.bubble{position:absolute;top:-8px;right:-30px;background:#fff;color:#2b2350;font-family:var(--display);font-weight:700;font-size:22px;padding:8px 14px;border-radius:18px;box-shadow:0 4px 0 rgba(0,0,0,.15);white-space:nowrap;animation:bubble 1.1s ease-out forwards;pointer-events:none;z-index:3}
.bubble::after{content:"";position:absolute;left:14px;bottom:-9px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
.mini .bubble{font-size:15px;padding:5px 10px;right:-20px}
@keyframes bubble{0%{opacity:0;transform:scale(.4) translateY(10px)}20%{opacity:1;transform:scale(1.1)}75%{opacity:1;transform:scale(1) translateY(-6px)}100%{opacity:0;transform:translateY(-22px)}}
.pname{font-family:var(--display);font-weight:700;font-size:34px;margin:0}
.pbio{margin:0;color:var(--ink-soft);font-weight:700;max-width:34ch;text-wrap:balance}
.squishcount{font-family:var(--display);font-weight:600;color:var(--grape);font-size:20px;min-height:26px}
body[data-world="space"] .squishcount{color:#ffd23f}
.missed{display:flex;flex-direction:column;gap:8px;width:100%;max-width:560px}
.missed h3{font-family:var(--display);font-weight:700;font-size:22px;margin:0;text-align:center;color:var(--ink-soft)}
.party{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.party span{position:absolute;bottom:-20px;left:-100px;font-size:72px;animation:partyHop 1.1s ease-in-out infinite alternate, partyRun 6s linear forwards}
@keyframes partyHop{from{transform:translateY(0) rotate(-10deg)}to{transform:translateY(-140px) rotate(10deg)}}
@keyframes partyRun{from{left:-100px}to{left:110%}}

/* SHELF */
.shelfsec{display:flex;flex-direction:column;gap:10px}
.shelfsec h3{font-family:var(--display);font-weight:700;font-size:26px;margin:0;display:flex;align-items:center;gap:8px}
.shelfsec h3 small{font-size:16px;font-weight:800;color:var(--ink-soft)}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:560px){.shelf{grid-template-columns:repeat(3,1fr)}}
.slot{background:var(--cloud);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
.slot .mini{width:96px;height:88px;font-size:56px;box-shadow:0 8px 0 var(--sc), inset 0 -10px 0 rgba(0,0,0,.08), inset 0 6px 0 rgba(255,255,255,.35)}
.slot .name{font-family:var(--display);font-weight:600;font-size:18px;text-align:center;line-height:1.15}
.slot .cnt{font-size:15px;font-weight:800;color:var(--ink-soft);text-align:center}
.slot.empty .mini{background:var(--panel-3) !important;box-shadow:inset 0 0 0 4px var(--muted)}
.slot.empty .mini .face{color:transparent;filter:grayscale(1) opacity(.25)}
.slot.empty .name{color:var(--ink-soft)}
.slot.empty .mini::after{content:"?";position:absolute;inset:0;color:var(--muted);display:grid;place-items:center;font-family:var(--display);font-size:44px;font-weight:700}
.wardrobe{background:var(--cloud);border-radius:var(--r);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px}
.wardrobe h3{font-family:var(--display);font-weight:700;font-size:24px;margin:0;text-align:center}
.hats{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.hatbtn{width:86px;border-radius:20px;background:var(--panel-2);padding:8px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 5px 0 var(--sc);transition:transform .08s}
.hatbtn .ico{font-size:40px;line-height:1}
.hatbtn .price{font-size:14px;font-weight:800;color:var(--ink-soft)}
.hatbtn.owned .price{color:var(--mint-deep)}
.hatbtn.sel{background:var(--sun);color:#2b2350;box-shadow:0 5px 0 var(--sun-deep);transform:scale(1.06)}
.hatbtn.sel .price{color:#2b2350}
.hatbtn.poor{opacity:.5}
.hatbtn:active{transform:translateY(3px)}

/* settings */
.seg{display:inline-flex;background:var(--cloud);border-radius:999px;padding:4px;box-shadow:0 4px 0 var(--sc)}
.seg button{font-family:var(--display);font-weight:600;font-size:17px;padding:8px 16px;border-radius:999px;color:var(--ink-soft);min-height:48px}
.seg button.on{background:var(--grape);color:#fff}

canvas#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%) translateY(-80px);background:#2b2350;color:#fff;padding:12px 20px;border-radius:999px;font-weight:800;font-size:19px;transition:transform .3s;z-index:60;max-width:92vw;text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}

@keyframes bounce{0%{transform:scale(1)}40%{transform:scale(1.12)}70%{transform:scale(.96)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-10px)}50%{transform:translateX(10px)}75%{transform:translateX(-6px)}}
@keyframes pop{0%{opacity:0;transform:scale(.3)}30%{opacity:1;transform:scale(1.2)}100%{opacity:0;transform:scale(1.6) translateY(-40px)}}
@keyframes wiggle{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes hatch{0%{transform:scale(.2) translateY(60px);opacity:0}60%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}
@keyframes squish{0%{transform:scale(1,1)}30%{transform:scale(1.35,.6)}55%{transform:scale(.85,1.2)}75%{transform:scale(1.08,.94)}100%{transform:scale(1,1)}}
@keyframes breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.03,.97)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}

/* ===== school edition ===== */
body[data-world="division"]{
  --sky:#ffd9b3; --sky-top:#fff1dc; --sky-deep:#ff9e4a; --blob:#ffffff; --blob-a:.55;
  --cloud:#fffaf3; --panel-2:#fff0dc; --panel-3:#ffe3c2; --muted:#e6c9a6; --ink:#4a2314; --ink-soft:#8a5a3c;
  --sc:rgba(90,40,10,.18); --sc2:rgba(90,40,10,.22); --gum:#e63946; --gum-deep:#b7202d; --grape:#c2410c; --grape-deep:#9a3412;
}
body[data-world="puzzle"]{
  --sky:#e6d9ff; --sky-top:#f4edff; --sky-deep:#b39bff; --blob:#ffffff; --blob-a:.6;
  --cloud:#ffffff; --panel-2:#f3edff; --panel-3:#e6dbff; --muted:#d3c6f2; --ink:#2b1d5c; --ink-soft:#5c4a8f;
  --sc:rgba(60,30,120,.16); --sc2:rgba(60,30,120,.2); --gum:#00b8a9; --gum-deep:#008f84;
}
body[data-world="division"]{
  background-image:
    radial-gradient(circle at 12% 22%, #ffffff88 0 70px, transparent 71px), radial-gradient(circle at 85% 20%, #e6394633 0 60px, transparent 61px),
    radial-gradient(circle at 70% 85%, #ffffff77 0 100px, transparent 101px),
    linear-gradient(180deg,var(--sky-top) 0%, var(--sky) 55%, var(--sky-deep) 100%);
}
body[data-world="puzzle"]{
  background-image:
    radial-gradient(circle at 15% 25%, #ffffff99 0 80px, transparent 81px), radial-gradient(circle at 82% 18%, #00b8a933 0 60px, transparent 61px),
    radial-gradient(circle at 65% 85%, #ffffff88 0 110px, transparent 111px),
    linear-gradient(180deg,var(--sky-top) 0%, var(--sky) 55%, var(--sky-deep) 100%);
}
.points{font-family:var(--display);font-weight:700;font-size:20px;background:var(--grape);color:#fff;padding:0 14px;border-radius:999px;box-shadow:0 4px 0 var(--grape-deep);height:56px;display:flex;align-items:center;gap:6px;white-space:nowrap}
.points.bump{animation:bounce .5s}
.iconbtn.avatar{font-size:28px}
.iconbtn.small{width:44px;height:44px;font-size:18px;border-radius:14px}
@media (max-width:640px){.coins,.points{font-size:16px;padding:0 10px}}
.adminbar{position:sticky;top:0;z-index:70;background:#2b2350;color:#fff;border-radius:16px;padding:10px 16px;display:flex;justify-content:space-between;align-items:center;gap:10px;font-weight:800;flex-wrap:wrap}
.adminbar button{background:#ffd23f;color:#2b2350;font-family:var(--display);font-weight:700;padding:8px 14px;border-radius:999px}
.panel{background:var(--cloud);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.panel h3{font-family:var(--display);font-weight:700;font-size:24px;margin:0;display:flex;align-items:center;gap:8px}
.panel h3 small{font-size:15px;font-weight:800;color:var(--ink-soft);margin-left:auto}
.assign{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.acard{background:var(--panel-2);border-radius:20px;padding:12px 14px;display:flex;gap:12px;align-items:center;text-align:left;box-shadow:0 5px 0 var(--sc);transition:transform .08s;position:relative}
.acard:active{transform:translateY(4px)}
.acard .ico{font-size:40px;line-height:1}
.acard .t{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.15}
.acard .d{font-size:14px;font-weight:800;color:var(--ink-soft)}
.acard .tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.tag{font-size:12px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--panel-3);color:var(--ink)}
.tag.x2{background:var(--sun);color:#2b2350}
.tag.ec{background:var(--grape);color:#fff}
.tag.due{background:var(--tangerine);color:#2b2350}
.tag.late{background:var(--bad);color:#fff}
.acard.done{opacity:.75}
.acard.done .t::after{content:" ✅"}
.lb{display:flex;flex-direction:column;gap:6px}
.lbrow{display:flex;align-items:center;gap:10px;background:var(--panel-2);border-radius:14px;padding:8px 12px;font-weight:800}
.lbrow .rank{font-family:var(--display);font-weight:700;width:34px;color:var(--ink-soft)}
.lbrow .av{font-size:26px;line-height:1}
.lbrow .nm{flex:1}
.lbrow .pt{font-family:var(--display);font-weight:700;color:var(--grape);font-variant-numeric:tabular-nums}
.lbrow.me{background:var(--sun);color:#2b2350}
.lbrow.me .pt{color:#2b2350}
.badges{display:flex;gap:10px;flex-wrap:wrap}
.badge{width:84px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.badge .ico{width:60px;height:60px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;font-size:32px;box-shadow:0 4px 0 var(--sc)}
.badge .bn{font-size:12px;font-weight:800;line-height:1.1;color:var(--ink-soft)}
.badge.on .ico{background:linear-gradient(160deg,#fff6c2,#ffd23f);box-shadow:0 4px 0 var(--sun-deep)}
.badge.on .bn{color:var(--ink)}
.badge.off .ico{filter:grayscale(1);opacity:.45}
.pointsCard{background:linear-gradient(135deg,var(--cloud),#fff2a8);border-radius:22px;padding:14px 22px;box-shadow:var(--shadow);font-family:var(--display);font-weight:700;font-size:26px;display:flex;flex-direction:column;align-items:center;gap:4px;color:#2b2350}
.pointsCard .big{font-size:40px;color:var(--grape)}
.pointsCard .flourish{font-size:20px;color:#d63a77}
.pointsCard .sub{font-size:16px;font-weight:800;color:#5d5580}
.newbadge{display:flex;align-items:center;gap:10px;background:var(--cloud);border-radius:999px;padding:8px 16px 8px 10px;box-shadow:var(--shadow);font-family:var(--display);font-weight:700;font-size:20px;animation:hatch .8s cubic-bezier(.3,1.6,.5,1)}
.newbadge span{font-size:30px}
.modal{position:fixed;inset:0;background:rgba(43,35,80,.55);display:grid;place-items:center;z-index:80;padding:16px}
.modal .box{background:var(--cloud);border-radius:var(--r);padding:20px;max-width:520px;width:100%;display:flex;flex-direction:column;gap:12px;box-shadow:var(--shadow)}
.modal h3{font-family:var(--display);font-weight:700;font-size:26px;margin:0;text-align:center}
.avgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.avgrid button{font-size:34px;border-radius:16px;background:var(--panel-2);min-height:60px;box-shadow:0 4px 0 var(--sc)}
.avgrid button.on{background:var(--sun)}
.avgrid button:active{transform:translateY(3px)}
.equation.puzzleq{font-size:clamp(30px,6vw,52px);letter-spacing:0;flex-wrap:wrap;line-height:1.15;gap:.25em}
.equation.puzzleq .blank{display:inline-block;min-width:1.6em;border-bottom:6px solid var(--grape);color:var(--grape)}
.equation.puzzleq .clue{display:block;width:100%;font-size:.8em;font-weight:600;text-align:center}
.equation.puzzleq .vs{color:var(--gum);font-size:.7em}
.lightning{height:12px;border-radius:999px;background:var(--panel-3);overflow:hidden;margin:10px auto 0;max-width:420px}
.lightning i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--sun),var(--tangerine));transform-origin:left;animation:shrink 5s linear forwards}
@keyframes shrink{to{transform:scaleX(0)}}
.choices.two{grid-template-columns:1fr 1fr}
.choice.txt{font-size:32px}
.level.daily{grid-column:span 2;background:linear-gradient(135deg,var(--cloud),#c9fff3)}
.level.daily.done{background:var(--cloud)}
.level .pname2{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.1;text-align:center}
.mini-hint{font-size:13px;font-weight:800;color:var(--ink-soft);text-align:center}
.offline{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);background:#2b2350;color:#fff;padding:8px 16px;border-radius:999px;font-weight:800;font-size:14px;z-index:60;opacity:0;transition:opacity .3s;pointer-events:none}
.offline.show{opacity:1}

/* shop tabs + accessories + levels */
.shoptabs{flex-wrap:wrap;justify-content:center}
.shoptabs button{padding:8px 12px;font-size:15px;min-height:44px}
.hatbtn.big{width:100%;max-width:360px}
.hatbtn .nm{font-size:13px;font-weight:800;color:var(--ink)}
.acc{position:absolute;right:-14px;bottom:-6px;font-size:52px;line-height:1;pointer-events:none;filter:drop-shadow(0 4px 0 var(--sc));z-index:2;transform:rotate(10deg)}
.mini .acc{font-size:28px;right:-8px;bottom:-4px}
.crownlet{position:absolute;left:-4px;top:-10px;font-size:30px;line-height:1;pointer-events:none;z-index:2;animation:twinkle 1.4s infinite alternate}
.mini .crownlet{font-size:18px}
.squishy.glow{box-shadow:0 14px 0 var(--sc),0 0 0 6px #fff,0 0 34px 8px #8f63ff99, inset 0 -16px 0 rgba(0,0,0,.08), inset 0 10px 0 rgba(255,255,255,.35)}
.squishy.legendary{outline:6px solid transparent;border:6px solid;border-image:linear-gradient(90deg,#ff5c9a,#ffd23f,#4fe3b0,#5ec8ff,#8f63ff) 1;animation:breathe 2.6s ease-in-out infinite, huepulse 3s linear infinite}
@keyframes huepulse{to{filter:hue-rotate(360deg)}}
.squishy.rainbowpet{background:linear-gradient(120deg,#ff9ad5,#ffd23f,#4fe3b0,#5ec8ff,#b39bff,#ff9ad5) !important;background-size:400% 400% !important;animation:rainbowshift 4s linear infinite, breathe 2.6s ease-in-out infinite}
@keyframes rainbowshift{to{background-position:400% 0}}
.lvl{position:absolute;top:8px;right:8px;background:var(--grape);color:#fff;font-family:var(--display);font-weight:700;font-size:13px;padding:2px 8px;border-radius:999px;z-index:3}
.lvl.max{background:linear-gradient(90deg,#ff5c9a,#ffd23f,#4fe3b0,#8f63ff);color:#2b2350}
.miss{position:absolute;top:-6px;left:-6px;background:#fff;color:#2b2350;font-size:12px;font-weight:800;padding:4px 8px;border-radius:12px;box-shadow:0 3px 0 rgba(0,0,0,.15);z-index:4;animation:breathe 2s infinite}
/* dances */
.squishy.dance-spin{animation:dspin .8s cubic-bezier(.3,1.2,.5,1)}
@keyframes dspin{to{transform:rotate(360deg)}}
.squishy.dance-bounce{animation:dbounce .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes dbounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-60px) scale(.95,1.1)}60%{transform:translateY(0) scale(1.1,.9)}80%{transform:translateY(-20px)}}
.squishy.dance-flip{animation:dflip .9s ease-in-out}
@keyframes dflip{0%{transform:rotateX(0)}50%{transform:translateY(-40px) rotateX(180deg)}100%{transform:rotateX(360deg)}}
.squishy.dance-wiggle{animation:dwiggle .9s ease-in-out}
@keyframes dwiggle{0%,100%{transform:rotate(0)}15%{transform:rotate(-14deg) scale(1.05)}30%{transform:rotate(14deg)}45%{transform:rotate(-12deg) scale(1.08)}60%{transform:rotate(12deg)}75%{transform:rotate(-6deg)}90%{transform:rotate(6deg)}}
/* shelf homes */
.shelfsec.homed{border-radius:var(--r);padding:14px;position:relative;overflow:hidden}
.shelfsec.homed .deco{position:absolute;right:10px;top:4px;font-size:64px;opacity:.35;pointer-events:none}
.shelfsec[data-home="castle"]{background:linear-gradient(160deg,#e9e4ff,#c9bfff)}
.shelfsec[data-home="station"]{background:linear-gradient(160deg,#2b3170,#151b3d);color:#f4f2ff}
.shelfsec[data-home="station"] .slot{background:#3b428f;color:#f4f2ff} .shelfsec[data-home="station"] .cnt,.shelfsec[data-home="station"] h3 small{color:#c3bff0}
.shelfsec[data-home="island"]{background:linear-gradient(160deg,#c9f0ff,#ffe9a8)}
.shelfsec[data-home="candy"]{background:linear-gradient(160deg,#ffd6f5,#c9fff3)}
.shelfsec[data-home="volcano"]{background:linear-gradient(160deg,#ffd9c9,#ff8a5a)}
/* stickers */
.stickers{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.sticker{aspect-ratio:1;border-radius:16px;background:var(--panel-2);display:grid;place-items:center;font-size:34px;box-shadow:0 4px 0 var(--sc)}
.sticker.off{filter:grayscale(1);opacity:.3}
.giftbig{font-size:72px;line-height:1.1}
/* practice cards */
.acard.practice .ico{font-size:36px}
/* flash cards */
.boxes{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.boxes .chip{font-size:15px}
.flash{width:min(420px,90vw);height:220px;position:relative;perspective:1000px;cursor:pointer}
.flash .front,.flash .back{position:absolute;inset:0;border-radius:var(--r);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:64px;backface-visibility:hidden;transition:transform .5s cubic-bezier(.3,1.3,.5,1);box-shadow:0 10px 0 var(--sc)}
.flash .front{background:var(--panel-2)}
.flash .back{background:var(--mint);color:#1a2a22;transform:rotateY(180deg)}
.flash.flipped .front{transform:rotateY(180deg)} .flash.flipped .back{transform:rotateY(360deg)}
/* fact lab */
.heatwrap{overflow-x:auto;margin-top:10px}
.heat{display:grid;grid-template-columns:34px repeat(12,1fr);gap:4px;min-width:520px}
.heat .h{font-family:var(--display);font-weight:700;font-size:14px;color:var(--ink-soft);display:grid;place-items:center}
.heat .f{font-family:var(--display);font-weight:700;font-size:15px;min-height:34px;border-radius:9px;background:var(--panel-3);color:var(--ink)}
.heat .f.l1{background:#ffd6d6} .heat .f.l2{background:#fff3a8} .heat .f.l3{background:#c9ffd9}
.heat .f:active{transform:scale(.92)}
.lg{font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;background:var(--panel-3)} .lg.l1{background:#ffd6d6} .lg.l2{background:#fff3a8} .lg.l3{background:#c9ffd9}
.ways{display:flex;flex-direction:column;gap:12px}
.way{background:var(--panel-2);border-radius:18px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.way h4{margin:0;font-family:var(--display);font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px}
.way h4 button{margin-left:auto;font-size:20px;background:var(--cloud);border-radius:12px;padding:4px 10px;box-shadow:0 3px 0 var(--sc)}
.way .big{font-family:var(--display);font-weight:700;font-size:32px;font-variant-numeric:tabular-nums}
.dots{display:grid;gap:4px;max-width:420px}
.dots i{display:block;aspect-ratio:1;border-radius:50%;background:var(--grape)}
.skipline{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--display);font-weight:700;font-size:20px}
.skipline span{background:var(--cloud);padding:4px 10px;border-radius:10px} .skipline span.hi{background:var(--sun);color:#2b2350}

.tierh{width:100%;font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink-soft);margin:6px 0 -2px;text-align:center}
/* silly squad physics */
.squishy.silly-jiggle{animation:jiggle 1.1s ease-in-out infinite}
@keyframes jiggle{0%,100%{transform:scale(1,1) rotate(0)}25%{transform:scale(1.06,.94) rotate(-2deg)}50%{transform:scale(.95,1.05) rotate(2deg)}75%{transform:scale(1.04,.96) rotate(-1deg)}}
.squishy.fx-jiggle{animation:bigjiggle .9s ease-in-out}
@keyframes bigjiggle{0%,100%{transform:scale(1,1)}15%{transform:scale(1.25,.8) rotate(-6deg)}30%{transform:scale(.85,1.2) rotate(6deg)}45%{transform:scale(1.15,.9) rotate(-4deg)}60%{transform:scale(.92,1.08) rotate(4deg)}80%{transform:scale(1.05,.97)}}
.squishy.fx-drip{animation:drip 1s ease-in-out}
@keyframes drip{0%{transform:scale(1,1)}40%{transform:scale(.9,1.3) translateY(10px)}70%{transform:scale(1.2,.7) translateY(20px)}100%{transform:scale(1,1)}}
.squishy.fx-melt{animation:melt 1.6s ease-in-out}
@keyframes melt{0%{transform:scale(1,1)}35%{transform:scale(1.5,.12) translateY(40px);border-radius:50%}55%{transform:scale(1.5,.12) translateY(40px)}85%{transform:scale(.9,1.15)}100%{transform:scale(1,1)}}
.squishy.fx-slide{animation:slide .9s cubic-bezier(.3,1.4,.5,1)}
@keyframes slide{0%{transform:translateX(0) skewX(0)}35%{transform:translateX(70px) skewX(-18deg)}70%{transform:translateX(-30px) skewX(10deg)}100%{transform:translateX(0)}}
.squishy.fx-stretch{animation:stretch 1.6s ease-in-out}
@keyframes stretch{0%{transform:scale(1,1)}45%{transform:scale(.8,1.6) translateY(-30px)}70%{transform:scale(1.25,.7)}100%{transform:scale(1,1)}}
.squishy.fx-flatten{animation:flatten .9s cubic-bezier(.3,1.6,.5,1)}
@keyframes flatten{0%{transform:scale(1,1)}30%{transform:scale(1.6,.18)}55%{transform:scale(1.6,.18)}75%{transform:scale(.85,1.3)}100%{transform:scale(1,1)}}
.squishy.fx-runny{animation:runny 1s ease-in-out}
@keyframes runny{0%,100%{transform:skewX(0) translateX(0)}20%{transform:skewX(-20deg) translateX(-12px) scaleY(.9)}40%{transform:skewX(18deg) translateX(14px) scaleY(1.05)}60%{transform:skewX(-12deg) translateX(-8px)}80%{transform:skewX(8deg) translateX(6px)}}
.squishy.fx-sponge{animation:sponge 1s ease-in-out}
@keyframes sponge{0%{transform:scale(1)}40%{transform:scale(1.35)}55%{transform:scale(.6,.8)}75%{transform:scale(1.15,1.05)}100%{transform:scale(1)}}
.squishy.fx-bounce{animation:gbounce 1s cubic-bezier(.3,1.4,.5,1)}
@keyframes gbounce{0%{transform:translateY(0)}20%{transform:translateY(-90px) scale(.9,1.15)}38%{transform:translateY(0) scale(1.2,.8)}52%{transform:translateY(-50px) scale(.95,1.08)}66%{transform:translateY(0) scale(1.1,.9)}80%{transform:translateY(-20px)}100%{transform:translateY(0)}}
.squishy.fx-spin{animation:pspin 1s cubic-bezier(.3,1.2,.5,1)}
@keyframes pspin{to{transform:rotate(720deg)}}
.squishy.fx-slowmo{animation:squish 1.8s cubic-bezier(.3,1.5,.5,1)}
body.slowmo *{animation-duration:2.4s !important;transition-duration:1.2s !important}
.squishy.fx-pop{animation:popaway 1s ease-in-out}
@keyframes popaway{0%{transform:scale(1);opacity:1}30%{transform:scale(1.3);opacity:1}45%{transform:scale(.1);opacity:.2}65%{transform:scale(.1);opacity:.2}85%{transform:scale(1.15);opacity:1}100%{transform:scale(1)}}

/* === home === */
/* section headers */
.hsec{display:flex;flex-direction:column;gap:12px;scroll-margin-top:72px}
.hsec-head{display:flex;align-items:center;gap:12px}
.hsec-head .hico{font-size:34px;line-height:1;width:52px;height:52px;display:grid;place-items:center;background:var(--cloud);border-radius:16px;box-shadow:0 4px 0 var(--sc)}
.hsec-txt{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.hsec-head h3{font-family:var(--display);font-weight:700;font-size:26px;margin:0;line-height:1.05}
.hsec-head .hsub{margin:0;font-size:15px;font-weight:800;color:var(--ink-soft);line-height:1.2}
.hsec-head small{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink-soft);white-space:nowrap;background:var(--cloud);padding:6px 12px;border-radius:999px;box-shadow:0 3px 0 var(--sc)}
.hsec.today{background:linear-gradient(135deg,#fff8d6,#ffe9a8);border-radius:var(--r);padding:16px 18px 18px;box-shadow:var(--shadow);color:#2b2350}
.hsec.today .hsec-head .hico,.hsec.today .hsec-head small{background:#fff}
.hsec.today .hsub{color:#5d5580}
.hsec.calm{background:color-mix(in srgb,var(--cloud) 55%,transparent);border-radius:var(--r);padding:14px 16px 16px}
.hsec.calm .hsec-head .hico{background:var(--panel-2);box-shadow:none}
.hsec.calm .hsec-head h3{font-size:23px}
/* lands: one horizontal row */
.worlds{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:6px 4px 14px;margin:0 -4px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.worlds::-webkit-scrollbar{height:6px}.worlds::-webkit-scrollbar-thumb{background:var(--muted);border-radius:999px}
.world{flex:0 0 150px;scroll-snap-align:center;min-height:150px;position:relative;gap:4px;border-width:4px}
@media (min-width:1000px){.worlds{display:grid;grid-template-columns:repeat(6,1fr);overflow:visible;padding:6px 0 18px;margin:0}.world{flex:initial}}
.world.on{border-color:var(--gum);transform:none;box-shadow:0 6px 0 var(--gum-deep)}
.world.on::after{content:"";position:absolute;left:50%;bottom:-19px;transform:translateX(-50%);border:11px solid transparent;border-top:12px solid var(--gum);border-bottom:0}
.world.locked{opacity:.75}
.world .wprog{width:100%;height:8px;border-radius:999px;background:var(--panel-3);overflow:hidden;margin-top:4px}
.world .wprog i{display:block;height:100%;background:linear-gradient(90deg,var(--mint),var(--sun));border-radius:999px}
.world .wprog.lock i{background:var(--muted)}
.world .wcount{font-size:12px;font-weight:800;color:var(--ink-soft)}
/* the selected land's card, nested under the row */
.landcard{background:var(--cloud);border-radius:var(--r);box-shadow:var(--shadow);border-top:6px solid var(--gum);padding:16px 16px 18px;display:flex;flex-direction:column;gap:14px}
.landcard.swap{animation:landswap .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes landswap{0%{opacity:0;transform:translateY(-10px) scale(.98)}100%{opacity:1;transform:none}}
.landhead{display:flex;align-items:center;gap:12px}
.landhead .ico{font-size:40px;line-height:1}
.landtxt{display:flex;flex-direction:column;gap:2px;min-width:0}
.landhead h4{font-family:var(--display);font-weight:700;font-size:24px;margin:0;line-height:1.05}
.landhead p{margin:0;font-size:15px;font-weight:800;color:var(--ink-soft);line-height:1.25}
.landcard .levels{gap:12px}
.landcard .level{min-height:120px;box-shadow:0 8px 0 var(--sc)}
.landcard .stat{font-size:14px}
/* practice cards: smaller, wrap in a row */
.practice-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.practice-grid .acard{background:var(--cloud);padding:10px 12px;box-shadow:0 4px 0 var(--sc)}
.practice-grid .acard .ico{font-size:32px}
.practice-grid .acard .t{font-size:17px}
.practice-grid .acard .d{font-size:13px}
/* collection & shop entry tile */
.collect-tile{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;text-align:left;background:linear-gradient(135deg,var(--cloud),var(--panel-2));border-radius:var(--r);padding:16px 20px;box-shadow:0 9px 0 var(--sc2);transition:transform .08s,box-shadow .08s;color:var(--ink)}
.collect-tile:active{transform:translateY(6px);box-shadow:0 3px 0 var(--sc2)}
.ct-friends{display:flex;flex-direction:column;align-items:center;line-height:1}
.ct-big{font-family:var(--display);font-weight:700;font-size:44px;color:var(--grape)}
body[data-world="space"] .ct-big{color:#ffd23f}
.ct-small{font-size:13px;font-weight:800;color:var(--ink-soft)}
.ct-mid{display:flex;flex-direction:column;gap:2px;min-width:0}
.ct-line{font-family:var(--display);font-weight:600;font-size:19px}
.ct-sub{font-family:var(--body);font-size:14px;font-weight:800;color:var(--ink-soft)}
.newdot{display:inline-block;background:var(--gum);color:#fff;font-size:12px;font-weight:800;padding:2px 8px;border-radius:999px;margin-left:6px;animation:bounce 1.2s infinite;vertical-align:middle}
.ct-go{font-family:var(--display);font-weight:700;font-size:18px;background:var(--grape);color:#fff;padding:10px 16px;border-radius:16px;box-shadow:0 5px 0 var(--grape-deep);white-space:nowrap}
@media (max-width:520px){.collect-tile{grid-template-columns:auto 1fr}.ct-go{grid-column:1/-1;text-align:center}}
/* class box: collapsible */
.classbox{background:var(--cloud);border-radius:var(--r);box-shadow:var(--shadow);padding:0}
.classbox summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 18px;font-family:var(--display);font-weight:700;font-size:22px}
.classbox summary::-webkit-details-marker{display:none}
.classbox summary .ctitle{flex:1}
.classbox summary small{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink-soft)}
.classbox summary::after{content:"▾";font-size:22px;color:var(--ink-soft);transition:transform .2s}
.classbox[open] summary::after{transform:rotate(180deg)}
.classinner{display:flex;flex-direction:column;gap:14px;padding:0 14px 16px}
.classinner .panel{box-shadow:none;background:var(--panel-2);padding:14px 16px}
/* sticky jump pills */
.mininav{position:sticky;top:6px;z-index:5;display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.mininav button{font-family:var(--display);font-weight:600;font-size:15px;background:var(--cloud);color:var(--ink);padding:8px 14px;border-radius:999px;box-shadow:0 4px 0 var(--sc);min-height:40px}
.mininav button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sc)}
/* top bar: never wider than the screen (school mode has 7 controls) */
@media (max-width:900px){.iconbtn{width:48px;height:48px;font-size:21px;border-radius:15px}.coins,.points{height:48px;font-size:18px;padding:0 12px}.topbar{flex-wrap:wrap}.tools{flex-wrap:wrap;justify-content:flex-end;row-gap:6px}}
@media (max-width:480px){.iconbtn{width:44px;height:44px;font-size:19px}.coins,.points{height:44px;font-size:16px;padding:0 10px}.tools{gap:6px}}
/* === end home === */

/* === kpop === */
.kpopglow{box-shadow:0 14px 0 var(--sc),0 0 0 5px #ffffffaa,0 0 34px #ff9ad5aa, inset 0 -16px 0 rgba(0,0,0,.08), inset 0 10px 0 rgba(255,255,255,.4) !important}
.squishy .stick{position:absolute;right:-10px;top:-12px;font-size:34px;line-height:1;pointer-events:none;z-index:2;animation:stickwave 1s ease-in-out infinite alternate;filter:drop-shadow(0 3px 0 var(--sc))}
.mini .stick{font-size:22px;right:-8px;top:-8px}
@keyframes stickwave{from{transform:rotate(-18deg) translateY(0)}to{transform:rotate(18deg) translateY(-6px)}}
/* signature dances (tap) */
.squishy.kd-sway{animation:kdsway 1s ease-in-out 4}
@keyframes kdsway{0%,100%{transform:rotate(-10deg) translateX(-10px)}50%{transform:rotate(10deg) translateX(10px)}}
.squishy.kd-spin{animation:kdspin 2s cubic-bezier(.4,.1,.3,1) 2}
@keyframes kdspin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(360deg) scale(1.12)}100%{transform:rotate(720deg) scale(1)}}
.squishy.kd-wave{animation:kdwave 1s ease-in-out 4}
@keyframes kdwave{0%,100%{transform:skewX(0) translateY(0)}25%{transform:skewX(-12deg) translateY(-14px)}50%{transform:skewX(0) translateY(0)}75%{transform:skewX(12deg) translateY(-14px)}}
.squishy.kd-flip{animation:kdflip 2s cubic-bezier(.3,1.2,.5,1) 2}
@keyframes kdflip{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-70px) rotate(180deg)}60%{transform:translateY(0) rotate(360deg) scale(1.1,.9)}100%{transform:translateY(0) rotate(360deg)}}
.squishy.kd-jump{animation:kdjump .5s cubic-bezier(.3,1.4,.5,1) 8}
@keyframes kdjump{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-46px) scale(.94,1.1)}}
.squishy.kd-point{animation:kdpoint 1s ease-in-out 4}
@keyframes kdpoint{0%,100%{transform:rotate(-14deg) translateX(-14px) scale(1)}50%{transform:rotate(14deg) translateX(14px) scale(1.06)}}
.squishy.kd-heart{animation:kdheart 1s ease-in-out 4}
@keyframes kdheart{0%,100%{transform:scale(1)}30%{transform:scale(1.18) rotate(-6deg)}60%{transform:scale(.94) rotate(6deg)}}
/* idle sync dance on the stage */
.stage .kd-idle{animation-duration:1s;animation-iteration-count:infinite;animation-timing-function:ease-in-out}
.stage .kd-idle-sway{animation-name:kdsway}.stage .kd-idle-spin{animation-name:kdsway}.stage .kd-idle-wave{animation-name:kdwave}.stage .kd-idle-flip{animation-name:kdheart}
.stage .kd-idle-jump{animation-name:kdjump;animation-duration:.5s}.stage .kd-idle-point{animation-name:kdpoint}.stage .kd-idle-heart{animation-name:kdheart}
/* the round: choices pulse on the beat, ground pulses softly */
.choice.onbeat{animation:onbeat .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes onbeat{0%{transform:scale(1)}25%{transform:scale(1.06)}100%{transform:scale(1)}}
body.kpop-round{animation:kpopbg 2s ease-in-out infinite;background-image:none}
@keyframes kpopbg{0%,100%{background-color:#ffd6f5}50%{background-color:#e4dbff}}
body.kpop-round .qcard{box-shadow:0 10px 0 var(--sc),0 0 0 6px #ff9ad566}
/* light sticks & spotlight */
.sticks{position:fixed;inset:0;pointer-events:none;z-index:45;overflow:hidden}
.sticks span{position:absolute;bottom:-60px;animation:stickup 2.6s ease-out forwards;filter:drop-shadow(0 0 8px #fff)}
@keyframes stickup{0%{transform:translateY(0) rotate(-20deg);opacity:0}15%{opacity:1}100%{transform:translateY(-110vh) rotate(20deg);opacity:0}}
.spot{position:fixed;inset:0;pointer-events:none;z-index:44;background:radial-gradient(ellipse 22% 60% at 50% 0%,color-mix(in srgb,var(--kc) 55%,#fff) 0%,transparent 70%);animation:spotsweep 2.2s ease-in-out forwards;mix-blend-mode:screen}
@keyframes spotsweep{0%{transform:translateX(-45vw);opacity:0}20%{opacity:1}50%{transform:translateX(0)}80%{opacity:1}100%{transform:translateX(45vw);opacity:0}}
/* shelf section */
.kpopbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;background:var(--panel-2);border-radius:20px;padding:10px 14px}
.kpopmsg{font-weight:800;color:var(--ink-soft)}
.kpopmsg b{color:var(--ink)}
.kpop-mini{border-radius:50% 50% 45% 55% / 55% 55% 45% 45%}
.shelfsec.stage{background:linear-gradient(180deg,#2b2350 0%,#4a2c7a 60%,#2b2350 100%);border-radius:var(--r);padding:16px;position:relative;overflow:hidden;color:#fff}
.shelfsec.stage h3,.shelfsec.stage .kpopmsg,.shelfsec.stage .kpopmsg b,.shelfsec.stage .hint,.shelfsec.stage .photocards h4{color:#fff}
.shelfsec.stage h3 small{color:#e4dbff}
.shelfsec.stage .kpopbar{background:rgba(255,255,255,.12)}
.shelfsec.stage .slot{background:rgba(255,255,255,.12);box-shadow:0 10px 0 rgba(0,0,0,.3)}
.shelfsec.stage .slot .name,.shelfsec.stage .slot .cnt{color:#fff}
.shelfsec.stage::before,.shelfsec.stage::after{content:"";position:absolute;top:-40px;width:34%;height:120%;background:radial-gradient(ellipse at 50% 0%,#ffffff44 0%,transparent 65%);pointer-events:none;animation:spotswing 3s ease-in-out infinite alternate}
.shelfsec.stage::before{left:0}.shelfsec.stage::after{right:0;animation-delay:-1.5s}
@keyframes spotswing{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.shelfsec.encore{animation:encorebg 1s steps(1) infinite}
@keyframes encorebg{0%{box-shadow:0 0 0 6px #ff5c9a}25%{box-shadow:0 0 0 6px #ffd23f}50%{box-shadow:0 0 0 6px #4fe3b0}75%{box-shadow:0 0 0 6px #8f63ff}}
.photocards h4{font-family:var(--display);font-weight:700;font-size:20px;margin:6px 0 8px}
.photocards .cards{display:flex;gap:10px;flex-wrap:wrap}
.pcard{width:96px;border-radius:14px;background:linear-gradient(160deg,#fff 0%,var(--kc) 100%);color:#2b2350;padding:10px 6px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;box-shadow:0 5px 0 rgba(0,0,0,.25);transform:rotate(-3deg)}
.pcard:nth-child(even){transform:rotate(3deg)}
.pcard .pe{font-size:38px;line-height:1}
.pcard .pn{font-family:var(--display);font-weight:700;font-size:14px;text-align:center}
.pcard .pr{font-size:11px;font-weight:800;color:#5d5580;text-align:center;line-height:1.1}
/* home panel */
.kpop-panel{background:linear-gradient(135deg,var(--cloud) 0%,#ffe4f0 100%)}
.kpoprow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.kfaces{display:flex;gap:4px;flex-wrap:wrap}
.kfaces .kf{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:var(--panel-3);filter:grayscale(1) opacity(.4)}
.kfaces .kf.on{filter:none;background:linear-gradient(160deg,#fff,var(--kc));box-shadow:0 3px 0 var(--sc)}
.kpopnext{flex:1;min-width:180px}
.kpopnext .t{font-family:var(--display);font-weight:700;font-size:19px;line-height:1.15}
.kpopnext .d{font-size:14px;font-weight:800;color:var(--ink-soft)}
@media (prefers-reduced-motion:reduce){.stage .kd-idle,.shelfsec.stage::before,.shelfsec.stage::after,.squishy .stick{animation:none}}
/* === end kpop === */