/* GENERATED by scripts/styles/vendor_library.py — design/themes.css
   with the style-library import chain RESOLVED to one file.
   Do not hand-edit; edit design/style-library/* + design/themes.css
   and re-run the vendor script (build-deploy.sh does this too).
   Resolved chain:
     · design/style-library/index.css
     · design/style-library/base.css
     · design/style-library/theme-lime.css
     · design/style-library/theme-gold.css
     · design/style-library/theme-sunset.css
     · design/style-library/theme-neon.css
     · design/style-library/theme-forest.css
     · design/style-library/theme-board.css
     · design/style-library/theme-mycelial.css
     · design/style-library/theme-techy.css
     · design/style-library/theme-track.css
     · design/style-library/theme-cardtable.css
     · design/style-library/theme-caveman.css
     · design/style-library/theme-n64.css
     · design/style-library/theme-goldeneye.css
     · design/style-library/theme-neobrut.css
     · design/style-library/theme-neobrut-field.css
     · design/style-library/theme-neobrut-zine.css
     · design/style-library/theme-neobrut-ticket.css
     · design/style-library/theme-neobrut-locker.css
     · design/style-library/theme-x10.css
     · design/style-library/theme-doof.css
     · design/style-library/theme-qalarc.css
     · design/style-library/theme-tradez.css
     · design/style-library/theme-gmux.css
     · design/style-library/theme-volkus.css
     · design/style-library/theme-endispute.css
     · design/style-library/theme-steddi.css
*/
/* ═══════════════════════════════════════════════════════════════════════════
   RWF THEME BINDINGS — design/themes.css v4
   The portable library lives in design/style-library/ (one file per
   kit + base + index + README). This file imports it and then binds
   RWF app surfaces to each kit:
     · figma-app component library (fg-*)  — design/figma-components.css
     · board app surfaces (bd-*)           — apps/board/board.css
     · shared primitives (pop-btn, rwf-btn, fx-*)
   Nothing here defines tokens or mat-* primitives — those are the
   library's job (app-agnostic, reusable in any project).

   USAGE: vendor design/style-library/ + design/fonts/ + this file,
   set <html data-theme="caveman">, and both the token slot contract
   AND the app skins flip together. See style-library/README.md.
   ═══════════════════════════════════════════════════════════════════════ */

/* style-library/index.css — master import chain (gallery order).
   Import this one file; every kit is inert until an ancestor carries
   data-theme="<id>". Contract + full catalogue: README.md. */
/* style-library/base.css — the shared foundation of every kit
   (AUTO-SPLIT from the design/themes.css monolith by
   scripts/styles/split_style_library.py — move/re-run, don't fork).
   Applies the active kit's page texture, .mat-* primitive defaults
   and shared @keyframes. App-agnostic by contract: no app classes.
   selectors live in the library. */

[data-theme] body, .mat-page {
  background-color: var(--bg);
  background-image: var(--mat-page, none);
  background-repeat: repeat;
  background-size: auto, auto;   /* kits override for multi-layer lists */
}
/* surfaces: a panel of the material */

.mat-surface {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}
/* buttons ARE the material */

.mat-btn {
  font: 700 15px/1 var(--font-body);
  color: var(--on-accent);
  background: var(--lime);
  border: 0;
  border-radius: 10px;
  padding: 12px 20px;
  cursor: pointer;
}
.mat-btn--ghost {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* small toggles, inputs, numerals, progress, dividers, misc */

.mat-chip {
  font: 600 13px/1 var(--font-body);
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  padding: 7px 12px;
  cursor: pointer;
}
.mat-chip.is-on { color: var(--on-accent); background: var(--lime); }
.mat-input {
  font: 500 15px/1.2 var(--font-body);
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
}
.mat-num {
  font: 700 44px/1 var(--font-display);
  color: var(--text);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.mat-progress {
  background: var(--surface-2);
  border-radius: var(--pill);
  height: 10px;
  overflow: hidden;
}
.mat-progress i {
  display: block;
  height: 100%;
  background: var(--lime);
  border-radius: inherit;
}
.mat-divider {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 12px 0;
}
.mat-avatar {
  display: inline-grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text);
  font: 700 15px var(--font-display);
}
.mat-dialog {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px;
}
.mat-dialog__title { font: 700 18px var(--font-display); margin: 0 0 6px; }
.mat-dz {
  font: 700 13px/1.2 var(--font-body);
  color: var(--on-accent);
  background: var(--urgency);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.mat-badge {
  display: inline-block;
  font: 700 11px/1 var(--font-body);
  letter-spacing: 0.08em;
  color: var(--on-accent);
  background: var(--lime);
  border-radius: var(--pill);
  padding: 5px 9px;
}
/* demo-only layout for the material kit phone — never colours/materials */

.mat-lab { display: grid; gap: 14px; }
.mat-lab .mat-btn { justify-self: start; }
.mat-lab .mat-input { max-width: 240px; }
.mat-lab .mat-chip { justify-self: start; }
/* ── board · MOTION ───────────────────────────────────────────────────── */

@keyframes matFlap {                          /* split-flap settle */
  0%   { transform: rotateX(88deg); filter: brightness(0.4); }
  60%  { transform: rotateX(-12deg); }
  80%  { transform: rotateX(6deg); }
  100% { transform: rotateX(0); filter: brightness(1); }
}
@keyframes matLampPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes matFinishSheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes matTrophyBump { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-7px) scale(1.05); } 100% { transform: translateY(0) scale(1); } }
/* ── mycelial · MOTION — everything breathes ──────────────────────────── */

@keyframes matBreathe { 0%, 100% { box-shadow: 0 14px 34px rgba(4, 12, 9, 0.6), inset 0 0 26px rgba(79, 227, 193, 0.05); } 50% { box-shadow: 0 14px 34px rgba(4, 12, 9, 0.6), inset 0 0 34px rgba(79, 227, 193, 0.1); } }
@keyframes matSporeDrift { 0%, 100% { transform: translate(0, 0); opacity: 0.9; } 50% { transform: translate(4px, -6px); opacity: 0.5; } }
@keyframes matTendrilGrow { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes matGrow { 0% { transform: scale(0.6); opacity: 0; filter: brightness(0.6); } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); filter: brightness(1); } }
/* ── techy · MOTION — boot sequence + scan sweep ──────────────────────── */

@keyframes matBoot {                          /* console boot-up reveal */
  0% { opacity: 0; transform: translateY(6px); filter: brightness(1.6) saturate(0.2); }
  40% { opacity: 1; filter: brightness(1.25); }
  100% { opacity: 1; transform: translateY(0); filter: none; }
}
@keyframes matScanSweep { 0% { transform: translateY(-160%); } 100% { transform: translateY(320%); } }
/* ── track · MOTION — marquee lane paint ──────────────────────────────── */

@keyframes matTrackDeal { 0% { transform: translateY(-26px) rotate(-5deg); opacity: 0; } 60% { transform: translateY(4px) rotate(1.5deg); opacity: 1; } 100% { transform: translateY(0) rotate(0); } }
/* ── cardtable · MOTION — one slow gold shimmer, nothing frantic ──────── */

@keyframes matFeltDeal { 0% { transform: translate(-30px, -12px) rotate(-7deg); opacity: 0; } 100% { transform: translate(0, 0) rotate(0); opacity: 1; } }
/* ── caveman · MOTION — thud + fire flicker + dust ────────────────────── */

@keyframes matThud { 0% { transform: scale(1.3) rotate(4deg); opacity: 0; filter: brightness(1.4); } 55% { transform: scale(0.94) rotate(-1.5deg); opacity: 1; } 100% { transform: scale(1) rotate(0); filter: none; } }
@keyframes matFireFlicker { 0%, 100% { filter: brightness(1); } 30% { filter: brightness(1.13); } 55% { filter: brightness(0.95); } 80% { filter: brightness(1.08); } }
@keyframes matDustPuff { 0% { opacity: 0; transform: translateY(4px) scale(0.6); } 35% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px) scale(1.25); } }
/* ── n64 · MOTION — fog reveal + spawn pops ───────────────────────────── */

@keyframes matFogReveal { 0% { opacity: 0; filter: blur(5px) brightness(1.3); transform: translateY(8px); } 100% { opacity: 1; filter: blur(0) brightness(1); transform: translateY(0); } }
@keyframes matSpawnPop { 0% { transform: scale(0.5) rotate(-6deg); opacity: 0; } 62% { transform: scale(1.12) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
/* ── goldeneye · MOTION — HUD flicker, alarm strobe, reticle ─────────── */

@keyframes matHudFlicker { 0% { opacity: 0; } 40% { opacity: 1; } 55% { opacity: 0.25; } 70% { opacity: 1; } 82% { opacity: 0.6; } 100% { opacity: 1; } }
@keyframes matAlarmStrobe { 0%, 100% { background-color: #6e0a15; } 50% { background-color: #a1121f; } }
@keyframes matReticlePulse { 0% { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 0 rgba(240, 196, 69, 0.5); } 100% { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 0 16px rgba(240, 196, 69, 0); } }
/* ── neobrut · MOTION — everything buttery ────────────────────────────── */

@keyframes matSoftIn { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
/* ═══════════════════════════════════════════════════════════════════════
   MOTION GUARDS — every animation above is decorative; reduced-motion
   users get the still material without the life.
   ═══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01s !important;
  }
}
/* style-library/theme-lime.css — the "lime" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   PART 2 · THE FIVE ORIGINALS — kept, labeled, and now carrying
   material kits of their own (subtler than the nine, but never flat).
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   1 · LIME ATHLETIC — "a steel weight-room floor under fluorescent light"
   Describe it as: matte charcoal rubber floor, one loud lime stripe,
   machined-steel surfaces, technical type. The shipped default.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="lime"] {
  --bg: #0a0b0d;
  --surface: #121418;
  --surface-2: #1a1d23;
  --line: #23262d;
  --line-bright: #31353e;
  --text: #e8eaed;
  --muted: #9aa0a8;
  --faint: #868b92;
  --faint-deco: #5f646d;

  --lime: #c6f32e;              /* primary — energy, verified, action */
  --lime-dim: #8fb31c;
  --lime-glow: rgba(198, 243, 46, 0.14);
  --coral: #ff5c38;             /* effort, HR, heat */
  --coral-glow: rgba(255, 92, 56, 0.14);
  --amber: #ffb020;             /* warning, pending */
  --sky: #6ec1ff;               /* info, slack */

  --success: #34d399;
  --danger: #ff4d5e;
  --urgency: #ff8a00;

  --energy: #8b5cf6;
  --energy-light: #b79dfb;
  --energy-tint: #2a1f4d;

  --dz-bg: #150810;
  --dz3-surface: #2a1020;
  --dz-hero: #3a0f1b;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --pill: 999px;

  --on-accent: #0a0b0d;         /* 15.3:1 on lime */
  --primary-hover: #d6ff45;
  --on-warn: #0a0b0d;           /* 10.1:1 on amber */

  /* figma-app reads --on-gold (its on-primary text) with a --bg fallback —
     re-point so every theme's app text on primary fills stays AA. */
  --on-gold: var(--on-accent);
}
/* ── lime · MATERIAL — rubber floor + machined steel ─────────────────── */
[data-theme="lime"] {
  --mat-page:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.016) 0 2px, transparent 2px 7px),
    radial-gradient(120% 70% at 50% -12%, rgba(214, 255, 69, 0.05), transparent 55%),
    linear-gradient(#0e120c, #0a0b0d);
}
[data-theme="lime"] .mat-surface {           /* brushed steel plate */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 42%),
    var(--surface);
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="lime"] .mat-btn {               /* machined push-button */
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
[data-theme="lime"] .mat-btn:active { transform: translateY(2px); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5); }
[data-theme="lime"] .mat-btn--ghost { box-shadow: inset 0 0 0 1px var(--line), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
[data-theme="lime"] .mat-num { font-family: 'Space Grotesk', system-ui, sans-serif; letter-spacing: -0.01em; }
[data-theme="lime"] .mat-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-bright), transparent); }
[data-theme="lime"] .mat-progress i { border-radius: 999px; box-shadow: 0 0 12px var(--lime-glow); }
[data-theme="lime"] .mat-badge { box-shadow: 0 0 0 3px rgba(214, 255, 69, 0.12); }
[data-theme="lime"] .mat-dz { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%); }
/* style-library/theme-gold.css — the "gold" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   2 · GOLD ARCADE — "a late-night arcade cabinet"
   Describe it as: deep purple cabinet shell, marquee-gold chunky buttons
   that physically press, dot-grid CRT backdrop, Anton capitals.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="gold"] {
  --bg: var(--ink);             /* #0b0a12 — purple-ink, not blue-black */
  --surface: var(--ink-surface);      /* #14121f */
  --surface-2: var(--ink-raised);     /* #1b1830 */
  --line: var(--ink-line);            /* #26263a */
  --line-bright: var(--ink-line-strong); /* #3b3b52 */
  --text: #ffffff;
  --muted: #c2c2d1;
  --faint: #8e8ea3;
  --faint-deco: #63637a;

  --lime: var(--gold);                /* slot semantics: primary accent */
  --lime-dim: var(--gold-strong);
  --lime-glow: var(--gold-glow);
  --coral: var(--urgency);            /* his orange is effort + warning */
  --coral-glow: rgba(255, 138, 0, 0.14);
  --amber: var(--urgency);
  --sky: #4da3ff;

  --success: #34d399;
  --danger: #ff4d5e;
  --urgency: #ff8a00;

  --energy: #8b5cf6;
  --energy-light: #b79dfb;
  --energy-tint: #2a1f4d;

  --dz-bg: #150810;
  --dz3-surface: #2a1020;
  --dz-hero: #3a0f1b;

  --font-display: 'Anton', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', 'Space Grotesk', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;

  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --pill: 999px;

  --on-accent: #07060d;         /* his text/on-accent — 13.0:1 on gold */
  --primary-hover: #e0a800;     /* his gold-strong */
  --on-warn: #07060d;           /* 8.6:1 on his orange */

  --on-gold: var(--on-accent);  /* app safety — see lime block */
}
/* ── gold · MATERIAL — cabinet shell + marquee gold ──────────────────── */
[data-theme="gold"] {
  --mat-page:
    radial-gradient(circle at 18px 18px, rgba(232, 181, 74, 0.07) 1.6px, transparent 2px),
    radial-gradient(130% 90% at 50% -10%, #2a1f52, #171034 58%, #100b24);
}
[data-theme="gold"] body { background-size: 26px 26px, auto; }   /* dot grid tiles */
[data-theme="gold"] .mat-surface {           /* cab side panel, lit top */
  background:
    linear-gradient(180deg, rgba(232, 181, 74, 0.10), transparent 26%),
    var(--surface);
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--gold) 26%, var(--ink-line));
  box-shadow: 0 14px 34px rgba(6, 3, 18, 0.6);
}
[data-theme="gold"] .mat-btn {               /* chunky arcade press */
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  border-radius: 12px;
  border: 2px solid #241a04;
  box-shadow: 0 6px 0 var(--gold-strong), 0 10px 22px rgba(6, 3, 18, 0.55);
  transition: transform 0.09s ease, box-shadow 0.09s ease;
}
[data-theme="gold"] .mat-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--gold-strong), 0 3px 8px rgba(6, 3, 18, 0.55); }
[data-theme="gold"] .mat-num {
  font-family: 'Anton', 'Space Grotesk', sans-serif;
  text-shadow: 0 2px 0 rgba(36, 26, 4, 0.55), 0 0 26px var(--gold-glow);
}
[data-theme="gold"] .mat-divider { height: 3px; background: transparent; border-top: 3px double color-mix(in srgb, var(--gold) 55%, transparent); }
[data-theme="gold"] .mat-progress { background: #241c46; }
[data-theme="gold"] .mat-progress i {
  border-radius: 12px;
  background-image: repeating-linear-gradient(90deg, rgba(36, 26, 4, 0.28) 0 2px, transparent 2px 9px), linear-gradient(var(--gold), var(--gold-strong));
}
/* style-library/theme-sunset.css — the "sunset" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   3 · SUNSET SWISS — "a flat Swiss timing sheet"
   RADICALISED 2026-09-03 (founder: "still too similar to the poster kit")
   — this kit no longer uses offset shadows or paper grain at all; it is
   the FLAT print language to neobrut's chunky poster: hairline 1px ink
   rules, a visible 32px baseline grid, vermillion used only as a
   functional accent, tight-tracked heavy Archivo, everything aligned,
   nothing raised.
   Describe it as: a Swiss-designed race timing sheet — flat warm paper,
   hairline ink rules on a faint alignment grid, one vermillion accent
   doing functional work, oversized tight type. Nothing casts a shadow;
   hierarchy is typography alone.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="sunset"] {
  --bg: #f7efe2;                /* warm paper */
  --surface: #fffaf0;           /* card — lighter than bg */
  --surface-2: #efe4d0;         /* pressed / chips */
  --line: #1c1710;              /* heavy ink border */
  --line-bright: #1c1710;
  --text: #1c1710;
  --muted: #5b5244;
  --faint: #6e6353;
  --faint-deco: #a89a86;

  --lime: #cc3512;              /* vermillion — the ONLY loud colour */
  --lime-dim: #a02a0d;
  --lime-glow: rgba(204, 53, 18, 0.16);
  --coral: #7a2e1a;             /* deep brick — effort (separated from primary by value, not hue-slippage) */
  --coral-glow: rgba(122, 46, 26, 0.12);
  --amber: #8a6100;             /* warning — AA ochre */
  --sky: #0b62c4;               /* info — cobalt */

  --success: #1d7a3e;           /* forest green */
  --danger: #b3172b;            /* crimson */
  --urgency: #a84e00;           /* burnt ochre */

  --energy: #6b2fd6;            /* violet power-up axis */
  --energy-light: #6b2fd6;
  --energy-tint: #efe8fa;

  --dz-bg: #f3e6d6;             /* warm evening wash */
  --dz3-surface: #f7ddd0;
  --dz-hero: #f2d4c2;

  --font-display: 'Archivo', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Archivo', 'Space Grotesk', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;

  --radius: 0px;                /* square — the sheet is cut, not moulded */
  --radius-sm: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --pill: 0px;

  --on-accent: #fff6ea;         /* 4.8:1 on vermillion */
  --primary-hover: #a02a0d;
  --on-warn: #fff6ea;           /* 4.9:1 on ochre urgency */

  --on-gold: var(--on-accent);  /* app safety — see lime block */
}

/* ── sunset · MATERIAL — flat Swiss print ──────────────────────────────── */
[data-theme="sunset"] {
  --mat-page:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(28, 23, 16, 0.045) 31px 32px),
    linear-gradient(#f7efe2, #f3e9d8 80%);
}
[data-theme="sunset"] .mat-surface {           /* ruled index card — flat */
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line);
  border-radius: 0;
  box-shadow: none;                             /* THE statement: no shadow exists in this kit */
}
[data-theme="sunset"] .mat-btn {               /* flat vermillion block, inverts on hover */
  font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: -0.01em;
  border-radius: 0;
  border: 1px solid var(--line);
  box-shadow: none;
  transition: background 0.12s ease, color 0.12s ease;
}
[data-theme="sunset"] .mat-btn:hover { background: var(--line); color: var(--bg); }
[data-theme="sunset"] .mat-btn:active { transform: translateY(1px); }
[data-theme="sunset"] .mat-btn--ghost { background: transparent; }
[data-theme="sunset"] .mat-num { font-family: 'Archivo', sans-serif; font-weight: 900; letter-spacing: -0.04em; }
[data-theme="sunset"] .mat-divider { height: 1px; background: var(--line); }   /* hairline, not a slab */
[data-theme="sunset"] .mat-progress { border: 1px solid var(--line); border-radius: 0; background: var(--surface-2); }
[data-theme="sunset"] .mat-progress i { border-radius: 0; background: var(--lime); }   /* solid — no stripes, no gloss */
[data-theme="sunset"] .mat-chip { border-radius: 0; border: 1px solid var(--line); box-shadow: none; }
[data-theme="sunset"] .mat-chip.is-on { background: var(--line); color: var(--bg); }
[data-theme="sunset"] .mat-input { border-radius: 0; border: none; border-bottom: 1px solid var(--line); background: transparent; }
[data-theme="sunset"] .mat-avatar { border-radius: 0; border: 1px solid var(--line); }
[data-theme="sunset"] .mat-dialog { border-radius: 0; border: 1px solid var(--line); box-shadow: none; outline: 1px solid var(--line); outline-offset: 4px; }  /* double-cut frame */
[data-theme="sunset"] .mat-badge { border-radius: 0; border: 1px solid var(--line); }
[data-theme="sunset"] .mat-dz { border-radius: 0; border: 1px solid var(--line); border-left: 5px solid var(--lime); box-shadow: none; }
/* style-library/theme-neon.css — the "neon" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   4 · MIDNIGHT NEON — "an esports broadcast desk"
   Describe it as: blue-black glass under cyan rim-light, magenta heat,
   JetBrains Mono numerals, glow edges on everything primary.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="neon"] {
  --bg: #060a14;                /* deep blue-black */
  --surface: #0b1120;
  --surface-2: #111a2e;
  --line: #1c2a45;
  --line-bright: #2a3d63;
  --text: #e6f0ff;
  --muted: #9fb3d9;
  --faint: #7e93bd;
  --faint-deco: #55688e;

  --lime: #21e6ff;              /* electric cyan — primary */
  --lime-dim: #0fb4cc;
  --lime-glow: rgba(33, 230, 255, 0.20);
  --coral: #ff5d9e;             /* magenta — effort/heat */
  --coral-glow: rgba(255, 93, 158, 0.16);
  --amber: #ffc94d;
  --sky: #79b8ff;

  --success: #3df0ab;           /* mint */
  --danger: #ff6580;
  --urgency: #ffb054;

  --energy: #a992ff;            /* violet power-up axis */
  --energy-light: #c3b4ff;
  --energy-tint: #1a2340;

  --dz-bg: #0a0920;             /* violet night wash */
  --dz3-surface: #1e1030;
  --dz-hero: #250f38;

  --font-display: 'JetBrains Mono', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius: 10px;               /* tighter, screen-shaped */
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --pill: 999px;

  --on-accent: #031018;         /* 12.7:1 on cyan */
  --primary-hover: #0fb4cc;
  --on-warn: #10131f;           /* 9.8:1 on amber urgency */

  --on-gold: var(--on-accent);  /* app safety — see lime block */
}
/* ── neon · MATERIAL — smoked glass + rim light ──────────────────────── */
[data-theme="neon"] {
  --mat-page:
    linear-gradient(rgba(33, 230, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33, 230, 255, 0.045) 1px, transparent 1px),
    radial-gradient(110% 80% at 50% -14%, rgba(33, 230, 255, 0.09), transparent 60%),
    linear-gradient(#0a1226, #060a14);
  background-size: 44px 44px, 44px 44px, auto, auto;
}
[data-theme="neon"] body { background-size: 44px 44px, 44px 44px, auto, auto; }
[data-theme="neon"] .mat-surface {           /* glass pane, cyan rim */
  background: linear-gradient(165deg, rgba(33, 230, 255, 0.055), transparent 40%), var(--surface);
  border-radius: 16px;
  border-color: color-mix(in srgb, var(--lime) 18%, var(--line));
  box-shadow: 0 0 26px rgba(33, 230, 255, 0.07), inset 0 1px 0 rgba(33, 230, 255, 0.14);
}
[data-theme="neon"] .mat-btn {
  font-family: var(--font-mono); font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 0 22px var(--lime-glow), inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
[data-theme="neon"] .mat-btn--ghost { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 34%, transparent); color: var(--lime); }
[data-theme="neon"] .mat-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  text-shadow: 0 0 18px rgba(33, 230, 255, 0.45);
}
[data-theme="neon"] .mat-divider { height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lime) 65%, transparent), transparent); }
[data-theme="neon"] .mat-progress i { border-radius: 4px; background: linear-gradient(90deg, var(--lime), #8ef0ff); box-shadow: 0 0 12px var(--lime-glow); }
[data-theme="neon"] .mat-chip { font-family: var(--font-mono); border-radius: 8px; }
[data-theme="neon"] .mat-chip.is-on { box-shadow: 0 0 16px var(--lime-glow); }
[data-theme="neon"] .mat-badge { border-radius: 6px; box-shadow: 0 0 14px var(--lime-glow); }
/* style-library/theme-forest.css — the "forest" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   5 · FOREST RETRO — "a 1970s family board-game box"
   Describe it as: walnut grain, mustard + burnt-orange + olive, soft
   1970s radii, rounded Fredoka type. Everyone plays.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="forest"] {
  --bg: #25201a;                /* walnut */
  --surface: #2f2921;
  --surface-2: #3a332a;
  --line: #453c30;
  --line-bright: #5a5040;
  --text: #f2ead8;              /* cream */
  --muted: #c4b8a0;
  --faint: #a89b83;
  --faint-deco: #7a6f5c;

  --lime: #e3a93d;              /* mustard — primary */
  --lime-dim: #c08a28;
  --lime-glow: rgba(227, 169, 61, 0.16);
  --coral: #ec7d4a;             /* burnt orange — effort */
  --coral-glow: rgba(236, 125, 74, 0.14);
  --amber: #f5d06f;             /* soft cream-yellow warning */
  --sky: #7ecab9;               /* dusty teal */

  --success: #8cc36f;           /* olive */
  --danger: #e56a6a;            /* soft brick */
  --urgency: #f0975c;

  --energy: #d5a266;            /* rust power-up axis */
  --energy-light: #e8c9a0;
  --energy-tint: #3d3222;

  --dz-bg: #201a14;             /* late-evening walnut */
  --dz3-surface: #3a2020;
  --dz-hero: #442525;

  --font-display: 'Fredoka', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Fredoka', 'Space Grotesk', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;

  --radius: 18px;               /* soft, rounded */
  --radius-sm: 12px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --pill: 999px;

  --on-accent: #2a2113;         /* 7.6:1 on mustard */
  --primary-hover: #c08a28;
  --on-warn: #2a2113;           /* 6.0:1 on orange urgency */

  --on-gold: var(--on-accent);  /* app safety — see lime block */
}
/* ── forest · MATERIAL — walnut wood + soft felt ─────────────────────── */
[data-theme="forest"] {
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='none' stroke='%23efdcc2' stroke-opacity='0.05' stroke-width='1.4'%3E%3Cpath d='M0 30 Q60 24 120 32 T240 28'/%3E%3Cpath d='M0 66 Q60 58 120 70 T240 62'/%3E%3Cpath d='M0 104 Q60 112 120 100 T240 108'/%3E%3Cpath d='M0 146 Q60 138 120 150 T240 142'/%3E%3Cpath d='M0 188 Q60 196 120 184 T240 192'/%3E%3Cpath d='M0 226 Q60 218 120 230 T240 222'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% -10%, rgba(214, 145, 66, 0.1), transparent 55%),
    linear-gradient(#241810, #1b120b);
}
[data-theme="forest"] .mat-surface {         /* warm lacquered panel */
  background: linear-gradient(180deg, rgba(255, 226, 178, 0.05), transparent 45%), var(--surface);
  border-radius: 24px;
  border: 0;
  box-shadow: 0 12px 30px rgba(16, 9, 4, 0.5), inset 0 0 0 1px rgba(239, 220, 194, 0.09);
}
[data-theme="forest"] .mat-btn {             /* soft-touch pill */
  font-family: var(--font-display); font-weight: 600;
  border-radius: 999px;
  padding: 13px 24px;
  box-shadow: 0 10px 24px rgba(16, 9, 4, 0.45);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease;
}
[data-theme="forest"] .mat-btn:hover { transform: translateY(-2px) scale(1.02); }
[data-theme="forest"] .mat-btn:active { transform: scale(0.96); box-shadow: 0 5px 14px rgba(16, 9, 4, 0.45); }
[data-theme="forest"] .mat-num { font-family: 'Fredoka', sans-serif; font-weight: 600; }
[data-theme="forest"] .mat-divider { height: 0; border-bottom: 3px dotted rgba(239, 220, 194, 0.28); background: none; }
[data-theme="forest"] .mat-progress { border-radius: 999px; box-shadow: inset 0 2px 4px rgba(16, 9, 4, 0.5); }
[data-theme="forest"] .mat-progress i { border-radius: 999px; background: linear-gradient(90deg, var(--amber), var(--coral)); }
[data-theme="forest"] .mat-chip { border-radius: 999px; border: 0; box-shadow: inset 0 0 0 1.5px rgba(239, 220, 194, 0.18); }
[data-theme="forest"] .mat-input { border-radius: 999px; }
[data-theme="forest"] .mat-dialog { border-radius: 26px; border: 0; box-shadow: 0 18px 44px rgba(16, 9, 4, 0.55); }
[data-theme="forest"] .mat-avatar { border-radius: 16px; }
/* style-library/theme-board.css — the "board" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════════
   PART 3 · THE NINE MATERIAL KITS — the board eight + the new Sports
   Poster. Each kit: TOKENS (verbatim, AA-verified) · MATERIAL (page +
   mat-*) · BINDINGS (fg-* / bd-* / pop-btn) · MOTION.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   6 · STADIUM BOARD — "a flip-scoreboard stadium"
   Describe it as: floodlit infield under two lamp cones, terracotta lane
   ring, white lane paint, split-flap counter numerals, buttons that are
   starting blocks with toe-block notches, photo-finish tape progress.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="board"] {
  --bg: #0c1d14;                /* deep racing felt green-black */
  --surface: #122619;
  --surface-2: #17301f;
  --line: #1e3c29;
  --line-bright: #2a5238;
  --text: #eef4e8;
  --muted: #b7c9b4;
  --faint: #9cb2a0;
  --faint-deco: #6e8372;

  --lime: #ffc94d;              /* table gold — primary */
  --lime-dim: #d8a636;
  --lime-glow: rgba(255, 201, 77, 0.15);
  --coral: #ff7a59;
  --coral-glow: rgba(255, 122, 89, 0.14);
  --amber: #ffb95e;
  --sky: #7cc4e8;

  --success: #4cd68d;
  --danger: #ff5b6e;
  --urgency: #ff8c42;

  --energy: #b48cff;
  --energy-light: #d3c2ff;
  --energy-tint: #2a2140;

  --dz-bg: #0a1810;
  --dz3-surface: #2c1e14;
  --dz-hero: #35200f;

  --font-display: 'Anton', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --pill: 999px;

  --on-accent: #241a04;         /* 9.9:1 on gold */
  --primary-hover: #ffd97a;
  --on-warn: #211204;           /* 8.4:1 on urgency, 9.6:1 on amber */

  --on-gold: var(--on-accent);

  /* ── BOARD EXTRAS — the stadium table (apps/board reads these) ────── */
  --felt: #17492a;              /* floodlit infield green */
  --felt-deep: #0a2415;
  --felt-line: rgba(238, 244, 232, 0.20);
  --lane: #b3372c;              /* the running-track ring */
  --lane-paint: rgba(255, 255, 255, 0.34);
  --rail: #06170e;              /* stadium boundary rail */
  --rail-edge: rgba(255, 201, 77, 0.22);

  --chip-white: #f2eee2;        /* pot denominations: 1 / 5 / 25 / 100 */
  --chip-red: #d8434e;
  --chip-blue: #3d7bd9;
  --chip-gold: #e8b54a;

  --card-back-1: #1c4630;       /* card back — felt pinstripe */
  --card-back-2: #0d2417;
  --card-face: #1b3527;

  --pop-shadow: #7c5a16;        /* the offset under POPPING buttons */
  --speed: 0.9s;
}
/* ── board · MATERIAL — floodlights, lane paint, split-flap ──────────── */
[data-theme="board"] {
  --mat-page:
    radial-gradient(60% 42% at 22% -8%, rgba(255, 244, 214, 0.10), transparent 62%),
    radial-gradient(60% 42% at 78% -8%, rgba(255, 244, 214, 0.08), transparent 62%),
    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.014) 0 3px, transparent 3px 16px),
    linear-gradient(#0e2417, #0a1810);
}
[data-theme="board"] .mat-surface {           /* floodlit panel + gold keyline */
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0.06), transparent 34%),
    var(--surface);
  border: 2px solid color-mix(in srgb, var(--lime) 22%, var(--line));
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(2, 8, 4, 0.6), inset 0 1px 0 rgba(255, 244, 214, 0.08);
}
[data-theme="board"] .mat-btn {               /* STARTING BLOCK */
  position: relative;
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 6px;
  border: 2px solid rgba(4, 10, 6, 0.85);
  box-shadow: 0 7px 0 rgba(4, 10, 6, 0.85), 0 12px 22px rgba(2, 8, 4, 0.5);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
[data-theme="board"] .mat-btn::after {        /* the toe-block notch */
  content: "";
  position: absolute; left: 10%; right: 10%; bottom: -6px;
  height: 5px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--lane) 0 12px, #06170e 12px 18px);
  opacity: 0.9;
}
[data-theme="board"] .mat-btn:active { transform: translateY(6px); box-shadow: 0 1px 0 rgba(4, 10, 6, 0.85); }
[data-theme="board"] .mat-btn--ghost {
  background: var(--surface-2);
  color: var(--lime);
  box-shadow: 0 7px 0 rgba(4, 10, 6, 0.85);
}
[data-theme="board"] .mat-num {               /* SPLIT-FLAP counter cell */
  font-family: 'Anton', 'Space Grotesk', sans-serif;
  display: inline-block;
  color: #ffe9ad;
  background:
    linear-gradient(180deg, #3d2f0c 0%, #241a04 49.7%, #050301 50.3%, #2c2107 100%);
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid rgba(255, 201, 77, 0.35);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(2, 8, 4, 0.55);
  position: relative;
  animation: matFlap 0.5s cubic-bezier(0.3, 1.2, 0.4, 1) both;
}
[data-theme="board"] .mat-num::before,
[data-theme="board"] .mat-num::after {        /* hinge pins L/R of the split */
  content: "";
  position: absolute; top: 50%; width: 4px; height: 4px;
  border-radius: 50%; background: #0a0803;
  transform: translateY(-50%);
  box-shadow: 0 0 2px rgba(255, 233, 173, 0.5);
}
[data-theme="board"] .mat-num::before { left: 4px; }
[data-theme="board"] .mat-num::after  { right: 4px; }
[data-theme="board"] .mat-divider {           /* lane paint, brushed on */
  height: 6px; border-radius: 3px;
  background: repeating-linear-gradient(95deg, var(--lane-paint) 0 26px, rgba(255, 255, 255, 0.06) 26px 34px);
}
[data-theme="board"] .mat-progress {          /* track kerb */
  height: 12px; border-radius: 2px;
  background: var(--felt-deep);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
[data-theme="board"] .mat-progress i {        /* PHOTO-FINISH TAPE */
  border-radius: 2px;
  background:
    repeating-linear-gradient(45deg, #f2eee2 0 7px, #1a1006 7px 14px),
    linear-gradient(var(--lane));
  border-right: 3px solid #f2eee2;
}
[data-theme="board"] .mat-chip { border-radius: 4px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; }
[data-theme="board"] .mat-input { border-radius: 4px; }
[data-theme="board"] .mat-badge {
  border-radius: 3px; font-family: var(--font-display); letter-spacing: 0.12em;
  background: var(--lane); color: #ffe6c4;
}
[data-theme="board"] .mat-avatar { border-radius: 8px; }
[data-theme="board"] .mat-dialog { border: 2px solid color-mix(in srgb, var(--lime) 26%, var(--line)); border-radius: 8px; }
[data-theme="board"] .mat-dz {
  font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
  background:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.14) 0 10px, transparent 10px 20px),
    var(--lane);
  color: #ffe6c4; border-radius: 4px;
}
/* style-library/theme-mycelial.css — the "mycelial" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   7 · MYCELIAL — "a bioluminescent root network"
   Describe it as: a dark forest floor veined with glowing mycelium —
   tendril dividers that grew there, spores drifting in the air, buttons
   that are fungus caps (dome above, gills beneath), progress as growth
   rings. Everything breathes.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="mycelial"] {
  --bg: #171009;                /* deep soil */
  --surface: #1f1710;
  --surface-2: #271d14;
  --line: #332617;
  --line-bright: #473522;
  --text: #f2e9da;
  --muted: #c9b9a3;
  --faint: #ab9a82;
  --faint-deco: #7d6e58;

  --lime: #4fe3c1;              /* spore teal — primary */
  --lime-dim: #37b598;
  --lime-glow: rgba(79, 227, 193, 0.15);
  --coral: #ff9a73;
  --coral-glow: rgba(255, 154, 115, 0.13);
  --amber: #ffcf7d;
  --sky: #8fd4f2;

  --success: #5fd6a9;
  --danger: #ff7080;
  --urgency: #ffa259;

  --energy: #c9a1ff;
  --energy-light: #ddc6ff;
  --energy-tint: #2c2244;

  --dz-bg: #130d07;
  --dz3-surface: #33200f;
  --dz-hero: #3b2410;

  --font-display: 'Fredoka', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;

  --radius: 20px;
  --radius-sm: 14px;
  --radius-lg: 26px;
  --radius-xl: 34px;
  --pill: 999px;

  --on-accent: #03251d;         /* 10.4:1 on spore teal */
  --primary-hover: #7cf0d4;
  --on-warn: #241304;           /* 8.0:1 on urgency */

  --on-gold: var(--on-accent);

  /* board extras — mossy forest floor */
  --felt: #1d1c0e;
  --felt-deep: #100f08;
  --felt-line: rgba(79, 227, 193, 0.20);
  --rail: #0b0a06;
  --rail-edge: rgba(79, 227, 193, 0.14);
  --card-back-1: #1c332b;
  --card-back-2: #0e1a14;
  --card-face: #262017;
  --pop-shadow: #0c5b49;
  --speed: 1.05s;               /* drifting, unhurried */
}
/* ── mycelial · MATERIAL — spores, caps, tendrils ────────────────────── */
[data-theme="mycelial"] {
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='%234fe3c1'%3E%3Ccircle cx='24' cy='40' r='1.5' opacity='0.5'/%3E%3Ccircle cx='90' cy='18' r='1' opacity='0.32'/%3E%3Ccircle cx='150' cy='70' r='1.8' opacity='0.4'/%3E%3Ccircle cx='230' cy='34' r='1.1' opacity='0.3'/%3E%3Ccircle cx='276' cy='96' r='1.6' opacity='0.45'/%3E%3Ccircle cx='60' cy='130' r='1.2' opacity='0.28'/%3E%3Ccircle cx='122' cy='168' r='1.7' opacity='0.4'/%3E%3Ccircle cx='200' cy='140' r='1' opacity='0.3'/%3E%3Ccircle cx='258' cy='204' r='1.4' opacity='0.36'/%3E%3Ccircle cx='36' cy='230' r='1.9' opacity='0.42'/%3E%3Ccircle cx='170' cy='256' r='1.1' opacity='0.3'/%3E%3Ccircle cx='240' cy='278' r='1.5' opacity='0.34'/%3E%3Ccircle cx='104' cy='288' r='1.2' opacity='0.26'/%3E%3C/g%3E%3Cg fill='none' stroke='%234fe3c1' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M0 60 Q40 55 70 66 T140 58'/%3E%3Cpath d='M180 30 Q220 40 250 28 T300 44'/%3E%3Cpath d='M20 190 Q60 200 90 188 T170 196'/%3E%3Cpath d='M150 250 Q200 240 230 254 T300 246'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(90% 60% at 50% 110%, rgba(79, 227, 193, 0.07), transparent 60%),
    linear-gradient(#101a12, #0d1410);
  background-size: 300px 300px, auto, auto;
}
[data-theme="mycelial"] body { background-size: 300px 300px, auto, auto; }
[data-theme="mycelial"] .mat-surface {         /* an organism — grown, not cut */
  background:
    radial-gradient(120% 90% at 30% 0%, rgba(79, 227, 193, 0.07), transparent 55%),
    var(--surface);
  border: 1px solid rgba(79, 227, 193, 0.22);
  border-radius: 40px 30px 44px 34px / 34px 44px 30px 40px;
  box-shadow: 0 14px 34px rgba(4, 12, 9, 0.6), inset 0 0 26px rgba(79, 227, 193, 0.05);
  animation: matBreathe 7s ease-in-out infinite;
}
[data-theme="mycelial"] .mat-btn {             /* FUNGUS CAP — dome + gills */
  font-family: var(--font-display); font-weight: 500;
  color: #0c1712;
  background:
    radial-gradient(120% 150% at 50% -40%, #d8fff2 8%, var(--lime) 42%, var(--lime-dim) 88%);
  border: 0;
  border-radius: 30px 30px 16px 16px;          /* dome top, narrower underside */
  padding: 13px 22px 11px;
  box-shadow:                                /* gill shadow beneath the cap */
    inset 0 -7px 10px rgba(9, 40, 30, 0.45),
    inset 0 2px 2px rgba(255, 255, 255, 0.5),
    0 10px 22px rgba(19, 84, 66, 0.4),
    0 0 24px rgba(79, 227, 193, 0.14);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
[data-theme="mycelial"] .mat-btn::after {      /* gill lines under the rim */
  content: "";
  position: absolute; left: 14%; right: 14%; bottom: 4px; height: 4px;
  background: repeating-linear-gradient(90deg, rgba(9, 40, 30, 0.5) 0 2px, transparent 2px 6px);
  border-radius: 2px;
  opacity: 0.8;
}
[data-theme="mycelial"] .mat-btn:hover { transform: translateY(-2px) scale(1.015); }
[data-theme="mycelial"] .mat-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 -4px 8px rgba(9, 40, 30, 0.5), 0 5px 12px rgba(19, 84, 66, 0.35);
}
[data-theme="mycelial"] .mat-btn--ghost {
  background: rgba(79, 227, 193, 0.08);
  color: #8ef0da;
  border-radius: 24px 24px 14px 14px;
}
[data-theme="mycelial"] .mat-num {
  font-family: 'Fredoka', sans-serif; font-weight: 600;
  color: #a9f5e2;
  text-shadow: 0 0 22px rgba(79, 227, 193, 0.35);
  animation: matBreathe 9s ease-in-out infinite;
}
[data-theme="mycelial"] .mat-divider {         /* THE TENDRIL — it grew here */
  height: 26px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='26'%3E%3Cg fill='none' stroke='%234fe3c1' stroke-linecap='round'%3E%3Cpath d='M0 20 Q30 22 48 16 Q70 8 96 14 Q120 20 142 12 Q160 6 180 12 Q204 20 228 13 Q250 7 274 14 Q296 20 318 13 Q340 7 360 12' stroke-opacity='0.55' stroke-width='1.6'/%3E%3Cpath d='M48 16 Q44 8 52 3' stroke-opacity='0.4' stroke-width='1.2'/%3E%3Cpath d='M96 14 Q98 5 92 1' stroke-opacity='0.35' stroke-width='1'/%3E%3Cpath d='M142 12 Q146 4 140 0' stroke-opacity='0.4' stroke-width='1.2'/%3E%3Cpath d='M228 13 Q224 5 232 1' stroke-opacity='0.35' stroke-width='1'/%3E%3Cpath d='M318 13 Q322 5 316 1' stroke-opacity='0.4' stroke-width='1.1'/%3E%3Ccircle cx='52' cy='3' r='1.6' fill='%234fe3c1' fill-opacity='0.8'/%3E%3Ccircle cx='140' cy='0' r='1.4' fill='%234fe3c1' fill-opacity='0.7'/%3E%3Ccircle cx='232' cy='1' r='1.5' fill='%234fe3c1' fill-opacity='0.75'/%3E%3C/g%3E%3C/svg%3E") repeat-x center / 360px 26px;
  opacity: 0.85;
  animation: matTendrilGrow 3.2s ease-out both;
}
[data-theme="mycelial"] .mat-progress {        /* the petri ring */
  border-radius: 999px;
  background: radial-gradient(circle, rgba(79, 227, 193, 0.13), rgba(79, 227, 193, 0.05));
  box-shadow: inset 0 0 0 1px rgba(79, 227, 193, 0.2);
}
[data-theme="mycelial"] .mat-progress i {      /* GROWTH RINGS fill */
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 50%, rgba(216, 255, 242, 0.28) 0 18%, transparent 19%),
    repeating-radial-gradient(circle at 0% 50%, var(--lime) 0 6px, var(--lime-dim) 6px 12px);
  box-shadow: 0 0 14px rgba(79, 227, 193, 0.3);
}
[data-theme="mycelial"] .mat-chip { border-radius: 999px; border-color: rgba(79, 227, 193, 0.25); background: rgba(79, 227, 193, 0.06); }
[data-theme="mycelial"] .mat-chip.is-on { box-shadow: 0 0 16px rgba(79, 227, 193, 0.25); }
[data-theme="mycelial"] .mat-input { border-radius: 22px 22px 22px 22px / 18px 18px 22px 22px; border-color: rgba(79, 227, 193, 0.25); }
[data-theme="mycelial"] .mat-avatar { border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%; border: 1px solid rgba(79, 227, 193, 0.35); }
[data-theme="mycelial"] .mat-dialog {
  border-radius: 34px 26px 36px 28px / 28px 36px 26px 34px;
  border-color: rgba(79, 227, 193, 0.25);
  box-shadow: 0 18px 40px rgba(4, 12, 9, 0.65), inset 0 0 30px rgba(79, 227, 193, 0.05);
}
[data-theme="mycelial"] .mat-badge { border-radius: 999px; background: rgba(79, 227, 193, 0.16); color: #8ef0da; }
[data-theme="mycelial"] .mat-dz {
  color: #ffd9c9;
  background: linear-gradient(90deg, rgba(255, 122, 89, 0.25), rgba(255, 122, 89, 0.12));
  border: 1px solid rgba(255, 122, 89, 0.45);
  border-radius: 18px 12px 20px 14px / 14px 20px 12px 18px;
  animation: matBreathe 5s ease-in-out infinite;
}
/* style-library/theme-techy.css — the "techy" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   8 · MISSION CONTROL (techy) — "a flight telemetry console"
   Describe it as: brushed-metal panels with corner rivets under a faint
   scanline sweep, // prefixed telemetry labels, T− clocks, LED segment
   numerals, buttons that are guarded switches, hazard-striped danger
   zone, boot-up reveals.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="techy"] {
  --bg: #0a1014;                /* blueprint dark */
  --surface: #0f171d;
  --surface-2: #141f26;
  --line: #1d2c35;
  --line-bright: #2a404d;
  --text: #e6f2f6;
  --muted: #a9c0ca;
  --faint: #8ea9b4;
  --faint-deco: #61787f;

  --lime: #3fd4ff;              /* plotter cyan — primary */
  --lime-dim: #2aa8cc;
  --lime-glow: rgba(63, 212, 255, 0.14);
  --coral: #ff7e62;
  --coral-glow: rgba(255, 126, 98, 0.13);
  --amber: #ffc95e;
  --sky: #9fe0f5;

  --success: #3fd69b;
  --danger: #ff5f70;
  --urgency: #ff9448;

  --energy: #9d8cff;
  --energy-light: #c3b8ff;
  --energy-tint: #241f42;

  --dz-bg: #080e12;
  --dz3-surface: #2c1e14;
  --dz-hero: #35200f;

  --font-display: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --pill: 999px;

  --on-accent: #02222e;         /* 9.6:1 on cyan */
  --primary-hover: #6ee1ff;
  --on-warn: #241304;           /* 8.2:1 on urgency */

  --on-gold: var(--on-accent);

  /* board extras — plotting table */
  --felt: #0d1620;
  --felt-deep: #080e15;
  --felt-line: rgba(63, 212, 255, 0.20);
  --rail: #060b10;
  --rail-edge: rgba(63, 212, 255, 0.16);
  --card-back-1: #14324a;
  --card-back-2: #0a1a28;
  --card-face: #0f1b24;
  --pop-shadow: #085e7a;
  --speed: 0.8s;                /* telemetry-quick */
}
/* ── techy · MATERIAL — brushed metal + CRT sweep ────────────────────── */
[data-theme="techy"] {
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cg stroke='%23bfd9e6' stroke-opacity='0.05'%3E%3Cpath d='M0 8h220M0 21h220M0 33h220M0 46h220M0 60h220M0 74h220M0 86h220M0 99h220M0 112h220M0 126h220M0 138h220M0 151h220M0 165h220M0 177h220M0 190h220M0 204h220M0 214h220' stroke-width='1'/%3E%3Cpath d='M0 14h220M0 40h220M0 67h220M0 93h220M0 119h220M0 145h220M0 171h220M0 197h220' stroke-width='2' stroke-opacity='0.028'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(130% 90% at 50% -12%, rgba(63, 212, 255, 0.07), transparent 58%),
    linear-gradient(#0e161c, #0a1014);
  background-size: 220px 220px, auto, auto, auto;
}
[data-theme="techy"] body { background-size: 220px 220px, auto, auto, auto; }
[data-theme="techy"] .mat-surface {           /* riveted console panel */
  position: relative;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), transparent 14%, rgba(0, 0, 0, 0.16) 92%),
    var(--surface);
  border: 1px solid rgba(63, 212, 255, 0.4);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -1px 0 rgba(0, 0, 0, 0.5), 0 10px 22px rgba(0, 4, 8, 0.55);
}
[data-theme="techy"] .mat-surface::before,     /* corner rivets */
[data-theme="techy"] .mat-surface::after {
  content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9fc4d8, #33475a 60%, #101a22);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
[data-theme="techy"] .mat-surface::before { top: 6px; left: 6px; }
[data-theme="techy"] .mat-surface::after  { top: 6px; right: 6px; }
[data-theme="techy"] .mat-btn {               /* GUARDED SWITCH */
  position: relative;
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  background: linear-gradient(180deg, #2b3c48, #17242e);
  color: #d9f6ff;
  border: 1px solid rgba(63, 212, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 3px rgba(0, 0, 0, 0.5), 0 4px 9px rgba(0, 4, 8, 0.55);
  transition: none;
}
[data-theme="techy"] .mat-btn::after {         /* the guard bar — lifts on hover */
  content: ""; position: absolute; inset: 2px 2px auto; height: 4px;
  background: linear-gradient(90deg, rgba(63, 212, 255, 0.65), rgba(63, 212, 255, 0.2));
  border-radius: 1px;
  transition: transform 0.18s ease;
}
[data-theme="techy"] .mat-btn:hover::after { transform: translateY(-3px); }
[data-theme="techy"] .mat-btn:active { background: linear-gradient(180deg, #1d2c36, #101b23); box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7); }
[data-theme="techy"] .mat-btn--ghost {
  background: linear-gradient(180deg, rgba(63, 212, 255, 0.08), rgba(10, 16, 20, 0.5));
  color: var(--lime);
  box-shadow: inset 0 0 0 1px rgba(63, 212, 255, 0.3);
}
[data-theme="techy"] .mat-btn--ghost::after { display: none; }
[data-theme="techy"] .mat-num {                /* LED segment display */
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #6ff3ff;
  position: relative;
  padding: 4px 10px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='40'%3E%3Ctext x='14' y='30' text-anchor='middle' font-family='monospace' font-size='26' fill='%236ff3ff' fill-opacity='0.14'%3E8%3C/text%3E%3C/svg%3E") repeat 0 0 / 28px 40px,
    linear-gradient(180deg, #071016, #04090c);
  border: 1px solid rgba(63, 212, 255, 0.4);
  border-radius: 3px;
  text-shadow: 0 0 10px rgba(111, 243, 255, 0.75), 0 0 26px rgba(111, 243, 255, 0.35);
  letter-spacing: 0.06em;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.7);
}
[data-theme="techy"] .mat-divider {            /* console trace */
  height: 0; border-top: 1px dashed rgba(63, 212, 255, 0.45); background: none;
}
[data-theme="techy"] .mat-progress {           /* segmented telemetry bar */
  height: 10px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(63, 212, 255, 0.1) 0 9px, transparent 9px 12px), #04090c;
  border: 1px solid rgba(63, 212, 255, 0.3);
}
[data-theme="techy"] .mat-progress i {
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, var(--lime) 0 9px, rgba(10, 16, 20, 0.9) 9px 12px);
  box-shadow: 0 0 10px rgba(63, 212, 255, 0.4);
}
[data-theme="techy"] .mat-chip {
  font-family: var(--font-mono); border-radius: 3px;
  border: 1px solid rgba(63, 212, 255, 0.3);
  background: rgba(63, 212, 255, 0.06);
}
[data-theme="techy"] .mat-chip::before { content: "// "; opacity: 0.55; }
[data-theme="techy"] .mat-chip.is-on { box-shadow: inset 0 0 0 1px rgba(63, 212, 255, 0.5); }
[data-theme="techy"] .mat-input { border-radius: 3px; font-family: var(--font-mono); border-color: rgba(63, 212, 255, 0.35); background: #04090c; }
[data-theme="techy"] .mat-avatar { border-radius: 4px; border: 1px solid rgba(63, 212, 255, 0.4); }
[data-theme="techy"] .mat-dialog { border-radius: 4px; border-color: rgba(63, 212, 255, 0.45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 34px rgba(0, 4, 8, 0.6); animation: matBoot 0.4s both; }
[data-theme="techy"] .mat-badge { border-radius: 2px; font-family: var(--font-mono); letter-spacing: 0.14em; background: rgba(63, 212, 255, 0.14); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(63, 212, 255, 0.45); }
[data-theme="techy"] .mat-dz {                 /* HAZARD STRIPES */
  font-family: var(--font-mono); letter-spacing: 0.1em;
  color: var(--on-warn);
  background:
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.28) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, var(--urgency), var(--dz3-surface));
  border: 1px solid rgba(255, 140, 66, 0.6);
  border-radius: 3px;
}
/* style-library/theme-track.css — the "track" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   9 · TRACK & FIELD (track) — "stadium signage"
   Describe it as: terracotta running track grain under white chalk lines,
   condensed timing numerals, rows that are painted lanes with numbers,
   race-bib rank plates, cream signage panels.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="track"] {
  --bg: #2b1012;                /* terracotta track, floodlit */
  --surface: #351518;
  --surface-2: #401a1d;
  --line: #4f2225;
  --line-bright: #682e31;
  --text: #fdf5ef;              /* lane-paint white */
  --muted: #d9bdb9;
  --faint: #bda29f;
  --faint-deco: #8a6e6b;

  --lime: #ffffff;              /* WHITE = the primary. lane paint. */
  --lime-dim: #d9c9c4;
  --lime-glow: rgba(255, 255, 255, 0.14);
  --coral: #ff8a70;
  --coral-glow: rgba(255, 138, 112, 0.13);
  --amber: #ffc966;
  --sky: #8fd0f2;

  --success: #4fd694;
  --danger: #ff6272;
  --urgency: #ffa050;

  --energy: #b794ff;
  --energy-light: #d6c6ff;
  --energy-tint: #2e2149;

  --dz-bg: #230d0f;
  --dz3-surface: #3c1a12;
  --dz-hero: #46200f;

  --font-display: 'Anton', 'Space Grotesk', system-ui, sans-serif; /* stopwatch */
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --pill: 999px;

  --on-accent: #2b1012;         /* 17.9:1 on white — red-on-white numbers */
  --primary-hover: #ffe9e3;
  --on-warn: #241304;           /* 7.9:1 on urgency */

  --on-gold: var(--on-accent);

  /* board extras — the running track itself */
  --felt: #8e2f26;
  --felt-deep: #571a14;
  --felt-line: rgba(255, 255, 255, 0.30);
  --lane-paint: rgba(255, 255, 255, 0.34);
  --rail: #2b0f0c;
  --rail-edge: rgba(255, 255, 255, 0.14);
  --card-back-1: #7e2a22;
  --card-back-2: #4a1813;
  --card-face: #3a1a17;
  --pop-shadow: #4a100c;
  --speed: 0.75s;               /* race pace */
}
/* ── track · MATERIAL — terracotta grain + chalk ─────────────────────── */
[data-theme="track"] {
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.22 0 0 0 0 0.14 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg, rgba(255, 250, 240, 0.05) 0 2px, transparent 2px 90px),
    linear-gradient(#3a161a, #2b1012);
  background-size: 180px 180px, auto, auto;
}
[data-theme="track"] body { background-size: 180px 180px, auto, auto; }
[data-theme="track"] .mat-surface {            /* painted signage board */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 22%),
    var(--surface);
  border: 1px solid rgba(255, 250, 240, 0.35);
  border-top: 3px solid var(--text);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(20, 6, 7, 0.5);
}
[data-theme="track"] .mat-btn {                /* lane block */
  font-family: var(--font-display); text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 8px;
  border: 2px solid var(--text);
  box-shadow: 0 4px 0 rgba(43, 16, 18, 0.9);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
[data-theme="track"] .mat-btn::before {        /* painted lane stripes on the edge */
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px;
  background: repeating-linear-gradient(180deg, var(--lane-paint) 0 9px, transparent 9px 15px);
  border-radius: 6px 0 0 6px;
}
[data-theme="track"] .mat-btn:active { transform: translateY(4px); box-shadow: 0 0 0 rgba(43, 16, 18, 0.9); }
[data-theme="track"] .mat-btn--ghost { background: var(--surface-2); color: var(--text); box-shadow: 0 4px 0 rgba(43, 16, 18, 0.9); }
[data-theme="track"] .mat-num {
  font-family: 'Anton', 'Space Grotesk', sans-serif;
  font-size: 52px;
  color: var(--text);
}
[data-theme="track"] .mat-divider {            /* painted lane line */
  height: 0; border-top: 3px dashed rgba(255, 250, 240, 0.6); background: none;
}
[data-theme="track"] .mat-progress {           /* the straight */
  height: 14px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(255, 250, 240, 0.14) 0 30px, transparent 30px 34px), rgba(43, 16, 18, 0.8);
  border: 1px solid rgba(255, 250, 240, 0.4);
}
[data-theme="track"] .mat-progress i {
  border-radius: 3px;
  background:
    repeating-linear-gradient(90deg, rgba(43, 16, 18, 0.22) 0 8px, transparent 8px 17px),
    linear-gradient(90deg, var(--lime), #e0702f);
  border-right: 3px solid var(--text);
}
[data-theme="track"] .mat-chip {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: 6px; border: 1.5px solid rgba(255, 250, 240, 0.4);
}
[data-theme="track"] .mat-chip.is-on { border-color: var(--text); }
[data-theme="track"] .mat-input { border-radius: 6px; }
[data-theme="track"] .mat-avatar { border-radius: 8px; border: 2px solid rgba(255, 250, 240, 0.5); }
[data-theme="track"] .mat-dialog { border: 1px solid rgba(255, 250, 240, 0.4); border-top: 3px solid var(--text); border-radius: 10px; }
[data-theme="track"] .mat-badge {
  border-radius: 4px; font-family: var(--font-display); letter-spacing: 0.1em;
  background: var(--text); color: #2b1012;
}
[data-theme="track"] .mat-dz {
  font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--urgency), #8e3a1c);
  border-left: 5px solid var(--text);
}
/* style-library/theme-cardtable.css — the "cardtable" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   10 · CARD TABLE (cardtable) — "green felt and bone"
   Describe it as: a candlelit card room — burgundy-green felt with
   directional brush, dealer-chip buttons (edge-striped stacks), cream
   card faces with letterpress, brass hairlines and small-caps serif.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="cardtable"] {
  --bg: #221016;                /* burgundy felt room */
  --surface: #2a151c;
  --surface-2: #331a22;
  --line: #402029;
  --line-bright: #572c37;
  --text: #f5ebdd;
  --muted: #ccb9c2;
  --faint: #b09aa5;
  --faint-deco: #806d77;

  --lime: #e6b654;              /* club gold — primary */
  --lime-dim: #c29340;
  --lime-glow: rgba(230, 182, 84, 0.15);
  --coral: #ff8468;
  --coral-glow: rgba(255, 132, 104, 0.13);
  --amber: #ffcb70;
  --sky: #8cc8e8;

  --success: #55d195;
  --danger: #ff6575;
  --urgency: #ff9b52;

  --energy: #c09aff;
  --energy-light: #d9caff;
  --energy-tint: #2f2347;

  --dz-bg: #1c0d12;
  --dz3-surface: #3a1418;
  --dz-hero: #441920;

  --font-display: Georgia, 'Times New Roman', 'Playfair Display', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --pill: 999px;

  --on-accent: #241703;         /* 8.9:1 on club gold */
  --primary-hover: #f2c96e;
  --on-warn: #241304;           /* 8.1:1 on urgency */

  --on-gold: var(--on-accent);

  /* board extras — club felt under the same table chrome */
  --felt: #4a1622;
  --felt-deep: #2a0d14;
  --felt-line: rgba(230, 182, 84, 0.20);
  --rail: #1a090d;              /* mahogany rail */
  --rail-edge: rgba(230, 182, 84, 0.25);

  --card-back-1: #572031;       /* burgundy pinstripe back */
  --card-back-2: #341220;
  --card-face: #f4ead6;         /* CREAM card faces */

  /* rarity inks darkened for cream faces (same hue axes) */
  --rar-common: #6f6270;
  --rar-rare: #2f5fd0;
  --rar-epic: #8a4fd8;
  --rar-legendary: #a5721c;

  --pop-shadow: #5e3a12;
  --speed: 1.05s;               /* unhurried, deliberate */
}
/* ── cardtable · MATERIAL — felt + brass + bone ───────────────────────── */
[data-theme="cardtable"] {
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55 0.14' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.14 0 0 0 0 0.08 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)'/%3E%3C/svg%3E"),
    radial-gradient(120% 100% at 50% -10%, rgba(255, 190, 92, 0.08), transparent 55%),
    linear-gradient(#1d1216, #161016);
  background-size: 200px 200px, auto, auto;
}
[data-theme="cardtable"] body { background-size: 200px 200px, auto, auto; }
[data-theme="cardtable"] .mat-surface {        /* the felt, candlelit from above */
  background:
    radial-gradient(130% 100% at 50% -20%, rgba(255, 208, 120, 0.09), transparent 55%),
    var(--surface);
  border: 1px solid color-mix(in srgb, var(--lime) 30%, var(--line));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(8, 4, 6, 0.6);
  border-radius: 10px;
}
[data-theme="cardtable"] .mat-btn {            /* DEALER CHIP */
  font-family: Georgia, 'Times New Roman', serif;
  font-variant: small-caps; letter-spacing: 0.12em;
  color: #2a151c;
  background: var(--lime);
  border-radius: 999px;
  border: 4px dashed color-mix(in srgb, #3d2a10 70%, var(--lime));   /* chip edge stripes */
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb, var(--lime) 100%, #fff6e6 18%),
    inset 0 0 0 4px rgba(61, 42, 16, 0.5),
    0 5px 0 #4d3210, 0 10px 18px rgba(8, 4, 6, 0.55);
  padding: 12px 22px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
[data-theme="cardtable"] .mat-btn:active { transform: translateY(4px); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--lime) 100%, #fff6e6 18%), 0 1px 0 #4d3210; }
[data-theme="cardtable"] .mat-btn--ghost {
  background: var(--surface-2);
  color: var(--text);
  border: 3px solid color-mix(in srgb, var(--lime) 45%, var(--line));
  box-shadow: 0 5px 0 rgba(8, 4, 6, 0.6);
}
[data-theme="cardtable"] .mat-num {
  font-family: Georgia, 'Times New Roman', serif;
  color: #ffe9c2;
  text-shadow: 0 1px 0 rgba(8, 4, 6, 0.8);     /* letterpress bite */
}
[data-theme="cardtable"] .mat-divider {        /* brass hairline */
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lime) 65%, transparent), transparent);
  box-shadow: 0 1px 0 rgba(8, 4, 6, 0.6);
}
[data-theme="cardtable"] .mat-progress {       /* chip-rail track */
  border-radius: 999px;
  background: rgba(8, 4, 6, 0.6);
  box-shadow: inset 0 2px 5px rgba(8, 4, 6, 0.8), inset 0 0 0 1px color-mix(in srgb, var(--lime) 25%, transparent);
}
[data-theme="cardtable"] .mat-progress i {     /* gill-ticked chip fill */
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(8, 4, 6, 0.3) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, color-mix(in srgb, var(--lime) 100%, #fff6e6 20%), var(--lime));
  box-shadow: 0 1px 3px rgba(8, 4, 6, 0.7);
}
[data-theme="cardtable"] .mat-chip { font-family: Georgia, serif; font-variant: small-caps; letter-spacing: 0.08em; border-radius: 999px; border-color: color-mix(in srgb, var(--lime) 35%, var(--line)); }
[data-theme="cardtable"] .mat-chip[aria-pressed="true"] { border-style: dashed; }
[data-theme="cardtable"] .mat-input { font-family: Georgia, serif; border-radius: 8px; }
[data-theme="cardtable"] .mat-avatar { border-radius: 10px; border: 1px solid color-mix(in srgb, var(--lime) 40%, var(--line)); }
[data-theme="cardtable"] .mat-dialog {
  border: 1px solid color-mix(in srgb, var(--lime) 40%, var(--line));
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(8, 4, 6, 0.5), 0 18px 40px rgba(8, 4, 6, 0.7);
}
[data-theme="cardtable"] .mat-badge { font-family: Georgia, serif; font-variant: small-caps; letter-spacing: 0.2em; border-radius: 999px; }
[data-theme="cardtable"] .mat-dz {
  font-family: Georgia, serif; font-variant: small-caps; letter-spacing: 0.16em;
  background: linear-gradient(180deg, var(--urgency), #7a3009);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 246, 230, 0.35), 0 6px 14px rgba(8, 4, 6, 0.5);
}
[data-theme="cardtable"] body { font-family: Georgia, 'Times New Roman', serif; }
/* style-library/theme-caveman.css — the "caveman" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   11 · CAVEMAN — "carved stone and fire"
   Describe it as: a firelit cave wall — ochre handprints and beast
   silhouettes sprayed on rock strata, buttons that are ROCKS (irregular,
   chiselled, pressed into the dirt with a dust puff), bone-white type,
   tally-mark counting, a fire-glow danger zone.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="caveman"] {
  --bg: #1c1611;                /* cave stone */
  --surface: #251d15;
  --surface-2: #2e2419;
  --line: #3b2f20;
  --line-bright: #50402b;
  --text: #f2e8d2;              /* bone */
  --muted: #cbbda2;
  --faint: #afa087;
  --faint-deco: #7f7459;

  --lime: #ece0c0;              /* bone-white primary — carved buttons */
  --lime-dim: #c8bb9a;
  --lime-glow: rgba(236, 224, 192, 0.13);
  --coral: #ff8b5e;             /* fire */
  --coral-glow: rgba(255, 139, 94, 0.13);
  --amber: #ffc266;
  --sky: #92c9e8;

  --success: #62d294;
  --danger: #ff6a72;
  --urgency: #ffa050;

  --energy: #c49aff;
  --energy-light: #dcc9ff;
  --energy-tint: #2d2346;

  --dz-bg: #171209;
  --dz3-surface: #38200e;
  --dz-hero: #412710;

  --font-display: 'Archivo', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --pill: 999px;

  --on-accent: #1c1611;         /* 14.1:1 on bone */
  --primary-hover: #fff5da;
  --on-warn: #241304;           /* 8.0:1 on urgency */

  --on-gold: var(--on-accent);

  /* board extras — stone arena */
  --felt: #3a2c1c;
  --felt-deep: #241a10;
  --felt-line: rgba(236, 224, 192, 0.22);
  --rail: #171008;
  --rail-edge: rgba(236, 224, 192, 0.14);
  --card-back-1: #4a3a24;
  --card-back-2: #2a2012;
  --card-face: #33281a;
  --pop-shadow: #171008;
  --speed: 0.95s;
}
/* ── caveman · MATERIAL — rock strata + ochre paint + fire ───────────── */
[data-theme="caveman"] {
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='300'%3E%3Cg fill='%23d98e2b' fill-opacity='0.16'%3E%3Cpath d='M30 60 l6-18 6 18 -4 16 -8-4z'/%3E%3Cpath d='M52 66 l5-14 5 14-3 12-7-4z'/%3E%3Cpath d='M41 62 l4-22 4 22-3 18z'/%3E%3Cpath d='M250 210 l7-20 7 20-5 18-9-6z'/%3E%3Cpath d='M272 216 l5-13 5 13-3 11-7-3z'/%3E%3C/g%3E%3Cg fill='%23d98e2b' fill-opacity='0.13'%3E%3Cpath d='M150 120 q10-26 34-26 6-16 26-14 22 2 26 22 4 18-8 26-6 14-24 12-4 12-20 10-22 2-28-12-8-6-6-18z'/%3E%3Cpath d='M90 230 q4-14 18-12 2-8 12-6 12 2 12 12 0 10-8 12-2 8-14 6-16 0-20-12z'/%3E%3C/g%3E%3Cg stroke='%23ecd0a0' stroke-opacity='0.1' stroke-width='2' fill='none'%3E%3Cpath d='M0 96 q80 8 170-6 t170 8'/%3E%3Cpath d='M0 190 q90-10 180 4 t160-8'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg, #241a12 0%, #1c1611 30%, #221812 62%, #191009 100%);
  background-size: 340px 300px, auto;
}
[data-theme="caveman"] body { background-size: 340px 300px, auto; }
[data-theme="caveman"] .mat-surface {          /* a slab of the cave wall */
  background:
    linear-gradient(180deg, rgba(236, 224, 192, 0.05), transparent 30%, rgba(0, 0, 0, 0.22) 96%),
    repeating-linear-gradient(178deg, rgba(236, 224, 192, 0.028) 0 26px, transparent 26px 60px),
    var(--surface);
  border: 3px solid rgba(236, 224, 192, 0.22);
  border-radius: 22px 30px 18px 32px / 28px 18px 32px 22px;
  box-shadow: inset 0 2px 0 rgba(236, 224, 192, 0.08), 0 14px 30px rgba(8, 4, 1, 0.65);
}
[data-theme="caveman"] .mat-btn {              /* THE ROCK */
  position: relative;
  font-family: var(--font-display); font-weight: 900;
  letter-spacing: 0.03em;
  color: #f4ead2;
  background:
    linear-gradient(160deg, #7d7466 0%, #66594a 38%, #4d4437 72%, #3b332a 100%);
  border: 0;
  border-radius: 18px 24px 14px 26px / 22px 14px 26px 16px;
  clip-path: polygon(3% 12%, 9% 3%, 26% 0%, 52% 4%, 74% 0%, 92% 6%, 100% 22%, 97% 46%, 100% 68%, 93% 92%, 74% 100%, 50% 96%, 26% 100%, 8% 94%, 0% 74%, 2% 48%);
  padding: 15px 24px;
  box-shadow:                                /* chiselled facets */
    inset 2px 3px 2px rgba(236, 224, 192, 0.22),
    inset -3px -4px 6px rgba(8, 4, 1, 0.55),
    0 7px 0 #2b231a,                          /* the dirt it sits on */
    0 13px 22px rgba(8, 4, 1, 0.6);
  text-shadow: 0 2px 2px rgba(8, 4, 1, 0.6);
  transition: transform 0.09s ease, box-shadow 0.09s ease, filter 0.09s ease;
}
[data-theme="caveman"] .mat-btn:active,        /* pressed INTO the dirt */
[data-theme="caveman"] .mat-btn.is-pressed {
  transform: translateY(5px);
  filter: brightness(0.88);
  box-shadow:
    inset 3px 4px 8px rgba(8, 4, 1, 0.7),
    0 2px 0 #2b231a;
}
[data-theme="caveman"] .mat-btn.is-pressed::after,   /* DUST PUFF */
[data-theme="caveman"] .mat-btn:active::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -12px; height: 14px;
  background:
    radial-gradient(circle 5px at 20% 60%, rgba(214, 190, 150, 0.55), transparent 70%),
    radial-gradient(circle 4px at 45% 40%, rgba(214, 190, 150, 0.45), transparent 70%),
    radial-gradient(circle 6px at 70% 65%, rgba(214, 190, 150, 0.5), transparent 70%),
    radial-gradient(circle 3px at 90% 45%, rgba(214, 190, 150, 0.4), transparent 70%);
  animation: matDustPuff 0.5s ease-out both;
  pointer-events: none;
}
[data-theme="caveman"] .mat-btn--ghost {
  background: linear-gradient(160deg, #3f382e, #2e2820);
  color: var(--coral);
  clip-path: polygon(4% 10%, 22% 2%, 55% 5%, 82% 0%, 97% 14%, 100% 40%, 96% 66%, 100% 88%, 84% 100%, 52% 96%, 22% 100%, 5% 90%, 0 60%, 3% 34%);
}
[data-theme="caveman"] .mat-num {              /* chalk tally count */
  font-family: 'Archivo', sans-serif; font-weight: 900;
  color: #f4ead2;
  text-shadow: 3px 3px 0 rgba(8, 4, 1, 0.55);
}
[data-theme="caveman"] .mat-num::after {       /* tally strokes beside the count */
  content: "𝍷";
  font-size: 0.34em; vertical-align: 0.9em;
  margin-left: 0.22em; letter-spacing: 0.3em;
  color: var(--coral);
}
[data-theme="caveman"] .mat-divider {          /* broken bone line */
  height: 6px; border-radius: 4px;
  background:
    repeating-linear-gradient(100deg, rgba(236, 224, 192, 0.6) 0 14px, transparent 14px 21px),
    linear-gradient(180deg, rgba(236, 224, 192, 0.14), transparent);
  clip-path: polygon(0 30%, 4% 0, 96% 8%, 100% 40%, 97% 100%, 5% 92%);
}
[data-theme="caveman"] .mat-progress {         /* fire path */
  border-radius: 10px;
  background: rgba(8, 4, 1, 0.6);
  box-shadow: inset 0 2px 5px rgba(8, 4, 1, 0.8);
  border: 2px solid rgba(236, 224, 192, 0.2);
}
[data-theme="caveman"] .mat-progress i {       /* jagged ochre burn */
  border-radius: 8px;
  background: linear-gradient(180deg, #ffb95e, var(--coral) 70%, #b3451d);
  clip-path: polygon(0 18%, 5% 0, 26% 14%, 42% 0, 58% 16%, 74% 2%, 90% 14%, 100% 0, 100% 100%, 0 100%);
  box-shadow: 0 0 16px rgba(255, 122, 89, 0.4);
}
[data-theme="caveman"] .mat-chip { font-family: var(--font-display); font-weight: 800; border-radius: 16px 22px 14px 20px / 20px 14px 22px 16px; border: 2px solid rgba(236, 224, 192, 0.26); }
[data-theme="caveman"] .mat-input { border-radius: 18px 24px 18px 26px / 24px 18px 26px 18px; border: 2px solid rgba(236, 224, 192, 0.26); }
[data-theme="caveman"] .mat-avatar { border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; border: 2px dashed rgba(236, 224, 192, 0.4); }
[data-theme="caveman"] .mat-dialog { border: 3px solid rgba(236, 224, 192, 0.24); border-radius: 26px 18px 30px 20px / 20px 30px 18px 26px; box-shadow: 0 16px 34px rgba(8, 4, 1, 0.7); }
[data-theme="caveman"] .mat-badge { font-family: var(--font-display); background: var(--coral); color: #2b130a; border-radius: 14px 20px 12px 18px / 18px 12px 20px 14px; }
[data-theme="caveman"] .mat-dz {               /* FIRE GLOW */
  font-family: var(--font-display); letter-spacing: 0.06em;
  color: #ffe6c4;
  background:
    radial-gradient(120% 160% at 50% 130%, rgba(255, 208, 120, 0.5), transparent 60%),
    linear-gradient(180deg, #8c2f10, #b3451d);
  border: 2px solid rgba(255, 220, 160, 0.4);
  border-radius: 20px 14px 22px 16px / 16px 22px 14px 20px;
  animation: matFireFlicker 2.6s ease-in-out infinite;
}
/* style-library/theme-n64.css — the "n64" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   12 · N64 (n64) — "a low-poly fog console"
   Describe it as: 1997 — vertex-gradient indigo washes, fog rolling over
   the lowlands, stepped bevel edges like chunky polygons, cartridge-slot
   buttons with grip ridges, SQUARE avatars, memory-card dialogs, spawn
   pops with overshoot.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="n64"] {
  --bg: #1e2946;                /* fog indigo */
  --surface: #263356;
  --surface-2: #2e3d66;
  --line: #3a4a75;
  --line-bright: #4d6092;
  --text: #ffffff;
  --muted: #ccd5f0;
  --faint: #adb9dd;
  --faint-deco: #7f8cb4;

  --lime: #ffe14d;              /* cartridge yellow — primary */
  --lime-dim: #d6be3c;
  --lime-glow: rgba(255, 225, 77, 0.16);
  --coral: #ff7d68;
  --coral-glow: rgba(255, 125, 104, 0.14);
  --amber: #ffd166;
  --sky: #7fd0ff;

  --success: #58dd9a;
  --danger: #ff7788;              /* 4.9:1 as text on surface */
  --urgency: #ffa24e;

  --energy: #b49aff;
  --energy-light: #d6c9ff;
  --energy-tint: #33285a;

  --dz-bg: #182137;
  --dz3-surface: #3c1e2a;
  --dz-hero: #452430;

  --font-display: 'Fredoka', 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --pill: 999px;

  --on-accent: #231d04;         /* 11.8:1 on cartridge yellow */
  --primary-hover: #ffeb80;
  --on-warn: #241304;           /* 8.1:1 on urgency */

  --on-gold: var(--on-accent);

  /* board extras — the poly arena */
  --felt: #2e3d66;
  --felt-deep: #1a2340;
  --felt-line: rgba(255, 255, 255, 0.30);
  --rail: #101830;
  --rail-edge: rgba(255, 255, 255, 0.16);
  --card-back-1: #3d5290;
  --card-back-2: #1c2a52;
  --card-face: #33406e;
  --pop-shadow: #131c3a;
  --speed: 0.8s;                /* 20fps energy */
}
/* ── n64 · MATERIAL — vertex wash + stepped bevels + fog ─────────────── */
[data-theme="n64"] {
  --mat-page:
    linear-gradient(168deg, #2c3a78 0%, #20295c 34%, #1a2148 58%, rgba(154, 168, 220, 0.22) 100%),
    radial-gradient(140% 60% at 50% 104%, rgba(190, 202, 235, 0.16), transparent 62%),
    linear-gradient(#1e2946, #151b33);
}
[data-theme="n64"] .mat-surface {              /* low-poly face: flat top, fog bottom */
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, transparent 18%),
    linear-gradient(200deg, var(--surface) 55%, color-mix(in srgb, var(--surface) 72%, #9aa8dc) 100%);
  border: 3px solid #101830;
  border-radius: 12px;
  box-shadow: 0 4px 0 #101830, 0 8px 0 rgba(16, 24, 48, 0.45), 0 14px 24px rgba(6, 9, 20, 0.55), inset 0 2px 0 rgba(255, 255, 255, 0.1);
}
[data-theme="n64"] .mat-btn {                  /* CARTRIDGE SLOT */
  position: relative;
  font-family: var(--font-display); font-weight: 700;
  color: var(--on-accent);
  border-radius: 10px;
  border: 3px solid #101830;
  box-shadow: 0 4px 0 #101830, 0 8px 0 rgba(16, 24, 48, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.28);
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.12s ease;
}
[data-theme="n64"] .mat-btn::after {           /* the grip ridges */
  content: ""; position: absolute; top: 5px; left: 14%; right: 14%; height: 6px;
  background: repeating-linear-gradient(90deg, rgba(16, 24, 48, 0.4) 0 4px, transparent 4px 9px);
  border-radius: 2px;
}
[data-theme="n64"] .mat-btn:hover { transform: translateY(-2px); }
[data-theme="n64"] .mat-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #101830, inset 0 2px 4px rgba(16, 24, 48, 0.4); }
[data-theme="n64"] .mat-btn--ghost { background: var(--surface-2); color: var(--text); }
[data-theme="n64"] .mat-num {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  color: #ffe98c;
  text-shadow: 2px 2px 0 #101830, 0 0 18px rgba(255, 233, 140, 0.35);
}
[data-theme="n64"] .mat-divider {              /* dashed horizon line */
  height: 0; border-top: 4px dotted rgba(154, 168, 220, 0.5); background: none;
}
[data-theme="n64"] .mat-progress {             /* segmented power bar */
  border-radius: 8px; background: #101830; padding: 2px;
  border: 2px solid #101830;
}
[data-theme="n64"] .mat-progress i {
  border-radius: 5px;
  background: repeating-linear-gradient(90deg, var(--lime) 0 14px, #101830 14px 17px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.3);
}
[data-theme="n64"] .mat-chip { font-family: var(--font-display); border-radius: 9px; border: 2px solid #101830; box-shadow: 0 2px 0 #101830; }
[data-theme="n64"] .mat-input { border-radius: 9px; border: 2px solid #101830; box-shadow: 0 3px 0 rgba(16, 24, 48, 0.4); }
[data-theme="n64"] .mat-avatar { border-radius: 9px !important; border: 2px solid #101830; box-shadow: 0 3px 0 #101830; }  /* SQUARE avatars */
[data-theme="n64"] .mat-dialog {               /* MEMORY CARD */
  border: 3px solid #101830; border-radius: 14px;
  box-shadow: 0 4px 0 #101830, 0 9px 0 rgba(16, 24, 48, 0.4), 0 16px 28px rgba(6, 9, 20, 0.55);
  animation: matSpawnPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
[data-theme="n64"] .mat-badge { font-family: var(--font-display); border-radius: 8px; border: 2px solid #101830; box-shadow: 0 2px 0 #101830; }
[data-theme="n64"] .mat-dz {
  font-family: var(--font-display);
  background: linear-gradient(180deg, #ff7a52, var(--urgency));
  border: 3px solid #101830; border-radius: 10px;
  box-shadow: 0 3px 0 #101830;
}
[data-theme="n64"] body {
  background-size: auto;
}
/* style-library/theme-goldeneye.css — the "goldeneye" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   13 · GOLDENEYE (goldeneye) — "a spy dossier HUD"
   Describe it as: a classified facility readout — gunmetal panels with a
   notched corner, gold dossier mono on typewriter labels, objectives that
   arrive as [ BRACKETED ] lines with redaction bars, a watch-gauge ring
   for the pot, a reticle that focuses on what matters, alarm-red strobe
   when the danger zone hits L3.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="goldeneye"] {
  --bg: #141a20;                /* gunmetal */
  --surface: #1a222a;
  --surface-2: #212b35;
  --line: #2b3742;
  --line-bright: #3d4d5c;
  --text: #e9eef3;
  --muted: #aebbc6;
  --faint: #92a2af;
  --faint-deco: #69798a;

  --lime: #f0c445;              /* golden gun — primary */
  --lime-dim: #c9a236;
  --lime-glow: rgba(240, 196, 69, 0.15);
  --coral: #ff7e60;
  --coral-glow: rgba(255, 126, 96, 0.13);
  --amber: #ffc45c;
  --sky: #86c8e8;

  --success: #46d18e;
  --danger: #ff5b6b;
  --urgency: #ff8f47;

  --energy: #a892ff;
  --energy-light: #cdc0ff;
  --energy-tint: #262045;

  --dz-bg: #10151a;
  --dz3-surface: #33160f;
  --dz-hero: #3b1c10;

  --font-display: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* watch HUD */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --radius: 4px;                /* HUD-sharp */
  --radius-sm: 3px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --pill: 999px;

  --on-accent: #231a03;         /* 10.2:1 on gold */
  --primary-hover: #ffd66b;
  --on-warn: #241304;           /* 8.2:1 on urgency */

  --on-gold: var(--on-accent);

  /* board extras — the facility map */
  --felt: #1b232c;
  --felt-deep: #10161d;
  --felt-line: rgba(240, 196, 69, 0.22);
  --rail: #0b1015;
  --rail-edge: rgba(240, 196, 69, 0.18);
  --card-back-1: #2c3844;
  --card-back-2: #151d25;
  --card-face: #1e2833;
  --pop-shadow: #6b5210;
  --speed: 0.85s;
}
/* ── goldeneye · MATERIAL — gunmetal + gold dossier + notches ────────── */
[data-theme="goldeneye"] {
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.18' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.62 0 0 0 0 0.7 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23m)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% -12%, rgba(240, 196, 69, 0.05), transparent 55%),
    linear-gradient(#171d24, #101419);
  background-size: 200px 200px, auto, auto;
}
[data-theme="goldeneye"] body { background-size: 200px 200px, auto, auto; }
[data-theme="goldeneye"] .mat-surface {        /* NOTCHED gunmetal panel */
  position: relative;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.05), transparent 30%, rgba(0, 0, 0, 0.22) 96%),
    linear-gradient(180deg, #2a333e, #1b2129);
  border-radius: 2px;
  border: 1px solid rgba(240, 196, 69, 0.35);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
[data-theme="goldeneye"] .mat-btn {            /* notched HUD key */
  position: relative;
  font-family: var(--font-mono); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #ffe9ad;
  background: linear-gradient(180deg, #3a4653, #232b34);
  border: 0;
  border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: inset 0 0 0 1px rgba(240, 196, 69, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 3px rgba(0, 0, 0, 0.5);
  transition: none;
}
[data-theme="goldeneye"] .mat-btn:hover { background: linear-gradient(180deg, #46545f, #2a333e); box-shadow: inset 0 0 0 1px var(--lime), inset 0 1px 0 rgba(255, 255, 255, 0.12); }
[data-theme="goldeneye"] .mat-btn:active { box-shadow: inset 0 0 0 1px rgba(240, 196, 69, 0.5), inset 0 2px 6px rgba(0, 0, 0, 0.7); }
[data-theme="goldeneye"] .mat-btn--ghost {
  background: rgba(240, 196, 69, 0.07);
  color: var(--lime);
  box-shadow: inset 0 0 0 1px rgba(240, 196, 69, 0.35);
}
[data-theme="goldeneye"] .mat-num {            /* watch-face numeral */
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--lime);
  text-shadow: 0 0 14px rgba(240, 196, 69, 0.3);
  letter-spacing: 0.05em;
}
[data-theme="goldeneye"] .mat-divider {        /* redaction line */
  height: 8px; border-radius: 1px;
  background: repeating-linear-gradient(90deg, rgba(240, 196, 69, 0.5) 0 26px, rgba(240, 196, 69, 0.14) 26px 40px);
}
[data-theme="goldeneye"] .mat-progress {       /* gauge arc track */
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(240, 196, 69, 0.22) 0 2px, transparent 2px 9px), rgba(6, 9, 13, 0.8);
  box-shadow: inset 0 0 0 1px rgba(240, 196, 69, 0.25);
}
[data-theme="goldeneye"] .mat-progress i {     /* segmented body-armor fill */
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--lime) 0 9px, rgba(16, 20, 25, 0.9) 9px 12px);
  box-shadow: 0 0 8px rgba(240, 196, 69, 0.25);
}
[data-theme="goldeneye"] .mat-chip { font-family: var(--font-mono); border-radius: 2px; border-color: rgba(240, 196, 69, 0.4); background: rgba(240, 196, 69, 0.06); }
[data-theme="goldeneye"] .mat-chip.is-on { box-shadow: inset 0 0 0 1px rgba(240, 196, 69, 0.6); }
[data-theme="goldeneye"] .mat-input { font-family: var(--font-mono); border-radius: 2px; border-color: rgba(240, 196, 69, 0.4); background: rgba(6, 9, 13, 0.6); }
[data-theme="goldeneye"] .mat-avatar { border-radius: 2px; border: 1px solid rgba(240, 196, 69, 0.5); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }
[data-theme="goldeneye"] .mat-dialog {         /* mission briefing */
  border: 1px solid rgba(240, 196, 69, 0.4);
  border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 30%), linear-gradient(180deg, #2a333e, #1b2129);
  animation: matHudFlicker 0.35s steps(3) both;
}
[data-theme="goldeneye"] .mat-badge { font-family: var(--font-mono); border-radius: 2px; letter-spacing: 0.16em; background: rgba(240, 196, 69, 0.14); color: var(--lime); box-shadow: inset 0 0 0 1px rgba(240, 196, 69, 0.5); }
[data-theme="goldeneye"] .mat-dz {             /* ALARM */
  font-family: var(--font-mono); letter-spacing: 0.12em;
  color: var(--on-warn);
  background: linear-gradient(180deg, #a1121f, #6e0a15);
  border: 1px solid rgba(255, 120, 130, 0.55);
  border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  animation: matAlarmStrobe 1.1s steps(2) infinite;
}
/* style-library/theme-neobrut.css — the "neobrut" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
    14 · SPORTS POSTER (neobrut) — THE FOUNDER'S NAMED FAVOURITE
    "Neo-brutalist sports poster with a soft underbelly."
    THE ORIGINAL / BASELINE — four structural variants riff on this brief:
    see theme-neobrut-{field,zine,ticket,locker}.css (added 2026-09-03).
   POLISHED 2026-09-03: halftone print dots over the paper grain, an
   exposed layout grid, HUGE condensed Anton shouting ALL CAPS on warm
   cream, thick ink rules, off-register duotone plate shadows (red + blue
   slipped), tilted sticker badges — then the underbelly: chunky corners
   ROUNDED UNDER the hard edges (16px under 3px ink), warm plate shadows
   instead of none, generous padding, pill inputs, buttery 0.35s eases
   and a friendly sticker wiggle. The poster shouts; the touch whispers.
   Describe it as: a sports poster wheat-pasted at eye height — loud
   duotone type, thick rules, halftone dots, stickers slapped on the
   corner — but every corner underneath is rounded, every press is soft,
   every hover is gentle.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="neobrut"] {
  --bg: #f2e3c4;                 /* warm poster cream — deeper than sunset's */
  --surface: #faf1de;            /* card stock */
  --surface-2: #eadfc2;          /* pressed */
  --line: #17130e;               /* ink */
  --line-bright: #2a2118;
  --text: #1c1712;
  --muted: #4d443a;
  --faint: #5d5347;              /* 5.9:1 on bg */
  --faint-deco: #8b7f6d;

  --lime: #2b4bec;               /* poster BLUE — the loud plate */
  --lime-dim: #1d3ac0;
  --lime-glow: rgba(43, 75, 236, 0.16);
  --coral: #c41f0e;              /* the red plate */
  --coral-glow: rgba(196, 31, 14, 0.14);
  --amber: #7a5400;              /* 5.4:1 as text on poster cream */
  --sky: #0b62c4;

  --success: #175f30;            /* 6.1:1 as text on poster cream */
  --danger: #b3172b;
  --urgency: #9c4405;            /* 6.0:1 with cream, 5.1:1 as text */

  --energy: #6f2fd8;
  --energy-light: #5b2fd6;      /* 5.9:1 on the pastel tint */
  --energy-tint: #ebe0f8;

  --dz-bg: #f3e6cf;
  --dz3-surface: #f7ddb5;
  --dz-hero: #ffd79a;

  --font-display: 'Anton', 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', 'Archivo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius: 4px;                 /* brutal grid … */
  --radius-sm: 2px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --pill: 999px;                 /* … but the underbelly is SOFT */

  --on-accent: #fff6e8;          /* 5.9:1 on poster blue */
  --primary-hover: #1d3ac0;
  --on-warn: #fff6e8;            /* 4.7:1 on urgency */

  --on-gold: var(--on-accent);

  /* BOARD EXTRAS — the poster court */
  --felt: #2b4bec;               /* blue court */
  --felt-deep: #1d3ac0;
  --felt-line: rgba(255, 246, 232, 0.3);
  --lane: #c41f0e;               /* red lane */
  --lane-paint: rgba(255, 246, 232, 0.55);
  --rail: #17130e;               /* ink rail */
  --rail-edge: rgba(255, 246, 232, 0.4);

  --chip-white: #fff6e8;
  --chip-red: #c41f0e;
  --chip-blue: #2b4bec;
  --chip-gold: #d9a521;

  --card-back-1: #2b4bec;
  --card-back-2: #1d3ac0;
  --card-face: #fff6e8;

  --pop-shadow: #17130e;
  --speed: 0.85s;
}
/* ── neobrut · MATERIAL — loud print + soft touch ────────────────────── */
[data-theme="neobrut"] {
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0 0.05 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 1.2px 1.2px, rgba(23, 19, 14, 0.13) 1.2px, transparent 1.8px),
    repeating-linear-gradient(90deg, rgba(23, 19, 14, 0.075) 0 2px, transparent 2px 128px),
    repeating-linear-gradient(180deg, rgba(23, 19, 14, 0.075) 0 2px, transparent 2px 128px),
    linear-gradient(#f2e3c4, #eddcba);
  background-size: 150px 150px, 9px 9px, auto, auto, auto;
}
[data-theme="neobrut"] body { background-size: 150px 150px, 9px 9px, auto, auto, auto; }
[data-theme="neobrut"] .mat-surface {          /* poster block — chunky rounded UNDER the hard edge */
  background:
    radial-gradient(circle at 1.2px 1.2px, rgba(23, 19, 14, 0.1) 1.2px, transparent 1.8px) 0 0/9px 9px,
    var(--surface);
  border: 3px solid var(--line);
  border-radius: 16px;
  box-shadow: 6px 6px 0 rgba(196, 31, 14, 0.85);      /* red plate slipped */
  padding: 4px;                                        /* generous — the soft underbelly breathes */
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="neobrut"] .mat-surface:hover {    /* the soft underbelly */
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 rgba(196, 31, 14, 0.85), 12px 12px 0 rgba(43, 75, 236, 0.5);
}
[data-theme="neobrut"] .mat-btn {              /* LOUD pill, buttery press */
  font-family: var(--font-display);
  font-size: 16px; text-transform: uppercase; letter-spacing: 0.03em;
  border: 3px solid var(--line);
  border-radius: 999px;
  padding: 13px 26px;
  box-shadow: 5px 5px 0 var(--coral), 10px 10px 0 rgba(23, 19, 14, 0.9);   /* off-register duotone */
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="neobrut"] .mat-btn:hover {        /* gentle lift, plates drift */
  transform: translateY(-3px);
  box-shadow: 7px 8px 0 var(--coral), 14px 15px 0 rgba(23, 19, 14, 0.9);
}
[data-theme="neobrut"] .mat-btn:active {       /* melts flat */
  transform: translateY(2px);
  box-shadow: 2px 2px 0 var(--coral), 4px 4px 0 rgba(23, 19, 14, 0.9);
}
[data-theme="neobrut"] .mat-btn--ghost {
  background: var(--surface);
  color: var(--text);
  box-shadow: 4px 4px 0 rgba(23, 19, 14, 0.85);
}
[data-theme="neobrut"] .mat-num {              /* the headline numeral */
  font-family: 'Anton', 'Archivo', sans-serif;
  font-size: 58px;
  color: var(--line);
  text-transform: uppercase;
  text-shadow: 4px 4px 0 rgba(196, 31, 14, 0.8);     /* off-register print */
}
[data-theme="neobrut"] .mat-divider {          /* THICK rule, exposed */
  height: 6px; border-radius: 2px;
  background: var(--line);
  box-shadow: 0 3px 0 rgba(43, 75, 236, 0.55);
}
[data-theme="neobrut"] .mat-progress {         /* soft-track pill */
  border: 3px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
}
[data-theme="neobrut"] .mat-progress i {       /* buttery fill */
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime), var(--sky));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="neobrut"] .mat-chip { font-family: 'Inter', sans-serif; font-weight: 700; border-radius: 999px; border: 2.5px solid var(--line); transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
[data-theme="neobrut"] .mat-chip:hover { transform: translateY(-1px); }
[data-theme="neobrut"] .mat-chip.is-on { box-shadow: 3px 3px 0 rgba(23, 19, 14, 0.85); }
[data-theme="neobrut"] .mat-input {            /* PILL input — pure soft */
  border-radius: 999px; border: 2.5px solid var(--line);
  padding: 12px 18px;
  transition: box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="neobrut"] .mat-input:focus { box-shadow: 4px 4px 0 rgba(43, 75, 236, 0.6); outline: none; }
[data-theme="neobrut"] .mat-avatar { border-radius: 999px; border: 3px solid var(--line); box-shadow: 3px 3px 0 rgba(196, 31, 14, 0.7); }
[data-theme="neobrut"] .mat-dialog { border: 3px solid var(--line); border-radius: 18px; box-shadow: 8px 8px 0 var(--coral), 14px 14px 0 rgba(23, 19, 14, 0.9); animation: matSoftIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-theme="neobrut"] .mat-dialog__title { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; }
[data-theme="neobrut"] .mat-badge {            /* STICKER — tilted, ringed, stuck on */
  font-family: 'Inter', sans-serif; font-weight: 800;
  border-radius: 999px;
  border: 2.5px solid var(--line);
  background: var(--chip-gold, #d9a521);
  color: #17130e;
  box-shadow: 0 0 0 3px var(--surface), 3px 4px 0 rgba(23, 19, 14, 0.8);
  transform: rotate(-4deg);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="neobrut"] .mat-badge:hover { transform: rotate(3deg) scale(1.06); animation: matStickerWiggle 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes matStickerWiggle {
  0% { transform: rotate(-4deg) scale(1); }
  30% { transform: rotate(-7deg) scale(1.08); }
  60% { transform: rotate(2deg) scale(1.04); }
  100% { transform: rotate(3deg) scale(1.06); }
}
[data-theme="neobrut"] .mat-dz {
  font-family: 'Inter', sans-serif; font-weight: 800;
  border: 3px solid var(--line); border-radius: 999px;
  background: repeating-linear-gradient(-45deg, rgba(23, 19, 14, 0.12) 0 12px, transparent 12px 24px), var(--dz-hero);
  color: #17130e;
}
/* style-library/theme-neobrut-field.css — the "neobrut-field" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
    VARIANT 1 of the founder's "Neo-Brutalist Sports Poster with a Soft
    Underbelly" — THE SPORTS SIDE DOMINANT.  Field Day.
    A stadium day-poster wheat-pasted at the gates: GIANT condensed
    scoreboard type shouting on cream, team-badge stickers, ticket-stub
    cards with punched perforations, halftone crowd haze in the margins,
    mown-stripe center rules — then the underbelly: cream paper, every
    corner ROUNDED UNDER the 2.5px ink, ONE warm clay plate shadow
    (never the duotone slip — that belongs to the original), buttery
    0.4s eases, a friendly badge cheer on hover.
    Describe it as: match-day at the gates — scoreboard capitals,
    ticket-stub cards, team stickers over halftone crowds — printed on
    soft cream, rounded underneath, every press landing like a high-five.
    ═══════════════════════════════════════════════════════════════════════ */

[data-theme="neobrut-field"] {
  --bg: #e8ecd6;                 /* stadium cream, a cast of pitch green */
  --surface: #f6f8ec;            /* scorecard white */
  --surface-2: #dde2c6;          /* pressed grass-cream */
  --line: #141b0d;               /* ink green-black */
  --line-bright: #2a351c;
  --text: #161d10;
  --muted: #3c4630;
  --faint: #4d5840;              /* 5.0:1 on bg */
  --faint-deco: #7d876e;

  --lime: #1e6b33;               /* PITCH GREEN — the primary plate */
  --lime-dim: #175627;
  --lime-glow: rgba(30, 107, 51, 0.16);
  --coral: #9c3d18;              /* scorched clay — effort */
  --coral-glow: rgba(156, 61, 24, 0.14);
  --amber: #8a5a00;              /* scoreboard bronze, 5.2:1 as text */
  --sky: #175a8a;                /* away-strip blue */

  --success: #1c5e2e;
  --danger: #a11c1c;
  --urgency: #8a4a00;            /* added-time bronze */

  --energy: #6b2fa0;
  --energy-light: #5b2690;
  --energy-tint: #eee6f8;

  --dz-bg: #e9e2c2;
  --dz3-surface: #f0d9a8;
  --dz-hero: #f7e3b0;

  --font-display: 'Anton', 'Archivo', system-ui, sans-serif;
  --font-body: 'Inter', 'Archivo', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius: 8px;                 /* the badge cut … */
  --radius-sm: 5px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --pill: 999px;

  --on-accent: #f8faee;          /* 6.9:1 on pitch green */
  --primary-hover: #175627;
  --on-warn: #f8faee;            /* 6.2:1 on added-time bronze */

  --on-gold: var(--on-accent);

  /* BOARD EXTRAS — the pitch */
  --felt: #2b7a40;               /* match turf */
  --felt-deep: #236a37;
  --felt-line: rgba(248, 250, 238, 0.85);
  --lane: #9c3d18;               /* clay running lane */
  --lane-paint: rgba(248, 250, 238, 0.6);
  --rail: #141b0d;
  --rail-edge: rgba(248, 250, 238, 0.4);

  --chip-white: #f8faee;
  --chip-red: #a11c1c;
  --chip-blue: #175a8a;
  --chip-gold: #d9a521;

  --card-back-1: #1e6b33;
  --card-back-2: #175627;
  --card-face: #f6f8ec;

  --pop-shadow: #141b0d;
  --speed: 0.7s;
}
/* ── neobrut-field · MATERIAL — stadium day-poster, soft underneath ──── */
[data-theme="neobrut-field"] {
  /* paper grain + HALFTONE CROWD (two offset dot screens) + cream wash */
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.10 0 0 0 0 0.05 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23p)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 1.4px 1.4px, rgba(20, 27, 13, 0.11) 1.4px, transparent 2px),
    radial-gradient(circle at 1.4px 1.4px, rgba(20, 27, 13, 0.07) 1.4px, transparent 2px),
    linear-gradient(#e8ecd6, #e0e4c9);
  background-size: 150px 150px, 11px 11px, 11px 11px, auto;
}
[data-theme="neobrut-field"] body,
[data-theme="neobrut-field"] .mat-page {
  background-size: 150px 150px, 11px 11px, 11px 11px, auto;
}
[data-theme="neobrut-field"] body { background-position: 0 0, 0 0, 5.5px 5.5px, 0 0; }
[data-theme="neobrut-field"] .mat-surface {        /* the scorecard — warm single plate */
  background:
    radial-gradient(circle at 1.4px 1.4px, rgba(20, 27, 13, 0.08) 1.4px, transparent 2px) 0 0 / 11px 11px,
    var(--surface);
  border: 2.5px solid var(--line);
  border-radius: 18px;
  box-shadow: 6px 6px 0 rgba(156, 61, 24, 0.24);   /* ONE warm clay plate — the soft shadow */
  padding: 4px;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
}
[data-theme="neobrut-field"] .mat-surface:hover {
  transform: translateY(-2px);
  box-shadow: 8px 8px 0 rgba(156, 61, 24, 0.24), 0 14px 30px rgba(20, 27, 13, 0.08);
}
[data-theme="neobrut-field"] .mat-btn {            /* the team badge — rounded, not pill */
  font-family: var(--font-display);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--on-accent);
  background: var(--lime);
  border: 2.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 24px;
  box-shadow: 4px 4px 0 var(--line);
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
}
[data-theme="neobrut-field"] .mat-btn:hover { transform: translateY(-3px) rotate(-0.5deg); box-shadow: 6px 7px 0 var(--line); }
[data-theme="neobrut-field"] .mat-btn:active { transform: translateY(2px); box-shadow: 2px 2px 0 var(--line); }
[data-theme="neobrut-field"] .mat-btn--ghost {
  background: var(--surface);
  color: var(--text);
  box-shadow: 4px 4px 0 rgba(20, 27, 13, 0.35);
}
[data-theme="neobrut-field"] .mat-num {            /* the SCOREBOARD module */
  display: inline-block;
  font-family: 'Anton', sans-serif;
  font-size: 52px;
  color: #f7c948;
  background: var(--line);
  padding: 4px 16px 6px;
  border-radius: 10px;
  text-transform: uppercase;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.45), 4px 4px 0 rgba(156, 61, 24, 0.3);
}
[data-theme="neobrut-field"] .mat-divider {        /* MOWN center stripe */
  height: 6px;
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, #2b7a40 0 16px, #236a37 16px 32px);
  border: 2px solid var(--line);
}
[data-theme="neobrut-field"] .mat-progress {       /* yard-line track */
  height: 12px;
  border: 2.5px solid var(--line);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, rgba(20, 27, 13, 0.18) 10px 12px),
    var(--surface-2);
}
[data-theme="neobrut-field"] .mat-progress i {     /* turf fill, mown */
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, #2b7a40 0 10px, #236a37 10px 20px);
  transition: width 0.55s cubic-bezier(0.34, 1.4, 0.5, 1);
}
[data-theme="neobrut-field"] .mat-chip {           /* the TICKET STUB — punched notch + perforation */
  position: relative;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  border: 2px solid var(--line);
  border-left: 2px dashed var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  padding: 8px 14px 8px 16px;
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.5, 1);
}
[data-theme="neobrut-field"] .mat-chip.is-on { background: var(--lime); color: var(--on-accent); border-color: var(--line); border-left-style: solid; }
[data-theme="neobrut-field"] .mat-chip:hover { transform: translateY(-2px) rotate(-1deg); }
[data-theme="neobrut-field"] .mat-input {          /* scorecard field */
  border-radius: 12px;
  border: 2px solid var(--line);
  background: #fdfcf4;
  padding: 11px 14px;
  transition: box-shadow 0.35s cubic-bezier(0.34, 1.4, 0.5, 1);
}
[data-theme="neobrut-field"] .mat-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(30, 107, 51, 0.35); }
[data-theme="neobrut-field"] .mat-avatar {         /* the medal — double ring */
  border-radius: 999px;
  border: 2.5px solid var(--line);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5.5px var(--line), 4px 5px 0 rgba(156, 61, 24, 0.28);
  font-family: 'Anton', sans-serif;
}
[data-theme="neobrut-field"] .mat-dialog {         /* the big scoreboard panel */
  border: 2.5px solid var(--line);
  border-radius: 20px;
  background:
    radial-gradient(circle at 1.4px 1.4px, rgba(20, 27, 13, 0.07) 1.4px, transparent 2px) 0 0 / 11px 11px,
    var(--surface);
  box-shadow: 7px 7px 0 rgba(156, 61, 24, 0.24);
  padding: 6px;
  animation: matFieldBounce 0.5s cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
[data-theme="neobrut-field"] .mat-dialog__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--line);
  color: #f7c948;
  padding: 6px 14px;
  border-radius: 8px;
  display: inline-block;
}
[data-theme="neobrut-field"] .mat-badge {          /* the TEAM STICKER — roundel, cheered */
  font-family: 'Anton', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text);
  background: var(--chip-gold, #d9a521);
  border: 2.5px solid var(--line);
  border-radius: 999px;
  padding: 7px 13px;
  box-shadow: 0 0 0 3px var(--surface), 3px 4px 0 rgba(20, 27, 13, 0.8);
  transform: rotate(-3deg);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="neobrut-field"] .mat-badge:hover { animation: matFieldCheer 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); transform: rotate(2deg) scale(1.05); }
[data-theme="neobrut-field"] .mat-dz {             /* added-time board */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #5c3a00;
  border: 2.5px solid var(--line);
  border-radius: 12px;
  background:
    repeating-linear-gradient(-45deg, rgba(156, 61, 24, 0.14) 0 12px, transparent 12px 24px),
    var(--dz-hero);
  padding: 11px 14px;
}
@keyframes matFieldBounce {
  0%   { opacity: 0; transform: translateY(18px) scale(0.96); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes matFieldCheer {
  0%   { transform: rotate(-3deg) scale(1); }
  35%  { transform: rotate(-8deg) scale(1.12); }
  65%  { transform: rotate(4deg) scale(1.05); }
  100% { transform: rotate(2deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="neobrut-field"] .mat-dialog,
  [data-theme="neobrut-field"] .mat-badge { animation: none; }
}
/* style-library/theme-neobrut-zine.css — the "neobrut-zine" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
    VARIANT 2 of the founder's "Neo-Brutalist Sports Poster with a Soft
    Underbelly" — THE POSTER SIDE DOMINANT.  Fan Zine.
    The club fanzine photocopied at 3am: heavy copier grain, plates
    MISREGISTERED 2–3px into cyan + riso-pink ghosts, hand-torn panel
    edges (wonky corners, never symmetric), typewriter headlines with
    marker underline sweeps, rubber-stamp toggles — then the underbelly:
    pastel risograph inks instead of shouty ones, a gentle wobble
    instead of a slam, soft paper shadows instead of hard plates.
    Describe it as: the fanzine photocopied after the match — grainy
    gray paper, pink and blue plates slipping out of register, torn
    panels and marker rules — with pastel riso inks and a soft wobble.
    ═══════════════════════════════════════════════════════════════════════ */

[data-theme="neobrut-zine"] {
  --bg: #dcd8cf;                 /* photocopy gray */
  --surface: #e9e6de;            /* copier paper */
  --surface-2: #cfcabd;          /* pressed stock */
  --line: #201d1a;               /* photocopier ink */
  --line-bright: #45403a;
  --text: #221f1c;
  --muted: #4a463f;
  --faint: #55504a;              /* 5.4:1 on bg */
  --faint-deco: #8b857b;

  --lime: #d61f7d;               /* RISO PINK — the loud plate */
  --lime-dim: #b8166a;
  --lime-glow: rgba(214, 31, 125, 0.14);
  --coral: #2244b8;              /* riso blue — effort/heat */
  --coral-glow: rgba(34, 68, 184, 0.14);
  --amber: #8a4a00;              /* riso mustard */
  --sky: #14564c;                /* riso teal */

  --success: #14564c;
  --danger: #a8181c;
  --urgency: #7c3a00;

  --energy: #5b2d8f;
  --energy-light: #4d2478;
  --energy-tint: #e9e2f4;

  --dz-bg: #ddd2c6;
  --dz3-surface: #f0d2c9;
  --dz-hero: #f6ddcf;

  --font-display: 'Space Mono', 'Courier New', monospace;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --radius: 4px;                 /* torn — never a clean rectangle */
  --radius-sm: 2px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --pill: 999px;

  --on-accent: #ffffff;          /* 4.8:1 on riso pink */
  --primary-hover: #b8166a;
  --on-warn: #ffffff;            /* 6.0:1 on riso mustard */

  --on-gold: var(--on-accent);

  /* the misregistration pair, reusable */
  --misreg-c: rgba(34, 68, 184, 0.38);
  --misreg-m: rgba(214, 31, 125, 0.36);

  /* BOARD EXTRAS — the photocopied pitch */
  --felt: #3b4a44;               /* riso teal-black pitch */
  --felt-deep: #2f3c37;
  --felt-line: rgba(233, 230, 222, 0.7);
  --lane: #d61f7d;
  --lane-paint: rgba(233, 230, 222, 0.55);
  --rail: #201d1a;
  --rail-edge: rgba(233, 230, 222, 0.4);

  --chip-white: #e9e6de;
  --chip-red: #a8181c;
  --chip-blue: #2244b8;
  --chip-gold: #d9a521;

  --card-back-1: #d61f7d;
  --card-back-2: #b8166a;
  --card-face: #e9e6de;

  --pop-shadow: #201d1a;
  --speed: 0.75s;
}
/* ── neobrut-zine · MATERIAL — photocopy + pastel riso ───────────────── */
[data-theme="neobrut-zine"] {
  /* heavy copier grain + coarse halftone screen + toner streaks + gray wash */
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.13 0 0 0 0 0.12 0 0 0 0 0.11 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 1.1px 1.1px, rgba(32, 29, 26, 0.1) 1.1px, transparent 1.7px),
    repeating-linear-gradient(90deg, rgba(32, 29, 26, 0.025) 0 1px, transparent 1px 97px),
    linear-gradient(#dcd8cf, #d2cec4);
  background-size: 160px 160px, 6px 6px, auto, auto;
}
[data-theme="neobrut-zine"] body,
[data-theme="neobrut-zine"] .mat-page {
  background-size: 160px 160px, 6px 6px, auto, auto;
}
[data-theme="neobrut-zine"] .mat-surface {         /* TORN SHEET, misregistered plates */
  background:
    radial-gradient(circle at 1.1px 1.1px, rgba(32, 29, 26, 0.07) 1.1px, transparent 1.7px) 0 0 / 6px 6px,
    var(--surface);
  border: 2px solid var(--line);
  border-radius: 16px 6px 20px 8px / 7px 18px 6px 15px;
  box-shadow: 3px 0 0 var(--misreg-c), -3px 0 0 var(--misreg-m), 7px 9px 14px rgba(32, 29, 26, 0.22);
  padding: 4px;
  transform: rotate(-0.25deg);
  transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.35s cubic-bezier(0.3, 1.4, 0.5, 1);
}
[data-theme="neobrut-zine"] .mat-surface:hover {   /* the gentle wobble */
  transform: rotate(0.3deg) translateY(-2px);
  box-shadow: 4px -1px 0 var(--misreg-c), -4px 1px 0 var(--misreg-m), 9px 11px 16px rgba(32, 29, 26, 0.24);
}
[data-theme="neobrut-zine"] .mat-btn {             /* hand-circled plate */
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--on-accent);
  background: var(--lime);
  border: 2px solid var(--line);
  border-radius: 10px 5px 12px 6px / 5px 11px 6px 10px;
  padding: 12px 20px;
  text-shadow: 1px 1px 0 rgba(32, 29, 26, 0.55);
  box-shadow: 2px 0 0 var(--misreg-c), -2px 0 0 var(--misreg-m), 4px 5px 0 rgba(32, 29, 26, 0.85);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
[data-theme="neobrut-zine"] .mat-btn:hover { transform: rotate(-1deg) translateY(-2px); }
[data-theme="neobrut-zine"] .mat-btn:active {
  transform: translate(2px, 2px) rotate(0.4deg);
  box-shadow: 1px 0 0 var(--misreg-c), -1px 0 0 var(--misreg-m), 1px 2px 0 rgba(32, 29, 26, 0.85);
}
[data-theme="neobrut-zine"] .mat-btn--ghost {
  background: var(--surface);
  color: var(--text);
  text-shadow: none;
  box-shadow: 2px 0 0 var(--misreg-c), -2px 0 0 var(--misreg-m), 3px 4px 0 rgba(32, 29, 26, 0.6);
}
[data-theme="neobrut-zine"] .mat-num {             /* chromatic double-exposure */
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 46px;
  color: var(--line);
  letter-spacing: -0.02em;
  text-shadow: 2.5px 0 0 var(--misreg-c), -2.5px 0 0 var(--misreg-m);
}
[data-theme="neobrut-zine"] .mat-divider {         /* the hand rule, slightly crooked */
  height: 4px;
  border: 0;
  margin: 14px 0;
  background: repeating-linear-gradient(90deg, var(--line) 0 16px, transparent 16px 22px);
  transform: rotate(-0.35deg);
  border-radius: 2px;
}
[data-theme="neobrut-zine"] .mat-progress {        /* torn tape track */
  height: 12px;
  border: 2px solid var(--line);
  border-radius: 6px 3px 7px 4px;
  background: var(--surface-2);
}
[data-theme="neobrut-zine"] .mat-progress i {      /* riso ink fill */
  border-radius: inherit;
  background: repeating-linear-gradient(-55deg, #d61f7d 0 9px, #b8166a 9px 18px);
  transition: width 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}
[data-theme="neobrut-zine"] .mat-chip {            /* the rubber stamp */
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text);
  background: var(--surface);
  border: 2px dashed var(--line);
  border-radius: 5px;
  padding: 8px 12px;
  transform: rotate(-1.2deg);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.3s, color 0.3s, border-style 0.3s;
}
[data-theme="neobrut-zine"] .mat-chip:hover { transform: rotate(0.8deg) scale(1.04); }
[data-theme="neobrut-zine"] .mat-chip.is-on {
  background: var(--lime);
  color: var(--on-accent);
  border-style: solid;
  text-shadow: 1px 1px 0 rgba(32, 29, 26, 0.55);
}
[data-theme="neobrut-zine"] .mat-input {           /* the zine form */
  font-family: var(--font-body);
  border: 2px solid var(--line);
  border-radius: 4px 10px 5px 12px;
  background: #f2f0ea;
  padding: 11px 13px;
  transition: box-shadow 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
[data-theme="neobrut-zine"] .mat-input:focus {
  outline: none;
  box-shadow: 2px 0 0 var(--misreg-c), -2px 0 0 var(--misreg-m), 0 0 0 3px rgba(214, 31, 125, 0.25);
}
[data-theme="neobrut-zine"] .mat-avatar {          /* torn square portrait */
  border-radius: 14px 5px 15px 6px / 6px 13px 5px 14px;
  border: 2px solid var(--line);
  background:
    radial-gradient(circle at 1.1px 1.1px, rgba(32, 29, 26, 0.08) 1.1px, transparent 1.7px) 0 0 / 6px 6px,
    var(--surface-2);
  box-shadow: 2px 0 0 var(--misreg-c), -2px 0 0 var(--misreg-m);
  font-family: 'Space Mono', monospace;
  font-weight: 700;
}
[data-theme="neobrut-zine"] .mat-dialog {          /* the pasted-in page */
  border: 2px solid var(--line);
  border-radius: 18px 7px 22px 9px / 8px 20px 7px 16px;
  background:
    radial-gradient(circle at 1.1px 1.1px, rgba(32, 29, 26, 0.06) 1.1px, transparent 1.7px) 0 0 / 6px 6px,
    var(--surface);
  box-shadow: 3px 0 0 var(--misreg-c), -3px 0 0 var(--misreg-m), 8px 10px 16px rgba(32, 29, 26, 0.22);
  transform: rotate(-0.4deg);
  animation: matZinePaste 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) both;
}
[data-theme="neobrut-zine"] .mat-dialog__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, transparent 62%, rgba(214, 31, 125, 0.4) 62%);  /* marker swipe */
  display: inline-block;
  padding: 0 4px;
}
[data-theme="neobrut-zine"] .mat-badge {           /* franked stamp */
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--coral);
  background: transparent;
  border: 2px solid var(--coral);
  outline: 1.5px dashed var(--coral);
  outline-offset: 2.5px;
  border-radius: 4px;
  padding: 6px 10px;
  transform: rotate(-5deg);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
[data-theme="neobrut-zine"] .mat-badge:hover { transform: rotate(-2deg) scale(1.04); }
[data-theme="neobrut-zine"] .mat-dz {              /* ransom note strip */
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--on-accent);
  background: var(--danger);
  border: 2px solid var(--line);
  border-radius: 7px 3px 8px 4px;
  text-shadow: 1px 1px 0 rgba(32, 29, 26, 0.6);
  box-shadow: 2px 0 0 var(--misreg-c), -2px 0 0 var(--misreg-m);
  padding: 11px 13px;
}
@keyframes matZinePaste {
  0%   { opacity: 0; transform: rotate(-4deg) translateY(-14px) scale(1.04); }
  55%  { opacity: 1; transform: rotate(-0.1deg) translateY(2px) scale(0.995); }
  100% { opacity: 1; transform: rotate(-0.4deg) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="neobrut-zine"] .mat-dialog { animation: none; }
}
/* style-library/theme-neobrut-ticket.css — the "neobrut-ticket" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
    VARIANT 3 of the founder's "Neo-Brutalist Sports Poster with a Soft
    Underbelly" — THE STRUCTURAL SIDE.  Wayfinding.
    The venue treated as a signage system: big pictograms in rings,
    platform departure boards (ink modules, amber mono numerals that
    FLIP), numbered sections, high-vis amber doing functional work on
    navy — then the underbelly: soft paper instead of glossy panels,
    generous 16px corners on every hard module, non-aggressive ink
    (#17191c, never pure black), gentle flip-settle motion.
    Describe it as: the stadium's wayfinding system — departure-board
    numerals flipping on ink panels, numbered sections, pictogram rings,
    one high-vis amber — printed on soft paper with rounded corners.
    ═══════════════════════════════════════════════════════════════════════ */

[data-theme="neobrut-ticket"] {
  --bg: #f4f3ee;                 /* soft signage paper */
  --surface: #fafaf6;            /* the card */
  --surface-2: #e9e8e1;          /* pressed */
  --line: #d8d6cd;               /* paper hairline */
  --line-bright: #b9b6aa;
  --text: #1a1c1f;               /* softened ink — never pure black */
  --muted: #3f4147;
  --faint: #4c4f56;              /* 7.4:1 on bg */
  --faint-deco: #8f9089;

  --lime: #1c3a5e;               /* SIGNAGE NAVY — the primary plate */
  --lime-dim: #142c49;
  --lime-glow: rgba(28, 58, 94, 0.12);
  --coral: #b3371e;              /* signal red — effort */
  --coral-glow: rgba(179, 55, 30, 0.12);
  --amber: #8a5a00;              /* deep amber as text … */
  --amber-display: #ffb020;      /* … high-vis amber on ink modules */
  --sky: #0e5c3f;                /* wayfinding green */

  --success: #0e5c3f;
  --danger: #a52a1f;
  --urgency: #7d4a00;

  --energy: #5b2d8f;
  --energy-light: #4d2478;
  --energy-tint: #ebe6f4;

  --dz-bg: #ece4d0;
  --dz3-surface: #ffe1a8;
  --dz-hero: #ffedc9;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius: 12px;                /* signage rounds its hard modules */
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --pill: 999px;

  --on-accent: #f8f9f5;          /* 10.6:1 on signage navy */
  --primary-hover: #142c49;
  --on-warn: #f8f9f5;            /* 6.6:1 on deep amber */

  --on-gold: var(--on-accent);

  /* BOARD EXTRAS — the platform floor (LIGHT — the only pale track) */
  --felt: #e9e8e1;
  --felt-deep: #dfded5;
  --felt-line: rgba(28, 58, 94, 0.65);
  --lane: #b3371e;
  --lane-paint: rgba(26, 28, 31, 0.55);
  --rail: #1a1c1f;
  --rail-edge: rgba(26, 28, 31, 0.35);

  --chip-white: #fafaf6;
  --chip-red: #b3371e;
  --chip-blue: #1c3a5e;
  --chip-gold: #ffb020;

  --card-back-1: #1c3a5e;
  --card-back-2: #142c49;
  --card-face: #fafaf6;

  --pop-shadow: rgba(26, 28, 31, 0.5);
  --speed: 0.6s;
}
/* ── neobrut-ticket · MATERIAL — wayfinding, softened ────────────────── */
[data-theme="neobrut-ticket"] {
  /* paper fibre + TACTILE PAVING dot grid (the platform floor) */
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55 0 0 0 0 0.54 0 0 0 0 0.5 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23p)'/%3E%3C/svg%3E"),
    radial-gradient(circle at 2px 2px, rgba(26, 28, 31, 0.07) 1.6px, transparent 2.4px),
    linear-gradient(#f4f3ee, #edece6);
  background-size: 170px 170px, 26px 26px, auto;
}
[data-theme="neobrut-ticket"] body,
[data-theme="neobrut-ticket"] .mat-page {
  background-size: 170px 170px, 26px 26px, auto;
}
[data-theme="neobrut-ticket"] .mat-surface {       /* the signage card */
  background: var(--surface);
  border: 1.5px solid var(--rail);
  border-top: 4px solid var(--amber-display);      /* the high-vis strip */
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(26, 28, 31, 0.09);
  padding: 16px;
  transition: transform 0.3s cubic-bezier(0.25, 0.9, 0.3, 1), box-shadow 0.3s cubic-bezier(0.25, 0.9, 0.3, 1);
}
[data-theme="neobrut-ticket"] .mat-surface:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(26, 28, 31, 0.13);
}
[data-theme="neobrut-ticket"] .mat-btn {           /* the signage button */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--on-accent);
  background: var(--lime);
  border: 0;
  border-radius: 12px;
  padding: 12px 22px;
  box-shadow: 0 8px 20px rgba(28, 58, 94, 0.25);
  transition: transform 0.25s cubic-bezier(0.25, 0.9, 0.3, 1), box-shadow 0.25s cubic-bezier(0.25, 0.9, 0.3, 1), background 0.25s;
}
[data-theme="neobrut-ticket"] .mat-btn:hover { background: var(--primary-hover); transform: translateY(-1px); box-shadow: 0 10px 24px rgba(28, 58, 94, 0.3); }
[data-theme="neobrut-ticket"] .mat-btn:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(28, 58, 94, 0.25); }
[data-theme="neobrut-ticket"] .mat-btn--ghost {
  background: transparent;
  color: var(--lime);
  box-shadow: inset 0 0 0 1.5px var(--rail);
}
[data-theme="neobrut-ticket"] .mat-btn--ghost:hover { background: var(--surface-2); }
[data-theme="neobrut-ticket"] .mat-num {           /* THE DEPARTURE BOARD */
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 42px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--amber-display);
  background: #17191c;
  padding: 8px 18px;
  border-radius: 10px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.06), inset 0 -4px 0 rgba(0, 0, 0, 0.5), 0 6px 16px rgba(26, 28, 31, 0.22);
  animation: matFlap 0.5s ease-out both;           /* the split-flap settle (base.css) */
}
[data-theme="neobrut-ticket"] .mat-num:hover { animation: matFlap 0.5s ease-out; }   /* re-flip on touch */
[data-theme="neobrut-ticket"] .mat-divider {       /* the platform rule → floor arrow */
  position: relative;
  height: 2px;
  border: 0;
  margin: 16px 0;
  background: repeating-linear-gradient(90deg, var(--rail) 0 14px, transparent 14px 20px);
}
[data-theme="neobrut-ticket"] .mat-divider::after {  /* the wayfinding arrowhead */
  content: "";
  position: absolute;
  right: 0; top: 50%;
  margin-top: -4px;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 8px solid var(--rail);
}
[data-theme="neobrut-ticket"] .mat-progress {      /* the line map */
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
}
[data-theme="neobrut-ticket"] .mat-progress i {    /* the train on the line */
  display: block; height: 100%;
  background: var(--lime);
  border-radius: 2px;
  box-shadow: 8px 0 0 -1px var(--amber-display);   /* the next-stop marker */
  transition: width 0.6s cubic-bezier(0.25, 0.9, 0.3, 1);
}
[data-theme="neobrut-ticket"] .mat-chip {          /* the pictogram ring */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--lime);
  background: var(--surface);
  border: 2px solid var(--lime);
  border-radius: 999px;
  padding: 8px 15px;
  transition: background 0.25s, color 0.25s, transform 0.25s cubic-bezier(0.25, 0.9, 0.3, 1);
}
[data-theme="neobrut-ticket"] .mat-chip:hover { transform: translateY(-1px); }
[data-theme="neobrut-ticket"] .mat-chip.is-on { background: var(--lime); color: var(--on-accent); }
[data-theme="neobrut-ticket"] .mat-input {        /* the ticket field */
  font-family: var(--font-body);
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--rail);
  border-radius: 10px;
  padding: 11px 14px;
  transition: box-shadow 0.25s;
}
[data-theme="neobrut-ticket"] .mat-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(28, 58, 94, 0.25); }
[data-theme="neobrut-ticket"] .mat-avatar {        /* the pictogram */
  border-radius: 999px;
  border: 2.5px solid var(--lime);
  background: var(--surface);
  color: var(--lime);
  font-family: var(--font-display);
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(26, 28, 31, 0.12), 12px -10px 0 -17px var(--amber-display);  /* the status pip */
}
[data-theme="neobrut-ticket"] .mat-dialog {        /* the announcement module */
  background: var(--surface);
  border: 1.5px solid var(--rail);
  border-top: 4px solid var(--amber-display);
  border-radius: 18px;
  box-shadow: 0 16px 36px rgba(26, 28, 31, 0.14);
  padding: 18px;
  animation: matBoardIn 0.45s cubic-bezier(0.25, 0.9, 0.3, 1) both;
}
[data-theme="neobrut-ticket"] .mat-dialog__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
}
[data-theme="neobrut-ticket"] .mat-badge {         /* the SECTION NUMBER */
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--amber-display);
  background: #17191c;
  border-radius: 8px;
  padding: 6px 10px;
}
[data-theme="neobrut-ticket"] .mat-dz {            /* the platform alert */
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber-display);
  background: #17191c;
  border-radius: 10px;
  border-left: 4px solid var(--amber-display);
  padding: 11px 14px;
}
@keyframes matBoardIn {
  0%   { opacity: 0; transform: rotateX(-10deg) translateY(10px); }
  100% { opacity: 1; transform: rotateX(0) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="neobrut-ticket"] .mat-num,
  [data-theme="neobrut-ticket"] .mat-dialog { animation: none; }
}
/* style-library/theme-neobrut-locker.css — the "neobrut-locker" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
    VARIANT 4 of the founder's "Neo-Brutalist Sports Poster with a Soft
    Underbelly" — THE CLUBHOUSE SIDE (the agent's call).  Clubhouse.
    The equipment room after training: locker panels with VENT SLOTS,
    nameplates fixed with visible screws, jersey numbers on mesh bibs,
    sports-tape stripes for rules and progress, wristband toggles —
    then the underbelly: everything towel-soft and a little worn-in,
    cubby corners rounded, magnetic clack motion (snaps on, settles
    gently), the warmest palette of the poster family.
    Describe it as: the equipment room after training — vent-slot
    lockers, screwed-on nameplates, jersey numbers on mesh, tape
    stripes — everything soft, rounded, and comfortably worn in.
    ═══════════════════════════════════════════════════════════════════════ */

[data-theme="neobrut-locker"] {
  --bg: #e6e2d4;                 /* painted cinderblock putty */
  --surface: #f4f1e6;            /* cubby board */
  --surface-2: #d9d4c2;          /* pressed board */
  --line: #26221a;               /* ink-brown */
  --line-bright: #4a4436;
  --text: #26221a;
  --muted: #4b463a;
  --faint: #585243;              /* 5.3:1 on bg */
  --faint-deco: #8b8574;

  --lime: #b3242c;               /* JERSEY CARDINAL — the primary plate */
  --lime-dim: #8e1c23;
  --lime-glow: rgba(179, 36, 44, 0.14);
  --coral: #1f4f8f;              /* TAPE BLUE — effort */
  --coral-glow: rgba(31, 79, 143, 0.14);
  --amber: #7c5a10;              /* bench-wood brass */
  --sky: #2e5e50;                /* sage tape */

  --success: #2e5e3a;
  --danger: #99201d;
  --urgency: #8a3a00;

  --energy: #4a3a8f;
  --energy-light: #3e2f7a;
  --energy-tint: #e7e4f2;

  --dz-bg: #ddd6c2;
  --dz3-surface: #f0d2b4;
  --dz-hero: #f7e2c5;

  --font-display: 'Archivo', system-ui, sans-serif;   /* varsity block */
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius: 10px;                /* the cubby cut */
  --radius-sm: 6px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --pill: 999px;

  --on-accent: #fdf9ef;          /* 6.4:1 on cardinal */
  --primary-hover: #8e1c23;
  --on-warn: #fdf9ef;            /* 6.9:1 on urgency */

  --on-gold: var(--on-accent);

  /* BOARD EXTRAS — the gym floor */
  --felt: #8a6f4d;               /* varnished gym timber */
  --felt-deep: #79603f;
  --felt-line: rgba(253, 249, 239, 0.75);
  --lane: #b3242c;               /* cardinal court tape */
  --lane-paint: rgba(253, 249, 239, 0.6);
  --rail: #26221a;
  --rail-edge: rgba(253, 249, 239, 0.4);

  --chip-white: #fdf9ef;
  --chip-red: #99201d;
  --chip-blue: #1f4f8f;
  --chip-gold: #d9a521;

  --card-back-1: #b3242c;
  --card-back-2: #8e1c23;
  --card-face: #f4f1e6;

  --pop-shadow: #26221a;
  --speed: 0.7s;
}
/* ── neobrut-locker · MATERIAL — the equipment room ──────────────────── */
[data-theme="neobrut-locker"] {
  /* cinderblock mortar grid + paper grain + putty wash */
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.15 0 0 0 0 0.13 0 0 0 0 0.10 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23p)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(38, 34, 26, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(38, 34, 26, 0.05) 1px, transparent 1px),
    linear-gradient(#e6e2d4, #ded9c8);
  background-size: 160px 160px, 26px 26px, 61px 61px, auto;
}
[data-theme="neobrut-locker"] body,
[data-theme="neobrut-locker"] .mat-page {
  background-size: 160px 160px, 26px 26px, 61px 61px, auto;
}
[data-theme="neobrut-locker"] .mat-surface {       /* THE LOCKER — vents + screws */
  position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(38, 34, 26, 0.16) 6px 8px) 12px 10px / calc(100% - 24px) 18px no-repeat,
    radial-gradient(circle 2px at 8px 8px, rgba(38, 34, 26, 0.65) 0 1.4px, transparent 2px) 0 0 / 100% 100%,
    var(--surface);
  border: 2.5px solid var(--line);
  border-radius: 14px;
  box-shadow: 5px 6px 0 rgba(38, 34, 26, 0.2), 0 12px 26px rgba(38, 34, 26, 0.1);   /* worn soft */
  padding: 16px;
  transition: transform 0.4s cubic-bezier(0.3, 1.35, 0.5, 1), box-shadow 0.4s cubic-bezier(0.3, 1.35, 0.5, 1);
}
[data-theme="neobrut-locker"] .mat-surface::before,   /* the four screws */
[data-theme="neobrut-locker"] .mat-surface::after {
  content: "";
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 999px;
  background:
    linear-gradient(45deg, transparent 42%, rgba(253, 249, 239, 0.85) 42% 58%, transparent 58%),
    var(--line-bright);
  box-shadow: 0 1px 0 rgba(253, 249, 239, 0.35);
}
[data-theme="neobrut-locker"] .mat-surface::before { left: 7px; top: 7px; }
[data-theme="neobrut-locker"] .mat-surface::after { right: 7px; bottom: 7px; }
[data-theme="neobrut-locker"] .mat-surface:hover {
  transform: translateY(-2px);
  box-shadow: 6px 8px 0 rgba(38, 34, 26, 0.2), 0 16px 32px rgba(38, 34, 26, 0.12);
}
[data-theme="neobrut-locker"] .mat-btn {           /* the JERSEY — shoulder stripes */
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--on-accent);
  background:
    linear-gradient(90deg, rgba(253, 249, 239, 0.85) 0 7px, transparent 7px 20px) 0 0 / 100% 34% no-repeat,
    linear-gradient(-90deg, rgba(253, 249, 239, 0.85) 0 7px, transparent 7px 20px) 0 100% / 100% 34% no-repeat,
    var(--lime);
  border: 2.5px solid var(--line);
  border-radius: 13px 13px 15px 15px;
  padding: 12px 26px;
  box-shadow: 4px 5px 0 var(--line);
  transition: transform 0.4s cubic-bezier(0.3, 1.35, 0.5, 1), box-shadow 0.4s cubic-bezier(0.3, 1.35, 0.5, 1);
}
[data-theme="neobrut-locker"] .mat-btn:hover { transform: translateY(-3px); box-shadow: 5px 7px 0 var(--line); }
[data-theme="neobrut-locker"] .mat-btn:active { transform: translateY(2px); box-shadow: 2px 2px 0 var(--line); }
[data-theme="neobrut-locker"] .mat-btn--ghost {
  background: var(--surface);
  color: var(--text);
}
[data-theme="neobrut-locker"] .mat-num {           /* the JERSEY NUMBER on mesh */
  display: inline-block;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: 50px;
  color: var(--text);
  background:
    radial-gradient(circle at 1.6px 1.6px, rgba(38, 34, 26, 0.14) 1.4px, transparent 2.1px) 0 0 / 7px 7px,
    var(--surface);
  border: 2.5px solid var(--line);
  border-radius: 12px;
  padding: 6px 18px 10px;
  text-shadow: 3px 3px 0 rgba(31, 79, 143, 0.3);   /* tape-blue offset */
}
[data-theme="neobrut-locker"] .mat-divider {       /* the SPORTS TAPE */
  height: 9px;
  border: 0;
  margin: 13px 0;
  background:
    repeating-linear-gradient(-45deg, rgba(31, 79, 143, 0.75) 0 9px, rgba(253, 249, 239, 0.6) 9px 13px);
  border-radius: 2px;
  opacity: 0.85;
}
[data-theme="neobrut-locker"] .mat-progress {      /* the tape measure */
  height: 12px;
  border: 2.5px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}
[data-theme="neobrut-locker"] .mat-progress i {    /* cardinal tape with tick marks */
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, transparent 0 9px, rgba(253, 249, 239, 0.55) 9px 10.5px),
    var(--lime);
  transition: width 0.6s cubic-bezier(0.3, 1.35, 0.5, 1);
}
[data-theme="neobrut-locker"] .mat-chip {          /* the WRISTBAND */
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
  background:
    repeating-linear-gradient(90deg, rgba(179, 36, 44, 0.16) 0 6px, transparent 6px 12px),
    var(--surface);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 8px 15px;
  transition: transform 0.35s cubic-bezier(0.3, 1.35, 0.5, 1), background 0.35s, color 0.35s;
}
[data-theme="neobrut-locker"] .mat-chip:hover { transform: translateY(-1px); }
[data-theme="neobrut-locker"] .mat-chip.is-on {
  background:
    repeating-linear-gradient(90deg, rgba(253, 249, 239, 0.25) 0 6px, transparent 6px 12px),
    var(--lime);
  color: var(--on-accent);
}
[data-theme="neobrut-locker"] .mat-input {         /* the label-maker strip */
  font-family: var(--font-body);
  color: var(--text);
  background: #fdfbf2;
  border: 2px solid var(--line);
  border-radius: 9px;
  padding: 11px 14px;
  transition: box-shadow 0.35s cubic-bezier(0.3, 1.35, 0.5, 1);
}
[data-theme="neobrut-locker"] .mat-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(179, 36, 44, 0.3); }
[data-theme="neobrut-locker"] .mat-avatar {        /* the cubby tag */
  border-radius: 11px;
  border: 2.5px solid var(--line);
  background:
    radial-gradient(circle at 1.6px 1.6px, rgba(38, 34, 26, 0.12) 1.4px, transparent 2.1px) 0 0 / 7px 7px,
    var(--surface);
  box-shadow: 3px 4px 0 rgba(38, 34, 26, 0.25);
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
}
[data-theme="neobrut-locker"] .mat-dialog {        /* the locker door */
  position: relative;
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(38, 34, 26, 0.14) 6px 8px) 14px 12px / calc(100% - 28px) 16px no-repeat,
    var(--surface);
  border: 2.5px solid var(--line);
  border-radius: 16px;
  box-shadow: 6px 7px 0 rgba(38, 34, 26, 0.2);
  padding: 20px 18px 16px;
  animation: matLockerClack 0.45s cubic-bezier(0.3, 1.35, 0.5, 1) both;
}
[data-theme="neobrut-locker"] .mat-dialog__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: inline-block;
  background: var(--line);
  color: #f2c94c;                                   /* the nameplate strip */
  padding: 5px 14px 6px;
  border-radius: 7px;
  transform: rotate(-0.6deg);
}
[data-theme="neobrut-locker"] .mat-badge {         /* the NAMEPLATE — screwed on */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 6px 11px;
  box-shadow: 0 2px 0 rgba(38, 34, 26, 0.35);
  transform: rotate(-1.4deg);
  transition: transform 0.35s cubic-bezier(0.3, 1.35, 0.5, 1);
}
[data-theme="neobrut-locker"] .mat-badge:hover { transform: rotate(0.8deg) translateY(-1px); }
[data-theme="neobrut-locker"] .mat-dz {            /* the coach's board */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--on-accent);
  background:
    repeating-linear-gradient(-45deg, rgba(253, 249, 239, 0.14) 0 10px, transparent 10px 20px),
    var(--danger);
  border: 2.5px solid var(--line);
  border-radius: 10px;
  padding: 11px 14px;
}
@keyframes matLockerClack {
  0%   { opacity: 0; transform: translateX(10px) rotate(1.2deg); }
  45%  { opacity: 1; transform: translateX(-2px) rotate(-0.4deg); }
  100% { opacity: 1; transform: translateX(0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="neobrut-locker"] .mat-dialog { animation: none; }
}
/* style-library/theme-x10.css — the "x10" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   15 · GUM PROFESSIONAL (x10) — FROM THE FOUNDER'S SITE x10.au
   Mined 2026-09-03 from the live directory: near-black green surfaces
   (#0b0e0b/#141a14), refined gum green (--green #4A6B47, bright #6E9A6A),
   soft gold accents (#C9A24E/#E8C77A), Space Grotesk + JetBrains Mono,
   6–8px radii, the inset vignette (0 0 200px black), gold focus rings
   (0 0 0 3px green-soft), zebra listing rows.
   Describe it as: the professional's directory after dark — deep green-black
   paper, gum-green actions, gold hairline rewards, mono index labels, and
   every listing sitting on a quiet zebra stripe.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="x10"] {
  --bg: #0b0e0b;                /* deep near-black green (x10 base) */
  --surface: #141a14;
  --surface-2: #1a221a;
  --line: #243024;
  --line-bright: #2d3a2d;
  --text: #eef2ea;
  --muted: #d4dcd0;
  --faint: #9fae9c;             /* 8.3:1 on bg */
  --faint-deco: #6e7d6b;

  --lime: #6E9A6A;              /* green-bright — primary action */
  --lime-dim: #4A6B47;          /* deep gum-leaf */
  --lime-glow: rgba(110, 154, 106, 0.16);
  --coral: #C97F2E;             /* x10 warn ochre — effort */
  --coral-glow: rgba(201, 127, 46, 0.14);
  --amber: #C9A24E;             /* soft gold — warning */
  --sky: #7cc4e8;

  --success: #6E9A6A;
  --danger: #d86a5e;              /* 5.2:1 as text on surface */
  --urgency: #C97F2E;

  --energy: #b48cff;
  --energy-light: #d3c2ff;
  --energy-tint: #221c33;

  --dz-bg: #0d1a12;
  --dz3-surface: #2c2414;
  --dz-hero: #35300f;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius: 8px;                /* the directory's calm 6–8px */
  --radius-sm: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --pill: 999px;

  --on-accent: #0b0e0b;         /* 6.0:1 on green-bright */
  --primary-hover: #8ab486;
  --on-warn: #0b0e0b;           /* 6.1:1 on ochre */

  --on-gold: #0b0e0b;

  /* x10 extras — the directory's own vocabulary */
  --gold: #C9A24E;
  --gold-glow: #E8C77A;
  --gold-deep: #8a6e2e;
}

/* ── x10 · MATERIAL — the after-dark directory ────────────────────────── */
[data-theme="x10"] {
  --mat-page:
    radial-gradient(120% 90% at 50% 0%, rgba(110, 154, 106, 0.05), transparent 60%),
    linear-gradient(#0d120d, #0b0e0b 40%);
}
[data-theme="x10"] body { box-shadow: inset 0 0 200px 60px rgba(0, 0, 0, 0.45); }  /* the site's vignette */
[data-theme="x10"] .mat-surface {             /* listing card: gold top hairline */
  background: linear-gradient(180deg, rgba(201, 162, 78, 0.05), transparent 26%), var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  border-radius: 8px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.65);
}
[data-theme="x10"] .mat-btn {                 /* outlined utility, fills gum on press */
  font-family: var(--font-body); font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--lime) 55%, var(--line));
  box-shadow: inset 0 1px 0 rgba(238, 242, 234, 0.04);
  transition: background 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}
[data-theme="x10"] .mat-btn:active { background: var(--lime-dim); color: var(--text); transform: none; }
[data-theme="x10"] .mat-btn--ghost { box-shadow: inset 0 0 0 1px var(--line-2, var(--line-bright)); }
[data-theme="x10"] .mat-num { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
[data-theme="x10"] .mat-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-bright) 12%, var(--line-bright) 88%, transparent); }
[data-theme="x10"] .mat-progress { border-radius: 999px; background: #0f150f; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="x10"] .mat-progress i {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime-dim), var(--lime));
  box-shadow: 0 0 0 1px rgba(201, 162, 78, 0.25);   /* gold rim on effort */
}
[data-theme="x10"] .mat-chip {
  font-family: var(--font-mono); font-size: 0.86em; text-transform: uppercase; letter-spacing: 0.06em;
  border-radius: 6px;
}
[data-theme="x10"] .mat-chip.is-on { box-shadow: 0 0 0 3px rgba(74, 107, 71, 0.3); }   /* the site's focus ring */
[data-theme="x10"] .mat-input { border-radius: 6px; font-family: var(--font-body); }
[data-theme="x10"] .mat-avatar { border-radius: 8px; border: 1px solid var(--line-bright); }
[data-theme="x10"] .mat-dialog {
  border: 1px solid var(--line-bright);
  border-top: 2px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.7), 0 2px 12px -2px rgba(201, 162, 78, 0.3);
}
[data-theme="x10"] .mat-badge { font-family: var(--font-mono); border-radius: 6px; border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line)); color: var(--gold-glow); }
[data-theme="x10"] .mat-dz {
  border-radius: 8px;
  border-left: 3px solid var(--gold);
  background: linear-gradient(90deg, rgba(201, 127, 46, 0.14), transparent 70%), var(--surface);
}
/* style-library/theme-doof.css — the "doof" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   16 · VOID RAVE (doof) — FROM THE FOUNDER'S SITE doof.ing
   Mined 2026-09-03 from the live church of the bush doof: the void
   (#050508/#0a0a0f), the sacred trinity — purple #a855f7, orange #f97316,
   cyan #22d3ee — ritual gradients (135° purple→cyan, purple→orange→cyan),
   30px glow shadows on every elevated thing, asymmetric blob radii,
   Space Grotesk caps + Inter + JetBrains Mono.
   Describe it as: a bush-doof shrine at 3am — black void, one rotating
   trinity of purple/orange/cyan light, gradient-inked headings, panels
   that glow like lit stained glass, and nothing is quite square.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="doof"] {
  --bg: #0a0a0f;                /* the void (doof --bg) */
  --surface: #111118;
  --surface-2: #16161f;
  --line: #1e1e2e;
  --line-bright: #2a2a3a;
  --text: #e8e8f0;
  --muted: #a0a0b8;
  --faint: #8f8fa6;             /* 7.7:1 on void */
  --faint-deco: #6b6b80;

  --lime: #a855f7;              /* purple-light — the primary sacrament */
  --lime-dim: #9333ea;          /* purple */
  --lime-glow: rgba(168, 85, 247, 0.4);
  --coral: #f97316;             /* orange — effort/fire */
  --coral-glow: rgba(249, 115, 22, 0.4);
  --amber: #fb923c;             /* orange-light */
  --sky: #22d3ee;               /* cyan */

  --success: #4ade80;
  --danger: #f43f5e;
  --urgency: #f97316;

  --energy: #a855f7;
  --energy-light: #d8b4fe;
  --energy-tint: #2a1f4d;

  --dz-bg: #080810;
  --dz3-surface: #2c1a10;
  --dz-hero: #3a1f0c;

  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --pill: 999px;

  --on-accent: #160522;         /* 4.9:1 on purple-light */
  --primary-hover: #c084fc;
  --on-warn: #2a1005;           /* 6.4:1 on orange */

  --on-gold: #160522;

  /* doof extras — the trinity as slots any project can read */
  --purple: #a855f7;
  --purple-dark: #7c22ce;
  --orange: #f97316;
  --cyan: #22d3ee;
  --gradient-mystical: linear-gradient(135deg, #a855f7 0%, #22d3ee 100%);
  --gradient-fire: linear-gradient(135deg, #f97316 0%, #a855f7 100%);
  --gradient-sacred: linear-gradient(135deg, #a855f7 0%, #f97316 50%, #22d3ee 100%);
}

/* ── doof · MATERIAL — glow-stained void ──────────────────────────────── */
[data-theme="doof"] {
  --mat-page:
    radial-gradient(60% 46% at 82% -6%, rgba(168, 85, 247, 0.16), transparent 64%),
    radial-gradient(52% 40% at -8% 34%, rgba(34, 211, 238, 0.10), transparent 60%),
    radial-gradient(46% 38% at 55% 112%, rgba(249, 115, 22, 0.08), transparent 62%),
    linear-gradient(#0a0a0f, #050508 80%);
}
[data-theme="doof"] .mat-surface {             /* lit stained-glass pane */
  background:
    linear-gradient(160deg, rgba(168, 85, 247, 0.09), transparent 46%, rgba(34, 211, 238, 0.05)),
    var(--surface);
  border: 1px solid rgba(168, 85, 247, 0.34);
  border-radius: 30px 18px 34px 20px / 20px 34px 18px 30px;   /* the blob */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 30px rgba(147, 51, 234, 0.22);
}
[data-theme="doof"] .mat-surface:hover { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 44px rgba(147, 51, 234, 0.34); }
[data-theme="doof"] .mat-btn {                 /* the gradient sacrament */
  font-family: var(--font-display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  border: 0;
  border-radius: 999px;
  background: var(--gradient-mystical);
  box-shadow: 0 0 26px rgba(249, 115, 22, 0.5), 0 3px 14px rgba(234, 88, 12, 0.35);
  transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease), background 0.4s var(--ease);
}
[data-theme="doof"] .mat-btn:hover { background: var(--gradient-fire); box-shadow: 0 0 34px rgba(168, 85, 247, 0.55), 0 4px 16px rgba(0, 0, 0, 0.4); }
[data-theme="doof"] .mat-btn:active { transform: scale(0.96); }
[data-theme="doof"] .mat-btn--ghost {
  background: rgba(168, 85, 247, 0.08);
  color: var(--purple);
  box-shadow: inset 0 0 0 1px rgba(168, 85, 247, 0.4);
}
[data-theme="doof"] .mat-num {                 /* gradient-inked numeral */
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  background: var(--gradient-sacred);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.45));
}
[data-theme="doof"] .mat-divider {             /* the sacred gradient hairline */
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.7) 22%, rgba(249, 115, 22, 0.7) 50%, rgba(34, 211, 238, 0.7) 78%, transparent);
}
[data-theme="doof"] .mat-progress { border-radius: 999px; background: #0d0d16; box-shadow: inset 0 0 0 1px #1e1e2e; }
[data-theme="doof"] .mat-progress i {
  border-radius: 999px;
  background: var(--gradient-mystical);
  box-shadow: 0 0 18px rgba(168, 85, 247, 0.5);
  animation: matGlowBreathe 2.8s ease-in-out infinite;
}
[data-theme="doof"] .mat-chip { border-radius: 999px; border-color: rgba(168, 85, 247, 0.3); font-family: var(--font-body); }
[data-theme="doof"] .mat-chip.is-on {
  background: rgba(168, 85, 247, 0.16);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.5), 0 0 18px rgba(168, 85, 247, 0.3);
  color: var(--purple);
}
[data-theme="doof"] .mat-input { border-radius: 999px; background: rgba(17, 17, 24, 0.8); border: 1px solid #1e1e2e; }
[data-theme="doof"] .mat-input:focus { border-color: rgba(34, 211, 238, 0.6); box-shadow: 0 0 22px rgba(34, 211, 238, 0.18); outline: none; }
[data-theme="doof"] .mat-avatar { border-radius: 42% 58% 55% 45% / 100% 100% 100% 100%; border: 1px solid rgba(34, 211, 238, 0.4); }
[data-theme="doof"] .mat-dialog {
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 26px 16px 30px 18px / 18px 30px 16px 26px;
  background: linear-gradient(150deg, rgba(168, 85, 247, 0.10), transparent 50%), var(--surface-elevated, #16161f);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 0 40px rgba(147, 51, 234, 0.25);
}
[data-theme="doof"] .mat-badge {
  border-radius: 999px;
  background: rgba(34, 211, 238, 0.12);
  color: var(--cyan);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 0 14px rgba(34, 211, 238, 0.25);
  font-family: var(--font-mono);
}
[data-theme="doof"] .mat-dz {                  /* the fire advisory */
  border-radius: 18px 10px 20px 12px / 12px 20px 10px 18px;
  border: 1px solid rgba(249, 115, 22, 0.5);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.28), rgba(168, 85, 247, 0.18)), #16161f;
  box-shadow: 0 0 26px rgba(249, 115, 22, 0.3), 0 3px 14px rgba(234, 88, 12, 0.3);
}

@keyframes matGlowBreathe { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.28); } }
/* style-library/theme-qalarc.css — the "qalarc" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   17 · PASTEL STUDIO (qalarc) — FROM THE FOUNDER'S SITE qalarc.com
   Mined 2026-09-03 from the live studio site: cream #fdf6ee, ink #2a2035,
   the pastel garden — blush #f2c4ce, lavender #c9b8e8, sky #a8d8ea,
   mint #b8e8c8, peach #f7c59f — glass cards rgba(255,255,255,.6) with
   blur, 16px/8px radii + 100px pills, soft violet shadows
   rgba(90,60,120,.08), DM Serif Display (italic flourishes) + DM Sans +
   Space Mono labels.
   Describe it as: a light-flooded studio in spring — cream paper, glass
   cards floating on pastel light, serif italic headlines, mono caption
   labels, and everything pill-shaped and weightless.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="qalarc"] {
  --bg: #fdf6ee;                /* cream (the studio's --cream) */
  --surface: #ffffff;
  --surface-2: #f7efe4;
  --line: #e7dcd0;
  --line-bright: #d8c9bb;
  --text: #2a2035;              /* ink */
  --muted: #4a3d5c;
  --faint: #6d5f80;             /* 5.4:1 on cream */
  --faint-deco: #b0a8c0;

  --lime: #6d4fa3;              /* deep lavender — primary (pastels stay decorative) */
  --lime-dim: #5a3f8a;
  --lime-glow: rgba(109, 79, 163, 0.16);
  --coral: #a85a68;             /* blush-deep — effort */
  --coral-glow: rgba(242, 196, 206, 0.5);
  --amber: #7f5629;             /* peach-deep, 6.0:1 as text */
  --sky: #3a688e;               /* sky-deep, 5.5:1 as text */

  --success: #3a6c4d;           /* mint-deep, 5.7:1 as text */
  --danger: #b05252;
  --urgency: #a34455;           /* 5.6:1 with cream text */

  --energy: #8a6bb8;
  --energy-light: #5f4497;      /* 6.3:1 on the pastel tint */
  --energy-tint: #efe6f8;

  --dz-bg: #faf0ea;
  --dz3-surface: #f6e2e6;
  --dz-hero: #f2d4dc;

  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', 'Inter', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius: 16px;               /* the studio's 16/8/100 rhythm */
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --pill: 100px;

  --on-accent: #fdf6ee;         /* 5.9:1 on deep lavender */
  --primary-hover: #8462bd;
  --on-warn: #fdf6ee;           /* 5.6:1 on blush urgency */

  --on-gold: #fdf6ee;

  /* qalarc extras — the pastel garden as readable slots */
  --blush: #f2c4ce;
  --lavender: #c9b8e8;
  --sky-pastel: #a8d8ea;
  --mint: #b8e8c8;
  --peach: #f7c59f;
  --glass: rgba(255, 255, 255, 0.6);
  --glass-border: rgba(180, 160, 200, 0.3);
}

/* ── qalarc · MATERIAL — glass on the pastel garden ───────────────────── */
[data-theme="qalarc"] {
  --mat-page:
    radial-gradient(46% 38% at 8% -4%, rgba(242, 196, 206, 0.5), transparent 62%),
    radial-gradient(42% 36% at 96% 8%, rgba(201, 184, 232, 0.45), transparent 64%),
    radial-gradient(44% 40% at 50% 108%, rgba(184, 232, 200, 0.4), transparent 60%),
    #fdf6ee;
}
[data-theme="qalarc"] .mat-surface {           /* floating glass card */
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 2px 16px rgba(90, 60, 120, 0.12), 0 4px 32px rgba(90, 60, 120, 0.08);
}
[data-theme="qalarc"] .mat-btn {               /* lavender pill, weightless */
  font-family: var(--font-body); font-weight: 600;
  border-radius: var(--pill);
  box-shadow: 0 4px 18px rgba(109, 79, 163, 0.2);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
[data-theme="qalarc"] .mat-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(109, 79, 163, 0.26); }
[data-theme="qalarc"] .mat-btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 2px 10px rgba(109, 79, 163, 0.2); }
[data-theme="qalarc"] .mat-btn--ghost { background: rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 0 1px var(--glass-border); color: var(--ink, var(--text)); }
[data-theme="qalarc"] .mat-num {               /* the serif numeral — rare */
  font-family: 'DM Serif Display', Georgia, serif;
  color: var(--lime);
}
[data-theme="qalarc"] .mat-divider {           /* dotted lavender path */
  height: 2px; border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--lavender) 0 6px, transparent 6px 14px);
}
[data-theme="qalarc"] .mat-progress { border-radius: var(--pill); background: rgba(42, 32, 53, 0.08); box-shadow: none; }
[data-theme="qalarc"] .mat-progress i {        /* the garden rainbow fill */
  border-radius: var(--pill);
  background: linear-gradient(90deg, #6d4fa3, #a85a68 34%, #9a6b3c 62%, #4e8d63);
}
[data-theme="qalarc"] .mat-chip { font-family: var(--font-body); border-radius: var(--pill); border-color: var(--glass-border); background: rgba(255, 255, 255, 0.55); }
[data-theme="qalarc"] .mat-chip.is-on { background: var(--lavender); color: #3d2a5e; border-color: transparent; box-shadow: 0 2px 10px rgba(109, 79, 163, 0.2); }
[data-theme="qalarc"] .mat-input { border-radius: var(--pill); background: rgba(255, 255, 255, 0.6); border: 1px solid var(--glass-border); font-family: var(--font-body); }
[data-theme="qalarc"] .mat-input:focus { border-color: var(--lavender); box-shadow: 0 0 0 3px rgba(201, 184, 232, 0.4); outline: none; }
[data-theme="qalarc"] .mat-avatar { border-radius: var(--pill); border: 2px solid #fff; box-shadow: 0 2px 10px rgba(90, 60, 120, 0.18); }
[data-theme="qalarc"] .mat-dialog {
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: rgba(255, 252, 248, 0.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 32px rgba(90, 60, 120, 0.12), 0 18px 60px rgba(90, 60, 120, 0.16);
}
[data-theme="qalarc"] .mat-dialog__title { font-family: var(--font-display); }
[data-theme="qalarc"] .mat-badge { font-family: var(--font-mono); border-radius: var(--pill); background: var(--sky-pastel); color: #2a3a4a; }
[data-theme="qalarc"] .mat-dz {
  font-family: var(--font-body); font-weight: 700;
  border-radius: var(--pill);
  background: linear-gradient(135deg, var(--blush), var(--peach));
  color: #4a2a35;
  box-shadow: 0 4px 18px rgba(168, 90, 104, 0.2);
}
/* style-library/theme-tradez.css — the "tradez" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   18 · WARM TRADE (tradez) — FROM THE FOUNDER'S SITE tradez.au
   Mined 2026-09-03 from the live directory (palette.css + site.css):
   warm sand cream #FBF8EF, white cards, deep eucalyptus ink #1F2A1F,
   gum-leaf green #4A6B47, soft gold #C9A24E, chunky Fraunces 700–900
   headlines, Inter body, JetBrains Mono, 6–10px radii, zebra listing
   rows, dark-green CTA panels with cream text.
   Describe it as: a friendly tradie's ledger in afternoon light — warm
   sand paper, chunky serif signage, gum-green stamps of approval, gold
   hairlines, and every listing striped like a well-kept workbook.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="tradez"] {
  --bg: #FBF8EF;                /* warm sand cream (tradez --bg) */
  --surface: #FFFFFF;
  --surface-2: #F2EEDD;
  --line: #E0DAC6;
  --line-bright: #cfc7ae;
  --text: #1F2A1F;              /* very dark eucalyptus */
  --muted: #34402F;
  --faint: #4d5a48;             /* 6.9:1 on sand */
  --faint-deco: #8a9480;

  --lime: #3d5c3a;              /* deep gum-leaf — primary */
  --lime-dim: #2c452a;
  --lime-glow: rgba(61, 92, 58, 0.14);
  --coral: #b4482f;             /* terracotta effort */
  --coral-glow: rgba(180, 72, 47, 0.12);
  --amber: #8a6e2e;             /* gold-deep (tradez AA gold) */
  --sky: #33628f;

  --success: #3d5c3a;
  --danger: #a92e2e;
  --urgency: #a3541c;           /* 5.2:1 with cream text */

  --energy: #6b2fd6;
  --energy-light: #6b3fd1;      /* 5.3:1 on the light tint */
  --energy-tint: #ece5f8;

  --dz-bg: #F5EFDE;
  --dz3-surface: #f3e3cc;
  --dz-hero: #f0d9b4;

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 8px;                /* tradez's honest 6–10px */
  --radius-sm: 6px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --pill: 999px;

  --on-accent: #FBF8EF;         /* 7.1:1 on gum-leaf */
  --primary-hover: #4a6e47;
  --on-warn: #FBF8EF;           /* 5.2:1 on urgency */

  --on-gold: #FBF8EF;

  /* tradez extras */
  --gold: #C9A24E;
  --gold-glow: #E8C77A;
  --sand: #F2EEDD;
}

/* ── tradez · MATERIAL — the honest ledger ─────────────────────────────── */
[data-theme="tradez"] {
  --mat-page:
    linear-gradient(135deg, #FBF8EF 0%, #F2EEDD 100%),
    #FBF8EF;
}
[data-theme="tradez"] .mat-surface {           /* white card, gum shadow */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 40px -12px rgba(31, 42, 31, 0.18);
}
[data-theme="tradez"] .mat-surface:hover { box-shadow: 0 22px 46px -12px rgba(31, 42, 31, 0.24); }
[data-theme="tradez"] .mat-btn {               /* gum block, chunky serif */
  font-family: var(--font-display); font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(31, 42, 31, 0.35);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
[data-theme="tradez"] .mat-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(31, 42, 31, 0.4); }
[data-theme="tradez"] .mat-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(31, 42, 31, 0.35); }
[data-theme="tradez"] .mat-btn--ghost {
  background: var(--surface);
  color: var(--lime);
  box-shadow: inset 0 0 0 1.5px var(--line-bright), 0 3px 0 rgba(31, 42, 31, 0.16);
}
[data-theme="tradez"] .mat-num {               /* chunky Fraunces tally */
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;   /* the wonky cut */
}
[data-theme="tradez"] .mat-divider {           /* ruled workbook line */
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--line-bright) 0 10px, transparent 10px 16px);
}
[data-theme="tradez"] .mat-progress { border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="tradez"] .mat-progress i {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime), #5a7d56);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 78, 0.45);   /* gold rim */
}
[data-theme="tradez"] .mat-chip { font-family: var(--font-body); font-weight: 600; border-radius: 8px; border-color: var(--line-bright); }
[data-theme="tradez"] .mat-chip.is-on { box-shadow: 0 0 0 3px rgba(74, 107, 71, 0.3); }  /* the focus ring */
[data-theme="tradez"] .mat-input { border-radius: 8px; border: 1px solid var(--line-bright); font-family: var(--font-body); }
[data-theme="tradez"] .mat-avatar { border-radius: 8px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line-bright); }
[data-theme="tradez"] .mat-dialog {
  border: 1px solid var(--line);
  border-top: 4px solid var(--lime);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 24px 48px -12px rgba(31, 42, 31, 0.28);
}
[data-theme="tradez"] .mat-dialog__title { font-family: var(--font-display); font-weight: 800; }
[data-theme="tradez"] .mat-badge {
  font-family: var(--font-mono);
  border-radius: 6px;
  background: color-mix(in srgb, var(--gold) 18%, var(--surface));
  color: #5c470f;
  border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--line));
}
[data-theme="tradez"] .mat-dz {                /* the warn stencil */
  font-family: var(--font-body); font-weight: 700;
  border-radius: 8px;
  border: 1px solid rgba(163, 84, 28, 0.4);
  border-left: 4px solid var(--urgency);
  background: linear-gradient(90deg, rgba(163, 84, 28, 0.1), transparent 65%), var(--surface);
  color: #5e3210;
}
/* style-library/theme-gmux.css — the "gmux" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   19 · FOREST TERMINAL (gmux) — FROM THE FOUNDER'S SITE gmux.ai
   Mined 2026-09-03 from the live agent-orchestration site ("forest"
   palette): sage-ivory #edefe6, paper #fafbf3, ink #1a201a, forest green
   #3d7a4e, clay #b25a38, honey #d4a84a, rule lines #cfd4c2, JetBrains
   Mono everywhere, Fraunces hero serif, 8px radii, pill chips, the
   ok/wait/alert/idle status-dot grammar.
   Describe it as: a field terminal in a green clearing — sage paper, a
   mono grid, forest-green GO buttons, clay alerts, honey waits, and every
   agent a status dot first and a name second.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="gmux"] {
  --bg: #edefe6;                /* sage-ivory (gmux --cream) */
  --surface: #fafbf3;           /* paper */
  --surface-2: #e3e7d8;
  --line: #cfd4c2;              /* rule */
  --line-bright: #b9c0a8;
  --text: #1a201a;              /* ink */
  --muted: #2e342c;
  --faint: #4a5148;             /* 7.1:1 on sage */
  --faint-deco: #98a093;

  --lime: #2e6b40;              /* forest green (deepened for AA) — primary */
  --lime-dim: #235534;
  --lime-glow: rgba(46, 107, 64, 0.16);
  --coral: #9c4a2b;             /* clay (deepened) — effort */
  --coral-glow: rgba(156, 74, 43, 0.14);
  --amber: #8a6414;             /* honey (deepened) — wait */
  --sky: #33638a;

  --success: #2e6b40;           /* ok */
  --danger: #a92e2e;            /* alert */
  --urgency: #9c4a2b;           /* clay — 5.3:1 with paper text */

  --energy: #6b2fd6;
  --energy-light: #6b3fd1;      /* 5.2:1 on the light tint */
  --energy-tint: #e9e4f4;

  --dz-bg: #e6e9da;
  --dz3-surface: #eadfd0;
  --dz-hero: #e8d5be;

  --font-display: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', Menlo, monospace;

  --radius: 8px;                /* gmux's 8px + pills */
  --radius-sm: 5px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --pill: 999px;

  --on-accent: #edefe6;         /* 5.5:1 on forest */
  --primary-hover: #3a7f4f;
  --on-warn: #edefe6;           /* 5.3:1 on clay */

  --on-gold: #edefe6;

  /* gmux extras — the status-dot grammar */
  --ok: #2e6b40;
  --wait: #8a6414;
  --alert: #9c4a2b;
  --idle: #98a093;
  --paper: #fafbf3;
  --rule: #cfd4c2;
}

/* ── gmux · MATERIAL — paper terminal ─────────────────────────────────── */
[data-theme="gmux"] {
  --mat-page:
    radial-gradient(circle at 1px 1px, rgba(26, 32, 26, 0.07) 1px, transparent 1.6px),
    linear-gradient(#f1f4e9, #edefe6 60%);
  background-size: 22px 22px, auto;
}
[data-theme="gmux"] body { background-size: 22px 22px, auto; }
[data-theme="gmux"] .mat-surface {             /* paper sheet, rule header */
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--lime);
  border-radius: 8px;
  box-shadow: 0 8px 22px -10px rgba(26, 32, 26, 0.22);
}
[data-theme="gmux"] .mat-btn {                 /* terminal key: mono, square-ish */
  font-family: var(--font-mono); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.92em;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--lime) 55%, var(--rule));
  box-shadow: 0 2px 0 rgba(26, 32, 26, 0.16);
  transition: box-shadow 0.1s steps(2, end), transform 0.1s steps(2, end);
}
[data-theme="gmux"] .mat-btn:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(26, 32, 26, 0); }
[data-theme="gmux"] .mat-btn--ghost { background: var(--paper); color: var(--lime); box-shadow: inset 0 0 0 1px var(--rule); }
[data-theme="gmux"] .mat-num {                 /* mono tabular, honey highlight */
  font-family: var(--font-mono); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink, var(--text));
  text-shadow: 0 1px 0 rgba(212, 168, 74, 0.35);
}
[data-theme="gmux"] .mat-divider {             /* dashed rule — terminal separator */
  height: 0; border-bottom: 2px dashed var(--rule); background: none;
}
[data-theme="gmux"] .mat-progress { border-radius: 4px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); height: 12px; }
[data-theme="gmux"] .mat-progress i {          /* segmented blocks — no gradient */
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(237, 239, 230, 0.85) 0 2px, transparent 2px 10px),
    var(--lime);
}
[data-theme="gmux"] .mat-chip {                /* status-dot chip — the signature */
  font-family: var(--font-mono); font-size: 0.84em;
  border-radius: var(--pill);
  border: 1px solid var(--rule);
  background: var(--paper);
}
[data-theme="gmux"] .mat-chip::before {        /* the dot every gmux row has */
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--idle); margin-right: 7px; vertical-align: 1px;
}
[data-theme="gmux"] .mat-chip.is-on { border-color: color-mix(in srgb, var(--lime) 60%, var(--rule)); color: var(--lime); }
[data-theme="gmux"] .mat-chip.is-on::before { background: var(--ok); box-shadow: 0 0 8px rgba(46, 107, 64, 0.5); }
[data-theme="gmux"] .mat-input { border-radius: 6px; border: 1px solid var(--rule); font-family: var(--font-mono); background: var(--paper); }
[data-theme="gmux"] .mat-input:focus { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(46, 107, 64, 0.18); outline: none; }
[data-theme="gmux"] .mat-avatar { border-radius: 6px; border: 1px solid var(--rule); box-shadow: 0 1px 0 var(--rule); }
[data-theme="gmux"] .mat-dialog {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--lime);
  border-radius: 10px;
  background: var(--paper);
  box-shadow: 0 14px 44px -14px rgba(26, 32, 26, 0.3);
}
[data-theme="gmux"] .mat-dialog__title { font-family: var(--font-mono); }
[data-theme="gmux"] .mat-badge {
  font-family: var(--font-mono); font-size: 0.8em; letter-spacing: 0.06em;
  border-radius: var(--pill); background: color-mix(in srgb, var(--wait) 14%, var(--paper));
  color: #5c430e; border: 1px solid color-mix(in srgb, var(--wait) 40%, var(--rule));
}
[data-theme="gmux"] .mat-dz {                  /* clay alert row */
  font-family: var(--font-mono); font-weight: 600;
  border-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--alert) 45%, var(--rule));
  border-left: 4px solid var(--alert);
  background: color-mix(in srgb, var(--alert) 8%, var(--paper));
  color: #5e2d1a;
}
/* style-library/theme-volkus.css — the "volkus" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   20 · HUMANIST (volkus) — FROM THE FOUNDER'S SITE volkus.net
   Mined 2026-09-03 from the live "People. Together. Unmasked." site:
   quiet near-black #0d0d0d neutrals, warm brown accent #c27840 ("the
   mixed skin tone"), pale warm #f0c49a, Georgia serif display +
   Courier New mono (system fonts — nothing to vendor), 6px radii, no
   glow, and the eight-step SKIN-TONE RAMP #F5D5B8 → #2C1506 used as
   gradient bars. Human, serious, warm.
   Describe it as: a portrait gallery at dusk — quiet black walls, warm
   brown spotlights, serif names, typewriter captions, and a gradient of
   eight skin tones running through every chart like a signature.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="volkus"] {
  --bg: #0d0d0d;                /* neutral near-black (volkus --bg) */
  --surface: #141414;
  --surface-2: #1a1a1a;
  --line: #2a2a2a;
  --line-bright: #3a3a3a;
  --text: #e8e0d5;              /* warm paper-white */
  --muted: #b3a894;
  --faint: #9a917f;             /* 6.2:1 on black */
  --faint-deco: #6a6355;

  --lime: #c27840;              /* warm brown — the mixed tone — primary */
  --lime-dim: #A0612E;
  --lime-glow: rgba(194, 120, 64, 0.18);
  --coral: #d4552e;             /* effort — the louder warm */
  --coral-glow: rgba(212, 85, 46, 0.16);
  --amber: #d4a24e;
  --sky: #f0c49a;               /* pale warm — info (volkus --accent2) */

  --success: #7ca871;
  --danger: #d95252;             /* 4.9:1 as text on the black walls */
  --urgency: #d4552e;           /* 4.8:1 with near-black ink */

  --energy: #9a7ab8;
  --energy-light: #b79dd6;
  --energy-tint: #262030;

  --dz-bg: #0a0a0a;
  --dz3-surface: #241612;
  --dz-hero: #2c1506;           /* the deepest skin tone */

  --font-display: Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Courier New', 'Lucida Console', monospace;

  --radius: 6px;                /* volkus's quiet 6px */
  --radius-sm: 4px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --pill: 999px;

  --on-accent: #140a04;         /* 5.6:1 on warm brown */
  --primary-hover: #d48a50;
  --on-warn: #140a04;           /* 4.8:1 on the louder warm */

  --on-gold: #140a04;

  /* volkus extras — the skin-tone ramp (site's own palette, in order) */
  --skin-white: #F5D5B8;
  --skin-east-asian: #F0C49A;
  --skin-latino: #D4956A;
  --skin-s-asian: #C27840;
  --skin-mixed: #A0612E;
  --skin-m-east: #7A4118;
  --skin-black-l: #4A2410;
  --skin-black-d: #2C1506;
  --skin-ramp: linear-gradient(90deg, #F5D5B8, #F0C49A, #D4956A, #C27840, #A0612E, #7A4118, #4A2410, #2C1506);
}

/* ── volkus · MATERIAL — the portrait wall ─────────────────────────────── */
[data-theme="volkus"] {
  --mat-page:
    radial-gradient(70% 50% at 50% -10%, rgba(194, 120, 64, 0.07), transparent 60%),
    linear-gradient(#0d0d0d, #0a0a0a 70%);
}
[data-theme="volkus"] .mat-surface {           /* quiet plate, ramp top edge */
  background: linear-gradient(180deg, rgba(240, 196, 154, 0.03), transparent 20%), var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #F5D5B8, #C27840, #2C1506) 1;
  border-image-slice: 1 0 0 0;
  border-radius: 0;              /* border-image ignores radius — the plate is honest */
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.8);
}
[data-theme="volkus"] .mat-btn {               /* understated warm action */
  font-family: var(--font-display); font-style: italic;
  border-radius: 6px;
  border: 1px solid rgba(194, 120, 64, 0.55);
  background: rgba(194, 120, 64, 0.12);
  color: var(--text);
  box-shadow: none;
  transition: background 0.2s ease, color 0.2s ease;
}
[data-theme="volkus"] .mat-btn:hover { background: var(--lime); color: var(--on-accent); }
[data-theme="volkus"] .mat-btn:active { background: var(--lime-dim); color: var(--on-accent); }
[data-theme="volkus"] .mat-btn--ghost { border-color: var(--line-bright); background: transparent; }
[data-theme="volkus"] .mat-num {               /* serif italic — a portrait caption */
  font-family: Georgia, serif; font-style: italic;
  color: var(--sky);
}
[data-theme="volkus"] .mat-divider {           /* the ramp as a hairline — signature */
  height: 2px; border-radius: 2px;
  background: var(--skin-ramp);
  opacity: 0.85;
}
[data-theme="volkus"] .mat-progress { border-radius: 3px; background: #1a1a1a; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="volkus"] .mat-progress i {        /* the ramp fill — every bar is people */
  border-radius: 3px;
  background: var(--skin-ramp);
}
[data-theme="volkus"] .mat-chip {              /* tone chips — each pick a person */
  font-family: var(--font-mono); font-size: 0.84em;
  border-radius: 999px; border: 1px solid var(--line-bright);
  background: transparent;
}
[data-theme="volkus"] .mat-chip:nth-of-type(8n+1).is-on { background: var(--skin-white); color: #3a2a18; border-color: transparent; }
[data-theme="volkus"] .mat-chip:nth-of-type(8n+2).is-on { background: var(--skin-east-asian); color: #3a2414; border-color: transparent; }
[data-theme="volkus"] .mat-chip:nth-of-type(8n+3).is-on { background: var(--skin-latino); color: #2c180a; border-color: transparent; }
[data-theme="volkus"] .mat-chip:nth-of-type(8n+4).is-on { background: var(--skin-s-asian); color: #140a04; border-color: transparent; }
[data-theme="volkus"] .mat-chip:nth-of-type(8n+5).is-on { background: var(--skin-mixed); color: #f5e8dc; border-color: transparent; }
[data-theme="volkus"] .mat-chip:nth-of-type(8n+6).is-on { background: var(--skin-m-east); color: #f5e8dc; border-color: transparent; }
[data-theme="volkus"] .mat-chip:nth-of-type(8n+7).is-on { background: var(--skin-black-l); color: #f5e8dc; border-color: transparent; }
[data-theme="volkus"] .mat-chip:nth-of-type(8n+8).is-on,
[data-theme="volkus"] .mat-chip.is-on { background: var(--skin-black-d); color: #f0c49a; border-color: transparent; }
[data-theme="volkus"] .mat-input { border-radius: 4px; border: 1px solid var(--line-bright); font-family: var(--font-mono); background: #101010; }
[data-theme="volkus"] .mat-avatar { border-radius: 6px; border: 1px solid var(--line-bright); filter: saturate(0.9); }
[data-theme="volkus"] .mat-dialog {
  border: 1px solid var(--line-bright);
  border-top: 3px solid transparent;
  border-image: linear-gradient(90deg, #F5D5B8, #C27840, #2C1506) 1;
  border-image-slice: 1 0 0 0;
  background: var(--surface);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, 0.9);
}
[data-theme="volkus"] .mat-dialog__title { font-family: Georgia, serif; font-style: italic; }
[data-theme="volkus"] .mat-badge { font-family: 'Courier New', monospace; border-radius: 4px; border: 1px solid rgba(240, 196, 154, 0.4); color: var(--sky); }
[data-theme="volkus"] .mat-dz {
  font-family: 'Courier New', monospace;
  border-radius: 4px;
  border: 1px solid rgba(212, 85, 46, 0.5);
  border-left: 4px solid var(--coral);
  background: linear-gradient(90deg, rgba(212, 85, 46, 0.12), transparent 70%), var(--surface);
}
/* style-library/theme-endispute.css — the "endispute" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
   21 · LEGAL BRIEF (endispute) — FROM THE FOUNDER'S SITE endispute.com.au
   Mined 2026-09-03 from the live dispute-resolution product: cream paper
   #f4eedf, ink #0a0a0a, gold #d4a14a (decorative rules — deepened to
   #7d5a0e wherever text needs AA), Cormorant Garamond display + Inter +
   IBM Plex Mono, radius ZERO everywhere (the only sharp-cornered light
   kit), double-rule borders, wide-tracked small caps, ledger spacing.
   Describe it as: a signed legal brief — cream paper, ink hairlines and
   gold double rules, elegant serif headings, typewriter marginalia, and
   not a single rounded corner anywhere. Gravity without heaviness.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="endispute"] {
  --bg: #f4eedf;                /* cream (endispute --color-cream) */
  --surface: #faf6ea;
  --surface-2: #ece4cf;
  --line: #0a0a0a;              /* ink borders — the brief is inked */
  --line-bright: #0a0a0a;
  --text: #0a0a0a;              /* ink */
  --muted: #3a3a33;
  --faint: #4a4436;             /* 8.4:1 on cream */
  --faint-deco: #a39a82;

  --lime: #7d5a0e;              /* deep gold — primary (AA on cream, 5.4:1) */
  --lime-dim: #5e430a;
  --lime-glow: rgba(212, 161, 74, 0.2);
  --coral: #8a2d16;             /* deep red-brown — effort */
  --coral-glow: rgba(138, 45, 22, 0.12);
  --amber: #8a6100;
  --sky: #2e5e6e;               /* slate */

  --success: #2e5e3a;
  --danger: #8a2d16;
  --urgency: #8a2d16;           /* 7.4:1 with cream text */

  --energy: #4a3a6e;
  --energy-light: #6a5a9a;
  --energy-tint: #e9e4f2;

  --dz-bg: #ede5d0;
  --dz3-surface: #e8dbc2;
  --dz-hero: #e2d2b2;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 0px;                /* ZERO. The brief does not round corners. */
  --radius-sm: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --pill: 0px;

  --on-accent: #f4eedf;         /* 5.4:1 on deep gold */
  --primary-hover: #96690f;
  --on-warn: #f4eedf;           /* 7.4:1 on red-brown */

  --on-gold: #f4eedf;

  /* endispute extras */
  --gold-rule: #d4a14a;         /* decorative gold (2.0:1 — rules only, never text) */
  --ink: #0a0a0a;
}

/* ── endispute · MATERIAL — the signed brief ───────────────────────────── */
[data-theme="endispute"] {
  --mat-page:
    repeating-linear-gradient(180deg, transparent 0 31px, rgba(10, 10, 10, 0.055) 31px 32px),
    linear-gradient(#f6f1e4, #f4eedf 70%);
}
[data-theme="endispute"] .mat-surface {        /* certificate plate: ink + gold mat */
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--gold-rule);
}
[data-theme="endispute"] .mat-btn {            /* ink seal block */
  font-family: var(--font-body); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.86em;
  border-radius: 0;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  box-shadow: none;
  transition: box-shadow 0.18s ease, background 0.18s ease;
}
[data-theme="endispute"] .mat-btn:hover { box-shadow: inset 0 -3px 0 var(--gold-rule); }
[data-theme="endispute"] .mat-btn:active { background: #262626; }
[data-theme="endispute"] .mat-btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
[data-theme="endispute"] .mat-num {            /* elegant serif figure */
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  color: var(--ink);
}
[data-theme="endispute"] .mat-divider {        /* the gold double rule */
  height: 3px; border-radius: 0;
  border-top: 3px double var(--gold-rule);
  background: none;
}
[data-theme="endispute"] .mat-progress { border: 1px solid var(--ink); border-radius: 0; background: var(--surface-2); }
[data-theme="endispute"] .mat-progress i { border-radius: 0; background: linear-gradient(90deg, var(--lime), var(--gold-rule)); }
[data-theme="endispute"] .mat-chip {           /* bracketed marginalia */
  font-family: var(--font-mono); font-size: 0.82em; letter-spacing: 0.08em;
  border-radius: 0;
  border: none;
  background: transparent;
  color: var(--ink);
}
[data-theme="endispute"] .mat-chip::before { content: "[ "; color: var(--lime-dim); }
[data-theme="endispute"] .mat-chip::after { content: " ]"; color: var(--lime-dim); }
[data-theme="endispute"] .mat-chip.is-on { color: var(--lime-dim); font-weight: 600; }
[data-theme="endispute"] .mat-input { border-radius: 0; border: none; border-bottom: 1px solid var(--ink); background: transparent; font-family: var(--font-mono); }
[data-theme="endispute"] .mat-input:focus { border-bottom: 2px solid var(--lime); outline: none; }
[data-theme="endispute"] .mat-avatar { border-radius: 0; border: 1px solid var(--ink); box-shadow: 2px 2px 0 var(--gold-rule); }
[data-theme="endispute"] .mat-dialog {         /* the executed document */
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--surface);
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--ink), 0 26px 60px -18px rgba(10, 10, 10, 0.4);
}
[data-theme="endispute"] .mat-dialog__title { font-family: var(--font-display); font-weight: 600; font-size: 1.5em; letter-spacing: 0.02em; }
[data-theme="endispute"] .mat-badge { font-family: var(--font-mono); border-radius: 0; border: 1px solid var(--gold-rule); color: var(--lime-dim); background: rgba(212, 161, 74, 0.1); }
[data-theme="endispute"] .mat-dz {             /* the red-stamp clause */
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.1em;
  border-radius: 0;
  border: 2px solid var(--coral);
  background: transparent;
  color: var(--coral);
  box-shadow: 3px 3px 0 rgba(138, 45, 22, 0.25);
}
/* style-library/theme-steddi.css — the "steddi" material kit.
   Tokens + .mat- primitives only. RWF app bindings (fg / bd classes)
   live in design/themes.css. Name/label/provenance: README.md. */

/* ═══════════════════════════════════════════════════════════════════════
    MINED ◈ · STEDDI — the founder's page
    Source: qalarc.com/projects/steddi-overlap (Design system v3
    "rail measurement blueprint", styles.css?v=32, mined 2026-09-03).
    Palette: red / maroon signal on warm near-black — no green, no gold.
    Art direction: ENGINEERING DRAWING — fine 8px blueprint grid under a
    red 96px major grid that drifts, datum ticks, dimension-line dividers
    with arrowheads, mono annotations, KPI numerals in gradient-clipped
    JetBrains Mono, callout panels with the 2px red datum edge, and the
    655 nm Class-2 LASER that sweeps the page every 11 s.
    Type: Sora (display — the qalarc wordmark face) · Inter · JBMono.
    Describe it as: a rail-welding measurement blueprint at night — warm
    black paper on a fine red grid, mono annotations in the margins, a
    laser sweeping down the page, and every number inked in signal red.
    AA note: the site's #d94a3d stays (coral/gradient ends); the primary
    slot uses its AA-tuned twin #c23b2f so on-accent text clears 4.5:1.
    ═══════════════════════════════════════════════════════════════════════ */

[data-theme="steddi"] {
  /* ── surface ramp — verbatim from the page ─────────────────────────── */
  --bg: #0f0b0d;                 /* the blueprint paper */
  --surface: #191217;            /* panel plum */
  --surface-2: #20161c;          /* pressed */
  --line: #2c1f26;               /* hairline plum */
  --line-bright: #3d2a33;        /* line-2 on the page */
  --text: #f1e8e6;               /* ink */
  --muted: #d9cbc8;              /* ink-2 — 11.7:1 on surface */
  --faint: #a59195;              /* the page's muted — 6.6:1 on bg */
  --faint-deco: #79656b;

  /* ── the signal (primary + effort/heat family) ─────────────────────── */
  --lime: #c23b2f;               /* signal red, AA-tuned (3.7:1 display on bg) */
  --lime-dim: #a93546;           /* accent-grad dark end, verbatim */
  --lime-glow: rgba(217, 74, 61, 0.14);
  --coral: #df5040;              /* steddi red, AA-lifted from #d94a3d (4.7:1 on surface); #d94a3d itself survives in the gradients */
  --coral-glow: rgba(217, 74, 61, 0.14);
  --amber: #ff8f7d;              /* red-bright family, warning */
  --sky: #dba7a0;                /* pale rose — info (no cool hues on this page) */

  --success: #e8a396;            /* "measured & verified" pale rose — 9.4:1 */
  --danger: #ff6a55;             /* red-bright, verbatim — 6.9:1 */
  --urgency: #ff3b2f;            /* THE 655 nm laser — verbatim, 5.5:1 */

  --energy: #a93546;             /* maroon plate (accent-grad start) */
  --energy-light: #f1c9c2;       /* initials on the tint */
  --energy-tint: #2a161b;

  --dz-bg: #170d10;              /* the vignette edge of the blueprint */
  --dz3-surface: #2b1216;
  --dz-hero: #3a1418;

  /* ── type — the page's exact stack ─────────────────────────────────── */
  --font-display: 'Sora', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── geometry — --r:10px, one ease, everything hairline ────────────── */
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --pill: 999px;

  --on-accent: #ffffff;          /* 5.3:1 on signal red */
  --primary-hover: #d94a3d;
  --on-warn: #0f0b0d;            /* 5.4:1 on the laser red */
  --on-gold: var(--on-accent);

  /* the page's two gradients, as reusable ink */
  --grad-accent: linear-gradient(135deg, #a93546, #c23b2f);
  --grad-text: linear-gradient(100deg, #d94a3d, #ff6a55);

  /* BOARD EXTRAS — the measured track */
  --felt: #171017;               /* the blueprint floor */
  --felt-deep: #120c11;
  --felt-line: rgba(217, 74, 61, 0.32);
  --lane: #a93546;
  --lane-paint: rgba(241, 232, 230, 0.5);
  --rail: #2c1f26;
  --rail-edge: rgba(241, 232, 230, 0.35);

  --chip-white: #f1e8e6;
  --chip-red: #d94a3d;
  --chip-blue: #a93546;
  --chip-gold: #ff6a55;

  --card-back-1: #7c2736;        /* maroon */
  --card-back-2: #5a1c28;        /* maroon-deep */
  --card-face: #20161c;

  --pop-shadow: rgba(0, 0, 0, 0.5);
  --speed: 0.6s;
}
/* ── steddi · MATERIAL — engineering drawing + the laser ─────────────── */
[data-theme="steddi"] {
  /* the blueprint page: grain + 8px minor grid + red 96px major grid +
     the vignette that lets text win at the edges (all verbatim ratios) */
  --mat-page:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(rgba(241, 232, 230, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(241, 232, 230, 0.03) 1px, transparent 1px),
    linear-gradient(rgba(217, 74, 61, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(217, 74, 61, 0.06) 1px, transparent 1px),
    radial-gradient(900px 520px at 74% 6%, rgba(255, 59, 47, 0.1), transparent 68%),
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(15, 11, 13, 0.72) 100%),
    linear-gradient(#0f0b0d, #140e11);
}
[data-theme="steddi"] body,
[data-theme="steddi"] .mat-page {
  background-size: 180px 180px, 8px 8px, 8px 8px, 96px 96px, 96px 96px, auto, auto, auto;
  background-blend-mode: overlay, normal, normal, normal, normal, normal, normal, normal;
}
[data-theme="steddi"] body {
  animation: matSteddiDrift 30s linear infinite;      /* the grid drifts */
}
/* THE 655 nm TELL — the Class-2 laser sweeps the whole page every 11 s */
[data-theme="steddi"] body::after {
  content: "";
  position: fixed; left: 0; right: 0; top: 0; height: 2px;
  z-index: 45; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 59, 47, 0) 6%, #ff3b2f 48%, rgba(255, 59, 47, 0.9) 52%, transparent 94%, transparent);
  box-shadow: 0 0 14px rgba(255, 59, 47, 0.5), 0 0 34px rgba(255, 59, 47, 0.2);
  animation: matSteddiLaser 11s linear infinite;
}
@keyframes matSteddiDrift {
  to { background-position: 0 0, 8px 8px, 8px 8px, 96px 96px, 96px 96px, 0 0, 0 0, 0 0; }
}
@keyframes matSteddiLaser {
  0%   { transform: translateY(-4vh); opacity: 0; }
  5%   { opacity: 0.55; }
  90%  { opacity: 0.55; }
  100% { transform: translateY(104vh); opacity: 0; }
}
[data-theme="steddi"] .mat-surface {          /* the diag/tbl panel — hairline plum */
  background: linear-gradient(180deg, rgba(217, 74, 61, 0.04), transparent 26%), var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  transition: border-color 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-theme="steddi"] .mat-surface:hover { border-color: var(--line-bright); }
[data-theme="steddi"] .mat-btn {              /* the red gradient plate + its glow */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--on-accent);
  background: linear-gradient(135deg, #a93546, #c23b2f);
  border: 0;
  border-radius: 8px;
  padding: 11px 20px;
  box-shadow: 0 6px 22px rgba(169, 53, 70, 0.3);
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-theme="steddi"] .mat-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(217, 74, 61, 0.4); }
[data-theme="steddi"] .mat-btn:active { transform: translateY(0); box-shadow: 0 3px 12px rgba(169, 53, 70, 0.3); }
[data-theme="steddi"] .mat-btn--ghost {       /* btn-s — the quiet instrument */
  background: rgba(25, 18, 23, 0.6);
  color: var(--muted);
  border: 1px solid var(--line-bright);
}
[data-theme="steddi"] .mat-btn--ghost:hover { border-color: var(--coral); color: var(--text); }
[data-theme="steddi"] .mat-num {              /* the KPI — gradient-inked mono */
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 44px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(100deg, #d94a3d, #ff6a55);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="steddi"] .mat-divider {          /* DIMENSION LINE — ticks + arrowheads */
  position: relative;
  height: 14px;
  border: 0;
  margin: 14px 0;
  background:
    linear-gradient(#d94a3d, #d94a3d) left center / 1px 12px no-repeat,
    linear-gradient(#d94a3d, #d94a3d) right center / 1px 12px no-repeat,
    linear-gradient(#d94a3d, #d94a3d) center / 100% 1px no-repeat;
  opacity: 0.5;
}
[data-theme="steddi"] .mat-divider::before,
[data-theme="steddi"] .mat-divider::after {
  content: "";
  position: absolute; top: 50%; margin-top: -4px;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
[data-theme="steddi"] .mat-divider::before { left: 1px; border-right: 7px solid #d94a3d; }
[data-theme="steddi"] .mat-divider::after { right: 1px; border-left: 7px solid #d94a3d; }
[data-theme="steddi"] .mat-progress {         /* the scroll-progress beam */
  height: 4px;
  border-radius: 2px;
  background: var(--surface-2);
  overflow: hidden;
}
[data-theme="steddi"] .mat-progress i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #a93546, #ff3b2f);
  box-shadow: 0 0 10px rgba(255, 59, 47, 0.4);
  transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-theme="steddi"] .mat-chip {             /* the .tag — mono, letterspaced */
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ff6a55;
  background: rgba(217, 74, 61, 0.14);
  border: 1px solid var(--line-bright);
  border-radius: 999px;
  padding: 6px 11px;
  transition: border-color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-theme="steddi"] .mat-chip:hover { border-color: var(--coral); color: #ff8f7d; }
[data-theme="steddi"] .mat-chip.is-on { background: var(--lime); color: var(--on-accent); border-color: var(--lime); }
[data-theme="steddi"] .mat-input {            /* the quiet field, red focus ring */
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  background: rgba(25, 18, 23, 0.6);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-theme="steddi"] .mat-input:focus {
  outline: none;
  border-color: #d94a3d;
  box-shadow: 0 0 0 3px rgba(217, 74, 61, 0.14);
}
[data-theme="steddi"] .mat-avatar {           /* the timeline node — halo ring */
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--text);
  background: var(--surface-2);
  border: 2px solid var(--coral);
  box-shadow: 0 0 0 4px rgba(217, 74, 61, 0.12);
}
[data-theme="steddi"] .mat-dialog {           /* the CALLOUT — datum edge + fade */
  background: linear-gradient(90deg, rgba(217, 74, 61, 0.07), transparent 70%), var(--surface);
  border: 1px solid var(--line);
  border-left: 2px solid var(--coral);
  border-radius: 0 10px 10px 0;
  padding: 18px 20px;
  animation: matSteddiMist 1.25s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
[data-theme="steddi"] .mat-dialog__title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; }
@keyframes matSteddiMist {
  from { filter: blur(18px); opacity: 0; }
  to   { filter: blur(0); opacity: 1; }
}
[data-theme="steddi"] .mat-badge {            /* the mono annotation — bp-note */
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #ff6a55;
  background: rgba(15, 11, 13, 0.78);
  border: 1px solid rgba(217, 74, 61, 0.45);
  border-radius: 4px;
  padding: 5px 9px;
}
[data-theme="steddi"] .mat-dz {               /* the laser warning strip */
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff6a55;
  background: rgba(255, 59, 47, 0.12);
  border: 1px solid rgba(255, 59, 47, 0.4);
  border-radius: 6px;
  padding: 10px 12px 10px 26px;
}
[data-theme="steddi"] .mat-dz::before {       /* the blinking LED — scLed */
  content: "";
  position: absolute; left: 10px; top: 50%;
  width: 6px; height: 6px; margin-top: -3px;
  border-radius: 50%;
  background: #ff3b2f;
  box-shadow: 0 0 8px rgba(255, 59, 47, 0.7);
  animation: matSteddiLed 1.2s steps(2, end) infinite;
}
@keyframes matSteddiLed { from { opacity: 0.9; } to { opacity: 0.15; } }
/* ── steddi · reduced motion — the drawing is still; the laser parks ─── */
@media (prefers-reduced-motion: reduce) {
  [data-theme="steddi"] body,
  [data-theme="steddi"] body::after,
  [data-theme="steddi"] .mat-dz::before,
  [data-theme="steddi"] .mat-dialog { animation: none; }
  [data-theme="steddi"] body::after { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED BINDINGS — every kit: CTA/accent re-pointing + a11y floors
   ═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
   PRIMARY-FILL TEXT — components hardcode dark text on primary fills
   (fg-nav__log, CTA pills, pressed chips…). Re-point once, generically:
   every themed page gets AA text on its action colour.
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme] :is(.fg-nav__log,
                 .fg-sheet__cta,
                 .fg-chip[aria-pressed="true"],
                 .fg-chip.is-selected,
                 .fg-status,
                 .fg-dz,
                 .fg-event__tag,
                 .fg-badge--live,
                 .fg-dialog__cta,
                 .fg-pro__cta,
                 .fg-state__cta) {
  color: var(--on-accent);
}
/* warn fills (DZ banners L2/L3) need their own on-colour — light text on
   amber/orange fails in every palette. */
[data-theme] :is(.fg-dz--l2, .fg-dz--l3) { color: var(--on-warn); }
/* shared button primitive (tokens.css hardcodes #0a0b0d + #d6ff45 —
   correct for lime only; themes.css loads after, so this wins) */

[data-theme] .rwf-btn--primary { color: var(--on-accent); }
[data-theme] .rwf-btn--primary:hover {
  background: var(--primary-hover);
  color: var(--on-accent);
  box-shadow: 0 0 24px var(--lime-glow);
}
/* ═══════════════════════════════════════════════════════════════════════
   FIGMA-APP fx-* RE-POINTS — the app's own component layer (app.css)
   hardcodes two literal-gold fills. They sit on the gold axis by design
   but must follow the slot semantics under every theme.
   ═══════════════════════════════════════════════════════════════════════ */
/* ×3 lightning tag (leaderboard rows) — bg-coloured text on a gold fill
   would vanish in sunset (cream-on-gold ≈ 1.6:1); ride the primary slot */

[data-theme] .fx-lt { color: var(--on-accent); background: var(--lime); }
/* power-up status line — gold text on a gold tint; same problem, same fix */

[data-theme] .fx-ltline {
  color: var(--lime);
  background: color-mix(in srgb, var(--lime) 12%, transparent);
  border-color: color-mix(in srgb, var(--lime) 40%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   sunset · BINDINGS
   ═══════════════════════════════════════════════════════════════════════ */
/* ── originals · component feel (carried forward) ─────────────────────── */

[data-theme="sunset"] :is(.fg-battle, .fg-sheet, .fg-lbrow, .fg-count,
                          .fg-dz, .fg-dialog, .fg-feed, .fg-pwr, .fg-event,
                          .fg-state, .fg-pro__table, .fg-plan, .fg-chip,
                          .fg-nav) {
  border-width: 1px;
  border-color: var(--line);
}
[data-theme="sunset"] .fg-nav { border-top-width: 1px; }
[data-theme="sunset"] .fg-battle { border-color: var(--line); }  /* full ink, not color-mix */
[data-theme="sunset"] .fg-lbrow--leader { border-color: var(--lime); }
[data-theme="sunset"] :is(.fg-battle__title, .fg-sheet__title,
                          .fg-count__time, .fg-pwr__name, .fg-event__title,
                          .fg-dz__label) { font-weight: 800; }  /* oversized flat type */
[data-theme="sunset"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                          .fg-pro__cta, .fg-state__cta, .fg-status,
                          .fg-chip[aria-pressed="true"]) {
  box-shadow: none;                            /* FLAT — no shadow exists in sunset */
}
[data-theme="sunset"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                          .fg-pro__cta, .fg-state__cta):active {
  transform: translateY(1px);                 /* pressed flat */
}

/* ═══════════════════════════════════════════════════════════════════════════
   neon · BINDINGS
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="neon"] :is(.fg-battle__title, .fg-sheet__title,
                        .fg-count__time, .fg-pwr__name, .fg-event__title,
                        .fg-dz__label) { font-weight: 700; }
[data-theme="neon"] .fg-nav__log { box-shadow: 0 0 32px var(--lime-glow); }
[data-theme="neon"] :is(.fg-battle, .fg-lbrow--leader, .fg-count--dz1) {
  box-shadow: 0 0 24px var(--lime-glow),
              inset 0 0 0 1px color-mix(in srgb, var(--lime) 18%, transparent);
}
[data-theme="neon"] :is(.fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta) {
  box-shadow: 0 0 20px var(--lime-glow);
}

/* ═══════════════════════════════════════════════════════════════════════════
   forest · BINDINGS
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="forest"] :is(.fg-battle__title, .fg-sheet__title,
                          .fg-count__time, .fg-pwr__name, .fg-event__title,
                          .fg-dz__label) { font-weight: 600; }
[data-theme="forest"] .fg-nav__log { box-shadow: 0 12px 32px rgba(20, 14, 8, 0.45); }
[data-theme="forest"] :is(.fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta) {
  box-shadow: 0 8px 24px rgba(20, 14, 8, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   board · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */
/* ── board · BINDINGS — fg-* library + bd-* board app ─────────────────── */

[data-theme="board"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                         .fg-event__title, .fg-state__title, .fg-dialog__title) {
  letter-spacing: 0.03em;
}
[data-theme="board"] :is(.fg-count__time, .fg-lbrow__pct, .fg-lbrow__ruf,
                         .fg-battle__meta, .fg-event__tag) {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}
[data-theme="board"] :is(.fg-battle__meta, .fg-count__sub, .fg-battle__foot) {
  text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.82em;
}
[data-theme="board"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  background:
    linear-gradient(180deg, rgba(255, 244, 214, 0.05), transparent 30%),
    var(--surface);
  border: 2px solid color-mix(in srgb, var(--lime) 22%, var(--line));
  box-shadow: 0 12px 28px rgba(2, 8, 4, 0.55);
}
[data-theme="board"] .fg-count {               /* scoreboard cabinet */
  background: linear-gradient(180deg, #241a04, #0d0903);
  border: 1px solid rgba(255, 201, 77, 0.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 10px 24px rgba(2, 8, 4, 0.6);
  border-radius: 10px;
}
[data-theme="board"] .fg-count__time { color: #ffe9ad; letter-spacing: 0.04em; }
[data-theme="board"] :is(.fg-battle__bar, .fg-lbrow__bar) {
  border-radius: 5px; background: var(--felt-deep); padding: 2px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
[data-theme="board"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {   /* tape fill */
  border-radius: 3px;
  background:
    repeating-linear-gradient(45deg, rgba(242, 238, 226, 0.55) 0 6px, transparent 6px 12px),
    linear-gradient(90deg, var(--lane), var(--lime));
}
[data-theme="board"] .fg-lbrow { border-left: 3px solid var(--lane); }
[data-theme="board"] .fg-lbrow__rank {        /* lane number plate */
  font-family: var(--font-display);
  background: var(--lane); color: #ffe6c4;
  border-radius: 3px; padding: 3px 7px;
}
[data-theme="board"] .fg-lbrow--leader {
  border-left-color: var(--lime);
  background: linear-gradient(90deg, rgba(255, 201, 77, 0.09), transparent 60%), var(--surface);
}
[data-theme="board"] .fg-battle__head {        /* moving lane paint strip */
  background: repeating-linear-gradient(95deg, var(--lane-paint) 0 26px, rgba(255, 255, 255, 0.05) 26px 34px);
  height: 5px; border-radius: 3px;
}
[data-theme="board"] .fg-status {
  font-family: var(--font-display); letter-spacing: 0.1em; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.14) 0 10px, transparent 10px 20px), var(--lane);
  border-radius: 4px;
}
[data-theme="board"] .fg-status::before { content: "●"; margin-right: 6px; animation: matLampPulse 1.6s infinite; }
[data-theme="board"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                         .fg-pro__cta, .fg-state__cta) {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: 6px; border: 2px solid rgba(4, 10, 6, 0.85);
  box-shadow: 0 7px 0 rgba(4, 10, 6, 0.85);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
[data-theme="board"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                         .fg-pro__cta, .fg-state__cta):active {
  transform: translateY(6px); box-shadow: 0 1px 0 rgba(4, 10, 6, 0.85);
}
[data-theme="board"] .pop-btn {
  border: 2px solid #241a04;
  box-shadow: 0 6px 0 #241a04;
  border-radius: 6px;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em;
}
[data-theme="board"] .pop-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #241a04; }
[data-theme="board"] .fg-dz {
  font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase;
  background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.14) 0 10px, transparent 10px 20px), var(--urgency);
}
[data-theme="board"] .bd-table {               /* the stadium: floodlit infield */
  background:
    radial-gradient(75% 60% at 50% 0%, rgba(255, 244, 214, 0.13), transparent 60%),
    repeating-linear-gradient(105deg, rgba(255, 255, 255, 0.02) 0 3px, transparent 3px 16px),
    var(--felt);
  border: 3px solid var(--rail);
  box-shadow: inset 0 0 0 2px var(--rail-edge), inset 0 -30px 60px rgba(2, 8, 4, 0.55);
}
[data-theme="board"] .bd-lane { border: 2px dashed var(--lane-paint); }
[data-theme="board"] .bd-lane:nth-child(even) { border-color: rgba(255, 255, 255, 0.18); }
[data-theme="board"] .bd-finish {              /* photo-finish tape stretched */
  background: repeating-linear-gradient(45deg, #f2eee2 0 8px, #1a1006 8px 16px);
  box-shadow: 0 3px 10px rgba(2, 8, 4, 0.6);
}
[data-theme="board"] .bd-pot {                 /* the pot on a trophy pedestal */
  background:
    radial-gradient(90% 70% at 50% 0%, #ffe9ad, #ffc94d 45%, #8a6a1d 100%);
  border: 2px solid #241a04; border-radius: 14px;
  box-shadow: 0 10px 0 #4d390e, 0 18px 30px rgba(2, 8, 4, 0.55),
              inset 0 2px 0 rgba(255, 248, 220, 0.6);
}
[data-theme="board"] .bd-pot::after {          /* engraved ring */
  content: ""; position: absolute; inset: 5px;
  border-radius: 10px;
  border: 1px solid rgba(36, 26, 4, 0.4);
}
[data-theme="board"] .bd-pot__label { color: var(--lime); }
[data-theme="board"] .bd-card__face--front {   /* felt pinstripe card face */
  background: repeating-linear-gradient(90deg, rgba(238, 244, 232, 0.05) 0 1px, transparent 1px 7px), var(--card-face);
  border: 1px solid rgba(255, 201, 77, 0.3);
  box-shadow: 0 6px 14px rgba(2, 8, 4, 0.5);
}
[data-theme="board"] .bd-prow { box-shadow: 0 3px 0 rgba(4, 10, 6, 0.8); border-left: 3px solid var(--lane); }
[data-theme="board"] .bd-prow__pos { font-family: var(--font-display); background: var(--lane); color: #ffe6c4; border-radius: 3px; }
[data-theme="board"] .bd-top { border-bottom: 2px solid color-mix(in srgb, var(--lime) 35%, var(--line)); }
[data-theme="board"] .fg-battle__bar { position: relative; overflow: hidden; }
[data-theme="board"] .fg-battle__bar::after {  /* stadium lamp sheen */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 244, 214, 0.4) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: matFinishSheen 2.8s ease-in-out infinite;
}
[data-theme="board"] .bd-pot.is-bump { animation: matTrophyBump 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

/* ═══════════════════════════════════════════════════════════════════════════
   mycelial · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */
/* ── mycelial · BINDINGS ──────────────────────────────────────────────── */

[data-theme="mycelial"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                            .fg-event__title, .fg-dialog__title, .fg-state__title) {
  font-weight: 500; letter-spacing: 0.01em;
}
[data-theme="mycelial"] :is(.fg-count__time) { font-weight: 600; }
[data-theme="mycelial"] :is(.fg-battle, .fg-dialog, .fg-state) {
  border-radius: 42px 30px 46px 34px / 34px 46px 30px 42px;
  border-color: rgba(79, 227, 193, 0.22);
  box-shadow: 0 16px 36px rgba(4, 12, 9, 0.55), inset 0 0 30px rgba(79, 227, 193, 0.04);
}
[data-theme="mycelial"] .fg-count {
  background: radial-gradient(120% 120% at 50% 0%, rgba(79, 227, 193, 0.1), transparent 60%), var(--surface);
  border: 1px solid rgba(79, 227, 193, 0.3);
  border-radius: 34px 24px 36px 26px / 26px 36px 24px 34px;
}
[data-theme="mycelial"] .fg-sheet { border-radius: 40px 30px 44px 34px / 34px 44px 30px 40px; }
[data-theme="mycelial"] .fg-stack .fg-lbrow:nth-child(odd)  { border-radius: 26px 38px 30px 42px / 40px 28px 44px 30px; }
[data-theme="mycelial"] .fg-stack .fg-lbrow:nth-child(even) { border-radius: 38px 26px 42px 30px / 28px 40px 30px 44px; }
[data-theme="mycelial"] .fg-event { border-radius: 32px 22px 34px 24px / 24px 34px 22px 32px; }
[data-theme="mycelial"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 999px;
  background: repeating-radial-gradient(circle at 0% 50%, var(--lime) 0 6px, var(--lime-dim) 6px 12px);
  box-shadow: 0 0 12px rgba(79, 227, 193, 0.28);
}
[data-theme="mycelial"] .fg-chip { border-radius: 999px; border-color: rgba(79, 227, 193, 0.25); }
[data-theme="mycelial"] .fg-chip[aria-pressed="true"],
[data-theme="mycelial"] .fg-chip.is-selected {
  border-radius: 30px 30px 16px 16px;
  background: radial-gradient(120% 150% at 50% -40%, #d8fff2 8%, var(--lime) 42%, var(--lime-dim) 88%);
  box-shadow: inset 0 -5px 8px rgba(9, 40, 30, 0.4), 0 6px 14px rgba(19, 84, 66, 0.35);
}
[data-theme="mycelial"] .fg-lbrow--leader {
  border-color: rgba(79, 227, 193, 0.4);
  background: radial-gradient(90% 120% at 20% 0%, rgba(79, 227, 193, 0.1), transparent 60%), var(--surface);
}
[data-theme="mycelial"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                            .fg-pro__cta, .fg-state__cta) {
  border-radius: 30px 30px 16px 16px;
  background: radial-gradient(120% 150% at 50% -40%, #d8fff2 8%, var(--lime) 42%, var(--lime-dim) 88%);
  box-shadow: inset 0 -7px 10px rgba(9, 40, 30, 0.45), 0 10px 22px rgba(19, 84, 66, 0.4);
}
[data-theme="mycelial"] .pop-btn {
  border-radius: 28px 28px 15px 15px;
  box-shadow: inset 0 -6px 9px rgba(9, 40, 30, 0.42), 0 8px 18px rgba(19, 84, 66, 0.38);
}
[data-theme="mycelial"] .pop-btn:active, [data-theme="mycelial"] .pop-btn.is-pressed {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 -4px 8px rgba(9, 40, 30, 0.5);
}
[data-theme="mycelial"] .fg-feed { border-left: 2px solid rgba(79, 227, 193, 0.35); }
[data-theme="mycelial"] .fg-feed--power { border-left-color: rgba(201, 161, 255, 0.3); }
[data-theme="mycelial"] .bd-table {            /* moss floor + glow veins */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cg fill='none' stroke='%234fe3c1' stroke-opacity='0.2' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M10 290 Q60 240 70 190 Q80 140 60 100 M70 190 Q120 170 160 190 Q210 215 240 180 M160 190 Q170 130 210 110 Q240 95 250 60 M60 100 Q100 80 130 90 M240 180 Q270 150 290 140 M130 90 Q150 60 140 30'/%3E%3C/g%3E%3Cg fill='%234fe3c1'%3E%3Ccircle cx='60' cy='100' r='2.4' opacity='0.8'/%3E%3Ccircle cx='250' cy='60' r='2' opacity='0.7'/%3E%3Ccircle cx='140' cy='30' r='1.8' opacity='0.65'/%3E%3Ccircle cx='290' cy='140' r='2.2' opacity='0.75'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 300px 300px,
    radial-gradient(80% 70% at 50% 110%, rgba(79, 227, 193, 0.12), transparent 65%),
    var(--felt);
  border: 1px solid rgba(79, 227, 193, 0.28);
  box-shadow: inset 0 0 44px rgba(4, 16, 12, 0.7), 0 0 30px rgba(79, 227, 193, 0.08);
}
[data-theme="mycelial"] .bd-lane { border: 1.5px dashed rgba(79, 227, 193, 0.3); border-radius: 50%; }
[data-theme="mycelial"] .bd-lane:nth-child(even) { border-color: rgba(79, 227, 193, 0.16); }
[data-theme="mycelial"] .bd-finish {
  background: repeating-linear-gradient(90deg, rgba(79, 227, 193, 0.5) 0 8px, transparent 8px 16px);
}
[data-theme="mycelial"] .bd-pot {              /* the mycelium core */
  background:
    radial-gradient(circle at 35% 30%, #d8fff2 0%, rgba(79, 227, 193, 0.7) 30%, rgba(23, 84, 66, 0.85) 100%);
  border-radius: 46% 54% 50% 50% / 52% 48% 52% 48%;
  border: 1px solid rgba(79, 227, 193, 0.5);
  box-shadow: 0 0 34px rgba(79, 227, 193, 0.3), inset 0 0 20px rgba(4, 16, 12, 0.4);
  animation: matBreathe 6s ease-in-out infinite;
}
[data-theme="mycelial"] .bd-pot__label { color: #8ef0da; }
[data-theme="mycelial"] .bd-token--you .bd-token__chip { outline-color: rgba(79, 227, 193, 0.7); }
[data-theme="mycelial"] .bd-card__face--front {
  background: radial-gradient(130% 100% at 30% 0%, rgba(79, 227, 193, 0.12), transparent 55%), var(--card-face);
  border-radius: 24px 16px 26px 18px / 18px 26px 16px 24px;
  border: 1px solid rgba(79, 227, 193, 0.3);
}
[data-theme="mycelial"] .bd-card__face--back { border-radius: 18px 26px 20px 28px / 26px 18px 28px 20px; }
[data-theme="mycelial"] .bd-prow { border-radius: 18px 24px 18px 24px / 24px 18px 24px 18px; }
[data-theme="mycelial"] .bd-feed__row { border-radius: 12px 0 0 12px; }
[data-theme="mycelial"] .bd-pot::after {       /* drifting spores over the core */
  content: ""; position: absolute; inset: -14px; pointer-events: none;
  background:
    radial-gradient(circle 2px at 20% 30%, rgba(216, 255, 242, 0.8), transparent 60%),
    radial-gradient(circle 1.5px at 70% 20%, rgba(216, 255, 242, 0.6), transparent 60%),
    radial-gradient(circle 2.2px at 55% 75%, rgba(216, 255, 242, 0.7), transparent 60%),
    radial-gradient(circle 1.4px at 85% 60%, rgba(216, 255, 242, 0.5), transparent 60%);
  animation: matSporeDrift 8s ease-in-out infinite;
}
[data-theme="mycelial"] .bd-card--deal { animation: matGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   techy · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */
/* ── techy · BINDINGS ─────────────────────────────────────────────────── */

[data-theme="techy"] :is(.fg-battle__meta, .fg-count__sub, .fg-event__sub,
                         .fg-battle__foot, .fg-state__sub) {
  font-family: var(--font-mono); text-transform: uppercase;
}
[data-theme="techy"] :is(.fg-battle__meta, .fg-event__sub)::before { content: "// "; opacity: 0.6; }
[data-theme="techy"] :is(.fg-battle__title, .fg-sheet__title, .fg-event__title) {
  letter-spacing: 0.04em;
}
[data-theme="techy"] .fg-count__time::before { content: "T− "; color: var(--lime); opacity: 0.8; }
[data-theme="techy"] :is(.fg-battle, .fg-sheet, .fg-count, .fg-dialog, .fg-state, .fg-pro) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 12%, rgba(0, 0, 0, 0.14) 94%),
    var(--surface);
  border: 1px solid rgba(63, 212, 255, 0.4);
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 22px rgba(0, 4, 8, 0.5);
}
[data-theme="techy"] :is(.fg-battle, .fg-count, .fg-dialog)::before,
[data-theme="techy"] :is(.fg-battle, .fg-count, .fg-dialog)::after {
  content: ""; position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #9fc4d8, #33475a 60%, #101a22);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
}
[data-theme="techy"] :is(.fg-battle, .fg-count, .fg-dialog)::before { top: 6px; left: 6px; }
[data-theme="techy"] :is(.fg-battle, .fg-count, .fg-dialog)::after { top: 6px; right: 6px; }
[data-theme="techy"] .fg-battle { overflow: hidden; position: relative; }   /* clip the sweep */
[data-theme="techy"] .fg-battle::after {       /* CRT scan sweep (replaces rivet TR) */
  content: ""; position: absolute; inset: auto 0 -40% 0; height: 60%;
  background: linear-gradient(180deg, transparent, rgba(63, 212, 255, 0.05), transparent);
  animation: matScanSweep 5.5s linear infinite;
}
[data-theme="techy"] :is(.fg-battle__bar, .fg-lbrow__bar) {
  border-radius: 2px; background: repeating-linear-gradient(90deg, rgba(63, 212, 255, 0.1) 0 9px, transparent 9px 12px), #04090c;
  border: 1px solid rgba(63, 212, 255, 0.28);
}
[data-theme="techy"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 1px;
  background: repeating-linear-gradient(90deg, var(--lime) 0 9px, rgba(10, 16, 20, 0.9) 9px 12px);
}
[data-theme="techy"] .fg-lbrow {
  font-family: var(--font-mono);
  border-left: 2px solid rgba(63, 212, 255, 0.4);
}
[data-theme="techy"] .fg-lbrow__pct { font-family: var(--font-mono); }
[data-theme="techy"] .fg-lbrow--leader { border-left-color: var(--lime); }
[data-theme="techy"] .fg-lbrow::after {        /* telemetry spark */
  content: "▁▃▅▃▇▅▇"; font-size: 9px; letter-spacing: -1px;
  color: rgba(63, 212, 255, 0.55);
}
[data-theme="techy"] .fg-status {
  font-family: var(--font-mono); letter-spacing: 0.12em;
  border-radius: 2px; background: rgba(63, 212, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(63, 212, 255, 0.45);
}
[data-theme="techy"] .fg-status::before { content: "▮"; margin-right: 6px; animation: matLampPulse 1.1s steps(2) infinite; }
[data-theme="techy"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                         .fg-pro__cta, .fg-state__cta) {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
  border-radius: 2px;
  background: linear-gradient(180deg, #2b3c48, #17242e);
  border: 1px solid rgba(63, 212, 255, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), inset 0 -2px 3px rgba(0, 0, 0, 0.5);
}
[data-theme="techy"] .pop-btn {
  border-radius: 2px; border: 1px solid rgba(63, 212, 255, 0.5);
  font-family: var(--font-mono); letter-spacing: 0.06em;
  background: linear-gradient(180deg, #2b3c48, #17242e);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 4px 0 #060b0f;
}
[data-theme="techy"] .pop-btn:active { box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7); }
[data-theme="techy"] .fg-dz {
  font-family: var(--font-mono); letter-spacing: 0.1em;
  background:
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.28) 0 12px, transparent 12px 24px),
    linear-gradient(180deg, var(--urgency), var(--dz3-surface));
  border: 1px solid rgba(255, 140, 66, 0.6);
}
[data-theme="techy"] .bd-table {               /* the plotting table */
  background:
    repeating-linear-gradient(0deg, rgba(63, 212, 255, 0.07) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, rgba(63, 212, 255, 0.07) 0 1px, transparent 1px 26px),
    radial-gradient(80% 70% at 50% 30%, rgba(63, 212, 255, 0.06), transparent 60%),
    var(--felt);
  border: 1px solid rgba(63, 212, 255, 0.4);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.4), inset 0 0 40px rgba(0, 4, 8, 0.6);
}
[data-theme="techy"] .bd-lane { border: 1px dashed rgba(63, 212, 255, 0.35); border-radius: 50%; }
[data-theme="techy"] .bd-lane:nth-child(even) { border-style: dotted; border-color: rgba(63, 212, 255, 0.18); }
[data-theme="techy"] .bd-finish {
  background: repeating-linear-gradient(90deg, rgba(63, 212, 255, 0.55) 0 3px, transparent 3px 9px);
}
[data-theme="techy"] .bd-pot {                 /* data core + crosshair */
  background:
    linear-gradient(rgba(4, 9, 12, 0.25), rgba(4, 9, 12, 0.25)),
    repeating-conic-gradient(rgba(63, 212, 255, 0.14) 0 30deg, rgba(4, 9, 12, 0.1) 30deg 60deg),
    radial-gradient(circle, #0e1a22, #060b0f);
  border: 1px solid rgba(63, 212, 255, 0.55);
  border-radius: 4px;
  box-shadow: inset 0 0 18px rgba(63, 212, 255, 0.14), 0 0 22px rgba(63, 212, 255, 0.1);
}
[data-theme="techy"] .bd-pot__label { color: var(--lime); }
[data-theme="techy"] .bd-clock__time { color: var(--lime); font-family: var(--font-mono); }
[data-theme="techy"] .bd-card__face--front { border-radius: 5px; border-width: 1px; border-color: rgba(63, 212, 255, 0.4); background: linear-gradient(180deg, #10202a, #0a141b); }
[data-theme="techy"] .bd-card__face--back { border-radius: 5px; background: repeating-linear-gradient(45deg, rgba(63, 212, 255, 0.12) 0 6px, transparent 6px 12px), #060b0f; }
[data-theme="techy"] .bd-prow {
  font-family: var(--font-mono);
  border: 1px solid rgba(63, 212, 255, 0.25);
  border-left: 2px solid rgba(63, 212, 255, 0.45);
  background: rgba(4, 9, 12, 0.4);
}
[data-theme="techy"] .bd-prow--you { border-left-color: var(--lime); }
[data-theme="techy"] .bd-top { border-bottom: 1px solid var(--line-bright); box-shadow: 0 1px 0 rgba(63, 212, 255, 0.08); }
[data-theme="techy"] :is(.fg-battle, .fg-count, .fg-sheet, .fg-event) { animation: matBoot 0.45s both; }
[data-theme="techy"] .fg-count { animation-delay: 0.08s; }
[data-theme="techy"] .fg-stack .fg-lbrow:nth-child(1) { animation: matBoot 0.45s 0.12s both; }
[data-theme="techy"] .fg-stack .fg-lbrow:nth-child(2) { animation: matBoot 0.45s 0.18s both; }
[data-theme="techy"] .fg-stack .fg-lbrow:nth-child(3) { animation: matBoot 0.45s 0.24s both; }
[data-theme="techy"] .fg-stack .fg-lbrow:nth-child(4) { animation: matBoot 0.45s 0.30s both; }

/* ═══════════════════════════════════════════════════════════════════════════
   track · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */
/* ── track · BINDINGS ─────────────────────────────────────────────────── */

[data-theme="track"] :is(.fg-count__time, .fg-lbrow__pct, .fg-lbrow__ruf,
                         .fg-battle__meta, .fg-event__tag) {
  font-family: var(--font-display); font-variant-numeric: tabular-nums;
}
[data-theme="track"] :is(.fg-battle__title, .fg-sheet__title, .fg-event__title,
                         .fg-state__title, .fg-dialog__title, .fg-pwr__name) {
  text-transform: uppercase; letter-spacing: 0.02em;
}
[data-theme="track"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  border: 1px solid rgba(255, 250, 240, 0.3);
  border-top: 3px solid var(--text);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 20%), var(--surface);
  box-shadow: 0 6px 16px rgba(20, 6, 7, 0.45);
}
[data-theme="track"] .fg-battle__head {        /* moving lane paint */
  background: repeating-linear-gradient(95deg, var(--lane-paint) 0 26px, rgba(255, 255, 255, 0.08) 26px 34px);
  height: 5px;
}
[data-theme="track"] .fg-count {
  background: linear-gradient(180deg, #fdf5ef, #f3e6d8);
  color: #2b1012;
  border: 2px solid var(--text);
  border-radius: 8px;
}
[data-theme="track"] .fg-count__sub { color: #6d4a3a; }
[data-theme="track"] .fg-count__time { font-size: 1.9em; color: #2b1012; }   /* BIG clock */
[data-theme="track"] :is(.fg-battle__bar, .fg-lbrow__bar) { border-radius: 4px; background: rgba(43, 16, 18, 0.75); padding: 2px; border: 1px solid rgba(255, 250, 240, 0.3); }
[data-theme="track"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(43, 16, 18, 0.22) 0 8px, transparent 8px 17px), linear-gradient(90deg, var(--lime), #e0702f);
}
[data-theme="track"] .fg-lbrow {               /* a painted lane */
  border-bottom: 2px solid rgba(255, 250, 240, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 60%);
}
[data-theme="track"] .fg-lbrow__rank {         /* the race bib */
  font-family: var(--font-display);
  background: #fdf5ef; color: #2b1012;
  border: 1.5px solid #2b1012; border-radius: 4px;
  padding: 2px 7px;
  box-shadow: 2px 2px 0 rgba(43, 16, 18, 0.6);
}
[data-theme="track"] .fg-lbrow--leader { background: linear-gradient(90deg, rgba(255, 201, 77, 0.14), transparent 55%); }
[data-theme="track"] .fg-lbrow--leader .fg-lbrow__rank { background: var(--lime); }
[data-theme="track"] .fg-event { border-left: 4px solid var(--text); background: linear-gradient(90deg, rgba(255, 250, 240, 0.06), transparent 70%); }
[data-theme="track"] .fg-event--storm { border-left-color: var(--energy); }
[data-theme="track"] .fg-event--charity { border-left-color: var(--success); }
[data-theme="track"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                         .fg-pro__cta, .fg-state__cta) {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.05em;
  border: 2px solid var(--text);
  border-radius: 8px;
  box-shadow: 0 4px 0 rgba(43, 16, 18, 0.9);
}
[data-theme="track"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                         .fg-pro__cta, .fg-state__cta):active {
  transform: translateY(4px); box-shadow: 0 0 0 rgba(43, 16, 18, 0.9);
}
[data-theme="track"] .pop-btn { border: 2px solid #2b1012; box-shadow: 0 4px 0 #2b1012; border-radius: 8px; font-family: var(--font-display); text-transform: uppercase; }
[data-theme="track"] .fg-status {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em;
  background: var(--text); color: #2b1012; border-radius: 4px;
}
[data-theme="track"] .bd-table {               /* the running track */
  background:
    repeating-linear-gradient(0deg, transparent 0 44px, rgba(255, 250, 240, 0.16) 44px 46px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.22 0 0 0 0 0.14 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 180px 180px,
    linear-gradient(#a2402f, #8e2f26);
  border: 4px solid #fdf5ef;
  box-shadow: inset 0 0 0 2px rgba(43, 16, 18, 0.5), inset 0 0 50px rgba(43, 16, 18, 0.5), 0 8px 20px rgba(20, 6, 7, 0.5);
}
[data-theme="track"] .bd-track { counter-reset: bdLane; }
[data-theme="track"] .bd-lane { border: 1.5px solid rgba(253, 245, 239, 0.4); }
[data-theme="track"] .bd-lane:nth-child(even) { border-color: rgba(255, 255, 255, 0.22); }
[data-theme="track"] .bd-lane::before {        /* lane number at the top straight */
  counter-increment: bdLane;
  content: counter(bdLane);
  position: absolute; top: 8%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-size: 13px;
  color: rgba(253, 245, 239, 0.65);
}
[data-theme="track"] .bd-finish {
  background: repeating-linear-gradient(90deg, #fdf5ef 0 10px, #2b1012 10px 20px);
}
[data-theme="track"] .bd-pot {                 /* the finish clock */
  background: #fdf5ef;
  border: 3px solid #2b1012; border-radius: 8px;
  box-shadow: 5px 5px 0 rgba(43, 16, 18, 0.8);
}
[data-theme="track"] .bd-pot__total { color: #8e2f26; font-family: var(--font-display); }
[data-theme="track"] .bd-pot__label { color: #a2402f; font-family: var(--font-display); letter-spacing: 0.1em; }
[data-theme="track"] .bd-pot__pts { color: #8e2f26; }
[data-theme="track"] .bd-pot .bd-stack__n { background: #fdf5ef; color: #2b1012; }
[data-theme="track"] .bd-top { border-bottom: 3px solid var(--text); }
[data-theme="track"] .bd-prow__pos { font-family: var(--font-display); background: #fdf5ef; color: #2b1012; border-radius: 4px; border: 1.5px solid #2b1012; }
[data-theme="track"] .bd-prow { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
[data-theme="track"] .bd-card__face--front {
  background: linear-gradient(180deg, #fdf5ef, #f3e6d8);
  border: 2px solid #2b1012; border-radius: 8px;
  box-shadow: 3px 3px 0 rgba(43, 16, 18, 0.7);
}
[data-theme="track"] .bd-card__name { color: #2b1012; }
[data-theme="track"] .bd-card__fx { color: #6d4a3a; }
[data-theme="track"] .bd-card__cost { color: #8e2f26; }
[data-theme="track"] .bd-card__rar { color: #fdf5ef; background: #2b1012; }
[data-theme="track"] .bd-card--deal { animation: matTrackDeal 0.55s cubic-bezier(0.2, 1.2, 0.3, 1) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   cardtable · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */
/* ── cardtable · BINDINGS ─────────────────────────────────────────────── */

[data-theme="cardtable"] :is(.fg-battle__title, .fg-sheet__title,
                             .fg-dialog__title, .fg-state__title) {
  font-family: Georgia, 'Times New Roman', serif;
  font-variant: small-caps; letter-spacing: 0.1em;
}
[data-theme="cardtable"] .fg-battle__title::after {   /* brass flourish */
  content: " — · —";
  color: var(--lime); font-variant: normal; letter-spacing: 0.2em; font-size: 0.5em;
  display: block; margin-top: 2px; opacity: 0.8;
}
[data-theme="cardtable"] :is(.fg-pwr__name) { font-style: italic; }
[data-theme="cardtable"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  background: radial-gradient(130% 100% at 50% -20%, rgba(255, 208, 120, 0.07), transparent 55%), var(--surface);
  border: 1px solid color-mix(in srgb, var(--lime) 30%, var(--line));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 10px 26px rgba(8, 4, 6, 0.55);
  border-radius: 10px;
}
[data-theme="cardtable"] .fg-count {
  background: radial-gradient(120% 100% at 50% -20%, rgba(255, 208, 120, 0.1), transparent 60%), var(--surface-2);
  border: 1px solid color-mix(in srgb, var(--lime) 40%, var(--line));
  border-radius: 12px;
}
[data-theme="cardtable"] .fg-lbrow { border-left: 2px solid color-mix(in srgb, var(--lime) 40%, var(--line)); }
[data-theme="cardtable"] .fg-lbrow__rank { color: var(--lime); font-family: Georgia, serif; font-style: italic; }
[data-theme="cardtable"] .fg-lbrow--leader {
  border-left-color: var(--lime);
  background: radial-gradient(80% 140% at 0% 50%, rgba(255, 208, 120, 0.08), transparent 60%), var(--surface);
}
[data-theme="cardtable"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, rgba(8, 4, 6, 0.3) 0 2px, transparent 2px 8px),
    linear-gradient(180deg, color-mix(in srgb, var(--lime) 100%, #fff6e6 20%), var(--lime));
}
[data-theme="cardtable"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                             .fg-pro__cta, .fg-state__cta) {
  font-family: Georgia, serif; font-variant: small-caps; letter-spacing: 0.12em;
  border-radius: 999px;
  border: 4px dashed color-mix(in srgb, #3d2a10 70%, var(--lime));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--lime) 100%, #fff6e6 18%), 0 5px 0 #4d3210;
}
[data-theme="cardtable"] :is(.fg-chip, .fg-chip--exercise, .fg-chip--lg) {
  font-family: Georgia, serif; font-variant: small-caps; letter-spacing: 0.08em;
  border-radius: 999px;
}
[data-theme="cardtable"] .fg-chip[aria-pressed="true"],
[data-theme="cardtable"] .fg-chip.is-selected { border-style: dashed; }
[data-theme="cardtable"] .pop-btn {
  border-radius: 999px;
  border: 4px dashed color-mix(in srgb, #3d2a10 70%, var(--lime));
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--lime) 100%, #fff6e6 18%), 0 5px 0 #4d3210;
  font-family: Georgia, serif; font-variant: small-caps; letter-spacing: 0.1em;
}
[data-theme="cardtable"] .pop-btn--ghost { border-style: solid; border-width: 2px; box-shadow: 0 5px 0 rgba(8, 4, 6, 0.55); }
[data-theme="cardtable"] .fg-status {
  font-family: Georgia, serif; font-variant: small-caps; letter-spacing: 0.2em;
  border-radius: 999px; background: linear-gradient(180deg, var(--lime), var(--lime-dim));
}
[data-theme="cardtable"] .bd-table {           /* the club table */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55 0.14' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.05 0 0 0 0 0.12 0 0 0 0 0.07 0 0 0 0.25 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23f)'/%3E%3C/svg%3E") 0 0 / 200px 200px,
    radial-gradient(80% 70% at 50% 25%, rgba(255, 208, 120, 0.13), transparent 60%),
    var(--felt);
  border: 3px solid #3d2a10;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lime) 45%, transparent), inset 0 0 60px rgba(8, 4, 6, 0.75), 0 14px 30px rgba(8, 4, 6, 0.6);
}
[data-theme="cardtable"] .bd-lane { border: 1.5px solid color-mix(in srgb, var(--lime) 30%, transparent); border-radius: 50%; }
[data-theme="cardtable"] .bd-lane:nth-child(even) { border-style: dashed; }
[data-theme="cardtable"] .bd-finish { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--lime) 60%, transparent) 0 2px, transparent 2px 10px); }
[data-theme="cardtable"] .bd-pot {             /* brass plate */
  background: radial-gradient(120% 120% at 30% 20%, #ffe9c2, var(--lime) 45%, #8a6a1d 100%);
  border: 2px solid #3d2a10; border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 246, 230, 0.5), inset 0 -3px 6px rgba(61, 42, 16, 0.6), 0 8px 18px rgba(8, 4, 6, 0.6);
}
[data-theme="cardtable"] .bd-pot__label { font-variant: small-caps; letter-spacing: 0.34em; color: var(--lime); }
[data-theme="cardtable"] .bd-card__face--front {   /* cream letterpress card */
  background: linear-gradient(180deg, #fff6e6, #f7e8d2);
  border: 1px solid #caa46a; border-radius: 10px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 1px 3px rgba(61, 42, 16, 0.25), 0 6px 12px rgba(8, 4, 6, 0.5);
}
[data-theme="cardtable"] .bd-card__name { color: #2a151c; font-family: Georgia, serif; }
[data-theme="cardtable"] .bd-card__fx { color: #5d4a53; font-style: italic; }
[data-theme="cardtable"] .bd-card__cost { color: #6a4a1c; font-family: Georgia, serif; }
[data-theme="cardtable"] .bd-card__rar { color: #fff6e6; }
[data-theme="cardtable"] .bd-card__face--back {
  background: repeating-linear-gradient(45deg, rgba(255, 208, 120, 0.14) 0 5px, transparent 5px 10px), var(--card-back-1);
  border: 1px solid #3d2a10; border-radius: 10px;
}
[data-theme="cardtable"] .bd-prow { border-radius: 10px; box-shadow: 0 3px 0 rgba(8, 4, 6, 0.5); }
[data-theme="cardtable"] .bd-card--deal { animation: matFeltDeal 0.6s cubic-bezier(0.25, 1.1, 0.35, 1) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   caveman · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */
/* ── caveman · BINDINGS ──────────────────────────────────────────────── */

[data-theme="caveman"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                           .fg-event__title, .fg-dialog__title, .fg-state__title) {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  letter-spacing: 0.01em; text-shadow: 2px 2px 0 rgba(8, 4, 1, 0.5);
}
[data-theme="caveman"] .fg-count__time {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  text-shadow: 3px 3px 0 rgba(8, 4, 1, 0.55);
}
[data-theme="caveman"] .fg-event__title::before { content: "▲ "; color: var(--coral); }
[data-theme="caveman"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  background:
    linear-gradient(180deg, rgba(236, 224, 192, 0.04), transparent 28%, rgba(0, 0, 0, 0.2) 96%),
    var(--surface);
  border: 3px solid rgba(236, 224, 192, 0.2);
  border-radius: 26px 34px 22px 36px / 32px 22px 36px 26px;
  box-shadow: inset 0 2px 0 rgba(236, 224, 192, 0.07), 0 14px 30px rgba(8, 4, 1, 0.6);
}
[data-theme="caveman"] .fg-count {
  background: radial-gradient(120% 110% at 50% -10%, rgba(255, 185, 94, 0.09), transparent 55%), var(--surface);
  border-radius: 30px 22px 32px 24px / 24px 32px 22px 30px;
}
[data-theme="caveman"] .fg-stack .fg-lbrow:nth-child(odd) {
  border-radius: 20px 30px 16px 28px / 26px 16px 30px 18px;
  border: 2px solid rgba(236, 224, 192, 0.16);
}
[data-theme="caveman"] .fg-stack .fg-lbrow:nth-child(even) {
  border-radius: 28px 18px 30px 20px / 18px 28px 20px 30px;
  border: 2px solid rgba(236, 224, 192, 0.16);
}
[data-theme="caveman"] .fg-stack .fg-lbrow--leader {
  border-color: rgba(255, 185, 94, 0.45);
  background: radial-gradient(90% 140% at 10% 0%, rgba(255, 122, 89, 0.12), transparent 60%), var(--surface);
}
[data-theme="caveman"] .fg-lbrow__rank { font-family: 'Archivo', sans-serif; font-weight: 900; color: var(--coral); }
[data-theme="caveman"] :is(.fg-battle__bar, .fg-lbrow__bar) {
  border-radius: 10px; background: rgba(8, 4, 1, 0.6);
  border: 2px solid rgba(236, 224, 192, 0.18);
}
[data-theme="caveman"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 8px;
  background: linear-gradient(180deg, #ffb95e, var(--coral) 70%, #b3451d);
  box-shadow: 0 0 12px rgba(255, 122, 89, 0.35);
}
[data-theme="caveman"] .fg-event {
  border-left: 4px solid rgba(236, 224, 192, 0.4);
  border-radius: 18px 12px 20px 14px / 14px 20px 12px 18px;
}
[data-theme="caveman"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                           .fg-pro__cta, .fg-state__cta) {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  color: #f4ead2;
  background: linear-gradient(160deg, #7d7466 0%, #66594a 38%, #4d4437 72%, #3b332a 100%);
  border: 0;
  border-radius: 18px 24px 14px 26px / 22px 14px 26px 16px;
  clip-path: polygon(3% 12%, 9% 3%, 26% 0%, 52% 4%, 74% 0%, 92% 6%, 100% 22%, 97% 46%, 100% 68%, 93% 92%, 74% 100%, 50% 96%, 26% 100%, 8% 94%, 0% 74%, 2% 48%);
  box-shadow: inset 2px 3px 2px rgba(236, 224, 192, 0.2), inset -3px -4px 6px rgba(8, 4, 1, 0.5), 0 6px 0 #2b231a;
  text-shadow: 0 2px 2px rgba(8, 4, 1, 0.6);
}
[data-theme="caveman"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                           .fg-pro__cta, .fg-state__cta):active {
  transform: translateY(5px);
  box-shadow: inset 3px 4px 8px rgba(8, 4, 1, 0.65), 0 1px 0 #2b231a;
}
[data-theme="caveman"] .pop-btn {
  color: #f4ead2;
  background: linear-gradient(160deg, #7d7466, #66594a 38%, #4d4437 72%, #3b332a);
  border: 0;
  border-radius: 18px 24px 14px 26px / 22px 14px 26px 16px;
  clip-path: polygon(3% 12%, 9% 3%, 26% 0%, 52% 4%, 74% 0%, 92% 6%, 100% 22%, 97% 46%, 100% 68%, 93% 92%, 74% 100%, 50% 96%, 26% 100%, 8% 94%, 0% 74%, 2% 48%);
  box-shadow: inset 2px 3px 2px rgba(236, 224, 192, 0.2), inset -3px -4px 6px rgba(8, 4, 1, 0.5), 0 6px 0 #2b231a;
  font-family: 'Archivo', sans-serif; font-weight: 900;
}
[data-theme="caveman"] .pop-btn:active, [data-theme="caveman"] .pop-btn.is-pressed {
  transform: translateY(5px);
  box-shadow: inset 3px 4px 8px rgba(8, 4, 1, 0.65), 0 1px 0 #2b231a;
}
[data-theme="caveman"] .fg-status {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  background: var(--coral); color: #2b130a;
  border-radius: 14px 20px 12px 18px / 18px 12px 20px 14px;
}
[data-theme="caveman"] .fg-dz {
  font-family: 'Archivo', sans-serif; font-weight: 800;
  color: #ffe6c4;
  background:
    radial-gradient(120% 160% at 50% 130%, rgba(255, 208, 120, 0.5), transparent 60%),
    linear-gradient(180deg, #8c2f10, #b3451d);
  border-radius: 18px 12px 20px 14px / 14px 20px 12px 18px;
  animation: matFireFlicker 2.6s ease-in-out infinite;
}
[data-theme="caveman"] .bd-table {             /* the stone arena */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='300'%3E%3Cg fill='%23d98e2b' fill-opacity='0.14'%3E%3Cpath d='M60 80 l6-18 6 18-4 16-8-4z'/%3E%3Cpath d='M82 86 l5-14 5 14-3 12-7-4z'/%3E%3Cpath d='M71 82 l4-22 4 22-3 18z'/%3E%3C/g%3E%3Cg stroke='%23ecd0a0' stroke-opacity='0.12' stroke-width='2' fill='none'%3E%3Cpath d='M0 150 q80 8 170-6 t170 8'/%3E%3Cpath d='M0 250 q90-10 180 4 t160-8'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 340px 300px,
    radial-gradient(90% 80% at 50% 110%, rgba(255, 122, 89, 0.16), transparent 60%),
    linear-gradient(180deg, #3a2d1f, #2c2115);
  border: 4px solid rgba(236, 224, 192, 0.26);
  border-radius: 30px 22px 32px 24px / 24px 32px 22px 30px;
  box-shadow: inset 0 3px 0 rgba(236, 224, 192, 0.09), inset 0 -30px 60px rgba(8, 4, 1, 0.6), 0 14px 30px rgba(8, 4, 1, 0.65);
}
[data-theme="caveman"] .bd-lane { border: 2px dashed rgba(236, 224, 192, 0.32); }
[data-theme="caveman"] .bd-lane:nth-child(even) { border-color: rgba(236, 224, 192, 0.18); }
[data-theme="caveman"] .bd-finish {
  background: repeating-linear-gradient(95deg, rgba(236, 224, 192, 0.55) 0 12px, transparent 12px 22px);
}
[data-theme="caveman"] .bd-pot {               /* the fire pit */
  background:
    radial-gradient(circle at 50% 120%, rgba(255, 220, 150, 0.75), rgba(255, 122, 89, 0.55) 40%, rgba(140, 47, 16, 0.9) 75%),
    #b3451d;
  border: 3px solid rgba(236, 224, 192, 0.35);
  border-radius: 46% 54% 48% 52% / 55% 48% 52% 45%;
  box-shadow: 0 0 34px rgba(255, 122, 89, 0.35), inset 0 -6px 14px rgba(8, 4, 1, 0.5);
  animation: matFireFlicker 2.2s ease-in-out infinite;
}
[data-theme="caveman"] .bd-pot__label { color: #ffe6c4; text-shadow: 0 1px 3px rgba(60, 20, 4, 0.9); font-family: 'Archivo', sans-serif; }
[data-theme="caveman"] .bd-pot__total { text-shadow: 0 2px 4px rgba(60, 20, 4, 0.9); }
[data-theme="caveman"] .bd-card__face--front {
  background: linear-gradient(180deg, rgba(236, 224, 192, 0.08), transparent 40%), var(--card-face);
  border: 2px solid rgba(236, 224, 192, 0.3);
  border-radius: 22px 14px 24px 16px / 16px 24px 14px 22px;
  box-shadow: inset 0 2px 0 rgba(236, 224, 192, 0.1), 0 8px 16px rgba(8, 4, 1, 0.55);
}
[data-theme="caveman"] .bd-card__face--back { border-radius: 20px 26px 18px 28px / 26px 18px 28px 20px; border: 2px solid rgba(236, 224, 192, 0.24); }
[data-theme="caveman"] .bd-prow {
  border: 2px solid rgba(236, 224, 192, 0.2);
  border-radius: 18px 24px 16px 26px / 24px 16px 26px 18px;
  box-shadow: 0 4px 0 rgba(8, 4, 1, 0.55);
}
[data-theme="caveman"] .bd-card--deal { animation: matThud 0.6s cubic-bezier(0.3, 1.5, 0.4, 1) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   n64 · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */
/* ── n64 · BINDINGS ──────────────────────────────────────────────────── */

[data-theme="n64"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                       .fg-event__title, .fg-dialog__title, .fg-state__title) {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
}
[data-theme="n64"] .fg-count__time { font-family: 'Fredoka', sans-serif; font-weight: 700; }
[data-theme="n64"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 18%),
    linear-gradient(200deg, var(--surface) 55%, color-mix(in srgb, var(--surface) 72%, #9aa8dc) 100%);
  border: 3px solid #101830; border-radius: 14px;
  box-shadow: 0 4px 0 #101830, 0 8px 0 rgba(16, 24, 48, 0.45), 0 14px 24px rgba(6, 9, 20, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="n64"] .fg-count {
  background: linear-gradient(200deg, var(--surface) 55%, color-mix(in srgb, var(--surface) 70%, #9aa8dc));
  border: 3px solid #101830; border-radius: 14px;
  box-shadow: 0 4px 0 #101830;
}
[data-theme="n64"] :is(.fg-avatar, .fg-lbrow .fg-avatar, .fg-battle__crew .fg-avatar) {
  border-radius: 9px; border: 2px solid #101830;   /* square avatars! */
}
[data-theme="n64"] :is(.fg-battle__bar, .fg-lbrow__bar) {
  border-radius: 8px; background: #101830; padding: 2px; border: 2px solid #101830;
}
[data-theme="n64"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 5px;
  background: repeating-linear-gradient(90deg, var(--lime) 0 14px, #101830 14px 17px);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25);
}
[data-theme="n64"] .fg-lbrow { border: 2px solid rgba(16, 24, 48, 0.8); border-radius: 10px; }
[data-theme="n64"] .fg-lbrow--leader { border-color: var(--lime); box-shadow: 0 3px 0 rgba(16, 24, 48, 0.6); }
[data-theme="n64"] .fg-lbrow__rank { font-family: 'Fredoka', sans-serif; color: var(--lime); }
[data-theme="n64"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                       .fg-pro__cta, .fg-state__cta) {
  font-family: 'Fredoka', sans-serif; font-weight: 700;
  border: 3px solid #101830; border-radius: 10px;
  box-shadow: 0 4px 0 #101830, 0 8px 0 rgba(16, 24, 48, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.25);
}
[data-theme="n64"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                       .fg-pro__cta, .fg-state__cta):active {
  transform: translateY(3px); box-shadow: 0 1px 0 #101830, inset 0 2px 4px rgba(16, 24, 48, 0.35);
}
[data-theme="n64"] .pop-btn {
  border: 3px solid #101830; border-radius: 10px;
  box-shadow: 0 4px 0 #101830, 0 8px 0 rgba(16, 24, 48, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.22);
  font-family: 'Fredoka', sans-serif;
}
[data-theme="n64"] .pop-btn:active, [data-theme="n64"] .pop-btn.is-pressed {
  transform: translateY(3px); box-shadow: 0 1px 0 #101830;
}
[data-theme="n64"] .fg-status {
  font-family: 'Fredoka', sans-serif;
  border: 2px solid #101830; border-radius: 8px; box-shadow: 0 2px 0 #101830;
}
[data-theme="n64"] .bd-table {                 /* the poly arena */
  background:
    linear-gradient(165deg, color-mix(in srgb, var(--felt) 82%, #9aa8dc) 0%, var(--felt) 46%, color-mix(in srgb, var(--felt) 60%, #0c1226) 100%),
    var(--felt);
  border: 4px solid #101830; border-radius: 18px;
  box-shadow: 0 5px 0 #101830, 0 10px 0 rgba(16, 24, 48, 0.4), 0 18px 30px rgba(6, 9, 20, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.1);
}
[data-theme="n64"] .bd-lane { border: 2px solid rgba(154, 168, 220, 0.4); }
[data-theme="n64"] .bd-lane:nth-child(even) { border-color: rgba(255, 255, 255, 0.22); }
[data-theme="n64"] .bd-finish { background: repeating-linear-gradient(90deg, #9aa8dc 0 8px, #101830 8px 16px); }
[data-theme="n64"] .bd-pot {                   /* the star core */
  background: radial-gradient(circle at 50% 34%, #fff6d6, var(--lime) 52%, #7a5f10 100%);
  border: 3px solid #101830; border-radius: 16px;
  box-shadow: 0 4px 0 #101830, inset 0 3px 0 rgba(255, 255, 255, 0.5);
}
[data-theme="n64"] .bd-pot__label { color: #231d04; }
[data-theme="n64"] .bd-pot__total { color: #231d04; }
[data-theme="n64"] .bd-pot__pts { color: #4a3d08; }
[data-theme="n64"] .bd-token__chip, [data-theme="n64"] .bd-prow__chip,
[data-theme="n64"] .bd-ped__chip { border-radius: 9px; }   /* square tokens! */
[data-theme="n64"] .bd-card__face--front {
  background: linear-gradient(200deg, var(--card-face) 50%, color-mix(in srgb, var(--card-face) 72%, #9aa8dc));
  border: 3px solid #101830; border-radius: 12px;
  box-shadow: 0 3px 0 #101830, inset 0 2px 0 rgba(255, 255, 255, 0.12);
}
[data-theme="n64"] .bd-card__face--back { border: 3px solid #101830; border-radius: 12px; background: repeating-linear-gradient(45deg, rgba(154, 168, 220, 0.2) 0 7px, transparent 7px 14px), var(--card-back-1); }
[data-theme="n64"] .bd-prow { border: 2px solid #101830; border-radius: 12px; }
[data-theme="n64"] .bd-prow--you { border-color: var(--lime); }
[data-theme="n64"] :is(.fg-battle, .fg-count, .fg-event) { animation: matFogReveal 0.7s ease-out both; }
[data-theme="n64"] .fg-count { animation-delay: 0.07s; }
[data-theme="n64"] .bd-card--deal { animation: matSpawnPop 0.55s cubic-bezier(0.3, 1.7, 0.5, 1) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   goldeneye · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */
/* ── goldeneye · BINDINGS ────────────────────────────────────────────── */

[data-theme="goldeneye"] :is(.fg-battle__title, .fg-sheet__title, .fg-event__title,
                             .fg-state__title, .fg-dialog__title) {
  font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
}
[data-theme="goldeneye"] :is(.fg-battle__meta, .fg-count__sub, .fg-event__sub) {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
}
[data-theme="goldeneye"] .fg-pwr__rarity::before { content: "[ "; }
[data-theme="goldeneye"] .fg-pwr__rarity::after  { content: " ]"; }
[data-theme="goldeneye"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.04), transparent 30%, rgba(0, 0, 0, 0.2) 96%),
    linear-gradient(180deg, #2a333e, #1b2129);
  border: 1px solid rgba(240, 196, 69, 0.35);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), 0 12px 26px rgba(4, 6, 9, 0.6);
}
[data-theme="goldeneye"] :is(.fg-count, .fg-event) {
  border: 1px solid rgba(240, 196, 69, 0.3);
  background: linear-gradient(180deg, #232b34, #161c22);
  border-radius: 2px;
}
[data-theme="goldeneye"] .fg-count__time { text-shadow: 0 0 14px rgba(240, 196, 69, 0.30); font-family: var(--font-mono); }
[data-theme="goldeneye"] :is(.fg-battle__bar, .fg-lbrow__bar) {
  border-radius: 3px;
  background: repeating-linear-gradient(90deg, rgba(240, 196, 69, 0.2) 0 2px, transparent 2px 9px), rgba(6, 9, 13, 0.8);
  box-shadow: inset 0 0 0 1px rgba(240, 196, 69, 0.22);
}
[data-theme="goldeneye"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, var(--lime) 0 9px, rgba(16, 20, 25, 0.9) 9px 12px);
}
[data-theme="goldeneye"] .fg-lbrow {
  font-family: var(--font-mono);
  border-left: 2px solid rgba(240, 196, 69, 0.4);
}
[data-theme="goldeneye"] .fg-lbrow__rank { color: var(--lime); font-family: var(--font-mono); }
[data-theme="goldeneye"] .fg-lbrow--leader {
  position: relative;
  border-color: color-mix(in srgb, var(--lime) 45%, transparent);
}
[data-theme="goldeneye"] .fg-lbrow--leader::before,   /* reticle brackets */
[data-theme="goldeneye"] .fg-lbrow--leader::after {
  content: ""; position: absolute; width: 10px; height: 10px;
  border-color: var(--lime); border-style: solid;
}
[data-theme="goldeneye"] .fg-lbrow--leader::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
[data-theme="goldeneye"] .fg-lbrow--leader::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
[data-theme="goldeneye"] .fg-event__tag { font-family: var(--font-mono); letter-spacing: 0.1em; }
[data-theme="goldeneye"] .fg-status {
  font-family: var(--font-mono); letter-spacing: 0.14em;
  border-radius: 2px; background: rgba(240, 196, 69, 0.15);
  box-shadow: inset 0 0 0 1px rgba(240, 196, 69, 0.5);
}
[data-theme="goldeneye"] .fg-status::after { content: " ▮"; animation: matLampPulse 0.9s steps(2) infinite; }
[data-theme="goldeneye"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                             .fg-pro__cta, .fg-state__cta) {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em;
  border-radius: 0; border: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  background: linear-gradient(180deg, #3a4653, #232b34);
  box-shadow: inset 0 0 0 1px rgba(240, 196, 69, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
[data-theme="goldeneye"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                             .fg-pro__cta, .fg-state__cta):active {
  box-shadow: inset 0 0 0 1px rgba(240, 196, 69, 0.5), inset 0 2px 6px rgba(0, 0, 0, 0.7);
}
[data-theme="goldeneye"] .pop-btn {
  border: 0; border-radius: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  background: linear-gradient(180deg, #3a4653, #232b34);
  box-shadow: inset 0 0 0 1px rgba(240, 196, 69, 0.5);
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em;
}
[data-theme="goldeneye"] .pop-btn:active, [data-theme="goldeneye"] .pop-btn.is-pressed {
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.7);
}
[data-theme="goldeneye"] .fg-dz {
  font-family: var(--font-mono); letter-spacing: 0.12em;
  background: linear-gradient(180deg, #a1121f, #6e0a15);
  border: 1px solid rgba(255, 120, 130, 0.55);
  animation: matAlarmStrobe 1.1s steps(2) infinite;
}
[data-theme="goldeneye"] .fg-dz--l3 { animation-duration: 0.6s; }
[data-theme="goldeneye"] .bd-table {           /* the facility map */
  background:
    repeating-linear-gradient(0deg, rgba(240, 196, 69, 0.05) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, rgba(240, 196, 69, 0.05) 0 1px, transparent 1px 30px),
    radial-gradient(75% 65% at 50% 32%, rgba(240, 196, 69, 0.06), transparent 60%),
    linear-gradient(180deg, #232b34, #141a20);
  border: 1px solid rgba(240, 196, 69, 0.45);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 46px rgba(4, 6, 9, 0.7), 0 12px 26px rgba(4, 6, 9, 0.55);
}
[data-theme="goldeneye"] .bd-lane { border: 1px solid rgba(240, 196, 69, 0.32); }
[data-theme="goldeneye"] .bd-lane:nth-child(even) { border-color: rgba(240, 196, 69, 0.18); }
[data-theme="goldeneye"] .bd-finish { background: repeating-linear-gradient(90deg, rgba(240, 196, 69, 0.6) 0 2px, transparent 2px 10px); }
[data-theme="goldeneye"] .bd-pot {             /* the objective — watch gauge */
  background:
    conic-gradient(var(--lime) 0 62%, rgba(240, 196, 69, 0.2) 62% 100%),
    radial-gradient(circle, #10151b 0 58%, transparent 58.5%),
    linear-gradient(180deg, #2a333e, #1b2129);
  border: 1px solid rgba(240, 196, 69, 0.6);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 22px rgba(240, 196, 69, 0.14);
}
[data-theme="goldeneye"] .bd-pot__label { color: var(--lime); }
[data-theme="goldeneye"] .bd-clock__time { text-shadow: 0 0 12px rgba(240, 196, 69, 0.35); font-family: var(--font-mono); }
[data-theme="goldeneye"] .bd-card__face--front {   /* mission objective card */
  background: linear-gradient(180deg, #262f39, #181e24);
  border: 1px solid rgba(240, 196, 69, 0.4);
  border-radius: 2px;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="goldeneye"] .bd-card__face--back { border-radius: 2px; background: repeating-linear-gradient(45deg, rgba(240, 196, 69, 0.1) 0 6px, transparent 6px 12px), #141a20; }
[data-theme="goldeneye"] .bd-prow {
  font-family: var(--font-mono);
  border: 1px solid rgba(240, 196, 69, 0.25);
  border-left: 2px solid rgba(240, 196, 69, 0.5);
  background: rgba(16, 20, 25, 0.5);
}
[data-theme="goldeneye"] .bd-prow--you { border-left-color: var(--lime); }
[data-theme="goldeneye"] .bd-top { border-bottom: 1px solid color-mix(in srgb, var(--lime) 30%, var(--line)); }
[data-theme="goldeneye"] :is(.fg-battle, .fg-count, .fg-event) { animation: matHudFlicker 0.35s steps(3) both; }
[data-theme="goldeneye"] .fg-count { animation-delay: 0.06s; }
[data-theme="goldeneye"] .bd-pot.is-bump { animation: matReticlePulse 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

/* ═══════════════════════════════════════════════════════════════════════════
   neobrut · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */
/* ── neobrut · BINDINGS — loud structure, soft motion ────────────────── */

[data-theme="neobrut"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                           .fg-event__title, .fg-state__title, .fg-dialog__title) {
  font-family: 'Anton', 'Archivo', sans-serif;
  text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.94;
}
[data-theme="neobrut"] :is(.fg-count__time, .fg-lbrow__pct, .fg-lbrow__ruf) {
  font-family: 'Anton', 'Archivo', sans-serif;
  text-shadow: 3px 3px 0 rgba(196, 31, 14, 0.55);
}
[data-theme="neobrut"] :is(.fg-battle__meta, .fg-count__sub, .fg-battle__foot) {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8em;
}
[data-theme="neobrut"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  border: 3px solid var(--line);
  border-radius: 14px;   /* chunky corners UNDER the hard edge */
  background: var(--surface);
  box-shadow: 6px 6px 0 rgba(196, 31, 14, 0.8);
}
[data-theme="neobrut"] .fg-count {
  border: 3px solid var(--line); border-radius: 14px;
  background: var(--surface);
  box-shadow: 6px 6px 0 rgba(43, 75, 236, 0.65);
}
[data-theme="neobrut"] :is(.fg-battle__bar, .fg-lbrow__bar) {
  border: 2.5px solid var(--line); border-radius: 999px;
  background: var(--surface-2); padding: 2px;
}
[data-theme="neobrut"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime), var(--sky));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="neobrut"] .fg-lbrow { border-left: 5px solid var(--line); border-radius: 4px 12px 12px 4px; }
[data-theme="neobrut"] .fg-lbrow__rank { font-family: 'Anton', sans-serif; color: var(--coral); }
[data-theme="neobrut"] .fg-lbrow--leader {
  border-left-color: var(--coral);
  background: linear-gradient(90deg, rgba(196, 31, 14, 0.08), transparent 55%), var(--surface);
}
[data-theme="neobrut"] .fg-event { border-left: 4px solid var(--line); border-radius: 4px 10px 10px 4px; }
[data-theme="neobrut"] .fg-status {
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  border: 2.5px solid var(--line); border-radius: 999px;
  box-shadow: 2px 2px 0 rgba(23, 19, 14, 0.85);
}
[data-theme="neobrut"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                           .fg-pro__cta, .fg-state__cta) {
  font-family: 'Anton', 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: 0.03em;
  border: 3px solid var(--line); border-radius: 999px;
  box-shadow: 5px 5px 0 var(--coral), 10px 10px 0 rgba(23, 19, 14, 0.9);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="neobrut"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                           .fg-pro__cta, .fg-state__cta):hover {
  transform: translateY(-3px);
  box-shadow: 7px 8px 0 var(--coral), 14px 15px 0 rgba(23, 19, 14, 0.9);
}
[data-theme="neobrut"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                           .fg-pro__cta, .fg-state__cta):active {
  transform: translateY(2px);
  box-shadow: 2px 2px 0 var(--coral), 4px 4px 0 rgba(23, 19, 14, 0.9);
}
[data-theme="neobrut"] .pop-btn {
  border: 3px solid var(--line); border-radius: 999px;
  box-shadow: 5px 5px 0 var(--coral), 10px 10px 0 rgba(23, 19, 14, 0.9);
  font-family: 'Anton', 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: 0.03em;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-theme="neobrut"] .pop-btn:active { transform: translateY(2px); box-shadow: 2px 2px 0 var(--coral), 4px 4px 0 rgba(23, 19, 14, 0.9); }
[data-theme="neobrut"] .fg-dz {
  font-weight: 800; letter-spacing: 0.06em;
  color: #17130e;
  background: repeating-linear-gradient(-45deg, rgba(23, 19, 14, 0.12) 0 12px, transparent 12px 24px), var(--dz-hero);
  border: 3px solid var(--line); border-radius: 999px;
}
[data-theme="neobrut"] .bd-table {             /* the poster court */
  background:
    repeating-linear-gradient(90deg, rgba(255, 246, 232, 0.07) 0 2px, transparent 2px 42px),
    radial-gradient(80% 70% at 50% 15%, rgba(255, 246, 232, 0.14), transparent 60%),
    var(--felt);
  border: 4px solid var(--rail);
  box-shadow: 8px 8px 0 rgba(23, 19, 14, 0.85);
}
[data-theme="neobrut"] .bd-lane { border: 2px solid var(--felt-line); }
[data-theme="neobrut"] .bd-lane:nth-child(even) { border-color: rgba(255, 246, 232, 0.18); }
[data-theme="neobrut"] .bd-finish { background: repeating-linear-gradient(45deg, var(--chip-white) 0 9px, var(--rail) 9px 18px); }
[data-theme="neobrut"] .bd-pot {               /* the headline plate + slapped sticker */
  position: relative;
  background: var(--chip-white);
  border: 3px solid var(--line); border-radius: 14px;
  box-shadow: 5px 5px 0 var(--coral);
}
[data-theme="neobrut"] .bd-pot::after {           /* the sticker badge */
  content: "★";
  position: absolute; top: -12px; right: -10px;
  width: 30px; height: 30px; display: grid; place-items: center;
  background: var(--chip-gold, #d9a521); color: #17130e; font-size: 15px;
  border: 2.5px solid var(--line); border-radius: 999px;
  box-shadow: 0 0 0 3px var(--chip-white), 2px 3px 0 rgba(23, 19, 14, 0.8);
  transform: rotate(-8deg);
}
[data-theme="neobrut"] .bd-pot__label { color: var(--line); font-family: 'Anton', sans-serif; letter-spacing: 0.14em; }
[data-theme="neobrut"] .bd-pot__total { color: var(--coral); font-family: 'Anton', sans-serif; text-shadow: 3px 3px 0 rgba(43, 75, 236, 0.35); }
[data-theme="neobrut"] .bd-pot__pts { color: var(--text); }
[data-theme="neobrut"] .bd-card__face--front { /* poster card — soft corners under hard edges */
  background:
    radial-gradient(circle at 1.2px 1.2px, rgba(23, 19, 14, 0.1) 1.2px, transparent 1.8px) 0 0/9px 9px,
    var(--card-face);
  border: 3px solid var(--line); border-radius: 14px;
  box-shadow: 4px 4px 0 rgba(196, 31, 14, 0.75);
}
[data-theme="neobrut"] .bd-card__name { color: var(--line); font-family: 'Anton', sans-serif; text-transform: uppercase; }
[data-theme="neobrut"] .bd-card__fx { color: var(--muted); }
[data-theme="neobrut"] .bd-card__cost { color: var(--coral); font-weight: 800; }
[data-theme="neobrut"] .bd-card__face--back {
  background: repeating-linear-gradient(45deg, rgba(255, 246, 232, 0.12) 0 8px, transparent 8px 16px), var(--card-back-1);
  border: 3px solid var(--line); border-radius: 8px;
}
[data-theme="neobrut"] .bd-prow { border: 2.5px solid var(--line); border-left: 5px solid var(--line); border-radius: 6px 999px 999px 6px; background: var(--surface); }
[data-theme="neobrut"] .bd-prow--you { border-left-color: var(--coral); }
[data-theme="neobrut"] .bd-prow__pos { font-family: 'Anton', sans-serif; color: var(--coral); }
[data-theme="neobrut"] .bd-top { border-bottom: 4px solid var(--line); }
[data-theme="neobrut"] .bd-tcard { border: 3px solid var(--line); box-shadow: 5px 5px 0 rgba(196, 31, 14, 0.8); }
[data-theme="neobrut"] .bd-card--deal { animation: matSoftIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
[data-theme="neobrut"] .bd-tcard__status { border: 2px solid var(--line); border-radius: 999px; }

/* ═══════════════════════════════════════════════════════════════════════════
   neobrut-field · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── neobrut-field · BINDINGS — the stadium take (sports side dominant) ─ */
[data-theme="neobrut-field"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                                 .fg-event__title, .fg-state__title, .fg-dialog__title) {
  font-family: 'Anton', 'Archivo', sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 0.96;
}
[data-theme="neobrut-field"] :is(.fg-count__time, .fg-lbrow__pct, .fg-lbrow__ruf) {
  font-family: 'Anton', 'Archivo', sans-serif;
  text-shadow: 3px 3px 0 rgba(156, 61, 24, 0.4);
}
[data-theme="neobrut-field"] :is(.fg-battle__meta, .fg-count__sub, .fg-battle__foot) {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8em;
}
[data-theme="neobrut-field"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  border: 2.5px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 1.4px 1.4px, rgba(20, 27, 13, 0.08) 1.4px, transparent 2px) 0 0/11px 11px,
    var(--surface);
  box-shadow: 6px 6px 0 rgba(156, 61, 24, 0.24);        /* ONE warm plate */
}
[data-theme="neobrut-field"] .fg-count {                /* the scoreboard module */
  border: 2.5px solid var(--line); border-radius: 16px;
  background: var(--line);
  box-shadow: 6px 6px 0 rgba(156, 61, 24, 0.24);
}
[data-theme="neobrut-field"] .fg-count__time { color: #f7c948; text-shadow: none; }
[data-theme="neobrut-field"] .fg-count__sub { color: rgba(248, 250, 238, 0.75); }
[data-theme="neobrut-field"] :is(.fg-battle__bar, .fg-lbrow__bar) {
  border: 2.5px solid var(--line); border-radius: 999px;
  background: var(--surface-2); padding: 2px;
}
[data-theme="neobrut-field"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, #2b7a40 0 10px, #236a37 10px 20px);  /* mown turf */
  transition: width 0.55s cubic-bezier(0.34, 1.4, 0.5, 1);
}
[data-theme="neobrut-field"] .fg-lbrow { border-bottom: 1.5px solid rgba(20, 27, 13, 0.35); border-radius: 0; }
[data-theme="neobrut-field"] .fg-lbrow__rank {
  font-family: 'Anton', sans-serif; color: var(--on-accent); background: var(--lime);
  border-radius: 999px; padding: 2px 8px;
}
[data-theme="neobrut-field"] .fg-lbrow--leader {
  border-left: 5px solid var(--coral);
  background: linear-gradient(90deg, rgba(156, 61, 24, 0.08), transparent 55%), var(--surface);
}
[data-theme="neobrut-field"] .fg-event { border-left: 4px solid var(--coral); border-radius: 4px 12px 12px 4px; }
[data-theme="neobrut-field"] .fg-status {
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  border: 2px solid var(--line); border-radius: 999px; background: var(--surface);
}
[data-theme="neobrut-field"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                 .fg-pro__cta, .fg-state__cta) {
  font-family: 'Anton', 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: 0.04em;
  border: 2.5px solid var(--line); border-radius: 14px;        /* badge, not pill */
  box-shadow: 4px 4px 0 var(--line);
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
}
[data-theme="neobrut-field"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                 .fg-pro__cta, .fg-state__cta):hover {
  transform: translateY(-3px) rotate(-0.5deg); box-shadow: 6px 7px 0 var(--line);
}
[data-theme="neobrut-field"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                 .fg-pro__cta, .fg-state__cta):active {
  transform: translateY(2px); box-shadow: 2px 2px 0 var(--line);
}
[data-theme="neobrut-field"] .pop-btn {
  border: 2.5px solid var(--line); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--line);
  font-family: 'Anton', 'Archivo', sans-serif; text-transform: uppercase; letter-spacing: 0.04em;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.4s cubic-bezier(0.34, 1.4, 0.5, 1);
}
[data-theme="neobrut-field"] .pop-btn:active { transform: translateY(2px); box-shadow: 2px 2px 0 var(--line); }
[data-theme="neobrut-field"] .fg-dz {
  font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: #5c3a00; font-family: var(--font-mono); font-size: 0.85em;
  background: repeating-linear-gradient(-45deg, rgba(156, 61, 24, 0.14) 0 12px, transparent 12px 24px), var(--dz-hero);
  border: 2.5px solid var(--line); border-radius: 12px;
}
[data-theme="neobrut-field"] .bd-table {             /* THE PITCH — mown stripes */
  background:
    repeating-linear-gradient(90deg, rgba(248, 250, 238, 0.05) 0 26px, transparent 26px 52px),
    radial-gradient(80% 70% at 50% 12%, rgba(248, 250, 238, 0.12), transparent 60%),
    linear-gradient(#2e7c42, #226033);   /* hard turf — var(--felt) is remapped by board.css */
  border: 4px solid var(--rail);
  box-shadow: 7px 7px 0 rgba(156, 61, 24, 0.3);
}
[data-theme="neobrut-field"] .bd-lane { border: 1.5px solid var(--felt-line); }
[data-theme="neobrut-field"] .bd-lane:nth-child(even) { border-color: rgba(248, 250, 238, 0.2); }
[data-theme="neobrut-field"] .bd-finish { background: repeating-linear-gradient(45deg, var(--chip-white) 0 8px, var(--lane) 8px 16px); }
[data-theme="neobrut-field"] .bd-pot {               /* the trophy plate + roundel */
  position: relative;
  background: #f8faee;
  border: 2.5px solid var(--line); border-radius: 14px;
  box-shadow: 5px 5px 0 rgba(156, 61, 24, 0.28);
}
[data-theme="neobrut-field"] .bd-pot::after {          /* the team roundel */
  content: "◈";
  position: absolute; top: -11px; right: -10px;
  width: 28px; height: 28px; display: grid; place-items: center;
  background: var(--chip-gold, #d9a521); color: #141b0d; font-size: 13px;
  border: 2.5px solid var(--line); border-radius: 999px;
  box-shadow: 0 0 0 3px var(--chip-white), 2px 3px 0 rgba(20, 27, 13, 0.8);
  transform: rotate(-6deg);
}
[data-theme="neobrut-field"] .bd-pot__label { color: var(--line); font-family: 'Anton', sans-serif; letter-spacing: 0.14em; }
[data-theme="neobrut-field"] .bd-pot__total { color: var(--coral); font-family: 'Anton', sans-serif; text-shadow: 3px 3px 0 rgba(30, 107, 51, 0.35); }
[data-theme="neobrut-field"] .bd-pot__pts { color: var(--text); }
[data-theme="neobrut-field"] .bd-card__face--front { /* the TICKET STUB — punched + perforated */
  background:
    linear-gradient(90deg, transparent calc(50% - 0.75px), rgba(20, 27, 13, 0.4) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)) 0 12px / 100% calc(100% - 24px) no-repeat,
    radial-gradient(circle at 1.4px 1.4px, rgba(20, 27, 13, 0.08) 1.4px, transparent 2px) 0 0/11px 11px,
    var(--card-face);
  border: 2.5px solid var(--line); border-radius: 12px;
  box-shadow: 4px 4px 0 rgba(156, 61, 24, 0.28);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 6.5px, #000 7px),
                radial-gradient(circle 7px at 100% 50%, transparent 6.5px, #000 7px);
  -webkit-mask-composite: source-in;
  mask: radial-gradient(circle 7px at 0 50%, transparent 6.5px, #000 7px),
        radial-gradient(circle 7px at 100% 50%, transparent 6.5px, #000 7px);
  mask-composite: intersect;
}
[data-theme="neobrut-field"] .bd-card__rar { font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1.5px dashed rgba(20, 27, 13, 0.4); padding-bottom: 3px; }
[data-theme="neobrut-field"] .bd-card__name { color: var(--line); font-family: 'Anton', sans-serif; text-transform: uppercase; }
[data-theme="neobrut-field"] .bd-card__fx { color: var(--muted); }
[data-theme="neobrut-field"] .bd-card__cost { color: var(--coral); font-weight: 800; }
[data-theme="neobrut-field"] .bd-card__face--back {
  background: repeating-linear-gradient(90deg, rgba(248, 250, 238, 0.1) 0 13px, transparent 13px 26px), var(--card-back-1);
  border: 2.5px solid var(--line); border-radius: 10px;
}
[data-theme="neobrut-field"] .bd-prow { border: 1.5px solid var(--line); border-left: 5px solid var(--line); border-radius: 12px; background: var(--surface); }
[data-theme="neobrut-field"] .bd-prow--you { border-left-color: var(--lime); }
[data-theme="neobrut-field"] .bd-prow__pos { font-family: 'Anton', sans-serif; color: var(--lime-dim); }
[data-theme="neobrut-field"] .bd-top { border-bottom: 2.5px solid var(--line); }
[data-theme="neobrut-field"] .bd-clock { background: var(--line); border-radius: 10px; border: 2px solid var(--line); }
[data-theme="neobrut-field"] .bd-clock__time { color: #f7c948; font-family: var(--font-mono); }
[data-theme="neobrut-field"] .bd-clock__lap { color: rgba(248, 250, 238, 0.7); font-family: var(--font-mono); }
[data-theme="neobrut-field"] .bd-tcard { border: 2.5px solid var(--line); border-radius: 16px; box-shadow: 5px 5px 0 rgba(156, 61, 24, 0.26); }
[data-theme="neobrut-field"] .bd-tcard__felt {
  background:
    repeating-linear-gradient(90deg, rgba(248, 250, 238, 0.08) 0 7px, transparent 7px 14px),
    var(--felt);
  border: 1.5px solid var(--line); border-radius: 8px;
}
[data-theme="neobrut-field"] .bd-tcard__status { border: 2px solid var(--line); border-radius: 999px; }
[data-theme="neobrut-field"] .bd-card--deal { animation: matFieldBounce 0.55s cubic-bezier(0.34, 1.4, 0.5, 1) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   neobrut-zine · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── neobrut-zine · BINDINGS — the print-shop take (poster side dominant) */
[data-theme="neobrut-zine"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                                .fg-event__title, .fg-state__title, .fg-dialog__title) {
  font-family: 'Space Mono', 'Courier New', monospace;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05;
}
[data-theme="neobrut-zine"] :is(.fg-count__time, .fg-lbrow__pct, .fg-lbrow__ruf) {
  font-family: 'Space Mono', monospace; font-weight: 700;
  text-shadow: 2.5px 0 0 var(--misreg-c), -2.5px 0 0 var(--misreg-m);   /* misregistered plates */
}
[data-theme="neobrut-zine"] :is(.fg-battle__meta, .fg-count__sub, .fg-battle__foot) {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.78em;
}
[data-theme="neobrut-zine"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  border: 2px solid var(--line);
  border-radius: 16px 6px 20px 8px / 7px 18px 6px 15px;              /* torn */
  background:
    radial-gradient(circle at 1.1px 1.1px, rgba(32, 29, 26, 0.07) 1.1px, transparent 1.7px) 0 0/6px 6px,
    var(--surface);
  box-shadow: 3px 0 0 var(--misreg-c), -3px 0 0 var(--misreg-m), 7px 9px 14px rgba(32, 29, 26, 0.22);
  transform: rotate(-0.25deg);
}
[data-theme="neobrut-zine"] .fg-count {
  border: 2px solid var(--line);
  border-radius: 14px 6px 16px 7px / 6px 14px 7px 12px;
  background:
    radial-gradient(circle at 1.1px 1.1px, rgba(32, 29, 26, 0.06) 1.1px, transparent 1.7px) 0 0/6px 6px,
    var(--surface);
  box-shadow: 2px 0 0 var(--misreg-c), -2px 0 0 var(--misreg-m);
}
[data-theme="neobrut-zine"] :is(.fg-battle__bar, .fg-lbrow__bar) {
  border: 2px solid var(--line); border-radius: 6px 3px 7px 4px;
  background: var(--surface-2); padding: 2px;
}
[data-theme="neobrut-zine"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: inherit;
  background: repeating-linear-gradient(-55deg, #d61f7d 0 9px, #b8166a 9px 18px);   /* riso ink */
  transition: width 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}
[data-theme="neobrut-zine"] .fg-lbrow { border-bottom: 1.5px dashed rgba(32, 29, 26, 0.4); border-radius: 0; }
[data-theme="neobrut-zine"] .fg-lbrow__rank { font-family: 'Space Mono', monospace; color: var(--lime-dim); }
[data-theme="neobrut-zine"] .fg-lbrow--leader {
  background: linear-gradient(180deg, transparent 68%, rgba(214, 31, 125, 0.35) 68%);  /* marker swipe */
}
[data-theme="neobrut-zine"] .fg-event {
  border-left: 4px solid var(--lime);
  border-radius: 5px 12px 12px 5px;
  transform: rotate(-0.3deg);
}
[data-theme="neobrut-zine"] .fg-status {
  font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  border: 2px dashed var(--line); border-radius: 5px; background: var(--surface);
  transform: rotate(-1deg);
}
[data-theme="neobrut-zine"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                .fg-pro__cta, .fg-state__cta) {
  font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  border: 2px solid var(--line); border-radius: 10px 5px 12px 6px / 5px 11px 6px 10px;
  box-shadow: 2px 0 0 var(--misreg-c), -2px 0 0 var(--misreg-m), 4px 5px 0 rgba(32, 29, 26, 0.85);
  text-shadow: 1px 1px 0 rgba(32, 29, 26, 0.55);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
[data-theme="neobrut-zine"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                .fg-pro__cta, .fg-state__cta):hover {
  transform: rotate(-1deg) translateY(-2px);
}
[data-theme="neobrut-zine"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                .fg-pro__cta, .fg-state__cta):active {
  transform: translate(2px, 2px) rotate(0.4deg);
  box-shadow: 1px 0 0 var(--misreg-c), -1px 0 0 var(--misreg-m), 1px 2px 0 rgba(32, 29, 26, 0.85);
}
[data-theme="neobrut-zine"] .pop-btn {
  border: 2px solid var(--line); border-radius: 10px 5px 12px 6px / 5px 11px 6px 10px;
  box-shadow: 2px 0 0 var(--misreg-c), -2px 0 0 var(--misreg-m), 4px 5px 0 rgba(32, 29, 26, 0.85);
  font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  text-shadow: 1px 1px 0 rgba(32, 29, 26, 0.55);
  transition: transform 0.3s cubic-bezier(0.3, 1.4, 0.5, 1), box-shadow 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
[data-theme="neobrut-zine"] .pop-btn:active {
  transform: translate(2px, 2px) rotate(0.4deg);
  box-shadow: 1px 0 0 var(--misreg-c), -1px 0 0 var(--misreg-m), 1px 2px 0 rgba(32, 29, 26, 0.85);
}
[data-theme="neobrut-zine"] .fg-dz {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-accent); background: var(--danger);
  border: 2px solid var(--line); border-radius: 7px 3px 8px 4px;
  box-shadow: 2px 0 0 var(--misreg-c), -2px 0 0 var(--misreg-m);
  text-shadow: 1px 1px 0 rgba(32, 29, 26, 0.6);
}
[data-theme="neobrut-zine"] .bd-table {             /* the photocopied pitch */
  background:
    radial-gradient(circle at 1.3px 1.3px, rgba(233, 230, 222, 0.09) 1.3px, transparent 2px) 0 0/7px 7px,
    repeating-linear-gradient(90deg, rgba(233, 230, 222, 0.05) 0 2px, transparent 2px 46px),
    linear-gradient(#3c4a44, #2e3a35);   /* hard riso teal-black */
  border: 3px solid var(--rail);
  box-shadow: 3px 0 0 var(--misreg-c), -3px 0 0 var(--misreg-m), 8px 9px 0 rgba(32, 29, 26, 0.75);
}
[data-theme="neobrut-zine"] .bd-lane { border: 1.5px dashed var(--felt-line); box-shadow: 2px 0 0 rgba(214, 31, 125, 0.28); }
[data-theme="neobrut-zine"] .bd-finish { background: repeating-linear-gradient(45deg, var(--chip-white) 0 7px, transparent 7px 14px); border-right: 1.5px dashed var(--rail); }
[data-theme="neobrut-zine"] .bd-pot {               /* the pasted plate */
  position: relative;
  background:
    radial-gradient(circle at 1.1px 1.1px, rgba(32, 29, 26, 0.07) 1.1px, transparent 1.7px) 0 0/6px 6px,
    #e9e6de;   /* hard copier paper — var(--card-face) is remapped by board.css */
  border: 2px solid var(--line); border-radius: 16px 6px 18px 8px / 7px 16px 6px 14px;
  box-shadow: 3px 0 0 var(--misreg-c), -3px 0 0 var(--misreg-m), 6px 8px 12px rgba(32, 29, 26, 0.3);
  transform: translate(-50%, -50%) rotate(-0.5deg);   /* keep the base centring */
}
[data-theme="neobrut-zine"] .bd-pot__label { color: var(--muted); font-family: 'Space Mono', monospace; letter-spacing: 0.18em; font-size: 0.78em; }
[data-theme="neobrut-zine"] .bd-pot__total { color: var(--line); font-family: 'Space Mono', monospace; font-weight: 700; text-shadow: 2.5px 0 0 var(--misreg-c), -2.5px 0 0 var(--misreg-m); }
[data-theme="neobrut-zine"] .bd-pot__pts { color: var(--text); font-family: 'Space Mono', monospace; }
[data-theme="neobrut-zine"] .bd-card__face--front { /* cut-and-paste card */
  background:
    radial-gradient(circle at 1.1px 1.1px, rgba(32, 29, 26, 0.07) 1.1px, transparent 1.7px) 0 0/6px 6px,
    var(--card-face);
  border: 2px solid var(--line); border-radius: 14px 5px 16px 6px / 6px 13px 5px 12px;
  box-shadow: 2px 0 0 var(--misreg-c), -2px 0 0 var(--misreg-m);
}
[data-theme="neobrut-zine"] .bd-card__rar { font-family: 'Space Mono', monospace; font-size: 0.7em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--coral); border: 1.5px dashed var(--coral); border-radius: 4px; padding: 2px 6px; transform: rotate(-2deg); display: inline-block; }
[data-theme="neobrut-zine"] .bd-card__name { color: var(--line); font-family: 'Space Mono', monospace; font-weight: 700; text-transform: uppercase; }
[data-theme="neobrut-zine"] .bd-card__fx { color: var(--muted); }
[data-theme="neobrut-zine"] .bd-card__cost { color: var(--lime-dim); font-weight: 700; font-family: 'Space Mono', monospace; }
[data-theme="neobrut-zine"] .bd-card__face--back {
  background: repeating-linear-gradient(45deg, rgba(233, 230, 222, 0.14) 0 7px, transparent 7px 14px), var(--card-back-1);
  border: 2px solid var(--line); border-radius: 6px 12px 5px 11px;
}
[data-theme="neobrut-zine"] .bd-prow { border-bottom: 1.5px dashed rgba(32, 29, 26, 0.4); border-radius: 0; background: transparent; }
[data-theme="neobrut-zine"] .bd-prow--you { background: linear-gradient(180deg, transparent 70%, rgba(214, 31, 125, 0.28) 70%); }
[data-theme="neobrut-zine"] .bd-prow__pos { font-family: 'Space Mono', monospace; font-weight: 700; color: var(--lime-dim); }
[data-theme="neobrut-zine"] .bd-top { border-bottom: 2px solid var(--line); }
[data-theme="neobrut-zine"] .bd-h1 em, [data-theme="neobrut-zine"] .bd-h1 i {
  background: linear-gradient(180deg, transparent 64%, rgba(214, 31, 125, 0.45) 64%);
  font-style: normal;
}
[data-theme="neobrut-zine"] .bd-tcard { border: 2px solid var(--line); border-radius: 14px 6px 16px 7px / 6px 14px 7px 13px; box-shadow: 2px 0 0 var(--misreg-c), -2px 0 0 var(--misreg-m), 5px 6px 0 rgba(32, 29, 26, 0.6); }
[data-theme="neobrut-zine"] .bd-tcard__felt { background: radial-gradient(circle at 1.1px 1.1px, rgba(32, 29, 26, 0.16) 1.1px, transparent 1.7px) 0 0/6px 6px, var(--felt); border: 1.5px solid var(--line); border-radius: 4px 8px 5px 7px; }
[data-theme="neobrut-zine"] .bd-tcard__status { border: 1.5px dashed var(--line); border-radius: 4px; font-family: 'Space Mono', monospace; }
[data-theme="neobrut-zine"] .bd-card--deal { animation: matZinePaste 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   neobrut-ticket · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── neobrut-ticket · BINDINGS — the signage take (structural side) ──── */
[data-theme="neobrut-ticket"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                                  .fg-event__title, .fg-state__title, .fg-dialog__title) {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -0.01em;
}
[data-theme="neobrut-ticket"] :is(.fg-count__time, .fg-lbrow__pct, .fg-lbrow__ruf) {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.05em;
}
[data-theme="neobrut-ticket"] .fg-count {              /* THE DEPARTURE BOARD */
  background: #17191c; border-radius: 14px; border: 1.5px solid var(--rail);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.06), inset 0 -4px 0 rgba(0, 0, 0, 0.5), 0 6px 16px rgba(26, 28, 31, 0.22);
}
[data-theme="neobrut-ticket"] .fg-count__time { color: var(--amber-display); }
[data-theme="neobrut-ticket"] .fg-count__sub { color: rgba(248, 249, 245, 0.72); font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
[data-theme="neobrut-ticket"] :is(.fg-battle__meta, .fg-battle__foot) {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78em;
}
[data-theme="neobrut-ticket"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  border: 1.5px solid var(--rail);
  border-top: 4px solid var(--amber-display);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 10px 24px rgba(26, 28, 31, 0.09);
}
[data-theme="neobrut-ticket"] :is(.fg-battle__bar, .fg-lbrow__bar) {
  height: 5px; border-radius: 3px; background: var(--surface-2); padding: 0;
}
[data-theme="neobrut-ticket"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 3px; background: var(--lime);
  box-shadow: 7px 0 0 -1px var(--amber-display);       /* the next-stop marker */
  transition: width 0.6s cubic-bezier(0.25, 0.9, 0.3, 1);
}
[data-theme="neobrut-ticket"] .fg-lbrow { border-bottom: 1px solid var(--line); border-radius: 0; }
[data-theme="neobrut-ticket"] .fg-lbrow__rank {
  font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.1em;
  color: var(--amber-display); background: #17191c; border-radius: 6px; padding: 3px 7px;
}
[data-theme="neobrut-ticket"] .fg-lbrow--leader { border-left: 4px solid var(--lime); background: rgba(28, 58, 94, 0.05); }
[data-theme="neobrut-ticket"] .fg-event { border-left: 4px solid var(--amber-display); border-radius: 0 10px 10px 0; }
[data-theme="neobrut-ticket"] .fg-status {
  font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--lime); border: 2px solid var(--lime); border-radius: 999px; background: var(--surface);
}
[data-theme="neobrut-ticket"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                  .fg-pro__cta, .fg-state__cta) {
  font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em;
  border: 0; border-radius: 12px;
  box-shadow: 0 8px 20px rgba(28, 58, 94, 0.25);
  transition: transform 0.25s cubic-bezier(0.25, 0.9, 0.3, 1), box-shadow 0.25s cubic-bezier(0.25, 0.9, 0.3, 1), background 0.25s;
}
[data-theme="neobrut-ticket"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                  .fg-pro__cta, .fg-state__cta):hover {
  background: var(--primary-hover); transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(28, 58, 94, 0.3);
}
[data-theme="neobrut-ticket"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                  .fg-pro__cta, .fg-state__cta):active {
  transform: translateY(1px); box-shadow: 0 4px 10px rgba(28, 58, 94, 0.25);
}
[data-theme="neobrut-ticket"] .pop-btn {
  border: 0; border-radius: 12px;
  box-shadow: 0 8px 20px rgba(28, 58, 94, 0.25);
  font-family: var(--font-display); font-weight: 700;
  transition: transform 0.25s cubic-bezier(0.25, 0.9, 0.3, 1), box-shadow 0.25s cubic-bezier(0.25, 0.9, 0.3, 1), background 0.25s;
}
[data-theme="neobrut-ticket"] .pop-btn:active { transform: translateY(1px); box-shadow: 0 4px 10px rgba(28, 58, 94, 0.25); }
[data-theme="neobrut-ticket"] .fg-dz {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber-display); background: #17191c;
  border-radius: 10px; border-left: 4px solid var(--amber-display);
}
[data-theme="neobrut-ticket"] .bd-table {             /* the LIGHT platform floor */
  background:
    radial-gradient(circle at 2px 2px, rgba(26, 28, 31, 0.06) 1.6px, transparent 2.4px) 0 0/26px 26px,
    repeating-linear-gradient(90deg, rgba(28, 58, 94, 0.05) 0 2px, transparent 2px 64px),
    var(--felt);
  border: 1.5px solid var(--rail);
  box-shadow: 0 12px 28px rgba(26, 28, 31, 0.12);
}
[data-theme="neobrut-ticket"] .bd-lane { border: 1.5px solid var(--felt-line); }
[data-theme="neobrut-ticket"] .bd-lane:nth-child(even) { border-color: rgba(28, 58, 94, 0.28); }
[data-theme="neobrut-ticket"] .bd-finish { background: repeating-linear-gradient(90deg, var(--amber-display) 0 10px, transparent 10px 17px); border-right: 2px solid var(--rail); }
[data-theme="neobrut-ticket"] .bd-pot {               /* the departure module */
  position: relative;
  background: #17191c; border: 1.5px solid var(--rail); border-radius: 14px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.06), inset 0 -4px 0 rgba(0, 0, 0, 0.5), 0 8px 20px rgba(26, 28, 31, 0.25);
}
[data-theme="neobrut-ticket"] .bd-pot__label { color: rgba(248, 249, 245, 0.72); font-family: var(--font-mono); letter-spacing: 0.22em; font-size: 0.72em; }
[data-theme="neobrut-ticket"] .bd-pot__total { color: var(--amber-display); font-family: var(--font-mono); font-weight: 600; }
[data-theme="neobrut-ticket"] .bd-pot__pts { color: rgba(248, 249, 245, 0.72); font-family: var(--font-mono); }
[data-theme="neobrut-ticket"] .bd-card__face--front { /* the signage plate */
  background: var(--card-face);
  border: 1.5px solid var(--rail); border-top: 4px solid var(--amber-display); border-radius: 16px;
  box-shadow: 0 8px 18px rgba(26, 28, 31, 0.1);
}
[data-theme="neobrut-ticket"] .bd-card__rar {
  font-family: var(--font-mono); font-size: 0.68em; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--amber-display); background: #17191c; border-radius: 6px; padding: 3px 8px;
}
[data-theme="neobrut-ticket"] .bd-card__name { color: var(--text); font-family: var(--font-display); font-weight: 700; }
[data-theme="neobrut-ticket"] .bd-card__fx { color: var(--muted); }
[data-theme="neobrut-ticket"] .bd-card__cost { color: var(--lime); font-weight: 600; font-family: var(--font-mono); }
[data-theme="neobrut-ticket"] .bd-card__face--back {
  background: radial-gradient(circle at 2px 2px, rgba(248, 249, 245, 0.08) 1.6px, transparent 2.4px) 0 0/26px 26px, var(--card-back-1);
  border: 1.5px solid var(--rail); border-radius: 14px;
}
[data-theme="neobrut-ticket"] .bd-prow { border: 1px solid var(--line); border-left: 4px solid var(--lime); border-radius: 10px; background: var(--surface); }
[data-theme="neobrut-ticket"] .bd-prow--you { border-left-color: var(--coral); }
[data-theme="neobrut-ticket"] .bd-prow__pos { font-family: var(--font-mono); color: var(--lime); }
[data-theme="neobrut-ticket"] .bd-top { border-bottom: 1.5px solid var(--rail); }
[data-theme="neobrut-ticket"] .bd-clock {
  background: #17191c; border: 1.5px solid var(--rail); border-radius: 10px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.5);
}
[data-theme="neobrut-ticket"] .bd-clock__time { color: var(--amber-display); font-family: var(--font-mono); letter-spacing: 0.04em; }
[data-theme="neobrut-ticket"] .bd-clock__lap { color: rgba(248, 249, 245, 0.72); font-family: var(--font-mono); letter-spacing: 0.14em; }
[data-theme="neobrut-ticket"] .bd-h1 em { background: linear-gradient(180deg, transparent 66%, rgba(255, 176, 32, 0.55) 66%); font-style: normal; }
[data-theme="neobrut-ticket"] .bd-tcard { border: 1.5px solid var(--rail); border-top: 4px solid var(--amber-display); border-radius: 16px; background: var(--surface); box-shadow: 0 8px 18px rgba(26, 28, 31, 0.09); }
[data-theme="neobrut-ticket"] .bd-tcard__felt { background: radial-gradient(circle at 2px 2px, rgba(26, 28, 31, 0.09) 1.6px, transparent 2.4px) 0 0/26px 26px, var(--felt); border: 1px solid var(--line); border-radius: 12px; }
[data-theme="neobrut-ticket"] .bd-tcard__status { border: 2px solid var(--lime); border-radius: 999px; color: var(--lime); font-family: var(--font-mono); }
[data-theme="neobrut-ticket"] .bd-card--deal { animation: matBoardIn 0.5s cubic-bezier(0.25, 0.9, 0.3, 1) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   neobrut-locker · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── neobrut-locker · BINDINGS — the clubhouse take (equipment room) ─── */
[data-theme="neobrut-locker"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                                  .fg-event__title, .fg-state__title, .fg-dialog__title) {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.015em;
}
[data-theme="neobrut-locker"] :is(.fg-count__time, .fg-lbrow__pct, .fg-lbrow__ruf) {
  font-family: 'Archivo', sans-serif; font-weight: 900;
  text-shadow: 3px 3px 0 rgba(31, 79, 143, 0.3);
}
[data-theme="neobrut-locker"] :is(.fg-battle__meta, .fg-count__sub, .fg-battle__foot) {
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.8em;
}
[data-theme="neobrut-locker"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  border: 2.5px solid var(--line); border-radius: 14px;
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(38, 34, 26, 0.12) 6px 8px) 14px 12px / calc(100% - 28px) 16px no-repeat,
    var(--surface);
  box-shadow: 5px 6px 0 rgba(38, 34, 26, 0.2), 0 12px 26px rgba(38, 34, 26, 0.1);   /* worn soft */
}
[data-theme="neobrut-locker"] .fg-count {              /* the jersey number */
  border: 2.5px solid var(--line); border-radius: 12px;
  background:
    radial-gradient(circle at 1.6px 1.6px, rgba(38, 34, 26, 0.12) 1.4px, transparent 2.1px) 0 0/7px 7px,
    var(--surface);
  box-shadow: 4px 5px 0 rgba(38, 34, 26, 0.25);
}
[data-theme="neobrut-locker"] :is(.fg-battle__bar, .fg-lbrow__bar) {
  border: 2.5px solid var(--line); border-radius: 8px;
  background: var(--surface-2); padding: 2px;
}
[data-theme="neobrut-locker"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 6px;
  background: repeating-linear-gradient(90deg, transparent 0 9px, rgba(253, 249, 239, 0.5) 9px 10.5px), var(--lime);  /* tape ticks */
  transition: width 0.6s cubic-bezier(0.3, 1.35, 0.5, 1);
}
[data-theme="neobrut-locker"] .fg-lbrow { border-bottom: 1.5px solid rgba(38, 34, 26, 0.3); border-radius: 0; }
[data-theme="neobrut-locker"] .fg-lbrow__rank { font-family: 'Archivo', sans-serif; font-weight: 800; color: var(--lime); }
[data-theme="neobrut-locker"] .fg-lbrow--leader { border-left: 5px solid var(--lime); background: rgba(179, 36, 44, 0.05); }
[data-theme="neobrut-locker"] .fg-event { border-left: 5px solid var(--coral); border-radius: 4px 12px 12px 4px; }
[data-theme="neobrut-locker"] .fg-status {
  font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  border: 2px solid var(--line); border-radius: 999px; background: var(--surface);
}
[data-theme="neobrut-locker"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                  .fg-pro__cta, .fg-state__cta) {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  border: 2.5px solid var(--line); border-radius: 13px 13px 15px 15px;
  background:
    linear-gradient(90deg, rgba(253, 249, 239, 0.85) 0 7px, transparent 7px 20px) 0 0 / 100% 34% no-repeat,
    linear-gradient(-90deg, rgba(253, 249, 239, 0.85) 0 7px, transparent 7px 20px) 0 100% / 100% 34% no-repeat,
    var(--lime);
  box-shadow: 4px 5px 0 var(--line);
  transition: transform 0.4s cubic-bezier(0.3, 1.35, 0.5, 1), box-shadow 0.4s cubic-bezier(0.3, 1.35, 0.5, 1);
}
[data-theme="neobrut-locker"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                  .fg-pro__cta, .fg-state__cta):hover {
  transform: translateY(-3px); box-shadow: 5px 7px 0 var(--line);
}
[data-theme="neobrut-locker"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                                  .fg-pro__cta, .fg-state__cta):active {
  transform: translateY(2px); box-shadow: 2px 2px 0 var(--line);
}
[data-theme="neobrut-locker"] .pop-btn {
  border: 2.5px solid var(--line); border-radius: 13px 13px 15px 15px;
  background:
    linear-gradient(90deg, rgba(253, 249, 239, 0.85) 0 7px, transparent 7px 20px) 0 0 / 100% 34% no-repeat,
    linear-gradient(-90deg, rgba(253, 249, 239, 0.85) 0 7px, transparent 7px 20px) 0 100% / 100% 34% no-repeat,
    var(--lime);
  box-shadow: 4px 5px 0 var(--line);
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em;
  transition: transform 0.4s cubic-bezier(0.3, 1.35, 0.5, 1), box-shadow 0.4s cubic-bezier(0.3, 1.35, 0.5, 1);
}
[data-theme="neobrut-locker"] .pop-btn:active { transform: translateY(2px); box-shadow: 2px 2px 0 var(--line); }
[data-theme="neobrut-locker"] .fg-dz {
  font-family: 'Archivo', sans-serif; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--on-accent);
  background: repeating-linear-gradient(-45deg, rgba(253, 249, 239, 0.14) 0 10px, transparent 10px 20px), var(--danger);
  border: 2.5px solid var(--line); border-radius: 10px;
}
[data-theme="neobrut-locker"] .bd-table {             /* the gym floor */
  background:
    repeating-linear-gradient(90deg, rgba(38, 34, 26, 0.22) 0 2px, transparent 2px 92px),
    repeating-linear-gradient(90deg, rgba(253, 249, 239, 0.05) 0 46px, transparent 46px 92px),
    linear-gradient(rgba(253, 249, 239, 0.06), rgba(38, 34, 26, 0.12)),
    linear-gradient(#8a6f4d, #74603f);   /* hard varnished timber */
  border: 3px solid var(--rail);
  box-shadow: 5px 6px 0 rgba(38, 34, 26, 0.25);
}
[data-theme="neobrut-locker"] .bd-lane { border: 1.5px solid var(--felt-line); }
[data-theme="neobrut-locker"] .bd-finish { background: repeating-linear-gradient(-45deg, rgba(253, 249, 239, 0.85) 0 9px, var(--lane) 9px 18px); }
[data-theme="neobrut-locker"] .bd-pot {               /* the equipment crate */
  position: relative;
  background:
    radial-gradient(circle at 1.6px 1.6px, rgba(38, 34, 26, 0.1) 1.4px, transparent 2.1px) 0 0/7px 7px,
    #f4f1e6;
  border: 2.5px solid var(--line); border-radius: 14px;
  box-shadow: 4px 5px 0 rgba(38, 34, 26, 0.25);
}
[data-theme="neobrut-locker"] .bd-pot::after {          /* the nameplate badge */
  content: "◈";
  position: absolute; top: -11px; left: -10px;
  width: 27px; height: 27px; display: grid; place-items: center;
  background: var(--surface); color: var(--line); font-size: 12px;
  border: 2px solid var(--line); border-radius: 6px;
  box-shadow: 0 2px 0 rgba(38, 34, 26, 0.35);
  transform: rotate(-4deg);
}
[data-theme="neobrut-locker"] .bd-pot__label { color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.2em; font-size: 0.74em; }
[data-theme="neobrut-locker"] .bd-pot__total { color: var(--line); font-family: 'Archivo', sans-serif; font-weight: 900; text-shadow: 3px 3px 0 rgba(31, 79, 143, 0.3); }
[data-theme="neobrut-locker"] .bd-pot__pts { color: var(--text); }
[data-theme="neobrut-locker"] .bd-card__face--front { /* the locker card */
  background:
    repeating-linear-gradient(180deg, transparent 0 6px, rgba(38, 34, 26, 0.14) 6px 8px) 12px 10px / calc(100% - 24px) 18px no-repeat,
    radial-gradient(circle at 1.6px 1.6px, rgba(38, 34, 26, 0.08) 1.4px, transparent 2.1px) 0 0/7px 7px,
    var(--card-face);
  border: 2.5px solid var(--line); border-radius: 14px;
  box-shadow: 4px 5px 0 rgba(38, 34, 26, 0.25);
}
[data-theme="neobrut-locker"] .bd-card__rar {
  font-family: var(--font-mono); font-size: 0.7em; letter-spacing: 0.14em; text-transform: uppercase;
  color: #f2c94c; background: var(--line); border-radius: 6px; padding: 3px 8px;
  transform: rotate(-0.8deg); display: inline-block;
}
[data-theme="neobrut-locker"] .bd-card__name { color: var(--line); font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase; }
[data-theme="neobrut-locker"] .bd-card__fx { color: var(--muted); }
[data-theme="neobrut-locker"] .bd-card__cost { color: var(--lime-dim); font-weight: 700; }
[data-theme="neobrut-locker"] .bd-card__face--back {
  background: repeating-linear-gradient(135deg, rgba(253, 249, 239, 0.16) 0 9px, transparent 9px 18px), var(--card-back-1);
  border: 2.5px solid var(--line); border-radius: 12px;
}
[data-theme="neobrut-locker"] .bd-prow { border: 2px solid var(--line); border-radius: 10px; background: var(--surface); }
[data-theme="neobrut-locker"] .bd-prow--you { border-color: var(--lime); box-shadow: 3px 4px 0 rgba(38, 34, 26, 0.25); }
[data-theme="neobrut-locker"] .bd-prow__pos { font-family: 'Archivo', sans-serif; font-weight: 900; color: var(--lime-dim); }
[data-theme="neobrut-locker"] .bd-top { border-bottom: 2.5px solid var(--line); }
[data-theme="neobrut-locker"] .bd-tcard { border: 2.5px solid var(--line); border-radius: 14px; box-shadow: 4px 5px 0 rgba(38, 34, 26, 0.22); }
[data-theme="neobrut-locker"] .bd-tcard__felt {
  background:
    repeating-linear-gradient(180deg, transparent 0 5px, rgba(38, 34, 26, 0.28) 5px 6.5px) 0 0 / 100% 14px no-repeat,
    var(--felt);
  border: 1.5px solid var(--line); border-radius: 8px;
}
[data-theme="neobrut-locker"] .bd-tcard__status { border: 2px solid var(--line); border-radius: 999px; }
[data-theme="neobrut-locker"] .bd-card--deal { animation: matLockerClack 0.5s cubic-bezier(0.3, 1.35, 0.5, 1) both; }

/* ═══════════════════════════════════════════════════════════════════════════
   x10 · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── x10 · BINDINGS — the after-dark directory ────────────────────────── */
[data-theme="x10"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                       .fg-event__title, .fg-state__title, .fg-dialog__title) {
  font-family: 'Space Grotesk', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.01em;
}
[data-theme="x10"] :is(.fg-battle__meta, .fg-count__sub, .fg-battle__foot, .fg-lbrow__ruf) {
  font-family: var(--font-mono); font-size: 0.78em; letter-spacing: 0.04em;
}
[data-theme="x10"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  background: linear-gradient(180deg, rgba(201, 162, 78, 0.04), transparent 24%), var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid color-mix(in srgb, var(--gold) 42%, var(--line));
  border-radius: 8px;
}
[data-theme="x10"] .fg-lbrow:nth-child(even) {           /* the zebra listing */
  background: rgba(26, 34, 26, 0.5);
}
[data-theme="x10"] .fg-lbrow__rank {
  font-family: var(--font-mono); font-size: 0.8em;
  background: rgba(74, 107, 71, 0.35); border-radius: 4px;
}
[data-theme="x10"] .fg-lbrow--leader { border-left-color: var(--gold); }
[data-theme="x10"] .fg-status { font-family: var(--font-mono); border-radius: 6px; border: 1px solid color-mix(in srgb, var(--lime) 45%, var(--line)); }
[data-theme="x10"] .fg-chip { border-radius: 6px; font-family: var(--font-body); font-weight: 600; }
[data-theme="x10"] .fg-chip[aria-pressed="true"], [data-theme="x10"] .fg-chip.is-selected { box-shadow: 0 0 0 3px rgba(74, 107, 71, 0.3); }
[data-theme="x10"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta) {
  border-radius: 7px; font-weight: 600;
  box-shadow: 0 2px 12px -2px rgba(201, 162, 78, 0.3);
}
[data-theme="x10"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta):active { transform: translateY(1px); }
[data-theme="x10"] .fg-dz { border-radius: 8px; border-left: 3px solid var(--gold); }
[data-theme="x10"] .bd-table {               /* the green index floor */
  background:
    repeating-linear-gradient(90deg, rgba(238, 242, 234, 0.03) 0 1px, transparent 1px 56px),
    radial-gradient(80% 70% at 50% 10%, rgba(110, 154, 106, 0.08), transparent 60%),
    linear-gradient(#14210f, #0e1810);
  border: 1px solid var(--line-bright);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);
}
[data-theme="x10"] .bd-lane { border: 1px dashed rgba(110, 154, 106, 0.28); }
[data-theme="x10"] .bd-pot {                  /* gold-rimmed listing plate */
  background: linear-gradient(180deg, #1c261b, #141c13);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line));
  border-radius: 10px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.7), 0 2px 12px -2px rgba(201, 162, 78, 0.3);
}
[data-theme="x10"] .bd-pot__label { color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.12em; font-size: 0.8em; }
[data-theme="x10"] .bd-pot__total { color: var(--gold-glow); font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
[data-theme="x10"] .bd-card__face--front {
  background: linear-gradient(180deg, #16211a, #101812);
  border: 1px solid var(--line-bright);
  border-top: 2px solid color-mix(in srgb, var(--gold) 45%, var(--line));
  border-radius: 8px;
}
[data-theme="x10"] .bd-card__name { color: var(--text); font-weight: 600; }
[data-theme="x10"] .bd-prow { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--lime-dim); border-radius: 6px; }
[data-theme="x10"] .bd-prow--you { border-left-color: var(--gold); }
[data-theme="x10"] .bd-tcard { border: 1px solid var(--line-bright); border-radius: 8px; background: var(--surface); }
[data-theme="x10"] .pop-btn { border-radius: 7px; font-weight: 600; box-shadow: 0 2px 12px -2px rgba(201, 162, 78, 0.3); }

/* ═══════════════════════════════════════════════════════════════════════════
   doof · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── doof · BINDINGS — glow-stained void ──────────────────────────────── */
[data-theme="doof"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                        .fg-event__title) {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  background: var(--gradient-sacred);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="doof"] :is(.fg-count__time, .fg-lbrow__pct) {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--cyan);
  text-shadow: 0 0 16px rgba(34, 211, 238, 0.4);
}
[data-theme="doof"] :is(.fg-battle, .fg-dialog, .fg-state) {
  background: linear-gradient(160deg, rgba(168, 85, 247, 0.08), transparent 46%, rgba(34, 211, 238, 0.04)), var(--surface);
  border: 1px solid rgba(168, 85, 247, 0.34);
  border-radius: 30px 18px 34px 20px / 20px 34px 18px 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 30px rgba(147, 51, 234, 0.2);
}
[data-theme="doof"] .fg-sheet { border-radius: 26px 16px 30px 18px / 18px 30px 16px 26px; border: 1px solid rgba(34, 211, 238, 0.28); }
[data-theme="doof"] .fg-lbrow { border-radius: 20px 12px 22px 14px / 14px 22px 12px 20px; border-left: 2px solid rgba(168, 85, 247, 0.4); }
[data-theme="doof"] .fg-lbrow--leader {
  border-left-color: var(--orange);
  background: linear-gradient(90deg, rgba(249, 115, 22, 0.1), transparent 60%), var(--surface);
  box-shadow: 0 0 22px rgba(249, 115, 22, 0.14);
}
[data-theme="doof"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 999px;
  background: var(--gradient-mystical);
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
}
[data-theme="doof"] .fg-chip { border-radius: 999px; border-color: rgba(168, 85, 247, 0.3); }
[data-theme="doof"] .fg-chip[aria-pressed="true"], [data-theme="doof"] .fg-chip.is-selected {
  background: rgba(168, 85, 247, 0.16); color: var(--purple);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.5), 0 0 18px rgba(168, 85, 247, 0.3);
}
[data-theme="doof"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta) {
  border: 0; border-radius: 999px;
  background: var(--gradient-mystical);
  box-shadow: 0 0 26px rgba(249, 115, 22, 0.5), 0 3px 14px rgba(234, 88, 12, 0.35);
  transition: background 0.4s var(--ease), box-shadow 0.3s var(--ease);
}
[data-theme="doof"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta):hover {
  background: var(--gradient-fire);
  box-shadow: 0 0 34px rgba(168, 85, 247, 0.55);
}
[data-theme="doof"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta):active { transform: scale(0.96); }
[data-theme="doof"] .fg-status {
  font-family: var(--font-mono); border-radius: 999px;
  color: var(--cyan); background: rgba(34, 211, 238, 0.1);
  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.4), 0 0 14px rgba(34, 211, 238, 0.25);
}
[data-theme="doof"] .fg-dz {
  border-radius: 18px 10px 20px 12px / 12px 20px 10px 18px;
  border: 1px solid rgba(249, 115, 22, 0.5);
  background: linear-gradient(135deg, rgba(249, 115, 22, 0.28), rgba(168, 85, 247, 0.18)), #16161f;
  box-shadow: 0 0 26px rgba(249, 115, 22, 0.3);
}
[data-theme="doof"] .bd-table {               /* the dancefloor */
  background:
    radial-gradient(60% 44% at 30% -6%, rgba(168, 85, 247, 0.22), transparent 62%),
    radial-gradient(50% 40% at 85% 90%, rgba(34, 211, 238, 0.12), transparent 60%),
    linear-gradient(#0d0d16, #080810);
  border: 1px solid rgba(168, 85, 247, 0.4);
  box-shadow: 0 0 40px rgba(147, 51, 234, 0.18), inset 0 0 80px rgba(0, 0, 0, 0.55);
}
[data-theme="doof"] .bd-lane { border: 1px solid rgba(34, 211, 238, 0.22); border-radius: 999px; }
[data-theme="doof"] .bd-finish { background: repeating-linear-gradient(45deg, rgba(168, 85, 247, 0.5) 0 8px, transparent 8px 16px), rgba(34, 211, 238, 0.2); }
[data-theme="doof"] .bd-pot {                  /* the glow orb */
  background:
    radial-gradient(60% 60% at 32% 28%, rgba(34, 211, 238, 0.25), transparent 60%),
    linear-gradient(135deg, rgba(168, 85, 247, 0.35), rgba(147, 51, 234, 0.2)), #16121f;
  border: 1px solid rgba(168, 85, 247, 0.55);
  border-radius: 34px 22px 36px 24px / 24px 36px 22px 34px;
  box-shadow: 0 0 34px rgba(147, 51, 234, 0.35), 0 14px 34px rgba(0, 0, 0, 0.6);
}
[data-theme="doof"] .bd-pot__label { color: var(--muted); font-family: var(--font-mono); font-size: 0.78em; letter-spacing: 0.14em; }
[data-theme="doof"] .bd-pot__total {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  background: var(--gradient-mystical); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="doof"] .bd-card__face--front {
  background: linear-gradient(160deg, rgba(168, 85, 247, 0.16), rgba(34, 211, 238, 0.05)), #131320;
  border: 1px solid rgba(168, 85, 247, 0.45);
  border-radius: 24px 14px 26px 16px / 16px 26px 14px 24px;
  box-shadow: 0 0 22px rgba(147, 51, 234, 0.2);
}
[data-theme="doof"] .bd-card__face--back { background: repeating-linear-gradient(45deg, rgba(34, 211, 238, 0.1) 0 8px, transparent 8px 16px), #1a1030; border: 1px solid rgba(34, 211, 238, 0.3); border-radius: 24px 14px 26px 16px / 16px 26px 14px 24px; }
[data-theme="doof"] .bd-card__name { color: var(--text); }
[data-theme="doof"] .bd-card__cost { color: var(--orange); font-family: var(--font-mono); }
[data-theme="doof"] .bd-prow { background: rgba(17, 17, 24, 0.85); border: 1px solid #1e1e2e; border-left: 3px solid var(--purple); border-radius: 18px 10px 20px 12px / 12px 20px 10px 18px; }
[data-theme="doof"] .bd-prow--you { border-left-color: var(--cyan); box-shadow: 0 0 18px rgba(34, 211, 238, 0.18); }
[data-theme="doof"] .bd-tcard { border: 1px solid rgba(168, 85, 247, 0.4); border-radius: 20px 12px 22px 14px / 14px 22px 12px 20px; background: var(--surface); }
[data-theme="doof"] .pop-btn {
  border: 0; border-radius: 999px;
  background: var(--gradient-mystical);
  box-shadow: 0 0 26px rgba(249, 115, 22, 0.5), 0 3px 14px rgba(234, 88, 12, 0.35);
  transition: background 0.4s var(--ease), transform 0.2s var(--ease);
}
[data-theme="doof"] .pop-btn:active { transform: scale(0.95); }

/* ═══════════════════════════════════════════════════════════════════════════
   qalarc · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── qalarc · BINDINGS — glass on the pastel garden ────────────────────── */
[data-theme="qalarc"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                          .fg-event__title, .fg-state__title, .fg-dialog__title) {
  font-family: 'DM Serif Display', Georgia, serif; font-weight: 400;
}
[data-theme="qalarc"] :is(.fg-battle__title, .fg-sheet__title) em { color: var(--lime); font-style: italic; }
[data-theme="qalarc"] :is(.fg-battle__meta, .fg-count__sub, .fg-battle__foot) {
  font-family: var(--font-mono); font-size: 0.76em; letter-spacing: 0.02em;
}
[data-theme="qalarc"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  background: var(--glass);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: 0 2px 16px rgba(90, 60, 120, 0.12), 0 4px 32px rgba(90, 60, 120, 0.08);
}
[data-theme="qalarc"] .fg-lbrow { border-radius: var(--pill); border: 1px solid transparent; background: rgba(255, 255, 255, 0.45); }
[data-theme="qalarc"] .fg-lbrow--leader { background: linear-gradient(90deg, var(--blush), transparent 70%), rgba(255, 255, 255, 0.55); }
[data-theme="qalarc"] .fg-lbrow__rank { border-radius: var(--pill); background: var(--lavender); color: #3d2a5e; font-weight: 600; }
[data-theme="qalarc"] :is(.fg-battle__bar, .fg-lbrow__bar) { border-radius: var(--pill); background: rgba(42, 32, 53, 0.08); }
[data-theme="qalarc"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: var(--pill);
  background: linear-gradient(90deg, #6d4fa3, #a85a68 34%, #9a6b3c 62%, #4e8d63);
}
[data-theme="qalarc"] .fg-chip { border-radius: var(--pill); border-color: var(--glass-border); background: rgba(255, 255, 255, 0.55); }
[data-theme="qalarc"] .fg-chip[aria-pressed="true"], [data-theme="qalarc"] .fg-chip.is-selected { background: var(--lavender); color: #3d2a5e; border-color: transparent; }
[data-theme="qalarc"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta) {
  border-radius: var(--pill); font-family: var(--font-body); font-weight: 600;
  box-shadow: 0 4px 18px rgba(109, 79, 163, 0.2);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
[data-theme="qalarc"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta):hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(109, 79, 163, 0.26); }
[data-theme="qalarc"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta):active { transform: translateY(0) scale(0.98); }
[data-theme="qalarc"] .fg-status { border-radius: var(--pill); background: var(--sky-pastel); color: #2a3a4a; font-weight: 700; }
[data-theme="qalarc"] .fg-dz { border-radius: var(--pill); background: linear-gradient(135deg, var(--blush), var(--peach)); color: #4a2a35; }
[data-theme="qalarc"] .fg-count { border-radius: var(--radius-lg); background: var(--glass); backdrop-filter: blur(10px); border: 1px solid var(--glass-border); }
[data-theme="qalarc"] .fg-count__time { font-family: 'DM Serif Display', Georgia, serif; color: var(--lime); }
[data-theme="qalarc"] .bd-table {               /* the garden lawn */
  background:
    radial-gradient(70% 55% at 24% -8%, rgba(184, 232, 200, 0.5), transparent 60%),
    radial-gradient(60% 50% at 88% 96%, rgba(168, 216, 234, 0.4), transparent 62%),
    linear-gradient(#f4ecdf, #efe6d4);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 32px rgba(90, 60, 120, 0.1);
}
[data-theme="qalarc"] .bd-lane { border: 1.5px dashed rgba(109, 79, 163, 0.25); border-radius: var(--pill); }
[data-theme="qalarc"] .bd-finish { background: repeating-linear-gradient(45deg, var(--blush) 0 8px, transparent 8px 16px), rgba(255,255,255,0.4); border-radius: var(--pill); }
[data-theme="qalarc"] .bd-pot {                 /* lavender glass medallion */
  background: var(--glass);
  backdrop-filter: blur(12px);
  border: 1.5px solid var(--lavender);
  border-radius: var(--pill);
  box-shadow: 0 8px 26px rgba(109, 79, 163, 0.18), 0 0 0 5px rgba(255, 255, 255, 0.5);
}
[data-theme="qalarc"] .bd-pot__label { color: var(--muted); font-family: var(--font-mono); font-size: 0.76em; letter-spacing: 0.12em; }
[data-theme="qalarc"] .bd-pot__total { font-family: 'DM Serif Display', Georgia, serif; color: var(--lime); }
[data-theme="qalarc"] .bd-card__face--front {   /* pastel-top glass card */
  background: var(--glass); backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  border-top: 4px solid var(--mint);
  border-radius: var(--radius);
  box-shadow: 0 2px 16px rgba(90, 60, 120, 0.12);
}
[data-theme="qalarc"] .bd-card__face--back { background: var(--lavender); border: 1px solid var(--glass-border); border-radius: var(--radius); }
[data-theme="qalarc"] .bd-card__name { color: var(--text); font-family: var(--font-body); font-weight: 700; }
[data-theme="qalarc"] .bd-card__cost { color: #a85a68; font-weight: 700; }
[data-theme="qalarc"] .bd-prow { background: rgba(255, 255, 255, 0.55); border: 1px solid transparent; border-left: 4px solid var(--peach); border-radius: var(--pill); }
[data-theme="qalarc"] .bd-prow--you { border-left-color: var(--mint); }
[data-theme="qalarc"] .bd-tcard { border: 1px solid var(--glass-border); border-radius: var(--radius-lg); background: var(--glass); }
[data-theme="qalarc"] .pop-btn { border-radius: var(--pill); font-family: var(--font-body); font-weight: 600; box-shadow: 0 4px 18px rgba(109, 79, 163, 0.2); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
[data-theme="qalarc"] .pop-btn:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════════════════════════════════════
   tradez · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── tradez · BINDINGS — the honest ledger ─────────────────────────────── */
[data-theme="tradez"] :is(.fg-battle__title, .fg-sheet__title, .fg-state__title, .fg-dialog__title) {
  font-family: 'Fraunces', Georgia, serif; font-weight: 800;
}
[data-theme="tradez"] :is(.fg-pwr__name, .fg-event__title) {
  font-family: 'Fraunces', Georgia, serif; font-weight: 700;
}
[data-theme="tradez"] :is(.fg-count__time, .fg-lbrow__pct) {
  font-family: 'Fraunces', Georgia, serif; font-weight: 900;
  font-variation-settings: 'opsz' 144, 'WONK' 1;
}
[data-theme="tradez"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 40px -12px rgba(31, 42, 31, 0.18);
}
[data-theme="tradez"] .fg-lbrow:nth-child(even) {           /* the workbook stripe */
  background: var(--surface-2);
}
[data-theme="tradez"] .fg-lbrow__rank {
  font-family: 'Fraunces', Georgia, serif; font-weight: 800;
  background: var(--surface-2); border-radius: 6px;
}
[data-theme="tradez"] .fg-lbrow--leader { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(201, 162, 78, 0.14), transparent 60%), var(--surface); }
[data-theme="tradez"] :is(.fg-battle__bar, .fg-lbrow__bar) { border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="tradez"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 999px; background: linear-gradient(90deg, var(--lime), #5a7d56);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 78, 0.45);
}
[data-theme="tradez"] .fg-chip { border-radius: 8px; border-color: var(--line-bright); background: var(--surface); font-weight: 600; }
[data-theme="tradez"] .fg-chip[aria-pressed="true"], [data-theme="tradez"] .fg-chip.is-selected { box-shadow: 0 0 0 3px rgba(74, 107, 71, 0.3); }
[data-theme="tradez"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta) {
  border-radius: 8px; font-family: 'Fraunces', Georgia, serif; font-weight: 700;
  box-shadow: 0 3px 0 rgba(31, 42, 31, 0.35);
  transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}
[data-theme="tradez"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta):hover { transform: translateY(-1px); box-shadow: 0 4px 0 rgba(31, 42, 31, 0.4); }
[data-theme="tradez"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta):active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(31, 42, 31, 0.35); }
[data-theme="tradez"] .fg-status { border-radius: 6px; background: color-mix(in srgb, var(--gold) 16%, var(--surface)); color: #5c470f; border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); font-weight: 700; }
[data-theme="tradez"] .fg-dz { border-radius: 8px; border: 1px solid rgba(163, 84, 28, 0.4); border-left: 4px solid var(--urgency); background: linear-gradient(90deg, rgba(163, 84, 28, 0.1), transparent 65%), var(--surface); color: #5e3210; }
[data-theme="tradez"] .bd-table {               /* the work site */
  background:
    repeating-linear-gradient(90deg, rgba(31, 42, 31, 0.03) 0 2px, transparent 2px 48px),
    linear-gradient(135deg, #FBF8EF 0%, #F2EEDD 100%);
  border: 2px solid var(--lime);
  border-radius: 10px;
  box-shadow: 0 18px 40px -12px rgba(31, 42, 31, 0.2);
}
[data-theme="tradez"] .bd-lane { border: 1.5px dashed rgba(61, 92, 58, 0.3); }
[data-theme="tradez"] .bd-finish { background: repeating-linear-gradient(45deg, var(--gold-glow) 0 8px, var(--lime) 8px 16px); }
[data-theme="tradez"] .bd-pot {                  /* gum-stamped quote block */
  background: linear-gradient(135deg, #1F2A1F 0%, #34402F 100%);
  border: 1px solid #1F2A1F;
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(31, 42, 31, 0.4), 0 18px 40px -12px rgba(31, 42, 31, 0.35);
}
[data-theme="tradez"] .bd-pot__label { color: rgba(251, 248, 239, 0.7); font-family: var(--font-mono); font-size: 0.76em; letter-spacing: 0.14em; }
[data-theme="tradez"] .bd-pot__total { font-family: 'Fraunces', Georgia, serif; font-weight: 900; color: var(--gold-glow); }
[data-theme="tradez"] .bd-card__face--front {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--lime);
  border-radius: 8px;
  box-shadow: 0 10px 26px -10px rgba(31, 42, 31, 0.22);
}
[data-theme="tradez"] .bd-card__face--back { background: var(--lime); border: 1px solid var(--lime-dim); border-radius: 8px; }
[data-theme="tradez"] .bd-card__name { color: var(--text); font-family: 'Fraunces', Georgia, serif; font-weight: 700; }
[data-theme="tradez"] .bd-card__cost { color: #8a6e2e; font-weight: 800; }
[data-theme="tradez"] .bd-prow { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--lime); border-radius: 8px; box-shadow: 0 2px 0 rgba(31, 42, 31, 0.12); }
[data-theme="tradez"] .bd-prow--you { border-left-color: var(--gold); }
[data-theme="tradez"] .bd-tcard { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 10px 26px -10px rgba(31, 42, 31, 0.2); }
[data-theme="tradez"] .pop-btn { border-radius: 8px; font-family: 'Fraunces', Georgia, serif; font-weight: 700; box-shadow: 0 3px 0 rgba(31, 42, 31, 0.35); transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease); }
[data-theme="tradez"] .pop-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(31, 42, 31, 0.35); }

/* ═══════════════════════════════════════════════════════════════════════════
   gmux · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── gmux · BINDINGS — paper terminal ──────────────────────────────────── */
[data-theme="gmux"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                        .fg-event__title, .fg-state__title, .fg-dialog__title) {
  font-family: var(--font-mono); font-weight: 700; letter-spacing: -0.02em;
}
[data-theme="gmux"] :is(.fg-battle__meta, .fg-count__sub, .fg-battle__foot, .fg-lbrow__ruf) {
  font-family: var(--font-mono); font-size: 0.76em; letter-spacing: 0.03em;
}
[data-theme="gmux"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--lime);
  border-radius: 8px;
  box-shadow: 0 8px 22px -10px rgba(26, 32, 26, 0.22);
}
[data-theme="gmux"] .fg-lbrow { border: 1px solid var(--rule); border-radius: var(--pill); background: var(--paper); }
[data-theme="gmux"] .fg-lbrow::before {          /* the agent status dot */
  content: ""; width: 8px; height: 8px; border-radius: 50%; align-self: center;
  background: var(--idle); margin-right: 4px; flex: none;
}
[data-theme="gmux"] .fg-lbrow--leader { border-color: color-mix(in srgb, var(--lime) 55%, var(--rule)); }
[data-theme="gmux"] .fg-lbrow--leader::before { background: var(--ok); box-shadow: 0 0 8px rgba(46, 107, 64, 0.5); }
[data-theme="gmux"] .fg-lbrow__rank { font-family: var(--font-mono); background: var(--surface-2); border-radius: 4px; }
[data-theme="gmux"] :is(.fg-battle__bar, .fg-lbrow__bar) { border-radius: 4px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--rule); height: 10px; }
[data-theme="gmux"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {  /* segmented — no gradient */
  border-radius: 2px;
  background: repeating-linear-gradient(90deg, rgba(250, 251, 243, 0.85) 0 2px, transparent 2px 10px), var(--lime);
}
[data-theme="gmux"] .fg-chip { font-family: var(--font-mono); font-size: 0.82em; border-radius: var(--pill); border: 1px solid var(--rule); background: var(--paper); }
[data-theme="gmux"] .fg-chip::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--idle); margin-right: 6px; vertical-align: 1px; }
[data-theme="gmux"] .fg-chip[aria-pressed="true"], [data-theme="gmux"] .fg-chip.is-selected { color: var(--lime); border-color: color-mix(in srgb, var(--lime) 60%, var(--rule)); }
[data-theme="gmux"] .fg-chip[aria-pressed="true"]::before, [data-theme="gmux"] .fg-chip.is-selected::before { background: var(--ok); box-shadow: 0 0 6px rgba(46, 107, 64, 0.5); }
[data-theme="gmux"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta) {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.9em;
  border-radius: 6px; border: 1px solid color-mix(in srgb, var(--lime) 55%, var(--rule));
  box-shadow: 0 2px 0 rgba(26, 32, 26, 0.16);
  transition: box-shadow 0.1s steps(2, end), transform 0.1s steps(2, end);
}
[data-theme="gmux"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta):active { transform: translateY(2px); box-shadow: 0 0 0 rgba(26, 32, 26, 0); }
[data-theme="gmux"] .fg-status { font-family: var(--font-mono); border-radius: var(--pill); background: color-mix(in srgb, var(--wait) 12%, var(--paper)); color: #5c430e; border: 1px solid color-mix(in srgb, var(--wait) 40%, var(--rule)); }
[data-theme="gmux"] .fg-dz { font-family: var(--font-mono); border-radius: 6px; border: 1px solid color-mix(in srgb, var(--alert) 45%, var(--rule)); border-left: 4px solid var(--alert); background: color-mix(in srgb, var(--alert) 8%, var(--paper)); color: #5e2d1a; }
[data-theme="gmux"] .fg-count { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
[data-theme="gmux"] .fg-count__time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink, var(--text)); text-shadow: 0 1px 0 rgba(212, 168, 74, 0.35); }
[data-theme="gmux"] .bd-table {                 /* the clearing floor */
  background:
    radial-gradient(circle at 1px 1px, rgba(26, 32, 26, 0.08) 1px, transparent 1.6px) 0 0/22px 22px,
    linear-gradient(#f4f6ec, #edefe6);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--lime);
  border-radius: 8px;
  box-shadow: 0 8px 22px -10px rgba(26, 32, 26, 0.22);
}
[data-theme="gmux"] .bd-lane { border: 1px dashed rgba(46, 107, 64, 0.3); }
[data-theme="gmux"] .bd-finish { background: repeating-linear-gradient(45deg, var(--wait) 0 8px, var(--paper) 8px 16px); }
[data-theme="gmux"] .bd-pot {                    /* the terminal readout */
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--lime);
  border-radius: 8px;
  box-shadow: 0 8px 22px -10px rgba(26, 32, 26, 0.3);
}
[data-theme="gmux"] .bd-pot__label { color: var(--muted); font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.16em; text-transform: uppercase; }
[data-theme="gmux"] .bd-pot__total { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink, var(--text)); text-shadow: 0 1px 0 rgba(212, 168, 74, 0.4); }
[data-theme="gmux"] .bd-card__face--front {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--wait);
  border-radius: 8px;
}
[data-theme="gmux"] .bd-card__face--back { background: var(--surface-2); border: 1px solid var(--rule); border-radius: 8px; }
[data-theme="gmux"] .bd-card__name { color: var(--text); font-family: var(--font-mono); font-weight: 600; font-size: 0.95em; }
[data-theme="gmux"] .bd-card__cost { color: var(--alert); font-family: var(--font-mono); }
[data-theme="gmux"] .bd-prow { background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--idle); border-radius: var(--pill); }
[data-theme="gmux"] .bd-prow--you { border-left-color: var(--ok); }
[data-theme="gmux"] .bd-tcard { border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
[data-theme="gmux"] .pop-btn { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--lime) 55%, var(--rule)); box-shadow: 0 2px 0 rgba(26, 32, 26, 0.16); transition: box-shadow 0.1s steps(2, end), transform 0.1s steps(2, end); }
[data-theme="gmux"] .pop-btn:active { transform: translateY(2px); box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   volkus · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── volkus · BINDINGS — the portrait wall ─────────────────────────────── */
[data-theme="volkus"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                          .fg-event__title, .fg-state__title, .fg-dialog__title) {
  font-family: Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: 0.01em;
}
[data-theme="volkus"] :is(.fg-battle__meta, .fg-count__sub, .fg-battle__foot, .fg-lbrow__ruf) {
  font-family: 'Courier New', monospace; font-size: 0.78em; letter-spacing: 0.02em;
}
[data-theme="volkus"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  background: linear-gradient(180deg, rgba(240, 196, 154, 0.03), transparent 20%), var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.8);
}
[data-theme="volkus"] .fg-lbrow { border: 1px solid var(--line); border-radius: 6px; background: transparent; }
[data-theme="volkus"] .fg-lbrow:nth-child(8n+1) .fg-lbrow__rank { background: var(--skin-white); color: #3a2a18; }
[data-theme="volkus"] .fg-lbrow:nth-child(8n+2) .fg-lbrow__rank { background: var(--skin-east-asian); color: #3a2414; }
[data-theme="volkus"] .fg-lbrow:nth-child(8n+3) .fg-lbrow__rank { background: var(--skin-latino); color: #2c180a; }
[data-theme="volkus"] .fg-lbrow:nth-child(8n+4) .fg-lbrow__rank { background: var(--skin-s-asian); color: #140a04; }
[data-theme="volkus"] .fg-lbrow:nth-child(8n+5) .fg-lbrow__rank { background: var(--skin-mixed); color: #f5e8dc; }
[data-theme="volkus"] .fg-lbrow:nth-child(8n+6) .fg-lbrow__rank { background: var(--skin-m-east); color: #f5e8dc; }
[data-theme="volkus"] .fg-lbrow:nth-child(8n+7) .fg-lbrow__rank { background: var(--skin-black-l); color: #f5e8dc; }
[data-theme="volkus"] .fg-lbrow__rank { border-radius: 4px; font-family: Georgia, serif; font-style: italic; }
[data-theme="volkus"] .fg-lbrow--leader { border-color: rgba(240, 196, 154, 0.4); }
[data-theme="volkus"] :is(.fg-battle__bar, .fg-lbrow__bar) { border-radius: 3px; background: #1a1a1a; box-shadow: inset 0 0 0 1px var(--line); }
[data-theme="volkus"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {   /* every bar is people */
  border-radius: 3px; background: var(--skin-ramp);
}
[data-theme="volkus"] .fg-chip { font-family: 'Courier New', monospace; font-size: 0.82em; border-radius: 999px; border: 1px solid var(--line-bright); background: transparent; }
[data-theme="volkus"] .fg-chip[aria-pressed="true"], [data-theme="volkus"] .fg-chip.is-selected { background: var(--skin-black-d); color: var(--sky); border-color: transparent; }
[data-theme="volkus"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta) {
  font-family: Georgia, serif; font-style: italic;
  border-radius: 6px; border: 1px solid rgba(194, 120, 64, 0.55);
  background: rgba(194, 120, 64, 0.12); color: var(--text);
  box-shadow: none; transition: background 0.2s ease, color 0.2s ease;
}
[data-theme="volkus"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta):hover { background: var(--lime); color: var(--on-accent); }
[data-theme="volkus"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta):active { background: var(--lime-dim); color: var(--on-accent); }
[data-theme="volkus"] .fg-status { font-family: 'Courier New', monospace; border-radius: 4px; border: 1px solid rgba(240, 196, 154, 0.4); color: var(--sky); }
[data-theme="volkus"] .fg-dz { font-family: 'Courier New', monospace; border-radius: 4px; border: 1px solid rgba(212, 85, 46, 0.5); border-left: 4px solid var(--coral); background: linear-gradient(90deg, rgba(212, 85, 46, 0.12), transparent 70%), var(--surface); }
[data-theme="volkus"] .fg-count { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
[data-theme="volkus"] .fg-count__time { font-family: Georgia, serif; font-style: italic; color: var(--sky); }
[data-theme="volkus"] .bd-table {               /* the quiet gallery floor */
  background:
    radial-gradient(60% 46% at 50% -6%, rgba(194, 120, 64, 0.1), transparent 62%),
    linear-gradient(#121212, #0d0d0d 70%);
  border: 1px solid var(--line-bright);
  border-radius: 6px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.9);
}
[data-theme="volkus"] .bd-lane { border: 1px solid rgba(240, 196, 154, 0.14); border-radius: 4px; }
[data-theme="volkus"] .bd-finish { background: var(--skin-ramp); border-radius: 2px; }
[data-theme="volkus"] .bd-pot {                  /* the warm spotlight plate */
  background: linear-gradient(180deg, rgba(240, 196, 154, 0.07), transparent 40%), var(--surface);
  border: 1px solid var(--line-bright);
  border-top: 3px solid transparent;
  border-image: var(--skin-ramp) 1;
  border-image-slice: 1 0 0 0;
  box-shadow: 0 14px 34px -14px rgba(0, 0, 0, 0.9);
}
[data-theme="volkus"] .bd-pot__label { color: var(--muted); font-family: 'Courier New', monospace; font-size: 0.76em; letter-spacing: 0.14em; }
[data-theme="volkus"] .bd-pot__total { font-family: Georgia, serif; font-style: italic; color: var(--sky); }
[data-theme="volkus"] .bd-card__face--front {
  background: linear-gradient(180deg, rgba(240, 196, 154, 0.03), transparent 24%), var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid transparent;
  border-image: var(--skin-ramp) 1;
  border-image-slice: 1 0 0 0;
}
[data-theme="volkus"] .bd-card__face--back { background: #241a12; border: 1px solid var(--line); }
[data-theme="volkus"] .bd-card__name { color: var(--text); font-family: Georgia, serif; }
[data-theme="volkus"] .bd-card__cost { color: var(--coral); font-family: 'Courier New', monospace; }
[data-theme="volkus"] .bd-prow { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--skin-s-asian); border-radius: 4px; }
[data-theme="volkus"] .bd-prow--you { border-left-color: var(--sky); }
[data-theme="volkus"] .bd-tcard { border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
[data-theme="volkus"] .pop-btn { font-family: Georgia, serif; font-style: italic; border-radius: 6px; border: 1px solid rgba(194, 120, 64, 0.55); background: rgba(194, 120, 64, 0.12); color: var(--text); box-shadow: none; transition: background 0.2s ease, color 0.2s ease; }
[data-theme="volkus"] .pop-btn:hover { background: var(--lime); color: var(--on-accent); }
[data-theme="volkus"] .pop-btn:active { background: var(--lime-dim); color: var(--on-accent); }

/* ═══════════════════════════════════════════════════════════════════════════
   endispute · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── endispute · BINDINGS — the signed brief ───────────────────────────── */
[data-theme="endispute"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                             .fg-event__title, .fg-state__title, .fg-dialog__title) {
  font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 1.35em; letter-spacing: 0.01em;
}
[data-theme="endispute"] :is(.fg-battle__meta, .fg-count__sub, .fg-battle__foot, .fg-lbrow__ruf) {
  font-family: var(--font-mono); font-size: 0.76em; letter-spacing: 0.08em;
}
[data-theme="endispute"] :is(.fg-battle, .fg-sheet, .fg-dialog, .fg-state, .fg-pro) {
  background: var(--surface);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--gold-rule);
}
[data-theme="endispute"] .fg-lbrow { border: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, var(--bg)); border-radius: 0; }   /* ledger rows */
[data-theme="endispute"] .fg-lbrow__rank { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; color: var(--lime-dim); }
[data-theme="endispute"] .fg-lbrow--leader { background: color-mix(in srgb, var(--gold-rule) 10%, var(--surface)); }
[data-theme="endispute"] :is(.fg-battle__bar, .fg-lbrow__bar) { border: 1px solid var(--ink); border-radius: 0; background: var(--surface-2); }
[data-theme="endispute"] :is(.fg-battle__bar i, .fg-lbrow__bar i) { border-radius: 0; background: linear-gradient(90deg, var(--lime), var(--gold-rule)); }
[data-theme="endispute"] .fg-chip { font-family: var(--font-mono); font-size: 0.8em; letter-spacing: 0.06em; border: none; border-radius: 0; background: transparent; color: var(--ink); }
[data-theme="endispute"] .fg-chip::before { content: "[ "; color: var(--lime-dim); }
[data-theme="endispute"] .fg-chip::after { content: " ]"; color: var(--lime-dim); }
[data-theme="endispute"] .fg-chip[aria-pressed="true"], [data-theme="endispute"] .fg-chip.is-selected { color: var(--lime-dim); font-weight: 600; }
[data-theme="endispute"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta) {
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.86em;
  border-radius: 0; border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  box-shadow: none; transition: box-shadow 0.18s ease;
}
[data-theme="endispute"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta, .fg-pro__cta, .fg-state__cta):hover { box-shadow: inset 0 -3px 0 var(--gold-rule); }
[data-theme="endispute"] .fg-status { font-family: var(--font-mono); border-radius: 0; border: 1px solid var(--gold-rule); color: var(--lime-dim); background: rgba(212, 161, 74, 0.1); }
[data-theme="endispute"] .fg-dz {                 /* the red-stamp clause */
  font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.1em;
  border-radius: 0; border: 2px solid var(--coral); background: transparent; color: var(--coral);
  box-shadow: 3px 3px 0 rgba(138, 45, 22, 0.25);
}
[data-theme="endispute"] .fg-count { border: 1px solid var(--ink); border-radius: 0; background: var(--surface); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--gold-rule); }
[data-theme="endispute"] .fg-count__time { font-family: 'IBM Plex Mono', monospace; font-weight: 500; color: var(--ink); }
[data-theme="endispute"] .bd-table {              /* the negotiation table = a document */
  background:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(10, 10, 10, 0.05) 27px 28px),
    var(--surface);
  border: 1px solid var(--ink);
  border-radius: 0;
  box-shadow: 0 0 0 5px var(--bg), 0 0 0 6px var(--gold-rule), 0 26px 60px -18px rgba(10, 10, 10, 0.4);
}
[data-theme="endispute"] .bd-lane { border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); }
[data-theme="endispute"] .bd-finish { background: repeating-linear-gradient(45deg, var(--gold-rule) 0 8px, var(--surface) 8px 16px); }
[data-theme="endispute"] .bd-pot {                /* the executed clause */
  background: var(--surface);
  border: 1px solid var(--ink); border-radius: 0;
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--gold-rule), 0 18px 44px -14px rgba(10, 10, 10, 0.35);
}
[data-theme="endispute"] .bd-pot__label { color: var(--muted); font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.18em; text-transform: uppercase; }
[data-theme="endispute"] .bd-pot__total { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; color: var(--ink); }
[data-theme="endispute"] .bd-card__face--front {  /* letterhead card */
  background: var(--surface);
  border: 1px solid var(--ink);
  border-top: 3px double var(--gold-rule);
  border-radius: 0;
  box-shadow: 2px 2px 0 rgba(10, 10, 10, 0.12);
}
[data-theme="endispute"] .bd-card__face--back { background: color-mix(in srgb, var(--gold-rule) 22%, var(--surface)); border: 1px solid var(--ink); border-radius: 0; }
[data-theme="endispute"] .bd-card__name { color: var(--ink); font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 700; }
[data-theme="endispute"] .bd-card__cost { color: var(--coral); font-family: var(--font-mono); font-weight: 600; }
[data-theme="endispute"] .bd-prow { background: var(--surface); border: none; border-bottom: 1px solid color-mix(in srgb, var(--ink) 25%, transparent); border-left: 3px solid var(--lime); border-radius: 0; }
[data-theme="endispute"] .bd-prow--you { border-left-color: var(--gold-rule); }
[data-theme="endispute"] .bd-tcard { border: 1px solid var(--ink); border-radius: 0; background: var(--surface); box-shadow: 2px 2px 0 var(--gold-rule); }
[data-theme="endispute"] .pop-btn {
  font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em;
  border-radius: 0; border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  box-shadow: none; transition: box-shadow 0.18s ease;
}
[data-theme="endispute"] .pop-btn:hover { box-shadow: inset 0 -3px 0 var(--gold-rule); }
[data-theme="endispute"] .pop-btn:active { background: #262626; }

/* ═══════════════════════════════════════════════════════════════════════════
   steddi · BINDINGS — fg library + bd board app
   ═══════════════════════════════════════════════════════════════════════ */


/* ── steddi · BINDINGS — the rail measurement blueprint (the founder's page) ── */
[data-theme="steddi"] :is(.fg-battle__title, .fg-sheet__title, .fg-pwr__name,
                          .fg-event__title, .fg-state__title, .fg-dialog__title) {
  font-family: 'Sora', 'Inter', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.015em;
}
[data-theme="steddi"] :is(.fg-count__time, .fg-lbrow__pct, .fg-lbrow__ruf) {
  font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.02em;
  background: linear-gradient(100deg, #d94a3d, #ff6a55);        /* KPI gradient ink */
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="steddi"] :is(.fg-battle__meta, .fg-count__sub, .fg-battle__foot) {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.74em;
}
[data-theme="steddi"] :is(.fg-battle, .fg-sheet, .fg-pro) {
  border: 1px solid var(--line); border-radius: 10px;
  background: linear-gradient(180deg, rgba(217, 74, 61, 0.04), transparent 26%), var(--surface);
}
[data-theme="steddi"] :is(.fg-dialog, .fg-state) {       /* the callout datum edge */
  border: 1px solid var(--line); border-left: 2px solid var(--coral); border-radius: 0 10px 10px 0;
  background: linear-gradient(90deg, rgba(217, 74, 61, 0.07), transparent 70%), var(--surface);
}
[data-theme="steddi"] .fg-count {
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
}
[data-theme="steddi"] :is(.fg-battle__bar, .fg-lbrow__bar) {
  height: 4px; border-radius: 2px; background: var(--surface-2); padding: 0;
}
[data-theme="steddi"] :is(.fg-battle__bar i, .fg-lbrow__bar i) {
  border-radius: 2px; background: linear-gradient(90deg, #a93546, #ff3b2f);
  box-shadow: 0 0 10px rgba(255, 59, 47, 0.4);            /* the beam */
  transition: width 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-theme="steddi"] .fg-lbrow { border-bottom: 1px solid var(--line); border-radius: 0; transition: background 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), padding-left 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
[data-theme="steddi"] .fg-lbrow:hover { background: rgba(217, 74, 61, 0.05); padding-left: 8px; }   /* linklist nudge */
[data-theme="steddi"] .fg-lbrow__rank { font-family: var(--font-mono); font-size: 0.78em; color: var(--coral); letter-spacing: 0.2em; }
[data-theme="steddi"] .fg-lbrow--leader { border-left: 2px solid var(--coral); background: linear-gradient(90deg, rgba(217, 74, 61, 0.06), transparent 60%); }
[data-theme="steddi"] .fg-event { border-left: 2px solid var(--coral); border-radius: 0 8px 8px 0; background: linear-gradient(90deg, rgba(217, 74, 61, 0.05), transparent 65%); }
[data-theme="steddi"] .fg-status {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.2em;
  color: #ff6a55; border: 1px solid var(--line-bright); border-radius: 999px; background: rgba(217, 74, 61, 0.14);
}
[data-theme="steddi"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                          .fg-pro__cta, .fg-state__cta) {
  font-family: var(--font-body); font-weight: 600; font-size: 0.95em;
  border: 0; border-radius: 8px;
  background: linear-gradient(135deg, #a93546, #c23b2f);
  box-shadow: 0 6px 22px rgba(169, 53, 70, 0.3);
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-theme="steddi"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                          .fg-pro__cta, .fg-state__cta):hover {
  transform: translateY(-2px); box-shadow: 0 10px 30px rgba(217, 74, 61, 0.4);
}
[data-theme="steddi"] :is(.fg-nav__log, .fg-sheet__cta, .fg-dialog__cta,
                          .fg-pro__cta, .fg-state__cta):active {
  transform: translateY(0); box-shadow: 0 3px 12px rgba(169, 53, 70, 0.3);
}
[data-theme="steddi"] .pop-btn {
  border: 0; border-radius: 8px;
  background: linear-gradient(135deg, #a93546, #c23b2f);
  box-shadow: 0 6px 22px rgba(169, 53, 70, 0.3);
  font-weight: 600;
  transition: transform 0.18s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.18s cubic-bezier(0.22, 0.61, 0.36, 1);
}
[data-theme="steddi"] .pop-btn:active { transform: translateY(0); box-shadow: 0 3px 12px rgba(169, 53, 70, 0.3); }
[data-theme="steddi"] .fg-dz {
  font-family: var(--font-mono); font-weight: 400; font-size: 0.8em; letter-spacing: 0.16em; text-transform: uppercase;
  color: #ff6a55; background: rgba(255, 59, 47, 0.12);
  border: 1px solid rgba(255, 59, 47, 0.4); border-radius: 6px;
}
[data-theme="steddi"] .fg-dz::before {                   /* the blinking LED */
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 999px;
  background: #ff3b2f; box-shadow: 0 0 8px rgba(255, 59, 47, 0.7);
  margin-right: 9px; vertical-align: 1px;
  animation: matSteddiLed 1.2s steps(2, end) infinite;
}
[data-theme="steddi"] .bd-table {                     /* the blueprint floor */
  background:
    linear-gradient(rgba(241, 232, 230, 0.035) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, rgba(241, 232, 230, 0.035) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(rgba(217, 74, 61, 0.09) 1px, transparent 1px) 0 0 / 96px 96px,
    linear-gradient(90deg, rgba(217, 74, 61, 0.09) 1px, transparent 1px) 0 0 / 96px 96px,
    radial-gradient(80% 70% at 50% 12%, rgba(217, 74, 61, 0.1), transparent 60%),
    var(--felt);
  border: 1px solid var(--rail);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);
}
[data-theme="steddi"] .bd-lane { border: 1px dashed var(--felt-line); }        /* diagram dashes */
[data-theme="steddi"] .bd-finish { background: repeating-linear-gradient(90deg, var(--coral) 0 10px, transparent 10px 18px); border-right: 1px solid var(--coral); }
[data-theme="steddi"] .bd-pot {                       /* the survey plate + datum marks */
  position: relative;
  background: #20161c;   /* hard panel plum */
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5);   /* replaces board.css's amber insets */
}
[data-theme="steddi"] .bd-pot::before,
[data-theme="steddi"] .bd-pot::after {                 /* datum crosshairs */
  content: "+"; position: absolute;
  font: 400 13px/1 var(--font-mono); color: var(--coral); opacity: 0.8;
}
[data-theme="steddi"] .bd-pot::before { top: -8px; left: -7px; }
[data-theme="steddi"] .bd-pot::after { bottom: -8px; right: -7px; }
[data-theme="steddi"] .bd-pot__label { color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.24em; font-size: 0.7em; text-transform: uppercase; }
[data-theme="steddi"] .bd-pot__total {
  font-family: var(--font-mono); font-weight: 600;
  background: linear-gradient(100deg, #d94a3d, #ff6a55);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-theme="steddi"] .bd-pot__pts { color: var(--muted); font-family: var(--font-mono); }
[data-theme="steddi"] .bd-card__face--front {         /* the diag panel */
  background: linear-gradient(180deg, rgba(217, 74, 61, 0.04), transparent 24%), var(--card-face);
  border: 1px solid var(--line); border-radius: 10px;
}
[data-theme="steddi"] .bd-card__rar { font-family: var(--font-mono); font-size: 0.68em; letter-spacing: 0.2em; text-transform: uppercase; color: #ff6a55; }
[data-theme="steddi"] .bd-card__name { color: var(--text); font-family: 'Sora', sans-serif; font-weight: 600; }
[data-theme="steddi"] .bd-card__fx { color: var(--muted); }
[data-theme="steddi"] .bd-card__cost { color: var(--coral); font-weight: 600; font-family: var(--font-mono); }
[data-theme="steddi"] .bd-card__face--back {
  background: linear-gradient(160deg, var(--card-back-1), var(--card-back-2));
  border: 1px solid var(--line); border-radius: 10px;
}
[data-theme="steddi"] .bd-prow { border: 1px solid var(--line); border-left: 2px solid var(--coral); border-radius: 0 8px 8px 0; background: var(--surface); }
[data-theme="steddi"] .bd-prow--you { border-left-color: #ff3b2f; }
[data-theme="steddi"] .bd-prow__pos { font-family: var(--font-mono); color: var(--coral); letter-spacing: 0.1em; }
[data-theme="steddi"] .bd-top { border-bottom: 1px solid var(--line); }
[data-theme="steddi"] .bd-clock { border: 1px solid var(--line); border-radius: 8px; background: rgba(25, 18, 23, 0.6); }
[data-theme="steddi"] .bd-clock__time { color: #ff6a55; font-family: var(--font-mono); }
[data-theme="steddi"] .bd-clock__lap { color: var(--muted); font-family: var(--font-mono); letter-spacing: 0.18em; }
[data-theme="steddi"] .bd-h1 em { background: linear-gradient(100deg, #d94a3d, #ff6a55); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: normal; }
[data-theme="steddi"] .bd-tcard { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: background 0.2s cubic-bezier(0.22, 0.61, 0.36, 1), padding-left 0.2s cubic-bezier(0.22, 0.61, 0.36, 1); }
[data-theme="steddi"] .bd-tcard:hover { background: rgba(217, 74, 61, 0.05); }
[data-theme="steddi"] .bd-tcard__felt { background: linear-gradient(160deg, var(--card-back-1), var(--card-back-2)); border: 1px solid var(--line); border-radius: 6px; }
[data-theme="steddi"] .bd-tcard__status { font-family: var(--font-mono); font-size: 0.78em; letter-spacing: 0.16em; text-transform: uppercase; color: #ff6a55; border: 1px solid var(--line-bright); border-radius: 999px; }
[data-theme="steddi"] .bd-card--deal { animation: matSteddiMist 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) both; }