/* ─── Platytutor design tokens ─────────────────────────────────────────────
   Warm storybook palette built around our platypus mascot.
   Deep navy ink on cream paper, with coral/mint/sun accents.            */

:root {
  /* Paper & ink */
  --paper: #fdf4e3;
  --paper-deep: #f6e9cd;
  --paper-edge: #ecdcb6;
  --ink: #1b3a5b;
  --ink-soft: #3d5775;
  --ink-muted: #7b8aa0;

  /* Primary characters */
  --coral: #ff6b6b;
  --coral-deep: #e8514d;
  --mint: #7ecec4;
  --mint-deep: #4ab0a4;
  --sun: #ffd23f;
  --sun-deep: #f2b705;
  --berry: #d65d9e;
  --sky: #6fb3e0;
  --sky-deep: #2f7fb5;         /* text-safe sky on cream paper */

  /* Semantic */
  --primary: var(--coral);
  --primary-deep: var(--coral-deep);
  --accent: var(--sun);
  --success: #5bb974;
  --error: #e8514d;
  --danger: var(--error);
  --info: #0d6efd;
  --info-bright: #4f7cff;
  --info-soft: rgba(13, 110, 253, 0.08);
  --warning: #ffc107;
  --warning-soft: #fff3cd;
  --warning-text: #856404;

  /* On-color foreground (text/icons on strong fills) */
  --on-color: #fff;
  /* Text and icons on a bright accent fill (mint, sun, coral, sky, berry,
     success, warning): the ink on the cream; the night ink in Sötét, where
     the fill stays bright and the ink turns chalk. */
  --on-bright: var(--ink);
  /* Mint used as text (a value, a ticked state), text-safe in every theme. */
  --mint-ink: var(--mint-deep);
  /* The desk's ink around a paper object: a ring or a cue drawn outside a
     print. A paper island (the themes below) keeps the page's value, so on
     the night desk the ring is chalk where the print's own --ink is navy. */
  --desk-ink: var(--ink);

  /* Neutral scale (Bootstrap-derived greys used by games/editor) */
  --neutral-100: #f8f9fa;
  --neutral-150: #f1f3f5;
  --neutral-200: #e9ecef;
  --neutral-300: #dee2e6;
  --neutral-400: #adb5bd;
  --neutral-500: #ced4da;
  /* Editor labels used this Bootstrap grey for the same job as --ink-muted. */
  --neutral-600: var(--ink-muted);
  --neutral-700: #495057;
  --neutral-800: #343a40;
  --neutral-900: #212529;

  /* Alpha helpers — collapse repeated rgba() literals */
  --ink-focus: rgba(27, 58, 91, 0.12);
  --ink-shadow: rgba(27, 58, 91, 0.92);   /* stamp offset color; custom lifts use this */
  --ink-wash: rgba(27, 58, 91, 0.07);     /* paper grain dots */
  --ink-inset: rgba(27, 58, 91, 0.05);
  --ink-scrim-soft: rgba(27, 58, 91, 0.4);
  --ink-scrim: rgba(27, 58, 91, 0.5);
  --ink-scrim-deep: rgba(27, 58, 91, 0.7);
  --error-muted: rgba(232, 81, 77, 0.12);
  --mint-muted: rgba(126, 206, 196, 0.18);
  --mint-active: rgba(126, 206, 196, 0.28);
  --mint-glow: rgba(126, 206, 196, 0.22);
  --coral-glow: rgba(255, 107, 107, 0.14);
  --coral-soft: rgba(255, 107, 107, 0.07);
  --coral-ring: rgba(255, 107, 107, 0.22);
  --sun-glow: rgba(255, 210, 63, 0.22);
  --paper-scrim: rgba(253, 244, 227, 0.92);
  --paper-on-dark: rgba(253, 244, 227, 0.85);
  --paper-on-dark-soft: rgba(253, 244, 227, 0.08);
  --paper-on-dark-mid: rgba(253, 244, 227, 0.14);
  --paper-on-dark-muted: rgba(253, 244, 227, 0.4);
  --white-55: rgba(255, 255, 255, 0.55);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-85: rgba(255, 255, 255, 0.85);
  --white-92: rgba(255, 255, 255, 0.92);
  --info-wash: rgba(13, 110, 253, 0.06);
  --info-ring: rgba(13, 110, 253, 0.25);
  --info-mid: rgba(13, 110, 253, 0.18);
  --info-bright-soft: rgba(79, 124, 255, 0.08);
  --info-bright-ring: rgba(79, 124, 255, 0.18);
  --info-border-soft: #dbe5ff;
  --warning-ring: rgba(255, 193, 7, 0.45);
  --warning-border: rgba(255, 193, 7, 0.35);
  --warning-wash: rgba(255, 193, 7, 0.1);
  --warning-mid: rgba(255, 193, 7, 0.25);
  --success-ring: rgba(25, 135, 84, 0.28);
  --success-glow: rgba(25, 135, 84, 0.5);
  --success-wash: rgba(25, 135, 84, 0.22);
  --danger-bs-soft: rgba(220, 53, 69, 0.1);
  --mint-deep-muted: rgba(78, 176, 164, 0.18);
  --mint-deep-border: rgba(78, 176, 164, 0.28);
  --neutral-100-soft: rgba(248, 249, 250, 0.8);
  --neutral-100-mid: rgba(248, 249, 250, 0.6);
  --neutral-100-strong: rgba(248, 249, 250, 0.9);
  --sun-ring: rgba(255, 210, 63, 0.45);
  --sun-pale: rgba(255, 236, 179, 0.35);
  --black-04: rgba(0, 0, 0, 0.04);
  --black-18: rgba(0, 0, 0, 0.18);
  --black-28: rgba(0, 0, 0, 0.28);
  --paper-warm: #eedfc0;
  --beam: #3d2e1e;
  --berry-bright: #d6336c;
  --sun-border: #ffd54f;
  --paper-glow: #fff8e1;
  --paper-glow-deep: #fff7d6;
  --paper-glow-light: #fffef6;
  --slate-blue: #3b82f6;
  --slate-grey: #dce3e6;
  --success-pale: #b7e4c7;
  --amber-soft: rgba(255, 182, 72, 0.12);
  --amber-ring: rgba(255, 182, 72, 0.3);

  /* Status badge trio (admin / statistics / parent) */
  --badge-success-bg: #d4f4dd;
  --badge-success-fg: #2a7a3e;
  --badge-warning-bg: #fff0cc;
  --badge-warning-fg: #8a6200;
  --badge-danger-bg: #fde5e5;
  --badge-danger-fg: #b83232;

  /* Surfaces */
  --card: #fffaf0;
  --card-soft: #fff5e0;
  --mint-surface: #eaf6f2;
  --danger-border: #f5c2c7;
  --danger-bg-soft: #fff5f5;
  --rope: #c4a478;                        /* wood/rope accent in scale & sequence */
  --sun-light: #fff6d9;
  --sun-hot: #f5b800;
  --success-deep: #198754;
  --success-mid: #75b798;
  --line: rgba(27, 58, 91, 0.14);
  --line-strong: rgba(27, 58, 91, 0.22);

  /* Shadow — offset hand-drawn style. The offsets are tokens of their own,
     so a narrow phone can press the whole stamp language one pixel flatter
     (see the ≤576px block below) and a touch press can travel exactly as far. */
  --stamp-off: 4px;
  --stamp-off-sm: 3px;
  --shadow-stamp: var(--stamp-off) var(--stamp-off) 0 var(--ink-shadow);
  --shadow-stamp-sm: var(--stamp-off-sm) var(--stamp-off-sm) 0 var(--ink-shadow);
  --shadow-stamp-press: 1px 1px 0 var(--ink-shadow);
  --shadow-stamp-xs: 2px 2px 0 var(--ink-shadow);
  --shadow-stamp-md: calc(var(--stamp-off) + 1px) calc(var(--stamp-off) + 1px) 0 var(--ink-shadow);
  --shadow-stamp-hover: calc(var(--stamp-off) + 2px) calc(var(--stamp-off) + 3px) 0 var(--ink-shadow);
  --shadow-stamp-lift: calc(var(--stamp-off) + 3px) calc(var(--stamp-off) + 5px) 0 var(--ink-shadow);
  /* Faint stamp — light outline buttons (OAuth sign-in) */
  --shadow-stamp-faint-press: 1px 1px 0 rgba(27, 58, 91, 0.18);
  --shadow-stamp-faint: var(--stamp-off-sm) var(--stamp-off-sm) 0 rgba(27, 58, 91, 0.18);
  --shadow-stamp-faint-hover: var(--stamp-off) var(--stamp-off) 0 rgba(27, 58, 91, 0.3);
  /* Quiet stamp — the same offset in --line-strong (dark OAuth rest/press). */
  --shadow-stamp-line: var(--stamp-off-sm) var(--stamp-off-sm) 0 var(--line-strong);
  --shadow-stamp-line-press: 1px 1px 0 var(--line-strong);
  --shadow-soft: 0 14px 32px var(--ink-focus);
  --shadow-soft-lg: 0 24px 50px color-mix(in srgb, var(--ink) 18%, transparent);
  --shadow-inset-paper: inset 0 1px 0 var(--white-70);
  /* Shadow — an instant print lying on a table, and lifted off it */
  --shadow-print: 0 1px 1px var(--black-28), 1px 3px 4px var(--black-18), 3px 8px 12px var(--black-18);
  --shadow-print-lifted: 0 2px 2px var(--black-18), 4px 9px 12px var(--black-18), 8px 20px 26px var(--black-28);

  /* Radii — slightly irregular, storybook feel */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-full: 999px;

  /* Type scale. Nearby one-off sizes snap to these. */
  --fs-caption: 0.72rem;
  --fs-label: 0.82rem;
  --fs-body: 0.95rem;
  --fs-body-lg: 1.05rem;
  --fs-title: 1.25rem;
  --fs-display: 1.7rem;

  /* Stacking. Modals share one layer; a modal that opens over another uses top. */
  --z-overlay: 9999;
  --z-overlay-top: 10000;
  --z-toast: 200;
  /* A print held up close opens from inside modals too, so it clears them all. */
  --z-inspect: calc(var(--z-overlay-top) + 100);
  /* The copy that follows the pointer: over the game, under any modal. */
  --z-drag: 1000;
  /* The game's sticky head (phone app bar + message strip), a bottom dock
     (word bank, answers, the reading peek bar), the floating "Hibát találtam"
     and a bottom sheet, which is an overlay like every other modal. */
  --z-sticky: 150;
  --z-dock: 800;
  --z-fab: 900;
  --z-sheet: var(--z-overlay);

  /* ─── Touch & phone layer ────────────────────────────────────────────
     --tap is the smallest hit area of any control on a touch screen (its
     visual may be smaller: a ::before stretches the hit area), --tap-gap the
     visible room between two of them after the stamp offset. */
  --tap: 44px;
  --tap-gap: 8px;
  /* The phone's vertical rhythm (used only behind the phone query):
     --phone-gap between the head group and the first content and between
     blocks, --phone-gap-lg between larger blocks (and above a dock), and
     --phone-gap-stamped the layout gap between two stamped targets that
     leaves --tap-gap visible after the stamp's offset shadow. --dock-pad is
     a bottom dock's inner padding (the home indicator's room is added). */
  --phone-gap: 12px;
  --phone-gap-lg: 16px;
  --phone-gap-stamped: calc(var(--tap-gap) + var(--stamp-off));
  --dock-pad: 12px;
  /* The phone game's app bar (lib/shell.js); 44px on a phone held sideways.
     Its stamp buttons are --game-bar-btn to the eye (--tap to a finger), so
     their offset shadow clears the progress strip along the bar's foot. */
  --game-bar-h: 56px;
  --game-bar-btn: 40px;
  /* The notch and the home indicator. Zero everywhere but on a page with
     viewport-fit=cover on a device that has them. */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  /* Published by lib/shell.js on game pages, always in px and kept up to
     date by itself: the bottom edge of the sticky head group (app bar + the
     message strip, one constant height: two lines on an upright phone, one
     held sideways or where the game folds it; it never changes on a scroll),
     --game-head-flow (the same on a phone), and the top edge of any fixed
     bottom element (.game-dock, the reading peek bar; the window's height
     when none). Scroll targets and a drag's edge scroll keep inside the
     head and the dock. The defaults below hold only on pages without the
     shell. */
  --game-head-bottom: 0px;
  --game-head-flow: var(--game-head-bottom);
  --game-dock-top: 100dvh;
  /* The strip a lowered celebration leaves at the window's foot (celebration.js). */
  --celebration-peek-h: 3.75rem;
  --game-dock-h: 0px;
  /* The free band's height for sizing in CSS: the small viewport (svh) less
     the head group as it stands at the top of the page and the dock, so a
     one-screen game sized on it fits whatever the strip says. Steady while
     iOS Safari's toolbar comes and goes; --game-dock-top follows the toolbar
     (it is where the dock is now, for scripts), so a box sized on it changes
     size at a scroll's end. */
  --game-free-h: calc(100svh - var(--game-head-flow) - var(--game-dock-h));

  /* Phone type: what the child reads at arm's length. A reading passage, the
     question or claim being answered, the message strip, a form field (iOS
     zooms into anything under 16px) and the floor of any UI label. The
     desktop keeps its own sizes; these are used only behind the phone query. */
  --fs-phone-reading: 1.125rem;
  --fs-phone-prompt: 1.1875rem;
  --fs-phone-strip: 1.0625rem;
  --fs-phone-button: 1rem;
  --fs-phone-field: 1rem;
  --fs-phone-label-min: 0.875rem;
  /* The smallest a playing card's caption is fitted down to (lib/playing-card.js).
     A phone raises it, and a caption that will not fit there makes its card
     give it room instead. */
  --card-label-min: 10px;

  --line-soft: rgba(0, 0, 0, 0.08);

  /* Fonts */
  --font-display: "Fraunces", "Times New Roman", serif;
  --font-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, monospace;

  /* Legacy aliases still referenced by game-chrome / game sheets / the memory board. */
  --primary-dark: var(--coral-deep);
  --secondary: var(--berry);
  --accent-soft: #ffe8a8;
  --text: var(--ink);
  --border: var(--line);
  --card-radius: var(--r-lg);
  --playing-card-width: 165px;
  --playing-card-height: 220px;
  --tile-front: linear-gradient(180deg, var(--card), var(--paper-glow-deep));
  --tile-back: linear-gradient(135deg, var(--ink), var(--ink-soft));
  --tile-matched: linear-gradient(135deg, var(--mint-deep), var(--mint));

  /* Breakpoints — CSS custom properties cannot be used inside @media
     queries, so these are documentation + a single source for JS/tools.
     Always write @media with these exact pixel values:
       sm  ≤576px    phone
       md  ≤768px    tablet   (min-width: 768px for md-up)
       lg  ≤992px    laptop
       xl  ≤1200px   wide layouts (sidebars, multi-pane)
     Prefer fluid clamp()/auto-fill over extra breakpoint rungs. */
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;

  /* Page measures. A game page takes the screen up to a big monitor's worth;
     a page of text inside it (a passage, the picture book, the front page)
     keeps the measure the panel used to have, so its lines stay readable.
     The game list is as wide for an editor, who sees every journey at once. */
  --page-max: 2200px;
  --text-measure: 1130px;
}

/* sm — phone card sizing (canonical --bp-sm). Two cards side by side fill a
   360–430px phone (the 4rem: the page gutters, a board's padding and a grid gap), at the
   desktop card's 3:4; never smaller than the old fixed 118px nor larger than
   the desktop card. The stamp presses one pixel flatter, so a 2–2.5px ink
   line keeps its weight against the smaller offset. */
@media (max-width: 576px) {
  :root {
    --playing-card-width: clamp(118px, calc((100vw - 4rem) / 2), 165px);
    --playing-card-height: calc(var(--playing-card-width) * 4 / 3);
    --stamp-off: 3px;
    --stamp-off-sm: 2px;

}
}

/* ─── Dyslexia-friendly reading font ──────────────────────────────────
   Opt-in per account from the user menu (js/reading-font.js sets
   <html data-reading-font="dyslexic">): Platy Reading takes over every
   font role. It is OpenDyslexic 0.990 with its „ (U+201E) redrawn, which
   upstream draws as a plain comma; the OFL reserves the original's name,
   hence its own (tools/build_reading_font.py, licence in assets/fonts/).
   Each role gets it at the x-height of the face it replaces, so letters
   stay the size the layout was drawn for; lines run about 1.5× longer, the
   wide letter and word spacing being much of what the face is for. A face
   downloads only once a page uses it, so the mode costs nothing while it
   is off.                                                             */
@font-face {
  font-family: "Platy Reading";
  src: url("../assets/fonts/PlatyReading-Regular.woff2") format("woff2");
  font-weight: 100 599;
  font-display: swap;
  size-adjust: 86%; /* Nunito and Fraunces x-height 0.48 em ÷ Platy Reading 0.56 em */
}
@font-face {
  font-family: "Platy Reading";
  src: url("../assets/fonts/PlatyReading-Bold.woff2") format("woff2");
  font-weight: 600 1000;
  font-display: swap;
  size-adjust: 86%;
}
@font-face {
  font-family: "Platy Reading Hand";
  src: url("../assets/fonts/PlatyReading-Regular.woff2") format("woff2");
  font-weight: 100 599;
  font-display: swap;
  size-adjust: 71%; /* Caveat x-height 0.40 em */
}
@font-face {
  font-family: "Platy Reading Hand";
  src: url("../assets/fonts/PlatyReading-Bold.woff2") format("woff2");
  font-weight: 600 1000;
  font-display: swap;
  size-adjust: 71%;
}

:root[data-reading-font="dyslexic"] {
  --font-display: "Platy Reading", "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-body: "Platy Reading", "Nunito", "Segoe UI", system-ui, sans-serif;
  --font-hand: "Platy Reading Hand", "Nunito", "Segoe UI", system-ui, sans-serif;
}

/* Phone frame: a caption is never fitted below 15px; the card grows instead.
   A UI label is 14px (--fs-phone-label-min) on a phone, upright or sideways:
   the desktop's 13px label is read at arm's length there. */
@media (max-width: 767.98px) {
  :root {
    --card-label-min: 15px;
    --fs-label: var(--fs-phone-label-min);
  }
}

/* A phone held sideways: the app bar gives the board its 12px back. */
@media (max-height: 500px) and (pointer: coarse) {
  :root {
    --game-bar-h: 44px;
    --game-bar-btn: 32px;
    --fs-label: var(--fs-phone-label-min);
  }
}

/* ─── Themes ──────────────────────────────────────────────────────────────
   The look above is Világos, the default: with no choice made the page has
   no data-theme on <html> and nothing below matches. A choice is set before
   the first paint by the snippet at the top of /config.js (server.js) and
   changed by js/theme.js; per device, never per account.
     data-theme="dark"      Sötét ("Éjjeli tinta")
   A token that names another (--text: var(--ink), --primary, the stamp
   shadows) is worked out where it is declared. On <html> a theme block and
   :root are the same element, so those follow the theme by themselves; a
   paper island (below) declares its own --ink and states them again.
   Never light-dark(): a browser without it (iOS before 17.5) would drop the
   whole declaration, the default palette with it. */

/* Sötét — "Éjjeli tinta". The page is the brand's own blue-black ink and
   what was drawn in ink is chalk. Stamps keep their grammar (a chalk line, a
   chalk offset at 60%); bright accents are stickers that keep their colour
   and carry the night ink; paper objects stay paper (the islands below). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --night-0: #06111e;
  --night: #0f2238;
  --night-deep: #0a1a2c;
  --slate: #163050;
  --slate-soft: #1b3859;
  --slate-edge: #2a4b72;
  --chalk: #f3e9d4;
  --chalk-soft: #d9cfbd;
  --chalk-muted: #a9b8cc;

  --paper: var(--night);
  --paper-deep: var(--night-deep);
  --paper-edge: var(--slate-edge);
  --ink: var(--chalk);
  --ink-soft: var(--chalk-soft);
  --ink-muted: var(--chalk-muted);

  --coral: #ff7a70;
  --coral-deep: #ff9a91;
  --mint: #7fd6ca;
  --mint-deep: #8fe3d7;
  --sun: #ffd447;
  --sun-deep: #ffd95c;
  --berry: #f17fbe;
  --sky: #7dc3f0;
  --sky-deep: #9dd2f5;

  --success: #6fd08a;
  --error: #ff7a70;
  --info: #7fb2ff;
  --info-bright: #8aa8ff;
  --info-soft: rgba(127, 178, 255, 0.12);
  --warning: #ffc935;
  --warning-soft: #3b3217;
  --warning-text: #ffd977;
  /* The editors' stale-media banner names these with light fallbacks. */
  --warning-50: #3b3217;
  --warning-200: rgba(255, 201, 53, 0.22);
  --warning-300: rgba(255, 201, 53, 0.4);
  --on-color: var(--night);
  --on-bright: var(--night);
  --mint-ink: #8fe3d7;

  --neutral-100: #1a3352;
  --neutral-150: #1d3757;
  --neutral-200: #22405f;
  --neutral-300: #2b4a6c;
  --neutral-400: #6f86a3;
  --neutral-500: #4f6888;
  --neutral-700: #c3cfdd;
  --neutral-800: #dbe3ec;
  --neutral-900: #eef2f6;

  --ink-focus: rgba(243, 233, 212, 0.14);
  --ink-shadow: rgba(243, 233, 212, 0.6);
  --ink-wash: rgba(243, 233, 212, 0.05);
  --ink-inset: rgba(0, 0, 0, 0.18);
  --ink-scrim-soft: rgba(3, 9, 17, 0.5);
  --ink-scrim: rgba(3, 9, 17, 0.62);
  --ink-scrim-deep: rgba(3, 9, 17, 0.8);
  --error-muted: rgba(255, 122, 112, 0.16);
  --mint-muted: rgba(127, 214, 202, 0.16);
  --mint-active: rgba(127, 214, 202, 0.26);
  --mint-glow: rgba(127, 214, 202, 0.06);
  --coral-glow: rgba(255, 122, 112, 0.07);
  --coral-soft: rgba(255, 122, 112, 0.1);
  --coral-ring: rgba(255, 122, 112, 0.35);
  --sun-glow: rgba(255, 212, 71, 0.05);
  /* The paper alphas mean "the night" here: a veil of the page, and text on
     an --ink surface (which is chalk now). */
  --paper-scrim: rgba(15, 34, 56, 0.92);
  --paper-on-dark: rgba(15, 34, 56, 0.88);
  --paper-on-dark-soft: rgba(15, 34, 56, 0.08);
  --paper-on-dark-mid: rgba(15, 34, 56, 0.14);
  --paper-on-dark-muted: rgba(15, 34, 56, 0.55);
  --white-55: rgba(243, 233, 212, 0.1);
  --white-70: rgba(243, 233, 212, 0.12);
  --white-85: rgba(22, 48, 80, 0.85);
  --white-92: rgba(22, 48, 80, 0.92);
  --info-wash: rgba(127, 178, 255, 0.08);
  --info-ring: rgba(127, 178, 255, 0.35);
  --info-mid: rgba(127, 178, 255, 0.22);
  --info-bright-soft: rgba(138, 168, 255, 0.12);
  --info-bright-ring: rgba(138, 168, 255, 0.3);
  --info-border-soft: #2d4a78;
  --warning-ring: rgba(255, 201, 53, 0.5);
  --warning-border: rgba(255, 201, 53, 0.4);
  --warning-wash: rgba(255, 201, 53, 0.1);
  --warning-mid: rgba(255, 201, 53, 0.22);
  --success-ring: rgba(111, 208, 138, 0.35);
  --success-glow: rgba(111, 208, 138, 0.5);
  --success-wash: rgba(111, 208, 138, 0.2);
  --danger-bs-soft: rgba(255, 122, 112, 0.14);
  --mint-deep-muted: rgba(127, 214, 202, 0.16);
  --mint-deep-border: rgba(127, 214, 202, 0.32);
  --neutral-100-soft: rgba(26, 51, 82, 0.8);
  --neutral-100-mid: rgba(26, 51, 82, 0.6);
  --neutral-100-strong: rgba(26, 51, 82, 0.9);
  --sun-ring: rgba(255, 212, 71, 0.5);
  --sun-pale: rgba(255, 212, 71, 0.16);
  /* A shadow on a dark desk needs more black to show. */
  --black-04: rgba(0, 0, 0, 0.12);
  --black-18: rgba(0, 0, 0, 0.32);
  --black-28: rgba(0, 0, 0, 0.45);
  --paper-warm: #1d3857;
  --beam: #e9d6b8;
  --berry-bright: #ff7fb8;
  --sun-border: #ffd95c;
  --paper-glow: #1b3657;
  --paper-glow-deep: #1b3657;
  /* Physical paper (a print's frame, a notebook page) stays paper, lamplit:
     everything painted with it is an island below. */
  --paper-glow-light: #f1e9d7;
  --slate-blue: #8ab4ff;
  --slate-grey: #2b4766;
  --success-pale: #1f4b3a;
  --amber-soft: rgba(255, 182, 72, 0.14);
  --amber-ring: rgba(255, 182, 72, 0.38);

  --badge-success-bg: #1f4b3a;
  --badge-success-fg: #9fe6b4;
  --badge-warning-bg: #4a3c14;
  --badge-warning-fg: #ffd977;
  --badge-danger-bg: #4d2226;
  --badge-danger-fg: #ffb0a9;

  --card: var(--slate);
  --card-soft: var(--slate-soft);
  --mint-surface: #173f48;
  --danger-border: #7a3a3c;
  --danger-bg-soft: #3a1f27;
  --rope: #c9a97c;
  --sun-light: #3a3420;
  --sun-hot: #ffcf33;
  --success-deep: #8fe0a6;
  --success-mid: #5fae84;
  --line: rgba(243, 233, 212, 0.16);
  --line-strong: rgba(243, 233, 212, 0.3);
  --line-soft: rgba(243, 233, 212, 0.1);
  --accent-soft: #4a3f1c;

  --shadow-soft: 0 14px 32px rgba(0, 0, 0, 0.35);
  --shadow-soft-lg: 0 24px 50px rgba(0, 0, 0, 0.45);
  --shadow-inset-paper: inset 0 1px 0 rgba(243, 233, 212, 0.08);
  --shadow-print: 0 1px 1px rgba(0, 0, 0, 0.5), 1px 3px 5px rgba(0, 0, 0, 0.4), 3px 9px 16px rgba(0, 0, 0, 0.35);
  --shadow-print-lifted: 0 2px 2px rgba(0, 0, 0, 0.4), 4px 9px 14px rgba(0, 0, 0, 0.4), 8px 20px 28px rgba(0, 0, 0, 0.5);

  --tile-front: linear-gradient(180deg, var(--card), var(--paper-glow-deep));
  --tile-back: linear-gradient(135deg, #24476f, #1a3657);
  --tile-matched: linear-gradient(135deg, #3aa597, var(--mint));
}

/* Sötét's paper islands: physical paper keeps a light palette, lamplit (a
   shade warmer and dimmer than daylight paper, so it does not glare on the
   night desk): every polaroid, the picture book, the front page and its
   slips, the lined sheet, the detective's notebook and tags, the sorting
   sheets, Mérték Kaland's squared stage, the earned badge's card, and
   Nyomdoku, whose page was a night
   scene already. The tokens that name others are stated again (they were
   worked out on <html>). Not --ink-shadow or --black-18/28: the object lies
   on the night desk, its stamp offset stays chalk and its shadow dark; and
   not --desk-ink, the ring drawn around it on that desk. */
:root[data-theme="dark"] :is(
  .instant-print, .pb-book, .fp-paper, .fp-slip, .tof-sheet,
  .db-notebook, .db-tag, .db-slip, .db-strip,
  .sort-look-board .bucket-zone, .sort-look-board .cards-pool-label,
  .mq-stage, .nyomdoku, .badge-earned
) {
  color-scheme: light;
  --paper: #f3ead6;
  --paper-deep: #eadfc6;
  --paper-edge: #e0d2b2;
  --ink: #1b3a5b;
  --ink-soft: #3d5775;
  --ink-muted: #4e617b;
  --card: #f6eedd;
  --card-soft: #f3e8d2;
  --coral: #ff6b6b;
  --coral-deep: #b02e29;
  --mint: #7ecec4;
  --mint-deep: #4ab0a4;
  --mint-ink: #1f6e65;
  --sun: #ffd23f;
  --sun-deep: #e0a800;
  --sky: #6fb3e0;
  --sky-deep: #2f7fb5;
  --berry: #d65d9e;
  --success: #5bb974;
  --error: #e8514d;
  --info: #1d5bbf;
  --info-bright: #3a5fd0;
  --warning-soft: #fff3cd;
  --warning-text: #856404;
  /* White on coral is 2.8:1; the deep night on it 5.8:1 (4.8 on --error). */
  --on-color: #0a1a2c;
  --on-bright: #0a1a2c;
  --ink-focus: rgba(27, 58, 91, 0.12);
  --ink-wash: rgba(27, 58, 91, 0.07);
  --ink-inset: rgba(27, 58, 91, 0.05);
  --error-muted: rgba(232, 81, 77, 0.12);
  --mint-muted: rgba(126, 206, 196, 0.18);
  --mint-active: rgba(126, 206, 196, 0.28);
  --coral-soft: rgba(255, 107, 107, 0.07);
  --line: rgba(27, 58, 91, 0.14);
  --line-strong: rgba(27, 58, 91, 0.22);
  --line-soft: rgba(0, 0, 0, 0.08);
  --white-55: rgba(255, 255, 255, 0.55);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-85: rgba(255, 255, 255, 0.85);
  --white-92: rgba(255, 250, 240, 0.9);
  --black-04: rgba(0, 0, 0, 0.05);
  --paper-scrim: rgba(243, 234, 214, 0.92);
  --paper-on-dark: rgba(243, 234, 214, 0.85);
  --paper-warm: #eedfc0;
  --paper-glow: #f6ecd2;
  --paper-glow-deep: #f3e7c8;
  --paper-glow-light: #f1e9d7;
  --sun-light: #fff6d9;
  --sun-pale: rgba(255, 236, 179, 0.5);
  --sun-ring: rgba(255, 210, 63, 0.45);
  --success-pale: #b7e4c7;
  --mint-surface: #eaf6f2;
  --accent-soft: #ffe8a8;
  --slate-grey: #dce3e6;
  --neutral-100: #f8f9fa;
  --neutral-150: #f1f3f5;
  --neutral-200: #e9ecef;
  --neutral-300: #dee2e6;
  --neutral-400: #adb5bd;
  --neutral-500: #ced4da;
  --neutral-700: #495057;
  --neutral-800: #343a40;
  --neutral-900: #212529;
  --badge-success-bg: #d4f4dd;
  --badge-success-fg: #2a7a3e;
  --badge-warning-bg: #fff0cc;
  --badge-warning-fg: #8a6200;
  --badge-danger-bg: #fde5e5;
  --badge-danger-fg: #b83232;
  --text: var(--ink);
  --border: var(--line);
  --primary: var(--coral);
  --primary-deep: var(--coral-deep);
  --primary-dark: var(--coral-deep);
  --accent: var(--sun);
  --danger: #e8514d;
  --neutral-600: var(--ink-muted);
  --shadow-inset-paper: inset 0 1px 0 var(--white-70);
  --tile-front: linear-gradient(180deg, var(--card), var(--paper-glow-deep));
  color: var(--ink);
}

/* ─── Scrollbars ──────────────────────────────────────────────────────
   A rounded ink "crayon stroke" resting in a paper-deep groove, so the
   browser chrome reads as part of the storybook page. Warms to coral
   while dragged, like every other pressable thing on the site. Only where a
   mouse drives it: a touch screen's own overlay scrollbars take no room,
   and a styled one would eat 14px of a phone's width. */

@media (pointer: fine) {
::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  background: var(--paper-deep);
  border-radius: var(--r-full);
}

::-webkit-scrollbar-thumb {
  background: var(--ink-soft);
  border-radius: var(--r-full);
  /* Paper-colored border floats the stroke inside the groove. */
  border: 4px solid var(--paper-deep);
  min-height: 40px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--coral);
}

::-webkit-scrollbar-thumb:active {
  background: var(--coral-deep);
}

::-webkit-scrollbar-corner {
  background: var(--paper-deep);
}
}

/* Firefox has no scrollbar pseudo-elements; give it the same two colors.
   Guarded so Chromium keeps the richer style above. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--ink-soft) var(--paper-deep);
  
}
}