/* Shared look for every game: theme tokens, page shell and the chunky candy controls.
   A theme only swaps tokens; games style themselves through these tokens. */
:root{
  --bg:#fbf4ff; --bg2:#e6f4ff; --bg3:#fff0f7;
  --card:#ffffff; --tint:#f6efff; --line:#e7dbff; --shadow:rgba(98,60,150,.14);
  --ink:#4a2f6b; --ink-soft:#7d67a3;
  --hot:#ff7eb6; --hot-deep:#d93f86; --hot-shade:#a82a63;
  --cool:#a98bff; --cool-deep:#7b55e8; --cool-shade:#5a37c0;
  --mint:#5fd4b4; --mint-soft:#dcfaf0; --mint-shade:#3aa98a;
  --sun:#ffc94d; --sun-deep:#e0a21a;
  --sky:#76c3ff; --sky-deep:#2b7fc4; --sky-shade:#1d5f96;
  --rb1:#ff6b8b; --rb2:#ffa45c; --rb3:#ffd84d; --rb4:#6fdc9a; --rb5:#5fb8ff; --rb6:#a685ff;
  --r1:#ffc2d3; --r2:#ffd9b8; --r3:#ffeea8; --r4:#c6f2d5; --r5:#c2e3ff; --r6:#dccfff;
  --display:"Fredoka","Nunito",ui-rounded,system-ui,sans-serif;
  --body:"Nunito",ui-rounded,system-ui,sans-serif;
  color-scheme:light;
}
:root[data-look="dino"]{
  --bg:#f2fbe9; --bg2:#e2f4ff; --bg3:#fff6e3;
  --tint:#eef8e4; --line:#d6ebc4; --shadow:rgba(60,100,40,.15);
  --ink:#2f4a2a; --ink-soft:#5f7d52;
  --hot:#ff9a3c; --hot-deep:#cf5f12; --hot-shade:#9c4409;
  --cool:#7ccf5a; --cool-deep:#3d8f26; --cool-shade:#2a6619;
  --rb1:#ff7a3c; --rb2:#ffb347; --rb3:#ffd84d; --rb4:#8fd16a; --rb5:#4fc3a1; --rb6:#5fb8ff;
  --r1:#ffd2b8; --r2:#ffe2b0; --r3:#fff0a8; --r4:#d4f2c0; --r5:#c4efe2; --r6:#c8e6ff;
}
:root[data-look="clown"]{
  --bg:#fff5f3; --bg2:#e8f3ff; --bg3:#fffbe3;
  --tint:#fff0ea; --line:#ffd9cf; --shadow:rgba(42,52,102,.14);
  --ink:#2a3466; --ink-soft:#5a6494;
  --hot:#ff5a5f; --hot-deep:#d62f3c; --hot-shade:#9e1f2a;
  --cool:#4a9dff; --cool-deep:#2563c9; --cool-shade:#17418a;
  --rb1:#ff5a5f; --rb2:#ff8a3c; --rb3:#ffd84d; --rb4:#6fdc9a; --rb5:#4a9dff; --rb6:#a685ff;
  --r1:#ffc9cb; --r2:#ffd9bd; --r3:#fff0a8; --r4:#c9f2dc; --r5:#c6e0ff; --r6:#ddd0ff;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0; font-family:var(--body); font-weight:700; color:var(--ink);
  background:var(--bg) linear-gradient(180deg,var(--bg2) 0%,var(--bg) 50%,var(--bg3) 100%) fixed;
  -webkit-tap-highlight-color:transparent; overflow-x:hidden;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; overscroll-behavior:none;
}
button{font:inherit;color:inherit;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
button:focus-visible,a:focus-visible{outline:4px solid var(--sky);outline-offset:3px}
svg.i{width:1em;height:1em;flex:none}

.twinkles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.twinkles svg{position:absolute;color:var(--sun);opacity:.55;animation:twinkle 3s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.6);opacity:.25}}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

.app{position:relative;z-index:1;max-width:760px;margin:0 auto;padding-inline:16px;padding-block:14px 32px;min-height:100%;display:flex;flex-direction:column}
.screen{display:flex;flex-direction:column;gap:16px;flex:1}
.panel{background:var(--card);border-radius:28px;padding:16px;box-shadow:0 10px 30px var(--shadow)}

.bar{display:flex;align-items:center;gap:12px;min-height:56px;flex-wrap:wrap}
.bar h2{font-family:var(--display);font-weight:600;font-size:1.6rem;margin:0}
.round{width:56px;height:56px;border-radius:50%;border:0;background:var(--card);color:var(--cool-deep);display:grid;place-items:center;font-size:28px;box-shadow:0 5px 0 var(--line);flex:none;text-decoration:none}
.round:active{transform:translateY(3px);box-shadow:0 2px 0 var(--line)}
.spacer{flex:1}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.btn{
  --c:var(--hot-deep); --cs:var(--hot-shade); --fg:#fff;
  font-family:var(--display);font-weight:600;font-size:1.5rem;border:0;border-radius:24px;
  padding:14px 22px;background:var(--c);color:var(--fg);box-shadow:0 6px 0 var(--cs);text-decoration:none;
  transition:transform .08s;display:flex;align-items:center;justify-content:center;gap:12px;
}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--cs)}
.btn:disabled{opacity:.4;cursor:default;transform:none}
.btn.cool{--c:var(--cool-deep);--cs:var(--cool-shade)}
.btn.blue{--c:var(--sky-deep);--cs:var(--sky-shade)}
.btn.sun{--c:var(--sun);--cs:var(--sun-deep);--fg:var(--ink)}
.btn.soft{--c:var(--card);--cs:var(--line);--fg:var(--cool-deep);font-size:1.2rem;padding:10px 18px}

.pill{border:0;border-radius:999px;padding:9px 16px;background:var(--card);color:var(--ink);font-weight:800;box-shadow:0 4px 0 var(--line)}
.pill[aria-pressed="true"]{background:var(--hot);color:#fff;box-shadow:0 4px 0 var(--hot-deep)}

@keyframes pop{from{transform:scale(0)}}
@keyframes bob{50%{transform:translateY(-6%) rotate(-2deg)}}
@keyframes shake{20%,60%{transform:translateX(-10px)}40%,80%{transform:translateX(10px)}}

/* tablets: same layout, everything a size bigger */
@media (min-width:700px) and (min-height:640px){ .app{zoom:1.3} }

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}