/* ── Themes ───────────────────────────────────────────────
   Default: "arcade" (dark, candy-neon, chunky). Others: data-theme="sorbet" (light) and "night" (original purple).
   Switch with ?theme=arcade|sorbet|night (remembered in localStorage). */
:root{
  color-scheme:dark;
  --bg:#0e1022; --bg2:#15183a; --card:#1d2048; --card2:#2b2f66;
  --pink:#ff4fa3; --yellow:#ffd23f; --cyan:#3de0ff; --green:#5af0a0; --red:#ff5468; --lime:#c6ff3d;
  --yellow-t:#ffd23f; --cyan-t:#3de0ff;
  --ink:#fff; --text:#f6f4ff; --muted:#a3a8dc;
  --on-accent:#140a2a;
  --edge:#05060f; --panel-line:#2d3170;
  --sticker:0 0 0 2px #323776,0 5px 0 #05060f;
  --sticker-on:0 0 0 3px var(--lime),0 6px 0 #05060f;
  --input-bg:#0a0b1c; --ok-bg:#134a36;
  --ff-bg:linear-gradient(160deg,#3d1d66,#6a2160);
  --award-bg:linear-gradient(160deg,#2b2f66,#3d1d66);
  --first-bg:linear-gradient(90deg,#6b5200,#3d2a8a);
  --gold-bg:linear-gradient(180deg,#ffe066,#f5a30a); --gold-ink:#3a2500;
  --mature-bg:linear-gradient(90deg,#ff4fa3,#9b4dff);
  --tone-red:#c4223c; --tone-green:#0f9d58;
  --code-c:var(--lime); --code-shadow:0 6px 0 #54700a,0 0 50px #c6ff3d44;
  --glow:0 0 0 3px #c6ff3d,0 0 40px #c6ff3d44;
  --board-shadow:0 8px 0 #05060f,0 0 0 4px #323776;
  --logo-grad:linear-gradient(90deg,#ff4fa3,#ffb02e 55%,#c6ff3d);
  --logo-fx:drop-shadow(0 4px 0 #05060f);
  --btn-edge:#9d1560; --btn-alt-edge:#05060f; --btn-yellow-edge:#8a5a00;
  --btn-glow:0 14px 30px #ff4fa355;
  --bg-glow1:#5b3bd64d; --bg-glow2:#ff4fa326;
  --dots:radial-gradient(#ffffff0d 1.5px,transparent 1.6px) 0 0/26px 26px;
  --font:"Fredoka","Avenir Next Rounded","Avenir Next","Nunito","Trebuchet MS",system-ui,sans-serif;
}
:root[data-theme="sorbet"]{
  color-scheme:light;
  --bg:#fff4e0; --bg2:#ffeccc; --card:#ffffff; --card2:#ffe3b0;
  --pink:#ff4f9a; --yellow:#ffc21a; --cyan:#13c4d6; --green:#27cf7b; --red:#ff4d57;
  --yellow-t:#a86a00; --cyan-t:#087c8c;
  --ink:#1d1038; --text:#1d1038; --muted:#6f5c93;
  --on-accent:#1d1038; --edge:#1d1038; --panel-line:#f0d6a4;
  --sticker:0 3px 0 #f0d6a4; --sticker-on:0 3px 0 #1d1038;
  --input-bg:#ffffff; --ok-bg:#c9f5dc;
  --ff-bg:linear-gradient(160deg,#ffd6ea,#ffe9b8);
  --award-bg:linear-gradient(160deg,#fff3c4,#ffe0ef);
  --first-bg:linear-gradient(90deg,#ffe08a,#ffc2e0);
  --gold-bg:linear-gradient(180deg,#ffd23f,#ffb000); --gold-ink:#3a2500;
  --mature-bg:linear-gradient(90deg,#ff4f9a,#ff8a3d);
  --tone-red:#e0243d; --tone-green:#12a65a;
  --code-c:var(--ink); --code-shadow:0 6px 0 var(--yellow);
  --glow:0 0 0 4px #ffc21a55; --board-shadow:0 8px 0 var(--edge);
  --logo-grad:linear-gradient(90deg,#ff3d8b,#ff8a1f); --logo-fx:none;
  --btn-edge:#a8195f; --btn-alt-edge:var(--edge); --btn-yellow-edge:#a86a00;
  --btn-glow:0 14px 26px #ff4f9a33;
  --bg-glow1:#ffd1e855; --bg-glow2:#ffd97a66; --dots:none;
}
:root[data-theme="night"]{
  color-scheme:dark;
  --bg:#150a28; --bg2:#22103f; --card:#2d1856; --card2:#3a2070;
  --pink:#ff3d9a; --yellow:#ffd23f; --cyan:#2de2e6; --green:#5cf29b; --red:#ff5a5f;
  --yellow-t:#ffd23f; --cyan-t:#2de2e6;
  --ink:#fff; --text:#fff; --muted:#b9a7e0;
  --on-accent:#2b1a00; --edge:#170a30; --panel-line:var(--card);
  --sticker:none; --sticker-on:none;
  --input-bg:#0f0620; --ok-bg:#1d5a3d;
  --ff-bg:linear-gradient(160deg,#4a1670,#7a1d6a);
  --award-bg:linear-gradient(160deg,#3a2070,#2d1856);
  --first-bg:linear-gradient(90deg,#8a5a00,#5b2a8f);
  --gold-bg:linear-gradient(180deg,#ffd23f,#c98f00); --gold-ink:#3a2500;
  --mature-bg:linear-gradient(90deg,#ff3d9a,#b100ff);
  --tone-red:#a30f27; --tone-green:#0f9a4e;
  --code-c:var(--yellow); --code-shadow:0 6px 0 #9a7000,0 20px 50px #ffd23f55;
  --glow:0 0 40px #ffd23f44; --board-shadow:0 10px 40px #0009;
  --logo-grad:linear-gradient(90deg,#ff3d9a,#ffd23f); --logo-fx:none;
  --btn-edge:#8f1252; --btn-alt-edge:#170a30; --btn-yellow-edge:#9a7000;
  --btn-glow:0 14px 30px #ff3d9a44;
  --bg-glow1:#5a1d8f55; --bg-glow2:#ff3d9a33; --dots:none;
  --font:"Avenir Next Rounded","Avenir Next","Nunito","Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:var(--font);}
body{background:var(--dots),radial-gradient(1200px 700px at 15% -10%,var(--bg-glow1),transparent),radial-gradient(900px 600px at 100% 110%,var(--bg-glow2),transparent),var(--bg);min-height:100vh;min-height:100dvh}
button{font:inherit;color:inherit;cursor:pointer;border:0}
h1,h2,h3{margin:0}
.logo{font-weight:900;letter-spacing:-.03em;background:var(--logo-grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;filter:var(--logo-fx)}
.btn{background:linear-gradient(180deg,var(--pink),#e8307f);color:var(--on-accent);border-radius:18px;padding:16px 26px;font-weight:900;font-size:1.1rem;box-shadow:0 6px 0 var(--btn-edge),var(--btn-glow);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--btn-edge)}
.btn[disabled]{opacity:.4;pointer-events:none}
.btn.alt{background:linear-gradient(180deg,var(--card2),var(--card));color:var(--text);box-shadow:0 6px 0 var(--btn-alt-edge)}
.btn.alt:active{box-shadow:0 2px 0 var(--btn-alt-edge)}
.btn.yellow{background:linear-gradient(180deg,var(--yellow),#f0a800);color:#2b1a00;box-shadow:0 6px 0 var(--btn-yellow-edge)}
.btn.small{padding:10px 16px;font-size:.95rem;border-radius:14px;box-shadow:0 4px 0 var(--btn-alt-edge)}
input,textarea{font:inherit;color:var(--text);background:var(--input-bg);border:3px solid var(--card2);border-radius:16px;padding:14px 16px;width:100%;outline:none}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.7}
input:focus,textarea:focus{border-color:var(--pink)}
textarea{resize:none}
.muted{color:var(--muted)}
.hidden{display:none!important}

/* Sticker look (arcade + sorbet): outlined, hard-edged cards. Night keeps its flat style. */
:is(.pill,.panel,.chip,.game,.cd,.li,.score,.step,.gchip,.aw,.opt,.jr,.wl,.szb,.toast,.install,.dot,.pack,.seg,.pod .blk,.ans,.ff){box-shadow:var(--sticker)}
:is(.game.on,.cd.hl,.li.hl,.pack.on,.opt.picked,.ff){box-shadow:var(--sticker-on)}
.timer,.tbar{background:var(--card2)}
.step .n,.opt.picked,.opt:active{color:var(--on-accent)}
:root:not([data-theme="night"]) .logo{letter-spacing:-.01em}
/* Playful motion (pointer devices only) */
@media (hover:hover){
  .game,.pack,.chip,.gchip{transition:transform .15s cubic-bezier(.3,1.6,.5,1),box-shadow .15s}
  .game:hover,.gchip:hover{transform:translateY(-4px) rotate(-.8deg)}
  .pack:hover,.chip:hover{transform:translateY(-2px) rotate(.8deg)}
  .btn:not([disabled]):hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@keyframes pop{0%{transform:scale(.7);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes wob{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}