/*
 * main-redesign-base.css — Foundation for the 3 redesign themes (Cyberpunk Refined / Soft Arcade / Heist Noir).
 *
 * Architecture (matches RULES-FOR-EDITS.md modular philosophy):
 *   - This file defines the redesign token contract (--rd-*) and bridges it to
 *     legacy tokens (--bgs-btn-bgs, --whites, --font, etc.) so the entire game
 *     picks up the new look automatically when a redesign theme is active.
 *   - Each per-theme file (main-cyberpunk.css / main-soft.css / main-noir.css)
 *     ONLY redefines --rd-* tokens and the per-theme backdrop. Nothing else.
 *   - To remove the redesign feature: delete the 3 theme files + this file +
 *     the redesignTheme entry in settings.js. Legacy themes keep working.
 *
 * Loaded by views/layout.pug when res.locals.redesignTheme is set.
 */

@import url("main-base2.css");

@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700;800&family=Nunito:wght@400;600;700&family=Cinzel:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&display=swap");

/* ─── Redesign token contract ────────────────────────────────────
 * Each theme file overrides these under :root. Defaults below are
 * a safe neutral fallback if a theme file forgets a token.
 * ─────────────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --rd-bg:                 #111;
  --rd-bg-elevated:        #1a1a1a;
  --rd-panel:              #222;
  --rd-panel-hi:           #2c2c2c;

  /* Text + lines */
  --rd-ink:                #e8e8e8;
  --rd-ink-dim:            #888;
  --rd-line:               rgba(255, 255, 255, 0.12);

  /* Accent ramp */
  --rd-accent:             #888;
  --rd-accent-hi:          #aaa;
  --rd-accent-dim:         #555;

  /* Status */
  --rd-success:            #4ade80;
  --rd-warning:            #fbbf24;
  --rd-danger:             #f87171;

  /* Type */
  --rd-font-display:       'Inter', system-ui, sans-serif;
  --rd-font-body:          'Inter', system-ui, sans-serif;
  --rd-font-mono:          'JetBrains Mono', ui-monospace, monospace;

  /* Shape */
  --rd-radius-sm:          4px;
  --rd-radius-md:          8px;
  --rd-radius-lg:          16px;

  /* Borders + shadows */
  --rd-border-style:       1px solid var(--rd-line);
  --rd-shadow-card:        none;

  /* Display type micro-styling */
  --rd-text-display-case:    none;
  --rd-text-display-tracking: 0;
}

/* ─── Bridge: legacy tokens → redesign tokens ──────────────────
 * The existing CSS (main-base2.css and component sheets) reads
 * --bgs-btn-bgs / --whites / --font etc. We forward those names
 * to the redesign tokens so existing rules pick up new colors
 * without touching component CSS.
 * ───────────────────────────────────────────────────────────── */
body[data-redesign-theme] {
  --bgs-btn-bgs:           var(--rd-accent);
  --bgs-btn-bgs-t:         color-mix(in oklab, var(--rd-accent) 25%, transparent);
  --bgs-dark:              var(--rd-bg-elevated);
  --whites:                var(--rd-ink);
  --btn-font-color:        var(--rd-accent);
  --head-title-font-color: var(--rd-ink);
  --team-btn-default:      var(--rd-accent-dim);
  --bg-img:                none;
  --bg-size:               cover;
  --button-bg-gif:         none;
  --font:                  var(--rd-font-body);
  --current-player:        var(--rd-accent-hi);
  --outlines:              var(--rd-accent);

  /* Glassmorphism tokens used by gameModeCarousel etc. */
  --glass-bg:              color-mix(in oklab, var(--rd-panel) 75%, transparent);
  --glass-bg-heavy:        var(--rd-panel-hi);
  --glass-bg-light:        color-mix(in oklab, var(--rd-ink) 7%, transparent);
  --glass-border:          var(--rd-line);
  --glass-border-subtle:   color-mix(in oklab, var(--rd-line) 50%, transparent);
  --glass-blur:            blur(14px);
  --glass-blur-sm:         blur(6px);
  --glass-shadow:          var(--rd-shadow-card);
  --glass-shadow-lg:       var(--rd-shadow-card);
  --glow-accent:           0 0 12px color-mix(in oklab, var(--rd-accent) 50%, transparent);
  --glow-info:             0 0 12px color-mix(in oklab, var(--rd-accent-hi) 50%, transparent);
}

/* ─── Body baseline for redesign themes ──────────────────────── */
body[data-redesign-theme] {
  background: var(--rd-bg);
  color: var(--rd-ink);
  font-family: var(--rd-font-body);
}

/* Display-style headings (h1#title and similar) pick up the
 * theme's display font + tracking + casing without having to
 * touch each component sheet. */
body[data-redesign-theme] h1,
body[data-redesign-theme] h2,
body[data-redesign-theme] h3,
body[data-redesign-theme] .welcome-brand,
body[data-redesign-theme] .welcome-splash-text,
body[data-redesign-theme] .welcome-title {
  font-family: var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
}

/* Mono surfaces (room codes, timers, counters). Components opt in
 * by adding the .rd-mono class; legacy room-code displays in the
 * gameModeCarousel etc. get this via per-theme rules. */
body[data-redesign-theme] .rd-mono,
body[data-redesign-theme] .room-code,
body[data-redesign-theme] .taskmaster-vote-countdown {
  font-family: var(--rd-font-mono);
}

/* Per-theme backdrop slot. Each theme file fills the ::before with
 * its signature texture (scanlines / cloud blobs / film grain).
 * Pointer-events disabled so it never blocks interaction. */
body[data-redesign-theme]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ─── Phase 3: Lobby + login + room-code reskin ──────────────────
 * These selectors target the elements created dynamically by
 * clientMain.js / multiplayer-game.js / join-lobby-game.js, plus
 * the static login form in layout.pug. Token-driven so all 3
 * themes pick up palette + typography from their :root overrides.
 * ─────────────────────────────────────────────────────────────── */

/* Header / brand */
body[data-redesign-theme] .header-area {
  background: color-mix(in oklab, var(--rd-bg, #0a0e1f) 80%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rd-line);
}
body[data-redesign-theme] h1#title,
body[data-redesign-theme] h1#title a {
  background: transparent;
  color: var(--rd-ink);
  font-family: var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
}

/* Login form (layout.pug) — match the Lobby Join card from the design */
body[data-redesign-theme] .login-form {
  display: inline-flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem;
  margin: 1rem auto;
  max-width: 400px;
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  box-shadow: var(--rd-shadow-card);
}
body[data-redesign-theme] .generic-text-input-medium {
  padding: 0.6rem 0.9rem;
  background: var(--rd-bg-elevated);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-sm);
  color: var(--rd-ink);
  font-family: var(--rd-font-mono);
  font-size: 1rem;
}
body[data-redesign-theme] .generic-text-input-medium:focus {
  outline: none;
  border-color: var(--rd-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--rd-accent) 30%, transparent);
}
body[data-redesign-theme] .generic-text-input-medium::placeholder {
  color: var(--rd-ink-dim);
  letter-spacing: 0.05em;
}
body[data-redesign-theme] #login-button,
body[data-redesign-theme] #create-user-button,
body[data-redesign-theme] .login-button,
body[data-redesign-theme] .submit {
  padding: 0.65rem 1.4rem;
  background: var(--rd-accent);
  color: var(--rd-bg);
  border: 1px solid var(--rd-accent);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  cursor: pointer;
  box-shadow: var(--rd-shadow-card);
  transition: transform 0.15s ease, filter 0.15s ease;
}
body[data-redesign-theme] #login-button:hover,
body[data-redesign-theme] #create-user-button:hover,
body[data-redesign-theme] .login-button:hover,
body[data-redesign-theme] .submit:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
body[data-redesign-theme] #create-user-button {
  background: transparent;
  color: var(--rd-accent);
}

/* Room-code input (multiplayer-game.js / join-lobby-game.js) — when used
 * as the 4-letter join input, the design shows it as 4 separate boxes.
 * The current input is a single text field; we approximate the look with
 * monospace + extra-wide letter-spacing so each character is visually
 * boxed against the panel background. A future pass could split the
 * input into 4 boxes; this is the CSS-only approximation. */
body[data-redesign-theme] input[name="team-input"][type="text"],
body[data-redesign-theme] input[placeholder*="Room"] {
  font-family: var(--rd-font-mono);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-align: center;
  text-transform: uppercase;
  color: var(--rd-accent);
}

/* Team-count input on host setup (clientMain.js teamSetupMultiplayer) */
body[data-redesign-theme] .team-input {
  font-family: var(--rd-font-mono);
  font-size: 1.4rem;
  text-align: center;
  width: 4rem;
  background: var(--rd-bg-elevated);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-sm);
  color: var(--rd-ink);
  padding: 0.5rem;
}

/* Collapsible question/settings panel (cq-panel + children). Reusing the
 * legacy structure but swapping bg/borders to redesign tokens. */
body[data-redesign-theme] .cq-panel {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  box-shadow: var(--rd-shadow-card);
}
body[data-redesign-theme] .cq-trigger {
  color: var(--rd-ink);
  font-family: var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
}
body[data-redesign-theme] .cq-trigger:hover {
  background: var(--rd-panel-hi);
}
body[data-redesign-theme] .cq-body {
  background: var(--rd-bg-elevated);
}
body[data-redesign-theme] .cq-status {
  color: var(--rd-ink-dim);
  font-family: var(--rd-font-mono);
}
body[data-redesign-theme] .cq-divider {
  background: var(--rd-line);
}
body[data-redesign-theme] .question-deck-select,
body[data-redesign-theme] .mod-settings-select,
body[data-redesign-theme] .custom-settings-select {
  background: var(--rd-bg-elevated);
  border: 1px solid var(--rd-line);
  color: var(--rd-ink);
  font-family: var(--rd-font-body);
}

/* ─── Phase 4: Powerup card variants ────────────────────────────
 * The legacy mod-btn (newModSelectBuildersV2.js) is a flip card with an
 * empty front face decorated by background-image PNGs in legacy theme CSS.
 * Under a redesign theme those PNGs aren't loaded — we strip the legacy
 * background and let the card-renderer plugin populate the front face.
 * ─────────────────────────────────────────────────────────────── */

/* Strip legacy PNG backgrounds + glow under redesign so the new content
 * is visible. The flip-card 3D rules below mirror the minimum needed from
 * main-default2-modsv2.css:263-306 — that file isn't loaded under redesign
 * themes, so without these rules the back face ("SELECTED") would render
 * stacked on top of the front content. */
body[data-redesign-theme] .mod-btn--rd {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  color: var(--rd-ink);
  min-height: 220px;
  box-shadow: var(--rd-shadow-card);
  font-family: var(--rd-font-body);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/* 3D flip plumbing — inner uses preserve-3d, faces hide their backside. */
body[data-redesign-theme] .mod-btn--rd .mod-flip-inner {
  position: absolute;
  inset: 0;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.65s cubic-bezier(0.4, 0.2, 0.2, 1);
  border-radius: inherit;
}
body[data-redesign-theme] .mod-btn--rd.mod-btn-selected .mod-flip-inner {
  transform: rotateY(180deg);
}
body[data-redesign-theme] .mod-btn--rd .mod-flip-face {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}
body[data-redesign-theme] .mod-btn--rd .mod-flip-front {
  background: transparent;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
body[data-redesign-theme] .mod-btn--rd .mod-flip-back {
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
body[data-redesign-theme] .mod-btn--rd .rd-mod-front {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 16px 14px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
}
body[data-redesign-theme] .mod-btn--rd .rd-mod-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--rd-radius-sm);
  background: color-mix(in oklab, var(--rd-accent) 18%, transparent);
  color: var(--rd-accent);
}
body[data-redesign-theme] .mod-btn--rd .rd-mod-icon--rounded {
  border-radius: var(--rd-radius-md);
}
body[data-redesign-theme] .mod-btn--rd .rd-mod-label {
  font-family: var(--rd-font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  color: var(--rd-ink);
}
/* Description text (chip + badge faces only). Defeats the legacy V2 reset
 * (.mod-btn.mod-btn-v2 { font-size: 0; color: transparent } in
 * main-default2-modsv2.css:244-245) which would otherwise leave this text
 * invisible / browser-fallback-rendered. */
body[data-redesign-theme] .mod-btn--rd .rd-mod-description {
  font-family: var(--rd-font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  color: var(--rd-ink-dim);
  margin-top: 2px;
  max-width: 22ch;
  text-wrap: pretty;
}
/* Soft renders on cream — --rd-ink-dim (light gray-purple) loses contrast.
 * Use a darker mix so the description stays readable against cream. */
body[data-redesign-theme="soft"] .mod-btn--rd .rd-mod-description {
  color: color-mix(in oklab, var(--rd-ink) 75%, var(--rd-bg));
}

/* Cycle 33 — disable the legacy V2 ambient shimmer pseudo
 * (main-default2-modsv2.css:309). Under redesign themes, that animated
 * `mix-blend-mode: screen` gradient washes out the carefully-tuned text
 * contrast and produces the "scratched/distressed" appearance on the chip,
 * badge, and tarot faces. The redesign cards have their own per-theme paint
 * (corners, glyph, gold border, etc.) so the shimmer is decorative noise. */
body[data-redesign-theme] .mod-btn-v2 .mod-flip-front::before {
  display: none;
}

/* Cycle 34 — neutralize the legacy text-stroke cascade for redesign card text.
 * Legacy .mod-btn (main-base2.css:370-371) sets
 *   -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;
 * The V2 reset at main-default2-modsv2.css:246 zeroes the WIDTH but leaves the
 * COLOR as black in the cascade. If anything in the descendant tree re-enables
 * a non-zero stroke width (browser default, focus state, vendor stylesheet),
 * the stroke renders BLACK around the carefully-tuned redesign text — that's
 * the "outlined letter" appearance on small noir Cinzel glyphs.
 *
 * Force the width to 0 and replace the inherited black color with --rd-ink so
 * any future style that re-enables a width stays on-palette (bone under noir,
 * near-white under cyberpunk, dark slate under soft). Plus font-smoothing
 * properties to push the browser into clean antialiasing instead of subpixel
 * rendering that can fake an outline at small sizes. */
body[data-redesign-theme] .mod-btn--rd,
body[data-redesign-theme] .mod-btn--rd * {
  -webkit-text-stroke-width: 0;
  -webkit-text-stroke-color: var(--rd-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body[data-redesign-theme] .mod-btn--rd:hover {
  border-color: var(--rd-accent);
  box-shadow: 0 0 24px color-mix(in oklab, var(--rd-accent) 30%, transparent);
}

/* When the player selects a powerup, the legacy code adds .mod-btn-selected
 * and the flip animation runs (rotateY(180deg)). Make the back face visible
 * under redesign too — we keep the legacy "SELECTED" copy and just restyle. */
body[data-redesign-theme] .mod-btn--rd.mod-btn-selected {
  border-color: var(--rd-accent-hi, var(--rd-accent));
  box-shadow: 0 0 32px color-mix(in oklab, var(--rd-accent) 50%, transparent);
}
body[data-redesign-theme] .mod-btn--rd .mod-flip-back {
  background: var(--rd-accent);
  color: var(--rd-bg);
  font-family: var(--rd-font-display);
  font-weight: 800;
  letter-spacing: var(--rd-text-display-tracking);
}

/* Cyberpunk chip variant — uses the front-default styling above as-is. */
body[data-redesign-theme="cyberpunk"] .mod-btn--rd-chip .rd-mod-icon {
  background: color-mix(in oklab, var(--rd-accent) 18%, transparent);
  color: var(--rd-accent);
}
/* Cycle 35 — bolder + larger label so the powerup name dominates the chip
 * face hierarchy. Base is 15px / weight 700; cyberpunk lifts to 17px / 800
 * for clearer separation from the description text below. */
body[data-redesign-theme="cyberpunk"] .mod-btn--rd-chip .rd-mod-label {
  font-weight: 800;
  font-size: 17px;
}
/* Cycle 36 — lighten the description so it reads on the dark cyberpunk bg.
 * The shared rule (cycle 31) uses --rd-ink-dim (#8891b8 under cyberpunk),
 * which loses contrast. Use a muted version of --rd-ink (~#b8bcd5) so the
 * text stays clearly legible while remaining subordinate to the bolder label. */
body[data-redesign-theme="cyberpunk"] .mod-btn--rd-chip .rd-mod-description {
  color: color-mix(in oklab, var(--rd-ink) 80%, transparent);
}
body[data-redesign-theme="cyberpunk"] .mod-btn--rd-chip:hover .rd-mod-icon {
  background: var(--rd-accent);
  color: var(--rd-bg);
}

/* Soft badge variant — chunky drop shadow, larger rounding, hover pop. */
body[data-redesign-theme="soft"] .mod-btn--rd-badge {
  border-width: 2px;
  border-radius: var(--rd-radius-lg);
  box-shadow: 0 6px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] .mod-btn--rd-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] .mod-btn--rd-badge .rd-mod-icon--rounded {
  background: var(--rd-accent);
  color: var(--rd-line);
  border: 2px solid var(--rd-line);
}

/* Noir tarot variant — full card with corner ornaments + Cinzel name + flavor. */
body[data-redesign-theme="noir"] .mod-btn--rd-tarot {
  background: linear-gradient(180deg, var(--rd-panel-hi), var(--rd-panel));
  border: 1px solid var(--rd-accent);
  border-radius: 0;
}
body[data-redesign-theme="noir"] .mod-btn--rd-tarot .rd-mod-front--tarot {
  padding: 10px 8px;
  gap: 6px;
}
body[data-redesign-theme="noir"] .mod-btn--rd-tarot .rd-mod-numeral {
  font-family: var(--rd-font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--rd-accent-dim);
}
body[data-redesign-theme="noir"] .mod-btn--rd-tarot .rd-mod-rule {
  display: block;
  height: 1px;
  width: 80%;
  background: linear-gradient(90deg, transparent, var(--rd-accent) 20%, var(--rd-accent) 80%, transparent);
}
body[data-redesign-theme="noir"] .mod-btn--rd-tarot .rd-mod-glyph {
  display: grid;
  place-items: center;
  padding: 6px 0;
  color: var(--rd-accent-hi);
}
body[data-redesign-theme="noir"] .mod-btn--rd-tarot .rd-mod-name {
  font-family: var(--rd-font-display);
  font-weight: 600;
  font-size: 14px;             /* Cycle 32: bumped from 13px so name has more presence */
  letter-spacing: 0.12em;      /* Cycle 32: tightened from 0.18em — Cinzel at small sizes reads better with less tracking */
  text-transform: uppercase;
  color: var(--rd-accent-hi);
}
body[data-redesign-theme="noir"] .mod-btn--rd-tarot .rd-mod-flavor {
  /* Cycle 32: matches design source noir.jsx:223-224 — flavor uses the body
   * font (Inter Tight under noir) instead of Cinzel. Italic Cinzel at ~11px
   * is hard to read against the dark panel; Inter Tight italic is far cleaner. */
  font-family: var(--rd-font-body);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;
  color: var(--rd-ink);        /* Cycle 32: --rd-ink under noir is the bone color (#E8E2D0) — much higher contrast than --rd-ink-dim */
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: 0 4px;
}

/* Tarot corners: 12×12 squares pinned to each corner with two visible
 * borders forming an "L" ornament — matches noir.jsx:117-129 NrCard. */
body[data-redesign-theme="noir"] .mod-btn--rd-tarot .rd-mod-corner {
  position: absolute;
  width: 12px;
  height: 12px;
  border-color: var(--rd-accent);
  border-style: solid;
  pointer-events: none;
}
body[data-redesign-theme="noir"] .mod-btn--rd-tarot .rd-mod-corner--tl {
  top: 6px; left: 6px;
  border-width: 1px 0 0 1px;
}
body[data-redesign-theme="noir"] .mod-btn--rd-tarot .rd-mod-corner--tr {
  top: 6px; right: 6px;
  border-width: 1px 1px 0 0;
}
body[data-redesign-theme="noir"] .mod-btn--rd-tarot .rd-mod-corner--bl {
  bottom: 6px; left: 6px;
  border-width: 0 0 1px 1px;
}
body[data-redesign-theme="noir"] .mod-btn--rd-tarot .rd-mod-corner--br {
  bottom: 6px; right: 6px;
  border-width: 0 1px 1px 0;
}

/* ─── Phase 5: Question phase reskin ────────────────────────────
 * Question card, answer buttons, steal/question countdown timer,
 * and the right sidebar that hosts active-powerup mod buttons.
 * The mod buttons themselves are reskinned by Phase 4's
 * applyRedesignToBadge — when they get re-parented into the sidebar
 * (clientMain.js:addActivePowerupsToSidebar) their per-theme card
 * content travels with them, so the sidebar gets the redesign look
 * for free. We just retheme the surrounding container.
 * ─────────────────────────────────────────────────────────────── */

/* Question category badge ("Physics · 580 PTS" in the design) */
body[data-redesign-theme] h2.question-category {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  box-shadow: var(--rd-shadow-card);
  color: var(--rd-accent-hi, var(--rd-accent));
  font-family: var(--rd-font-mono);
  font-size: 1rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.6rem 1rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Question body text */
body[data-redesign-theme] p.question-main {
  background: var(--rd-panel-hi, var(--rd-panel));
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  box-shadow: var(--rd-shadow-card);
  color: var(--rd-ink);
  font-family: var(--rd-font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--rd-text-display-tracking, 0);
  padding: 1.2rem 1.4rem;
  margin-top: 1rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Answer (option) buttons. Keep the legacy 20% width / 125px height layout
 * — those are load-bearing for the host's flex row. Just retheme the chrome. */
body[data-redesign-theme] .option-btn {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  box-shadow: var(--rd-shadow-card);
  color: var(--rd-ink);
  font-family: var(--rd-font-display);
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  letter-spacing: var(--rd-text-display-tracking, 0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 0.15s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
body[data-redesign-theme] .option-btn:hover {
  background: var(--rd-panel-hi, var(--rd-panel));
  border-color: var(--rd-accent);
  box-shadow: 0 0 24px color-mix(in oklab, var(--rd-accent) 35%, transparent);
  color: var(--rd-ink);
  transform: translateY(-1px);
}
body[data-redesign-theme] .option-btn:active {
  transform: translateY(1px);
}

/* Steal-in / question-phase countdown timer. The number element gets the
 * theme's mono/display font; warning state amplifies the accent. */
body[data-redesign-theme] section.timer-sec {
  background: transparent;
  border: none;
}
body[data-redesign-theme] .countdown-timer {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  color: var(--rd-warning, var(--rd-accent));
  font-family: var(--rd-font-mono);
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 0.5rem 1rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--rd-shadow-card);
}
body[data-redesign-theme] #countdown-timer-number {
  color: var(--rd-warning, var(--rd-accent));
  font-family: var(--rd-font-mono);
  font-size: 2.4rem;
  font-weight: 800;
  text-shadow: 0 0 16px color-mix(in oklab, var(--rd-warning, var(--rd-accent)) 40%, transparent);
}
body[data-redesign-theme] #countdown-timer-number.flash-warning {
  color: var(--rd-danger);
  text-shadow: 0 0 24px color-mix(in oklab, var(--rd-danger) 60%, transparent);
}

/* Right sidebar (active powerups). Mod buttons inside are reskinned by
 * Phase 4 — only restyle the container chrome here. */
body[data-redesign-theme] aside.sidebar-right,
body[data-redesign-theme] .sidebar-right {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md) 0 0 var(--rd-radius-md);
  box-shadow: var(--rd-shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--rd-ink);
}
body[data-redesign-theme] aside.sidebar-left,
body[data-redesign-theme] .sidebar-left {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: 0 var(--rd-radius-md) var(--rd-radius-md) 0;
  box-shadow: var(--rd-shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--rd-ink);
}

/* Category prefix badge ("PHYSICS" eyebrow next to the question) */
body[data-redesign-theme] .prefix-area,
body[data-redesign-theme] .general-background-ib {
  background: color-mix(in oklab, var(--rd-accent) 15%, transparent);
  border: 1px solid var(--rd-accent-dim, var(--rd-accent));
  border-radius: var(--rd-radius-sm);
  color: var(--rd-accent-hi, var(--rd-accent));
  font-family: var(--rd-font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Per-theme deviations ─────────────────────────────────── */

/* Cyberpunk: magenta gradient borders on the question card,
 * mono amber timer with subtle glow. */
body[data-redesign-theme="cyberpunk"] p.question-main {
  border-left: 3px solid var(--rd-accent);
}
body[data-redesign-theme="cyberpunk"] .option-btn:hover {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--rd-accent) 18%, transparent),
    transparent);
}

/* Soft: 2px ink borders, chunky 4px hard shadows on the question
 * card and answer buttons; yellow chunky-badge timer. */
body[data-redesign-theme="soft"] h2.question-category,
body[data-redesign-theme="soft"] p.question-main {
  border-width: 2px;
  border-color: var(--rd-line);
  box-shadow: 0 4px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] .option-btn {
  border-width: 2px;
  border-color: var(--rd-line);
  box-shadow: 0 4px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] .option-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] .countdown-timer {
  background: var(--rd-warning);
  border-width: 2px;
  border-color: var(--rd-line);
  color: var(--rd-line);
  box-shadow: 0 4px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] #countdown-timer-number {
  color: var(--rd-line);
  text-shadow: none;
}

/* Noir: matte panel + thin gold border, Cinzel for the question text,
 * gold Cinzel timer with serif tabular numerals. */
body[data-redesign-theme="noir"] h2.question-category,
body[data-redesign-theme="noir"] p.question-main,
body[data-redesign-theme="noir"] .option-btn {
  background: linear-gradient(180deg, var(--rd-panel-hi), var(--rd-panel));
  border-radius: 0;
}
body[data-redesign-theme="noir"] p.question-main {
  font-family: var(--rd-font-display);
  font-style: normal;
  letter-spacing: 0.02em;
}
body[data-redesign-theme="noir"] .countdown-timer {
  background: transparent;
  border-radius: 0;
  color: var(--rd-accent-hi);
}
body[data-redesign-theme="noir"] #countdown-timer-number {
  font-family: var(--rd-font-display);
  color: var(--rd-accent-hi);
  font-variant-numeric: tabular-nums;
}

/* ─── Phase 7: Question phase shell (rev3) ──────────────────────
 * Per-theme paint for the .rd-question shell built by
 * public/scripts/plugins/redesign/questionLayout.js. Structural CSS
 * (display: none for dropped legacy elements) is injected by the plugin
 * itself; everything below is theme-specific paint.
 *
 * Slot zones for cyberpunk + noir:
 *   .rd-question__hud     — top HUD strip, contains .rd-question__hud-timer
 *   .rd-question__main    — question text + prefix + answer buttons
 *   .rd-question__rail    — re-parented #right-sidebar (active powerups)
 * Soft swaps the top HUD for a left TEAMS column (.rd-question__teams)
 * and moves .rd-question__hud-timer into the rail.
 * ─────────────────────────────────────────────────────────────── */

body[data-redesign-theme] .rd-question {
  display: grid;
  gap: 24px;
  padding: 0 32px 32px;
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  font-family: var(--rd-font-body, system-ui, sans-serif);
  color: var(--rd-ink);
}
body[data-redesign-theme="cyberpunk"] .rd-question,
body[data-redesign-theme="noir"]      .rd-question,
body[data-redesign-theme="medieval"]  .rd-question {
  grid-template-columns: 1fr 240px;
  grid-template-areas:
    "hud  hud"
    "main rail";
}
body[data-redesign-theme="soft"] .rd-question {
  grid-template-columns: 220px 1fr 200px;
  grid-template-areas: "teams main rail";
}
body[data-redesign-theme] .rd-question__hud   { grid-area: hud;   min-width: 0; }
body[data-redesign-theme] .rd-question__main  { grid-area: main;  min-width: 0; }
body[data-redesign-theme] .rd-question__rail  { grid-area: rail;  min-width: 0; }
body[data-redesign-theme="soft"] .rd-question__teams { grid-area: teams; min-width: 0; }

/* HUD strip layout — top row of team mini-tiles + steal-timer cell on the right.
 * Cyberpunk and Noir share this shape; per-theme paint below. */
body[data-redesign-theme="cyberpunk"] .rd-question__hud,
body[data-redesign-theme="noir"]      .rd-question__hud,
body[data-redesign-theme="medieval"]  .rd-question__hud {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 1px;
  background: var(--rd-line);
  border-top: 1px solid var(--rd-line);
  border-bottom: 1px solid var(--rd-line);
}
body[data-redesign-theme] .rd-question__hud-timer {
  background: var(--rd-bg, #111);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  text-align: center;
}
/* Re-parented #left-sidebar-bottom inside the HUD timer cell loses its
 * fixed positioning (legacy was position: fixed; bottom-left). */
body[data-redesign-theme] .rd-question__hud-timer #left-sidebar-bottom {
  position: static;
  width: 100%;
  height: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
body[data-redesign-theme="soft"] .rd-question__hud-timer {
  margin-bottom: 14px;
}

/* Re-parented #right-sidebar inside the rail loses its fixed positioning
 * (legacy was position: fixed; full-height right edge). */
body[data-redesign-theme] .rd-question__rail #right-sidebar {
  position: static;
  width: 100%;
  height: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Answer button layout per theme. Override the legacy .option-btn width: 20%;
 * height: 125px (set in main-base2.css for the old flex row). */
body[data-redesign-theme] #options-area {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
body[data-redesign-theme="cyberpunk"] #options-area,
body[data-redesign-theme="noir"]      #options-area {
  grid-template-columns: 1fr;
}
body[data-redesign-theme="soft"] #options-area {
  grid-template-columns: 1fr 1fr;
}
body[data-redesign-theme] .option-btn {
  width: 100%;
  height: auto;
  min-height: 56px;
  margin-top: 0;
  padding: 14px 18px;
  text-align: left;
  position: relative;
  /* Hide the legacy "1: Wrong" text — pseudos render the chip + label below.
   * font-size: 0 keeps the text in the rendering tree so .innerText still
   * returns "1: Wrong" for phone-controller addAnswerPhaseData reads. */
  font-size: 0;
}
body[data-redesign-theme] .option-btn::before {
  content: attr(data-rd-answer-idx);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: 16px;
  border-radius: var(--rd-radius-sm);
  background: var(--rd-panel-hi, var(--rd-panel));
  color: var(--rd-ink);
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  font-weight: 700;
  font-size: 13px;
  vertical-align: middle;
}
body[data-redesign-theme] .option-btn::after {
  content: attr(data-rd-answer-label);
  font-family: var(--rd-font-display, system-ui, sans-serif);
  font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.5rem);
  vertical-align: middle;
  color: var(--rd-ink);
}

/* Soft uses A/B/C/D lettered chips per the design; remap from numeric idx.
 * Noir uses Roman I-IV. Cyberpunk uses 1-4 (default plugin output). */
body[data-redesign-theme="soft"] .option-btn[data-rd-answer-idx="1"]::before { content: "A"; }
body[data-redesign-theme="soft"] .option-btn[data-rd-answer-idx="2"]::before { content: "B"; }
body[data-redesign-theme="soft"] .option-btn[data-rd-answer-idx="3"]::before { content: "C"; }
body[data-redesign-theme="soft"] .option-btn[data-rd-answer-idx="4"]::before { content: "D"; }
body[data-redesign-theme="soft"] .option-btn[data-rd-answer-idx="5"]::before { content: "E"; }
body[data-redesign-theme="noir"]  .option-btn[data-rd-answer-idx="1"]::before { content: "I"; }
body[data-redesign-theme="noir"]  .option-btn[data-rd-answer-idx="2"]::before { content: "II"; }
body[data-redesign-theme="noir"]  .option-btn[data-rd-answer-idx="3"]::before { content: "III"; }
body[data-redesign-theme="noir"]  .option-btn[data-rd-answer-idx="4"]::before { content: "IV"; }
body[data-redesign-theme="noir"]  .option-btn[data-rd-answer-idx="5"]::before { content: "V"; }
/* Per-theme HUD timer eyebrow ("STEAL_IN" cyberpunk-style, "STEAL IN" otherwise). */
body[data-redesign-theme="cyberpunk"] .rd-question__hud-timer::before {
  content: "STEAL_IN";
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--rd-accent);
  margin-bottom: 2px;
}
body[data-redesign-theme="soft"] .rd-question__hud-timer::before {
  content: "STEAL IN";
  font-family: var(--rd-font-display, system-ui, sans-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--rd-line);
  margin-bottom: 2px;
}
body[data-redesign-theme="noir"] .rd-question__hud-timer::before {
  content: "STEAL IN";
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  font-size: 9px;
  letter-spacing: 0.3em;
  color: var(--rd-accent);
  margin-bottom: 2px;
}

/* Active-powerup rail heading. Re-parented #right-sidebar's <h3>Power-Ups
 * gets restyled per theme (matches the design's "// ACTIVE" / "ACTIVE
 * POWERUPS" / "◆ IN PLAY" treatments). */
body[data-redesign-theme] .rd-question__rail #right-sidebar h3 {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--rd-accent);
  margin: 0 0 12px;
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  text-transform: uppercase;
}
body[data-redesign-theme="cyberpunk"] .rd-question__rail #right-sidebar h3::before { content: "// "; }
body[data-redesign-theme="noir"]      .rd-question__rail #right-sidebar h3::before { content: "◆ "; }
body[data-redesign-theme="medieval"]  .rd-question__rail #right-sidebar h3::before { content: "✦ "; }

/* Powerup selection cue — banner above the chosen card. The mod name comes
 * from data-rd-name set by newModSelectBuildersV2.fillModCardsArr. The banner
 * only renders when .mod-btn-selected is present inside the card (legacy V2
 * builder adds that class on click). Establishes position: relative on .mod-card
 * so the absolutely-positioned ::before anchors there. */
body[data-redesign-theme] .mod-card {
  position: relative;
}
body[data-redesign-theme] .mod-card:has(.mod-btn-selected)::before {
  content: "SELECTED · " attr(data-rd-name);
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rd-bg);
  background: var(--rd-accent);
  border-radius: var(--rd-radius-sm);
  white-space: nowrap;
  z-index: 5;
  pointer-events: none;
}
body[data-redesign-theme="soft"] .mod-card:has(.mod-btn-selected)::before {
  border: 2px solid var(--rd-line);
  box-shadow: 0 3px 0 var(--rd-line);
  border-radius: var(--rd-radius-md);
}
body[data-redesign-theme="noir"] .mod-card:has(.mod-btn-selected)::before {
  background: transparent;
  color: var(--rd-accent-hi);
  border: 1px solid var(--rd-accent);
  border-radius: 0;
}

/* Hide the bottom-of-screen <audioarea> footer during the question phase —
 * the design has no equivalent slot. The next clearGameHTML removes
 * .rd-question and the footer pops back. */
body[data-redesign-theme]:has(.rd-question) audioarea {
  display: none;
}

/* ─── Phase 6: Mobile player controller reskin ──────────────────
 * The controller HTML inherits body[data-redesign-theme] via
 * join-lobby.pug → layout.pug, so all .ctrl-* selectors below activate
 * automatically when a redesign theme is on. No JS changes required:
 * the controller's existing buttons that use .glass-panel pick up
 * redesign tokens via the legacy-token bridge at the top of this file.
 *
 * The user-controlled --ctrl-font-size / --ctrl-special-font-size
 * variables are left alone (set by the accessibility panel slider).
 * ─────────────────────────────────────────────────────────────── */

/* Top header row: room code + team badge */
body[data-redesign-theme] .ctrl-room-header {
  background: color-mix(in oklab, var(--rd-bg) 80%, transparent);
  border-bottom: 1px solid var(--rd-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-redesign-theme] .ctrl-room-code {
  font-family: var(--rd-font-mono);
  color: var(--rd-accent);
  letter-spacing: 0.3em;
}
body[data-redesign-theme] .ctrl-team-badge {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  color: var(--rd-ink);
  font-family: var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking, 0.04em);
  text-transform: var(--rd-text-display-case, uppercase);
}

/* Stat bar (HP / Shield / Energy icons) */
body[data-redesign-theme] .ctrl-stat-bar {
  border-bottom: 1px solid var(--rd-line);
  background: var(--rd-bg);
}
body[data-redesign-theme] .ctrl-stat-icon {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-sm);
  color: var(--rd-ink);
  font-family: var(--rd-font-mono);
}

/* "YOUR TURN" pulsing indicator */
body[data-redesign-theme] .ctrl-turn-indicator {
  color: var(--rd-accent-hi, var(--rd-accent));
  font-family: var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking, 0.1em);
  text-transform: var(--rd-text-display-case, uppercase);
  text-shadow: 0 0 16px color-mix(in oklab, var(--rd-accent) 50%, transparent);
}

/* Phase title + subtitle */
body[data-redesign-theme] .ctrl-phase-title {
  font-family: var(--rd-font-display);
  font-weight: 700;
  letter-spacing: var(--rd-text-display-tracking, 0);
  color: var(--rd-ink);
}
body[data-redesign-theme] .ctrl-phase-subtitle {
  background: color-mix(in oklab, var(--rd-accent) 18%, transparent);
  border: 1px solid var(--rd-accent-dim, var(--rd-accent));
  border-radius: var(--rd-radius-sm);
  color: var(--rd-accent-hi, var(--rd-accent));
  font-family: var(--rd-font-mono);
}

/* Section labels (e.g. "Challenges") */
body[data-redesign-theme] .ctrl-section-label {
  font-family: var(--rd-font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rd-ink-dim);
}

/* Action buttons used across phases — categories, questions, mods,
 * answers, targets, special-Q buttons, duel buttons. They all share the
 * .glass-panel class so the bridge already retunes their colors; here we
 * harden the chrome to redesign tokens (border style, radius, shadow). */
body[data-redesign-theme] .ctrl-category-btn,
body[data-redesign-theme] .ctrl-question-btn,
body[data-redesign-theme] .ctrl-answer-btn,
body[data-redesign-theme] .ctrl-target-btn,
body[data-redesign-theme] .ctrl-special-btn,
body[data-redesign-theme] .ctrl-duel-challenge-btn {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  box-shadow: var(--rd-shadow-card);
  color: var(--rd-ink);
  font-family: var(--rd-font-display);
  font-weight: 600;
  letter-spacing: var(--rd-text-display-tracking, 0);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body[data-redesign-theme] .ctrl-category-btn:active,
body[data-redesign-theme] .ctrl-question-btn:active,
body[data-redesign-theme] .ctrl-answer-btn:active,
body[data-redesign-theme] .ctrl-target-btn:active,
body[data-redesign-theme] .ctrl-special-btn:active {
  background: var(--rd-panel-hi, var(--rd-panel));
  border-color: var(--rd-accent);
  box-shadow: 0 0 24px color-mix(in oklab, var(--rd-accent) 40%, transparent);
}

/* Question text card on the player's screen */
body[data-redesign-theme] .ctrl-question-display {
  background: var(--rd-panel-hi, var(--rd-panel));
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  box-shadow: var(--rd-shadow-card);
  color: var(--rd-ink);
  font-family: var(--rd-font-display);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Circular number badge inside .ctrl-question-btn */
body[data-redesign-theme] .ctrl-question-num {
  background: var(--rd-accent);
  color: var(--rd-bg);
  font-family: var(--rd-font-mono);
  font-weight: 800;
}

/* "Continue →" advance button */
body[data-redesign-theme] .ctrl-continue-btn,
body[data-redesign-theme] .ctrl-duel-continue-btn {
  background: var(--rd-accent);
  color: var(--rd-bg);
  border: 1px solid var(--rd-accent);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-display);
  font-weight: 700;
  letter-spacing: var(--rd-text-display-tracking, 0.04em);
  text-transform: var(--rd-text-display-case, uppercase);
  box-shadow: var(--rd-shadow-card);
}

/* "Pass" button — ghost variant */
body[data-redesign-theme] .ctrl-pass-btn {
  background: transparent;
  border: 1px solid var(--rd-line);
  color: var(--rd-ink-dim);
  border-radius: var(--rd-radius-md);
}
body[data-redesign-theme] .ctrl-pass-btn:hover {
  color: var(--rd-ink);
  border-color: var(--rd-accent);
}

/* Mod buttons rendered on the controller during MODS phase. The legacy
 * .ctrl-mod-btn is round (border-radius: 50%) and uses .mod-btn under the
 * hood; Phase 4's applyRedesignToBadge runs on the host's mod buttons but
 * NOT on the controller's, so we just retheme the round chrome here. */
body[data-redesign-theme] .ctrl-mod-btn {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  color: var(--rd-ink);
  box-shadow: var(--rd-shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  /* Pin the powerup button to its grid cell so long innerText (e.g. "Click
   * for Shields up!") doesn't push the button wider than the column and
   * overlap its neighbor. The legacy cascade .mod-btn width: 80% plus
   * .ctrl-mod-btn width: auto aspect-ratio: 1/1 (under @media max-width:
   * 600px) is overridden here. width: 100% defeats both. The flatter 1/0.6
   * aspect lets a wrapped 2-line label fit inside the rectangle. */
  width: 100%;
  aspect-ratio: 1 / 0.6;
  font-size: clamp(0.75rem, 2.5vw, 1rem);
  white-space: normal;
  line-height: 1.15;
  padding: 8px 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
body[data-redesign-theme] .ctrl-mod-active {
  border-color: var(--rd-accent);
  box-shadow: 0 0 24px color-mix(in oklab, var(--rd-accent) 50%, transparent);
}
body[data-redesign-theme] .ctrl-mod-label {
  color: var(--rd-ink-dim);
  font-family: var(--rd-font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* "or type your answer" divider */
body[data-redesign-theme] .ctrl-divider-line {
  background: var(--rd-line);
}
body[data-redesign-theme] .ctrl-divider-text {
  color: var(--rd-ink-dim);
  font-family: var(--rd-font-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* Text input for free-form answers + wager input */
body[data-redesign-theme] .ctrl-text-input,
body[data-redesign-theme] .ctrl-wager-input {
  background: var(--rd-bg-elevated);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-sm);
  color: var(--rd-ink);
  font-family: var(--rd-font-mono);
}
body[data-redesign-theme] .ctrl-text-input:focus,
body[data-redesign-theme] .ctrl-wager-input:focus {
  outline: none;
  border-color: var(--rd-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--rd-accent) 30%, transparent);
}

/* Result overlay (correct / wrong / my-turn) — keep semantic colors but
 * rebuild on top of redesign accents so the banner reads on-theme. */
body[data-redesign-theme] .ctrl-result-overlay.ctrl-correct {
  background: color-mix(in oklab, var(--rd-success, #4ade80) 30%, transparent);
}
body[data-redesign-theme] .ctrl-result-overlay.ctrl-wrong {
  background: color-mix(in oklab, var(--rd-danger, #f87171) 30%, transparent);
}
body[data-redesign-theme] .ctrl-result-overlay.ctrl-my-turn {
  background: color-mix(in oklab, var(--rd-accent-hi, var(--rd-accent)) 30%, transparent);
}
body[data-redesign-theme] .ctrl-result-icon,
body[data-redesign-theme] .ctrl-result-message {
  font-family: var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking, 0.04em);
  text-transform: var(--rd-text-display-case, uppercase);
}

/* Toast notifications */
body[data-redesign-theme] .ctrl-toast {
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  color: var(--rd-ink);
  font-family: var(--rd-font-body);
  box-shadow: var(--rd-shadow-card);
}
body[data-redesign-theme] .ctrl-toast-success {
  border-color: var(--rd-success);
  color: var(--rd-success);
}
body[data-redesign-theme] .ctrl-toast-error {
  border-color: var(--rd-danger);
  color: var(--rd-danger);
}

/* Bottom phase legend */
body[data-redesign-theme] .ctrl-flow-legend {
  background: color-mix(in oklab, var(--rd-bg) 85%, transparent);
  border-top: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-md) var(--rd-radius-md) 0 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-redesign-theme] .ctrl-flow-title {
  color: var(--rd-ink-dim);
  font-family: var(--rd-font-mono);
  letter-spacing: 0.3em;
}
body[data-redesign-theme] .ctrl-flow-dot {
  background: var(--rd-line);
}
body[data-redesign-theme] .ctrl-flow-dot.ctrl-flow-active {
  background: var(--rd-accent);
  box-shadow: 0 0 12px color-mix(in oklab, var(--rd-accent) 50%, transparent);
}
body[data-redesign-theme] .ctrl-flow-label {
  color: var(--rd-ink-dim);
  font-family: var(--rd-font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body[data-redesign-theme] .ctrl-flow-label.ctrl-flow-active {
  color: var(--rd-ink);
  font-weight: 700;
}
body[data-redesign-theme] .ctrl-flow-arrow {
  color: var(--rd-ink-dim);
}

/* Waiting screens */
body[data-redesign-theme] .ctrl-waiting-text {
  color: var(--rd-ink-dim);
  font-family: var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking, 0);
}
body[data-redesign-theme] .ctrl-waiting-turn-label {
  color: var(--rd-accent);
  font-family: var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking, 0.04em);
}

/* Util buttons (Reconnect / Keep Screen On / Recap controls) */
body[data-redesign-theme] .ctrl-util-btn {
  background: transparent;
  border: 1px solid var(--rd-line);
  color: var(--rd-ink-dim);
  border-radius: var(--rd-radius-sm);
  font-family: var(--rd-font-mono);
  letter-spacing: 0.1em;
}
body[data-redesign-theme] .ctrl-util-btn:hover {
  color: var(--rd-ink);
  border-color: var(--rd-accent);
}

/* ── Per-theme deviations on controller ────────────────────── */

/* Soft: chunky 2px ink borders + hard shadows on controller buttons too */
body[data-redesign-theme="soft"] .ctrl-category-btn,
body[data-redesign-theme="soft"] .ctrl-question-btn,
body[data-redesign-theme="soft"] .ctrl-answer-btn,
body[data-redesign-theme="soft"] .ctrl-target-btn,
body[data-redesign-theme="soft"] .ctrl-special-btn,
body[data-redesign-theme="soft"] .ctrl-question-display,
body[data-redesign-theme="soft"] .ctrl-team-badge {
  border-width: 2px;
  border-color: var(--rd-line);
  box-shadow: 0 4px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] .ctrl-category-btn:active,
body[data-redesign-theme="soft"] .ctrl-question-btn:active,
body[data-redesign-theme="soft"] .ctrl-answer-btn:active,
body[data-redesign-theme="soft"] .ctrl-target-btn:active,
body[data-redesign-theme="soft"] .ctrl-special-btn:active {
  box-shadow: 0 2px 0 var(--rd-line);
  transform: translateY(2px);
}
body[data-redesign-theme="soft"] .ctrl-continue-btn {
  border-width: 2px;
  box-shadow: 0 4px 0 var(--rd-line);
}

/* Noir: sharp corners across the controller, Cinzel for question/answer text */
body[data-redesign-theme="noir"] .ctrl-category-btn,
body[data-redesign-theme="noir"] .ctrl-question-btn,
body[data-redesign-theme="noir"] .ctrl-answer-btn,
body[data-redesign-theme="noir"] .ctrl-target-btn,
body[data-redesign-theme="noir"] .ctrl-special-btn,
body[data-redesign-theme="noir"] .ctrl-question-display,
body[data-redesign-theme="noir"] .ctrl-team-badge,
body[data-redesign-theme="noir"] .ctrl-continue-btn,
body[data-redesign-theme="noir"] .ctrl-pass-btn,
body[data-redesign-theme="noir"] .ctrl-toast {
  border-radius: 0;
}
body[data-redesign-theme="noir"] .ctrl-question-display {
  background: linear-gradient(180deg, var(--rd-panel-hi), var(--rd-panel));
}
body[data-redesign-theme="noir"] .ctrl-question-num {
  border-radius: 0;
  border: 1px solid var(--rd-accent);
  background: transparent;
  color: var(--rd-accent-hi);
  font-family: var(--rd-font-display);
}

/* Noir's display-case Cinzel typography stretches wordy answers across 3+
 * lines on the legacy .ctrl-answer-btn padding/min-height. Tighten padding +
 * min-height + scale 15% off the font baseline so 4 long answers fit visibly
 * above the bottom flow legend. The user's --ctrl-font-size slider still
 * wins; we just shave a coefficient. Cyberpunk + soft keep the legacy
 * baseline (their typography doesn't have the same overflow problem). */
body[data-redesign-theme="noir"] .ctrl-answer-btn {
  padding: clamp(8px, 2vw, 14px) 10px;
  min-height: 52px;
  font-size: calc(var(--ctrl-font-size, 1rem) * 0.85);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Cyberpunk: subtle gradient sweep on hover/active for desktop-emulation */
body[data-redesign-theme="cyberpunk"] .ctrl-answer-btn:active,
body[data-redesign-theme="cyberpunk"] .ctrl-category-btn:active {
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--rd-accent) 22%, transparent),
    var(--rd-panel-hi));
}

/* ─── Rev1: Lobby restructure ────────────────────────────────────
 * 2-column Join | Host split that replaces the legacy vertical stack on
 * /multiplayer. /join-lobby uses the same Join column centered alone.
 * Built by plugins/redesign/lobbyLayoutCore.js + lobbyLayoutHost.js.
 *
 * Hides legacy .header-area pill forms + layout.pug status pills only
 * under redesign — legacy theme rendering is untouched.
 * ─────────────────────────────────────────────────────────────── */

/* Hide legacy footer/status clutter that the design's mock omits.
 *
 * IMPORTANT: target the static "Show game log" button by ID (button#show-log),
 * NOT the .show-log class. The class is overloaded — runtime-appended host
 * control buttons (Toggle Notification Area, Settings, Last Recap) all use
 * .show-log as a shared chrome hook. Hiding the class hides them all.
 */
body[data-redesign-theme] form.logout-form,
body[data-redesign-theme] form.mode-swap-form,
body[data-redesign-theme] .css-swap-form,
body[data-redesign-theme] .labor-time,
body[data-redesign-theme] #stuckBtn,
body[data-redesign-theme] button#show-log,
body[data-redesign-theme] loginArea > p.general-background {
  display: none !important;
}

/* Audioarea host-control cluster — Settings, Last Recap, Toggle Notification
 * Area (and any other runtime-prepended host buttons) get pinned to the
 * bottom-right corner under redesign. The legacy default would have them
 * float at the bottom of the page below the lobby grid; this gives them an
 * intentional cluster position out of the way of the 2-col content.
 *
 * z-index sits below host-a11y overlay (9500) but above lobby content (auto)
 * so the buttons stay reachable while their own panels can layer above. */
body[data-redesign-theme] audioarea {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 40;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  max-width: calc(100vw - 32px);
  justify-content: flex-start;
  pointer-events: none; /* let audio elements + gaps pass through */
}
body[data-redesign-theme] audioarea > button {
  pointer-events: auto;
  background: color-mix(in oklab, var(--rd-panel) 92%, transparent);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  color: var(--rd-ink);
  font-family: var(--rd-font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--rd-text-display-tracking, 0.06em);
  text-transform: var(--rd-text-display-case, uppercase);
  padding: 8px 14px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: var(--rd-shadow-card);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
body[data-redesign-theme] audioarea > button:hover:not(:disabled) {
  color: var(--rd-ink);
  border-color: var(--rd-accent);
  background: var(--rd-panel-hi, var(--rd-panel));
  transform: translateY(-1px);
}
body[data-redesign-theme] audioarea > button:active:not(:disabled) {
  transform: translateY(1px);
}
body[data-redesign-theme] audioarea > button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Per-theme deviation: soft uses chunky ink-shadow hard buttons. */
body[data-redesign-theme="soft"] audioarea > button {
  border-width: 2px;
  box-shadow: 0 3px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] audioarea > button:hover:not(:disabled) {
  box-shadow: 0 4px 0 var(--rd-line);
}

/* Per-theme deviation: noir flat panel + sharp corners. */
body[data-redesign-theme="noir"] audioarea > button {
  border-radius: 0;
}

/* Phone-sized viewports: unwind the host-cluster fixed-position pin so
 * runtime-prepended buttons fall back to legacy normal flow below <gameDiv>.
 * On the controller route this naturally pushes the dev-only "Toggle Dev
 * Notification Area" button off-screen instead of overlaying the bottom
 * flow legend; on the host route the buttons stack below the home phase and
 * remain reachable by scroll. <audio> elements have no `controls` attribute
 * so they're invisible regardless of position. Breakpoint 600px matches the
 * legacy mobile breakpoint at main-base2.css:1520, 1609, 1974. */
@media (max-width: 600px) {
  body[data-redesign-theme] audioarea {
    position: static;
    bottom: auto;
    left: auto;
    z-index: auto;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Header rebuild — the plugin inserts .rd-header__brand and .rd-header__nav
 * at the top of .header-area, then this CSS hides the legacy h1#title
 * and form pills behind them. */
body[data-redesign-theme] .header-area.rd-header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 14px 24px;
  margin-bottom: 20px;
  background: color-mix(in oklab, var(--rd-bg) 80%, transparent);
  border-bottom: 1px solid var(--rd-line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body[data-redesign-theme] .header-area.rd-header h1#title {
  display: none;
}
body[data-redesign-theme] .rd-header__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-right: auto;
  font-family: var(--rd-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-ink);
}
body[data-redesign-theme] .rd-header__brand-sep {
  font-family: var(--rd-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  color: var(--rd-accent);
  font-weight: 400;
}
body[data-redesign-theme] .rd-header__brand-suffix {
  color: var(--rd-accent);
}
body[data-redesign-theme] .rd-header__nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;          /* admin nav has 5+ links; allow wrap */
  justify-content: flex-end;
}
body[data-redesign-theme] .rd-header__nav-link {
  background: transparent;
  border: none;
  color: var(--rd-ink-dim);
  font-family: var(--rd-font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
body[data-redesign-theme] .rd-header__nav-link:hover {
  color: var(--rd-ink);
}
/* Logout sits at the end of the nav and is visually distinct from other links. */
body[data-redesign-theme] .rd-header__nav-link--logout {
  color: var(--rd-ink-dim);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-sm);
  margin-left: 8px;
  padding: 4px 12px;
  font-size: 11px;
}
body[data-redesign-theme] .rd-header__nav-link--logout:hover {
  color: var(--rd-danger);
  border-color: var(--rd-danger);
}

/* Auto-created header (pages without a .header-area in the view, e.g. /admin).
 * Same styling as the lobby header but with a touch more bottom margin since
 * the page below it has its own dense chrome. */
body[data-redesign-theme] .header-area.rd-header--auto {
  margin-bottom: 16px;
}

/* ── 2-column lobby grid ───────────────────────────────────────── */
body[data-redesign-theme] .rd-lobby {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0;
  min-height: calc(100vh - 80px);
  padding: 0;
  font-family: var(--rd-font-body);
  color: var(--rd-ink);
}
body[data-redesign-theme] .rd-lobby--join-only {
  grid-template-columns: minmax(0, 480px);
  justify-content: center;
  padding: 60px 24px;
}
@media (max-width: 800px) {
  body[data-redesign-theme] .rd-lobby {
    grid-template-columns: 1fr;
  }
  body[data-redesign-theme] .rd-lobby__divider {
    display: none;
  }
}

body[data-redesign-theme] .rd-lobby__join,
body[data-redesign-theme] .rd-lobby__host {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px 56px;
}
body[data-redesign-theme] .rd-lobby--join-only .rd-lobby__join {
  padding: 0;
}

/* Eyebrow + heading + sub-text */
body[data-redesign-theme] .rd-lobby__eyebrow {
  font-family: var(--rd-font-mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  margin-bottom: -4px;
}
body[data-redesign-theme] .rd-lobby__eyebrow--join {
  color: var(--rd-accent-hi, var(--rd-accent));
}
body[data-redesign-theme] .rd-lobby__eyebrow--host {
  color: var(--rd-warning, var(--rd-accent));
}
body[data-redesign-theme] .rd-lobby__heading {
  margin: 0 0 4px;
  font-family: var(--rd-font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: var(--rd-text-display-tracking, 0.04em);
  color: var(--rd-ink);
}
body[data-redesign-theme] .rd-lobby__sub-text {
  margin: -4px 0 8px;
  color: var(--rd-ink-dim);
  font-style: italic;
  font-size: 13px;
}
body[data-redesign-theme] .rd-lobby__section-label {
  font-family: var(--rd-font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rd-ink-dim);
  margin-top: 8px;
}

/* Letter-box room code */
body[data-redesign-theme] .rd-lobby__letter-boxes {
  display: flex;
  gap: 8px;
}
body[data-redesign-theme] .rd-lobby__letter-box {
  width: 56px;
  height: 64px;
  text-align: center;
  background: var(--rd-panel);
  border: 1px solid var(--rd-accent-dim, var(--rd-accent));
  border-radius: var(--rd-radius-md);
  color: var(--rd-accent);
  font-family: var(--rd-font-mono);
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  caret-color: var(--rd-accent);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
body[data-redesign-theme] .rd-lobby__letter-box:focus {
  outline: none;
  border-color: var(--rd-accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--rd-accent) 30%, transparent);
}

/* Team toggle group (host column). justify-content: center keeps the row of
 * buttons visually centered within the column — without it, the row would be
 * left-anchored and look off-center next to the full-width cq-panels in the
 * Question Pack / Custom Questions sections below. */
body[data-redesign-theme] .rd-lobby__team-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
body[data-redesign-theme] .rd-lobby__team-toggle {
  width: 44px;
  height: 44px;
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  color: var(--rd-ink);
  font-family: var(--rd-font-mono);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body[data-redesign-theme] .rd-lobby__team-toggle[aria-pressed="true"] {
  background: var(--rd-accent);
  color: var(--rd-bg);
  border-color: var(--rd-accent);
}

/* Solo Mode panel — appears under the team-toggle group when team count is 1.
 * Uses the same max-height + opacity collapse pattern as .cq-body so the
 * panel takes zero space when hidden. */
body[data-redesign-theme] .rd-lobby__solo-mode-section {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  transition: max-height 0.35s ease, opacity 0.35s ease, padding 0.35s ease;
}
body[data-redesign-theme] .rd-lobby__solo-mode-section.is-visible {
  max-height: 240px;
  opacity: 1;
  padding: 12px 0 0;
}
body[data-redesign-theme] .rd-lobby__difficulty-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body[data-redesign-theme] .rd-lobby__difficulty-label {
  font-family: var(--rd-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rd-ink-dim, var(--rd-ink));
}
body[data-redesign-theme] .rd-lobby__difficulty-input {
  width: 64px;
  height: 36px;
  padding: 4px 8px;
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  color: var(--rd-ink);
  font-family: var(--rd-font-mono);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
body[data-redesign-theme] .rd-lobby__solo-mode-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
body[data-redesign-theme] .rd-lobby__solo-mode-toggle {
  min-width: 84px;
  height: 36px;
  padding: 0 12px;
  background: var(--rd-panel);
  border: var(--rd-border-style);
  border-radius: var(--rd-radius-md);
  color: var(--rd-ink);
  font-family: var(--rd-font-mono);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body[data-redesign-theme] .rd-lobby__solo-mode-toggle[aria-pressed="true"] {
  background: var(--rd-accent);
  color: var(--rd-bg);
  border-color: var(--rd-accent);
}

/* Mount sections + slots (host column) — inherit cq-panel styling from
 * Phase 3 once the legacy panel mounts in. */
body[data-redesign-theme] .rd-lobby__mount-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body[data-redesign-theme] .rd-lobby__mount-slot {
  /* Empty until legacy code appends a .cq-panel here */
}

/* Primary CTA (per-column) */
body[data-redesign-theme] .rd-lobby__primary-btn {
  margin-top: 16px;
  padding: 14px 24px;
  background: var(--rd-accent);
  color: var(--rd-bg);
  border: 1px solid var(--rd-accent);
  border-radius: var(--rd-radius-md);
  font-family: var(--rd-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--rd-text-display-tracking, 0.06em);
  text-transform: var(--rd-text-display-case, uppercase);
  cursor: pointer;
  box-shadow: var(--rd-shadow-card);
  transition: filter 0.15s ease, transform 0.15s ease;
}
body[data-redesign-theme] .rd-lobby__primary-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
body[data-redesign-theme] .rd-lobby__primary-btn:active {
  transform: translateY(1px);
}

/* Divider variants */
body[data-redesign-theme] .rd-lobby__divider {
  width: 1px;
  align-self: stretch;
}
body[data-redesign-theme] .rd-lobby__divider--hairline {
  background: linear-gradient(
    180deg,
    transparent,
    var(--rd-line) 20%,
    var(--rd-line) 80%,
    transparent
  );
}
body[data-redesign-theme] .rd-lobby__divider--gap {
  background: transparent;
}
body[data-redesign-theme] .rd-lobby__divider--vertical-or {
  background: linear-gradient(
    180deg,
    transparent,
    var(--rd-accent-dim, var(--rd-accent)) 20%,
    var(--rd-accent-dim, var(--rd-accent)) 80%,
    transparent
  );
  position: relative;
}
body[data-redesign-theme] .rd-lobby__divider-or {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--rd-bg);
  padding: 8px 4px;
  font-family: var(--rd-font-display);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--rd-accent);
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

/* ── Per-theme deviations ─────────────────────────────────────── */

/* Cyberpunk: gradient primary buttons matching the design's pink CTA. */
body[data-redesign-theme="cyberpunk"] .rd-lobby__primary-btn {
  background: linear-gradient(
    180deg,
    var(--rd-accent),
    color-mix(in oklab, var(--rd-accent) 70%, var(--rd-bg))
  );
  box-shadow: 0 0 24px color-mix(in oklab, var(--rd-accent) 35%, transparent);
}

/* Soft: chunky 2px ink borders + 0 6px 0 ink shadows on every panel. */
body[data-redesign-theme="soft"] .rd-lobby__letter-box,
body[data-redesign-theme="soft"] .rd-lobby__team-toggle,
body[data-redesign-theme="soft"] .rd-lobby__primary-btn {
  border-width: 2px;
  box-shadow: 0 4px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] .rd-lobby__primary-btn:hover {
  box-shadow: 0 6px 0 var(--rd-line);
}

/* Noir: sharp 0-radius corners + thin gold-on-gold inner ornament. */
body[data-redesign-theme="noir"] .rd-lobby__letter-box,
body[data-redesign-theme="noir"] .rd-lobby__team-toggle,
body[data-redesign-theme="noir"] .rd-lobby__primary-btn {
  border-radius: 0;
}
body[data-redesign-theme="noir"] .rd-lobby__letter-box {
  position: relative;
  width: 64px;
  height: 80px;
  font-family: var(--rd-font-display);
  font-size: 36px;
  color: var(--rd-accent-hi);
}
body[data-redesign-theme="noir"] .rd-lobby__heading {
  font-family: var(--rd-font-display);
  font-weight: 700;
}

/* Mode-swap pill buttons in the header */
body[data-redesign-theme] .mode-swap-input {
  background: transparent;
  border: 1px solid var(--rd-line);
  color: var(--rd-ink-dim);
  font-family: var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  padding: 0.4rem 0.9rem;
  border-radius: var(--rd-radius-sm);
}
body[data-redesign-theme] .mode-swap-input:hover {
  color: var(--rd-ink);
  border-color: var(--rd-accent);
}

/* ─── Rev2: Home phase shell — per-theme paint polish ───────────
 * Structural CSS for .rd-home is owned by plugins/redesign/homeLayout.js
 * (self-injected so tests work without this stylesheet). The rules below
 * layer on per-theme deviations that benefit from cascading with the
 * rest of the redesign tokens (gold ornaments, chunky shadows, etc.).
 *
 * Post-fix model: the legacy #scoreboard-div is the dominant team-info
 * element in the sidebar (no parallel rolodex panel). Per-theme rules
 * below restyle the legacy table + Select Team + Duel buttons to match
 * each direction's aesthetic.
 * ────────────────────────────────────────────────────────────── */

/* Shared elevation lift for redesign panels (room-code, questions-left, round) */
body[data-redesign-theme] .rd-home__panel {
  background: var(--rd-panel);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-md);
  box-shadow: var(--rd-shadow-card);
}

body[data-redesign-theme] .rd-home__section-heading {
  font-family: var(--rd-font-display);
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  color: var(--rd-ink);
}
body[data-redesign-theme] .rd-home__section-eyebrow {
  color: var(--rd-accent);
}

body[data-redesign-theme] .rd-home__panel--room-code .rd-home__panel-value {
  color: var(--rd-accent);
}
body[data-redesign-theme] .rd-home__panel--questions-remaining .rd-home__panel-value,
body[data-redesign-theme] .rd-home__panel--round .rd-home__panel-value {
  color: var(--rd-accent-hi);
}

/* Soft: chunky 4px hard drop shadow on panels and cards */
body[data-redesign-theme="soft"] .rd-home__panel,
body[data-redesign-theme="soft"] .rd-home__format-card {
  border-width: 2px;
  box-shadow: 0 4px 0 var(--rd-line);
}

/* Noir: sharp corners + dim gold border */
body[data-redesign-theme="noir"] .rd-home__panel,
body[data-redesign-theme="noir"] .rd-home__format-card {
  border-radius: 2px;
  border-color: var(--rd-accent-dim);
}
body[data-redesign-theme="noir"] .rd-home__panel--room-code .rd-home__panel-value {
  font-family: var(--rd-font-display);
  letter-spacing: 0.4em;
}

/* Re-parented active-questions slot wraps the GBQ + TQ divs (now hidden) and
 * the #category-div (the actual question grid). The hidden divs collapse to
 * zero, so this rule effectively just paints the category grid. */
body[data-redesign-theme] #rd-home__active-questions-slot {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body[data-redesign-theme] #rd-home__active-questions-slot > #category-div {
  margin-top: 0;
}

/* ─── Legacy #scoreboard-div re-skin under redesign ─────────────
 * Phase B-3: paint the legacy scoreboard table and its Select Team / Duel
 * buttons to match each redesign direction. Structural overrides for sizing
 * + display live in homeLayout.js's injected CSS.
 * ────────────────────────────────────────────────────────────── */

/* Container + caption — common to all redesign themes */
body[data-redesign-theme] #scoreboard-div {
  margin: 0;
  padding: 0;
  background: transparent;
}
body[data-redesign-theme] #scoreboard-table {
  width: 100%;
  height: auto;
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-md);
  background: var(--rd-panel);
  border-collapse: separate;
  border-spacing: 0;
  overflow: auto;
}
body[data-redesign-theme] #scoreboard-table caption {
  font-family: var(--rd-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  color: var(--rd-accent-hi);
  padding: 12px 0;
}
body[data-redesign-theme] #scoreboard-table tr {
  border-bottom: 1px solid var(--rd-line);
}
body[data-redesign-theme] #scoreboard-table tr:last-child {
  border-bottom: none;
}
body[data-redesign-theme] #scoreboard-table td {
  padding: 10px 12px;
  vertical-align: middle;
  color: var(--rd-ink);
  background: transparent;
  border: none;
}
body[data-redesign-theme] #scoreboard-table td:first-child {
  font-family: var(--rd-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: var(--rd-text-display-tracking);
}

/* Hover affordance — the whole row is clickable (delegates to Select Team) */
body[data-redesign-theme] #scoreboard-table tbody tr {
  cursor: pointer;
  transition: background 0.15s ease;
}
body[data-redesign-theme] #scoreboard-table tbody tr:hover {
  background: color-mix(in oklab, var(--rd-accent) 10%, transparent);
}

/* Select Team button — re-skin the legacy .team-button under redesign */
body[data-redesign-theme] #scoreboard-div .team-button {
  background: transparent;
  border: 1px solid var(--rd-line);
  color: var(--rd-ink-dim);
  font-family: var(--rd-font-display);
  font-size: 11px;
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  padding: 4px 10px;
  border-radius: var(--rd-radius-sm);
  margin-left: 8px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
body[data-redesign-theme] #scoreboard-div .team-button:hover:not(:disabled) {
  color: var(--rd-ink);
  border-color: var(--rd-accent);
}
body[data-redesign-theme] #scoreboard-div .team-button#chosen-button {
  background: var(--rd-accent);
  color: var(--rd-bg);
  border-color: var(--rd-accent);
}

/* Duel button — re-skin the legacy .duel-challenge-btn under redesign */
body[data-redesign-theme] #scoreboard-div .duel-challenge-btn {
  background: transparent;
  border: 1px solid var(--rd-danger);
  color: var(--rd-danger);
  font-family: var(--rd-font-display);
  font-size: 10px;
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  padding: 3px 8px;
  border-radius: var(--rd-radius-sm);
  margin-left: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
body[data-redesign-theme] #scoreboard-div .duel-challenge-btn:hover:not(:disabled) {
  background: var(--rd-danger);
  color: var(--rd-bg);
}

/* Cyberpunk: magenta accent on selected row */
body[data-redesign-theme="cyberpunk"] #scoreboard-table {
  border-color: var(--rd-accent-dim);
}
body[data-redesign-theme="cyberpunk"] #scoreboard-table tbody tr:hover {
  background: color-mix(in oklab, var(--rd-accent) 18%, transparent);
}

/* Soft: chunky border + drop shadow + heavier rounding */
body[data-redesign-theme="soft"] #scoreboard-table {
  border-width: 2px;
  border-radius: var(--rd-radius-lg);
  box-shadow: 0 4px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] #scoreboard-div .team-button,
body[data-redesign-theme="soft"] #scoreboard-div .duel-challenge-btn {
  border-width: 2px;
}

/* Noir: gold border, sharp corners, Cinzel team names */
body[data-redesign-theme="noir"] #scoreboard-table {
  border-radius: 2px;
  border-color: var(--rd-accent-dim);
  background: var(--rd-panel);
}
body[data-redesign-theme="noir"] #scoreboard-table caption {
  font-family: var(--rd-font-display);
  color: var(--rd-accent);
}
body[data-redesign-theme="noir"] #scoreboard-table td:first-child {
  font-family: var(--rd-font-display);
  color: var(--rd-ink);
}
body[data-redesign-theme="noir"] #scoreboard-div .team-button {
  border-radius: 2px;
  font-family: var(--rd-font-display);
}
body[data-redesign-theme="noir"] #scoreboard-div .duel-challenge-btn {
  border-radius: 2px;
}

/* ─── Scoreboard richness: stat glyphs + HP bar ─────────────────
 * The home plugin's enhanceLegacyScoreboard():
 *   - Tags stat cells with data-rd-stat-icon="health|shields|energy"
 *   - Injects a <td class="rd-home__hp-bar"> with a <span class="rd-home__hp-bar-fill">
 *     whose inline width matches the team's HP percentage.
 *   - Sets --rd-hp-pct on each <tr> for any CSS that wants it.
 * Glyphs come from CSS ::before content. Per-stat colors come from the
 * existing redesign tokens; per-theme tweaks below.
 * ────────────────────────────────────────────────────────────── */

/* Stat-cell layout: glyph + value side-by-side */
body[data-redesign-theme] #scoreboard-table td[data-rd-stat-icon] {
  white-space: nowrap;
  font-family: var(--rd-font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
body[data-redesign-theme] #scoreboard-table td[data-rd-stat-icon]::before {
  display: inline-block;
  margin-right: 6px;
  font-size: 1em;
  line-height: 1;
  vertical-align: -1px;
}
body[data-redesign-theme] #scoreboard-table td[data-rd-stat-icon="health"]::before {
  content: "♥";
  color: var(--rd-danger);
}
body[data-redesign-theme] #scoreboard-table td[data-rd-stat-icon="shields"]::before {
  content: "◊";
  color: var(--rd-accent-hi, var(--rd-accent));
}
body[data-redesign-theme] #scoreboard-table td[data-rd-stat-icon="energy"]::before {
  content: "⚡";
  color: var(--rd-warning);
}

/* HP bar — the plugin injects it as a 3rd <td> in each team row. To make it
 * appear as a full-width line BELOW the team + stats cells (instead of as a
 * 3rd narrow column beside them), break each row out of table layout and use
 * flex-wrap so the bar td wraps onto its own line at width: 100%.
 *
 * This only kicks in for the team rows the plugin enhanced (.rd-home__hp-bar
 * is its sentinel marker). Pristine rows without it stay table-styled. */
body[data-redesign-theme] #scoreboard-table tr:has(.rd-home__hp-bar) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 12px;
  gap: 8px 16px;
}
body[data-redesign-theme] #scoreboard-table tr:has(.rd-home__hp-bar) > td {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
}
body[data-redesign-theme] #scoreboard-table tr:has(.rd-home__hp-bar) > td:first-child {
  flex: 1 1 auto;
}
body[data-redesign-theme] #scoreboard-table tr:has(.rd-home__hp-bar) > .rd-home__hp-bar {
  flex-basis: 100%;
  margin-top: 4px;
  padding: 0;
}
body[data-redesign-theme] .rd-home__hp-bar {
  position: relative;
  height: 4px;
  width: 100%;
  background: color-mix(in oklab, var(--rd-ink-dim) 25%, transparent);
  border-radius: var(--rd-radius-sm);
  overflow: hidden;
  box-sizing: border-box;
  display: block;
}
body[data-redesign-theme] .rd-home__hp-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--rd-accent);
  transition: width 0.35s ease;
}

/* Cyberpunk: thin 3px bar with magenta accent */
body[data-redesign-theme="cyberpunk"] .rd-home__hp-bar {
  height: 3px;
}
body[data-redesign-theme="cyberpunk"] .rd-home__hp-bar-fill {
  background: var(--rd-accent);
}
body[data-redesign-theme="cyberpunk"] #scoreboard-table td[data-rd-stat-icon] {
  font-family: var(--rd-font-mono);
}

/* Soft: chunky 6px bar with hard ink shadow + warm stat colors */
body[data-redesign-theme="soft"] .rd-home__hp-bar {
  height: 6px;
  border: 2px solid var(--rd-line);
  background: var(--rd-bg-elevated, var(--rd-bg));
  box-shadow: 0 2px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] .rd-home__hp-bar-fill {
  background: var(--rd-accent);
}
body[data-redesign-theme="soft"] #scoreboard-table td[data-rd-stat-icon] {
  font-family: var(--rd-font-display);
  font-weight: 700;
}

/* Noir: thin 2px gold bar; serif stat values with embossed gold glyphs */
body[data-redesign-theme="noir"] .rd-home__hp-bar {
  height: 2px;
  background: color-mix(in oklab, var(--rd-accent-dim) 50%, transparent);
  border-radius: 0;
}
body[data-redesign-theme="noir"] .rd-home__hp-bar-fill {
  background: var(--rd-accent);
}
body[data-redesign-theme="noir"] #scoreboard-table td[data-rd-stat-icon] {
  font-family: var(--rd-font-display);
  font-weight: 600;
  color: var(--rd-ink);
}
body[data-redesign-theme="noir"] #scoreboard-table td[data-rd-stat-icon="shields"]::before {
  color: var(--rd-accent-hi);
}
body[data-redesign-theme="noir"] #scoreboard-table td[data-rd-stat-icon="energy"]::before {
  color: var(--rd-accent-dim);
}

/* ─── Picker B re-skin: category tabs + value tiles ──────────────
 * Source DOM is the legacy #category-div table (built by showCategories +
 * CategoryBuilder). The home plugin's enhanceLegacyPicker() adds:
 *   - data-rd-cat-count="N" on each <th class="question-cat-headers">
 *   - aria-selected="true|false" on each header (synced via click delegator)
 *
 * CSS keys off those attributes to render the tab + tile aesthetic per
 * theme. Phone-controller synthetic .click() on .question-cat-headers and
 * .category-btn keeps working — only paint changes here.
 *
 * Override the legacy inline `style="background-color: ...; animation: ..."`
 * that categoryClickAction applies on tab click. Inline styles win the
 * cascade unless we use !important; the legacy flash is what the per-theme
 * active-state replaces.
 * ────────────────────────────────────────────────────────────── */

/* Lift the .question-board out of table layout into a flex column so the
 * tabs row and the value-shelf row can be styled independently. */
body[data-redesign-theme] #category-div .question-board {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  display: block;
}
body[data-redesign-theme] #category-div .question-board > tbody {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body[data-redesign-theme] #category-div .question-board tr.cat-row {
  display: flex;
  flex-wrap: wrap;
}

/* First row (tabs): one tab per category, evenly distributed */
body[data-redesign-theme] #category-div .question-board tr.cat-row:first-child {
  border-bottom: 1px solid var(--rd-line);
  gap: 0;
}
body[data-redesign-theme] #category-div .question-board tr.cat-row:first-child > th {
  flex: 1 1 0;
}

/* Second row (value shelf): structural grid lives in the plugin's HOME_CSS
 * (auto-fit minmax + justify-content: center). Paint below. */
body[data-redesign-theme] #category-div .question-board tr.cat-row:nth-child(2) {
  background: var(--rd-panel);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-md);
  padding: 24px 18px;
}
body[data-redesign-theme] #category-div .question-board tr.cat-row:nth-child(2) > td {
  padding: 0;
  border: none;
  background: transparent;
  display: flex;
}
body[data-redesign-theme] #category-div .cell-inner {
  flex: 1;
  display: flex;
}

/* Tabs */
body[data-redesign-theme] th.question-cat-headers {
  /* Override the legacy inline-style green flash. !important overrides the
   * inline style without a JS change. */
  background-color: transparent !important;
  animation: none !important;
  cursor: pointer;
  padding: 14px 10px;
  text-align: center;
  border: none;
  font-family: var(--rd-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--rd-text-display-tracking);
  text-transform: var(--rd-text-display-case);
  color: var(--rd-ink-dim);
  position: relative;
  transition: color 0.15s ease, background-color 0.15s ease;
}
body[data-redesign-theme] th.question-cat-headers:hover {
  color: var(--rd-ink);
}
body[data-redesign-theme] th.question-cat-headers[aria-selected="true"] {
  color: var(--rd-accent-hi, var(--rd-accent));
}
body[data-redesign-theme] th.question-cat-headers[data-rd-cat-count]::after {
  content: " × " attr(data-rd-cat-count);
  display: block;
  margin-top: 4px;
  font-family: var(--rd-font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--rd-ink-dim);
  text-transform: none;
}

/* Value tiles — large, centered "POINTS" eyebrow + big numeral.
 *
 * The legacy CategoryBuilder sets `btn.textContent = "Points |500"`. The
 * home plugin's enhanceLegacyValueTiles parses out the number and exposes it
 * as data-rd-points. CSS suppresses the native text via font-size: 0 (each
 * pseudo restores its own size) and renders the eyebrow via ::before and
 * the value via ::after attr(data-rd-points). The button's text content,
 * classes, and click handler stay intact — phone-controller .click() still
 * works.
 *
 * Buttons WITHOUT data-rd-points (team-question-btn, group-boss-question-btn,
 * and any defensive case where the points value couldn't be parsed) keep
 * their native text rendering. They're hidden under redesign anyway, but
 * leaving the fallback ensures the visible value persists if we ever choose
 * to show them. */
body[data-redesign-theme] .category-btn {
  flex: 1;
  /* Tightened (Cycle 40): was 80px / 20px 14px / 24px. With the value-shelf
   * grid minmax now 110/180 (homeLayout.js HOME_CSS), each tile sits in a
   * narrower column — the smaller bbox keeps the eyebrow + numeral readable
   * without the tile dominating its row. */
  min-height: 64px;
  padding: 14px 10px;
  background: var(--rd-bg);
  border: 1px solid var(--rd-line);
  border-radius: var(--rd-radius-md);
  color: var(--rd-accent-hi, var(--rd-accent));
  font-family: var(--rd-font-mono);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
/* Replace the native "Points |N" text with eyebrow + clean numeral when
 * data-rd-points is set (i.e., the home plugin has tagged this tile). */
body[data-redesign-theme] .category-btn[data-rd-points] {
  font-size: 0;  /* hides "Points |N"; pseudo-elements restore their own size */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
body[data-redesign-theme] .category-btn[data-rd-points]::before {
  content: "POINTS";
  display: block;
  margin-bottom: 6px;
  font-family: var(--rd-font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--rd-accent);
  opacity: 0.7;
}
body[data-redesign-theme] .category-btn[data-rd-points]::after {
  content: attr(data-rd-points);
  display: block;
  font-family: var(--rd-font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--rd-accent-hi, var(--rd-accent));
  line-height: 1;
}
body[data-redesign-theme] .category-btn:not(.team-question-btn):not(.group-boss-question-btn):hover:not(:disabled) {
  background: var(--rd-accent);
  border-color: var(--rd-accent);
  color: var(--rd-bg);
}
body[data-redesign-theme] .category-btn[data-rd-points]:hover:not(:disabled)::before {
  color: var(--rd-bg);
  opacity: 0.7;
}
body[data-redesign-theme] .category-btn[data-rd-points]:hover:not(:disabled)::after {
  color: var(--rd-bg);
}

/* ── Cyberpunk: cyan tabs, magenta-hovered tiles ──────────────── */
body[data-redesign-theme="cyberpunk"] th.question-cat-headers[aria-selected="true"] {
  color: var(--rd-accent-hi);
  background-color: var(--rd-panel) !important;
  border-top: 1px solid var(--rd-accent-hi);
  border-left: 1px solid var(--rd-line);
  border-right: 1px solid var(--rd-line);
}
body[data-redesign-theme="cyberpunk"] .category-btn[data-rd-points]::after {
  color: var(--rd-warning, var(--rd-accent-hi));
}
body[data-redesign-theme="cyberpunk"] .category-btn:not(.team-question-btn):not(.group-boss-question-btn):hover:not(:disabled) {
  background: var(--rd-accent);
  border-color: var(--rd-accent);
  box-shadow: 0 0 32px color-mix(in oklab, var(--rd-accent) 50%, transparent);
}

/* ── Soft: folder-tab tabs, chunky shadow tiles, coral hover ─── */
body[data-redesign-theme="soft"] #category-div .question-board tr.cat-row:nth-child(2) {
  border-width: 2px;
  box-shadow: 0 6px 0 var(--rd-line);
  border-radius: var(--rd-radius-lg, 24px);
  padding: 28px;
}
body[data-redesign-theme="soft"] th.question-cat-headers {
  border: 2px solid var(--rd-line);
  border-bottom: none;
  border-top-left-radius: var(--rd-radius-md, 14px);
  border-top-right-radius: var(--rd-radius-md, 14px);
  background-color: var(--rd-bg-elevated, var(--rd-panel)) !important;
  margin-right: 4px;
  font-weight: 800;
  color: var(--rd-ink);
}
body[data-redesign-theme="soft"] th.question-cat-headers[aria-selected="true"] {
  background-color: var(--rd-panel) !important;
  z-index: 2;
  margin-bottom: -2px;
  border-bottom: 2px solid var(--rd-panel);
}
body[data-redesign-theme="soft"] .category-btn:not(.team-question-btn):not(.group-boss-question-btn) {
  border-width: 2px;
  border-radius: var(--rd-radius-md, 18px);
  background: var(--rd-panel);
  box-shadow: 0 4px 0 var(--rd-line);
}
body[data-redesign-theme="soft"] .category-btn[data-rd-points]::before {
  font-weight: 800;
  color: var(--rd-ink-dim);
}
body[data-redesign-theme="soft"] .category-btn[data-rd-points]::after {
  font-family: var(--rd-font-display);
  font-weight: 800;
  color: var(--rd-ink);
  font-size: 32px;
}
body[data-redesign-theme="soft"] .category-btn:not(.team-question-btn):not(.group-boss-question-btn):hover:not(:disabled) {
  background: var(--rd-accent);
  border-color: var(--rd-line);
  box-shadow: 0 6px 0 var(--rd-line);
  transform: translateY(-3px);
}

/* ── Noir: chapter tabs with Roman numerals, gold tiles ───────── */
body[data-redesign-theme="noir"] #category-div .question-board tr.cat-row:nth-child(2) {
  border-radius: 2px;
  border-color: var(--rd-accent);
  position: relative;
}
body[data-redesign-theme="noir"] #category-div .question-board tr.cat-row:first-child {
  border-bottom: 1px solid var(--rd-accent);
}
body[data-redesign-theme="noir"] th.question-cat-headers {
  font-family: var(--rd-font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--rd-ink);
  border: none;
}
/* Roman numeral overline using a counter on the tab row */
body[data-redesign-theme="noir"] #category-div .question-board tr.cat-row:first-child {
  counter-reset: rd-noir-tab;
}
body[data-redesign-theme="noir"] th.question-cat-headers {
  counter-increment: rd-noir-tab;
}
body[data-redesign-theme="noir"] th.question-cat-headers::before {
  content: counter(rd-noir-tab, upper-roman);
  display: block;
  margin-bottom: 4px;
  font-family: var(--rd-font-display);
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--rd-accent-dim);
}
body[data-redesign-theme="noir"] th.question-cat-headers[aria-selected="true"] {
  background-color: var(--rd-panel) !important;
  color: var(--rd-accent-hi);
  border-top: 1px solid var(--rd-accent);
  border-left: 1px solid var(--rd-accent-dim);
  border-right: 1px solid var(--rd-accent-dim);
}
body[data-redesign-theme="noir"] .category-btn:not(.team-question-btn):not(.group-boss-question-btn) {
  border-radius: 2px;
  border-color: var(--rd-accent-dim);
  background: var(--rd-bg);
}
body[data-redesign-theme="noir"] .category-btn[data-rd-points]::before {
  content: "♦ ANTE ♦";
  font-family: var(--rd-font-display);
  font-size: 9px;
  letter-spacing: 0.4em;
  color: var(--rd-accent);
  opacity: 1;
}
body[data-redesign-theme="noir"] .category-btn[data-rd-points]::after {
  font-family: var(--rd-font-display);
  font-weight: 700;
  /* Cycle 40: was 32px. Noir's 3-col home shell narrows the main column;
   * the larger numeral was bullying the tile width and capping the row at
   * 2-per-row. 26px keeps the dramatic Cinzel feel without hogging width. */
  font-size: 26px;
  color: var(--rd-accent-hi);
}
body[data-redesign-theme="noir"] .category-btn:not(.team-question-btn):not(.group-boss-question-btn):hover:not(:disabled) {
  background: var(--rd-accent);
  border-color: var(--rd-accent-hi);
  box-shadow: 0 0 32px color-mix(in oklab, var(--rd-accent) 40%, transparent);
}
body[data-redesign-theme="noir"] .category-btn[data-rd-points]:hover:not(:disabled)::before {
  color: var(--rd-bg);
}
body[data-redesign-theme="noir"] .category-btn[data-rd-points]:hover:not(:disabled)::after {
  color: var(--rd-bg);
}

/* ─── Inline Toast Stack — redesign re-skin of #notification-area ─────────
 * Structural CSS lives in notificationToast.js (shelf flex layout, scroll
 * container max-height, <li> flex row, dismiss button). This block paints
 * per-theme labels, header chrome, type-specific borders + icons, and
 * keeps legacy themes untouched (every selector is redesign-scoped).
 * ──────────────────────────────────────────────────────────────────────── */

body[data-redesign-theme] .rd-toast-header {
  padding: 4px 0 8px;
}
body[data-redesign-theme] .rd-toast-label {
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  font-size: 12px;
  letter-spacing: 0.3em;
  color: var(--rd-ink-dim, #888);
}
body[data-redesign-theme] .rd-toast-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--rd-accent, #888);
  color: var(--rd-bg, #111);
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 700;
}
body[data-redesign-theme] .rd-toast-count::before {
  content: attr(data-rd-toast-count);
}
body[data-redesign-theme] .rd-toast-clear-all {
  background: transparent;
  border: 1px solid var(--rd-line, rgba(255,255,255,0.12));
  color: var(--rd-ink-dim, #888);
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.2em;
  padding: 6px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
body[data-redesign-theme] .rd-toast-clear-all:hover {
  border-color: var(--rd-accent, #888);
  color: var(--rd-accent, #888);
}

/* Per-type chrome on each <li>. The legacy classNames keep working; the
 * data-rd-toast-type attribute is what we paint against. ::before is the
 * left icon column; the dismiss × is supplied by the plugin as the last
 * flex child. */
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card {
  border: 1px solid var(--rd-line, rgba(255,255,255,0.12));
  background: var(--rd-panel, #1c2440);
  color: var(--rd-ink, #e8e8e8);
  font-size: 13px;
}
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid currentColor;
  font-family: var(--rd-font-display, system-ui, sans-serif);
  font-size: 16px;
  flex: 0 0 auto;
  /* Default icon — overridden per type below. */
  content: "i";
  color: var(--rd-accent, #888);
}

/* Type → glyph + accent. */
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="info"]::before     { content: "i"; color: var(--rd-accent-hi, var(--rd-accent, #888)); }
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="success"]::before  { content: "✓"; color: var(--rd-success, #4ade80); }
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="warning"]::before  { content: "!"; color: var(--rd-warning, #fbbf24); }
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="error"]::before    { content: "✕"; color: var(--rd-danger,  #f87171); }
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="combat"]::before   { content: "⚔"; color: var(--rd-accent-hi, var(--rd-accent, #888)); }
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="npc-ally"]::before { content: "◈"; color: var(--rd-success, #4ade80); }
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="npc-enemy"]::before { content: "◉"; color: var(--rd-danger,  #f87171); }

/* Type → left-edge accent rule on the toast itself. */
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="warning"]  { border-color: color-mix(in oklab, var(--rd-warning, #fbbf24) 60%, var(--rd-line, rgba(255,255,255,0.12))); }
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="error"]    { border-color: color-mix(in oklab, var(--rd-danger,  #f87171) 60%, var(--rd-line, rgba(255,255,255,0.12))); }
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="success"]  { border-color: color-mix(in oklab, var(--rd-success, #4ade80) 60%, var(--rd-line, rgba(255,255,255,0.12))); }
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="combat"]   { border-color: color-mix(in oklab, var(--rd-accent-hi, var(--rd-accent, #888)) 60%, var(--rd-line, rgba(255,255,255,0.12))); }
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="npc-ally"] { border-color: color-mix(in oklab, var(--rd-success, #4ade80) 50%, var(--rd-line, rgba(255,255,255,0.12))); }
body[data-redesign-theme] .rd-toast-mirror > .rd-toast-mirror-card[data-rd-toast-type="npc-enemy"]{ border-color: color-mix(in oklab, var(--rd-danger,  #f87171) 50%, var(--rd-line, rgba(255,255,255,0.12))); }

/* ─── Cyberpunk paint ─────────────────────────────────────────────────── */
body[data-redesign-theme="cyberpunk"] .rd-toast-label::before {
  content: "// NOTIFICATIONS";
}
body[data-redesign-theme="cyberpunk"] .rd-toast-clear-all::before {
  content: "CLEAR ALL";
}
body[data-redesign-theme="cyberpunk"] .rd-toast-mirror > .rd-toast-mirror-card {
  border-radius: 4px;
  background: color-mix(in oklab, var(--rd-bg-elevated, #1a1a1a) 90%, transparent);
  font-family: var(--rd-font-body, system-ui, sans-serif);
  text-transform: none;
}
body[data-redesign-theme="cyberpunk"] .rd-toast-mirror > .rd-toast-mirror-card::before {
  border-radius: 4px;
}

/* ─── Soft paint ──────────────────────────────────────────────────────── */
body[data-redesign-theme="soft"] .rd-toast-label::before {
  content: "NOTIFICATIONS";
  text-transform: uppercase;
}
body[data-redesign-theme="soft"] .rd-toast-clear-all::before {
  content: "Clear all";
  text-transform: none;
  letter-spacing: 0;
}
body[data-redesign-theme="soft"] .rd-toast-mirror > .rd-toast-mirror-card {
  border-radius: 14px;
  border-width: 1.5px;
  padding: 12px 16px;
}
body[data-redesign-theme="soft"] .rd-toast-mirror > .rd-toast-mirror-card::before {
  border-radius: 10px;
  border-width: 1.5px;
}
body[data-redesign-theme="soft"] .rd-toast-clear-all {
  border-radius: 18px;
  border-width: 1.5px;
}

/* ─── Noir paint ──────────────────────────────────────────────────────── */
body[data-redesign-theme="noir"] .rd-toast-label::before {
  content: "♦ TELEGRAMS";
  font-family: var(--rd-font-display, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.4em;
}
body[data-redesign-theme="noir"] .rd-toast-clear-all::before {
  content: "BURN ALL";
}
body[data-redesign-theme="noir"] .rd-toast-mirror > .rd-toast-mirror-card {
  border-radius: 2px;
  background: transparent;
  font-family: var(--rd-font-display, system-ui, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}
body[data-redesign-theme="noir"] .rd-toast-mirror > .rd-toast-mirror-card::before {
  border-radius: 2px;
  font-family: var(--rd-font-display, system-ui, sans-serif);
}
body[data-redesign-theme="noir"] .rd-toast-clear-all {
  border-radius: 2px;
}
body[data-redesign-theme="noir"] .rd-toast-count {
  border-radius: 2px;
}

/* ─── Powerup phase overlay re-skin ───────────────────────────────────────
 * The legacy overlay structure (.mod-select-overlay > .mod-select-panel >
 * { header, row, footer }) is decorated by powerupOverlaySkin.js with:
 *   - data-rd-overlay-theme on the panel
 *   - .rd-mod-eyebrow above the title
 *   - rewritten title / subtitle / status-card heading per theme
 *   - .rd-mod-skip injected into the footer (cyberpunk + noir only)
 * Per-card data-rd-mod-mode is set by newModSelectBuildersV2.js so we can
 * paint AUTO/CLICK pills via pseudo-elements per theme.
 * ──────────────────────────────────────────────────────────────────────── */

/* Common: panel + header chrome */
body[data-redesign-theme] .mod-select-panel[data-rd-overlay-theme] {
  padding: 28px 32px;
}
body[data-redesign-theme] .rd-mod-eyebrow {
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.3em;
  margin-bottom: 6px;
  text-transform: uppercase;
}
body[data-redesign-theme] .mod-select-title {
  font-family: var(--rd-font-display, system-ui, sans-serif);
  font-weight: 700;
  letter-spacing: var(--rd-text-display-tracking, 0.04em);
}
body[data-redesign-theme] .mod-select-subtitle {
  font-size: 13px;
  color: var(--rd-ink-dim, #888);
  margin-top: 4px;
}

/* Variable card count → wrap at narrow widths instead of horizontal scroll */
body[data-redesign-theme] .mod-select-row {
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}

/* Status panel (descriptionCard) re-skin */
body[data-redesign-theme] #mod-description-card {
  border: 1px solid var(--rd-line, rgba(255,255,255,0.12));
  background: var(--rd-bg-elevated, var(--rd-bg, #111));
  padding: 16px;
}
body[data-redesign-theme] #mod-description-card h3 {
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--rd-ink-dim, #888);
  margin: 0 0 10px;
  text-transform: uppercase;
}

/* Soft override — the cream --rd-bg-elevated background makes --rd-ink-dim
 * (light gray-purple #7A7C9A) almost invisible. Repaint heading + appended
 * status <p> lines with --rd-ink (dark slate #3D405B) for proper contrast.
 * Cyberpunk + Noir keep their dim text on dark elevated bg (high-contrast). */
body[data-redesign-theme="soft"] #mod-description-card,
body[data-redesign-theme="soft"] #mod-description-card h3,
body[data-redesign-theme="soft"] #mod-description-card p {
  color: var(--rd-ink);
}

/* Soft recap panels — both .recap-panel (advanced-animations.css:23) and
 * .recap-summary-panel (advanced-animations.css:548) default to
 * var(--glass-bg). Under Soft, --glass-bg resolves to a near-white panel
 * because Soft's --rd-panel is #FFFFFF. Animation sprites and summary team
 * columns lose contrast against near-white. Repaint with var(--rd-ink) (dark
 * slate) so content pops the same way it does under cyberpunk + noir. Lives
 * here (not in advanced-animations.css) to keep legacy CSS untouched. */
body[data-redesign-theme="soft"] .recap-panel {
  background: var(--rd-ink-dim);
}
body[data-redesign-theme="soft"] .recap-summary-panel {
  background: var(--rd-ink-dim);
}
/* Cycle 42 — same fix for the duel modal panel (main-base2.css:2555). Same
 * var(--glass-bg) default, same near-white-on-cream contrast loss under Soft.
 * Duel content (white text, mint HP, red VS, green health segments) all
 * designed for dark bg — paint with --rd-ink so it pops the same way
 * cyberpunk + noir already get. */
body[data-redesign-theme="soft"] .duel-panel {
  background: var(--rd-ink-dim);
}

/* Cycle 43 — duel button default state under Soft. Both .duel-category-btn
 * and .duel-answer-btn hardcode color: #fff (main-base2.css:2709/:2775) on a
 * .glass-panel background that resolves near-white under Soft → invisible.
 * The continue button uses .generic-button which has the same issue plus a
 * magenta-tinted hover that doesn't fit Soft's coral/mint/cream palette.
 *
 * Repaint all three with dark ink text + 2px ink border (Soft's chunky
 * border idiom) on a white panel background. Continue gets the chunky drop
 * shadow that matches Soft's other primary buttons. */
body[data-redesign-theme="soft"] .duel-category-btn,
body[data-redesign-theme="soft"] .duel-answer-btn {
  color: var(--rd-accent);
  background: var(--rd-panel);
  border: 2px solid var(--rd-accent);
}
body[data-redesign-theme="soft"] .duel-continue-btn {
  color: var(--rd-accent);
  background: var(--rd-panel);
  border: 2px solid var(--rd-accent);
  box-shadow: 0 4px 0 var(--rd-accent);
}
body[data-redesign-theme="soft"] .duel-continue-btn:hover {
  background: var(--rd-bg-elevated);
  color: var(--rd-accent);
  border-color: var(--rd-accent);
  box-shadow: 0 5px 0 var(--rd-accent);
  transform: translateY(-1px);
}

/* Cycle 44 — picked / disabled state under Soft. Legacy CSS dims via opacity
 * (.duel-category-btn.picked = 0.35, .duel-answer-btn:disabled = 0.5,
 * .generic-button:disabled = 0.45) which collapses readability on top of an
 * already-low-contrast button. Override opacity to 1 and use coordinated
 * color-mix dim on background, text, and border so the "spent / used" state
 * is obvious AND the text stays legible. */
body[data-redesign-theme="soft"] .duel-category-btn.picked,
body[data-redesign-theme="soft"] .duel-answer-btn:disabled {
  opacity: 1;
  background: color-mix(in oklab, var(--rd-bg) 80%, transparent);
  color: color-mix(in oklab, var(--rd-accent) 50%, transparent);
  border-color: color-mix(in oklab, var(--rd-accent) 40%, transparent);
}
body[data-redesign-theme="soft"] .duel-continue-btn:disabled {
  opacity: 1;
  background: color-mix(in oklab, var(--rd-bg) 80%, transparent);
  color: color-mix(in oklab, var(--rd-accent) 50%, transparent);
  border-color: color-mix(in oklab, var(--rd-accent) 40%, transparent);
  box-shadow: 0 2px 0 color-mix(in oklab, var(--rd-accent) 40%, transparent);
}

/* Cycle 45 — duel input field under Soft. Same root as the buttons:
 * color: #fff (main-base2.css:2803) on --glass-bg = white-on-cream invisible.
 * Placeholder is rgba(255,255,255,0.4), also invisible on cream. Flip both. */
body[data-redesign-theme="soft"] .duel-answer-input {
  color: var(--rd-accent);
  background: var(--rd-panel);
  border: 2px solid var(--rd-accent);
}
body[data-redesign-theme="soft"] .duel-answer-input::placeholder {
  color: color-mix(in oklab, var(--rd-accent) 50%, transparent);
}

/* Footer + continue. The body[data-redesign-theme=…] .mod-select-continue
 * selectors below win specificity over the legacy .mod-select-continue
 * rule in main-base2.css:1318 (which paints the magenta gradient). */
body[data-redesign-theme] .mod-select-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 20px;
}

/* Cyberpunk: magenta gradient, mono uppercase, glow shadow */
body[data-redesign-theme="cyberpunk"] .mod-select-continue {
  padding: 10px 22px;
  background: linear-gradient(180deg, var(--rd-accent, #ff14d4), color-mix(in oklab, var(--rd-accent, #ff14d4) 70%, #000));
  border: 1px solid transparent;
  border-radius: var(--rd-radius-sm, 6px);
  color: #fff;
  font-family: var(--rd-font-display, "Rajdhani", sans-serif);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 0 24px color-mix(in oklab, var(--rd-accent, #ff14d4) 40%, transparent);
  cursor: pointer;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}
body[data-redesign-theme="cyberpunk"] .mod-select-continue:hover {
  box-shadow: 0 0 32px color-mix(in oklab, var(--rd-accent, #ff14d4) 60%, transparent);
}

/* Soft: coral background, thick black border, chunky shadow */
body[data-redesign-theme="soft"] .mod-select-continue {
  padding: 14px 24px;
  background: var(--rd-accent, #ff7a59);
  border: 2px solid var(--rd-ink, #1f1f1f);
  border-radius: var(--rd-radius-lg, 18px);
  color: var(--rd-ink, #1f1f1f);
  font-family: var(--rd-font-display, "Sora", sans-serif);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: 0 4px 0 var(--rd-ink, #1f1f1f);
  cursor: pointer;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
body[data-redesign-theme="soft"] .mod-select-continue:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--rd-ink, #1f1f1f);
}
body[data-redesign-theme="soft"] .mod-select-continue:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--rd-ink, #1f1f1f);
}

/* Noir: gold fill, gold border, Cinzel uppercase, sharp 2px radius */
body[data-redesign-theme="noir"] .mod-select-continue {
  padding: 12px 24px;
  background: var(--rd-accent, #c8a85c);
  border: 1px solid var(--rd-accent, #c8a85c);
  border-radius: var(--rd-radius-sm, 2px);
  color: var(--rd-bg, #111);
  font-family: var(--rd-font-display, "Cinzel", serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  box-shadow: none;
  cursor: pointer;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.2s ease, color 0.2s ease;
}
body[data-redesign-theme="noir"] .mod-select-continue:hover {
  background: var(--rd-accent-hi, #e0c373);
  border-color: var(--rd-accent-hi, #e0c373);
}

/* AUTO/CLICK pill via pseudo-element on .mod-card. Cyberpunk + soft place
 * the pill at top-right of the card; noir places it as a ribbon below. */
body[data-redesign-theme] .mod-card[data-rd-mod-mode] {
  position: relative;
}
body[data-redesign-theme] .mod-card[data-rd-mod-mode]::after {
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  letter-spacing: 0.2em;
  font-weight: 700;
  text-transform: uppercase;
  pointer-events: none;
}

/* ─── Cyberpunk ─── */
body[data-redesign-theme="cyberpunk"] .mod-select-panel[data-rd-overlay-theme] {
  background: var(--rd-panel, #1c2440);
  border: 1px solid var(--rd-accent-dim, rgba(255,0,200,0.4));
  border-radius: var(--rd-radius-md, 8px);
  box-shadow: 0 0 40px color-mix(in oklab, var(--rd-accent, #888) 25%, transparent);
}
body[data-redesign-theme="cyberpunk"] .rd-mod-eyebrow {
  color: var(--rd-warning, #fbbf24);
}
/* Cyberpunk hides the legacy subtitle (design has no subtitle) */
body[data-redesign-theme="cyberpunk"] .mod-select-subtitle {
  display: none;
}
body[data-redesign-theme="cyberpunk"] .mod-card[data-rd-mod-mode]::after {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 2px 8px;
  font-size: 9px;
  border-radius: 2px;
}
body[data-redesign-theme="cyberpunk"] .mod-card[data-rd-mod-mode="auto"]::after {
  content: "AUTO";
  background: color-mix(in oklab, var(--rd-success, #4ade80) 15%, transparent);
  color: var(--rd-success, #4ade80);
  border: 1px solid var(--rd-success, #4ade80);
}
body[data-redesign-theme="cyberpunk"] .mod-card[data-rd-mod-mode="click"]::after {
  content: "CLICK TO USE";
  background: var(--rd-accent-hi, var(--rd-accent, #888));
  color: var(--rd-bg, #111);
}
/* Per-mode card border colors (cyberpunk) */
body[data-redesign-theme="cyberpunk"] .mod-card[data-rd-mod-mode="auto"] {
  border: 1px solid var(--rd-success, #4ade80);
}
body[data-redesign-theme="cyberpunk"] .mod-card[data-rd-mod-mode="click"] {
  border: 1px solid var(--rd-accent-hi, var(--rd-accent, #888));
  box-shadow: inset 0 0 0 1px var(--rd-accent-hi, var(--rd-accent, #888)),
              0 0 20px color-mix(in oklab, var(--rd-accent-hi, var(--rd-accent, #888)) 20%, transparent);
}

/* ─── Soft ─── */
body[data-redesign-theme="soft"] .mod-select-panel[data-rd-overlay-theme] {
  background: #fff;
  border: 2px solid var(--rd-ink, #1f1f1f);
  border-radius: var(--rd-radius-lg, 24px);
  box-shadow: 0 8px 0 var(--rd-ink, #1f1f1f);
}
body[data-redesign-theme="soft"] .rd-mod-eyebrow {
  font-size: 28px;
  letter-spacing: 0;
}
body[data-redesign-theme="soft"] .mod-card[data-rd-mod-mode]::after {
  position: absolute;
  top: -10px;
  right: 12px;
  padding: 2px 10px;
  font-size: 10px;
  border: 2px solid var(--rd-ink, #1f1f1f);
  border-radius: var(--rd-radius-sm, 10px);
}
body[data-redesign-theme="soft"] .mod-card[data-rd-mod-mode="auto"]::after {
  content: "AUTO ✨";
  background: var(--rd-success, #7FD8BE);
  color: var(--rd-ink, #1f1f1f);
}
body[data-redesign-theme="soft"] .mod-card[data-rd-mod-mode="click"]::after {
  content: "TAP TO USE";
  background: var(--rd-warning, #fbbf24);
  color: var(--rd-ink, #1f1f1f);
}
body[data-redesign-theme="soft"] .mod-card[data-rd-mod-mode="auto"] {
  background: #E8F5E9;
  border: 2px solid var(--rd-ink, #1f1f1f);
  box-shadow: 0 4px 0 var(--rd-ink, #1f1f1f);
}
body[data-redesign-theme="soft"] .mod-card[data-rd-mod-mode="click"] {
  background: #E3F2FD;
  border: 2px solid var(--rd-ink, #1f1f1f);
  box-shadow: 0 6px 0 var(--rd-ink, #1f1f1f);
}

/* ─── Noir — drops the modal panel; cards float on the table ─── */
body[data-redesign-theme="noir"] .mod-select-panel[data-rd-overlay-theme] {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 24px;
}
body[data-redesign-theme="noir"] .rd-mod-eyebrow {
  color: var(--rd-accent, #c8a85c);
  font-family: var(--rd-font-mono, ui-monospace, monospace);
  text-align: center;
}
body[data-redesign-theme="noir"] .mod-select-title {
  text-align: center;
  font-family: var(--rd-font-display, "Cinzel", serif);
}
body[data-redesign-theme="noir"] .mod-select-subtitle {
  text-align: center;
  font-style: italic;
  font-family: var(--rd-font-display, "Cinzel", serif);
}
/* Pre-click rotation on noir click-mode cards (from the design — slight tilt) */
body[data-redesign-theme="noir"] .mod-card[data-rd-mod-mode="click"] {
  transform: rotate(-2deg) translateY(-8px);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 0 18px color-mix(in oklab, var(--rd-accent-hi, #e0c373) 35%, transparent));
}
/* Once selected, the click card "settles into armed" — un-tilts and the
 * gold glow fades. CSS-only animation; no flip on noir. */
body[data-redesign-theme="noir"] .mod-card[data-rd-mod-mode="click"]:has(.mod-btn-selected) {
  transform: rotate(0deg) translateY(0);
  filter: none;
}
/* Suppress the V2 flip animation on noir. The card simply transitions
 * to its "armed" appearance instead of flipping to a SELECTED back face. */
body[data-redesign-theme="noir"] .mod-card .mod-flip-back {
  display: none;
}
body[data-redesign-theme="noir"] .mod-card .mod-btn.mod-btn-selected .mod-flip-inner {
  transform: none;
}
/* Ribbon below each card */
body[data-redesign-theme="noir"] .mod-card[data-rd-mod-mode]::after {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 12px;
  font-size: 9px;
  letter-spacing: 0.3em;
  white-space: nowrap;
  border: 1px solid var(--rd-accent, #c8a85c);
}
body[data-redesign-theme="noir"] .mod-card[data-rd-mod-mode="auto"]::after {
  content: "AUTO · ARMED";
  background: var(--rd-bg, #111);
  color: var(--rd-accent, #c8a85c);
}
body[data-redesign-theme="noir"] .mod-card[data-rd-mod-mode="click"]::after {
  content: "CLICK TO PLAY";
  background: var(--rd-accent, #c8a85c);
  color: var(--rd-bg, #111);
  font-weight: 700;
}
/* On selection, ribbon text becomes ARMED */
body[data-redesign-theme="noir"] .mod-card[data-rd-mod-mode="click"]:has(.mod-btn-selected)::after {
  content: "ARMED";
  background: var(--rd-bg, #111);
  color: var(--rd-accent, #c8a85c);
}

/* ─── Phase 7: Mobile (≤700px) ──────────────────────────────────
 * Host-on-phone CSS pass. Plan: mds/april-26-resdesigns/host-mobile-css-plan.md
 *
 * Cycles M1–M6 collapse the redesign surfaces to a vertical stack on
 * phone-sized viewports. Tablets (≥701px) keep the desktop layout.
 *
 * The phone-controller's synthetic-click contract is preserved: every
 * interactive selector remains queryable; rules only change `display`,
 * `grid-template-columns`, `width`, `padding`, `font-size`. M0 in
 * tests/redesign-host-mobile.test.js guards this property.
 *
 * Two `!important` declarations (M1 home grid, M5 HUD strip grid) are
 * required because the home and HUD plugins inject their CSS via
 * runtime <style> tags that may be appended to <head> after this base
 * file's <link rel="stylesheet"> parses. Without !important the
 * plugin's per-theme rule (equal specificity, later source order) wins.
 * ─────────────────────────────────────────────────────────────── */

@media (max-width: 700px) {

  /* M1 — Home shell: collapse the per-theme grid (320px 1fr / 320px 1fr 240px)
   * to a single column. Sidebar, main, and rail children flow as one stack.
   * Padding tightens; panel + heading sizes shrink so the stack feels
   * deliberate rather than a desktop layout shoved at small width. */
  body[data-redesign-theme] .rd-home {
    grid-template-columns: 1fr !important;
    padding: 0 12px 16px;
    gap: 16px;
  }
  body[data-redesign-theme] .rd-home__sidebar,
  body[data-redesign-theme] .rd-home__main,
  body[data-redesign-theme] .rd-home__rail {
    gap: 12px;
  }
  body[data-redesign-theme] .rd-home__panel {
    padding: 12px;
  }
  body[data-redesign-theme] .rd-home__panel-value {
    font-size: 22px;
  }
  body[data-redesign-theme] .rd-home__section-heading {
    font-size: 20px;
    margin-bottom: 12px;
  }

  /* M2 — Format cards: stack the Team Question / Group Boss Challenge cards
   * vertically so each card has the full content width. The legacy 2-col
   * grid in homeLayout.js's HOME_CSS is overridden here at equal specificity;
   * source order beats it (this @media block is later in the loaded base
   * stylesheet than the plugin's runtime <style> insertion). */
  body[data-redesign-theme] .rd-home__format-cards {
    grid-template-columns: 1fr;
  }

  /* M3 — Question phase: collapse all 3 themes to a single column.
   * Stack order: hud → (soft: teams →) main → rail.
   * - cyberpunk/noir desktop is `1fr 240px` (main + rail).
   * - soft desktop is `220px 1fr 200px` (teams + main + rail).
   * On phone the rail crushes the question text; we let it stack below. */
  body[data-redesign-theme="cyberpunk"] .rd-question,
  body[data-redesign-theme="noir"]      .rd-question,
  body[data-redesign-theme="medieval"]  .rd-question {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hud"
      "main"
      "rail";
    padding: 0 12px 16px;
    gap: 16px;
  }
  body[data-redesign-theme="soft"] .rd-question {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hud"
      "teams"
      "main"
      "rail";
    padding: 0 12px 16px;
    gap: 16px;
  }
  /* HUD top row inside the question shell: stack the steal-timer cell below
   * the team mini-tiles instead of side-by-side (`1fr 200px` on desktop). */
  body[data-redesign-theme="cyberpunk"] .rd-question__hud,
  body[data-redesign-theme="noir"]      .rd-question__hud,
  body[data-redesign-theme="medieval"]  .rd-question__hud {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Soft's #options-area is 2-col on desktop; collapse to 1-col on phone so
   * 4 wordy answers stack predictably. Cyberpunk/noir are already 1-col. */
  body[data-redesign-theme="soft"] #options-area {
    grid-template-columns: 1fr;
  }
  /* Tighten answer-button vertical footprint on phone: the desktop
   * min-height: 56px + heavier padding pushes 4 buttons past the fold and
   * buries the question text. */
  body[data-redesign-theme] .option-btn {
    min-height: 48px;
    padding: 10px 14px;
  }

  /* M4 — Question-board table → vertical cards.
   * The legacy <table class="question-board"> is re-parented into the home
   * shell. On phone its content-driven column widths overflow the viewport.
   * Drop the table layout machinery and let rows + cells stack as blocks.
   *
   * IMPORTANT: this only changes layout. The .points-button elements and
   * .question-cat-headers <th>s stay in DOM with their click handlers
   * intact. Both the host's tap and the controller's synthetic .click()
   * continue to work — display: block does not remove elements or block
   * pointer events. M0 in this test file guards that no rule drops these. */
  body[data-redesign-theme] .question-board,
  body[data-redesign-theme] .question-board tbody,
  body[data-redesign-theme] .question-board tr,
  body[data-redesign-theme] .question-board th,
  body[data-redesign-theme] .question-board td {
    display: block;
    width: 100%;
  }
  body[data-redesign-theme] .question-board tr {
    margin-bottom: 12px;
    border-bottom: 1px solid var(--rd-line);
    padding-bottom: 12px;
  }
  body[data-redesign-theme] .question-board th {
    font-family: var(--rd-font-display);
    text-transform: var(--rd-text-display-case);
    letter-spacing: var(--rd-text-display-tracking);
    background: var(--rd-panel);
    border: 1px solid var(--rd-line);
    border-radius: var(--rd-radius-sm);
    padding: 10px 12px;
    margin-bottom: 6px;
    text-align: left;
    font-size: 14px;
  }
  body[data-redesign-theme] .question-board td {
    padding: 4px 0;
  }
  body[data-redesign-theme] .points-button {
    width: 100%;
    min-height: 44px;
  }

  /* Scoreboard table — same `display: block` pattern as the question-board
   * above, but with ONE critical difference: child combinators (>) instead
   * of descendant combinators throughout.
   *
   * Why: displayScoreBoard() in clientMain.js:2115 builds malformed DOM by
   * using <tr> elements as wrappers around stat <td>s — three inner <tr>s
   * nested inside the stats <td> per team row (invalid HTML, persists in
   * the live DOM because createElement bypasses HTML parsing). On desktop
   * the browser's table-layout algorithm silently fixes this via anonymous
   * boxes; on mobile, when we set `display: block` on every descendant
   * <tr>, those misused inner rows become block-flowed too, and their
   * still-`display: table-cell` <td> children trigger anonymous-table
   * wrapper generation that collapses subsequent team rows into a single
   * rendered region — resulting in "only the first team visible" with
   * nothing to scroll to.
   *
   * Fix: scope each rule to the path `.scoreboard-div > table > tbody > tr`
   * via child combinators. This matches only the legitimate outer team
   * rows (direct children of <tbody>) and leaves the malformed inner <tr>s
   * at their default display so the browser keeps fixing them via its
   * table-layout machinery, exactly as on desktop. */
  body[data-redesign-theme] .scoreboard-div > table,
  body[data-redesign-theme] .scoreboard-div > table > caption#scoreboard,
  body[data-redesign-theme] .scoreboard-div > table > tbody,
  body[data-redesign-theme] .scoreboard-div > table > tbody > tr {
    display: block;
    width: 100%;
  }
  body[data-redesign-theme] .scoreboard-div > table > tbody > tr {
    padding: 8px 0;
    border-bottom: 1px solid var(--rd-line);
  }
  /* The HP-bar td injected by enhanceLegacyScoreboard becomes a full-width
   * bar below the row's other cells instead of a side cell. */
  body[data-redesign-theme] .rd-home__hp-bar {
    display: block;
    width: 100%;
    height: 4px;
    margin-top: 4px;
  }

  /* M8 — Scoreboard panel cap + internal scroll on phone.
   * Without this cap, the re-parented scoreboard grows as tall as its
   * content needs (M4 makes the table flow as block elements; the home
   * plugin sets max-height: none on the container). For ≥4 teams that
   * pushes the format cards and category picker far below the fold.
   *
   * Cap to 40vh and turn on overflow-y: auto so the panel becomes a
   * scrollable window — host can glance at the scoreboard without losing
   * the picker, regardless of team count.
   *
   * !important on max-height beats the home plugin's
   *   `body[data-redesign-theme] .scoreboard-div { max-height: none }`
   * (homeLayout.js HOME_CSS line 262), which is at equal specificity but
   * wins on source order because the plugin's <style> tag is appended to
   * <head> after this base file's <link> parses. Same pattern as M1 + M5.
   * overflow-y: auto does NOT need !important — the plugin doesn't set
   * overflow, and this rule has higher specificity than the legacy
   * .scoreboard-div rule in main-base2.css:1474. */
  body[data-redesign-theme] .scoreboard-div {
    max-height: 40vh !important;
  }

  /* M5 — HUD strip: full 1-col stack + downscale on phone.
   * hudStrip.js's HUD_CSS template literal already drops to 2-col at
   * ≤700px; this rule overrides it to 1-col so 4 teams stack as 4 rows.
   * !important is required because the plugin's <style> tag is injected
   * at runtime and its rule wins on source order at equal specificity. */
  body[data-redesign-theme] .rd-hud-strip {
    grid-template-columns: 1fr !important;
    gap: 0;
    margin-bottom: 8px;
  }
  body[data-redesign-theme] .rd-hud-strip__tile {
    padding: 6px 10px;
    border-bottom: 1px solid var(--rd-line);
  }
  body[data-redesign-theme] .rd-hud-strip__name {
    font-size: 12px;
  }
  body[data-redesign-theme] .rd-hud-strip__stats {
    gap: 8px;
    font-size: 10px;
  }
  body[data-redesign-theme] .rd-hud-strip__bar {
    height: 2px;
  }

  /* M6 — Header reflow.
   * Desktop: brand-left, nav-right, single horizontal line. On phone the
   * nav wraps unprincipled. Stack instead: brand on top, nav below as a
   * horizontal-scrollable row that keeps all links on one line. */
  body[data-redesign-theme] .header-area.rd-header {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
    gap: 8px;
  }
  body[data-redesign-theme] .rd-header__brand {
    margin-right: 0;
    font-size: 18px;
  }
  body[data-redesign-theme] .rd-header__nav {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 4px;
  }
  body[data-redesign-theme] .rd-header__nav-link {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 4px 10px;
  }

  /* M6 — Lobby polish.
   * Lobby already collapses to 1-col at ≤800px (Rev1). At ≤700px we tighten
   * column padding and shrink the 4-letter-box widget so all 4 boxes fit
   * on one line at a 320px viewport (iPhone SE 1st-gen baseline). */
  body[data-redesign-theme] .rd-lobby__join,
  body[data-redesign-theme] .rd-lobby__host {
    padding: 24px 18px;
    gap: 12px;
  }
  body[data-redesign-theme] .rd-lobby__heading {
    font-size: 22px;
  }
  body[data-redesign-theme] .rd-lobby__letter-box {
    width: 56px;
    height: 64px;
    font-size: 28px;
  }

  /* M6 — Powerup overlay 2-up grid.
   * .mod-select-row already has flex-wrap: wrap under redesign (line 2728).
   * Pin each .mod-card to ~50% width so 2 cards per row form a clean 2-up
   * grid mirroring the controller's mods phase layout. */
  body[data-redesign-theme] .mod-card {
    margin: 20px;
    width: calc(50% - 8px);
    min-width: 0;
  }

  body[data-redesign-theme] .mod-select-panel[data-rd-overlay-theme] {
    overflow: auto;
  }

  body[data-redesign-theme] .main-game-area-s {
    margin-left: 1%;
    margin-right: 1%;
  }

  /* M6 — Recap downscale.
   * The recap was designed for ~1000–1200px canvas. On phone, dropping
   * --recap-scale to 0.45 brings the composition to ~530px, which fits a
   * 375px viewport with margins. Every internal transform chain in
   * advanced-animations.css composes under this scale, so animations stay
   * coherent. The host's accessibility slider can still override this via
   * localStorage hostRecapScale. */
  body[data-redesign-theme] {
    --recap-scale: 0.65;
  }

  /** GBQ question picker */
  body[data-redesign-theme] .gbq-select-panel {
    overflow: auto;
  }
}

/** Host client Overlay alert */
  body[data-redesign-theme] .client-result-overlay {
    font-family: var(--rd-font-display);
    font-size: 2rem;
  }

/* ═══════════════════════════════════════════════════════════════════════
 * Direction 4 — Medieval Magic per-theme paint
 * ═══════════════════════════════════════════════════════════════════════
 * Mirrors directions/medieval.jsx (parchment + amethyst + burgundy + gold).
 * All blocks scoped to body[data-redesign-theme="medieval"]. Custom
 * --mv-* tokens are declared in main-medieval.css.
 */

/* Cycle 60 — Question card: parchment gradient, double gold border, drop-cap.
 * Mirrors MvQuestion (medieval.jsx:737-792). */
body[data-redesign-theme="medieval"] #question-div {
  background: linear-gradient(180deg, var(--mv-parchment-hi, #F8EDD2), var(--mv-parchment, #EFE3C8));
  border: 1.5px solid var(--rd-accent-hi, #D4A65C);
  box-shadow: inset 0 0 0 1px rgba(122, 90, 40, 0.5),
              0 6px 18px rgba(0, 0, 0, 0.4);
  color: var(--mv-ink, #2A1F18);
  border-radius: var(--rd-radius-md, 3px);
  padding: 28px 32px;
}
body[data-redesign-theme="medieval"] #question-div h2.question-category,
body[data-redesign-theme="medieval"] #question-div p.question-main {
  color: var(--mv-ink, #2A1F18);
  font-family: var(--rd-font-display, 'Cinzel', serif);
}
body[data-redesign-theme="medieval"] #question-main-p::first-letter {
  float: left;
  font-family: var(--rd-font-display, 'Cinzel', serif);
  font-weight: 700;
  font-size: 3.5em;
  line-height: 0.85;
  color: var(--mv-burgundy, #7B2D26);
  margin-right: 8px;
  margin-top: 2px;
  text-shadow: 1px 1px 0 var(--rd-accent, #B8893E);
}

/* Cycle 61 — Answer-button A/B/C/D index chip remap + parchment correct state. */
body[data-redesign-theme="medieval"] .option-btn {
  background: var(--rd-bg-elevated, #241a36);
  color: var(--rd-ink, #EFE3C8);
  border: 1.5px solid var(--rd-accent-dim, #7A5A28);
  font-family: var(--rd-font-display, 'Cinzel', serif);
  letter-spacing: 0.08em;
}
body[data-redesign-theme="medieval"] .option-btn[data-rd-answer-idx="1"]::before { content: "A"; }
body[data-redesign-theme="medieval"] .option-btn[data-rd-answer-idx="2"]::before { content: "B"; }
body[data-redesign-theme="medieval"] .option-btn[data-rd-answer-idx="3"]::before { content: "C"; }
body[data-redesign-theme="medieval"] .option-btn[data-rd-answer-idx="4"]::before { content: "D"; }
body[data-redesign-theme="medieval"] .option-btn::before {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--rd-bg, #1a1228);
  border: 1.5px solid var(--rd-accent-hi, #D4A65C);
  color: var(--rd-ink, #EFE3C8);
  font-family: var(--rd-font-display, 'Cinzel', serif);
  font-weight: 700;
  margin-right: 12px;
}

/* Cycle 62 — Powerup overlay panel + medieval card variant.
 * Mirrors MvPowerup (medieval.jsx:675-733). */
body[data-redesign-theme="medieval"] .mod-select-panel {
  background: linear-gradient(180deg, var(--rd-bg-elevated, #241a36), var(--rd-bg, #1a1228));
  border: 1.5px solid var(--rd-accent-dim, #7A5A28);
}
.mod-btn--rd-medieval {
  position: relative;
  border: 1px solid var(--rd-accent-hi, #D4A65C) !important;
  border-radius: var(--rd-radius-md, 3px);
  /* Cycle 70: dropped outer glow + 4px parchment ring (was overflowing the
   * question-phase rail and covering options). Kept a single ghosted gold
   * inset border for the double-frame medieval look. */
  box-shadow: inset 0 0 0 1px rgba(122, 90, 40, 0.5);
}
.mod-btn--rd-medieval .rd-mod-front--medieval {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto auto;
  align-items: center;
  justify-items: center;
  gap: 6px;                          /* Cycle 70: 8px → 6px (parity with noir) */
  padding: 10px 8px;                 /* Cycle 70: 22px 18px → 10px 8px (parity with noir) */
  background: linear-gradient(180deg, var(--mv-parchment-hi, #F8EDD2), var(--mv-parchment, #EFE3C8));
  color: var(--rd-accent, #B8893E);  /* glyphs inherit gold via currentColor */
  font-family: var(--rd-font-display, 'Cinzel', serif);
  text-align: center;
  border-radius: var(--rd-radius-md, 3px);
  height: 100%;
  box-sizing: border-box;
}
.mod-btn--rd-medieval .rd-mod-numeral {
  font-family: var(--rd-font-display, 'Cinzel', serif);
  font-size: 11px;                   /* Cycle 70: 12px → 11px (parity with noir) */
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--rd-accent-dim, #7A5A28);
  text-transform: uppercase;
}
.mod-btn--rd-medieval .rd-mod-rule {
  display: block;
  width: 80%;                        /* Cycle 70: 64% → 80% (parity with noir) */
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rd-accent, #B8893E) 20%, var(--rd-accent, #B8893E) 80%, transparent);
}
.mod-btn--rd-medieval .rd-mod-glyph {
  display: grid;
  place-items: center;
  /* Cycle 70: dropped fixed 80×80 — let the glyph SVG (size: 64px from
   * applyMedievalFace) determine its own footprint with light padding. */
  padding: 6px 0;
  color: var(--rd-accent, #B8893E);  /* glyph SVG strokes inherit this */
}
.mod-btn--rd-medieval .rd-mod-name {
  font-family: var(--rd-font-display, 'Cinzel', serif);
  font-weight: 600;
  font-size: 14px;                   /* Cycle 70: 16px → 14px (parity with noir) */
  letter-spacing: 0.12em;
  color: var(--mv-burgundy, #7B2D26);
  text-transform: uppercase;
}
.mod-btn--rd-medieval .rd-mod-flavor {
  font-family: var(--rd-font-body, 'Inter Tight', system-ui, serif);
  font-style: italic;
  font-weight: 400;
  font-size: 11px;                   /* Cycle 70: 12px → 11px (parity with noir) */
  letter-spacing: 0.02em;
  line-height: 1.4;
  padding: 0 4px;
  color: var(--mv-ink-dim, #5C4838);
}

/* Cycle 63 — Home phase 3-col paint: parchment THE PRIZE rail + dark THE HOUSES. */
body[data-redesign-theme="medieval"] .rd-home {
  color: var(--rd-ink, #EFE3C8);
}
body[data-redesign-theme="medieval"] .rd-home__sidebar .rd-home__panel {
  background: linear-gradient(180deg, var(--rd-bg-elevated, #241a36), var(--rd-bg, #1a1228));
  border-color: var(--rd-accent-dim, #7A5A28);
}
body[data-redesign-theme="medieval"] .rd-home__rail .rd-home__panel {
  background: linear-gradient(180deg, var(--mv-parchment-hi, #F8EDD2), var(--mv-parchment, #EFE3C8));
  color: var(--mv-ink, #2A1F18);
  border: 1.5px solid var(--rd-accent-hi, #D4A65C);
  box-shadow: inset 0 0 0 1px rgba(122, 90, 40, 0.4);
}
body[data-redesign-theme="medieval"] .rd-home__rail .rd-home__panel .rd-home__panel-label,
body[data-redesign-theme="medieval"] .rd-home__rail .rd-home__panel .rd-home__panel-value {
  color: var(--mv-ink, #2A1F18);
}
body[data-redesign-theme="medieval"] .rd-home__panel-label {
  font-family: var(--rd-font-display, 'Cinzel', serif);
  letter-spacing: 0.4em;
  color: var(--rd-accent, #B8893E);
}

/* Cycle 64 — Lobby paint: parchment JOIN + dark HOST + gold-fade divider. */
body[data-redesign-theme="medieval"] .rd-lobby {
  background: transparent;
  color: var(--rd-ink, #EFE3C8);
}
body[data-redesign-theme="medieval"] .rd-lobby__join {
  background: linear-gradient(180deg, var(--mv-parchment-hi, #F8EDD2), var(--mv-parchment, #EFE3C8));
  color: var(--mv-ink, #2A1F18);
  border: 1.5px solid var(--rd-accent-hi, #D4A65C);
  box-shadow: inset 0 0 0 1px rgba(122, 90, 40, 0.4);
  border-radius: var(--rd-radius-md, 3px);
}
body[data-redesign-theme="medieval"] .rd-lobby__host {
  background: linear-gradient(180deg, var(--rd-bg-elevated, #241a36), var(--rd-bg, #1a1228));
  border: 1.5px solid var(--rd-accent-dim, #7A5A28);
  border-radius: var(--rd-radius-md, 3px);
}
body[data-redesign-theme="medieval"] .rd-lobby__divider {
  background: var(--mv-gold-fade, linear-gradient(180deg, transparent, #B8893E, transparent));
}
body[data-redesign-theme="medieval"] .rd-lobby__letter-box {
  background: var(--mv-parchment-hi, #F8EDD2);
  border: 1.5px solid var(--mv-amethyst, #6B3FA0);
  color: var(--mv-burgundy, #7B2D26);
  box-shadow: inset 0 0 0 1px var(--rd-accent, #B8893E);
  font-family: var(--rd-font-display, 'Cinzel', serif);
  font-weight: 700;
}
/* Cycle 72 — Lobby JOIN side: heading / sub-text / section-label use globally
 * scoped colors (--rd-ink / --rd-ink-dim) which under medieval are parchment
 * tints. Against the parchment JOIN panel they vanish — explicit per-child
 * iron-gall overrides restore contrast. The JOIN-side eyebrow (gold) is left
 * alone — gold-on-parchment is intentional decorative styling per the design
 * source (medieval.jsx:507). HOST side is dark and inherits readable defaults. */
body[data-redesign-theme="medieval"] .rd-lobby__join .rd-lobby__heading {
  color: var(--mv-ink, #2A1F18);
}
body[data-redesign-theme="medieval"] .rd-lobby__join .rd-lobby__sub-text {
  color: var(--mv-ink-dim, #5C4838);
}
body[data-redesign-theme="medieval"] .rd-lobby__join .rd-lobby__section-label {
  color: var(--mv-ink-dim, #5C4838);
}

/* Cycle 65 — Notification toast: Herald's Scrolls + wax-seal sigil. */
body[data-redesign-theme="medieval"] .rd-toast {
  font-family: var(--rd-font-body, 'Inter Tight', serif);
}
body[data-redesign-theme="medieval"] .rd-toast-mirror-card {
  background: linear-gradient(180deg, var(--mv-parchment-hi, #F8EDD2), var(--mv-parchment, #EFE3C8));
  color: var(--mv-ink, #2A1F18);
  border: 1.5px solid var(--rd-accent-hi, #D4A65C);
  box-shadow: 0 4px 16px rgba(107, 63, 160, 0.20);
  border-radius: var(--rd-radius-md, 3px);
}
body[data-redesign-theme="medieval"] .rd-toast-label {
  font-family: var(--rd-font-display, 'Cinzel', serif);
  letter-spacing: 0.4em;
  color: var(--rd-accent, #B8893E);
}
body[data-redesign-theme="medieval"] .rd-toast-mirror-card[data-rd-toast-type="success"]::before,
body[data-redesign-theme="medieval"] .rd-toast-mirror-card[data-rd-toast-type="info"]::before {
  content: "✦";
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--mv-burgundy, #7B2D26), #4a1612);
  border: 2px solid var(--rd-accent-hi, #D4A65C);
  color: var(--rd-accent-hi, #D4A65C);
  font-family: var(--rd-font-display, 'Cinzel', serif);
  font-size: 18px;
  margin-right: 10px;
}
body[data-redesign-theme="medieval"] .rd-toast-count {
  background: var(--mv-burgundy, #7B2D26);
  color: var(--rd-ink, #EFE3C8);
  border: 1px solid var(--rd-accent-hi, #D4A65C);
  font-family: var(--rd-font-display, 'Cinzel', serif);
}
/* Cycle 71 — Toast header label + clear-all button text (other themes inject
 * this via ::before content; medieval was missing it, so the Dispel-all
 * button rendered as an empty bordered box). */
body[data-redesign-theme="medieval"] .rd-toast-label::before {
  content: "✦ HERALD'S SCROLLS";
  font-family: var(--rd-font-display, 'Cinzel', serif);
  text-transform: uppercase;
  letter-spacing: 0.4em;
}
body[data-redesign-theme="medieval"] .rd-toast-clear-all::before {
  content: "DISPEL ALL";
}

/* Cycle 66 — Mode carousel medieval card paint (decorations beyond plugin CSS). */
.gmc-rd-card[data-rd-theme="medieval"] {
  font-family: var(--rd-font-body, 'Inter Tight', serif);
  color: var(--rd-ink, #EFE3C8);
}
.gmc-rd-card[data-rd-theme="medieval"] .gmc-rd-card__name {
  font-family: var(--rd-font-display, 'Cinzel', serif);
  letter-spacing: 0.14em;
  color: var(--rd-ink, #EFE3C8);
  text-transform: uppercase;
}
.gmc-rd-card[data-rd-theme="medieval"] .gmc-rd-card__sub {
  font-style: italic;
  color: var(--rd-ink-dim, #D9C8A4);
}

/* Cycle 67 — Mobile controller minimum-viable medieval paint. */
body[data-redesign-theme="medieval"] .ctrl-category-btn,
body[data-redesign-theme="medieval"] .ctrl-question-btn,
body[data-redesign-theme="medieval"] .ctrl-answer-btn {
  font-family: var(--rd-font-display, 'Cinzel', serif);
  letter-spacing: 0.1em;
  background: var(--rd-bg-elevated, #241a36);
  color: var(--rd-ink, #EFE3C8);
  border: 1.5px solid var(--rd-accent-dim, #7A5A28);
}
body[data-redesign-theme="medieval"] .ctrl-answer-btn.correct,
body[data-redesign-theme="medieval"] .ctrl-answer-btn[data-correct="true"] {
  background: linear-gradient(180deg, var(--mv-parchment-hi, #F8EDD2), var(--mv-parchment, #EFE3C8));
  color: var(--mv-ink, #2A1F18);
  border-color: var(--rd-accent-hi, #D4A65C);
}
body[data-redesign-theme="medieval"] .ctrl-mod-btn {
  font-family: var(--rd-font-display, 'Cinzel', serif);
  letter-spacing: 0.12em;
  border: 1.5px solid var(--rd-accent, #B8893E);
}