/* 👁️ Alani's patch tracker. Playful, but the site's habits: tokens for light + dark, Tabler icons, solid cards. */
:root {
  --bg:#f6f1ff; --bg2:#fff4fa; --card:#ffffff; --ink:#22183a; --muted:#6c6387; --faint:#a59dbd;
  --line:rgba(76,29,149,.10); --line2:rgba(76,29,149,.18); --hover:rgba(76,29,149,.06);
  --shadow:0 1px 2px rgba(60,20,120,.05), 0 6px 18px -8px rgba(60,20,120,.18);
  --b1:#7c3aed; --b2:#db2777; --b-soft:#efe7ff; --b-ink:#5b21b6;
  --gold:#f5b301; --gold2:#ffd54a; --gold-ink:#7a4f00; --gold-soft:#fff5d6;
  --ok:#15803d; --no:#dc2626; --part:#f59e0b;
  --font:ui-rounded,"SF Pro Rounded","Nunito","Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,sans-serif;
}
@media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) {
  --bg:#110c1d; --bg2:#1a0f22; --card:#1c1530; --ink:#f4effe; --muted:#a99fc6; --faint:#6e6589;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16); --hover:rgba(255,255,255,.06);
  --shadow:0 1px 3px rgba(0,0,0,.5);
  --b1:#9b6bff; --b2:#f0569f; --b-soft:#2a1f47; --b-ink:#c9b2ff;
  --gold:#fbbf24; --gold2:#fde68a; --gold-ink:#fde68a; --gold-soft:#2f2612;
  --ok:#4ade80; --no:#f87171; --part:#fbbf24;
}}
:root[data-theme="dark"] {
  --bg:#110c1d; --bg2:#1a0f22; --card:#1c1530; --ink:#f4effe; --muted:#a99fc6; --faint:#6e6589;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.16); --hover:rgba(255,255,255,.06);
  --shadow:0 1px 3px rgba(0,0,0,.5);
  --b1:#9b6bff; --b2:#f0569f; --b-soft:#2a1f47; --b-ink:#c9b2ff;
  --gold:#fbbf24; --gold2:#fde68a; --gold-ink:#fde68a; --gold-soft:#2f2612;
  --ok:#4ade80; --no:#f87171; --part:#fbbf24;
}
* {box-sizing:border-box;}
html {-webkit-text-size-adjust:100%;}
body {margin:0;min-height:100vh;color:var(--ink);font-family:var(--font);letter-spacing:-.005em;
  background:radial-gradient(1200px 600px at 10% -10%,var(--bg2),transparent 60%),var(--bg);background-attachment:fixed;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;}
button, input, select {font:inherit;color:inherit;}
.ti {flex:none;vertical-align:-.14em;}
.wrap {max-width:760px;margin:0 auto;padding:max(14px,env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom));}
.card {background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:20px;margin:0 0 14px;}
h2 {font-size:1.12rem;margin:0 0 12px;display:flex;align-items:center;gap:8px;letter-spacing:-.015em;}
h2 .ti {color:var(--b1);}
.muted {color:var(--muted);}

/* ---------- top bar */
.top {display:flex;align-items:center;gap:12px;margin:4px 2px 16px;}
.mark {width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#fff;font-size:24px;flex:none;
  background:linear-gradient(135deg,var(--b1),var(--b2));box-shadow:0 4px 12px -4px rgba(124,58,237,.6);}
.top .t {font-weight:800;font-size:1.2rem;letter-spacing:-.02em;line-height:1.15;}
.top .d {color:var(--muted);font-size:.9rem;}
.icb {margin-left:auto;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--card);
  display:grid;place-items:center;color:var(--muted);cursor:pointer;font-size:19px;box-shadow:var(--shadow);}

/* ---------- today */
.hero {padding:22px 20px 20px;position:relative;overflow:hidden;}
.hero::before {content:"";position:absolute;inset:0 0 auto 0;height:5px;background:linear-gradient(90deg,var(--b1),var(--b2));}
.hi {font-size:clamp(1.7rem,6vw,2.3rem);font-weight:850;letter-spacing:-.03em;line-height:1.1;}
.msg {color:var(--muted);font-size:1.05rem;margin:6px 0 18px;min-height:1.4em;}
.msg b {color:var(--ink);}
.hours {display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;}
.hb {position:relative;aspect-ratio:1/1;max-height:150px;border-radius:22px;border:2.5px dashed var(--line2);background:var(--b-soft);
  cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:6px;
  color:var(--b-ink);transition:transform .15s ease, background .2s ease, border-color .2s ease;touch-action:manipulation;}
.hb .ic {font-size:clamp(1.6rem,7vw,2.4rem);line-height:1;}
.hb .l {font-weight:750;font-size:clamp(.82rem,3vw,1rem);}
.hb .v {font-size:.78rem;opacity:.75;font-weight:600;}
.hb:active {transform:scale(.95);}
.hb.on {border:2.5px solid transparent;color:#fff;background:linear-gradient(140deg,var(--b1),var(--b2));
  box-shadow:0 8px 18px -8px rgba(219,39,119,.65);}
.hb.on .v {opacity:.9;}
.hb.pop {animation:pop .45s cubic-bezier(.3,1.6,.5,1);}
@keyframes pop {0% {transform:scale(.85);} 60% {transform:scale(1.08);} 100% {transform:scale(1);}}
.hb:focus-visible {outline:3px solid var(--b1);outline-offset:3px;}
.tbar {height:12px;border-radius:99px;background:var(--hover);margin:18px 0 8px;overflow:hidden;}
.tbar i {display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold2));
  transition:width .5s cubic-bezier(.3,1.2,.5,1);}
.tline {display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.92rem;}
.tline b {color:var(--ink);}
.done-banner {display:flex;align-items:center;gap:10px;margin-top:14px;padding:12px 14px;border-radius:16px;font-weight:700;
  background:var(--gold-soft);color:var(--gold-ink);}
.done-banner .ti {font-size:1.5rem;color:var(--gold);}

/* ---------- money jar */
.bank {display:grid;grid-template-columns:1fr auto;gap:6px 16px;align-items:center;}
.bank .lbl {font-weight:700;color:var(--muted);font-size:.95rem;display:flex;align-items:center;gap:6px;}
.bank .lbl .ti {color:var(--gold);font-size:1.2rem;}
.amt {font-size:clamp(2.6rem,12vw,3.8rem);font-weight:850;letter-spacing:-.04em;line-height:1;margin:6px 0 4px;
  font-variant-numeric:tabular-nums;color:var(--gold-ink);}
:root:not([data-theme="dark"]) .amt {background:linear-gradient(180deg,#e0a100,#b06d00);-webkit-background-clip:text;background-clip:text;color:transparent;}
@media (prefers-color-scheme:dark) {:root:not([data-theme="light"]) .amt {background:none;color:var(--gold);-webkit-text-fill-color:var(--gold);}}
.amt.bump {animation:bump .5s ease;}
@keyframes bump {40% {transform:scale(1.08);}}
.bank .sub {color:var(--muted);font-size:.9rem;}
.pile {grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px;margin:12px 0 2px;}
.coin {width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:900;color:#8a5a00;
  background:radial-gradient(circle at 35% 30%,#fff3b0,#ffd54a 45%,#e6a400);box-shadow:inset 0 -2px 0 rgba(138,90,0,.35), 0 1px 2px rgba(0,0,0,.15);}
.coin.part {background:conic-gradient(#ffd54a calc(var(--p)*1turn),var(--hover) 0);color:transparent;box-shadow:none;}
.coin.new {animation:drop .5s cubic-bezier(.3,1.4,.5,1) both;}
@keyframes drop {from {transform:translateY(-18px) scale(.6);opacity:0;}}
.pile .more {align-self:center;color:var(--muted);font-weight:700;font-size:.85rem;margin-left:4px;}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:7px;height:44px;padding:0 18px;border-radius:14px;cursor:pointer;
  border:1px solid var(--line2);background:var(--card);font-weight:700;}
.btn.primary {border:0;color:#fff;background:linear-gradient(135deg,var(--b1),var(--b2));box-shadow:0 6px 16px -8px rgba(124,58,237,.8);}
.btn.gold {border:0;color:#5a3a00;background:linear-gradient(135deg,#ffe27a,#f5b301);}
.btn.quiet {border-color:transparent;background:var(--hover);}
.btn.danger {color:var(--no);}
.btn:disabled {opacity:.45;cursor:default;}
.bank .btn {align-self:start;}

/* ---------- stat tiles */
.stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px;}
.stat {background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:14px 12px;text-align:center;}
.stat .ic {font-size:1.6rem;line-height:1;}
.stat .n {font-size:1.6rem;font-weight:850;letter-spacing:-.03em;margin-top:6px;font-variant-numeric:tabular-nums;}
.stat .k {color:var(--muted);font-size:.8rem;font-weight:650;}
.stat .s {color:var(--faint);font-size:.72rem;margin-top:2px;}
.ic.flame {color:#f97316;} .ic.star {color:var(--gold);} .ic.clock {color:var(--b1);} .ic.coins {color:#d99a00;}

/* ---------- sticker calendar */
.calh {display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.calh h2 {margin:0;}
.calh .nav {margin-left:auto;display:flex;gap:6px;}
.calh .nav button {width:38px;height:38px;border-radius:12px;border:1px solid var(--line);background:var(--card);cursor:pointer;
  display:grid;place-items:center;font-size:18px;}
.calh .nav button:disabled {opacity:.35;cursor:default;}
.wd, .grid {display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.wd span {text-align:center;font-size:.72rem;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.04em;}
.grid {margin-top:6px;}
.day {aspect-ratio:1/1;border-radius:14px;border:1px solid var(--line);background:none;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;cursor:pointer;padding:2px;position:relative;min-width:0;}
.day .num {font-size:.74rem;font-weight:700;color:var(--muted);}
.day .stk {font-size:clamp(1.05rem,4.6vw,1.55rem);line-height:1;}
.day.full {background:var(--gold-soft);border-color:transparent;}
.day.full .stk {color:var(--gold);filter:drop-shadow(0 1px 1px rgba(138,90,0,.25));}
.day.part .stk {color:var(--part);}
.day.none .stk {color:var(--faint);}
.day.today {outline:2.5px solid var(--b1);outline-offset:-1px;}
.day.blank {border:0;cursor:default;}
.day.future {cursor:default;opacity:.35;}
.halfstar {position:relative;display:inline-block;width:1em;height:1em;}
.halfstar > * {position:absolute;inset:0;}
.halfstar .f {clip-path:inset(0 calc(100% - var(--p)*100%) 0 0);color:var(--gold);}
.halfstar .o {color:var(--faint);}
.legend {display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:.82rem;}
.legend span {display:inline-flex;align-items:center;gap:5px;}

/* ---------- badges */
.badges {display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;}
.badge {border-radius:18px;padding:12px 6px 10px;text-align:center;border:1px solid var(--line);}
.badge .md {width:52px;height:52px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;font-size:1.6rem;
  background:var(--hover);color:var(--faint);}
.badge.got .md {color:#fff;background:linear-gradient(140deg,var(--gold2),var(--gold) 55%,#d98a00);box-shadow:0 6px 14px -6px rgba(217,138,0,.7);}
.badge.got.k-hours .md {background:linear-gradient(140deg,#c4a6ff,var(--b1) 55%,var(--b2));box-shadow:0 6px 14px -6px rgba(124,58,237,.7);}
.badge .n {font-weight:800;font-size:.92rem;}
.badge .k {font-size:.74rem;color:var(--muted);}
.badge:not(.got) .n {color:var(--muted);}

/* ---------- grown-ups */
details.grown > summary {list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-weight:750;font-size:1.05rem;}
details.grown > summary::-webkit-details-marker {display:none;}
details.grown > summary .ti {color:var(--muted);}
details.grown > summary .chev {margin-left:auto;transition:transform .2s ease;}
details.grown[open] > summary .chev {transform:rotate(90deg);}
.gsec {margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.gsec h3 {margin:0 0 10px;font-size:.98rem;display:flex;align-items:center;gap:8px;}
.gsec h3 .btn {margin-left:auto;height:36px;padding:0 12px;font-size:.88rem;}
.row {display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.93rem;}
.row:last-child {border-bottom:0;}
.row .grow {flex:1;min-width:0;}
.row .sm {color:var(--muted);font-size:.82rem;}
.row .amtc {font-weight:800;font-variant-numeric:tabular-nums;}
.row .x {width:34px;height:34px;border-radius:10px;border:0;background:none;color:var(--faint);cursor:pointer;display:grid;place-items:center;font-size:17px;}
.row .x:hover {color:var(--no);background:var(--hover);}
.pill {display:inline-block;padding:1px 8px;border-radius:99px;background:var(--b-soft);color:var(--b-ink);font-size:.75rem;font-weight:700;}
.form {display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;}
.form label {display:flex;flex-direction:column;gap:5px;font-size:.84rem;font-weight:650;color:var(--muted);min-width:0;}
.form .wide {grid-column:1/-1;}
input, select {height:44px;border-radius:12px;border:1px solid var(--line2);background:var(--bg);padding:0 12px;font-size:1rem;
  width:100%;min-width:0;-webkit-appearance:none;appearance:none;}
select {background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px,calc(100% - 13px) 19px;background-size:5px 5px;background-repeat:no-repeat;padding-right:30px;}
input:focus, select:focus {outline:2px solid var(--b1);outline-offset:0;border-color:transparent;}
.hint {color:var(--muted);font-size:.82rem;margin:8px 0 0;}
.actions {display:flex;gap:10px;justify-content:flex-end;margin-top:14px;flex-wrap:wrap;}

/* ---------- dialogs */
dialog {border:0;border-radius:26px;padding:22px;background:var(--card);color:var(--ink);width:min(460px,calc(100vw - 24px));
  box-shadow:0 30px 60px -20px rgba(30,10,60,.5);}
dialog::backdrop {background:rgba(20,10,40,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);}
dialog h2 {font-size:1.25rem;}
dialog .hours {margin-top:6px;}
dialog .hb {max-height:110px;border-radius:18px;}
.err {color:var(--no);font-weight:650;font-size:.9rem;margin-top:10px;min-height:1.2em;}

/* ---------- fun */
.fly {position:fixed;z-index:50;pointer-events:none;font-weight:900;color:var(--gold-ink);font-size:1.3rem;
  display:flex;align-items:center;gap:4px;animation:fly 1.1s cubic-bezier(.2,.7,.3,1) forwards;}
.fly .coin {width:28px;height:28px;}
@keyframes fly {0% {transform:translate(-50%,0) scale(.6);opacity:0;} 15% {opacity:1;transform:translate(-50%,-10px) scale(1.1);}
  100% {transform:translate(-50%,-90px) scale(1);opacity:0;}}
.confetti {position:fixed;top:-12px;z-index:60;pointer-events:none;width:10px;height:14px;border-radius:3px;
  animation:fall linear forwards;}
@keyframes fall {to {transform:translate(var(--dx),105vh) rotate(var(--r));}}
.toast {position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:70;
  background:var(--ink);color:var(--card);padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:var(--shadow);
  animation:toast 3s ease forwards;max-width:calc(100vw - 32px);}
@keyframes toast {0% {opacity:0;transform:translate(-50%,10px);} 10%,85% {opacity:1;transform:translate(-50%,0);} 100% {opacity:0;}}
@media (prefers-reduced-motion:reduce) {*, *::before, *::after {animation:none !important;transition:none !important;}}

/* ---------- password page */
.login {max-width:400px;margin:12vh auto 0;text-align:center;padding:30px 24px;}
.login-ic {width:64px;height:64px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;color:#fff;font-size:34px;
  background:linear-gradient(135deg,var(--b1),var(--b2));}
.login h1 {font-size:1.4rem;margin:0 0 6px;letter-spacing:-.02em;}
.login p {color:var(--muted);margin:0 0 18px;}
.login form {display:flex;flex-direction:column;gap:10px;}
.login button {height:48px;border:0;border-radius:14px;color:#fff;font-weight:750;cursor:pointer;font-size:1.05rem;
  background:linear-gradient(135deg,var(--b1),var(--b2));}
.login .login-err {color:var(--no);font-weight:650;margin:12px 0 0;}

/* ---------- phones */
@media (max-width:560px) {
  .card {padding:16px;border-radius:22px;}
  .hours {gap:8px;}
  .hb {border-radius:18px;}
  .stats {grid-template-columns:repeat(2,minmax(0,1fr));}
  .bank {grid-template-columns:1fr;}
  .bank .btn {justify-self:start;}
  .day {border-radius:10px;}
  .form {grid-template-columns:1fr;}
  .wd, .grid {gap:4px;}
}
.badge .md .ti {display:block;}
@media (min-width:561px) {.day {aspect-ratio:5/4;}}
dialog .actions {flex-wrap:nowrap;}
dialog .actions .btn {padding:0 14px;}
dialog .actions #dzero {margin-right:auto;}

/* ---------- two sides: header tools, tabs, requests */
.top .tools {margin-left:auto;display:flex;gap:8px;align-items:center;}
.top .tools .icb {margin-left:0;}
.icb.wide {width:auto;padding:0 12px;gap:6px;display:inline-flex;font-size:.88rem;font-weight:700;color:var(--b-ink);}
.icb.wide .ti {font-size:1.05rem;}
.tabs {display:flex;gap:6px;margin:0 0 14px;padding:5px;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);}
.tab {flex:1;display:flex;align-items:center;justify-content:center;gap:7px;height:44px;border-radius:13px;text-decoration:none;
  color:var(--muted);font-weight:750;font-size:1rem;position:relative;}
.tab .ti {font-size:1.2rem;}
.tab.on {color:#fff;background:linear-gradient(135deg,var(--b1),var(--b2));box-shadow:0 4px 12px -6px rgba(124,58,237,.8);}
.tab .dot {min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--no);color:#fff;font-size:.72rem;display:grid;place-items:center;}
.inbox {border:2px solid var(--b1);}
.req {display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap;}
.req:first-of-type {border-top:0;}
.req .grow {flex:1;min-width:180px;}
.req .sm, .row .sm {color:var(--muted);font-size:.82rem;}
.rbtn {display:flex;gap:8px;}
.askrow {display:flex;gap:10px;flex-wrap:wrap;}
.pill.wait {background:var(--gold-soft);color:var(--gold-ink);}
.pill.yes {background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok);}
.pill.nope {background:var(--hover);color:var(--muted);}
.pill {display:inline-flex;align-items:center;gap:4px;white-space:nowrap;}
textarea {width:100%;border-radius:12px;border:1px solid var(--line2);background:var(--bg);padding:10px 12px;font:inherit;font-size:1rem;color:inherit;resize:vertical;}
textarea:focus {outline:2px solid var(--b1);border-color:transparent;}

/* ---------- games */
.tip-patch {display:flex;align-items:center;gap:8px;justify-content:center;color:var(--muted);font-size:.88rem;margin:4px 0 14px;text-align:center;}
.tip-patch .ti {color:var(--b1);}
.ggrid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.gcard {display:flex;flex-direction:column;gap:6px;padding:20px 18px;border-radius:24px;text-decoration:none;color:#fff;min-height:170px;
  box-shadow:var(--shadow);transition:transform .15s ease;}
.gcard:active {transform:scale(.97);}
.gcard .gic {width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:30px;background:rgba(255,255,255,.22);}
.gcard .gname {font-size:1.3rem;font-weight:850;letter-spacing:-.02em;margin-top:auto;}
.gcard .gsub {font-size:.86rem;opacity:.9;line-height:1.3;}
.gcard.g-c4 {background:linear-gradient(140deg,#7c3aed,#4f46e5);}
.gcard.g-ttt {background:linear-gradient(140deg,#db2777,#f97316);}
.gcard.g-letters {background:linear-gradient(140deg,#0891b2,#10b981);}
.gcard.g-story {background:linear-gradient(140deg,#d97706,#e11d48);}
.gback {display:inline-flex;align-items:center;gap:4px;color:var(--b-ink);font-weight:750;text-decoration:none;margin:0 0 10px 2px;}
.game h2 {justify-content:flex-start;}
.center {text-align:center;justify-content:center;}
h2.center {justify-content:center;}
.actions.center {justify-content:center;}
.actions.spread {justify-content:space-between;}
.setup {display:flex;flex-wrap:wrap;gap:8px 14px;margin:0 0 12px;}
.chips {display:flex;gap:6px;flex-wrap:wrap;}
.chip {height:38px;padding:0 14px;border-radius:99px;border:1px solid var(--line2);background:var(--card);cursor:pointer;font-weight:700;
  display:inline-flex;align-items:center;gap:6px;color:var(--muted);}
.chip.on {border-color:transparent;color:#fff;background:linear-gradient(135deg,var(--b1),var(--b2));}
.score {display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;border-radius:16px;background:var(--hover);font-weight:700;}
.score .who {display:flex;align-items:center;gap:7px;min-width:0;}
.score b {font-size:1.3rem;}
.score .ties {color:var(--muted);font-size:.85rem;}
.tok {display:inline-block;width:16px;height:16px;border-radius:50%;flex:none;vertical-align:-.15em;box-shadow:inset 0 -2px 0 rgba(0,0,0,.18);}
.gstatus {text-align:center;font-weight:800;font-size:1.15rem;margin:14px 0 12px;min-height:1.6em;display:flex;align-items:center;justify-content:center;gap:8px;}
.gstatus .ti {color:var(--gold);font-size:1.3rem;}
/* connect four */
.c4wrap {display:flex;justify-content:center;}
.c4 {position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:clamp(4px,1.4vw,8px);padding:clamp(6px,2vw,12px);
  border-radius:22px;background:linear-gradient(180deg,#5b21b6,#4c1d95);width:min(100%,520px);box-shadow:0 10px 24px -12px rgba(76,29,149,.8);}
.c4cell {aspect-ratio:1/1;border-radius:50%;background:var(--bg);box-shadow:inset 0 3px 6px rgba(0,0,0,.25);position:relative;overflow:hidden;}
.disc {position:absolute;inset:6%;border-radius:50%;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.35);}
.disc.drop {animation:c4drop calc(.12s + var(--rows) * .06s) cubic-bezier(.5,0,1,1);}
@keyframes c4drop {from {transform:translateY(calc(var(--rows) * -118%));}}
.disc.win {animation:winpulse 1s ease-in-out infinite alternate;box-shadow:0 0 0 3px #fff, 0 0 14px 4px rgba(255,255,255,.7);}
@keyframes winpulse {to {transform:scale(.86);}}
.c4cols {position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr);}
.c4cols button {border:0;background:none;cursor:pointer;border-radius:14px;}
@media (hover:hover) {.c4cols button:hover {background:color-mix(in srgb,var(--turn) 22%,transparent);}}
/* tic-tac-toe */
.t3 {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,360px);margin:0 auto;}
.t3c {aspect-ratio:1/1;border-radius:22px;border:2px solid var(--line2);background:var(--b-soft);cursor:pointer;display:grid;place-items:center;
  font-size:clamp(3rem,16vw,5rem);padding:0;}
.t3c:disabled {cursor:default;}
.t3c.win {background:var(--gold-soft);border-color:var(--gold);}
.mk {display:grid;place-items:center;}
.mk .ti {stroke-width:3;}
.mk.x {color:#db2777;} .mk.o {color:#7c3aed;}
.t3c.new .mk {animation:pop .35s cubic-bezier(.3,1.6,.5,1);}
/* tiny letters */
.lhead {display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.hrt {font-size:1.5rem;color:var(--faint);} .hrt.on {color:#e11d48;}
.lscore {color:var(--muted);font-weight:700;}
.lcard {height:170px;display:grid;place-items:center;border-radius:20px;background:#fff;border:1px solid var(--line);overflow:hidden;}
.lword {color:#111;font-weight:700;letter-spacing:.02em;line-height:1;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;}
.lchoices {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.lch {height:62px;border-radius:16px;border:2px solid var(--line2);background:var(--card);font-size:1.35rem;font-weight:800;cursor:pointer;}
.lch.right {background:color-mix(in srgb,var(--ok) 18%,var(--card));border-color:var(--ok);}
.lch.wrong {background:color-mix(in srgb,var(--no) 14%,var(--card));border-color:var(--no);animation:shake .35s;}
@keyframes shake {25% {transform:translateX(-6px);} 75% {transform:translateX(6px);}}
.lmsg {text-align:center;font-weight:750;min-height:1.5em;margin-top:12px;color:var(--b-ink);}
.big {font-size:4rem;font-weight:900;letter-spacing:-.04em;color:var(--b1);line-height:1;}
.newbest {color:var(--gold-ink);font-weight:800;display:flex;gap:6px;align-items:center;justify-content:center;}
.newbest .ti {color:var(--gold);}
/* story time */
.slist {display:flex;flex-direction:column;gap:8px;}
.sitem {display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:0 16px;border-radius:16px;
  border:1px solid var(--line2);background:var(--card);font-size:1.05rem;font-weight:750;cursor:pointer;text-align:left;}
.sdone {color:var(--gold);font-size:1.3rem;}
.shead {display:flex;align-items:flex-start;gap:10px;}
.shead h2 {flex:1;}
.ssize {display:flex;gap:6px;}
.ssize .chip {padding:0 12px;}
.sdots {display:flex;gap:5px;margin:4px 0 6px;}
.sdots i {flex:1;height:6px;border-radius:99px;background:var(--hover);}
.sdots i.done {background:var(--b1);} .sdots i.on {background:var(--gold);}
.sline {min-height:7em;display:flex;align-items:center;line-height:1.4;font-weight:600;margin:16px 0;letter-spacing:.005em;overflow-wrap:anywhere;}
@media (max-width:560px) {
  .ggrid {gap:10px;}
  .gcard {min-height:150px;padding:16px 14px;}
  .gcard .gname {font-size:1.12rem;}
  .icb.wide span {display:none;}
  .icb.wide {width:40px;padding:0;justify-content:center;}
  .t3 {gap:8px;}
}

/* ---------- flashcards */
.gcard.g-math {background:linear-gradient(140deg,#2563eb,#7c3aed);}
.gcard.g-words {background:linear-gradient(140deg,#16a34a,#0d9488);}
.mlbl {font-weight:750;font-size:.9rem;color:var(--muted);margin:16px 0 8px;}
.opchip {min-width:56px;justify-content:center;font-size:1.35rem;height:48px;}
.btn.big {height:54px;padding:0 34px;font-size:1.15rem;}
.mtop {display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--muted);font-weight:700;}
.mtop > span {display:flex;align-items:center;gap:6px;}
.mright .ti {color:var(--gold);}
.fcard {margin:14px 0 8px;padding:22px 14px;border-radius:22px;background:var(--b-soft);display:flex;flex-direction:column;align-items:center;gap:10px;
  animation:cardin .3s ease;}
@keyframes cardin {from {transform:translateY(8px) scale(.98);opacity:.4;}}
.fcard.good {background:color-mix(in srgb,var(--ok) 18%,var(--card));animation:pop .4s ease;}
.fcard.bad {animation:shake .35s;}
.fcard.shown {background:var(--gold-soft);}
.prob {font-size:clamp(2.4rem,11vw,3.6rem);font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;text-align:center;}
.ans {min-width:3.2ch;padding:2px 14px;border-radius:16px;background:var(--card);border:2px solid var(--line2);font-size:clamp(2.2rem,10vw,3.2rem);
  font-weight:850;text-align:center;font-variant-numeric:tabular-nums;color:var(--b-ink);}
.ans.empty {color:var(--faint);}
.mmsg {text-align:center;font-weight:750;min-height:1.5em;color:var(--b-ink);margin-bottom:6px;}
.pad {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:360px;margin:0 auto;}
.pad button {height:clamp(54px,14vw,66px);border-radius:16px;border:1px solid var(--line2);background:var(--card);font-size:1.6rem;font-weight:800;
  cursor:pointer;display:grid;place-items:center;touch-action:manipulation;}
.pad button:active {transform:scale(.95);background:var(--hover);}
.pad button.ok {border:0;color:#fff;background:linear-gradient(135deg,var(--b1),var(--b2));}
.stars3 {display:flex;justify-content:center;gap:6px;font-size:2.6rem;color:var(--faint);margin:4px 0 8px;}
.stars3 .on {color:var(--gold);}
.missed {display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 6px;}
.missed span {padding:6px 12px;border-radius:12px;background:var(--hover);font-weight:650;font-size:1.05rem;}
.wcard {min-height:200px;justify-content:center;background:#fff;border:1px solid var(--line);}
.wword {color:#111;font-weight:750;line-height:1.1;text-align:center;overflow-wrap:anywhere;font-family:-apple-system,"Helvetica Neue",Arial,sans-serif;}
.wbtns {display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:6px;}
.wbtns .btn {height:58px;padding:0 8px;font-size:1rem;}
.btn.practice {background:var(--gold-soft);color:var(--gold-ink);border-color:transparent;}
.btn.gotit {border:0;color:#fff;background:linear-gradient(135deg,#16a34a,#0d9488);}
.wlv {align-items:center;}
.wlv > span:first-child {display:flex;flex-direction:column;gap:6px;flex:1;font-weight:600;}
.wbar {display:block;height:6px;border-radius:99px;background:var(--hover);overflow:hidden;width:100%;}
.wbar i {display:block;height:100%;background:linear-gradient(90deg,#16a34a,#0d9488);}
.wm {color:var(--muted);font-weight:700;font-size:.9rem;min-width:44px;text-align:right;}
.wm .ti {color:var(--gold);font-size:1.3rem;}
@media (max-width:560px) {.wbtns .btn {font-size:.92rem;gap:4px;}}

/* ---------- quiz tac toe */
.gcard.g-qttt {background:linear-gradient(140deg,#c026d3,#2563eb);}
details.qset {border:1px solid var(--line);border-radius:16px;padding:10px 14px;margin:0 0 12px;}
details.qset > summary {cursor:pointer;display:flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;list-style:none;}
details.qset > summary::-webkit-details-marker {display:none;}
details.qset > summary b {color:var(--ink);}
details.qset[open] > summary {margin-bottom:10px;}
.qpanel {border-radius:20px;padding:14px;margin:0 0 14px;background:var(--b-soft);display:flex;flex-direction:column;gap:8px;}
.qpanel.cpu, .qpanel.good, .qpanel.bad {flex-direction:row;align-items:center;justify-content:center;font-weight:750;font-size:1.05rem;text-align:center;}
.qpanel.good {background:color-mix(in srgb,var(--ok) 16%,var(--card));color:var(--ok);}
.qpanel.bad {background:color-mix(in srgb,var(--no) 12%,var(--card));color:var(--no);}
.qwho {font-weight:750;color:var(--b-ink);text-align:center;}
.qtext {font-size:clamp(2.2rem,10vw,3.2rem);font-weight:850;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:-.02em;}
.qpanel .fcard {margin:0;}
.t3.placing .t3c:not(:disabled) {border-color:var(--b1);border-style:dashed;animation:glow 1.2s ease-in-out infinite alternate;}
@keyframes glow {to {background:color-mix(in srgb,var(--b1) 16%,var(--b-soft));}}
.t3c:disabled:not(.win) {opacity:1;}

/* ---------- story maker card (the app itself lives at /stories: storybook/static/story.css) */
.gcard.wide {grid-column:1/-1;min-height:150px;position:relative;}
.gcard.g-write {background:linear-gradient(140deg,#f43f5e,#a855f7 55%,#6366f1);}
.gcard .idea {position:absolute;top:16px;right:16px;display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:99px;
  background:rgba(255,255,255,.95);color:#9d174d;font-weight:800;font-size:.82rem;}
.gcard .idea .ti {color:#f5b301;}
.grow {flex:1;}
a.btn {text-decoration:none;color:inherit;}
a.btn.primary {color:#fff;}
/* ---------- the games page: two groups (shared with /play) */
.ggroup {margin:0 0 22px;}
.gh {display:flex;align-items:center;gap:8px;font-size:1.25rem;margin:6px 2px 2px;}
.gh .ti {color:var(--gold);}
.ggroup:nth-of-type(2) .gh .ti {color:var(--b1);}
.gsubh {margin:0 2px 12px;}

/* ======================================================================== 🧩 Playroom (on top of patch/static/app.css) */
.mark.play {background:linear-gradient(135deg,#0ea5e9,#6366f1);text-decoration:none;}
.login-ic.play {background:linear-gradient(135deg,#0ea5e9,#6366f1);}