/* Self-hosted Lexend (offline PWA) — replaces the prototype Google Fonts link. */
@font-face{font-family:"Lexend";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/lexend/lexend-400.woff2") format("woff2");}
@font-face{font-family:"Lexend";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/lexend/lexend-500.woff2") format("woff2");}
@font-face{font-family:"Lexend";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/lexend/lexend-600.woff2") format("woff2");}
@font-face{font-family:"Lexend";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/lexend/lexend-700.woff2") format("woff2");}

/* ═══════════════════════════════════════════════════════════════════════
   SPARK v2 — shared design system (tokens + components)
   ═══════════════════════════════════════════════════════════════════════
   Drop-in successor to style.css's token layer. Same four themes, same
   token NAMES kept where they existed (--bg, --surface, --accent…) so
   mapping into /opt/spark/public is mechanical. New tokens are additive.

   FONT: Lexend (evidence-based readability, modern, not babyish).
   Prototype loads it from Google Fonts; in the PWA self-host the woff2s
   and swap the <link> for @font-face here. Fallback = system rounded.

   RULES BAKED IN:
   • Child-facing text: never below 17px; body 20px; labels ≥ 18px.
   • Child-facing tap targets: ≥ 56px (48px absolute floor, parent UI only).
   • No colour-only meaning: every state pairs colour with icon/shape.
   • No score/grade/%/timer/streak/leaderboard components exist here.
   • Motion: ≤ 250ms, transform/opacity only, killed by reduced-motion.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── THEME TOKENS ─────────────────────────────────────────────────────── */
:root,
[data-theme="space"] {
  --bg: #0b1020;
  --surface: #141a2e;
  --surface-2: #1d2742;
  --surface-3: #273455;
  --text: #eef1f8;
  --text-soft: #a9b2cc;          /* was --muted; bumped for AA on --surface */
  --line: rgba(238, 241, 248, .10);
  --accent: #5b8cff;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(91, 140, 255, .16);
  --spark: #ffd166;              /* the ✦ currency colour */
  --spark-contrast: #2b1a02;
  --spark-soft: rgba(255, 209, 102, .14);
  --good: #4ade80;               /* "got it" — always paired with a ✓ icon */
  --good-contrast: #052e12;
  --good-soft: rgba(74, 222, 128, .15);
  --try: #ffb84d;                /* "not yet / try again" — calm amber, never red */
  --try-soft: rgba(255, 184, 77, .15);
  --error: #ff8080;              /* system errors only, never answer feedback */
  --user-bubble: #2a55c4;
  --bot-bubble: #1d2742;
  --shadow: 0 6px 24px rgba(0, 0, 0, .30);
  /* Subject identity hues (decorative — identity is carried by the ICON) */
  --sub-reading: #a78bfa;
  --sub-maths: #5b8cff;
  --sub-science: #2bc4cc;
  --sub-geography: #58c476;
  --sub-history: #f0a04b;
  --sub-general_knowledge: #e879b0;
}

[data-theme="light"] {
  --bg: #ede9e1;
  --surface: #ffffff;
  --surface-2: #e6e2da;
  --surface-3: #d8d3c9;
  --text: #1c1c2e;
  --text-soft: #565670;
  --line: rgba(28, 28, 46, .12);
  --accent: #2a5cd6;
  --accent-contrast: #ffffff;
  --accent-soft: rgba(42, 92, 214, .12);
  --spark: #9a6b00;
  --spark-contrast: #ffffff;
  --spark-soft: rgba(154, 107, 0, .12);
  --good: #15803d;
  --good-contrast: #ffffff;
  --good-soft: rgba(21, 128, 61, .12);
  --try: #92510a;
  --try-soft: rgba(146, 81, 10, .12);
  --error: #8a1a0a;
  --user-bubble: #2a5cd6;
  --bot-bubble: #ffffff;
  --shadow: 0 6px 24px rgba(28, 28, 46, .12);
  --sub-reading: #6d3fd2;
  --sub-maths: #2a5cd6;
  --sub-science: #0e7c85;
  --sub-geography: #1e7c3c;
  --sub-history: #a05a10;
  --sub-general_knowledge: #c03e86;
}

[data-theme="ocean"] {
  --bg: #051520;
  --surface: #0a2535;
  --surface-2: #0f3347;
  --surface-3: #15425a;
  --text: #cce8f0;
  --text-soft: #7fb8c8;
  --line: rgba(204, 232, 240, .10);
  --accent: #2bc4cc;
  --accent-contrast: #051520;
  --accent-soft: rgba(43, 196, 204, .15);
  --spark: #ffc940;
  --spark-contrast: #2b1a02;
  --spark-soft: rgba(255, 201, 64, .13);
  --good: #4ade80;
  --good-contrast: #052e12;
  --good-soft: rgba(74, 222, 128, .14);
  --try: #ffb84d;
  --try-soft: rgba(255, 184, 77, .14);
  --error: #ff7070;
  --user-bubble: #0b5e7a;
  --bot-bubble: #0a2535;
  --shadow: 0 6px 24px rgba(0, 0, 0, .32);
  --sub-reading: #9d8cff;
  --sub-maths: #4a9df0;
  --sub-science: #2bc4cc;
  --sub-geography: #4ecf8f;
  --sub-history: #f0a04b;
  --sub-general_knowledge: #ec7db5;
}

[data-theme="sunset"] {
  --bg: #16090a;
  --surface: #241210;
  --surface-2: #341c18;
  --surface-3: #452822;
  --text: #f5e8d0;
  --text-soft: #c4a184;
  --line: rgba(245, 232, 208, .10);
  --accent: #e8863a;
  --accent-contrast: #16090a;
  --accent-soft: rgba(232, 134, 58, .16);
  --spark: #ffca7a;
  --spark-contrast: #2b1a02;
  --spark-soft: rgba(255, 202, 122, .13);
  --good: #6bd88a;
  --good-contrast: #052e12;
  --good-soft: rgba(107, 216, 138, .14);
  --try: #ffb84d;
  --try-soft: rgba(255, 184, 77, .14);
  --error: #ff7070;
  --user-bubble: #8b3a18;
  --bot-bubble: #241210;
  --shadow: 0 6px 24px rgba(0, 0, 0, .32);
  --sub-reading: #c99cf5;
  --sub-maths: #7fa5f5;
  --sub-science: #46c4b0;
  --sub-geography: #7fce84;
  --sub-history: #f0a04b;
  --sub-general_knowledge: #eb8fb8;
}

/* ── NON-COLOUR TOKENS (shared) ───────────────────────────────────────── */
:root {
  --font: "Lexend", ui-rounded, "SF Pro Rounded", -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Type scale — dyslexia-friendly: generous sizes, 1.5+ line height,
     slight positive tracking on reading text, no italics for meaning. */
  --fs-hero: 44px;     /* one big word on a screen */
  --fs-title: 30px;    /* screen/card titles */
  --fs-big: 24px;      /* choice buttons, tile labels */
  --fs-body: 20px;     /* default reading text */
  --fs-label: 18px;    /* smallest child-facing text */
  --fs-admin: 14px;    /* PARENT-ONLY surfaces */
  --lh-read: 1.6;
  --track-read: 0.01em;
  /* Spacing — 4px base */
  --sp-1: 8px;  --sp-2: 12px;  --sp-3: 16px;
  --sp-4: 24px; --sp-5: 32px;  --sp-6: 48px;
  /* Radii */
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px; --r-pill: 999px;
  --radius: 18px; /* legacy alias */
  /* Tap targets */
  --tap: 56px;         /* child minimum */
  --tap-min: 48px;     /* absolute floor (parent-gated UI only) */
  /* Motion */
  --ease: cubic-bezier(.2, .8, .3, 1);
  --t-fast: 130ms;
  --t-med: 220ms;
}

/* ── BASE ─────────────────────────────────────────────────────────────── */
.sk-app {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
.sk-app *, .sk-app *::before, .sk-app *::after { box-sizing: border-box; }
.sk-app button {
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.sk-app :focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .sk-app *, .sk-app *::before, .sk-app *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* Icons: inline SVG, stroke-based. Size via font-size-ish width. */
.sk-ic { width: 28px; height: 28px; flex: 0 0 auto; display: block; }
.sk-ic-lg { width: 52px; height: 52px; }

/* ── WORDMARK ─────────────────────────────────────────────────────────── */
.sk-wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 22px; letter-spacing: .01em;
}
.sk-wordmark .sk-ic { width: 22px; height: 22px; color: var(--accent); }

/* ── BUTTONS ──────────────────────────────────────────────────────────── */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: var(--tap); padding: 0 26px;
  border: none; border-radius: var(--r-md);
  background: var(--accent); color: var(--accent-contrast);
  font-size: var(--fs-big); font-weight: 600; line-height: 1.2;
  transition: transform var(--t-fast) var(--ease);
}
.sk-btn:active { transform: scale(.96); }
.sk-btn-quiet { background: var(--surface-2); color: var(--text); }
.sk-btn-good { background: var(--good); color: var(--good-contrast); }

/* Round icon button — 56px child-facing */
.sk-round {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: 0 0 auto;
  border: none; border-radius: 50%;
  background: var(--surface-2); color: var(--text);
  transition: transform var(--t-fast) var(--ease);
}
.sk-round:active { transform: scale(.92); }

/* LISTEN — "Spark reads to you". Outlined pill, speaker icon, accent.
   Visually the OPPOSITE of the mic (solid, round, good-green). */
.sk-listen {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: var(--tap); padding: 0 20px;
  border: 2px solid var(--accent); border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--fs-label); font-weight: 600;
  transition: transform var(--t-fast) var(--ease);
}
[data-theme="light"] .sk-listen { color: var(--accent); }
.sk-listen:active { transform: scale(.95); }
.sk-listen.playing { background: var(--accent); color: var(--accent-contrast); }
/* On the hero card the pill sits on an always-dark photo gradient, so it
   must be light-on-dark regardless of theme. */
.sk-hero-foot .sk-listen {
  border-color: rgba(255, 255, 255, .85);
  background: rgba(255, 255, 255, .16);
  color: #ffffff;
}

/* MIC — "you read/talk to Spark". Solid round/capsule, mic icon, good-green. */
.sk-mic {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 64px; min-width: 64px; padding: 0 26px;
  border: none; border-radius: var(--r-pill);
  background: var(--good); color: var(--good-contrast);
  font-size: var(--fs-big); font-weight: 700;
  box-shadow: var(--shadow);
  transition: transform var(--t-fast) var(--ease);
}
.sk-mic:active { transform: scale(.95); }
.sk-mic.recording { background: var(--error); color: #fff; }

/* ── SPARKS CHIP (currency — the only number the child ever sees) ─────── */
.sk-sparks {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: var(--tap-min); padding: 6px 18px;
  background: var(--spark-soft); border: 1.5px solid var(--spark);
  border-radius: var(--r-pill);
  font-size: var(--fs-body); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sk-sparks .sk-ic { width: 22px; height: 22px; color: var(--spark); }

/* ── CARDS ────────────────────────────────────────────────────────────── */
.sk-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}

/* ── SUBJECT TILE — icon-first, one word, huge target ─────────────────── */
.sk-tile {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--sp-1);
  min-height: 100px; padding: var(--sp-2);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); color: var(--text); text-align: center;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast);
  box-shadow: var(--shadow);
}
.sk-tile:active { transform: scale(.96); border-color: var(--sub, var(--accent)); }
.sk-tile .sk-ic-lg { width: 38px; height: 38px; color: var(--sub, var(--accent)); }
.sk-tile-name { font-size: 16px; font-weight: 700; line-height: 1.1; }
/* subtle per-subject tint wash so tiles differ without shouting */
.sk-tile::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: var(--sub, var(--accent)); opacity: .07; pointer-events: none;
}
/* Guided lesson pack — a special activity, so it reads a touch bolder than a subject tile. */
.sk-tile-lesson { border-color: var(--sub, var(--accent)); border-width: 2px; }
.sk-tile-lesson::before { opacity: .13; }
.sk-tile-lesson .sk-tile-name { color: var(--sub, var(--accent)); }
/* Planned-but-unbuilt subject: greyed, dashed, non-interactive, with a small "Soon" tag. */
.sk-tile-soon { border-style: dashed; border-color: var(--line); box-shadow: none; opacity: .55; cursor: default; }
.sk-tile-soon::before { display: none; }
.sk-tile-soon:active { transform: none; }
.sk-tile-soon .sk-ic-lg { color: var(--text-soft); }
.sk-tile-soon-tag { position: absolute; top: 6px; right: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); opacity: .8; }

/* ── HERO / CONTINUE CARD — the one big next step ─────────────────────── */
.sk-hero {
  position: relative; overflow: hidden;
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface-2); box-shadow: var(--shadow);
  display: flex; flex-direction: column; justify-content: flex-end;
  text-align: left; color: #fff; padding: 0;
  transition: transform var(--t-fast) var(--ease);
  font-family: var(--font);
}
.sk-hero:active { transform: scale(.985); }
.sk-hero-media { position: absolute; inset: 0; }
.sk-hero-media image-slot { width: 100%; height: 100%; display: block; }
.sk-hero-foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4) var(--sp-4);
  background: linear-gradient(transparent, rgba(6, 8, 16, .78));
}
.sk-hero-title { font-size: var(--fs-hero); font-weight: 700; line-height: 1.05; color: #fff; }
.sk-hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-label); font-weight: 600; color: rgba(255,255,255,.92);
}
.sk-hero-kicker .sk-ic { width: 22px; height: 22px; }
.sk-play {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; flex: 0 0 auto;
  border: none; border-radius: 50%;
  background: var(--accent); color: var(--accent-contrast);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.sk-play .sk-ic { width: 32px; height: 32px; }

/* ── CHARACTER CARD + AVATAR FRAME (LPC sprite stays pixelated) ───────── */
.sk-avatar-frame {
  display: grid; place-items: center;
  background:
    radial-gradient(80% 70% at 50% 30%, var(--accent-soft), transparent 70%),
    var(--surface-2);
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden;
}
.sk-avatar-frame img, .sk-avatar-frame image-slot img {
  image-rendering: pixelated; image-rendering: crisp-edges;
}
.sk-char-name { font-size: var(--fs-big); font-weight: 700; }
.sk-char-meta { font-size: var(--fs-label); color: var(--text-soft); font-weight: 600; }

/* Progress bar — geometry only, no numbers/% ever shown with it */
.sk-bar {
  height: 12px; border-radius: var(--r-pill);
  background: var(--surface-3); overflow: hidden;
}
.sk-bar-fill {
  display: block; height: 100%; border-radius: inherit;
  background: var(--accent);
  transition: width var(--t-med) var(--ease);
}

/* ── PARENT ACCESS — deliberately quiet, small, corner-dwelling ───────── */
.sk-parent {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap-min); height: var(--tap-min);
  border: 1px solid var(--line); border-radius: 50%;
  background: transparent; color: var(--text-soft); opacity: .6;
}
.sk-parent .sk-ic { width: 20px; height: 20px; }
/* Reading-check-recommended nudge: a small dot on the parent shield + a tag on the panel row. */
.sk-parent-reco { position: relative; opacity: 1; }
.sk-parent-reco::after { content: ""; position: absolute; top: 2px; right: 2px; width: 9px; height: 9px;
  border-radius: 50%; background: #e5872b; border: 2px solid var(--bg, #fff); }
.pp-reco { font-size: 11px; font-weight: 700; color: #b4651a; background: rgba(229,135,43,.16);
  border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: middle; }

/* ── LAYOUT HELPERS ───────────────────────────────────────────────────── */
.sk-topbar {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}
.sk-spacer { flex: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   LESSON TURN COMPONENTS
   A "turn" = ONE thing from Spark + ONE response from the child.
   The current turn is bottom-anchored and full-focus; earlier turns scroll
   above it wearing .sk-turn-past (dimmed, non-interactive).
   ═══════════════════════════════════════════════════════════════════════ */

/* Stage: the lesson column */
.sk-stage {
  flex: 1; min-height: 0; width: 100%; max-width: 880px; margin: 0 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--sp-3); padding: var(--sp-2) var(--sp-4) var(--sp-3);
}
.sk-turn-past { opacity: .4; pointer-events: none; }

/* Tutor bubble — big reading text, always paired with a listen control */
.sk-bubble-row { display: flex; align-items: flex-end; gap: var(--sp-2); }
.sk-bubble {
  background: var(--bot-bubble); border: 1px solid var(--line);
  border-radius: var(--r-lg); border-bottom-left-radius: 8px;
  padding: 18px 24px; max-width: 720px;
  font-size: var(--fs-big); line-height: var(--lh-read);
  letter-spacing: var(--track-read); box-shadow: var(--shadow);
}
/* icon-only listen (speaker) that sits beside every bubble */
.sk-listen-mini {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap); flex: 0 0 auto;
  border: 2px solid var(--accent); border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  transition: transform var(--t-fast) var(--ease);
}
.sk-listen-mini:active { transform: scale(.92); }
.sk-listen-mini.playing { background: var(--accent); color: var(--accent-contrast); }

/* Inline artefact / diagram / image block */
.sk-media {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow);
}

/* Answer buttons — THE primary interaction. States, never colour-only:
   correct = green + check icon; not-yet = amber + redo icon (NEVER red/✕). */
.sk-answers { display: grid; gap: 14px; }
.sk-answer {
  display: flex; align-items: center; gap: 16px; text-align: left;
  min-height: 76px; padding: 14px 22px;
  font-size: var(--fs-big); font-weight: 600; line-height: 1.3;
  color: var(--text); background: var(--surface);
  border: 2px solid var(--accent); border-radius: var(--r-md);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast), background var(--t-fast);
}
.sk-answer:active { transform: scale(.98); }
.sk-answer .sk-ic { width: 34px; height: 34px; color: var(--text-soft); }
.sk-answer.is-correct { border-color: var(--good); background: var(--good-soft); }
.sk-answer.is-try { border-color: var(--try); background: var(--try-soft); }
.sk-answer.is-dim { opacity: .4; border-color: var(--line); pointer-events: none; }
/* trailing state badge */
.sk-state {
  margin-left: auto; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%; display: grid; place-items: center;
}
.sk-state .sk-ic { width: 24px; height: 24px; color: inherit; }
.is-correct .sk-state { background: var(--good); color: var(--good-contrast); }
.is-try .sk-state { background: var(--try); color: #2b1a02; }

/* Minimised composer dock — quiet row of round buttons, NOT a keyboard bar.
   Mic keeps its solid-green identity; keyboard + camera are quiet. Tapping
   the keyboard swaps the dock for a text field + Done. */
.sk-dock {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: 12px var(--sp-4) 20px;
}
.sk-round-mic { background: var(--good); color: var(--good-contrast); }
.sk-round-mic.recording { background: var(--error); color: #fff; }

/* Reading turn — one big decodable word (or short passage) */
.sk-word-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3); padding: var(--sp-6) var(--sp-4); text-align: center;
}
.sk-word {
  font-size: clamp(72px, 12vw, 132px); font-weight: 700;
  line-height: 1.05; letter-spacing: .02em;
}
.sk-passage {
  font-size: 34px; font-weight: 500; line-height: 1.8;
  letter-spacing: .02em; max-width: 640px;
}

/* Game cards (memory match) — no timers, no scores, ever */
.sk-gboard { display: grid; gap: 14px; }
.sk-gcard {
  position: relative; aspect-ratio: 3 / 4;
  display: grid; place-items: center;
  background: var(--surface-2); border: 2px solid var(--line);
  border-radius: var(--r-md); color: var(--text);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast), background var(--t-fast);
  box-shadow: var(--shadow);
}
.sk-gcard:active { transform: scale(.95); }
.sk-gcard .sk-back { color: var(--accent); opacity: .45; width: 44px; height: 44px; }
.sk-gcard.is-up { background: var(--surface); border-color: var(--accent); }
.sk-gcard.is-up .sk-face { color: var(--sub, var(--accent)); width: 56px; height: 56px; }
.sk-gcard.is-matched { background: var(--good-soft); border-color: var(--good); }
.sk-gcard.is-matched .sk-face { color: var(--text-soft); width: 56px; height: 56px; }
.sk-gcard .sk-match-badge {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--good); color: var(--good-contrast);
  display: grid; place-items: center;
}
.sk-match-badge .sk-ic { width: 18px; height: 18px; }

/* Game picker cards — icon-first, one short word */
.sk-gpick {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); min-height: 190px; padding: var(--sp-3);
  background: var(--surface); border: 1.5px solid var(--line);
  border-radius: var(--r-lg); color: var(--text); box-shadow: var(--shadow);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast);
}
.sk-gpick:active { transform: scale(.96); border-color: var(--accent); }
.sk-gpick .sk-ic-lg { color: var(--accent); }

/* User photo bubble (whiteboard capture shown back) */
.sk-photo-bubble {
  align-self: flex-end; background: #fff; border-radius: var(--r-md);
  padding: 8px; box-shadow: var(--shadow); line-height: 0;
}
.sk-photo-bubble image-slot, .sk-photo-bubble img { border-radius: 10px; }

/* ═════════════════════════════════════════════════════════════════════
   CHARACTER / GEAR SHOP COMPONENTS
   The reward layer. Calm shop rules: the Sparks balance and item costs are
   plain information — no sales, no countdowns, no "new!" badges, no FOMO.
   Tapping ANY item previews it live on the sprite (try before buy); owning
   is confirmed with the spark-gold Buy capsule under the character.
   ═════════════════════════════════════════════════════════════════════ */

/* Character stage — the hero: big, framed, LIT. The one glowing thing. */
.sk-stagepane {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4);
  background:
    radial-gradient(85% 65% at 50% 32%, var(--accent-soft), transparent 72%),
    var(--surface);
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}

/* Slot switcher — icon-first tabs, same grammar as subject tiles */
.sk-slot-tabs { display: flex; gap: 12px; }
.sk-slot-tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 76px; height: 76px; flex: 0 0 auto;
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--r-md); color: var(--text-soft);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast), background var(--t-fast);
}
.sk-slot-tab .sk-ic { width: 32px; height: 32px; }
.sk-slot-tab:active { transform: scale(.94); }
.sk-slot-tab.selected {
  border-color: var(--accent); background: var(--accent-soft); color: var(--accent);
}

/* Item grid + item card.  STATES:
     (none)        buyable — price chip visible
     .is-equipped  owned + on the sprite: green border/tint + corner check badge
     .is-owned     owned, not equipped: outlined corner check, no price
     .is-far       can't afford yet: gently dimmed, price still plain info — no locks
     .sk-item-none the "none / unequip" cell — dashed border + slash icon      */
.sk-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.sk-item {
  position: relative; aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line);
  border-radius: var(--r-md); color: var(--text);
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast), background var(--t-fast);
}
.sk-item:active { transform: scale(.95); border-color: var(--accent); }
.sk-item .sk-thumb { width: 58px; height: 58px; color: var(--text-soft); }
.sk-item.is-equipped { border-color: var(--good); background: var(--good-soft); }
.sk-item.is-equipped .sk-thumb { color: var(--text); }
.sk-item.is-far { opacity: .5; }
.sk-item-none { border-style: dashed; }
.sk-item-none .sk-thumb { opacity: .6; }

/* Corner check badges */
.sk-badge-on {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  border-radius: 50%; background: var(--good); color: var(--good-contrast);
  display: grid; place-items: center;
}
.sk-badge-own {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px;
  border-radius: 50%; background: transparent; color: var(--good);
  border: 2px solid var(--good);
  display: grid; place-items: center;
}
.sk-badge-on .sk-ic, .sk-badge-own .sk-ic { width: 18px; height: 18px; }

/* Price chip — plain information, spark-coloured, sits inside the item */
.sk-price {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: var(--r-pill);
  background: var(--spark-soft); color: var(--spark);
  font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sk-price .sk-ic { width: 15px; height: 15px; }

/* Buy capsule — appears under the character while previewing an unowned item.
   Spark-gold = the one place the currency colour is a button. */
.sk-buy {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 64px; padding: 0 32px;
  border: none; border-radius: var(--r-pill);
  background: var(--spark); color: var(--spark-contrast);
  font-size: var(--fs-big); font-weight: 700;
  box-shadow: var(--shadow);
  transition: transform var(--t-fast) var(--ease);
}
.sk-buy:active { transform: scale(.95); }
.sk-buy .sk-ic { width: 26px; height: 26px; }

/* Colour / skin swatches — 56px circles, selected = accent ring + check */
.sk-swatches { display: flex; flex-wrap: wrap; gap: 14px; }
.sk-swatch {
  position: relative; width: 56px; height: 56px; flex: 0 0 auto;
  border-radius: 50%; border: 3px solid transparent;
  box-shadow: 0 0 0 1.5px var(--line); color: #fff;
  display: grid; place-items: center;
  transition: transform var(--t-fast) var(--ease);
}
.sk-swatch:active { transform: scale(.9); }
.sk-swatch.selected { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
.sk-swatch .sk-ic { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)); }

/* Group label inside the options pane — quiet, small, optional */
.sk-group-label { font-size: var(--fs-label); font-weight: 600; color: var(--text-soft); }

/* ═══ LOCK / PIN KEYPAD (child-facing) ════════════════════════════════════
   Big round keys, no text field. Pips show digits entered.
   Wrong PIN: add .error to .sk-pips (calm amber, no shake, no red). */
.sk-keypad { display: grid; grid-template-columns: repeat(3, 84px); gap: 16px; justify-content: center; }
.sk-key {
  width: 84px; height: 84px; border-radius: 50%;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 32px; font-weight: 600; font-family: var(--font);
  display: grid; place-items: center;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast), border-color var(--t-fast);
}
.sk-key:active { transform: scale(.92); background: var(--accent-soft); border-color: var(--accent); }
.sk-key-ghost { background: transparent; border-color: transparent; color: var(--text-soft); }
.sk-pips { display: flex; gap: 14px; justify-content: center; }
.sk-pip { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--text-soft); }
.sk-pip.filled { background: var(--accent); border-color: var(--accent); }
.sk-pips.error .sk-pip { border-color: var(--try); }
.sk-pips.error .sk-pip.filled { background: var(--try); }

/* ═══ READING CHECK (child-facing) ════════════════════════════════════════
   Progress = dots only (done / now / todo) — NEVER a score or "x correct".
   Alien (made-up) words: .sk-word-alien tint + .sk-alien-badge, so he knows
   to sound it out. Skip = quiet .sk-round with forward icon. */
.sk-dots { display: flex; gap: 12px; justify-content: center; }
.sk-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--surface-3); }
.sk-dot.done { background: var(--accent); opacity: .55; }
.sk-dot.now { background: var(--accent); outline: 2px solid var(--accent); outline-offset: 3px; }
.sk-word-alien { color: var(--sub-reading); }
.sk-alien-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 16px; border-radius: var(--r-pill);
  border: 2px solid var(--sub-reading); color: var(--sub-reading);
  font-size: 17px; font-weight: 700;
}
.sk-alien-badge .sk-ic { width: 20px; height: 20px; }

/* ═══ PARENT SURFACES (parent-facing — denser, --fs-admin, real numbers) ══ */
.sk-admin { font-size: var(--fs-admin); line-height: 1.5; }
.sk-parent-panel {
  width: 100%; max-width: 420px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 20px; font-size: var(--fs-admin);
}
.sk-parent-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.sk-parent-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.sk-parent-row:last-child { border-bottom: none; }
.sk-btn-admin {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap-min); padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text);
  font-size: var(--fs-admin); font-weight: 600; font-family: var(--font);
}
.sk-btn-admin.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

/* ═══ CHARACTER OVERLAY (forward-provision — leave free, don't build) ═════
   The companion is a FREE-FLOATING layer, not a reserved corner. It can sit
   ANYWHERE over a child-facing screen and layer in front of or partly behind
   UI (peeking out from behind a bubble/card) for a sense of depth.
   Position with --roam-x/--roam-y or --roam-r/--roam-b; layer with --roam-z:
     • in front of content:  --roam-z: 6  (default 5)
     • peeking from behind:  --roam-z: 1 and give the overlapped element
       position: relative; z-index: 2+ (bubbles/cards are position-friendly).
   Layout rule for ALL child screens: never create opaque full-screen
   stacking contexts above z-index 6, so the layer can always slot between.
   ADHD guardrail: small (≤ ~120px), calm, mostly still; brief purposeful
   reactions only (thumbs-up on correct, gentle hint on not-yet — never the
   answer, never shaming), then it settles. pointer-events stays none. */
.sk-roam {
  position: absolute;
  left: var(--roam-x, auto); top: var(--roam-y, auto);
  right: var(--roam-r, auto); bottom: var(--roam-b, auto);
  z-index: var(--roam-z, 5);
  width: var(--roam-size, 110px); height: var(--roam-size, 110px);
  pointer-events: none;
  display: grid; place-items: center;
}
.sk-roam img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }



/* ═══ Dashboard app-integration (spark-v2 layout wired to the live app) ═══ */
#dashboard.sk-app { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: auto; }
.dash-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 210px 1fr; grid-template-rows: auto 1fr; gap: 14px; padding: 4px 18px 16px; }
.dash-rail { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; }
.dash-avatar { position: relative; width: 100%; height: 128px; background: var(--surface-2); }
.dash-avatar img { position: absolute; inset: 0; margin: auto; width: 108px; height: 108px; object-fit: contain; }
.dash-char-txt { text-align: center; }
.dash-gear { width: 100%; }
.dash-rail .sk-sparks { font-size: var(--fs-label); padding: 4px 16px; }
.dash-hero { grid-column: 2; grid-row: 1; min-height: 168px; }
.dash-hero-bg { display: block; width: 100%; height: 100%; }
.dash-hero-txt { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.dash-hero-prog { display: block; width: 220px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.28); overflow: hidden; }
.dash-hero-prog > span { display: block; height: 100%; width: 45%; border-radius: inherit; background: #fff; }
/* Tiles span the full width UNDER the rail+hero: a fixed 5-column grid so up to 10 subjects sit
   in a tidy 5×2 block that fits an iPad screen without scrolling. */
.dash-tiles { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-content: start; }
.dash-tiles .sk-tile { min-height: 96px; }
@media (orientation: portrait), (max-width: 820px) {
  .dash-grid { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
  .dash-hero { grid-column: 1; grid-row: 1; min-height: 150px; }
  .dash-rail { grid-column: 1; grid-row: 2; }
  .dash-avatar { height: 112px; }
  .dash-tiles { grid-column: 1; grid-row: 3; grid-template-columns: repeat(5, 1fr); }
}
/* parent panel overlay */
.dash-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
.dash-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; min-width: 280px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); color: var(--text); font-family: var(--font); }
.dash-panel-title { font-size: var(--fs-label); font-weight: 700; color: var(--text-soft); }
.dash-panel-row { min-height: 52px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font-size: var(--fs-label); font-weight: 600; text-align: left; padding: 0 16px; cursor: pointer; }
.dash-panel-close { min-height: 44px; border: none; background: transparent; color: var(--text-soft); font-size: 15px; cursor: pointer; }


/* ═══ Lesson / chat skin — spark-v2 look mapped onto the live chat (#chat) ═══
   CSS-only: keeps all chat JS/markup, restyles bubbles, answers, reading card,
   composer. Budget number removed from the child screen (integrity). ══════ */
#chat .topbar { padding: var(--sp-3) var(--sp-4); }
#chat .brand { font-weight: 700; font-size: 22px; letter-spacing: .01em; }
#chat #budget { display: none !important; }          /* budget off the child screen */
#chat #log { width: 100%; max-width: 1056px; margin: 0 auto; padding: var(--sp-2) var(--sp-4) var(--sp-3); gap: var(--sp-3); }
/* bubbles */
#chat .msg .bubble { border-radius: var(--r-lg); padding: 16px 22px; max-width: 864px; font-size: 21px; line-height: var(--lh-read); letter-spacing: var(--track-read); box-shadow: var(--shadow); }
#chat .msg.bot .bubble { background: var(--bot-bubble); border: 1px solid var(--line); border-bottom-left-radius: 8px; }
#chat .msg.user .bubble { background: var(--user-bubble); color: #fff; border: 1px solid transparent; border-bottom-right-radius: 8px; }
#chat .bubble.img-bubble, #chat .bubble.photo-bubble { padding: 8px; }
/* answer choices → sk-answer look */
#chat .msg.bot.choices { display: grid; gap: 14px; max-width: 864px; }
#chat .choice-btn { display: flex; align-items: center; gap: 14px; text-align: left; min-height: 72px; padding: 14px 22px; font-size: var(--fs-big); font-weight: 600; line-height: 1.3; color: var(--text); background: var(--surface); border: 2px solid var(--accent); border-radius: var(--r-md); transition: transform var(--t-fast) var(--ease); }
#chat .choice-btn:active { transform: scale(.98); }
/* reading card. LISTEN (🔊 speak-btn) = outlined accent; MIC (🎤 read to Spark) = solid green. */
#chat .reading-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow); padding: var(--sp-4); }
#chat .reading-text { font-size: 28px; line-height: 1.7; letter-spacing: .02em; }
#chat .speak-btn { min-height: var(--tap); padding: 0 20px; border: 2px solid var(--accent); border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); font-size: var(--fs-label); font-weight: 600; }
#chat .speak-btn.playing { background: var(--accent); color: var(--accent-contrast); }
#chat .readaloud-btn { min-height: var(--tap); padding: 0 22px; border: none; border-radius: var(--r-pill); background: var(--good); color: var(--good-contrast); font-size: var(--fs-label); font-weight: 700; }
/* composer → quiet dock: mic = green identity, send = accent, textarea calm */
#chat .composer { gap: var(--sp-2); padding: 12px var(--sp-4) 18px; align-items: center; max-width: 1056px; margin: 0 auto; }
#chat #input { font-family: var(--font); font-size: var(--fs-body); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 12px 18px; }
#chat .round-btn { width: var(--tap); height: var(--tap); border-radius: 50%; background: var(--surface-2); color: var(--text); border: none; }
#chat .round-btn.send { background: var(--accent); color: var(--accent-contrast); }
#chat #mic-btn { background: var(--good); color: var(--good-contrast); }

/* Hands-free voice-conversation toggle. Neutral when off; turns green + softly pulses while
   the mode is on so it's obvious the lesson is "live". */
#chat #voice-btn.voice-active { background: var(--good); color: var(--good-contrast); }
#chat #voice-btn.vc-listening { animation: vcPulse 1.2s ease-in-out infinite; }
#chat #voice-btn.vc-thinking { opacity: .65; }
@keyframes vcPulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--good-soft); }
  50%      { box-shadow: 0 0 0 10px transparent; }
}

/* ═══ Screen & sound quick-settings (usable inside iOS Guided Access) ═══ */
#dim-overlay { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 4000; transition: opacity .18s ease; }
.settings-modal { position: fixed; inset: 0; z-index: 4001; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); padding: 20px; }
.settings-modal[hidden] { display: none; }
.settings-card { background: var(--surface); color: var(--text); border-radius: 22px; padding: 22px 24px 20px; width: min(440px, 92vw); box-shadow: var(--shadow); }
.settings-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: var(--fs-title); margin-bottom: 6px; }
.settings-row { display: flex; flex-direction: column; gap: 10px; margin: 20px 0; font-weight: 600; font-size: var(--fs-body); }
.settings-row input[type="range"] { width: 100%; height: 40px; accent-color: var(--accent); }
.settings-note { font-size: var(--fs-label); opacity: .68; line-height: 1.4; margin: 6px 0 0; }


/* ═══ Character / gear-shop skin — spark-v2 look on the live character screen ═══ */
#character .dash-top { padding: var(--sp-3) var(--sp-4); }
#character .ch-hero { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4); background: radial-gradient(85% 65% at 50% 32%, var(--accent-soft), transparent 72%), var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
#character .ch-name { font-size: var(--fs-big); font-weight: 700; margin-top: var(--sp-2); }
#character .sec-head { font-size: var(--fs-label); font-weight: 700; color: var(--text-soft); margin: var(--sp-3) 0 var(--sp-1); }
#character .row-label, #character .gear-slot { font-size: var(--fs-label); font-weight: 600; color: var(--text-soft); margin: var(--sp-2) 0 6px; }
#character .chips { display: flex; flex-wrap: wrap; gap: 12px; }
#character .chip { min-height: 52px; padding: 0 20px; border-radius: var(--r-pill); border: 2px solid var(--line); background: var(--surface); color: var(--text); font-size: var(--fs-label); font-weight: 600; }
#character .chip.selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
#character .swatches { display: flex; flex-wrap: wrap; gap: 14px; }
#character .swatches button { width: 56px; height: 56px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1.5px var(--line); }
#character .swatches button.selected { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }
#character .gear { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
#character .item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 110px; padding: 14px 10px; background: var(--surface); border: 2px solid var(--line); border-radius: var(--r-md); color: var(--text); text-align: center; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast); }
#character .item:active { transform: scale(.96); }
#character .item.equipped { border-color: var(--good); background: var(--good-soft); }
#character .item-name { font-size: var(--fs-label); font-weight: 700; line-height: 1.2; }
#character .item-status { font-size: 15px; font-weight: 600; color: var(--text-soft); }
#character .item-status.own { color: var(--good); }
#character .item-status.price { display: inline-flex; align-items: center; gap: 4px; padding: 3px 12px; border-radius: var(--r-pill); background: var(--spark-soft); color: var(--spark); font-weight: 700; }


/* ═══ Lock screen layout (keypad, spark-v2) ═══ */
#lock.sk-app { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; background: radial-gradient(120% 80% at 50% 0%, var(--surface-2), transparent 60%), var(--bg); }
#lock .lock-v2 { display: flex; flex-direction: column; align-items: center; gap: 22px; }
#lock .lock-brand { display: flex; flex-direction: column; align-items: center; gap: 6px; }
#lock .lock-logo { width: 60px; height: 60px; color: var(--accent); }
#lock .lock-title { font-size: 30px; font-weight: 700; }
#lock #pin-form { display: flex; flex-direction: column; align-items: center; gap: 22px; margin: 0; }
#lock .error { color: var(--try); font-size: var(--fs-label); font-weight: 600; min-height: 1.2em; margin: 0; }
#lock .theme-picker { display: flex; gap: 18px; }
#lock .theme-dot { width: 46px; height: 46px; border-radius: 50%; border: 3px solid transparent; box-shadow: 0 0 0 1.5px var(--line); padding: 0; cursor: pointer; }
#lock .theme-dot.active { border-color: var(--accent); box-shadow: 0 0 0 1.5px var(--accent); }


/* ═══ Reading-check (probe) skin — spark-v2 big-word flow (child-facing) ═══ */
#probe.sk-app { display: flex; align-items: center; justify-content: center; }
#probe .pb-body { width: 100%; max-width: 720px; margin: 0 auto; padding: var(--sp-4); }
#probe .pb-intro { text-align: center; display: flex; flex-direction: column; gap: var(--sp-3); align-items: center; }
#probe .pb-intro h2 { font-size: var(--fs-title); font-weight: 700; margin: 0; }
#probe .pb-intro p { font-size: var(--fs-body); line-height: var(--lh-read); color: var(--text-soft); max-width: 520px; margin: 0; }
#probe #pb-begin { min-height: var(--tap); padding: 0 32px; border: none; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-contrast); font-size: var(--fs-big); font-weight: 700; }
#probe .pb-item { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; }
#probe .pb-progress { width: 220px; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
#probe .pb-progress > span { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
#probe .pb-word { font-size: clamp(64px, 11vw, 128px); font-weight: 700; line-height: 1.05; letter-spacing: .02em; }
#probe .pb-word.pb-nonword { color: var(--sub-reading); }
#probe .pb-alien { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: var(--r-pill); border: 2px solid var(--sub-reading); color: var(--sub-reading); font-size: 17px; font-weight: 700; }
#probe .pb-rec { min-height: 64px; min-width: 200px; padding: 0 28px; border: none; border-radius: var(--r-pill); background: var(--good); color: var(--good-contrast); font-size: var(--fs-big); font-weight: 700; box-shadow: var(--shadow); }
#probe .pb-rec.recording { background: var(--error); color: #fff; }
#probe .pb-skip { min-height: var(--tap); padding: 0 24px; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--text-soft); font-size: var(--fs-label); font-weight: 600; }


/* ═══ Admin (parent) light consistency pass — refined tokens + Lexend, sizes unchanged ═══ */
#admin { font-family: var(--font); }
#admin .brand, #admin h1, #admin h2, #admin h3 { font-family: var(--font); }


/* Bring back the atmospheric interest backdrop (#app-bg) behind the redesigned screens.
   Screens must be TRANSPARENT — an opaque/semi-opaque bg above the z-index:-1 backdrop
   hides it. Readability comes from the opaque cards/bubbles, not the screen background. */
#dashboard.sk-app, #chat.sk-app, #character.sk-app, #probe.sk-app { background: transparent; }

/* ═══ CHARACTER OVERLAY / COMPANION (synced from Claude Design 2 Jul) ═══════
   Free-floating layer. Position via --roam-x/y (or r/b), depth via --roam-z
   (z1 = peek behind an element with position:relative + z-index 2+; z6 = front).
   State machine — exactly one cmp-* class on .sk-roam: .cmp-idle (4px bob 4.5s;
   default/return), .cmp-correct (0.5s pop + green thumbs-up badge 1.3s),
   .cmp-hint (slow lean + amber magnifier "look again" — never the answer).
   JS: swap class -> auto-settle to .cmp-idle after ~1.5s; one reaction per
   answer; move only at turn boundaries (600ms tween built in); reduced-motion
   degrades to the badge simply appearing. */
.sk-roam {
  position: absolute;
  left: var(--roam-x, auto); top: var(--roam-y, auto);
  right: var(--roam-r, auto); bottom: var(--roam-b, auto);
  z-index: var(--roam-z, 5);
  width: var(--roam-size, 110px); height: var(--roam-size, 110px);
  pointer-events: none;
  display: grid; place-items: center;
  transition: left 600ms var(--ease), top 600ms var(--ease);
}
.sk-roam img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
@keyframes cmpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
/* Reactions are BOLD and unmistakable — a jump + bounce, not a subtle 12% nudge (which
   was firing but too small to notice). */
@keyframes cmpPop { 0% { transform: scale(1) translateY(0); } 20% { transform: scale(1.35) translateY(-14px); } 45% { transform: scale(.9) translateY(0); } 65% { transform: scale(1.15) translateY(-5px); } 85% { transform: scale(.98); } 100% { transform: scale(1) translateY(0); } }
@keyframes cmpLean { 0%, 100% { transform: translateX(0) rotate(0deg); } 20% { transform: translateX(-14px) rotate(-10deg); } 55% { transform: translateX(10px) rotate(8deg); } 80% { transform: translateX(-4px) rotate(-3deg); } }
@keyframes cmpBurst { 0% { opacity: 0; transform: translateY(12px) scale(.3); } 18% { opacity: 1; transform: translateY(-6px) scale(1.25); } 40% { transform: translateY(0) scale(1); } 80% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-10px) scale(.85); } }
.cmp-sprite { width: 100%; height: 100%; display: grid; place-items: center; }
.cmp-idle .cmp-sprite { animation: cmpBob 4.5s ease-in-out infinite; }
.cmp-correct .cmp-sprite { animation: cmpPop .8s cubic-bezier(.2,.8,.3,1); }
.cmp-hint .cmp-sprite { animation: cmpLean 1.5s cubic-bezier(.2,.8,.3,1); }
.cmp-badge { position: absolute; top: -56px; left: 50%; margin-left: -27px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; opacity: 0; pointer-events: none; box-shadow: 0 4px 14px rgba(0,0,0,.28); }
.cmp-badge-good { background: var(--good); color: var(--good-contrast); }
.cmp-badge-hint { background: var(--try); color: #2b1a02; }
.cmp-badge .sk-ic, .cmp-badge svg { width: 30px; height: 30px; }
.cmp-correct .cmp-badge-good, .cmp-hint .cmp-badge-hint { animation: cmpBurst 1.9s cubic-bezier(.2,.8,.3,1); }
/* App integration: the LPC character is a LAYERED composite, so stack its
   layers absolutely inside .cmp-sprite (the animation runs on the container). */
#chat .cmp-sprite { position: relative; }
#chat .cmp-sprite img { position: absolute; inset: 0; }
#chat.companion-off .sk-roam { display: none; }

/* Companion roaming: glide smoothly between anchor spots (JS sets --roam-x/--roam-y). */
#companion.sk-roam { transition: left 2s cubic-bezier(.4,0,.2,1), top 2s cubic-bezier(.4,0,.2,1); }
/* Parked: while the learner has choices or a game to read, the avatar shrinks and fades into the
   bottom-right corner so it's never sitting on top of the answer buttons. */
#companion.cmp-parked {
  left: auto !important; bottom: auto !important;
  right: 6px !important; top: 60px !important;   /* up to the top corner, clear of the bottom answer buttons */
  width: 54px !important; height: 54px !important;
  opacity: .3;
  transition: right .4s ease, top .4s ease, width .4s ease, height .4s ease, opacity .4s ease !important;
}
/* The companion is an intentional "alive in the room" feature — keep it moving and reacting
   even when the device has Reduce Motion on (which otherwise freezes ALL animation above).
   Scoped to the companion only; the rest of the app still honours the accessibility setting. */
@media (prefers-reduced-motion: reduce) {
  #companion.sk-roam { transition: left 2s ease, top 2s ease !important; }
  #companion.cmp-idle .cmp-sprite { animation: cmpBob 4.5s ease-in-out infinite !important; }
  #companion.cmp-correct .cmp-sprite { animation: cmpPop .8s cubic-bezier(.2,.8,.3,1) !important; }
  #companion.cmp-hint .cmp-sprite { animation: cmpLean 1.5s cubic-bezier(.2,.8,.3,1) !important; }
  #companion.cmp-correct .cmp-badge-good,
  #companion.cmp-hint .cmp-badge-hint { animation: cmpBurst 1.9s cubic-bezier(.2,.8,.3,1) !important; }
}

/* ── Prayer companion (Adam-only mini-app) ─────────────────────────────
   Calm, imam-style step controller. One posture/action per screen.        */
#prayer { display: flex; align-items: center; justify-content: center; padding: 24px; }
.pr-body { width: 100%; max-width: 760px; text-align: center; }
.pr-menu { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.pr-choice { width: 100%; max-width: 340px; font-size: 1.1rem; padding: 16px; }
.pr-rak { display: block; font-size: .8rem; opacity: .65; font-weight: 400; margin-top: 3px; }
.pr-step { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.pr-progress { width: 100%; height: 6px; border-radius: 999px; background: rgba(0,0,0,.12); overflow: hidden; }
.pr-progress > span { display: block; height: 100%; background: var(--sub-reading, #6c8cff); transition: width .25s ease; }
.pr-visual { width: 220px; height: 220px; }
/* Salah steps: transliteration (left) · larger image (centre) · English (right). */
.pr-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 16px; width: 100%; }
.pr-row .pr-visual { width: min(38vw, 300px); height: min(38vw, 300px); }
.pr-col { display: flex; flex-direction: column; gap: 7px; }
.pr-translit { text-align: right; }
.pr-english { text-align: left; }
.pr-english .pr-line { font-weight: 500; font-style: italic; opacity: .8; }
/* Karaoke (Al-Fātiḥa): dim non-current lines in both columns; light up the current one. */
.pr-col.following .pr-line { opacity: .35; }
.pr-col.following .pr-line.active { opacity: 1; color: var(--accent); font-weight: 800; }
@media (max-width: 620px) {
  .pr-row { grid-template-columns: 1fr; }
  .pr-translit, .pr-english { text-align: center; }
  .pr-row .pr-visual { width: min(60vw, 260px); height: min(60vw, 260px); margin: 0 auto; }
}
.pr-img { width: 100%; height: 100%; object-fit: contain; }
.pr-img-ph { width: 100%; height: 100%; align-items: center; justify-content: center;
  font-size: 96px; border: 3px dashed rgba(0,0,0,.18); border-radius: 20px; }
.pr-label { margin: 0; font-size: 1.4rem; }
.pr-say { margin: 0; font-size: 1.15rem; line-height: 1.5; opacity: .85; min-height: 1.5em; }
.pr-say-sm { font-size: 1rem; opacity: .7; }
/* Transliteration that follows the recitation — the current line lights up (karaoke-style). */
.pr-lines { display: flex; flex-direction: column; gap: 7px; margin: 4px 0; max-width: 560px; text-align: center; }
.pr-line { font-size: 1.15rem; font-weight: 600; line-height: 1.4; opacity: 1; transition: opacity .2s ease, color .2s ease, transform .2s ease; }
/* Karaoke steps (Al-Fātiḥa) dim the non-current lines; static steps stay fully readable. */
.pr-lines.following .pr-line { opacity: .4; }
.pr-lines.following .pr-line.active { opacity: 1; color: var(--accent); font-weight: 800; transform: scale(1.04); }
.pr-nav { display: flex; gap: 12px; width: 100%; max-width: 340px; }
.pr-nav .btn-primary { flex: 1; }
.pr-back { background: none; border: none; color: inherit; opacity: .7; font-size: 1rem;
  padding: 10px; cursor: pointer; }
.pr-menu-link { text-decoration: underline; }

/* ===== Writing (on-screen letter practice) ===== */
.wr-body { width: 100%; max-width: 640px; margin: 0 auto; text-align: center; }
.wr-menu { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.wr-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; width: 100%; max-width: 460px; }
@media (max-width: 480px) { .wr-grid { grid-template-columns: repeat(6, 1fr); } }
.wr-key { aspect-ratio: 1; font-size: 1.6rem; font-weight: 700; border: 2px solid var(--line);
  border-radius: 12px; background: var(--card, #fff); color: var(--text, #222); cursor: pointer; text-transform: lowercase; }
.wr-key:active { transform: scale(.95); }
.wr-practice { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.wr-head { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 320px; }
.wr-head .pr-back { margin-right: auto; }
.wr-title { font-size: 1rem; opacity: .75; }
.wr-big { font-size: 2rem; font-weight: 800; color: var(--accent); }
.wr-stage { position: relative; width: min(72vw, 300px); aspect-ratio: 100 / 160; margin: 0 auto;
  background: var(--card, #fff); border: 2px solid var(--line); border-radius: 14px; overflow: hidden; }
.wr-svg, .wr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.wr-canvas { touch-action: none; cursor: crosshair; }
.wr-rule { stroke: rgba(0,0,0,.14); stroke-width: 1; }
.wr-faint { fill: none; stroke: rgba(0,0,0,.12); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.wr-ink { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.wr-num-bg { fill: #e5533d; }
.wr-num-t { fill: #fff; font-size: 12px; text-anchor: middle; font-family: sans-serif; font-weight: 700; }
.wr-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 340px; }
.wr-btn { padding: 12px 16px; font-size: 1rem; border-radius: 12px; cursor: pointer; }
.wr-btn-quiet { background: none; border: 2px solid var(--line); color: inherit; }
.sk-tile-writing { --sub: #7a5cff; }