/* The app's themes for the game (English World), which is built in another repository and has one, light, look of
   its own. Hand-written and kept: a re-export of the game replaces index.html and assets/, not this file.

   scripts/static_theme.py puts a small script in the page's <head> that sets data-fs-theme="pastel|glass|code|ink" on
   <html> (from the learner's choice in Nustatymai, localStorage fluentsteps.theme.v1) before the first paint and keeps
   it current, and links this file after the game's own stylesheet. "pastel" (or no attribute) is the game as it is.
   The game paints with its own variables (--ink, --panel, --line, --accent…), so each theme first sets those, then
   repaints what the game colours with fixed values (white cards, cream strips, tinted badges). The class names
   are the game's; if a re-export renames one, that one piece of the game simply keeps its light look.
   The 3D city (WebGL canvas, minimap) keeps its daylight; everything drawn in HTML around it follows the theme. */

/* "Mažiau judesio" in Nustatymai (the operating system's setting is honoured by the game itself). */
html[data-fs-motion="reduced"] *, html[data-fs-motion="reduced"] *::before, html[data-fs-motion="reduced"] *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}

/* ------------------------------------------------------------------------------------------ tokens: code */
/* "Anglų kodas": graphite, amber, cream type. */
html[data-fs-theme="code"] {
  color-scheme: dark;
  --ink: #ece8e0; --ink-soft: #b8bfca; --ink-faint: #8f97a4;
  --panel: rgba(18, 22, 29, 0.96); --panel-solid: #12161d;
  --line: rgba(255, 255, 255, 0.13); --line-soft: rgba(255, 255, 255, 0.08);
  --accent: #f9a04a; --accent-strong: #ffbd76; --accent-hi: #ffb35e; --accent-ink: #160d07;
  --accent-soft: rgba(249, 160, 74, 0.15); --accent-soft-2: rgba(249, 160, 74, 0.26);
  --warm: #ffb35e; --gold: #f4c542; --gold-soft: rgba(244, 197, 66, 0.16);
  --good: #4fd1a5; --bad: #f2736b; --lt: #aab2be; --dash: #8b94a2; --ipa: #b4b6ec;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 10px 28px -8px rgba(0, 0, 0, 0.6), 0 22px 56px -20px rgba(0, 0, 0, 0.65);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 3px 10px -6px rgba(0, 0, 0, 0.55);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 26px -12px rgba(0, 0, 0, 0.6);
  --ring: 0 0 0 3px rgba(249, 160, 74, 0.35); --focus: rgba(249, 160, 74, 0.75);
  --lh-bg: radial-gradient(1100px 520px at 50% -14%, rgba(38, 58, 105, 0.5), transparent 70%),
    radial-gradient(640px 320px at 88% -6%, rgba(249, 160, 74, 0.1), transparent 70%), #0b0e15;

  --g-page: #0b0e15;
  --g-well: #0d1016; --g-frame: #e9e3d6; --g-chip: rgba(18, 22, 29, 0.85);
  --g-card: #171c25; --g-cream: #12161d; --g-strip: #141920; --g-raise: #1d232d;
  --g-hover: rgba(255, 255, 255, 0.08); --g-hover-edge: rgba(255, 255, 255, 0.28);
  --g-track: rgba(255, 255, 255, 0.14); --g-switch: #3a424e; --g-seg: rgba(255, 255, 255, 0.08);
  --g-edge: rgba(255, 255, 255, 0.13); --g-head: linear-gradient(#171c25, #12161d);
  --g-gold-bg: #2a2412; --g-gold-edge: rgba(244, 197, 66, 0.5); --g-gold-fg: #f6d878; --g-gold-mute: #c9a94a;
  --g-good-bg: rgba(79, 209, 165, 0.14); --g-good-edge: rgba(79, 209, 165, 0.38); --g-good-fg: #6fdcb8;
  --g-bad-bg: rgba(242, 115, 107, 0.16); --g-bad-fg: #ff9a92;
  --g-warn-bg: rgba(249, 160, 74, 0.14); --g-warn-fg: #ffbd76;
  --g-on-accent: #160d07; --g-on-accent-soft: rgba(22, 13, 7, 0.78); --g-warm-fg: #ffb35e; --g-glare: rgba(255, 255, 255, 0.1);
  --g-art: brightness(0.34) saturate(0.8);
  --g-tag-fg: #0b0e15; --g-ok: rgba(0, 0, 0, 0.16);
}

/* ---------------------------------------------------------------------------------------- tokens: glass */
/* "Skystas stiklas": frosted white over soft colour, blue where the game was teal. */
html[data-fs-theme="glass"] {
  color-scheme: light;
  --ink: #141822; --ink-soft: #454d63; --ink-faint: #59617a;
  --panel: rgba(255, 255, 255, 0.72); --panel-solid: #f8faff;
  --line: rgba(24, 33, 53, 0.13); --line-soft: rgba(24, 33, 53, 0.08);
  --accent: #1554cf; --accent-strong: #0e3fa8; --accent-hi: #2a72ea; --accent-ink: #ffffff;
  --accent-soft: rgba(30, 89, 205, 0.1); --accent-soft-2: rgba(30, 89, 205, 0.18);
  --warm: #a8440a; --gold: #e0a100; --gold-soft: rgba(246, 190, 40, 0.22);
  --good: #17785c; --bad: #d1452b; --lt: #4e566b; --dash: #657086; --ipa: #4f4f86;
  --shadow: 0 1px 1px rgba(40, 56, 110, 0.06), 0 12px 32px -12px rgba(40, 56, 110, 0.3), 0 26px 60px -24px rgba(40, 56, 110, 0.3);
  --shadow-sm: 0 1px 2px rgba(40, 56, 110, 0.08), 0 4px 14px -8px rgba(40, 56, 110, 0.25);
  --shadow-md: 0 2px 4px rgba(40, 56, 110, 0.08), 0 14px 28px -14px rgba(40, 56, 110, 0.35);
  --ring: 0 0 0 3px rgba(30, 89, 205, 0.25); --focus: rgba(30, 89, 205, 0.6);
  --lh-bg: radial-gradient(60vmax 60vmax at -6% -8%, rgba(134, 195, 255, 0.7), transparent 62%),
    radial-gradient(52vmax 52vmax at 106% -4%, rgba(218, 186, 255, 0.62), transparent 62%),
    radial-gradient(48vmax 48vmax at 4% 108%, rgba(255, 207, 154, 0.66), transparent 62%),
    radial-gradient(44vmax 44vmax at 104% 106%, rgba(162, 237, 216, 0.58), transparent 62%), #eef4fc;

  --g-page: #eef4fc;
  --g-well: rgba(255, 255, 255, 0.92); --g-frame: #fffdf8; --g-chip: rgba(255, 255, 255, 0.72);
  --g-card: rgba(255, 255, 255, 0.74); --g-cream: rgba(240, 245, 255, 0.7); --g-strip: rgba(236, 243, 255, 0.72); --g-raise: rgba(255, 255, 255, 0.9);
  --g-hover: rgba(255, 255, 255, 0.92); --g-hover-edge: rgba(30, 89, 205, 0.4);
  --g-track: rgba(24, 33, 53, 0.12); --g-switch: #c5cde0; --g-seg: rgba(24, 33, 53, 0.07);
  --g-edge: rgba(255, 255, 255, 0.92); --g-head: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.4));
  --g-gold-bg: #fff3d0; --g-gold-edge: #e7c25a; --g-gold-fg: #5c4300; --g-gold-mute: #7a5a00;
  --g-good-bg: #dcf3ea; --g-good-edge: #a8dcc8; --g-good-fg: #17694f;
  --g-bad-bg: #fde4dc; --g-bad-fg: #9a2f17;
  --g-warn-bg: #ffe9cf; --g-warn-fg: #8a3f06;
  --g-on-accent: #ffffff; --g-on-accent-soft: rgba(255, 255, 255, 0.88); --g-warm-fg: #a8440a; --g-glare: rgba(255, 255, 255, 0.8);
  --g-art: none;
  --g-tag-fg: #fff; --g-ok: rgba(255, 255, 255, 0.24);
}

/* ------------------------------------------------------------------------------------------ tokens: ink */
/* "Rašalo knyga": warm paper, deep green ink, copper. */
html[data-fs-theme="ink"] {
  color-scheme: light;
  --ink: #292e2a; --ink-soft: #485049; --ink-faint: #5f5b50;
  --panel: rgba(253, 250, 243, 0.97); --panel-solid: #fdfaf3;
  --line: #d8cbb5; --line-soft: #e4d9c6;
  --accent: #26463e; --accent-strong: #1b352e; --accent-hi: #365c4e; --accent-ink: #fffdf7;
  --accent-soft: #e0e8df; --accent-soft-2: #d2ddd2;
  --warm: #95462f; --gold: #c58a12; --gold-soft: #f4e6c4;
  --good: #316747; --bad: #a63430; --lt: #555c54; --dash: #736a5a; --ipa: #5a5a7a;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.8), 0 14px 32px -16px rgba(47, 42, 28, 0.4), 0 26px 50px -26px rgba(47, 42, 28, 0.35);
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.8), 0 6px 16px -10px rgba(47, 42, 28, 0.35);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, 0.8), 0 12px 26px -14px rgba(47, 42, 28, 0.4);
  --ring: 0 0 0 3px rgba(38, 70, 62, 0.22); --focus: rgba(38, 70, 62, 0.6);
  --lh-bg: repeating-linear-gradient(0deg, transparent 0 3px, rgba(65, 56, 40, 0.015) 3px 4px),
    radial-gradient(42rem 30rem at -5% 3%, rgba(151, 112, 72, 0.14), transparent 70%),
    radial-gradient(36rem 28rem at 105% 90%, rgba(88, 123, 96, 0.12), transparent 72%), #e9e4d7;

  --g-page: #e9e4d7;
  --g-well: #ffffff; --g-frame: #fffdf8; --g-chip: rgba(253, 250, 243, 0.85);
  --g-card: #fdfaf3; --g-cream: #f5f0e3; --g-strip: #f3eee1; --g-raise: #fffdf7;
  --g-hover: rgba(38, 70, 62, 0.08); --g-hover-edge: rgba(38, 70, 62, 0.4);
  --g-track: rgba(38, 70, 62, 0.14); --g-switch: #cfc6b3; --g-seg: rgba(38, 70, 62, 0.08);
  --g-edge: #d8cbb5; --g-head: linear-gradient(#fffdf8, #faf6ec);
  --g-gold-bg: #f7ecd0; --g-gold-edge: #d9b96a; --g-gold-fg: #5a4206; --g-gold-mute: #7d5f12;
  --g-good-bg: #dfeadf; --g-good-edge: #b7cfb9; --g-good-fg: #245237;
  --g-bad-bg: #f3dcd2; --g-bad-fg: #8a2c1f;
  --g-warn-bg: #f3e1cc; --g-warn-fg: #7a3a1d;
  --g-on-accent: #fffdf7; --g-on-accent-soft: rgba(255, 253, 247, 0.88); --g-warm-fg: #95462f; --g-glare: rgba(255, 255, 255, 0.8);
  --g-art: none;
  --g-tag-fg: #fff; --g-ok: rgba(255, 255, 255, 0.24);
}

/* --------------------------------------------------------------------------- shared by glass, code and ink */
/* Everything below starts with :root[data-fs-theme]:not([data-fs-theme="pastel"]), three classes' worth, so that each
   rule beats the game's own rule for the same piece; only the tokens above differ from theme to theme. */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) ::selection { background: var(--accent-soft-2); }

/* the page behind everything, the title screen, the loading screen */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) body { background: var(--g-page); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) body.light-mode { background: var(--g-page); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .scene-backdrop { background: var(--g-page); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .typebox input { background: var(--g-well); color: var(--ink); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.typebox input, .ts-input)::placeholder { color: var(--ink-faint); opacity: 1; }

/* the start screen (first visit and returning player) and the loading screen */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .loading { background: var(--lh-bg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .loading::after { background: linear-gradient(90deg, transparent 0%, var(--accent) 50%, transparent 100%) 0 0 / 50% 100% no-repeat, var(--g-track); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.ts-place, .ts-perks li) { background: var(--g-chip); border-color: var(--g-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-place { color: var(--g-warm-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-card { background: var(--g-card); border-color: var(--g-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.ts-input, .ts-pill, .ts-mode) { background: var(--g-well); color: var(--ink); border-color: var(--line); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-pill { color: var(--ink-soft); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.ts-pill:hover, .ts-mode:hover) { border-color: var(--g-hover-edge); color: var(--ink); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.ts-pill.on, .ts-mode.on) { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-pill.on { color: var(--accent-strong); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-mode span { color: var(--ink-soft); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-mode .ui-icon { color: var(--ink-faint); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-mode.on .ui-icon { color: var(--accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-input:focus { border-color: var(--accent); box-shadow: var(--ring); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-bar { background: var(--g-track); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-link:hover { background: var(--g-hover); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-slide { background: var(--g-well); border-color: var(--g-frame); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-npc { background: var(--g-card); color: var(--ink); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-npc .who { color: var(--g-warm-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-npc .lt { color: var(--ink-faint); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-you { color: var(--g-on-accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-you .lt { color: var(--g-on-accent-soft); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .ts-you .mic { background: var(--g-ok); }

/* buttons */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .btn { box-shadow: inset 0 1px rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.25), 0 5px 14px -6px var(--accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .btn:hover { box-shadow: inset 0 1px rgba(255, 255, 255, 0.22), 0 2px 4px rgba(0, 0, 0, 0.25), 0 9px 20px -8px var(--accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .btn:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.btn.ghost, .btn.soft) { box-shadow: none; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.btn.ghost:hover, .lh-3d:hover) { background: var(--g-hover); border-color: var(--g-hover-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .btn.warm {
  background: linear-gradient(180deg, var(--accent-hi), var(--warm) 85%); color: var(--g-on-accent);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.25), 0 5px 14px -6px var(--warm);
}
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.icon-btn, .lh-tool, .lite-btn, .objective-card, .prompt) { border-color: var(--g-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.icon-btn:hover, .lh-tool:hover, .lite-btn:hover) { background: var(--g-raise); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .icon-btn .key { color: var(--ink-faint); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .stars .ui-icon.off { color: var(--g-track); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .due-badge { color: #2a1c05; box-shadow: 0 0 0 2px var(--panel-solid), 0 2px 5px rgba(0, 0, 0, 0.3); }

/* text on the accent colour (the game sets white, which suits a dark accent and not an amber one) */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.prompt kbd, .toggle.on, .msg.you .bubble, .mic, .type-toggle.on, .act-btn,
  .gx .play:hover, .hint-row .play:hover, .hint-row .play.add:hover, .scn-card:hover .ico, .lh-card:hover .lh-ico, .cd-btn:hover, .rv-play:hover) { color: var(--g-on-accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.ended-badge, .rv-badge) { color: var(--g-tag-fg); box-shadow: 0 0 0 5px var(--g-good-bg), 0 8px 18px -8px var(--good); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .msg.you .ok { background: var(--g-ok); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .mic {
  background: radial-gradient(circle at 50% 28%, var(--accent-hi) 0%, var(--accent) 58%, var(--accent-strong) 100%);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.25), inset 0 -3px rgba(0, 0, 0, 0.14), 0 2px 4px rgba(0, 0, 0, 0.25), 0 10px 22px -8px var(--accent);
}
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .mic.listening { background: radial-gradient(circle at 50% 28%, #e8765d 0%, var(--bad) 58%, #b4432a 100%); color: #fff; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .mic:disabled { background: var(--g-switch); box-shadow: none; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .msg.you .bubble { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 8px 18px -10px var(--accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .toggle.on { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 3px 8px -3px var(--accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .type-toggle.on { box-shadow: 0 5px 12px -5px var(--accent); }

/* the 3D city's HUD, toasts */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .nametag { background: var(--panel); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .nametag.objective { background: var(--g-gold-bg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.objective-card .collapse-btn:hover, .toast .x:hover, .mission-bar:hover, .cards-export:hover, .howto summary:hover) { background: var(--g-hover); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .toast { border-color: var(--line-soft); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .toast.success .t-icon { color: var(--g-good-fg); background: var(--g-good-bg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .toast.tip .t-icon { color: var(--g-gold-fg); background: var(--g-gold-bg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .toast.stamp { background: var(--g-strip); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .toast.stamp .t-icon { color: var(--g-warn-fg); background: var(--g-warn-bg); }

/* the conversation */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .convo { box-shadow: 0 0 0 1px var(--line-soft), 0 2px 6px rgba(0, 0, 0, 0.12), 0 22px 60px -16px rgba(0, 0, 0, 0.45); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.convo-head, .sheet-head) { background: var(--g-head); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .avatar { box-shadow: 0 0 0 3px var(--panel-solid), 0 0 0 4px var(--line), 0 5px 12px -4px rgba(0, 0, 0, 0.4), inset 0 -3px rgba(0, 0, 0, 0.15); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.toggles, .pb-tabs, .seg, .close-x) { background: var(--g-seg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.toggle:hover, .pb-tab:hover, .close-x:hover) { background: var(--g-hover); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.call-strip, .yourturn, .yt-bottom, .mission, .howto, .lh-howto, .rv-src) { background: var(--g-strip); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.call-strip, .yt-bottom) { border-color: var(--line-soft); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .call-strip.video { background: #1f2630; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .mission.complete { background: var(--g-good-bg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .mission-count { border-color: var(--accent-soft-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .mission-dots i { background: var(--g-track); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.mission-now .done-ico, .mission-list li.d, .mission-list li.d .mk, .cards-hero.done .hero-ico) { color: var(--g-good-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .mission-list li.d .mk { background: var(--g-good-bg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .mission-list li .mk { color: var(--ink-faint); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .mission-list li.d .mk { color: var(--g-good-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .mission-list li.c .mk { background: var(--gold-soft); color: var(--g-gold-fg); }
/* white cards and their borders */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.guide, .sg, .hint-row, .type-toggle, .typebox input, .miss-box, .sit-card, .scn-card, .set-row, .lh-card,
  .cd-row, .rv-card, .chip, .gx .rp-btn, .mission-count, .cards-plus, .hint-row .play.add, .hero-ico) { background: var(--g-card); border-color: var(--line); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .gx:hover { background: var(--g-hover); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.guide-alt, .rv-answer, .dym, .wpop-hint) { border-color: var(--line); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .msg.npc .bubble { background: var(--g-card); border-color: var(--line-soft); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .msg.npc.speaking .bubble { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), 0 6px 16px -10px var(--accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .msg .meta button { background: var(--accent-soft); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .msg .meta button:hover { background: var(--accent-soft-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .msg.you.miss .bubble { background: var(--g-strip); border-color: var(--line); color: var(--ink-soft); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .msg.note .bubble { background: var(--g-gold-bg); border-color: var(--g-gold-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .msg.note .note-ico { color: var(--g-gold-mute); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .nat { color: var(--ink-soft); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.chip:hover, .type-toggle:hover, .sit-card:hover, .scn-card:hover, .scn-card:focus-visible, .lh-card:hover, .lh-card:focus-visible) { border-color: var(--g-hover-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .chip:hover { background: var(--g-raise); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .chip.on { border-color: var(--g-gold-edge); color: var(--g-gold-fg); background: var(--g-gold-bg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .chip.on .ui-icon { color: var(--g-gold-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .hint-toggle { color: var(--g-gold-fg); background: var(--g-gold-bg); border-color: var(--g-gold-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .hint-toggle:hover { border-color: var(--gold); box-shadow: none; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .hint-toggle .bulb { color: var(--gold); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .hint-row .pat .gap { color: var(--g-gold-fg); border-bottom-color: var(--gold); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.hint-toggle .key, .hint-toggle .chev) { color: var(--g-gold-mute); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .hint-row .tag { color: var(--g-tag-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .hint-row.used { background: var(--accent-soft); border-color: var(--accent-soft-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.hint-row .play.add, .cards-plus) { box-shadow: inset 0 0 0 1.5px var(--accent-soft-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.gx .rp-btn:hover, .gx .rp-btn.playing) { background: var(--accent-soft); border-color: var(--accent-soft-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .gx .rp-btn.listening { background: var(--bad); border-color: var(--bad); color: #fff; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .rp-res.almost .rp-verdict { color: var(--g-gold-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .rp-res.again .rp-verdict { color: var(--g-bad-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .type-toggle { color: var(--ink-soft); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .type-toggle.on { background: var(--accent); border-color: var(--accent); color: var(--g-on-accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .miss-box { border-color: var(--g-gold-edge); }
@media (hover: hover) {
  :root[data-fs-theme]:not([data-fs-theme="pastel"]) .il .u.tap:hover { background: var(--accent-soft); box-shadow: 0 0 0 0.14em var(--accent-soft); }
}
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .il .u.tap.open { background: var(--accent-soft-2); box-shadow: 0 0 0 0.14em var(--accent-soft-2); }

/* sheets: tasks, settings, phrasebook, cards */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .sheet { box-shadow: 0 0 0 1px var(--line-soft), 0 26px 70px -24px rgba(0, 0, 0, 0.6); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .sit-card.current { border-color: var(--gold); background: var(--g-gold-bg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .sit-card.current .ico { background: var(--gold-soft); color: var(--g-gold-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.scn-card.done, .lh-card.done) { background: var(--g-cream); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .lh-card.current { background: var(--g-gold-bg); border-color: var(--gold); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .lh-tag { color: var(--g-gold-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .switch { background: var(--g-switch); box-shadow: none; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .switch.on { background: var(--accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.seg button.on, .pb-tab.on) { background: var(--g-raise); color: var(--ink); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .pb-tab .n { color: var(--ink-soft); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .info-box { color: var(--ink-soft); background: var(--accent-soft); border-color: var(--accent-soft-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .cards-hero { background: var(--accent-soft); border-color: var(--accent-soft-2); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .cards-hero.done { background: var(--g-good-bg); border-color: var(--g-good-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) :is(.cd-pips i, .rv-progress) { background: var(--g-track); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .cd-pips i.on { background: var(--good); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .rv-progress i { background: var(--accent); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .cd-when.now { color: var(--g-gold-fg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .cd-btn.del:hover { color: var(--bad); background: var(--g-bad-bg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .cd-btn.del.sure { background: var(--bad); color: #fff; }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .rv-src-en mark { background: var(--g-gold-bg); color: var(--ink); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .hw-miss { color: var(--g-bad-fg); background: var(--g-bad-bg); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .dym-opt:hover { background: var(--accent-soft-2); border-color: var(--accent); box-shadow: none; }

/* the lobby */
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .lh-hello { background: var(--g-card); border-color: var(--g-edge); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .lh-hello-sky { filter: var(--g-art); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .lh-bar { background: var(--g-track); }
:root[data-fs-theme]:not([data-fs-theme="pastel"]) .lc-avatar { box-shadow: 0 0 0 10px var(--g-card), 0 22px 44px -18px rgba(0, 0, 0, 0.45); }
@media (max-width: 900px) {
  :root[data-fs-theme]:not([data-fs-theme="pastel"]) .lc-avatar { box-shadow: 0 0 0 7px var(--g-card), 0 16px 32px -16px rgba(0, 0, 0, 0.45); }
}

/* glass: frosted where the panels float over a picture or a colour */
:root[data-fs-theme="glass"] :is(.convo, .sheet, .ts-card, .ts-place, .ts-perks li, .lh-hello, .lh-card, .lh-tool, .icon-btn, .lite-btn, .objective-card, .prompt, .toast) {
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
}
:root[data-fs-theme="glass"] .sheet { background: rgba(250, 252, 255, 0.82); }
:root[data-fs-theme="glass"] :is(.lh-card, .lh-hello, .guide, .sit-card, .scn-card, .set-row, .cd-row) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 8px 22px -14px rgba(40, 56, 110, 0.3); }

/* ------------------------------------------------------------------------------------- pastel: reading contrast */
/* The game as it is keeps its look; its pale grey for hints and the small orange of its labels are 2:1 to 3:1 on its
   white (roadmap 3.2). Here they take a deeper shade of the same colour (4.5:1), on every screen the grey is on. */
html[data-fs-theme="pastel"] { --ink-faint: #5d6a7a; }
html[data-fs-theme="pastel"] :is(.ts-place, .ts-bubble .who) { color: #a04a08; }
html[data-fs-theme="pastel"] .ts-you .lt { color: rgba(255, 255, 255, 0.94); }
html[data-fs-theme="pastel"] .ts-card input::placeholder { color: #66727f; opacity: 1; }