/* SmartBaby — playful kids theme. Big targets, rounded everything, bright & friendly.
   Shared by the landing + every game page. Mobile-first (kids play on phones/tablets). */
:root{
  --sky:#7cc6ff; --sky-2:#aee0ff;
  --sun:#ffd23f; --coral:#ff7a59; --grass:#46d39a; --grape:#9b6bff; --pink:#ff6fae;
  --ink:#2b2350; --ink-2:#5b5480; --white:#ffffff;
  --card:#ffffff; --shadow:0 10px 0 rgba(43,35,80,.12), 0 18px 40px -16px rgba(43,35,80,.45);
  --bg1:#7cc6ff; --bg2:#aee0ff; --bg3:#eaf7ff; --primary:#ff7a59; --primary-2:#ff6fae; --ring:rgba(43,35,80,.16);
  --radius:26px;
  --font:'Fredoka','Baloo 2',system-ui,'Segoe UI Rounded',-apple-system,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); color:var(--ink); min-height:100vh; min-height:100dvh;
  background:linear-gradient(180deg,var(--sky) 0%,var(--sky-2) 40%,#eaf7ff 100%);
  background-attachment:fixed; overflow-x:hidden;
  display:flex; flex-direction:column;
}
body > main{ flex:1 0 auto; }   /* push the footer to the bottom on short pages */
body > footer{ flex-shrink:0; }
img{max-width:100%}
button{font-family:inherit}

/* Top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(14px,4vw,32px)}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:clamp(22px,5vw,30px);color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.logo .blob{width:44px;height:44px;border-radius:50% 50% 50% 14px;background:linear-gradient(135deg,var(--sun),var(--coral));display:grid;place-items:center;font-size:24px;box-shadow:0 6px 0 rgba(43,35,80,.12)}
.logo b{color:var(--coral)}
.iconbtn{width:50px;height:50px;border-radius:18px;border:none;background:var(--white);box-shadow:0 6px 0 rgba(43,35,80,.12);font-size:24px;cursor:pointer;display:grid;place-items:center;transition:transform .12s}
.iconbtn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(43,35,80,.12)}
.bar-actions{display:flex;gap:10px}

/* Landing */
.wrap{max-width:960px;margin:0 auto;padding:0 clamp(14px,4vw,24px) 40px}
.hero{text-align:center;padding:8px 0 22px}
.hero h1{font-size:clamp(30px,8vw,56px);margin:.2em 0 .15em;line-height:1.05}
.hero p{font-size:clamp(16px,4vw,21px);color:var(--ink-2);margin:0 auto;max-width:30ch;font-weight:500}
.hero .mascots{font-size:clamp(40px,12vw,72px);margin-bottom:-6px;filter:drop-shadow(0 8px 0 rgba(43,35,80,.10))}

.games-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,4vw,22px);margin-top:14px}
@media(min-width:680px){.games-grid{grid-template-columns:repeat(3,1fr)}}
.game-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  text-decoration:none;color:var(--ink);background:var(--card);border-radius:var(--radius);padding:26px 16px 22px;
  box-shadow:var(--shadow);transition:transform .15s cubic-bezier(.2,.8,.2,1)}
.game-card:hover{transform:translateY(-6px) rotate(-1deg)}
.game-card:active{transform:translateY(2px)}
.game-card .emoji{font-size:clamp(46px,12vw,64px);line-height:1}
.game-card .name{font-weight:700;font-size:clamp(16px,4.4vw,20px);text-align:center}
.game-card .ribbon{position:absolute;top:12px;right:-2px;background:var(--grass);color:#fff;font-size:12px;font-weight:700;padding:4px 12px;border-radius:10px 0 0 10px;box-shadow:0 4px 0 rgba(43,35,80,.12)}
.game-card.c1{background:linear-gradient(160deg,#fff,#fff4d6)}
.game-card.c2{background:linear-gradient(160deg,#fff,#ffe3da)}
.game-card.c3{background:linear-gradient(160deg,#fff,#e3f8ee)}
.game-card.soon{opacity:.7;filter:saturate(.6)}

/* Funnel to Demha Future */
.funnel{margin-top:30px;background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:center;text-align:center}
.funnel p{margin:0;font-weight:600;color:var(--ink-2);font-size:16px}
.btn-fun{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--grape),var(--pink));color:#fff;
  text-decoration:none;font-weight:700;font-size:16px;padding:13px 22px;border-radius:16px;box-shadow:0 6px 0 rgba(43,35,80,.18);transition:transform .12s}
.btn-fun:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(43,35,80,.18)}

footer{text-align:center;padding:26px 16px 36px;color:var(--ink-2);font-weight:500;font-size:14px}
footer a{color:var(--ink);font-weight:700;text-decoration:none}

/* ---- Game shell ---- */
/* DEFINITE width (not max-width): body is a flex column, and `margin:0 auto` there shrinks a
   max-width box to its CONTENT — which is why games were a narrow ~280px column AND jumped/resized
   on every tap (content changed → width recomputed). A definite width is stable + fills the screen. */
.game{width:min(1100px,94vw);max-width:100%;margin:0 auto;padding:4px clamp(14px,4vw,24px) 40px;text-align:center}
.prompt{font-size:clamp(20px,5.5vw,30px);font-weight:700;margin:6px 0 16px;min-height:1.4em}
.prompt .big{font-size:clamp(40px,12vw,72px);display:block;line-height:1.1}
.stage{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(16px,5vw,30px);margin-bottom:18px}
.objects{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;font-size:clamp(34px,9vw,52px);min-height:90px}
.objects span{animation:pop .3s both}
.options{display:grid;gap:clamp(10px,3vw,16px)}
.options.cols3{grid-template-columns:repeat(3,1fr)}
.options.cols4{grid-template-columns:repeat(2,1fr)}
@media(min-width:520px){.options.cols4{grid-template-columns:repeat(4,1fr)}}
/* generic tile grid (Odd One Out etc.) — was undefined, so tiles stacked in a column */
.grid{display:grid;gap:clamp(10px,3vw,20px);justify-content:center;align-content:center;margin:0 auto;width:100%;max-width:820px}
.grid.g2{grid-template-columns:repeat(2,1fr)}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.opt{border:none;cursor:pointer;background:var(--white);border-radius:20px;box-shadow:0 7px 0 rgba(43,35,80,.14);
  font-size:clamp(30px,7vw,54px);font-weight:700;padding:18px 6px;color:var(--ink);transition:transform .1s;min-height:88px;display:grid;place-items:center}
.opt:active{transform:translateY(5px);box-shadow:0 2px 0 rgba(43,35,80,.14)}
.opt.num{background:linear-gradient(160deg,#fff,#fff4d6)}
.opt.right{background:var(--grass)!important;color:#fff;animation:cheer .4s}
.opt.wrong{background:var(--coral)!important;color:#fff;animation:shake .35s}
.opt.swatch{min-height:84px}
.controls{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:6px}
.bigbtn{border:none;cursor:pointer;font-weight:700;font-size:18px;padding:14px 26px;border-radius:18px;color:#fff;
  background:linear-gradient(135deg,var(--coral),var(--pink));box-shadow:0 6px 0 rgba(43,35,80,.18);transition:transform .12s}
.bigbtn.alt{background:linear-gradient(135deg,var(--sky),var(--grape))}
.bigbtn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(43,35,80,.18)}

/* progress stars */
.stars{font-size:26px;letter-spacing:4px;margin:2px 0 12px;min-height:30px}

/* memory grid */
.mem{display:grid;gap:clamp(8px,2.5vw,16px);justify-content:center;margin:0 auto;width:100%;max-width:min(700px,92%)}
.mem.g3{grid-template-columns:repeat(3,1fr)}
.mem.g4{grid-template-columns:repeat(4,1fr)}
.mcard{aspect-ratio:1;border:none;cursor:pointer;border-radius:18px;background:linear-gradient(160deg,var(--grape),var(--pink));
  box-shadow:0 6px 0 rgba(43,35,80,.18);font-size:clamp(28px,9vw,46px);display:grid;place-items:center;transition:transform .12s,background .2s;color:#fff}
.mcard.up{background:var(--white)}
.mcard.up .back{display:none}
.mcard:not(.up) .face{display:none}
.mcard .back{font-size:clamp(24px,7vw,38px)}
.mcard.done{visibility:hidden}
.mcard:active{transform:translateY(4px)}

/* win overlay */
.win{position:fixed;inset:0;display:none;place-items:center;background:rgba(43,35,80,.45);z-index:50;padding:20px}
.win.show{display:grid;animation:fade .25s}
.win .panel{background:#fff;border-radius:30px;padding:30px 26px;text-align:center;box-shadow:var(--shadow);max-width:340px;animation:pop .35s}
.win .panel .face{font-size:64px}
.win .panel h2{margin:8px 0 4px;font-size:30px}
.win .panel p{margin:0 0 18px;color:var(--ink-2);font-weight:600}

#confetti{position:fixed;inset:0;pointer-events:none;z-index:60}

@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes cheer{0%{transform:scale(1)}40%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===== Settings: color presets + day/night (gear panel) ===== */
html[data-accent="bubblegum"]{ --bg1:#ffabd1; --bg2:#ffd0e6; --bg3:#fff1f7; --primary:#ff4f9d; --primary-2:#ff86bf; }
html[data-accent="mint"]    { --bg1:#76ddb4; --bg2:#b3efd6; --bg3:#e9fbf3; --primary:#12b07a; --primary-2:#46d39a; }
html[data-accent="sunshine"]{ --bg1:#ffd25f; --bg2:#ffe7a0; --bg3:#fff8e1; --primary:#ff9a1c; --primary-2:#ffb84d; }
html[data-accent="grape"]   { --bg1:#b49bff; --bg2:#d2c3ff; --bg3:#f1ecff; --primary:#7b4cff; --primary-2:#b07bff; }

/* Night mode — soft dark indigo, kid-friendly (not harsh black) */
html[data-theme="dark"]{
  --bg1:#2c2658; --bg2:#211c45; --bg3:#15122e;
  --ink:#f3f1ff; --ink-2:#bdb6ea; --ink-3:#9089c4;
  --white:#322c60; --card:#322c60;
  --shadow:0 8px 0 rgba(0,0,0,.28), 0 18px 40px -16px rgba(0,0,0,.6);
  --ring:rgba(255,255,255,.10);
}
html[data-theme="dark"] .game-card.c1{ background:linear-gradient(160deg,#3a3470,#46406b); }
html[data-theme="dark"] .game-card.c2{ background:linear-gradient(160deg,#3a3470,#5b3f57); }
html[data-theme="dark"] .game-card.c3{ background:linear-gradient(160deg,#3a3470,#3f5b55); }
html[data-theme="dark"] .opt.num{ background:linear-gradient(160deg,#322c60,#3c3568); }
html[data-theme="dark"] .win .panel{ background:var(--card); }

/* themeable accents on key elements (re-declared after the originals so the theme wins) */
body{ background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 40%,var(--bg3) 100%); }
.logo .blob{ background:linear-gradient(135deg,var(--sun),var(--primary)); }
.btn-fun{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); }
.bigbtn{ background:linear-gradient(135deg,var(--primary),var(--primary-2)); }

/* gear settings panel */
.sb-panel{ position:fixed; top:74px; right:clamp(8px,3vw,28px); z-index:60; width:min(280px,92vw);
  background:var(--card); border-radius:24px; box-shadow:var(--shadow); padding:18px; display:none; }
.sb-panel.open{ display:block; animation:pop .2s; }
.sb-panel h4{ margin:0 0 9px; font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); }
.sb-panel h4:not(:first-child){ margin-top:16px; }
.sb-colors{ display:flex; gap:10px; flex-wrap:wrap; }
.sb-sw{ width:36px; height:36px; border-radius:50%; border:3px solid transparent; cursor:pointer; padding:0; box-shadow:0 3px 0 rgba(0,0,0,.12); }
.sb-sw.on{ border-color:var(--ink); }
.sb-seg{ display:flex; gap:8px; }
.sb-seg button{ flex:1; border:none; border-radius:14px; padding:11px 8px; font:inherit; font-size:14px; font-weight:700; cursor:pointer;
  background:var(--white); color:var(--ink); box-shadow:0 4px 0 rgba(0,0,0,.10); }
.sb-seg button.on{ background:var(--primary); color:#fff; }
.sb-seg button[disabled]{ opacity:.45; cursor:default; }

/* first-visit language prompt (asks, never auto-redirects) */
.sb-langprompt{ position:fixed; left:50%; bottom:16px; transform:translateX(-50%); z-index:70;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  background:var(--card); border-radius:18px; box-shadow:var(--shadow); padding:11px 15px; max-width:94vw; }
.sb-langprompt span{ font-weight:700; font-size:14px; color:var(--ink); }
.sb-langprompt button{ border:none; border-radius:12px; padding:9px 16px; font:inherit; font-weight:700; cursor:pointer;
  background:var(--white); color:var(--ink); box-shadow:0 3px 0 rgba(0,0,0,.10); }
.sb-langprompt button.prim{ background:var(--primary); color:#fff; }
.sb-langprompt .x{ background:transparent; box-shadow:none; padding:8px 10px; color:var(--ink-2); }
.sb-langprompt .go{ background:var(--primary); color:#fff; }

/* language dropdowns (settings panel + first-visit prompt) */
.sb-lang{ display:flex; align-items:center; gap:8px; font-weight:700; color:var(--ink); }
.sb-langsel, .sb-langsel2{ font:inherit; font-weight:700; font-size:14px; padding:9px 12px; border-radius:12px; border:none;
  background:var(--white); color:var(--ink); cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.10); }
.sb-lang .sb-langsel{ flex:1; }

/* crisper definition of the white surfaces — esp. in day mode they were blending into the bg */
.opt, .game-card, .stage, .iconbtn, .filecard, .funnel, .sb-panel, .mcard.up, .sb-langsel, .sb-langsel2{ border:2px solid var(--ring); }
.opt{ box-shadow:0 7px 0 rgba(43,35,80,.18); }

/* WCAG-safe button color: white text on a bright pastel fails 4.5:1, so solid CTAs use a deeper
   shade (--btn) per accent. Game cards / bg keep the bright pastels (--primary). */
:root{ --btn:#c84d28; }
html[data-accent="bubblegum"]{ --btn:#c52a6b; }
html[data-accent="mint"]    { --btn:#0c8055; }
html[data-accent="sunshine"]{ --btn:#a85f00; }
html[data-accent="grape"]   { --btn:#6438dd; }
.btn-fun, .bigbtn, .sb-langprompt .go, .sb-seg button.on{ background:var(--btn); }
.opt.right{ background:#0c8055 !important; }
.opt.wrong{ background:#cf3b22 !important; }

/* ===== portal: topbar nav, homepage sections, catalog, coming-soon ===== */
.topnav{ display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.topnav a{ font-weight:700; font-size:15px; color:var(--ink-2); text-decoration:none; padding:7px 12px; border-radius:12px; }
.topnav a:hover{ color:var(--ink); }
.topnav a.on{ color:#fff; background:var(--btn); }

.section{ margin-top:30px; }
.section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(22px,5vw,30px); margin:0; display:flex; align-items:center; gap:10px; }
.soon-tag{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#fff; background:var(--btn); padding:4px 10px; border-radius:999px; }
.see-all{ font-weight:700; color:var(--ink-2); text-decoration:none; white-space:nowrap; }
.see-all:hover{ color:var(--ink); }
.section-lead{ color:var(--ink-2); font-weight:500; margin:6px 0 14px; }

.catalog-head{ text-align:center; padding:8px 0 4px; }
.catalog-head h1{ font-size:clamp(28px,7vw,44px); margin:.1em 0; }
.catalog-head p{ color:var(--ink-2); font-weight:500; max-width:46ch; margin:0 auto 14px; }
.catalog-search{ width:min(420px,92%); box-sizing:border-box; font:inherit; font-size:16px; font-weight:600; padding:13px 18px; border-radius:16px; border:2px solid var(--ring); background:var(--white); color:var(--ink); box-shadow:var(--shadow); }
.catalog-search:focus{ outline:none; border-color:var(--primary); }
.no-results{ text-align:center; color:var(--ink-2); font-weight:600; margin-top:24px; }

.soon-box{ text-align:center; background:var(--card); border:2px solid var(--ring); border-radius:var(--radius); box-shadow:var(--shadow); padding:36px 24px; margin:18px auto 0; max-width:480px; }
.soon-emoji{ font-size:64px; }
.soon-box p{ color:var(--ink-2); font-weight:600; margin:8px 0 18px; }

/* coloring app */
.coloring-app{ max-width:560px; margin:14px auto 0; }
.color-picker{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-bottom:12px; }
.color-picker .pic{ width:64px; height:64px; padding:4px; border:2px solid var(--ring); border-radius:14px; background:#fff; cursor:pointer; box-shadow:0 3px 0 rgba(0,0,0,.1); }
.color-picker .pic.on{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); }
.color-picker .pic img{ width:100%; height:100%; object-fit:contain; }
.color-stage{ position:relative; width:min(92vw,460px); aspect-ratio:1; margin:0 auto; background:#fff; border-radius:18px; border:2px solid var(--ring); box-shadow:var(--shadow); overflow:hidden; touch-action:none; }
.color-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
#cLine{ pointer-events:none; }
.color-palette{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:14px 0 10px; }
.color-palette .swatch{ width:38px; height:38px; border-radius:50%; border:3px solid var(--ring); cursor:pointer; padding:0; box-shadow:0 3px 0 rgba(0,0,0,.12); }
.color-palette .swatch.on{ border-color:var(--ink); transform:scale(1.12); }
.color-tools{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.color-tools .tool{ border:2px solid var(--ring); background:var(--white); color:var(--ink); font:inherit; font-weight:700; font-size:14px; padding:9px 13px; border-radius:14px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.1); display:inline-flex; align-items:center; gap:6px; }
.color-tools .tool.on{ background:var(--btn); color:#fff; border-color:transparent; }

/* printables */
.printables{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
@media(min-width:560px){ .printables{ grid-template-columns:repeat(3,1fr); } }
.printable{ display:flex; flex-direction:column; align-items:center; gap:8px; text-decoration:none; color:var(--ink); background:var(--white); border:2px solid var(--ring); border-radius:18px; padding:12px; box-shadow:var(--shadow); }
.printable img{ width:100%; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:10px; }
.printable span{ font-weight:700; font-size:14px; }

/* coloring picture gallery (below the canvas) — small thumbnails, revealed 20 at a time */
.coloring-gallery{ max-width:900px; margin:28px auto 0; }
.cg-head{ text-align:center; font-weight:800; font-size:18px; margin:0 0 14px; color:var(--ink); }
.cg-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px; }
@media(min-width:560px){ .cg-grid{ grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); } }
.cg-card{ background:var(--white); border:2px solid var(--ring); border-radius:16px; padding:7px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; }
.cg-card.on{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); }
.cg-thumb{ width:100%; aspect-ratio:1; object-fit:contain; background:#fff; border-radius:10px; cursor:pointer; }
.cg-actions{ display:flex; gap:6px; }
.cg-actions .cg-btn{ flex:1; border:2px solid var(--ring); background:var(--white); color:var(--ink); font:inherit; font-size:16px; line-height:1; padding:7px 4px; border-radius:10px; cursor:pointer; text-decoration:none; text-align:center; display:inline-flex; align-items:center; justify-content:center; }
.cg-actions .cg-btn.primary{ background:var(--btn); border-color:transparent; }
.cg-more{ display:block; margin:20px auto 0; border:2px solid var(--ring); background:var(--white); color:var(--ink); font:inherit; font-weight:800; font-size:15px; padding:11px 24px; border-radius:16px; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.1); }
.cg-more[hidden]{ display:none; }

/* homepage coloring teaser strip */
.color-strip{ display:flex; gap:12px; overflow-x:auto; padding:4px 2px 8px; }
.color-card{ flex:0 0 auto; width:96px; height:96px; padding:8px; background:var(--white); border:2px solid var(--ring); border-radius:16px; box-shadow:var(--shadow); }
.color-card img{ width:100%; height:100%; object-fit:contain; background:#fff; border-radius:8px; }

/* videos — catalog filter chips + grid + cards */
.vid-filters{ display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 4px; }
.vid-chip{ font:inherit; font-weight:700; font-size:14px; border:2px solid var(--ring); background:var(--white); color:var(--ink-2); padding:8px 14px; border-radius:999px; cursor:pointer; transition:background .12s,color .12s; }
.vid-chip:hover{ color:var(--ink); }
.vid-chip.on{ background:var(--btn); color:#fff; border-color:transparent; }
.vid-sort{ display:flex; gap:16px; margin:8px 0 2px; }
.vid-sort-btn{ font:inherit; font-weight:700; font-size:14px; border:none; background:none; color:var(--ink-2); cursor:pointer; padding:4px 2px; border-bottom:2px solid transparent; }
.vid-sort-btn.on{ color:var(--ink); border-bottom-color:var(--btn); }
#vsentinel{ height:1px; }
.vid-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,4vw,20px); margin-top:14px; }
@media(min-width:680px){ .vid-grid{ grid-template-columns:repeat(3,1fr); } }
.vid-card{ display:block; text-decoration:none; color:var(--ink); background:var(--white); border:2px solid var(--ring); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); transition:transform .12s; }
.vid-card:hover{ transform:translateY(-3px); }
.vid-thumb{ position:relative; display:block; width:100%; padding:0; border:none; background:#000; cursor:pointer; aspect-ratio:16/9; }
.vid-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vid-play{ position:absolute; inset:0; margin:auto; width:54px; height:54px; display:flex; align-items:center; justify-content:center; font-size:20px; color:#fff; background:rgba(20,18,40,.55); border-radius:50%; transition:transform .12s, background .12s; pointer-events:none; }
.vid-card:hover .vid-play,.vid-mini:hover .vid-play,.vid-thumb:hover .vid-play{ background:var(--btn); transform:scale(1.08); }
.vid-frame{ width:100%; aspect-ratio:16/9; border:none; display:block; border-radius:18px; }
.vid-title{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-weight:700; font-size:15px; line-height:1.3; padding:10px 12px 12px; color:var(--ink); min-height:calc(1.3em * 3 + 22px); }
.vid-empty{ color:var(--ink-2); font-weight:600; padding:18px 0; }

/* single video page */
.crumbs{ margin:4px 0 14px; }
.crumbs a{ color:var(--ink-2); font-weight:700; text-decoration:none; }
.crumbs a:hover{ color:var(--ink); }
.video-layout{ display:grid; grid-template-columns:1fr; gap:26px; }
@media(min-width:900px){ .video-layout{ grid-template-columns:minmax(0,1fr) 320px; align-items:start; } }
.video-main h1{ font-size:clamp(20px,4.5vw,28px); margin:14px 0 8px; }
.vid-hero{ border-radius:20px; overflow:hidden; box-shadow:var(--shadow); border:2px solid var(--ring); }
.vid-hero .vid-thumb{ border-radius:0; }
.vid-hero .vid-frame{ border-radius:0; }
.vid-play-lg{ width:74px; height:74px; font-size:28px; }
.vid-cat{ display:inline-block; margin-top:12px; text-decoration:none; font-weight:700; font-size:14px; color:#fff; background:var(--btn); padding:5px 13px; border-radius:999px; }
.vid-channel{ display:flex; align-items:center; gap:8px; margin:14px 0 0; font-weight:700; color:var(--ink); }
.vid-channel img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.vid-ch-dot{ font-size:20px; }
.vid-desc{ color:var(--ink-2); font-weight:500; line-height:1.55; margin:14px 0 0; white-space:pre-line; }

/* admin inline edit (loaded only for the logged-in owner via the sb_admin flag) */
.admin-edit-btn{ display:inline-flex; align-items:center; gap:6px; margin:0 0 12px; font:inherit; font-weight:700; border:none; background:var(--btn); color:#fff; padding:11px 18px; border-radius:14px; box-shadow:var(--shadow); cursor:pointer; }
.admin-edit-bg{ position:fixed; inset:0; background:rgba(20,18,40,.5); display:flex; align-items:center; justify-content:center; padding:20px; z-index:60; }
.admin-edit-panel{ background:var(--white); border-radius:20px; padding:22px; width:100%; max-width:420px; box-shadow:0 18px 50px rgba(0,0,0,.3); color:var(--ink); }
.admin-edit-panel h3{ margin:0 0 6px; }
.admin-edit-panel label{ display:block; font-weight:700; font-size:14px; margin:12px 0 4px; }
.admin-edit-panel input[type=text],.admin-edit-panel select{ width:100%; font:inherit; padding:10px 12px; border:2px solid var(--ring); border-radius:12px; background:var(--white); color:var(--ink); }
.admin-edit-panel .ae-ck{ display:flex; align-items:center; gap:8px; font-weight:600; }
.admin-edit-panel .ae-ck input{ width:auto; }
.admin-edit-panel .ae-msg{ font-size:13px; color:var(--ink-2); min-height:1.2em; margin:10px 0 0; }
.admin-edit-panel .ae-row{ display:flex; align-items:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.admin-edit-panel button{ font:inherit; font-weight:700; border:none; border-radius:12px; padding:10px 16px; cursor:pointer; background:var(--btn); color:#fff; }
.admin-edit-panel .ae-ghost{ background:#e8ecf3; color:var(--ink); }
.admin-edit-panel .ae-danger{ background:#d23f3f; color:#fff; }
.video-aside > h2{ font-size:18px; margin:0 0 12px; }
.vid-minis{ display:flex; flex-direction:column; gap:12px; }
.vid-mini{ display:grid; grid-template-columns:168px 1fr; gap:10px; align-items:start; text-decoration:none; color:var(--ink); }
@media(max-width:560px){ .vid-mini{ grid-template-columns:140px 1fr; } }
.vid-mini-thumb{ position:relative; display:block; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#000; border:2px solid var(--ring); }
.vid-mini-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.vid-mini .vid-play{ width:36px; height:36px; font-size:14px; }
.vid-mini-title{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; font-weight:700; font-size:14px; line-height:1.3; }

/* ---- new games: bubbles / pattern / puzzle / catch ---- */
/* Pop the Balloons */
.bub-stage{ position:relative; height:min(78vh,720px); overflow:hidden; padding:0; display:block; }
.bub-dot{ display:inline-block; width:.85em; height:.85em; border-radius:50%; vertical-align:-2px; box-shadow:inset 0 -3px 6px rgba(0,0,0,.18); }
.balloon{ position:absolute; bottom:-130px; border:none; padding:0; cursor:pointer; border-radius:50% 50% 48% 48%;
  box-shadow:inset -6px -8px 14px rgba(0,0,0,.18); animation:floatUp linear forwards; will-change:transform; touch-action:manipulation; }
.balloon::after{ content:""; position:absolute; left:50%; bottom:-7px; width:8px; height:8px; transform:translateX(-50%) rotate(45deg); background:inherit; filter:brightness(.85); }
.balloon.burst{ animation:none; transform:scale(1.5); opacity:0; transition:transform .2s, opacity .2s; }
@keyframes floatUp{ 0%{ transform:translate(0,0); } 50%{ transform:translate(var(--sway,0),-52vh); } 100%{ transform:translate(0,-104vh); } }

/* What Comes Next? */
.pat-row{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; align-items:center; }
.pat-cell{ font-size:clamp(30px,9vw,52px); line-height:1; }
.pat-q{ display:inline-grid; place-items:center; width:1.3em; height:1.3em; border:3px dashed var(--ring); border-radius:16px; color:var(--ink-2); font-weight:800; }
.pat-fill{ animation:pop .35s both; }
.choices{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.pat-opt{ width:clamp(72px,22vw,92px); min-height:72px; }

/* Shape Puzzle */
.puz-holes{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-bottom:18px; }
.puz-hole{ width:clamp(72px,16vw,108px); height:clamp(72px,16vw,108px); display:grid; place-items:center; border-radius:22px;
  border:3px dashed var(--ring); background:rgba(43,35,80,.04); }
.puz-hole.filled{ border-style:solid; border-color:var(--grass); background:rgba(70,211,154,.12); }
.puz-ghost{ font-size:clamp(36px,10vw,54px); opacity:.38; }
.puz-hole.filled .puz-ghost{ display:none; }
.puz-tray{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; min-height:84px; }
.puz-piece{ border:none; background:none; padding:0; cursor:grab; font-size:clamp(46px,12vw,72px); line-height:1; touch-action:none;
  filter:drop-shadow(0 5px 0 rgba(43,35,80,.18)); transition:transform .12s; }
.puz-piece.puz-drag{ cursor:grabbing; transition:none; z-index:5; position:relative; }
.puz-piece.puz-spring{ transition:transform .28s cubic-bezier(.34,1.56,.64,1); }
.puz-hole .puz-piece{ filter:none; }

/* Catch the Animal */
.catch-holes{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,3.5vw,32px); width:100%; max-width:min(740px,96%); margin:0 auto; }
.catch-hole{ position:relative; aspect-ratio:1/.82; border-radius:50%/42%; overflow:hidden;
  background:radial-gradient(ellipse at 50% 32%, #6b4a2e 0%, #4d3520 70%); box-shadow:inset 0 8px 14px rgba(0,0,0,.4); }
.catch-hole::after{ content:""; position:absolute; left:6%; right:6%; bottom:0; height:34%; border-radius:50%;
  background:linear-gradient(#3c2a18,#2c1f12); }
.critter{ position:absolute; left:0; right:0; bottom:0; margin:0 auto; width:100%; border:none; background:none; cursor:pointer;
  font-size:clamp(34px,10vw,52px); line-height:1; transform:translateY(116%); transition:transform .16s ease-out; z-index:2; touch-action:manipulation; }
.critter.up{ transform:translateY(14%); }
.critter.caught{ transform:translateY(14%) scale(1.25); }

/* Baby Piano — .keys / .pianokey were never defined (lost in the engine refactor) so keys
   rendered as tiny 25px "dots". Real colourful keyboard: */
.keys{ display:flex; gap:clamp(5px,1vw,10px); justify-content:center; align-items:flex-end; width:100%; }
.pianokey{ flex:1 1 0; min-width:0; height:clamp(150px,34vh,300px); border:none; border-radius:0 0 16px 16px;
  color:#fff; font-weight:800; font-size:clamp(16px,2.4vw,26px); cursor:pointer; box-shadow:0 8px 0 rgba(43,35,80,.18);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:14px; transition:transform .07s, filter .07s;
  text-shadow:0 1px 2px rgba(0,0,0,.25); touch-action:manipulation; }
.pianokey.press, .pianokey:active{ transform:translateY(5px); filter:brightness(1.12); box-shadow:0 3px 0 rgba(43,35,80,.18); }

/* ---- Tic-Tac-Toe ---- */
/* mode picker: two big icon-only buttons (no reading required) */
.ttt-modes{ display:flex; gap:clamp(16px,5vw,32px); justify-content:center; flex-wrap:wrap; margin-top:12px; }
.ttt-modebtn{ width:min(220px,42vw); aspect-ratio:1; border:2px solid var(--ring); border-radius:26px;
  background:var(--card); color:var(--ink); cursor:pointer; box-shadow:var(--shadow); display:grid; place-items:center;
  font-size:min(104px,24vw); line-height:1; transition:transform .12s; touch-action:manipulation; }
.ttt-modebtn:active{ transform:translateY(4px); }
/* the 3×3 board — big tap targets, square, fills small screens */
.ttt-board{ display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); gap:clamp(8px,2.5vw,16px);
  width:min(460px, 86vw, 68vh); aspect-ratio:1; margin:6px auto 18px; }   /* equal square cells; also capped by height so the board fits the screen */
.ttt-cell{ border:2px solid var(--ring); cursor:pointer; border-radius:20px; background:var(--white); color:var(--ink);
  box-shadow:0 7px 0 rgba(43,35,80,.16); display:grid; place-items:center; padding:0; line-height:1;
  font-size:clamp(48px,16vw,104px); font-weight:900; transition:transform .1s, box-shadow .1s; touch-action:manipulation; }
.ttt-cell:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(43,35,80,.16); }
.ttt-cell.filled{ cursor:default; }
/* real marks, two bright distinct colours (text-stroke makes them big & bold) */
.ttt-x{ color:#2b7bff; -webkit-text-stroke:3px #2b7bff; }   /* bright blue cross */
.ttt-o{ color:#ff3d86; -webkit-text-stroke:3px #ff3d86; }   /* bright pink nought */
.ttt-cell.ttt-win{ box-shadow:0 0 0 4px var(--grass), 0 7px 0 rgba(43,35,80,.16); animation:cheer .5s; }
/* whose-turn indicator in the prompt */
.ttt-turn{ font-size:1.4em; font-weight:900; -webkit-text-stroke:3px currentColor; vertical-align:-3px; }

/* ---- Repeat After Me (Simon) ---- */
.simon-board{ display:grid; grid-template-columns:repeat(2,1fr); grid-template-rows:repeat(2,1fr); gap:clamp(10px,3vw,20px);
  width:min(460px, 86vw, 70vh); aspect-ratio:1; margin:6px auto 16px; }   /* equal square pads, capped by width AND height */
.simon-pad{ border:none; cursor:pointer; border-radius:26px; box-shadow:0 8px 0 rgba(43,35,80,.18); opacity:.5;
  transition:opacity .08s, transform .08s, box-shadow .08s; touch-action:manipulation; }
.simon-pad.on{ opacity:1; transform:scale(1.03); box-shadow:0 0 0 5px #fff, 0 12px 0 rgba(43,35,80,.22); }
.simon-pad:active{ transform:translateY(4px); box-shadow:0 3px 0 rgba(43,35,80,.18); }

/* ---- Pixel Art ---- */
.px-palette{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:4px 0 12px; }
.px-swatch{ width:clamp(34px,8vw,46px); height:clamp(34px,8vw,46px); border-radius:50%; border:3px solid var(--ring);
  cursor:pointer; padding:0; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; }
.px-swatch.on{ border-color:var(--ink); transform:scale(1.12); }
.px-grid{ display:grid; width:min(460px, 90vw, 64vh); aspect-ratio:1; margin:0 auto 14px; gap:2px;
  background:var(--ring); border:3px solid var(--ring); border-radius:14px; overflow:hidden; touch-action:none; }
.px-cell{ background:#fff; }

/* ---- Connect the Dots ---- */
.dots-pickrow{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:2px 0 14px; }
.dots-pick{ width:clamp(40px,10vw,52px); height:clamp(40px,10vw,52px); border-radius:16px; border:2px solid var(--ring);
  background:var(--white); font-size:clamp(20px,5.5vw,26px); line-height:1; cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; }
.dots-pick.on{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); }
.dots-stage{ position:relative; width:min(520px,92vw,70vh); aspect-ratio:1; margin:0 auto; background:var(--white);
  border:3px solid var(--ring); border-radius:22px; box-shadow:var(--shadow); touch-action:manipulation; }
.dots-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.dots-line{ fill:none; stroke:var(--primary); stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.dots-fill{ fill:transparent; opacity:0; transition:opacity .45s ease; }
.dots-fill.show{ opacity:.5; }
.dots-emoji{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:min(38%,150px);
  opacity:0; transform:scale(.4); transition:opacity .4s ease, transform .4s cubic-bezier(.2,1.4,.4,1); pointer-events:none; }
.dots-emoji.show{ opacity:1; transform:scale(1); }
.dots-dot{ position:absolute; transform:translate(-50%,-50%); width:clamp(30px,9%,46px); height:clamp(30px,9%,46px);
  border-radius:50%; border:3px solid var(--primary); background:var(--white); color:var(--ink);
  font-weight:800; font-size:clamp(13px,3.4vw,18px); cursor:pointer; padding:0; box-shadow:0 3px 0 rgba(43,35,80,.18);
  display:flex; align-items:center; justify-content:center; touch-action:manipulation; }
.dots-dot.next{ border-color:var(--accent,#ff8c42); color:var(--accent,#ff8c42); animation:dotsPulse 1s ease-in-out infinite; z-index:2; }
.dots-dot.done{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:none; }
.dots-dot.wobble{ animation:dotsWobble .5s ease; }
@keyframes dotsPulse{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-50%) scale(1.22); } }
@keyframes dotsWobble{ 0%,100%{ transform:translate(-50%,-50%) rotate(0); } 25%{ transform:translate(-50%,-50%) rotate(-12deg); } 75%{ transform:translate(-50%,-50%) rotate(12deg); } }

/* ---- Draw Together ---- */
/* The paper stays WHITE in both themes (dark recolors --card; eraser / fill / PNG-save assume white).
   The square is capped by the leftover viewport height (header+topbar+deadzone ≈ 240px);
   dvh/portrait variants of that cap live further down in this section. */
/* the paper is a 4:3 landscape rectangle (SIZE_W:SIZE_H = 1000:750) so it fills an iPad;
   the CSS aspect MUST match the logical aspect or strokes distort (see layout() note). */
.dt-stage{ position:relative; aspect-ratio:4/3; background:#fff !important; border-radius:18px; border:2px solid var(--ring); box-shadow:var(--shadow);
  overflow:hidden; touch-action:none; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  /* largest 4:3 sheet that FITS the stage box (contain): BOTH sides from container-query
     units so the aspect is exact regardless of grid quirks — no distortion, no stretch */
  width:min(100cqw, calc(100cqh * 4 / 3));
  height:min(100cqh, calc(100cqw * 3 / 4)); margin:0; }
.dt-stage canvas{ position:absolute; inset:0; width:100%; height:100%; touch-action:none; }
@supports not (aspect-ratio:1){ .dt-stage{ height:auto; width:100%; max-width:min(100%, calc((100vh - 24px) * 1.333)); } .dt-stage::before{ content:""; display:block; padding-top:75%; } } /* iOS <15 fallback: 3/4 = 75% */

/* big kid-sized controls — same visual language as the coloring .tool / .swatch, sized up */
.dt-tool{ width:76px; height:76px; border:2px solid var(--ring); border-radius:18px; background:var(--card); color:var(--ink);
  font:inherit; font-weight:700; font-size:32px; line-height:1; padding:0; cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.1); display:grid; place-items:center; touch-action:manipulation; }
.dt-tool.on{ background:var(--btn); color:#fff; border-color:transparent; box-shadow:0 0 0 3px var(--ring), 0 4px 0 rgba(0,0,0,.1); }
.dt-swatch{ width:60px; height:60px; border-radius:50%; border:3px solid var(--ring); cursor:pointer; padding:0; box-shadow:0 3px 0 rgba(0,0,0,.12); touch-action:manipulation; }
.dt-swatch.on{ border-color:var(--ink); transform:scale(1.12); }

/* game screen skeleton — FULLSCREEN app: a giant square canvas + ONE slim right rail.
   .dt-layout fills main.game; the stage box grows, the rail is a fixed slim column. */
.dt-layout{ display:flex; flex-direction:row; gap:clamp(6px,1vw,14px); flex:1 1 auto; min-height:0;
  padding:clamp(6px,1.2vw,12px);
  padding-bottom:calc(clamp(6px,1.2vw,12px) + env(safe-area-inset-bottom,0px));
  box-sizing:border-box; align-items:stretch; }
.dt-stagebox{ flex:1 1 auto; min-width:0; min-height:0; display:grid; place-items:center; container-type:size; }
.dt-rail{ display:flex; flex-direction:column; gap:10px; align-items:center; justify-content:center; }
.dt-mainrail{ flex:0 0 auto; width:clamp(142px,15vw,176px); align-items:center; justify-content:flex-start;
  gap:clamp(9px,1.7vh,15px); overflow-y:auto; overflow-x:hidden; padding:6px 6px 12px; scrollbar-width:thin; }
.dt-mainrail::-webkit-scrollbar{ width:6px; }
.dt-mainrail::-webkit-scrollbar-thumb{ background:var(--ring); border-radius:6px; }
/* every rail section is a tidy, centered GROUP — consistent rows, no ragged stacking */
.dt-grp{ display:flex; flex-flow:row wrap; align-items:center; justify-content:center; gap:8px; width:100%; }
.dt-grp.dt-palette{ display:grid; grid-template-columns:repeat(3,auto); gap:9px; justify-content:center; }
.dt-grp.dt-sizes{ flex-flow:row nowrap; gap:12px; min-height:46px; }
.dt-grp.dt-sizes.dt-hide{ display:none; }        /* contextual: collapses while the fill tool is active */
.dt-railsep{ flex:0 0 auto; width:72%; height:2px; background:var(--ring); opacity:.4; border-radius:2px; }
.dt-pchip{ margin:0 0 2px; }
.dt-mainrail .dt-tool{ width:46px; height:46px; font-size:24px; border-radius:15px; }
.dt-mainrail .dt-swatch{ width:40px; height:40px; border-width:3px; }
.dt-mainrail .dt-size{ width:44px; height:44px; }
@media (orientation:portrait){
  /* held upright: canvas on top (stays big & wide), rail becomes a bottom scroll-bar of groups */
  .dt-layout{ flex-direction:column; }
  .dt-mainrail{ width:100%; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-start;
    overflow-x:auto; overflow-y:hidden; gap:12px; padding:8px 10px; }
  .dt-grp{ width:auto; flex-wrap:nowrap; }
  .dt-grp.dt-palette{ grid-template-columns:repeat(2,auto); grid-auto-flow:column; }
  .dt-railsep{ width:2px; min-width:2px; height:56px; }
  .dt-pchip{ margin:0; }
}

/* game page chrome: FULLSCREEN app — hide the site header, lock the viewport (no scroll/rubber-band) */
body.dt-game{ position:fixed; inset:0; width:100%; overflow:hidden; overscroll-behavior:none;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }   /* no long-press menus mid-game */
body.dt-game .topbar{ display:none; }   /* the game is not framed by the site chrome */
.dt-penbadge{ position:absolute; top:10px; left:10px; z-index:5; font-size:22px; background:var(--card);
  border:2px solid var(--ring); border-radius:12px; padding:4px 8px; box-shadow:0 3px 0 rgba(0,0,0,.12); pointer-events:none; }
body.dt-game main.game{ flex:1 1 auto; min-height:0; width:100%; max-width:none; margin:0; padding:0;
  display:flex; flex-direction:column; }
body.dt-game .sb-langprompt{ display:none; }   /* the first-visit language banner would overlay the stage */
.dt-topgroup{ display:flex; gap:10px; }
a.dt-tool{ text-decoration:none; }
.dt-tool[disabled]{ opacity:.35; cursor:default; }

/* (the stage now fills its flex box as the biggest square — no fixed viewport caps needed) */

/* pinch-zoom wrapper: the CSS transform lives here (GPU), the stage clips it */
.dt-zoom{ position:absolute; inset:0; transform-origin:0 0; will-change:transform; }
#dtLine{ pointer-events:none; }   /* line art on top; taps go through to the stage */

/* fit button — floats over the stage, only while zoomed in */
.dt-fit{ position:absolute; right:10px; bottom:10px; z-index:5; width:56px; height:56px; border-radius:16px;
  border:2px solid var(--ring); background:var(--card); color:var(--ink); font-size:24px; cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.15); display:grid; place-items:center; touch-action:manipulation; }
.dt-fit[hidden]{ display:none; }

/* right rail: 2×6 palette + size dots (portrait: 6 across + a row of dots) */
.dt-palette{ display:grid; grid-template-columns:repeat(2,auto); gap:10px; }
.dt-sizes{ display:flex; flex-direction:column; gap:10px; }
.dt-size{ width:56px; height:56px; border-radius:50%; border:3px solid var(--ring); background:var(--card);
  cursor:pointer; padding:0; display:grid; place-items:center; box-shadow:0 3px 0 rgba(0,0,0,.12); touch-action:manipulation; }
.dt-size .dot{ border-radius:50%; background:var(--ink); }
.dt-size.on{ border-color:var(--ink); transform:scale(1.12); }
@media (orientation:portrait){
  /* rail is a bottom bar now: keep palette/sizes compact, laid out along the bar */
  .dt-palette{ grid-template-columns:repeat(2,auto); grid-auto-flow:column; }
  .dt-sizes{ flex-direction:row; }
}
/* short landscape (small iPads): keep the 3-across groups but a touch more compact */
@media (orientation:landscape) and (max-height:780px){
  .dt-mainrail{ width:clamp(132px,14vw,160px); gap:10px; }
  .dt-mainrail .dt-tool{ width:42px; height:42px; font-size:22px; }
  .dt-mainrail .dt-swatch{ width:37px; height:37px; }
  .dt-mainrail .dt-size{ width:40px; height:40px; }
}

/* template picker overlay: blank sheet + 6 template thumbnails */
.dt-pagepick{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; background:rgba(43,35,80,.45); padding:16px; }
.dt-pagepick[hidden]{ display:none; }
.dt-pick-panel{ background:var(--card); border-radius:26px; box-shadow:var(--shadow); padding:18px;
  display:flex; flex-direction:column; gap:14px; width:100%; max-width:560px; animation:pop .2s; }
.dt-cardgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:560px){ .dt-cardgrid{ gap:8px; } }
.dt-card{ aspect-ratio:1; border:2px solid var(--ring); border-radius:18px; background:#fff; cursor:pointer;
  padding:10px; display:grid; place-items:center; box-shadow:0 4px 0 rgba(0,0,0,.1); transition:transform .1s; }
.dt-card img{ width:100%; height:100%; object-fit:contain; }
.dt-card:active{ transform:translateY(3px); }
.dt-pgbar{ display:flex; align-items:center; justify-content:center; gap:18px; }
.dt-pgbtn{ border:2px solid var(--ring); background:#fff; border-radius:14px; min-width:52px; height:46px;
  font-size:24px; font-weight:800; line-height:1; color:var(--ink); cursor:pointer; box-shadow:0 4px 0 rgba(0,0,0,.1); }
.dt-pgbtn:disabled{ opacity:.35; cursor:default; box-shadow:none; }
.dt-pgbtn:not(:disabled):active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.1); }
.dt-pgnum{ font-weight:800; font-size:17px; color:var(--ink); min-width:64px; text-align:center; }

/* room flow screens (start / avatar / code entry / waiting / sad endings) */
.dt-screen{ flex:1 1 auto; min-height:55vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; padding:24px 16px; }
.dt-bigrow{ display:flex; gap:24px; flex-wrap:wrap; justify-content:center; }
.dt-bigbtn{ width:min(180px,38vw); height:min(180px,38vw); font-size:min(96px,20vw); line-height:1;
  border:2px solid var(--ring); border-radius:26px; background:var(--card); color:var(--ink); cursor:pointer;
  display:grid; place-items:center; box-shadow:var(--shadow); transition:transform .1s; touch-action:manipulation; }
.dt-bigbtn:active{ transform:translateY(3px); }
.dt-resume{ display:flex; align-items:center; gap:12px; padding:12px 14px 12px 12px; border:2px solid var(--ring);
  border-radius:24px; background:var(--card); color:var(--ink); cursor:pointer; box-shadow:var(--shadow); }
/* the 4 animals ARE the code — box them so they read as one 4-part code, distinct from the ▶ play button */
.dt-resume-code{ display:flex; align-items:center; gap:8px; padding:8px 12px; background:rgba(43,35,80,.06); border-radius:16px; }
.dt-resume-go{ width:48px; height:48px; flex:0 0 auto; border-radius:50%; background:var(--grass); color:#fff;
  display:grid; place-items:center; font-size:22px; box-shadow:0 3px 0 rgba(0,0,0,.15); }
html[data-theme="dark"] .dt-resume-code{ background:rgba(255,255,255,.08); }
.dt-mini{ font-size:34px; line-height:1; }
.dt-avatars{ display:grid; grid-template-columns:repeat(4,76px); gap:14px; }
@media (max-width:420px){ .dt-avatars{ grid-template-columns:repeat(3,76px); } }
.dt-avatar{ width:76px; height:76px; font-size:42px; line-height:1; border:2px solid var(--ring); border-radius:18px;
  background:var(--card); cursor:pointer; padding:0; display:grid; place-items:center;
  box-shadow:0 4px 0 rgba(0,0,0,.1); transition:transform .1s; touch-action:manipulation; }
.dt-avatar:active{ transform:translateY(3px); }
.dt-slots{ display:flex; gap:12px; }
.dt-slot{ width:76px; height:76px; font-size:42px; line-height:1; border:3px dashed var(--ring); border-radius:18px;
  background:var(--card); display:grid; place-items:center; }
.dt-shake{ animation:dtshake .45s; }
@keyframes dtshake{ 0%,100%{ transform:translateX(0); } 20%,60%{ transform:translateX(-10px); } 40%,80%{ transform:translateX(10px); } }

/* host ready band: BIG code cards + share + pulsing partner silhouette, above the live canvas */
.dt-band{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin:0 0 10px; }
/* the shared code = these 4 animals, boxed as one unit so 📣 share / 👤 waiting read as separate */
.dt-codecards{ display:flex; gap:10px; padding:10px 14px; background:rgba(43,35,80,.06); border-radius:20px; }
html[data-theme="dark"] .dt-codecards{ background:rgba(255,255,255,.08); }
.dt-codecard{ width:72px; height:72px; font-size:40px; line-height:1; border:2px solid var(--ring); border-radius:18px;
  background:var(--card); cursor:pointer; padding:0; display:grid; place-items:center; box-shadow:0 4px 0 rgba(0,0,0,.1); touch-action:manipulation; }
.dt-chip{ width:56px; height:56px; border-radius:50%; border:2px solid var(--ring); background:var(--card);
  display:grid; place-items:center; font-size:26px; opacity:.7; }
.dt-pulse{ animation:dtpulse 1.4s ease-in-out infinite; }
@keyframes dtpulse{ 0%,100%{ transform:scale(1); opacity:.55; } 50%{ transform:scale(1.12); opacity:.95; } }
.dt-bounce{ animation:dtbounce .5s; }
@keyframes dtbounce{ 0%,100%{ transform:scale(1); } 40%{ transform:scale(1.25); } }

/* own-profile chip (rail) + Friends overlays (avatar re-pick / invite / join / code) */
.dt-mechip{ background:var(--card); border:2px solid var(--ring); font-size:26px; opacity:1; }
.dt-overlay{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:rgba(43,35,80,.45); padding:16px; }
.dt-overlay-panel{ position:relative; background:var(--card); border-radius:26px; box-shadow:var(--shadow); padding:22px;
  display:flex; flex-direction:column; align-items:center; gap:18px; max-width:min(560px,92vw); animation:pop .2s; }
.dt-overlay-x{ position:absolute; top:8px; right:8px; width:44px; height:44px; font-size:20px; }
.dt-friend-title{ font-weight:700; font-size:clamp(18px,4vw,24px); text-align:center; color:var(--ink); }

/* waiting (knock-knock) + sad screens */
.dt-waitrow{ display:flex; align-items:center; gap:8px; }
.dt-knocker{ font-size:96px; line-height:1; animation:dtknock 1s ease-in-out infinite; }
.dt-knocker.dt-still{ animation:none; }
@keyframes dtknock{ 0%,100%{ transform:rotate(0) translateX(0); } 30%{ transform:rotate(-8deg) translateX(-8px); } 60%{ transform:rotate(6deg) translateX(6px); } }
.dt-door{ font-size:80px; line-height:1; }
.dt-sad{ font-size:110px; line-height:1; }
.dt-sadbtn{ width:130px; height:130px; font-size:64px; }

/* catch-up loader: bouncing animal over everything while room history replays */
.dt-loader{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; background:rgba(255,255,255,.72); }
.dt-loadface{ font-size:96px; line-height:1; animation:dtloadhop .55s ease-in-out infinite alternate; }
@keyframes dtloadhop{ from{ transform:translateY(10px); } to{ transform:translateY(-26px); } }

/* tuk-tuk banner + leave confirm (over any screen, incl. the drawing room) */
.dt-knockbanner{ position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:rgba(43,35,80,.45); padding:16px; }
.dt-knockpanel{ display:flex; flex-direction:column; align-items:center; gap:16px; padding:22px; width:auto; max-width:none; }
.dt-knockbtns{ display:flex; gap:18px; }
.dt-yes,.dt-no{ width:110px; height:110px; font-size:54px; }
/* gated approve (room full + guest LIVE): visibly off but still tappable — the tap buzzes */
.dt-yes.dt-blocked{ opacity:.35; box-shadow:none; }

/* partner presence: live cursor chip (inside .dt-zoom so the pinch transform
   carries it) + top-bar partner chip states + join celebration bounce-in */
.dt-cursor{ position:absolute; width:48px; height:48px; margin:-24px 0 0 -24px; z-index:4; pointer-events:none;
  display:grid; place-items:center; font-size:34px; line-height:1; opacity:0;
  transition:left .2s linear, top .2s linear, opacity .6s; }
.dt-cursor.dt-live{ opacity:1; }
.dt-cursor .dt-cursor-dot{ position:absolute; right:2px; bottom:2px; width:14px; height:14px; border-radius:50%;
  border:2px solid #fff; box-shadow:0 1px 3px rgba(43,35,80,.35); }
.dt-cur-host .dt-cursor-dot{ background:var(--coral); }   /* the host's hand is coral */
.dt-cur-guest .dt-cursor-dot{ background:var(--sky); }    /* the guest's is sky */
.dt-cursor.dt-drawing{ animation:dtcursorpulse .6s ease-in-out infinite; }
@keyframes dtcursorpulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.3); } }
.dt-pchip.dt-on{ opacity:1; }
.dt-pchip.dt-away{ opacity:.4; filter:grayscale(1); }
.dt-chipin{ animation:dtchipin .7s cubic-bezier(.34,1.56,.64,1); }
@keyframes dtchipin{ 0%{ transform:scale(0); } 60%{ transform:scale(1.35); } 100%{ transform:scale(1); } }

/* page flip (Task 13): brief wipe on the stage when a 'g' applies — BOTH sides */
.dt-stage.dt-flip{ animation:dtflip .45s ease-out; }
@keyframes dtflip{ 0%{ opacity:.25; transform:scale(.94); } 60%{ opacity:1; } 100%{ transform:scale(1); } }

/* page-button cooldown: dimmed but tappable (the tap buzzes), like the gated ✅ */
.dt-tool.dt-blocked{ opacity:.35; box-shadow:none; }

/* two-step "new page" confirm: the chosen page preview inside the knock-style panel */
.dt-confirmpic{ width:140px; height:140px; font-size:96px; line-height:140px; text-align:center; }
.dt-confirmpic img{ width:100%; height:100%; object-fit:contain; }

/* soft "new page?" nudge: tiny non-blocking pill under the top bar, once per page */
.dt-suggest{ position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:60;
  display:flex; gap:10px; background:var(--card); border:2px solid var(--ring); border-radius:22px;
  padding:8px; box-shadow:var(--shadow); animation:pop .2s; }
.dt-suggest .dt-tool{ width:56px; height:56px; font-size:26px; }

/* offline overlay (Task 15): sad animal + pulsing signal; auto-dismisses on reconnect */
.dt-offline{ position:fixed; inset:0; z-index:85; display:grid; place-items:center; align-content:center;
  gap:18px; background:rgba(255,255,255,.9); }
.dt-offline .dt-sad{ animation:dtknock 1s ease-in-out infinite; }
.dt-offwave{ font-size:64px; line-height:1; animation:dtpulse 1.4s ease-in-out infinite; }

/* ---- Privacy page ---- */
.privacy .privacy-item{ background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px 22px; margin-top:16px; }
.privacy .privacy-item h2{ margin:0 0 6px; font-size:clamp(18px,4.6vw,22px); }
.privacy .privacy-item p{ margin:0; color:var(--ink-2); font-weight:500; line-height:1.55; font-size:clamp(15px,3.8vw,17px); }

/* Static intro baked into every game page's <main> (SEO + no-JS fallback).
   The game's script replaces main's contents on boot, so this is what a crawler
   or a JS-less visitor sees — never a blank page. */
.game-intro{ max-width:44ch; margin:clamp(10px,4vh,40px) auto; }
.game-intro-emoji{ font-size:clamp(56px,16vw,96px); line-height:1; }
.game-intro h1{ font-size:clamp(26px,6vw,40px); margin:.2em 0 .25em; }
.game-intro p{ font-size:clamp(16px,4vw,20px); color:var(--ink-2); font-weight:600; margin:0; }
.game-intro .game-intro-js{ margin-top:14px; color:var(--ink); background:var(--card); border:2px solid var(--ring);
  border-radius:18px; padding:14px 18px; box-shadow:var(--shadow); }

/* ================= NEW GAMES (overnight batch) ================= */

/* ---- Kaleidoscope ---- */
.kal-bar{ display:flex; flex-wrap:wrap; gap:14px 22px; justify-content:center; align-items:center; margin:0 0 14px; }
.kal-pal{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.kal-sw{ width:clamp(34px,8vw,44px); height:clamp(34px,8vw,44px); border-radius:50%; border:3px solid var(--ring);
  cursor:pointer; padding:0; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; }
.kal-sw.on{ border-color:var(--ink); transform:scale(1.12); }
.kal-rain{ display:grid; place-items:center; font-size:22px; background:#fff; }
.kal-rain.on-rain{ border-color:var(--ink); transform:scale(1.12); }
.kal-secs{ display:flex; align-items:center; gap:8px; }
.kal-lbl{ font-size:12px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); }
.kal-sec{ min-width:46px; height:46px; border-radius:14px; border:2px solid var(--ring); background:var(--white); color:var(--ink);
  font:inherit; font-weight:800; font-size:18px; cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; }
.kal-sec.on{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); }
.kal-stage{ width:min(560px,92vw,66vh); aspect-ratio:1; margin:0 auto 16px; background:#0e1030; border-radius:50%;
  border:3px solid var(--ring); box-shadow:var(--shadow); overflow:hidden; touch-action:none; }
.kal-stage canvas{ width:100%; height:100%; display:block; }

/* ---- Stamps & Mandalas ---- */
.stmp-bar{ display:flex; flex-wrap:wrap; gap:12px 18px; justify-content:center; align-items:center; margin:0 0 12px; }
.stmp-pal{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; max-width:600px; }
.stmp-emo{ width:clamp(38px,9vw,48px); height:clamp(38px,9vw,48px); border-radius:14px; border:2px solid var(--ring);
  background:var(--white); font-size:clamp(20px,5vw,26px); line-height:1; cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; padding:0; }
.stmp-emo.on{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); }
.stmp-group{ display:flex; align-items:center; gap:6px; }
.stmp-lbl{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); margin-right:2px; }
.stmp-chip{ min-width:44px; height:44px; border-radius:13px; border:2px solid var(--ring); background:var(--white); color:var(--ink);
  font:inherit; font-weight:800; font-size:15px; cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; padding:0 8px; }
.stmp-chip.on{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); }
.stmp-stage{ width:min(560px,92vw,64vh); aspect-ratio:1; margin:0 auto 16px; background:#fff; border-radius:24px;
  border:3px solid var(--ring); box-shadow:var(--shadow); overflow:hidden; touch-action:none; }
.stmp-stage canvas{ width:100%; height:100%; display:block; }

/* ---- Sticker Scene (solo) ---- */
.stk-bar{ display:flex; flex-wrap:wrap; gap:12px 20px; justify-content:center; align-items:center; margin:0 0 12px; }
.stk-group{ display:flex; align-items:center; gap:6px; }
.stk-lbl{ font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-2); margin-right:2px; }
.stk-scene-b{ min-width:46px; height:46px; border-radius:14px; border:2px solid var(--ring); background:var(--white);
  font-size:24px; line-height:1; cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; padding:0; }
.stk-scene-b.on{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); }
.stk-chip{ min-width:44px; height:44px; border-radius:13px; border:2px solid var(--ring); background:var(--white); color:var(--ink);
  font:inherit; font-weight:800; font-size:15px; cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; padding:0 8px; }
.stk-chip.on{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); }
.stk-stage{ width:min(760px,94vw); aspect-ratio:96/66; margin:0 auto 12px; background:#fff; border-radius:22px;
  border:3px solid var(--ring); box-shadow:var(--shadow); overflow:hidden; touch-action:none; }
.stk-stage canvas{ width:100%; height:100%; display:block; }
.stk-tray{ display:flex; gap:8px; overflow-x:auto; padding:6px 4px 10px; margin:0 auto 12px; max-width:760px; scrollbar-width:thin; }
.stk-emo{ flex:0 0 auto; width:clamp(46px,11vw,58px); height:clamp(46px,11vw,58px); border-radius:16px; border:2px solid var(--ring);
  background:var(--white); font-size:clamp(26px,7vw,34px); line-height:1; cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; padding:0; }
.stk-emo:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(43,35,80,.14); }

/* ---- Trace Letters & Numbers ---- */
.trace-modes{ display:flex; gap:10px; justify-content:center; margin:0 0 12px; }
.trace-mode{ min-width:74px; height:48px; border-radius:16px; border:2px solid var(--ring); background:var(--white); color:var(--ink);
  font:inherit; font-weight:800; font-size:19px; cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; padding:0 14px; }
.trace-mode.on{ background:var(--btn); color:#fff; border-color:transparent; }
.trace-stage{ position:relative; width:min(460px,90vw,60vh); aspect-ratio:1; margin:0 auto 12px; background:#fff; border-radius:22px;
  border:3px solid var(--ring); box-shadow:var(--shadow); overflow:hidden; touch-action:none; }
.trace-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
#tInk{ touch-action:none; }
.trace-pal{ display:flex; gap:10px; justify-content:center; margin:0 0 12px; }
.trace-sw{ width:44px; height:44px; border-radius:50%; border:3px solid var(--ring); cursor:pointer; padding:0;
  box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; }
.trace-sw.on{ border-color:var(--ink); transform:scale(1.12); }

/* ---- ABC Sounds ---- */
.abc-card{ display:flex; flex-direction:column; align-items:center; gap:4px; width:min(360px,90vw); margin:0 auto 14px;
  background:linear-gradient(160deg,#fff,#fff4d6); border:2px solid var(--ring); border-radius:28px; box-shadow:var(--shadow);
  padding:18px 20px 22px; cursor:pointer; color:var(--ink); }
.abc-card.pop{ animation:pop .3s; }
.abc-letter{ font-size:clamp(90px,26vw,150px); font-weight:800; line-height:1; }
.abc-emoji{ font-size:clamp(56px,16vw,90px); line-height:1; }
.abc-word{ font-size:clamp(22px,6vw,30px); font-weight:700; text-transform:capitalize; min-height:1.1em; }
.abc-strip{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:8px 4px 12px; max-width:760px; margin:6px auto 0; }
.abc-key{ flex:0 0 auto; width:clamp(40px,9vw,54px); height:clamp(40px,9vw,54px); border-radius:14px; border:2px solid var(--ring);
  background:var(--white); color:var(--ink); font:inherit; font-weight:800; font-size:clamp(19px,5vw,24px); cursor:pointer;
  box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; padding:0; }
.abc-key.on{ background:var(--btn); color:#fff; border-color:transparent; }

/* ---- First Words ---- */
.w-bar{ display:flex; flex-wrap:wrap; gap:12px 20px; justify-content:center; align-items:center; margin:0 0 14px; }
.w-cats{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.w-cat{ width:52px; height:52px; border-radius:16px; border:2px solid var(--ring); background:var(--white); font-size:26px; line-height:1;
  cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; padding:0; }
.w-cat.on{ border-color:var(--primary); box-shadow:0 0 0 2px var(--primary); }
.w-modes{ display:flex; gap:8px; }
.w-mode{ width:52px; height:52px; border-radius:16px; border:2px solid var(--ring); background:var(--white); font-size:24px; line-height:1;
  cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; padding:0; }
.w-mode.on{ background:var(--btn); color:#fff; border-color:transparent; }
.w-card{ display:flex; flex-direction:column; align-items:center; gap:6px; width:min(340px,88vw); margin:0 auto 14px;
  background:linear-gradient(160deg,#fff,#e3f8ee); border:2px solid var(--ring); border-radius:28px; box-shadow:var(--shadow);
  padding:24px; cursor:pointer; color:var(--ink); animation:pop .3s; }
.w-emoji{ font-size:clamp(90px,26vw,150px); line-height:1; }
.w-word{ font-size:clamp(26px,7vw,38px); font-weight:800; text-transform:capitalize; }
.w-target{ display:flex; align-items:center; justify-content:center; gap:14px; margin:6px 0 18px; }
.w-tword{ font-size:clamp(30px,8vw,46px); font-weight:800; text-transform:capitalize; }
.w-say{ width:58px; height:58px; border-radius:16px; border:2px solid var(--ring); background:var(--btn); color:#fff; font-size:26px;
  cursor:pointer; box-shadow:0 4px 0 rgba(43,35,80,.18); touch-action:manipulation; }
.w-opts{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(12px,3vw,18px); width:min(520px,94vw); margin:0 auto; }
@media(min-width:560px){ .w-opts{ grid-template-columns:repeat(4,1fr); } }
.w-opt{ aspect-ratio:1; border:2px solid var(--ring); background:var(--white); border-radius:22px; font-size:clamp(46px,13vw,68px);
  line-height:1; cursor:pointer; box-shadow:0 7px 0 rgba(43,35,80,.16); touch-action:manipulation; display:grid; place-items:center; }
.w-opt:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(43,35,80,.16); }
.w-opt.right{ background:#0c8055; animation:cheer .4s; }
.w-opt.wrong{ animation:shake .35s; }

/* ---- Count & Add ---- */
.math-modes{ display:flex; gap:10px; justify-content:center; margin:0 0 12px; }
.math-mode{ width:60px; height:50px; border-radius:16px; border:2px solid var(--ring); background:var(--white); font-size:24px; line-height:1;
  cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; padding:0; }
.math-mode.on{ background:var(--btn); color:#fff; border-color:transparent; }
.math-eq{ display:flex; align-items:center; justify-content:center; gap:clamp(8px,3vw,20px); flex-wrap:wrap; min-height:96px; }
.math-grp{ max-width:44vw; }
.math-op{ font-size:clamp(30px,8vw,48px); font-weight:800; color:var(--ink-2); }

/* ---- Learn the Clock ---- */
.clock-target{ display:flex; align-items:center; justify-content:center; gap:14px; margin:2px 0 2px; }
.clock-time{ font-size:clamp(34px,9vw,52px); font-weight:800; font-variant-numeric:tabular-nums; }
.clock-sub{ text-align:center; color:var(--ink-2); font-weight:700; font-size:16px; margin:0 0 12px; min-height:1.1em; }
.clock-stage{ width:min(400px,86vw,58vh); aspect-ratio:1; margin:0 auto 14px; touch-action:none; }
.clock-stage canvas{ width:100%; height:100%; display:block; filter:drop-shadow(0 10px 18px rgba(43,35,80,.18)); }

/* ---- Dress Up ---- */
.du-figure{ width:min(300px,72vw); margin:0 auto 14px; background:#fff; border:3px solid var(--ring); border-radius:24px;
  box-shadow:var(--shadow); overflow:hidden; }
.du-figure svg{ width:100%; height:auto; display:block; }
.du-slots{ display:grid; grid-template-columns:repeat(auto-fit,minmax(94px,1fr)); gap:10px; max-width:520px; margin:0 auto 14px; }
.du-slot{ display:flex; align-items:center; justify-content:space-between; gap:4px; background:var(--white); border:2px solid var(--ring);
  border-radius:16px; padding:5px 6px; box-shadow:0 3px 0 rgba(43,35,80,.12); }
.du-arrow{ width:38px; height:38px; border:none; border-radius:11px; background:var(--btn); color:#fff; font-size:16px; font-weight:800;
  cursor:pointer; touch-action:manipulation; padding:0; }
.du-arrow:active{ transform:translateY(2px); }
.du-ic{ font-size:24px; line-height:1; }

/* ---- My Pet ---- */
.pet-pick{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; max-width:420px; margin:0 auto 16px; }
.pet-opt{ aspect-ratio:1; border:2px solid var(--ring); background:var(--white); border-radius:20px; font-size:clamp(40px,11vw,58px);
  line-height:1; cursor:pointer; box-shadow:0 6px 0 rgba(43,35,80,.16); touch-action:manipulation; }
.pet-opt.on{ border-color:var(--primary); box-shadow:0 0 0 3px var(--primary); transform:scale(1.05); }
.pet-startrow{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:0 auto; }
.pet-nameinput{ font:inherit; font-weight:700; font-size:18px; padding:12px 16px; border-radius:16px; border:2px solid var(--ring);
  background:var(--white); color:var(--ink); width:min(200px,60vw); text-align:center; }
.pet-head{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; margin:2px 0 8px; }
.pet-nm{ font-size:clamp(24px,6vw,34px); font-weight:800; }
.pet-stg{ font-size:15px; font-weight:800; color:var(--ink-2); background:var(--card); border:2px solid var(--ring); border-radius:999px; padding:4px 12px; }
.pet-yard{ position:relative; width:min(420px,90vw); height:min(300px,44vh); margin:0 auto 12px; overflow:hidden;
  background:linear-gradient(180deg,#cdeeff 0%,#e9f8ff 55%,#9ee08a 55%,#77cf6a 100%); border:3px solid var(--ring);
  border-radius:26px; box-shadow:var(--shadow); display:grid; place-items:center; }
.pet-mood{ position:absolute; top:10px; right:14px; font-size:30px; }
.pet-emoji{ line-height:1; filter:drop-shadow(0 8px 6px rgba(43,35,80,.2)); transition:font-size .3s; }
.pet-bounce{ animation:petBounce .5s ease; }
@keyframes petBounce{ 0%,100%{ transform:translateY(0) scale(1); } 30%{ transform:translateY(-16px) scale(1.06); } 60%{ transform:translateY(0) scale(.97); } }
.pet-float{ position:absolute; bottom:30%; font-size:34px; pointer-events:none; animation:petFloat 1.1s ease-out forwards; }
@keyframes petFloat{ 0%{ transform:translateY(0) scale(.6); opacity:0; } 20%{ opacity:1; } 100%{ transform:translateY(-120px) scale(1.2); opacity:0; } }
.pet-stats{ display:flex; flex-direction:column; gap:9px; max-width:420px; margin:0 auto 14px; }
.pet-stat{ display:flex; align-items:center; gap:10px; }
.pet-sic{ font-size:24px; width:30px; text-align:center; }
.pet-track{ flex:1; height:20px; background:rgba(43,35,80,.1); border-radius:999px; overflow:hidden; }
.pet-fill{ height:100%; border-radius:999px; transition:width .3s ease, background .3s; }
.pet-actions{ margin-bottom:10px; }
.pet-foot{ text-align:center; }
.pet-new{ font:inherit; font-weight:700; font-size:14px; border:2px solid var(--ring); background:var(--white); color:var(--ink-2);
  border-radius:14px; padding:9px 16px; cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.1); }
.pet-confirm{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; background:rgba(43,35,80,.45); padding:20px; }
.pet-confirm-panel{ background:var(--card); border-radius:24px; box-shadow:var(--shadow); padding:24px; max-width:340px; text-align:center; animation:pop .2s; }
.pet-confirm-panel p{ margin:0 0 18px; font-weight:700; font-size:18px; color:var(--ink); }
.pet-confirm-row{ display:flex; gap:12px; justify-content:center; }

/* ---- Story Maker ---- */
.story-topbar{ display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin:0 0 12px; }
.story-nav{ display:flex; align-items:center; gap:8px; }
.story-btn{ min-width:48px; height:48px; border-radius:14px; border:2px solid var(--ring); background:var(--white); color:var(--ink);
  font-size:22px; font-weight:800; line-height:1; cursor:pointer; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; padding:0 8px; }
.story-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(43,35,80,.14); }
.story-num{ font-weight:800; font-size:18px; font-variant-numeric:tabular-nums; min-width:56px; text-align:center; }
.story-cap{ display:block; width:min(760px,94vw); box-sizing:border-box; margin:0 auto 12px; font:inherit; font-weight:700; font-size:18px;
  padding:12px 16px; border-radius:16px; border:2px solid var(--ring); background:var(--white); color:var(--ink); text-align:center; box-shadow:0 3px 0 rgba(43,35,80,.1); }
.story-cap:focus{ outline:none; border-color:var(--primary); }

/* ---- Co-op shared: connection status + invite/join modal ---- */
.sc-status{ text-align:center; font-weight:800; font-size:15px; margin:0 auto 10px; padding:6px 14px; border-radius:999px;
  background:var(--card); border:2px solid var(--ring); width:max-content; max-width:92vw; }
.sc-status.sc-ok{ color:#0c8055; border-color:#0c8055; }
.sc-status.sc-fail{ color:#c5482c; border-color:#e2a08e; }
.sc-modal{ position:fixed; inset:0; z-index:70; display:grid; place-items:center; background:rgba(43,35,80,.45); padding:20px; }
.sc-panel{ position:relative; background:var(--card); border-radius:26px; box-shadow:var(--shadow); padding:26px 22px 24px; width:100%; max-width:360px; text-align:center; animation:pop .2s; }
.sc-x{ position:absolute; top:12px; right:14px; border:none; background:transparent; font-size:20px; font-weight:800; color:var(--ink-2); cursor:pointer; }
.sc-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:6px 0 4px; }
.sc-body{ margin-top:14px; }
.sc-body p{ margin:0 0 10px; font-weight:700; color:var(--ink-2); }
.sc-code{ font-size:26px; font-weight:800; letter-spacing:.02em; color:var(--ink); background:var(--white); border:2px dashed var(--primary);
  border-radius:16px; padding:14px 12px; word-break:break-word; }
.sc-input{ width:100%; box-sizing:border-box; font:inherit; font-weight:700; font-size:18px; padding:12px 14px; border-radius:14px;
  border:2px solid var(--ring); background:var(--white); color:var(--ink); text-align:center; margin:0 0 12px; }

/* ---- Draw & Reveal ---- */
.rv-word{ font-size:clamp(22px,6vw,32px); font-weight:800; margin:2px 0 12px; min-height:1.3em; }
.rv-word .rv-lbl{ color:var(--ink-2); }
.rv-word .rv-emoji{ font-size:1.25em; vertical-align:-3px; }
.rv-word .rv-name{ text-transform:capitalize; }
.rv-stage{ position:relative; width:min(480px,92vw,58vh); aspect-ratio:1; margin:0 auto 12px; background:#fff; border-radius:22px;
  border:3px solid var(--ring); box-shadow:var(--shadow); overflow:hidden; touch-action:none; }
.rv-stage canvas{ position:absolute; inset:0; width:100%; height:100%; }
.rv-tada{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(255,255,255,.9); }
.rv-tada[hidden]{ display:none; }
.rv-tada-in{ text-align:center; font-size:clamp(70px,20vw,120px); line-height:1; animation:pop .4s; }
.rv-tada-word{ font-size:clamp(28px,7vw,40px); font-weight:800; text-transform:capitalize; margin-top:6px; color:var(--ink); }
.rv-tada-tag{ font-size:18px; font-weight:800; color:var(--primary); margin-top:2px; }
.rv-pal{ display:flex; gap:10px; justify-content:center; margin:0 0 12px; }
.rv-sw{ width:44px; height:44px; border-radius:50%; border:3px solid var(--ring); cursor:pointer; padding:0; box-shadow:0 3px 0 rgba(43,35,80,.14); touch-action:manipulation; }
.rv-sw.on{ border-color:var(--ink); transform:scale(1.12); }