/* Layout: playground lobby — a grid of game "doors", each game page is one centered play area under a slim top bar */
:root{
  --bg:#eef5f9; --paper:#ffffff; --ink:#17324a; --muted:#5a7186; --line:#cfdde8;
  --sky:#2b7fd9; --sun:#ffc23d; --leaf:#2eaa6a; --berry:#e2507a; --grape:#7a5cd6; --orange:#f07f2c; --teal:#12897f; --plum:#a8418a;
  --ok:#1f9d55; --no:#d64545;
  --display:"Fredoka","Noto Sans TC",system-ui,sans-serif;
  --body:"Noto Sans TC",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0f1a24; --paper:#182634; --ink:#e8f1f8; --muted:#9db2c4; --line:#2a3d50;
  --sky:#6aaeff; --sun:#ffd166; --leaf:#5fd497; --berry:#ff7fa1; --grape:#a891ff; --orange:#ffa262; --teal:#3cc8b8; --plum:#e58ac8;
  --ok:#4cc584; --no:#ff7a7a; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1a24; --paper:#182634; --ink:#e8f1f8; --muted:#9db2c4; --line:#2a3d50;
  --sky:#6aaeff; --sun:#ffd166; --leaf:#5fd497; --berry:#ff7fa1; --grape:#a891ff; --orange:#ffa262; --teal:#3cc8b8; --plum:#e58ac8;
  --ok:#4cc584; --no:#ff7a7a; color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;padding-inline:16px;padding-block:0 48px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.2;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
button{font:inherit;color:var(--ink);cursor:pointer;border-radius:14px;border:2px solid var(--line);background:var(--paper);padding:10px 16px}
button:hover{border-color:var(--sky)}
button:focus-visible,a:focus-visible,.cardbtn:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
button.go{background:var(--sky);border-color:var(--sky);color:var(--paper);font-family:var(--display);font-size:18px}
.muted{color:var(--muted)}
.wrap{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:24px}

/* top bar on game pages */
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);display:flex;align-items:center;gap:12px;padding-block:14px;border-bottom:2px solid var(--line)}
.bar a.back{text-decoration:none;font-weight:700;border:2px solid var(--line);border-radius:12px;padding:6px 12px;background:var(--paper);white-space:nowrap}
.bar h1{font-size:22px;flex:1;min-width:0}
.pill{font-family:var(--display);font-variant-numeric:tabular-nums;background:var(--paper);border:2px solid var(--line);border-radius:999px;padding:4px 12px;white-space:nowrap}
.play{max-width:560px;margin:24px auto 0;display:flex;flex-direction:column;gap:18px;align-items:stretch}
.howto{font-size:15px;color:var(--muted);text-align:center}
.big{font-size:72px;line-height:1;text-align:center}
.en{font-family:var(--display);letter-spacing:.02em}
.row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.toast{text-align:center;font-family:var(--display);font-size:20px;min-height:32px}
.toast.ok{color:var(--ok)} .toast.no{color:var(--no)}
@media (prefers-reduced-motion:no-preference){button{transition:transform .12s}button:active{transform:scale(.96)}}

/* surprise sticker popup (rewards.js): at the top, away from the answer feedback; taps go through it, so it never blocks answering.
   It stays in the page as a live region and is just empty (and invisible) between surprises. */
.surprise{position:fixed;left:50%;top:max(20px,env(safe-area-inset-top,0px));transform:translateX(-50%);z-index:20;pointer-events:none;width:max-content;max-width:calc(100vw - 32px);
  font-family:var(--display);font-size:18px;text-align:center;background:var(--paper);color:var(--ink);border:3px solid var(--sun);border-radius:18px;padding:10px 18px;box-shadow:0 6px 20px rgb(0 0 0 / .18)}
.surprise:empty{opacity:0}
@media (prefers-reduced-motion:no-preference){.surprise:not(:empty){animation:pop .35s ease-out}@keyframes pop{from{opacity:0;transform:translate(-50%,-12px)}}}