/* ───────────────────────────────────────────────────────────────────
   EduAI · Wireframe design system
   Sketchy / hand-drawn aesthetic (adapted from the reference deck).
   Shared across every static screen.
   ─────────────────────────────────────────────────────────────────── */

:root {
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --paper: #fdfaf2;
  --paper-2: #f4efe0;
  --paper-3: #ebe5d2;
  --muted: #999;
  --dim: #cfc9b8;
  --accent: #4773d9;
  --accent-soft: #dce3f5;
  --good: #5a9b6f;
  --good-soft: #d8ecdd;
  --warn: #c97a3a;
  --warn-soft: #f3e0cf;
  --bad: #c0504d;
  --bad-soft: #f3d9d8;
  --gold: #c9a227;
  --gold-soft: #f5ecc9;
  --sk-line: #8b8578;   /* warm-gray sketch border (global; was scoped to .app.game) */
  --hand: 'Kalam', 'Patrick Hand', cursive;
  --head: 'Caveat', cursive;
  --stroke: 1.5px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--hand);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* The procedural sketchy border overlay */
.sk { position: relative; border-color: transparent !important; }
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--skw, 1.5px) solid var(--skc, var(--sk-line));
  border-radius: inherit;
  filter: url(#sketch);
  pointer-events: none;
}
.sk-direct { filter: url(#sketch); }

/* ── Typography ─────────────────────────────────────────────────── */
.h-hand { font-family: var(--head); font-weight: 700; }
.h1 { font-family: var(--head); font-weight: 700; font-size: 44px; line-height: 1.05; margin: 0; }
.h2 { font-family: var(--head); font-weight: 700; font-size: 28px; line-height: 1.1; margin: 0; }
.h3 { font-family: var(--head); font-weight: 700; font-size: 20px; line-height: 1.1; margin: 0; }
.h4 { font-family: var(--head); font-weight: 700; font-size: 16px; margin: 0; }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.xxs { font-size: 11px; }
.muted { color: var(--muted); }
.softink { color: var(--ink-soft); }
.accent-text { color: var(--accent); }
.upper { text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Layout primitives ──────────────────────────────────────────── */
.row { display: flex; align-items: center; gap: 8px; }
.col { display: flex; flex-direction: column; }
.between { justify-content: space-between; }
.center { justify-content: center; align-items: center; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-14 { gap: 14px; }
.gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }
.flex1 { flex: 1; }
.wrap { flex-wrap: wrap; }
.mt-6 { margin-top: 6px; } .mt-12 { margin-top: 12px; }

/* ── Card ───────────────────────────────────────────────────────── */
.card {
  border: var(--stroke) solid var(--ink);
  border-radius: 6px;
  background: var(--paper);
  padding: 14px;
}
.card-dim { background: var(--paper-2); }

/* ── Pill / tag ─────────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border: 1.2px solid var(--ink); border-radius: 12px;
  font-size: 12px; background: var(--paper); --skw: 1.2px; cursor: default;
}
.tag.solid { background: var(--ink); color: var(--paper); }
.tag.accent { background: var(--accent); color: #fff; border-color: var(--ink); }
.tag.good { background: var(--good-soft); border-color: var(--good); color: #2f6b45; }
.tag.warn { background: var(--warn-soft); border-color: var(--warn); color: #8a4a18; }
.tag.bad  { background: var(--bad-soft);  border-color: var(--bad);  color: #8a2422; }
.tag.dashed { border-style: dashed; color: var(--muted); --skc: var(--muted); }
.tag.click { cursor: pointer; }

/* ── Button ─────────────────────────────────────────────────────── */
.btn {
  font-family: var(--hand); cursor: pointer;
  border: var(--stroke) solid var(--ink);
  background: var(--paper); border-radius: 20px;
  padding: 6px 14px; font-size: 13px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; text-align: center;
}
.btn-solid { background: var(--accent); color: #fff; font-weight: 700; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-good { background: var(--good); color: #fff; font-weight: 700; }
.btn-sm { padding: 3px 10px; font-size: 12px; }
.btn-lg { padding: 9px 22px; font-size: 15px; }
.btn-block { display: flex; justify-content: center; width: 100%; }

/* ── Avatar ─────────────────────────────────────────────────────── */
.av {
  border-radius: 50%; background: var(--paper-2); border: var(--stroke) solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 700; flex-shrink: 0;
  width: 36px; height: 36px; font-size: 14px;
}
.av-sm { width: 26px; height: 26px; font-size: 11px; }
.av-lg { width: 56px; height: 56px; font-size: 22px; }

/* ── Input ──────────────────────────────────────────────────────── */
.inp {
  width: 100%; font-family: var(--hand); font-size: 14px;
  padding: 9px 14px; border: var(--stroke) solid var(--ink);
  border-radius: 24px; background: var(--paper); color: var(--ink); outline: none;
}
.inp::placeholder { color: var(--muted); }
/* Form controls can't render the .sk::after hand-drawn border (no ::after on
   <input>/<select>/<textarea>), so the .sk `border-color: transparent !important`
   left them invisible. Give real controls a solid border + a clear focus highlight. */
/* Unwrapped controls (most of the app): visible soft-gray border, no filter on the
   element itself (it would distort the typed text). Sketchy fields use .skf below. */
input.inp, select.inp, textarea.inp {
  border-color: var(--field-line, #b3ac9b) !important;   /* soft warm gray, not hard black */
  transition: border-color .12s, box-shadow .12s;
}
input.inp:focus, select.inp:focus, textarea.inp:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft);
}
/* Sketchy field: the WRAPPER draws the hand-drawn border via a filtered ::after overlay,
   so the input's text stays crisp (inputs can't render ::after; filtering the input
   distorts its text). Wrap an <input class="inp"> in <div class="skf">. */
.skf { position: relative; }
.skf > .inp { border-color: transparent !important; background: transparent; box-shadow: none !important; }
.skf::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px;
  border: 1.6px solid var(--field-line, #b3ac9b);
  filter: url(#sketch2); pointer-events: none; transition: border-color .12s;
}
.skf:focus-within::after { border-color: var(--accent); }
.label { font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; display: block; }

/* ── Divider ────────────────────────────────────────────────────── */
.div-line { flex: 1; border-top: 1px dashed var(--dim); filter: url(#sketch); }
.divider { display: flex; align-items: center; gap: 10px; margin: 10px 0; }
.div-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ── Progress bar ───────────────────────────────────────────────── */
.bar {
  height: 8px; border: 1.5px solid var(--ink); border-radius: 6px;
  background: var(--paper); overflow: hidden; position: relative;
}
.bar > i { display: block; height: 100%; background: var(--accent); border-right: 1.5px solid var(--ink); }
.bar.good > i { background: var(--good); }
.bar.warn > i { background: var(--warn); }

/* ── App shell (full product, not a tiny artboard) ──────────────── */
.app {
  width: 100%;
  max-width: 1180px;
  height: calc(100vh - 96px);
  min-height: 620px;
  margin: 18px auto;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  position: relative;
  --skw: 2px;
}

/* Top bar */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px;
  border-bottom: 1.5px dashed var(--dim);
  background: var(--paper);
  flex-shrink: 0;
}
.brand { font-family: var(--head); font-size: 24px; font-weight: 700; letter-spacing: 0.5px; }
.brand-dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--ink); margin-right: 4px;
  vertical-align: middle;
}
.streak {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; background: var(--paper-2);
  border: 1.2px solid var(--ink); border-radius: 12px;
  font-size: 12px; font-weight: 700;
}

/* Stage = left rail + content */
.stage { flex: 1; display: flex; min-height: 0; overflow: hidden; }
.leftnav {
  width: 150px; padding: 14px 10px;
  border-right: 1.5px dashed var(--dim);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--paper); flex-shrink: 0;
}
.content { flex: 1; padding: 22px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }

/* Subject rail items */
.subj {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1.5px solid var(--ink); border-radius: 8px;
  background: var(--paper); cursor: pointer; font-size: 13px;
}
.subj.active { background: var(--ink); color: var(--paper); }
.subj-ico {
  width: 28px; height: 28px; border: 1.5px solid var(--ink);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 700; font-size: 16px;
  background: var(--paper-2); color: var(--ink); flex-shrink: 0;
}
.subj.active .subj-ico { background: var(--accent); color: #fff; }

/* Segmented control (class / scope / difficulty) */
.seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 16px; overflow: hidden; --skw: 1.5px; }
.seg > span {
  padding: 5px 14px; font-size: 13px; cursor: pointer;
  border-right: 1.2px solid var(--ink); background: var(--paper);
}
.seg > span:last-child { border-right: none; }
.seg > span.on { background: var(--ink); color: var(--paper); font-weight: 700; }

/* Imagery placeholder — striped fill */
.ph {
  position: relative;
  background: repeating-linear-gradient(135deg,
    var(--paper-2) 0, var(--paper-2) 6px, var(--paper-3) 6px, var(--paper-3) 12px);
  border: 1.5px solid var(--ink); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px; color: var(--ink-soft); text-align: center; padding: 6px;
}

/* Chat bubble */
.bubble {
  border: 1.5px solid var(--ink); border-radius: 12px;
  padding: 8px 12px; max-width: 80%; font-size: 13px; line-height: 1.4; background: var(--paper);
}
.bubble.me { background: var(--accent); color: #fff; align-self: flex-end; }
.bubble.ai { background: var(--paper-2); align-self: flex-start; }

/* Step dot */
.stepdot {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 700; font-size: 13px;
  background: var(--paper); flex-shrink: 0;
}
.stepdot.done { background: var(--accent); color: #fff; }
.stepdot.active { background: var(--ink); color: var(--paper); }
.stepdot.good { background: var(--good); color: #fff; }
.stepdot.bad  { background: var(--bad);  color: #fff; }

/* Heatmap cell */
.cell { width: 100%; aspect-ratio: 1; border: 1px solid var(--dim); border-radius: 2px; background: var(--paper); }
.cell.l1 { background: var(--accent-soft); border-color: var(--accent-soft); }
.cell.l2 { background: #b3c4ea; border-color: #b3c4ea; }
.cell.l3 { background: var(--accent); border-color: var(--accent); }
.cell.l4 { background: var(--ink); border-color: var(--ink); }

.crossed { text-decoration: line-through; color: var(--muted); }
.scribble { font-family: var(--head); color: var(--ink-soft); }

/* Range slider (question count) — sketchy-ish */
input[type=range].slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
  background: var(--paper-2); border: 1.5px solid var(--ink); border-radius: 6px; outline: none;
}
input[type=range].slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--ink); cursor: pointer;
}
input[type=range].slider::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent); border: 1.5px solid var(--ink); cursor: pointer;
}

/* ── Landing / auth ─────────────────────────────────────────────── */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 920px; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0;
  border: 2px solid var(--ink); border-radius: 18px; overflow: hidden; background: var(--paper); --skw: 2px; }
.auth-hero { padding: 36px; background: var(--paper-2); border-right: 1.5px dashed var(--dim); display: flex; flex-direction: column; gap: 16px; }
.auth-form { padding: 36px; display: flex; flex-direction: column; gap: 12px; }
.role-tabs { display: flex; gap: 8px; }
.role-tab { flex: 1; text-align: center; padding: 10px; border: 1.5px solid var(--ink); border-radius: 10px;
  background: var(--paper); cursor: pointer; font-size: 14px; }
.role-tab.on { background: var(--ink); color: var(--paper); font-weight: 700; }

/* ── Prototype screen-switcher (clearly a wireframe aid) ────────── */
.screens {
  position: fixed; left: 14px; bottom: 14px; z-index: 9000;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 12px;
  padding: 8px 10px; box-shadow: 0 3px 10px rgba(0,0,0,0.12); max-width: 220px; --skw: 1.5px;
}
.screens .sc-title { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.screens a { display: block; font-size: 12px; padding: 2px 4px; border-radius: 4px; }
.screens a.cur { background: var(--accent-soft); font-weight: 700; }
.screens a:hover { background: var(--paper-2); }
.screens details > summary { cursor: pointer; list-style: none; }
.screens details > summary::-webkit-details-marker { display: none; }

@media (max-width: 720px) {
  .auth-card { grid-template-columns: 1fr; }
  .auth-hero { display: none; }

  /* ── App shell on phones ──────────────────────────────────────────
     Full-bleed, real-viewport height. `100dvh` excludes the mobile browser
     chrome (plain 100vh does NOT, which pushed the bottom caption bar
     off-screen). Drop the 620px desktop min-height that trapped it. */
  .app {
    margin: 0; border-radius: 0; border-width: 0;
    min-height: 0;
    height: 100vh;            /* fallback for browsers without dvh */
    height: 100dvh;
  }

  /* Topbar: wrap controls onto more rows instead of clipping them off the
     right edge. Hide the flex spacer so items pack and wrap naturally. */
  .topbar { flex-wrap: wrap; gap: 8px; padding: 8px 12px; }
  .topbar .flex1 { display: none; }
  .topbar .brand { font-size: 20px; }
  #topicSel { max-width: 100%; }
  #voiceSel, #speedSel { max-width: 44vw; }

  /* Dashboard / generate / test views: stack the left rail above content
     as a horizontal, scrollable strip instead of a fixed 150px column. */
  .stage { flex-direction: column; }
  .leftnav {
    width: auto; flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: 6px; padding: 10px 12px;
    border-right: none; border-bottom: 1.5px dashed var(--dim);
    overflow-x: auto;
  }
  .leftnav .divider { display: none; }
  .content { padding: 16px 14px; }

  /* Learn whiteboard caption bar: wrap, and drop the controls onto their
     own full-width row with a flexible (not fixed-200px) reply box. */
  .rt-board { padding: 16px 14px; }
  .rt-caption-bar { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
  .rt-caption-bar > .row { width: 100%; }
  #replyBox { flex: 1 1 auto; width: auto !important; min-width: 0; }
  .dashboard-grid, .parent-dashboard-grid, .admin-grid, .generate-grid {
    grid-template-columns: 1fr;
  }
  .generate-grid > .card, .generate-grid > .col { overflow: visible !important; }
  .student-hero { padding: 16px; }
}

/* ── SPA additions ─────────────────────────────────────────────── */
.opt { cursor:pointer; }
.opt.selected { background:var(--accent-soft); }
.opt.correct { background:var(--good-soft); border-color:var(--good); }
.opt.wrong { background:var(--bad-soft); border-color:var(--bad); }
.spinner { width:18px;height:18px;border:2px solid var(--dim);border-top-color:var(--accent);border-radius:50%;display:inline-block;animation:spin .7s linear infinite;vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.toast { position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:9999;background:var(--ink);color:var(--paper);padding:8px 16px;border-radius:20px;font-size:13px;box-shadow:0 3px 12px rgba(0,0,0,.2); }
.busy { opacity:.6; pointer-events:none; }
textarea.inp { border-radius:10px; resize:vertical; min-height:64px; font-family:var(--hand); }
.chip-on { background:var(--accent); color:#fff; }
.board-op { animation:fadein .4s ease both; }
@keyframes fadein { from { opacity:0; transform:translateY(6px);} to {opacity:1;transform:none;} }
.kpi-big { font-family:var(--head); font-weight:700; font-size:26px; }
.linkish { color:var(--accent); cursor:pointer; }
.hide { display:none !important; }
.student-hero {
  display:flex; flex-direction:column; gap:14px;
  padding:20px; border:1.5px solid var(--ink); border-radius:12px;
  background:var(--paper-2);
}
.app-topic-search { box-shadow:none; width:min(100%, 720px); }
.dashboard-grid, .parent-dashboard-grid, .admin-grid {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
}
.generate-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:16px; flex:1; min-height:0; }
.streak-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; max-width:260px; }
.day-dot {
  aspect-ratio:1; border:1px solid var(--dim); border-radius:5px;
  background:var(--paper); display:block;
}
.day-dot.on { background:var(--good); border-color:var(--ink); }
.admin-grid { align-items:start; }

/* ── Realtime whiteboard ───────────────────────────────────────── */
.rt-board { flex:1; overflow-y:auto; padding:26px 32px; background:var(--paper); }
.rt-space { margin-bottom:22px; }
.rt-space > .rt-cols { display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; }
.rt-col { display:flex; flex-direction:column; gap:12px; }
.rt-col-main { flex:2; min-width:260px; } .rt-col-side { flex:1; min-width:200px; }
.rt-el { position:relative; animation:fadein .45s ease both; }
.rt-el h1 { font-family:var(--head); font-size:34px; margin:0; }
.rt-el h2 { font-family:var(--head); font-size:26px; margin:0; }
.rt-el h3 { font-family:var(--head); font-size:20px; margin:0; }
.rt-el p { font-size:16px; line-height:1.5; margin:0; }
.rt-el ul { margin:4px 0; padding-left:20px; line-height:1.6; }
.rt-fig { border:1.5px solid var(--ink); border-radius:10px; padding:8px; background:var(--paper-2); display:inline-block; }
.rt-fig img { display:block; max-width:100%; border-radius:6px; }
.rt-fig .cap { font-size:12px; color:var(--ink-soft); text-align:center; margin-top:6px; }
.rt-check { border:1.8px solid var(--good); background:var(--good-soft); border-radius:10px; padding:12px 14px; }
.rt-check .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#2f6b45; }
/* highlight-by-id (marker behind text) */
.hl-yellow { background:linear-gradient(transparent 55%, #fcecaa 55%, #fcecaa 92%, transparent 92%); transition:background .4s; }
.hl-green { background:linear-gradient(transparent 55%, #c9e8c8 55%, #c9e8c8 92%, transparent 92%); }
.hl-red { background:linear-gradient(transparent 55%, #f3c9c8 55%, #f3c9c8 92%, transparent 92%); }
.circle-annot { outline:2.5px dashed var(--bad); outline-offset:4px; border-radius:40% 60% 55% 45%; padding:2px 6px; }
.rt-caption-bar { display:flex; align-items:center; gap:14px; padding:14px 20px; border-top:1.5px dashed var(--dim); background:var(--paper); }
.rt-typing { font-size:13px; color:var(--muted); }

/* realtime tutor: busy overlay + control selects */
.rt-board { position: relative; }
.board-busy { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:12px;
  background:rgba(253,250,242,.78); z-index:6; font-family:var(--head); font-weight:700; font-size:21px; color:var(--ink); }
.board-busy .spinner { width:26px; height:26px; border-width:3px; }
#voiceSel, #speedSel { max-width:170px; font-family:var(--hand); cursor:pointer; }
.rt-imgwait { display:flex; align-items:center; justify-content:center; gap:8px; width:280px; height:160px; color:var(--ink-soft); font-family:var(--hand); font-size:14px; }

/* interactive simulation widget (the `simulation` board op) — an iframe sandbox */
.rt-sim { border:1.8px solid var(--ink); border-radius:12px; background:var(--paper-2); padding:10px 12px 12px; max-width:480px; }
.rt-sim-head { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.rt-sim-title { font-family:var(--head); font-weight:700; font-size:17px; }
.rt-sim-pill { font-size:10px; text-transform:uppercase; letter-spacing:.6px; color:#fff; background:var(--accent); border-radius:20px; padding:2px 8px; }
.rt-sim-frame { width:100%; border:0; background:transparent; display:block; }
.rt-sim-note { font-size:12px; color:var(--muted); }

/* ───────────────────────────────────────────────────────────────────
   Landing site (#/) — one-page marketing, same hand-drawn system.
   ─────────────────────────────────────────────────────────────────── */

/* button variants used by the landing CTAs (map onto the theme) */
.btn.primary { background: var(--accent); color: #fff; font-weight: 700; }
.btn.ghost   { background: var(--paper); color: var(--ink); }
.btn.big     { padding: 11px 26px; font-size: 16px; }

.site { max-width: 1080px; margin: 0 auto; padding: 0 22px 40px; }
.site-nav { display: flex; align-items: center; gap: 16px; padding: 18px 2px; }
.site-links { display: flex; gap: 18px; }
.site-links a { font-size: 15px; color: var(--ink-soft); }
.site-links a:hover { color: var(--ink); }

.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 30px; align-items: center; padding: 26px 0 40px; }
.hero-copy { display: flex; flex-direction: column; gap: 14px; }
.pill { align-self: flex-start; padding: 4px 12px; border-radius: 14px; background: var(--paper-2); font-size: 13px; }
.display { font-family: var(--head); font-weight: 700; font-size: 64px; line-height: 0.98; margin: 2px 0; }
.u-accent { color: var(--accent); }
.lede { font-size: 18px; line-height: 1.45; max-width: 36ch; }
.topic-search {
  display: flex; align-items: center; gap: 8px;
  width: min(100%, 560px);
  padding: 8px; border-radius: 28px; background: var(--paper);
  border: 1.5px solid var(--ink);
  box-shadow: 0 10px 0 rgba(71,115,217,.12);
}
.topic-search-input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: var(--hand); color: var(--ink); font-size: 18px; padding: 8px 10px;
}
.topic-search-input::placeholder { color: var(--muted); }
.topic-example {
  font-family: var(--hand); color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--dim); border-radius: 14px; padding: 2px 9px;
  cursor: pointer; font-size: 12px;
}
.topic-example:hover { color: var(--ink); border-color: var(--ink); }

.hero-art { aspect-ratio: 4/3; border-radius: 16px; background: var(--paper-2); padding: 18px; display: flex; }
.sk-soft { border: 1.5px dashed var(--dim); }
.board-mini { flex: 1; border-radius: 10px; background: var(--paper); border: 1.5px solid var(--ink); position: relative; padding: 18px; overflow: hidden; }
.bm-eq { font-family: var(--head); font-size: 30px; color: var(--accent); }
.bm-line { height: 8px; border-radius: 6px; background: var(--paper-3); margin-top: 14px; }
.accent-line { background: var(--accent-soft); }
.bm-tag { position: absolute; bottom: 12px; left: 18px; font-size: 13px; color: var(--ink-soft); }
.bm-tag.top { position: static; text-transform: uppercase; letter-spacing: .5px; font-size: 11px; margin-bottom: 8px; }
.mini-check {
  position: absolute; right: 16px; bottom: 42px;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 150px; padding: 12px; border-radius: 10px;
  background: var(--good-soft); border: 1.5px solid var(--ink);
}

.feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 10px 0 30px; }
.feat { background: var(--paper); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.feat-ico { font-size: 26px; }

.subjects-band { background: var(--paper-2); border-radius: 16px; padding: 26px; margin: 8px 0 30px; }
.subj-chip { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: var(--paper); font-size: 16px; }
.parent-band {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items: center;
  background: var(--paper); border-radius: 16px; padding: 26px; margin: 0 0 30px;
}
.parent-band p { max-width: 54ch; line-height: 1.45; }
.parent-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric {
  min-height: 96px; display: flex; flex-direction: column; justify-content: space-between;
  border: 1.5px solid var(--ink); border-radius: 10px; padding: 12px; background: var(--paper-2);
}
.metric b { font-family: var(--head); font-size: 26px; line-height: 1; }

.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 4px 0 34px; }
.step { display: flex; gap: 14px; align-items: flex-start; }
.step-n { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--head); font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

.cta { text-align: center; background: var(--paper-2); border-radius: 16px; padding: 34px; margin-bottom: 28px; }
.site-foot { display: flex; align-items: center; gap: 10px; padding-top: 18px; border-top: 1.5px dashed var(--dim); flex-wrap: wrap; }

.site-foot a { color: var(--ink-soft); border-bottom: 1px dashed var(--dim); }
.site-foot a:hover { color: var(--ink); }
.foot-links { display: flex; gap: 16px; }

/* ── Support page ───────────────────────────────────────────────── */
.support-wrap { display: flex; justify-content: center; padding: 24px 0 36px; }
.support-card { width: 100%; max-width: 620px; padding: 26px 28px; }
.support-card .label { margin-top: 2px; }

/* ── AI-accuracy disclaimer (tutor + test views) ────────────────────── */
.ai-note {
  font-size: 12px; color: var(--muted); text-align: center;
  padding: 6px 14px; background: var(--paper-2);
  border-bottom: 1.5px dashed var(--dim); flex-shrink: 0;
}
.content > .ai-note { border: 1.5px dashed var(--dim); border-radius: 10px; margin-bottom: 12px; }

/* ── Legal pages (Terms, Privacy) ───────────────────────────────────── */
.legal { font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.legal h2 { font-family: var(--head); font-weight: 700; font-size: 25px; color: var(--ink); margin: 22px 0 6px; }
.legal h3 { font-family: var(--head); font-weight: 700; font-size: 19px; color: var(--ink); margin: 16px 0 4px; }
.legal p { margin: 0 0 10px; }
.legal ul { margin: 4px 0 12px; padding-left: 20px; }
.legal li { margin: 3px 0; }
.legal a { color: var(--accent); border-bottom: 1px dashed var(--dim); }
.legal a:hover { color: var(--ink); }
.legal code { background: var(--paper-2); border: 1px solid var(--dim); border-radius: 5px; padding: 1px 5px; font-size: 13px; }
.legal.updated { font-size: 13px; color: var(--muted); margin-bottom: 4px; }

/* ── Cookie notice ──────────────────────────────────────────────── */
.cookie-bar {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 1000; max-width: 720px; width: calc(100% - 32px);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 18px; background: var(--paper); border-radius: 16px;
  box-shadow: 0 8px 28px rgba(26,26,26,.16);
}
.cookie-msg { flex: 1; min-width: 220px; font-size: 13px; color: var(--ink-soft); }
.cookie-msg a { color: var(--accent); border-bottom: 1px dashed var(--accent); }
.cookie-acts { display: flex; gap: 8px; align-items: center; }

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .display { font-size: 48px; }
  .feats { grid-template-columns: repeat(2, 1fr); }
  .parent-band { grid-template-columns: 1fr; }
  .how { grid-template-columns: 1fr; }
  .site-links { display: none; }
}

@media (max-width: 520px) {
  .topic-search { align-items: stretch; flex-direction: column; border-radius: 18px; }
  .topic-search .btn { justify-content: center; width: 100%; }
  .feats { grid-template-columns: 1fr; }
  .parent-metrics { grid-template-columns: 1fr; }
  .foot-links { flex-wrap: wrap; gap: 10px; }
}

@media (max-width: 720px) {
  .dashboard-grid, .parent-dashboard-grid, .admin-grid, .generate-grid {
    grid-template-columns: 1fr;
  }
  .generate-grid > .card, .generate-grid > .col { overflow: visible !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Gamified redesign (game.js) — scoped under .game so legacy views are untouched.
   Ported from wireframes/gamification.html. Sketch theme, calm gamification.
   ════════════════════════════════════════════════════════════════════════════ */
.app.game{
  --paper:#fdfaf2; --paper-2:#f4efe0; --paper-3:#ebe5d2; --dim:#cfc9b8; --muted:#999;
  --ink-soft:#4a4a4a; --good:#5a9b6f; --good-soft:#d8ecdd;
  --warn:#c97a3a; --warn-soft:#f3e0cf; --bad:#c0504d; --bad-soft:#f3d9d8;
  --head:'Caveat',cursive; --hand:'Kalam','Patrick Hand',cursive;
  --skc:var(--sk-line);   /* --sk-line now lives in :root (single source) */
  max-width:1180px; margin:0 auto; background:var(--paper); border:2px solid var(--sk-line);
  border-radius:18px; overflow:hidden; display:flex; flex-direction:column; --skw:2px;
  font-family:var(--hand);
}
.game .topbar{display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1.5px dashed var(--dim);background:var(--paper);flex-shrink:0;}
.game .brand{font-family:var(--head);font-size:23px;font-weight:700;letter-spacing:.5px;color:var(--ink);display:inline-flex;align-items:center;}
.game .brand-dot{display:inline-block;width:11px;height:11px;border-radius:50%;background:var(--accent);border:1.5px solid var(--ink);margin-right:5px;}
.game .stage{flex:1;display:flex;min-height:0;}
.game .leftnav{width:158px;padding:16px 10px;border-right:1.5px dashed var(--dim);display:flex;flex-direction:column;gap:3px;background:var(--paper);flex-shrink:0;}
.game .content{flex:1;padding:24px 26px;overflow-y:auto;display:flex;flex-direction:column;gap:20px;min-width:0;}
.game .navitem{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1.5px solid transparent;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--ink-soft);text-decoration:none;}
.game .navitem:hover{background:var(--paper-2);}
.game .navitem.active{background:var(--ink);color:var(--paper);}
.game .navitem .ni-ico{width:18px;text-align:center;font-size:14px;opacity:.85;}
.game .navsep{height:1px;border-top:1px dashed var(--dim);margin:8px 6px;}
.game .phead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.game .eyebrow{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.game .h2{font-family:var(--head);font-weight:700;font-size:26px;line-height:1.1;margin:0;}
.game .h3{font-family:var(--head);font-weight:700;font-size:19px;line-height:1.1;margin:0;}
.game .h4{font-family:var(--head);font-weight:700;font-size:16px;margin:0;}
.game .h1{font-family:var(--head);font-weight:700;margin:0;}
.game .small{font-size:13px;}.game .xs{font-size:12px;}.game .xxs{font-size:11px;}
.game .muted{color:var(--muted);}.game .softink{color:var(--ink-soft);}.game .accent-text{color:var(--accent);}
.game .bold{font-weight:700;}.game .upper{text-transform:uppercase;letter-spacing:.6px;}
.game .row{display:flex;align-items:center;gap:8px;}.game .col{display:flex;flex-direction:column;}
.game .between{justify-content:space-between;}.game .center{justify-content:center;align-items:center;}
.game .wrap{flex-wrap:wrap;}.game .flex1{flex:1;}
.game .gap-4{gap:4px;}.game .gap-6{gap:6px;}.game .gap-8{gap:8px;}.game .gap-10{gap:10px;}.game .gap-12{gap:12px;}
.game .gap-14{gap:14px;}.game .gap-16{gap:16px;}.game .gap-18{gap:18px;}.game .gap-20{gap:20px;}.game .gap-24{gap:24px;}
.game .mt-6{margin-top:6px;}.game .mt-12{margin-top:12px;}.game .mt-16{margin-top:16px;}.game .mt-20{margin-top:20px;}
.game .card{border:1.5px solid var(--ink);border-radius:8px;background:var(--paper);padding:16px;}
.game .card-dim{background:var(--paper-2);}
.game .card-quiet{border-color:var(--dim);}
.game .hr{border:none;border-top:1px dashed var(--dim);margin:4px 0;}
.game .tag{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border:1.2px solid var(--dim);border-radius:12px;font-size:12px;background:var(--paper);color:var(--ink-soft);cursor:default;text-decoration:none;}
.game .tag.solid{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.game .tag.good{background:var(--good-soft);border-color:var(--good);color:#2f6b45;}
.game .tag.warn{background:var(--warn-soft);border-color:var(--warn);color:#8a4a18;}
.game .tag.accent{background:var(--accent-soft);border-color:var(--accent);color:#2c4ea3;}
.game .tag.dashed{border-style:dashed;}.game .tag.click{cursor:pointer;}
.game .sp{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border:1.2px solid var(--dim);border-radius:12px;font-size:12.5px;background:var(--paper);white-space:nowrap;color:var(--ink);}
.game .sp .star{opacity:.5;font-size:11px;}.game .sp b{font-weight:700;}
.game .sp.lg{font-size:14px;padding:3px 11px;}.game .sp.flat{border:none;padding:0;}
.game .btn{font-family:var(--hand);cursor:pointer;border:1.5px solid var(--ink);background:var(--paper);border-radius:20px;padding:6px 14px;font-size:13px;color:var(--ink);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none;}
.game .btn-solid{background:var(--accent);color:#fff;font-weight:700;}
.game .btn-ink{background:var(--ink);color:var(--paper);}
.game .btn-sm{padding:3px 11px;font-size:12px;}.game .btn-lg{padding:9px 22px;font-size:15px;}
.game .btn:disabled{opacity:.5;cursor:default;}
.game .btn-done{background:var(--good)!important;color:#fff!important;border-color:var(--good)!important;}
.game .av{border-radius:50%;background:var(--paper-2);border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:700;flex-shrink:0;width:34px;height:34px;font-size:14px;}
.game .av-sm{width:26px;height:26px;font-size:11px;}.game .av-lg{width:52px;height:52px;font-size:20px;}
.game .bar{height:7px;border:1.4px solid var(--ink);border-radius:6px;background:var(--paper);overflow:hidden;}
.game .bar>i{display:block;height:100%;background:var(--accent);}
.game .bar.good>i{background:var(--good);}.game .bar.warn>i{background:var(--warn);}.game .bar.ink>i{background:var(--ink);}
.game .seg{display:inline-flex;border:1.4px solid var(--ink);border-radius:16px;overflow:hidden;}
.game .seg>span{padding:5px 13px;font-size:12.5px;cursor:pointer;border-right:1.1px solid var(--ink);background:var(--paper);color:var(--ink-soft);}
.game .seg>span:last-child{border-right:none;}
.game .seg>span.on{background:var(--ink);color:var(--paper);font-weight:700;}
.game .streak{display:inline-flex;align-items:center;gap:4px;padding:2px 9px;border:1.2px solid var(--dim);border-radius:12px;font-size:12.5px;color:var(--ink-soft);}
.game .ddwrap{position:relative;display:inline-block;}
.game .ddwrap::after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:11px;color:var(--ink-soft);}
.game .dd{font-family:var(--hand);font-weight:700;font-size:14px;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:18px;padding:7px 34px 7px 15px;cursor:pointer;appearance:none;-webkit-appearance:none;outline:none;}
/* reset the legacy .metric (old dashboard) border/min-height that leaks in */
.game .metric{display:flex;flex-direction:column;gap:2px;border:none;border-radius:0;min-height:0;background:none;padding:0;justify-content:flex-start;}
.game .metric .mv{font-family:var(--head);font-weight:700;font-size:30px;line-height:1;}
.game .metric .ml{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;}
.game .statstrip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.game .statstrip>div{padding:0 16px;border-right:1px dashed var(--dim);}
.game .statstrip>div:last-child{border-right:none;}.game .statstrip>div:first-child{padding-left:0;}
.game .grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:18px;}
.game .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.game .cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:14px;}
.game .cat-tile{border:1.4px solid var(--dim);border-radius:10px;background:var(--paper);padding:15px;cursor:pointer;display:flex;flex-direction:column;gap:9px;min-height:130px;position:relative;}
.game .cat-tile:hover{border-color:var(--ink);background:var(--paper-2);}
.game .cat-ico{width:40px;height:40px;border:1.4px solid var(--dim);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--paper-2);}
.game .citem{display:flex;align-items:center;gap:13px;border:1.4px solid var(--dim);border-radius:8px;background:var(--paper);padding:11px 13px;}
.game .citem.cur{border-color:var(--accent);}
.game .ctype{width:32px;height:32px;border:1.3px solid var(--dim);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--paper-2);flex-shrink:0;}
.game .cthumb{width:50px;height:38px;flex-shrink:0;}
.game .badge{width:58px;height:58px;border-radius:50%;border:1.8px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:25px;background:var(--paper-2);flex-shrink:0;}
.game .badge.locked{background:var(--paper-3);filter:grayscale(.85);opacity:.5;}
.game .badge-cell{display:flex;flex-direction:column;align-items:center;gap:6px;width:84px;text-align:center;}
.game .ring{position:relative;width:108px;height:108px;flex-shrink:0;}
.game .ring svg{transform:rotate(-90deg);}
.game .ring .ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.game .feed-item{display:flex;align-items:center;gap:11px;padding:9px 2px;border-bottom:1px dashed var(--dim);}
.game .feed-item:last-child{border-bottom:none;}
.game .feed-ico{width:28px;height:28px;border:1.3px solid var(--dim);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;background:var(--paper-2);flex-shrink:0;}
.game .earn{font-family:var(--head);font-weight:700;font-size:17px;white-space:nowrap;color:var(--ink);}
.game .earn.neg{color:var(--bad);}
.game .lb-row{display:flex;align-items:center;gap:12px;padding:9px 13px;border:1.4px solid var(--dim);border-radius:8px;background:var(--paper);}
.game .lb-row.me{background:var(--accent-soft);border-color:var(--accent);}
.game .lb-rank{width:26px;text-align:center;font-family:var(--head);font-weight:700;font-size:20px;color:var(--ink-soft);}
.game .heat{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;}
.game .cell{aspect-ratio:1;border:1px solid var(--dim);border-radius:2px;background:var(--paper);}
.game .cell.l1{background:var(--accent-soft);border-color:var(--accent-soft);}
.game .cell.l2{background:#9fb0e0;border-color:#9fb0e0;}
.game .cell.l3{background:var(--accent);border-color:var(--accent);}
.game .maptbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
.game .maptbl th{text-align:left;font-family:var(--head);font-weight:700;font-size:15px;padding:7px 12px;border-bottom:1.5px solid var(--ink);color:var(--ink-soft);}
.game .maptbl td{padding:9px 12px;border-bottom:1px dashed var(--dim);vertical-align:middle;}
.game .code{font-family:'JetBrains Mono',monospace;font-size:11.5px;background:var(--paper-2);border:1px solid var(--dim);border-radius:5px;padding:1px 6px;color:var(--ink-soft);}
.game .pts-input{width:50px;font-family:var(--head);font-weight:700;font-size:16px;text-align:center;border:1.3px solid var(--dim);border-radius:8px;padding:3px;background:var(--paper);color:var(--ink);}
.game .toggle{width:36px;height:21px;border:1.3px solid var(--ink);border-radius:12px;background:var(--good);position:relative;cursor:pointer;}
.game .toggle::after{content:"";position:absolute;top:1.5px;right:1.5px;width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid var(--ink);}
.game .toggle.off{background:var(--paper-2);}.game .toggle.off::after{right:auto;left:1.5px;}
.game .rule-card-list{display:none;}
.game .rule-card{border:1.4px solid var(--dim);border-radius:8px;background:var(--paper);padding:12px;display:flex;flex-direction:column;gap:12px;}
.game .rule-card .code{align-self:flex-start;max-width:100%;overflow-wrap:anywhere;}
.game .rule-card .pts-input{flex:none;}
.game .store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:14px;}
.game .store-card{border:1.4px solid var(--dim);border-radius:10px;background:var(--paper);overflow:hidden;display:flex;flex-direction:column;}
.game .store-card .sc-art{height:88px;}
.game .searchwrap{position:relative;}
.game .search{font-family:var(--hand);font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:22px;padding:10px 18px;outline:none;width:100%;}
.game .search::placeholder{color:var(--muted);}
.game .results{position:absolute;top:52px;left:0;right:0;background:var(--paper);border:1.5px solid var(--ink);border-radius:12px;padding:8px;z-index:20;box-shadow:0 5px 0 rgba(0,0,0,.06);}
.game .res-item{display:flex;align-items:center;gap:11px;padding:9px;border-radius:7px;cursor:pointer;}
.game .res-item:hover{background:var(--paper-2);}
.game .res-ico{width:32px;height:32px;border:1.3px solid var(--dim);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:15px;background:var(--paper-2);flex-shrink:0;}
.game .note-area{font-family:var(--hand);font-size:13px;color:var(--ink);background:var(--paper-2);border:1.4px solid var(--dim);border-radius:8px;padding:10px;width:100%;min-height:84px;outline:none;resize:vertical;}
.game .note-area:focus{border-color:var(--accent);}
.game .hl{background:var(--warn-soft);border-bottom:2px solid var(--warn);padding:0 2px;}
.game .playbar{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1.4px solid var(--ink);border-radius:30px;background:var(--paper);}
.game .playbtn{width:40px;height:40px;border-radius:50%;border:1.7px solid var(--ink);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;flex-shrink:0;}
.game .scrub{flex:1;height:6px;border:1.3px solid var(--ink);border-radius:6px;background:var(--paper);overflow:hidden;position:relative;cursor:pointer;}
.game .scrub>i{display:block;height:100%;background:var(--accent);}
.game .scrub>span{position:absolute;top:-4px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:1.7px solid var(--ink);transform:translateX(-50%);}
.game .rollup{display:flex;align-items:center;gap:8px;font-size:12px;}
.game .rollup .node{display:flex;align-items:center;gap:6px;padding:4px 9px;border:1.3px solid var(--dim);border-radius:14px;background:var(--paper);}
.game .rollup .node.on{border-color:var(--good);background:var(--good-soft);color:#2f6b45;font-weight:700;}
.game .rollup .arw{color:var(--muted);}
.game .ph{position:relative;background:repeating-linear-gradient(135deg,var(--paper-2) 0,var(--paper-2) 7px,var(--paper-3) 7px,var(--paper-3) 14px);border:1.4px solid var(--dim);border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--muted);text-align:center;padding:6px;}
/* ── Global sketchy lines ──────────────────────────────────────────────────
   Reusable hand-drawn border: any element gets a wobbly stroke via the shared
   #sketch SVG filter (defined in index.html), instead of a straight CSS border.
   Add the `.sketchy` class to opt in, or it's auto-applied to the game
   components below. Tune per element with --skw (width) / --skc (colour).
   Excludes form fields + elements that already use ::after (.ddwrap arrow,
   .toggle knob) — those keep plain borders to avoid the ::after collision. */
.game .sketchy,
.game .card, .game .cat-tile, .game .citem, .game .ctype, .game .cat-ico,
.game .feed-ico, .game .res-ico, .game .lb-row, .game .rule-card, .game .store-card, .game .playbar,
.game .playbtn, .game .badge, .game .av, .game .tag, .game .sp,
.game .btn, .game .seg, .game .ph, .game .rollup .node,
.game .card-dim .statstrip { position: relative; border-color: transparent !important; }

.game .sketchy::after,
.game .card::after, .game .cat-tile::after, .game .citem::after, .game .ctype::after,
.game .cat-ico::after, .game .feed-ico::after, .game .res-ico::after, .game .lb-row::after, .game .rule-card::after,
.game .store-card::after, .game .playbar::after, .game .playbtn::after,
.game .badge::after, .game .av::after, .game .tag::after, .game .sp::after, .game .btn::after,
.game .seg::after, .game .ph::after, .game .rollup .node::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  border: var(--skw, 1.4px) solid var(--skc, var(--sk-line));
  filter: url(#sketch); pointer-events: none;
}
/* per-component stroke weights */
.game .tag, .game .sp { --skw: 1.2px; }
.game .card, .game .av, .game .playbar { --skw: 1.5px; }
.game .badge, .game .playbtn { --skw: 1.8px; }
/* default (dim) outlines for the quiet borders */
.game .cat-tile, .game .citem, .game .ctype, .game .cat-ico, .game .feed-ico,
.game .res-ico, .game .lb-row, .game .rule-card, .game .store-card, .game .ph, .game .tag, .game .sp,
.game .rollup .node, .game .card-quiet { --skc: var(--dim); }
.game .cat-tile:hover, .game .citem:hover { --skc: var(--ink); }
/* coloured outlines — keep the status colour on the sketchy stroke */
.game .tag.good, .game .rollup .node.on { --skc: var(--good); }
.game .tag.warn { --skc: var(--warn); }
.game .tag.accent, .game .citem.cur, .game .lb-row.me { --skc: var(--accent); }
.game .tag.solid, .game .btn-ink { --skc: var(--ink); }
.game .btn-solid { --skc: var(--ink); }
/* bars/scrubbers keep a thin straight border so the coloured fill stays visible */
/* the segmented control keeps its internal dividers but gets a sketchy outer edge */
.game .seg { --skw: 1.4px; }

/* calendar heatmap — 7 weekday rows × week columns (GitHub-style) */
.game .heatcal-wrap{display:flex;gap:8px;align-items:flex-start;overflow-x:auto;}
.game .heatcal-days{display:grid;grid-template-rows:repeat(7,15px);gap:4px;flex-shrink:0;}
.game .heatcal-days .wd{display:flex;align-items:center;height:15px;font-size:9px;color:var(--muted);line-height:1;}
.game .heatcal{display:grid;grid-template-rows:repeat(7,15px);grid-auto-flow:column;grid-auto-columns:15px;gap:4px;}
.game .heatcal .cell{width:15px;height:15px;aspect-ratio:auto;}
.game .cell.pad{background:transparent;border-color:transparent;}
.game .heatcal .cell[data-d]{cursor:pointer;}
.heat-tip{position:fixed;z-index:10000;display:none;background:#1a1a1a;color:#fdfaf2;font-family:'Kalam',cursive;font-size:12px;padding:7px 11px;border-radius:8px;box-shadow:0 4px 14px rgba(0,0,0,.28);pointer-events:none;max-width:200px;line-height:1.4;}
.heat-tip b{font-family:'Caveat',cursive;font-size:15px;}
.heat-tip span{color:#cfc9b8;}

@media(max-width:900px){
  .game .grid2,.game .grid3{grid-template-columns:1fr;}
  .game .statstrip{grid-template-columns:repeat(2,1fr);gap:14px;}
  /* mobile: turn the side nav into a scrollable top strip (don't hide it) */
  .game .stage{flex-direction:column;}
  .game .leftnav{width:auto;flex-direction:row;overflow-x:auto;border-right:none;border-bottom:1.5px dashed var(--dim);gap:6px;padding:10px;}
  .game .navsep{display:none;}
  .game .navitem{white-space:nowrap;}
  .game .rules-table-card{display:none;}
  .game .rule-card-list{display:flex;flex-direction:column;gap:10px;}
}

/* language switcher (public footer + gamified topbar) */
.locale-switch{display:inline-flex;align-items:center;gap:4px;}
.locale-switch select{font-family:var(--hand,'Kalam',cursive);font-size:12px;border:1.3px solid var(--dim,#cfc9b8);border-radius:14px;padding:3px 8px;background:var(--paper,#fdfaf2);color:var(--ink,#1a1a1a);cursor:pointer;outline:none;}

/* Account / profile dropdown (top-bar avatar → log out menu) */
.profile{position:relative;display:inline-flex;}
.profile>.av{cursor:pointer;padding:0;}
.profile-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:50;min-width:180px;background:var(--paper,#fdfaf2);border:1.5px solid var(--ink,#1a1a1a);border-radius:12px;padding:6px;box-shadow:2px 3px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;gap:2px;}
.profile-menu[hidden]{display:none;}
.profile-menu .pm-head{display:flex;align-items:center;gap:8px;padding:6px 8px 8px;border-bottom:1.3px dashed var(--dim,#cfc9b8);margin-bottom:4px;}
.profile-menu .pm-item{display:block;text-align:left;width:100%;font-family:var(--hand,'Kalam',cursive);font-size:14px;color:var(--ink,#1a1a1a);background:none;border:none;border-radius:8px;padding:8px 10px;cursor:pointer;text-decoration:none;}
.profile-menu .pm-item:hover{background:var(--paper-2,#f4eedd);}
.profile-menu .pm-danger{color:#b3261e;}

/* ══════════════════════════════════════════════════════════════════════════
   Sparky whiteboard tutor (#/lesson) — single-board UI + the Sparky mascot.
   Reuses the global .rt-board engine; chrome is scoped under .stutor.
   ══════════════════════════════════════════════════════════════════════════ */
.stutor{display:flex;flex-direction:column;height:100vh;height:100dvh;max-width:none;margin:0;padding:0;background:var(--paper);}
.stutor .stutor-top{display:flex;align-items:center;gap:9px;padding:9px 16px;border-bottom:1.4px dashed var(--dim);flex-wrap:wrap;}
.stutor .stutor-top .brand{font-family:var(--head);font-size:22px;font-weight:700;display:flex;align-items:center;gap:7px;}
.stutor .stutor-top .brand-dot{width:12px;height:12px;border-radius:50%;background:var(--accent);}
.stutor .crumb{font-size:12px;color:var(--muted);}
.stutor .icon-btn{width:30px;height:30px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--paper);font-size:14px;cursor:pointer;--skw:1.4px;--skc:var(--ink);}
.stutor .icon-btn.on{background:var(--accent);color:#fff;}
/* Mic ON (idle/ready) = calm light green, steady. Mic HEARING you = blinking red. */
.stutor .icon-btn.live{background:var(--good-soft);color:var(--good);}
.stutor.mic-hearing .icon-btn.live{background:var(--bad);color:#fff;animation:micpulse 1s ease-in-out infinite;}
.stutor .mic-tag{display:none;align-items:center;gap:6px;font-size:11px;color:var(--good);background:var(--good-soft);border-radius:13px;padding:3px 10px;--skw:1.3px;--skc:var(--good);}
.stutor.mic-live .mic-tag{display:inline-flex;}
.stutor .mic-tag .dot{width:7px;height:7px;border-radius:50%;background:var(--good);}   /* steady green = ready */
.stutor.mic-hearing .mic-tag{color:var(--bad);background:var(--bad-soft);--skc:var(--bad);}
.stutor.mic-hearing .mic-tag .dot{background:var(--bad);animation:micdot .9s ease-in-out infinite;}   /* blink red = capturing */
.stutor .mic-tag .lbl-hear{display:none;}                 /* idle = just the green dot */
.stutor.mic-hearing .mic-tag .lbl-hear{display:inline;}   /* capturing = "listening…" */
@keyframes micdot{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes micpulse{0%,100%{box-shadow:0 0 0 0 rgba(192,80,77,.5)}50%{box-shadow:0 0 0 7px rgba(192,80,77,0)}}

.stutor .stutor-prog{height:4px;background:var(--paper-2);flex:none;}
.stutor .stutor-prog>i{display:block;height:100%;width:0;background:var(--accent);transition:width .6s ease;}

.stutor .stutor-wrap{position:relative;flex:1;overflow:hidden;}
.stutor .rt-board{position:absolute;inset:0;}
.stutor .st-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:15px;text-align:center;padding:20px;}
.stutor .st-script{font-size:13px;color:var(--ink-soft);margin:6px 0 2px;padding-left:11px;border-left:2px solid var(--paper-3);font-style:italic;}
.stutor.tx-off .st-script{display:none;}
.stutor .u-note-pin{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;font-size:11px;vertical-align:super;cursor:pointer;margin-left:2px;}
.uhl{background:var(--accent-soft);border-bottom:2px solid var(--accent);border-radius:2px;padding:0 1px;}

.stutor .stutor-bottom{display:flex;align-items:center;gap:12px;padding:11px 16px;border-top:1.4px dashed var(--dim);flex:none;flex-wrap:wrap;}
.stutor .caption{flex:1;min-width:160px;text-align:center;font-size:15px;color:var(--ink-soft);}

/* ── Sparky mascot (bottom-right of the board) ── */
.stutor #sparky{position:absolute;right:18px;bottom:14px;width:58px;z-index:18;cursor:pointer;}
.stutor .sk-body{position:relative;width:58px;height:58px;border-radius:50%;background:var(--accent);box-shadow:inset -5px -7px 0 rgba(0,0,0,.14);}
.stutor .sk-ring{position:absolute;inset:-7px;border-radius:50%;border:2px solid var(--accent);opacity:0;}
.stutor.speaking .sk-ring{animation:ring 1.5s ease-out infinite;}
.stutor.speaking .sk-ring.r2{animation-delay:.55s;}
@keyframes ring{0%{transform:scale(.8);opacity:.5}100%{transform:scale(1.45);opacity:0}}
.stutor .eye{position:absolute;top:34%;width:18%;height:24%;border-radius:50%;background:#fff;animation:blink 4.4s infinite;}
.stutor .eye.l{left:25%}.stutor .eye.r{right:25%}
.stutor .eye::after{content:"";position:absolute;bottom:16%;left:28%;width:44%;height:44%;border-radius:50%;background:var(--ink);}
@keyframes blink{0%,95%,100%{transform:scaleY(1)}97.5%{transform:scaleY(.1)}}
.stutor .mouth{position:absolute;left:50%;top:60%;background:#241a14;border-radius:0 0 30px 30px;width:22%;height:8%;transform:translateX(-50%) scaleY(var(--m,1));transform-origin:center top;transition:transform .09s ease;}
.stutor.speaking .sk-body{animation:bob .5s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.stutor .spark{position:absolute;top:-14px;left:50%;font-size:16px;opacity:0;}
.stutor #sparky.jump .sk-body{animation:skojump .7s ease !important;}
@keyframes skojump{0%{transform:translateY(0)}25%{transform:translateY(-34px) rotate(-6deg)}45%{transform:translateY(0)}62%{transform:translateY(-13px)}100%{transform:translateY(0)}}
.stutor #sparky.jump .spark,.stutor #sparky.fun-flaugh .spark{animation:sparkle .8s ease;}
@keyframes sparkle{0%{opacity:0;transform:translate(-50%,0) scale(.4)}40%{opacity:1;transform:translate(-50%,-14px) scale(1.1)}100%{opacity:0;transform:translate(-50%,-26px) scale(.7)}}
.stutor #sparky.fun-fjs .sk-body{animation:fjs .7s ease !important}@keyframes fjs{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
.stutor #sparky.fun-fjb .sk-body{animation:fjb 1s ease !important}@keyframes fjb{0%{transform:translateY(0)}25%{transform:translateY(-52px) scale(1.06)}50%{transform:translateY(0)}72%{transform:translateY(-20px)}100%{transform:translateY(0)}}
.stutor #sparky.fun-fspin .sk-body{animation:fspin .9s ease !important}@keyframes fspin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.stutor #sparky.fun-flaugh .sk-body{animation:flaugh .9s ease !important}@keyframes flaugh{0%,100%{transform:rotate(0)}15%{transform:rotate(-13deg) translateY(-4px)}30%{transform:rotate(11deg)}45%{transform:rotate(-9deg) translateY(-3px)}60%{transform:rotate(8deg)}75%{transform:rotate(-5deg)}}
.stutor #sparky.fun-fdash .sk-body{animation:fdash 1.1s ease !important}@keyframes fdash{0%{transform:translateX(0)}30%{transform:translateX(-52vw) rotate(-8deg)}55%{transform:translateX(-52vw) rotate(0)}100%{transform:translateX(0)}}
.stutor #sparky.fun-fflip .sk-body{animation:fflip 1s ease !important}@keyframes fflip{0%{transform:perspective(220px) rotateY(0)}100%{transform:perspective(220px) rotateY(360deg)}}

/* ── Ask-Sparky pill (hover tooltip) + chat box ── */
.stutor .ask-pill{position:absolute;right:14px;bottom:84px;z-index:19;display:inline-flex;align-items:center;gap:8px;background:var(--paper);border-radius:18px;padding:6px 12px;font-size:13px;cursor:pointer;--skw:1.5px;--skc:var(--ink);box-shadow:0 5px 0 rgba(0,0,0,.05);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s ease,transform .25s ease;}
.stutor .ask-pill.show{opacity:1;transform:translateY(0);pointer-events:auto;}
.stutor .ask-pill .mic{width:22px;height:22px;border-radius:50%;background:var(--accent-soft);display:inline-flex;align-items:center;justify-content:center;font-size:12px;}
.stutor .chatbox{position:absolute;right:14px;bottom:84px;width:306px;max-width:80vw;z-index:32;background:var(--paper);border-radius:14px;display:none;flex-direction:column;overflow:hidden;--skw:1.6px;--skc:var(--ink);box-shadow:0 8px 0 rgba(0,0,0,.07);}
.stutor .chatbox.show{display:flex;}
.stutor .cb-head{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1.3px dashed var(--dim);}
.stutor .cb-head .t{font-family:var(--head);font-size:18px;}.stutor .cb-head .x{margin-left:auto;cursor:pointer;color:var(--muted);font-size:16px;}
.stutor .cb-quick{padding:9px 11px;border-bottom:1.3px dashed var(--dim);display:flex;flex-direction:column;gap:8px;}
.stutor .cb-row{display:flex;align-items:center;gap:8px;}.stutor .ql{font-size:11px;color:var(--muted);}
.stutor .cb-chips{display:flex;flex-wrap:wrap;gap:6px;}
.stutor .cb-chips button{font-size:11.5px;background:var(--paper-2);color:var(--ink);border:none;border-radius:13px;padding:5px 10px;cursor:pointer;--skw:1.3px;--skc:var(--dim);}
.stutor .cb-msgs{padding:11px;display:flex;flex-direction:column;gap:8px;max-height:170px;overflow-y:auto;}
.stutor .msg{font-size:13px;line-height:1.4;padding:7px 10px;border-radius:11px;max-width:84%;}
.stutor .msg.sparky{background:var(--accent-soft);align-self:flex-start;border-bottom-left-radius:3px;}
.stutor .msg.me{background:var(--paper-2);align-self:flex-end;border-bottom-right-radius:3px;}
.stutor .cb-input{display:flex;align-items:center;gap:8px;padding:9px 11px;border-top:1.3px dashed var(--dim);}
.stutor .cb-input input{flex:1;font-family:var(--hand);font-size:13px;background:var(--paper-2);border:none;border-radius:16px;padding:8px 12px;outline:none;}
.stutor .mic-btn{width:34px;height:34px;border-radius:50%;flex:none;background:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;--skw:1.5px;--skc:var(--ink);}
.stutor .mic-btn.live{background:var(--bad);color:#fff;animation:micpulse 1s ease-in-out infinite;}
.stutor .send-btn{width:34px;height:34px;border-radius:50%;flex:none;background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14px;cursor:pointer;--skw:1.5px;--skc:var(--ink);}
.stutor .cb-note{font-size:11px;color:var(--muted);padding:0 12px 8px;}

/* selection toolbar */
.stutor .seltb{position:absolute;display:none;flex-direction:column;z-index:30;background:var(--paper);border-radius:13px;padding:6px;min-width:182px;--skw:1.7px;--skc:var(--ink);box-shadow:0 7px 0 rgba(0,0,0,.07);}
.stutor .seltb.show{display:flex;animation:seltbpop .15s ease;}
@keyframes seltbpop{0%{opacity:0;transform:translateY(5px) scale(.96)}100%{opacity:1;transform:none}}
.stutor .seltb button{background:transparent;border:none;color:var(--ink);font-family:var(--hand);font-size:14px;padding:9px 12px;border-radius:10px;cursor:pointer;display:flex;align-items:center;gap:11px;text-align:left;width:100%;}
.stutor .seltb button:hover{background:var(--accent-soft);}
.stutor .seltb button .i{font-size:16px;width:20px;text-align:center;flex:none;}
.stutor .seltb button[data-act="explain"]{color:var(--accent);font-weight:700;}
.stutor .seltb .sep{height:1.3px;background:var(--paper-3);margin:3px 6px;border-radius:2px;}
.stutor .note-bubble{position:absolute;width:230px;background:var(--paper);border-radius:10px;padding:9px 11px;font-size:13px;z-index:33;--skw:1.5px;--skc:var(--warn);box-shadow:0 6px 0 rgba(0,0,0,.06);}
.stutor .note-bubble textarea{width:100%;border:none;background:var(--paper-2);border-radius:7px;padding:7px;font-family:var(--hand);font-size:13px;resize:vertical;min-height:46px;outline:none;}
.stutor .note-bubble .nb-head{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--warn);margin-bottom:5px;}
.stutor .hide{display:none !important;}

/* keep board diagrams a sane size + blend them into the whiteboard (no box/border).
   NB: exclude inline icons (.rt-ico) — they're 22px and must NOT be stretched. */
.stutor .rt-el svg:not(.rt-ico){max-width:460px;width:100%;height:auto;max-height:320px;display:block;}
.stutor .rt-ico,.stutor [data-ico]{display:none !important;}   /* no decorative icons on the lesson board */
.stutor .rt-fig{max-width:400px;border:none !important;background:transparent !important;padding:0 !important;}
.stutor .rt-fig::after{display:none !important;}   /* drop the sketch-border overlay if any */
.stutor .rt-fig img,.stutor .rt-fig svg{max-width:100%;max-height:320px;height:auto;}
.stutor .rt-fig .cap{font-size:12px;color:var(--ink-soft);text-align:center;margin-top:4px;}

/* Print / Save-PDF: export the WHOLE whiteboard top-to-bottom (multi-page).
   The wobbly frame/card borders are SVG `filter:url(#sketch)` overlays — those are
   slow to rasterise for a tall PDF and overflow onto the text, so in print we strip
   all filters + the outer frame and lay the board out as clean block flow. */
@media print {
  @page { margin: 14mm; }
  html, body, #app { height:auto !important; min-height:0 !important; background:#fff !important; }
  /* show ONLY the lesson board; hide all chrome */
  .stutor .stutor-top, .stutor .stutor-bottom, .stutor .stutor-prog,
  .stutor #sparky, .stutor .ask-pill, .stutor .chatbox, .stutor .seltb,
  .stutor #boardBusy, .stutor .st-empty, .stutor .note-bubble { display:none !important; }
  /* frame → plain block, no outer border/shadow/filter (kills slowness + edge overlap) */
  .stutor { display:block !important; height:auto !important; max-width:none !important; margin:0 !important; padding:0 !important; border:none !important; box-shadow:none !important; }
  .stutor::after, .stutor.sk::after { display:none !important; content:none !important; }   /* drop the filtered frame border */
  .stutor *::after { filter:none !important; }                                               /* no SVG filters anywhere in print */
  .stutor .sk-direct, .stutor svg[style*="filter"] { filter:none !important; }
  .stutor .stutor-wrap { position:static !important; overflow:visible !important; height:auto !important; }
  .stutor .rt-board { position:static !important; inset:auto !important; overflow:visible !important; height:auto !important; padding:0 !important; }
  .stutor .rt-space { margin:0 0 14px !important; }
  .stutor .rt-el, .stutor .rt-fig, .stutor .rt-check { break-inside:avoid; page-break-inside:avoid; }
  .stutor .rt-el svg, .stutor .rt-fig img, .stutor .rt-fig svg { max-width:100% !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FULL-BLEED APP SHELL  (UX review — Doot Sabha council verdict)
   Problem fixed: the logged-in app rendered as a 1180px framed "notebook card"
   floating in the middle — empty gutters left/right, and a ~96px dead band at
   the BOTTOM (caused by height:calc(100vh - 96px) + margin:0 auto). On a large
   monitor that read as wasted space / a bug, and cramped the whiteboard tutor.

   Direction: the logged-in app fills the viewport; width discipline moves to the
   INNER content column, not the shell. The marketing site (.site) and auth
   (.auth-card / .auth-wrap) KEEP their centered card — they are a different
   surface. Mobile (≤720px) was already full-bleed; this unifies desktop with it.
   ════════════════════════════════════════════════════════════════════════════ */
.app, .app.game {
  width: 100%;
  max-width: none;          /* was 1180px — drop the side gutters            */
  height: 100vh;            /* fallback for browsers without dvh             */
  height: 100dvh;           /* real viewport height — removes the bottom gap */
  min-height: 0;            /* was 620px — that floor helped trap the gap    */
  margin: 0;                /* was 18px/0 auto — no centering, fill the page */
  border: 0;
  border-radius: 0;
  overflow: hidden;
}
/* The visible frame was the .sk wobbly ::after overlay (the real border is
   transparent under .sk). Drop it on the shell so nothing hugs the viewport. */
.app.sk::after { content: none; display: none; }

/* Width discipline INSIDE the shell: the topbar + left rail stay edge-to-edge,
   but the scrolling content is centred and capped (~1120px) so prose stays
   legible on wide monitors. Done with symmetric inline PADDING — not a width or
   flex change — so it works whether .content is a column child (Student/Test/
   Results) or a row child of .stage (Generate/dashboard), and leaves the
   existing flex height/scroll behaviour completely untouched. */
.content, .game .content {
  padding-inline: max(22px, calc((100% - 1120px) / 2));
  min-width: 0;
}

/* The whiteboard tutor's board scrolls full-bleed (diagrams want the width),
   but the lesson blocks are capped + centred so prose lines stay readable. The
   text+figure two-column rows (.rt-cols) still fit within this cap. */
.stutor .rt-space { max-width: 1000px; margin-inline: auto; }

/* ── Semantic gradient surfaces (issue #34) ──────────────────────────────
   Soft top-to-bottom tint fading into paper + a matching sketch-border
   colour. Used semantically (the tint signals the card's meaning). All
   derived from CSS vars, so white-label --accent overrides (applyBrand)
   recolour them automatically — no hardcoded colours. Pair with .sk/.card
   so the wobbly border picks up the matching --skc. Scoped to .app and
   placed last so they win the `background` over `.game .card`. */
.app .grad-accent { background: linear-gradient(180deg, var(--accent-soft), var(--paper)); --skc: var(--accent); }
.app .grad-good   { background: linear-gradient(180deg, var(--good-soft),   var(--paper)); --skc: var(--good);   }
.app .grad-warn   { background: linear-gradient(180deg, var(--warn-soft),   var(--paper)); --skc: var(--warn);   }
.app .grad-bad    { background: linear-gradient(180deg, var(--bad-soft),    var(--paper)); --skc: var(--bad);    }
.app .grad-gold   { background: linear-gradient(180deg, var(--gold-soft),   var(--paper)); --skc: var(--gold);   }

/* ── Gamified quiz builder (#/quizzes/new) ───────────────────────────────
   Lighter, accent-tinted selected states instead of the heavier solid-ink
   chips the legacy generator uses — so the in-game builder reads as calm as
   the rest of the gamified app. Scoped to .game so #/generate, #/take and
   #/results (legacy shell) keep their existing look. */
.game .generate-grid .seg > span.on { background: var(--accent-soft); color: var(--ink); }
.game .generate-grid .div-lbl { color: var(--muted); }