/* Shared look for the "system" games: same tokens, title letters, chips, buttons and win card as the kids' games. */
:root{
  --bg:#E4F4EC; --dot:#CFEADB; --surface:#FFFFFF; --ink:#1D3A47; --ink-soft:#557280; --line:#C6DDD2; --lift:#1D3A47;
  --coral:#F45B48; --sun:#FFC83D; --leaf:#22A86B; --sky:#3E8EF0; --grape:#8E5BE8; --pink:#FF7EB6;
  --good:#22A86B; --good-soft:#D9F4E6; --bad:#F45B48; --bad-soft:#FFE1DB;
  --bubble:#FFF3C9; --chip:#FFFFFF; --chip-on:#1D3A47; --chip-on-ink:#FFFFFF; --scrim:rgba(29,58,71,.45);
  --font-display:"Fredoka","Baloo 2","Arial Rounded MT Bold",ui-rounded,system-ui,sans-serif;
  --font-body:"Nunito",ui-rounded,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#10252C; --dot:#163139; --surface:#183640; --ink:#EEF7F2; --ink-soft:#A3BEB5; --line:#2B4D57; --lift:#06161B;
    --coral:#F2604D; --sun:#FFD15C; --leaf:#3CCB8A; --sky:#6AAAF5; --grape:#A87DF2; --pink:#FF8DC0;
    --good:#3CCB8A; --good-soft:#1C4A3B; --bad:#F2604D; --bad-soft:#4A2622;
    --bubble:#3A3418; --chip:#183640; --chip-on:#FFD15C; --chip-on-ink:#13262D; --scrim:rgba(3,12,15,.65);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#10252C; --dot:#163139; --surface:#183640; --ink:#EEF7F2; --ink-soft:#A3BEB5; --line:#2B4D57; --lift:#06161B;
  --coral:#F2604D; --sun:#FFD15C; --leaf:#3CCB8A; --sky:#6AAAF5; --grape:#A87DF2; --pink:#FF8DC0;
  --good:#3CCB8A; --good-soft:#1C4A3B; --bad:#F2604D; --bad-soft:#4A2622;
  --bubble:#3A3418; --chip:#183640; --chip-on:#FFD15C; --chip-on-ink:#13262D; --scrim:rgba(3,12,15,.65);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
body{
  margin:0; background-color:var(--bg);
  background-image:radial-gradient(var(--dot) 2.5px, transparent 3px); background-size:28px 28px;
  color:var(--ink); font-family:var(--font-body); font-weight:700; font-size:16px;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px));
  padding-block:20px 44px;
}
button{font:inherit;color:inherit}
.app{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:16px}

.top{display:flex;flex-direction:column;align-items:center;gap:2px}
.name{margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.04em;font-family:var(--font-display);font-weight:700;font-size:clamp(46px, 13vw, 96px);line-height:1;letter-spacing:.02em}
.name span{display:inline-block;color:var(--c);-webkit-text-stroke:5px var(--lift);paint-order:stroke fill;text-shadow:0 6px 0 var(--lift);transform:rotate(var(--r));animation:k-drop .7s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--d)}
.name.cheer span{animation:k-hop .6s ease-in-out 3;animation-delay:var(--d)}
@keyframes k-drop{from{transform:translateY(-34px) rotate(var(--r))}to{transform:translateY(0) rotate(var(--r))}}
@keyframes k-hop{0%,100%{transform:translateY(0) rotate(var(--r))}50%{transform:translateY(-16px) rotate(calc(var(--r) * -1))}}
.sub{margin:6px 0 0;font-family:var(--font-display);font-weight:600;font-size:20px;color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;text-align:center}

.group{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}
.label{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);width:100%;text-align:center}
.chip{min-height:48px;padding:8px 16px;border-radius:999px;cursor:pointer;background:var(--chip);border:2px solid var(--line);box-shadow:0 4px 0 var(--line);font-family:var(--font-display);font-weight:600;font-size:17px;transition:transform .12s, box-shadow .12s;-webkit-tap-highlight-color:transparent}
.chip small{font-family:var(--font-body);font-size:13px;color:var(--ink-soft);margin-left:4px}
.chip:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.chip[aria-pressed="true"]{background:var(--chip-on);color:var(--chip-on-ink);border-color:var(--chip-on);box-shadow:0 4px 0 var(--lift)}
.chip[aria-pressed="true"] small{color:inherit;opacity:.8}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px}
.stat{background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:8px 4px;text-align:center}
.stat .k{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.stat .v{display:block;font-family:var(--font-display);font-weight:600;font-size:24px}

.msg{margin:0;text-align:center;background:var(--bubble);border-radius:18px;padding:12px 16px;font-size:18px;line-height:1.35;min-height:56px;display:flex;align-items:center;justify-content:center}

.dots{display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.dots i{width:16px;height:16px;border-radius:50%;border:2px solid var(--line);background:var(--surface)}
.dots i.ok{background:var(--good);border-color:var(--good)}
.dots i.meh{background:var(--sun);border-color:var(--sun)}
.dots i.now{border-color:var(--ink);transform:scale(1.2)}

.btn{min-height:48px;padding:10px 20px;border-radius:16px;cursor:pointer;background:var(--surface);border:2px solid var(--lift);box-shadow:0 5px 0 var(--lift);font-family:var(--font-display);font-weight:600;font-size:18px;transition:transform .12s, box-shadow .12s, background .15s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--lift)}
.btn.primary{background:var(--coral);color:#fff}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.right{background:var(--good);color:#fff}
.btn.wrong{background:var(--bad);color:#fff;animation:k-shake .35s ease}
.shake{animation:k-shake .35s ease}
@keyframes k-shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.answers{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.answers .btn{min-height:70px;font-size:32px;border-radius:20px}
.chip:focus-visible,.btn:focus-visible,button:focus-visible{outline:4px solid var(--sky);outline-offset:3px}

.actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.other{margin:0;text-align:center;color:var(--ink-soft);font-size:15px}
.other a{color:var(--ink);font-family:var(--font-display);font-weight:600;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:4px}
.card{background:var(--surface);border:3px solid var(--lift);border-radius:24px;box-shadow:0 6px 0 var(--lift);padding:16px}

.k-win{position:fixed;inset:0;background:var(--scrim);display:grid;place-items:center;padding:16px;z-index:40}
.k-win-card{background:var(--surface);border:3px solid var(--lift);border-radius:28px;box-shadow:0 8px 0 var(--lift);padding:24px 20px;max-width:400px;width:100%;text-align:center;animation:k-zoom .45s cubic-bezier(.3,1.5,.5,1) both}
@keyframes k-zoom{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.k-win .big{font-size:76px;line-height:1;display:block;animation:k-bob 1.2s ease-in-out infinite}
@keyframes k-bob{50%{transform:translateY(-8px) rotate(-5deg)}}
.k-win .stars{font-size:42px;letter-spacing:6px}
.k-win .stars .off{filter:grayscale(1);opacity:.3}
.k-win h2{margin:6px 0 4px;font-family:var(--font-display);font-weight:600;font-size:30px}
.k-win p{margin:0 0 10px;font-size:17px;color:var(--ink-soft);line-height:1.4}
.k-win .note{background:var(--bubble);border-radius:14px;padding:10px 12px;color:var(--ink)}
.k-win .rec{color:var(--good);font-family:var(--font-display);font-weight:600}
.k-win .acts{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
canvas.k-confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

@media (max-width:380px){ .stat .v{font-size:20px} .answers .btn{font-size:28px} }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition:none !important}
}