/* ============================================================================
   FOOTDICE — Component styles (components.css)
   Token-only, fd-prefixed classes for the shared primitives (Component Inventory).
   Screens (T11–T13) reuse these classes directly; .razor wrappers in
   Components/Shared/ add only state/logic. NO hardcoded hex — tokens.css only.
   ============================================================================ */

/* ==========================================================================
   Icon — inline SVG sprite glyph (<Icon Name="fd-…" />, defs in IconSprite).
   Sized by the parent's font-size; colored by currentColor, which the parent
   drives from tokens (never hardcode hex). Shape is never the only signal.
   ========================================================================== */
.fd-ic {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.125em;   /* optical baseline alignment beside text */
  flex: none;                 /* never let flex parents squash the glyph */
  fill: currentColor;
}
/* Icon that leads text inside an inline label/chip/tag (no flex gap to lean on). */
.fd-ic--lead { margin-right: 0.4em; }

/* ==========================================================================
   BButton — "press-into-the-page": translate and shadow move together.
   ========================================================================== */
.fd-btn {
  --btn-bg: var(--color-panel);
  --btn-fg: var(--color-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display-tight);
  font-size: var(--text-ui);
  line-height: 1;
  padding: 10px 18px;
  min-height: 44px;                 /* WCAG 2.5.8 touch target */
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: var(--border-width) solid var(--color-ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transform: translate(0, 0);
  transition: transform var(--motion-snap), box-shadow var(--motion-snap);
  user-select: none;
}
.fd-btn:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 0 var(--color-shadow);
}
.fd-btn:active {
  transform: translate(var(--shadow-offset), var(--shadow-offset));
  box-shadow: none;
  background: var(--btn-fg);        /* fg/bg invert on press */
  color: var(--btn-bg);
}
.fd-btn:disabled,
.fd-btn[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  /* Accent variants set --btn-fg to a fixed/dark ink that only contrasts on their own bright fill.
     When disabled we swap the fill to the neutral panel-alt, so the foreground MUST follow back to
     theme ink — otherwise a disabled yellow/blue button is dark-on-near-black in dark theme. */
  --btn-fg: var(--color-ink);
  color: var(--color-ink);
  /* FD-026: diagonal hatch makes a disabled CTA unmistakably inert, not just the
     enabled button minus its hue. Shared here so every disabled button reads the same. */
  background-color: var(--color-panel-alt);
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--color-ink) 12%, transparent) 0 2px,
    transparent 2px 9px
  );
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.fd-btn:disabled:hover,
.fd-btn[aria-disabled="true"]:hover {
  transform: none;            /* defeat the enabled :hover nudge */
  box-shadow: none;
}
.fd-btn--blue   { --btn-bg: var(--color-accent-blue);   --btn-fg: var(--color-on-dark); }
.fd-btn--yellow { --btn-bg: var(--color-select); --btn-fg: var(--ink-fixed); }  /* darker gold + fixed dark text → readable in both themes */
.fd-btn--red    { --btn-bg: var(--color-accent-red-surface); --btn-fg: var(--color-on-dark); }
.fd-btn--green  { --btn-bg: var(--color-success);       --btn-fg: var(--ink-fixed); }  /* success CTA (SQUAD → MATCH) */
.fd-btn--black  { --btn-bg: var(--color-ink);           --btn-fg: var(--color-bg); }
.fd-btn--sm { padding: 6px 12px; min-height: 0; font-size: calc(var(--text-ui) * 0.875); }
.fd-btn--lg { padding: 14px 24px; font-size: calc(var(--text-ui) * 1.25); }
.fd-btn--xl { padding: 18px 32px; font-size: calc(var(--text-ui) * 1.5); }
.fd-btn--full { width: 100%; }
/* Core-loop CTA ("the next step" — FD batch T6): the shadow snap-pulses 5× (~4.5s) when the button
   arms, then settles; the accent fill stays as the persistent loudness. First hover ends the shout.
   Applied via BButton Emphasis, which drops the class while disabled — the inert hatch is untouched. */
.fd-btn--go { animation: goPulse 900ms steps(1, end) 5; }
.fd-btn--go:hover { animation: none; }

/* ==========================================================================
   Panel — bordered slab with hard shadow; optional black header bar + mono kicker.
   ========================================================================== */
.fd-panel {
  display: flex;
  flex-direction: column;
  background: var(--color-panel);
  color: var(--color-ink);   /* a panel owns its fg (it owns its bg) — never inherit an .on-accent surface's white */
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard);
}
.fd-panel__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-bg);
  border-bottom: var(--border-width) solid var(--color-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display-tight);
}
.fd-panel--blue   .fd-panel__header { background: var(--color-accent-blue);   color: var(--color-on-dark); }
.fd-panel--yellow .fd-panel__header { background: var(--color-accent-yellow); color: var(--color-ink); }
.fd-panel__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide);
  opacity: var(--opacity-strong);
}
.fd-panel__body { padding: var(--space-md); }
.fd-panel--pad-lg .fd-panel__body { padding: var(--space-lg); }
.fd-panel--fill { flex: 1 1 auto; }
.fd-panel--fill .fd-panel__body { flex: 1 1 auto; overflow: auto; }
.fd-panel--flat { box-shadow: none; }

/* ==========================================================================
   Tag — inline bordered badge (effect tags, result chips, header tags).
   ========================================================================== */
.fd-tag {
  --tag-bg: var(--color-panel);
  --tag-fg: var(--color-ink);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 3px 6px;
  background: var(--tag-bg);
  color: var(--tag-fg);
  border: var(--border-width-micro) solid var(--color-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-display-tight);
  line-height: 1;
}
.fd-tag--mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tracking-mono-wide);
}
.fd-tag--blue   { --tag-bg: var(--color-accent-blue);   --tag-fg: var(--color-on-dark); }
.fd-tag--yellow { --tag-bg: var(--color-accent-yellow); --tag-fg: var(--ink-fixed); }
.fd-tag--red    { --tag-bg: var(--color-accent-red-surface); --tag-fg: var(--color-on-dark); }
.fd-tag--green  { --tag-bg: var(--color-success);       --tag-fg: var(--ink-fixed); }
.fd-tag--black  { --tag-bg: var(--color-ink);           --tag-fg: var(--color-bg); }

/* ==========================================================================
   Segmented — single-select control, internal 4px dividers.
   ========================================================================== */
.fd-seg {
  display: inline-flex;
  border: var(--border-width) solid var(--color-ink);
  background: var(--color-panel);
  box-shadow: var(--shadow-hard-sm);
}
.fd-seg--full { display: flex; width: 100%; }
.fd-seg__opt {
  flex: 1 0 auto;
  padding: 8px 16px;
  background: transparent;
  color: var(--color-ink);
  border: 0;
  border-left: var(--border-width) solid var(--color-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-ui);
  letter-spacing: var(--tracking-display-tight);
  cursor: pointer;
  transition: background var(--motion-snap), color var(--motion-snap);
}
.fd-seg__opt:first-child { border-left: 0; }
/* Selected segment — a highlighted blue fill + a pushed-in inset so the active archetype/option is
   unmistakable. A Blazor-bound aria-pressed bool renders MINIMIZED when true and is omitted when
   false, so the bare [aria-pressed] (attribute-present) selector matches only the active option —
   this works on the current HTML without a recompile; the .is-active class is the explicit backup. */
.fd-seg__opt.is-active,
.fd-seg__opt[aria-pressed] {
  background: var(--color-accent-blue);
  color: var(--color-on-dark);
  box-shadow: inset var(--shadow-offset-sm) var(--shadow-offset-sm) 0 0 var(--color-ink);
}
/* Keep the focus ring visible on the blue fill (T18 AA). */
.fd-seg__opt.is-active:focus-visible,
.fd-seg__opt[aria-pressed]:focus-visible { outline-color: var(--color-accent-yellow); }
.fd-seg__opt:active { transform: translate(2px, 2px); }   /* press-in click feedback */
.fd-seg--sm .fd-seg__opt { padding: 5px 10px; font-size: calc(var(--text-ui) * 0.875); }
/* FD-026: disabled segmented control reads inert (matches the disabled-button hatch). */
.fd-seg--disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.fd-seg--disabled .fd-seg__opt {
  cursor: not-allowed;
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--color-ink) 12%, transparent) 0 2px,
    transparent 2px 9px
  );
}
.fd-seg--disabled .fd-seg__opt:active { transform: none; }

/* ==========================================================================
   BSlider — segmented-tick track, chunky yellow square thumb, mono readout.
   Native <input type=range> drives interaction; CSS draws the brutalist look.
   ========================================================================== */
.fd-slider { display: flex; align-items: center; gap: var(--space-md); }
.fd-slider__track {
  --val: 50%;
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  height: 28px;
  margin: 0;
  background:
    /* filled portion */
    linear-gradient(var(--color-accent-blue), var(--color-accent-blue)) 0 / var(--val) 100% no-repeat,
    /* tick segments */
    repeating-linear-gradient(90deg,
      var(--color-panel) 0, var(--color-panel) calc(10% - var(--border-width-micro)),
      var(--color-ink) calc(10% - var(--border-width-micro)), var(--color-ink) 10%),
    var(--color-panel);
  border: var(--border-width) solid var(--color-ink);
  cursor: ew-resize;
}
.fd-slider__track::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 36px;
  background: var(--color-accent-yellow);
  border: var(--border-width-nested) solid var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
  cursor: ew-resize;
}
.fd-slider__track::-moz-range-thumb {
  width: 22px;
  height: 36px;
  background: var(--color-accent-yellow);
  border: var(--border-width-nested) solid var(--color-ink);
  cursor: ew-resize;
}
/* Grab feedback — the thumb presses into the track. */
.fd-slider__track:active::-webkit-slider-thumb { box-shadow: none; transform: translateY(2px); }
.fd-slider__track:active::-moz-range-thumb { transform: translateY(2px); }
.fd-slider__track:hover { box-shadow: var(--shadow-hard-sm); }
.fd-slider__readout {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono-wide);
  min-width: 3ch;
  text-align: right;
}

/* ==========================================================================
   BToggle — 64×30 switch; on = blue track + yellow knob, off = panel + ink knob.
   ========================================================================== */
.fd-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-ui);
}
/* Semantic on/off: OFF = neutral grey track + ✕ knob (left); ON = green track + ✓ knob (right).
   Track color, knob position and the glyph all move together, so state reads at a glance. */
.fd-toggle__switch {
  position: relative;
  width: 64px;
  height: 30px;
  flex: none;
  background: var(--color-panel-alt);
  border: var(--border-width-nested) solid var(--color-ink);
  transition: background var(--motion-snap), box-shadow var(--motion-snap);
}
.fd-toggle:hover .fd-toggle__switch { box-shadow: var(--shadow-hard-sm); }
.fd-toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.fd-toggle:focus-visible .fd-toggle__switch { box-shadow: var(--shadow-hard-sm); }
.fd-toggle__knob {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 100%;
  background: var(--color-ink);
  border-right: var(--border-width-nested) solid var(--color-ink);
  transition: transform var(--motion-snap);
}
/* The on/off glyph rides on the knob; --color-bg always contrasts the ink knob in both themes. */
.fd-toggle__knob::after {
  content: "\2715"; /* ✕ */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  color: var(--color-bg);
}
.fd-toggle.is-on .fd-toggle__switch { background: var(--color-success); }
.fd-toggle.is-on .fd-toggle__knob { transform: translateX(30px); }
.fd-toggle.is-on .fd-toggle__knob::after { content: "\2713"; /* ✓ */ }
/* FD-026: disabled switch is inert (no hover lift, dimmed). */
.fd-toggle.is-disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.fd-toggle.is-disabled:hover .fd-toggle__switch { box-shadow: none; }

/* ==========================================================================
   Tier swatches — TierStamp (rubber-stamp), TierBadge (chip).
   Tier color + on-color come from data-tier (set inline by the wrapper).
   ========================================================================== */
.fd-tier-stamp {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  background: var(--tier-bg, var(--color-tier-regular));
  color: var(--tier-fg, var(--color-ink));
  border: var(--border-width-nested) solid var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-stamp);
  font-size: var(--text-section);
  transform: rotate(-6deg);
}
.fd-tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: var(--tier-bg, var(--color-tier-regular));
  color: var(--tier-fg, var(--color-ink));
  border: var(--border-width-micro) solid var(--color-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-display-tight);
}
.fd-tier-badge--sm { padding: 1px 5px; }

/* ==========================================================================
   DieFace — static square D20 readout (number + tiny mono label).
   ========================================================================== */
.fd-die-face {
  --face-size: 96px;
  display: inline-grid;
  place-items: center;
  width: var(--face-size);
  height: var(--face-size);
  background: var(--face-bg, var(--color-panel));
  color: var(--face-fg, var(--color-ink));
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard);
  position: relative;
}
.fd-die-face__num {
  font-family: var(--font-display);
  font-size: calc(var(--face-size) * 0.55);
  line-height: 1;
}
.fd-die-face__label {
  position: absolute;
  bottom: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide);
  opacity: var(--opacity-muted);
}

/* ==========================================================================
   PosChip — macro-position label; out-of-position amber "!" corner.
   ========================================================================== */
.fd-pos-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  padding: 2px 6px;
  background: var(--pos-bg, var(--color-panel-alt));
  color: var(--pos-fg, var(--color-ink));
  border: var(--border-width-micro) solid var(--color-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-micro);
}
.fd-pos-chip--glk { --pos-bg: var(--color-macro-glk); --pos-fg: var(--ink-fixed); }
.fd-pos-chip--def { --pos-bg: var(--color-macro-def); --pos-fg: var(--color-on-dark); }
.fd-pos-chip--mid { --pos-bg: var(--color-macro-mid); --pos-fg: var(--ink-fixed); }
.fd-pos-chip--ata { --pos-bg: var(--color-macro-ata); --pos-fg: var(--ink-fixed); }
/* Secondary-position variant — smaller, lighter; signals "can also play here". */
.fd-pos-chip--sec {
  min-width: 0;
  padding: 1px 4px;
  font-size: var(--text-micro);
  background: var(--color-panel-alt); /* fallback if color-mix is unsupported */
  background: color-mix(in srgb, var(--pos-bg, var(--color-panel-alt)) 24%, var(--color-panel));
  color: var(--color-ink);
}
.fd-pos-chip--out::after {
  content: "!";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: var(--color-tier-failure);
  color: var(--color-ink);
  border: var(--border-width-micro) solid var(--color-ink);
  font-size: var(--text-micro);
}

/* ==========================================================================
   Dice — D20 hex face & D100 tier wheel. SVG markup lives in the .razor; these
   rules size the host and carry the roll states (idle/rolling/settled/crit/fumble).
   ========================================================================== */
.fd-dice { display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.fd-dice__label {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide);
  opacity: var(--opacity-muted);
}
/* FD: a waiting, clickable die is THE control on screen — the accent hard-shadow halo + the TAP chip
   (rendered by the die itself when TapLabel is set) say "this needs your input", not just a cursor. */
.fd-dice--clickable { cursor: pointer; }
.fd-dice__wrap { display: inline-block; }
.fd-dice--clickable .fd-dice__art {
  filter: drop-shadow(6px 6px 0 var(--color-accent-blue));
  transition: transform 120ms linear;
  /* The whole die is the control: let clicks anywhere over the art (painted shapes AND the
     transparent interior/corners) fall through to the .fd-dice box that carries @onclick, so the
     entire die rolls — not just its painted lower half or the TAP chip below it. */
  pointer-events: none;
}
.fd-dice--clickable:hover .fd-dice__art,
.fd-dice--clickable:focus-visible .fd-dice__art { transform: scale(1.05); }
/* DL-02 — idle affordance ships as a pair: the fdNudge scale-snap pulse (staggered per die so two
   waiting dice don't pulse in lockstep) + the blinking TAP chip below. Both exist only while the die
   is clickable (screens drop Clickable the moment a roll starts), and collapse under reduced motion. */
.fd-dice--clickable .fd-dice__wrap { animation: fdNudge 2.7s steps(1, end) infinite; }
.fd-d100.fd-dice--clickable .fd-dice__wrap { animation-delay: .35s; }
.fd-dice__tap {
  font-family: var(--font-display);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  background: var(--color-accent-yellow);
  color: var(--ink-fixed);
  border: 3px solid var(--color-ink);
  box-shadow: var(--shadow-hard);
  animation: popIn 240ms var(--ease-steps-pop) both, fdBlink 1.8s steps(1, end) infinite;
}
/* D20 face fill + number color per state. DL-04 roll-low: 1 = crit (supreme), 20 = fumble (catastrophic). */
.fd-d20 { --die-bg: var(--color-panel); --die-num: var(--color-ink); }
.fd-d20.is-crit   { --die-bg: var(--color-tier-supreme);      --die-num: var(--on-tier-supreme); }
.fd-d20.is-fumble { --die-bg: var(--color-tier-catastrophic); --die-num: var(--on-tier-catastrophic); }
.fd-dice.is-rolling .fd-dice__art { animation: diceWiggle 220ms linear infinite; transform-origin: 50% 50%; }
/* Richer per-die roll: the D20 tumbles then dice.js hands it to a light wiggle at ~55% of the churn. */
.fd-d20.is-rolling .fd-dice__art  { animation: d20Tumble 200ms ease-in-out infinite, diceWiggle 240ms linear infinite; }
/* D100 — DL-01: the needle no longer loops; dice.js sweeps it from 12 o'clock onto the rolled value
   (3 turns + ease-out) and clacks on arrival. The dial, zones and readout stay still. */
.fd-d100.is-rolling .fd-dice__art    { animation: none; }
.fd-d100__needle { transform-box: view-box; transform-origin: 100px 100px; }
.fd-dice.is-crit .fd-dice__art    { animation: diceShake 600ms steps(8, end) both; }
.fd-dice.is-fumble .fd-dice__art  { animation: diceShake 600ms steps(8, end) both; }
.fd-d100.is-settled .fd-dice__art { animation: d100Pop 460ms var(--ease-punch) both; }
/* DL-06 — in 3D mode dice3d.js owns all motion (tumble, sweep, pop, shake via inline animations);
   the flat-state CSS animations stand down so the two never fight. */
.fd-dice[data-style="3d"] .fd-dice__art,
.fd-dice[data-style="3d"] .fd-d100__needle { animation: none; }
/* GF-06 — the D100 readout slams around its own center on land (numSlam class set in the .razor). */
.fd-d100 { position: relative; }
.fd-d100__readout { transform-box: fill-box; transform-origin: center; }
/* GF-03 — NAT 1 / NAT 100 badge stamped over the die (natStamp owns transform, so it centers via
   margins, never translate). Self-fades; the value stays in the readout, so nothing is motion-only. */
.fd-d100__nat {
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  margin-inline: auto;
  width: max-content;
  pointer-events: none;
  font-family: var(--font-display);
  font-size: var(--text-ui);
  letter-spacing: var(--tracking-stamp);
  padding: 2px var(--space-sm);
  border: var(--border-width-micro) solid var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
}
.fd-d100__nat--crit   { background: var(--color-tier-supreme);      color: var(--on-tier-supreme); }
.fd-d100__nat--fumble { background: var(--color-tier-catastrophic); color: var(--on-tier-catastrophic); }
/* DL-05 — D20 legend: "ROLL LOW — 1 IS BEST" + the condition bands with tier swatches, shown on
   every screen that carries a D20. Bands come from the live engine table (D20Legend.razor). */
.fd-d20legend {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  max-width: 900px;
  /* A real framed panel — a bare hard shadow with no border/fill reads as a floating ghost box. */
  background: var(--color-panel);
  border: var(--border-width-nested) solid var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
  padding: var(--space-sm) var(--space-md);
}
.fd-d20legend__title {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 700;
  letter-spacing: 0.16em;
}
/* FD-016: the whole table as a readable chip row — white chips, tier swatch + range + name. */
.fd-d20legend__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.fd-d20legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 5px 10px;
  background: var(--color-panel);
  /* Ink outline — the tertiary grey all but vanished in dark theme. */
  border: var(--border-width-micro) solid var(--color-ink);
  color: var(--text-secondary);
  text-transform: uppercase;
}
/* The band the die actually landed in (post-roll receipt). */
.fd-d20legend__item.is-rolled {
  border-color: var(--color-ink);
  background: var(--color-select);
  color: var(--ink-fixed);
}
.fd-d20legend__range { font-family: var(--font-display); color: var(--color-ink); }
.fd-d20legend__item.is-rolled .fd-d20legend__range { color: var(--ink-fixed); }
.fd-d20legend__swatch {
  flex: none;
  width: 9px;
  height: 9px;
  border: 1px solid var(--color-ink);
}

/* GF-03/GF-12 — one-shot edge-flash overlays (anim-edge-flash owns the decay; color = currentColor). */
.fd-natflash,
.fd-match__flash { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.fd-match__flash { color: var(--color-success); }

/* ==========================================================================
   NationMark — procedural SVG flag block (sized here; geometry in the .razor).
   ========================================================================== */
.fd-nation {
  display: inline-block;
  border: var(--border-width-micro) solid var(--color-ink);
  line-height: 0;
}
.fd-nation img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* ==========================================================================
   Modal / overlay — dark scrim + centered bordered panel with mood shadow.
   ========================================================================== */
.fd-modal__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: var(--color-scrim);
  display: grid;
  place-items: center;
  padding: var(--space-lg);
}
.fd-modal__panel {
  --mood: var(--color-shadow);
  max-width: min(560px, 100%);
  width: 100%;
  /* Never taller than the (padded) viewport: the header stays pinned and the body scrolls, so the
     footer action (e.g. RESUME on the subs overlay) is always reachable on deep squads / short screens. */
  max-height: calc(100vh - var(--space-lg) * 2);
  max-height: calc(100dvh - var(--space-lg) * 2);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-panel);
  color: var(--color-ink);   /* own the fg — a modal opened over an .on-accent screen must not inherit its white text */
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--mood);
}
.fd-modal__panel > .fd-panel__header { flex: 0 0 auto; }
.fd-modal__panel > .fd-panel__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Wide variant: room for the pause pitch + bench side by side. */
.fd-modal__panel--wide { max-width: min(1080px, 100%); }
/* FD-017: the team-talk modal thins its scrim so the live first-half ticker reads faintly behind the
   decision, instead of a flat dark field. */
.fd-modal__scrim.fd-modal--talk { background: color-mix(in srgb, var(--color-scrim) 55%, transparent); }
.fd-modal--yellow .fd-modal__panel { --mood: var(--color-accent-yellow); }
.fd-modal--green  .fd-modal__panel { --mood: var(--color-success); }
.fd-modal--red    .fd-modal__panel { --mood: var(--color-accent-red); }
/* Blue mood (START rules): blue-filled header bar, ink shadow. */
.fd-modal--blue .fd-panel__header {
  background: var(--color-accent-blue);
  color: var(--color-on-dark);
  border-bottom: var(--border-width) solid var(--color-ink);
}
.fd-modal--blue .fd-panel__kicker { color: var(--color-on-dark); opacity: var(--opacity-soft); }

/* Penalty modal: a FILLED header bar so the spot-kick reads at a glance as its own moment — visually
   distinct from the neutral half-time talk. The header tint tracks the result (yellow while kicking →
   red conceded / green stopped). --mood doubles as both the hard-shadow and the header fill. */
.fd-modal--penalty       .fd-modal__panel { --mood: var(--color-accent-yellow); --mood-fg: var(--ink-fixed); }
.fd-modal--penalty-red   .fd-modal__panel { --mood: var(--color-accent-red);    --mood-fg: var(--color-on-dark); }
.fd-modal--penalty-green .fd-modal__panel { --mood: var(--color-success);       --mood-fg: var(--ink-fixed); }
.fd-modal--penalty .fd-panel__header,
.fd-modal--penalty-red .fd-panel__header,
.fd-modal--penalty-green .fd-panel__header {
  background: var(--mood);
  color: var(--mood-fg);
  border-bottom: var(--border-width) solid var(--color-ink);
}
.fd-modal--penalty .fd-panel__kicker,
.fd-modal--penalty-red .fd-panel__kicker,
.fd-modal--penalty-green .fd-panel__kicker { color: var(--mood-fg); opacity: var(--opacity-soft); }

/* ==========================================================================
   RoundTracker — the shared stage rail (final decisions): display 10px chips,
   2px ink border, 3×8px padding; current = blue fill; W/D/L colored.
   ========================================================================== */
.fd-round { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.fd-round__chip {
  padding: 3px 8px;
  text-align: center;
  background: var(--color-panel);
  color: var(--color-ink);
  border: var(--border-width-micro) solid var(--color-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 10px;
  line-height: 1.4;
}
.fd-round__chip--w { background: var(--color-success);       color: var(--ink-fixed); }
.fd-round__chip--d { background: var(--color-accent-yellow); color: var(--ink-fixed); }
.fd-round__chip--l { background: var(--color-accent-red-surface); color: var(--color-on-dark); }
.fd-round__chip--current {
  background: var(--color-accent-blue);
  color: var(--color-on-dark);
}

/* ==========================================================================
   RoadTimeline — the run's spine (final decisions, Hub + Path): a 6px ink
   line with 45°-rotated diamond stops on an equal count-driven grid.
   Grammar: current ⑂ yellow + shadow (clickable) · next match blue enlarged ·
   known future white · unknown cream dashed · future ⑂ small pale dashed.
   ========================================================================== */
.fd-road {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--road-stops, 15), 1fr);
  align-items: start;
}
.fd-road__line {
  position: absolute;
  left: 0; right: 0;
  /* the diamond row: caption (14px) + half the 76px diamond band */
  top: calc(14px + 38px - 3px);
  height: 6px;
  background: var(--color-ink);
}
.fd-road__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}
.fd-road__above,
.fd-road__below {
  height: 14px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.fd-road__below--strong { color: var(--color-ink); }
.fd-road__diamond {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(45deg);
  font-family: var(--font-display);
  text-transform: uppercase;
  flex: none;
  padding: 0;
  /* every diamond centers inside the same 76px band so the line always bisects it */
  margin-top: calc((76px - var(--stop-size, 40px)) / 2);
  margin-bottom: calc((76px - var(--stop-size, 40px)) / 2);
  width: var(--stop-size, 40px);
  height: var(--stop-size, 40px);
}
.fd-road__label {
  transform: rotate(-45deg);
  font-size: var(--stop-font, 11px);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fd-road__diamond--played {
  --stop-size: 40px; --stop-font: 10px;
  background: var(--color-panel);
  color: var(--color-ink);
  border: var(--border-width-nested) solid var(--color-ink);
}
.fd-road__diamond--next {
  --stop-size: 54px; --stop-font: 13px;
  background: var(--color-accent-blue);
  color: var(--color-on-dark);
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
}
.fd-road__diamond--future {
  --stop-size: 40px; --stop-font: 11px;
  background: var(--color-panel);
  color: var(--color-ink);
  border: var(--border-width-nested) solid var(--color-ink);
}
.fd-road__diamond--unknown {
  --stop-size: 40px; --stop-font: 10px;
  background: var(--color-bg);
  color: var(--text-secondary);
  border: var(--border-width-nested) dashed var(--text-tertiary);
}
.fd-road__diamond--path,
.fd-road__diamond--path-past {
  --stop-size: 26px; --stop-font: 10px;
  background: var(--color-highlight-pale);
  color: var(--text-secondary);
  border: var(--border-width-micro) dashed var(--text-tertiary);
}
.fd-road__diamond--path-past { opacity: var(--opacity-muted); }
.fd-road__diamond--path-current {
  --stop-size: 40px; --stop-font: 13px;
  background: var(--color-accent-yellow);
  color: var(--ink-fixed);
  border: var(--border-width-nested) solid var(--color-ink);
  box-shadow: var(--shadow-hard-xs);
  cursor: pointer;
  transition: transform var(--motion-snap), box-shadow var(--motion-snap);
}
button.fd-road__diamond--path-current:hover {
  transform: rotate(45deg) translate(-2px, -2px);
  box-shadow: var(--shadow-hard-sm);
}
button.fd-road__diamond--path-current:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* PATH screen variant: the current ⑂ is the hero — enlarged, heavier border. */
.fd-road--path .fd-road__diamond--path-current {
  --stop-size: 48px; --stop-font: 15px;
  border-width: var(--border-width);
  box-shadow: var(--shadow-hard-sm);
}

/* ==========================================================================
   Line chips — DEF/MID/ATT rating chips on the macro-position color axis
   (FD-023). Shared by Hub NEXT STOP, Pre-match header, Squad LINES bar.
   ========================================================================== */
.fd-linechips { display: flex; gap: var(--space-sm); justify-content: center; }
.fd-linechip {
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  padding: 3px 9px;
  border: var(--border-width-micro) solid var(--color-ink);
  white-space: nowrap;
}
.fd-linechip--def { background: var(--color-macro-def); color: var(--color-on-dark); }
.fd-linechip--mid { background: var(--color-macro-mid); color: var(--ink-fixed); }
.fd-linechip--att { background: var(--color-macro-ata); color: var(--ink-fixed); }

/* ==========================================================================
   FitChip — FIT label + 10-segment bar + numeric readout.
   ========================================================================== */
.fd-fit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide);
}
.fd-fit__bar { display: inline-flex; gap: 2px; }
.fd-fit__seg {
  width: 8px;
  height: 16px;
  background: var(--color-panel-alt);
  border: 1px solid var(--color-ink);
}
.fd-fit--high .fd-fit__seg.is-on { background: var(--color-success); }
.fd-fit--mid  .fd-fit__seg.is-on { background: var(--color-accent-yellow); }
.fd-fit--low  .fd-fit__seg.is-on { background: var(--color-accent-red); }

/* ==========================================================================
   TickerRow — bordered match-event row, mono minute + display text, slamIn.
   ========================================================================== */
.fd-ticker {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-panel);
  border: var(--border-width-micro) solid var(--color-ink);
}
.fd-ticker + .fd-ticker { border-top: 0; }
.fd-ticker__min {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: var(--tracking-mono-wide);
  min-width: 4ch;
}
.fd-ticker__text { font-family: var(--font-display); text-transform: uppercase; }
/* Goals: plain dark row + a bold colored MARKER (green = you, red = them). Kept distinct from the
   yellow/red CARD left-bars below so a goal never reads as a card. Dark fill is fixed in both themes. */
.fd-ticker--goal-you,
.fd-ticker--goal-them { background: var(--ink-fixed); color: var(--paper-fixed); }
.fd-ticker__marker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5em;
  height: 1.5em;
  font-size: var(--fs-mono);
  line-height: 1;
  border: var(--border-width-micro) solid var(--paper-fixed);
}
.fd-ticker--goal-you  .fd-ticker__marker { background: var(--color-success);    color: var(--ink-fixed); }
.fd-ticker--goal-them .fd-ticker__marker { background: var(--color-accent-red); color: var(--ink-fixed); }
/* GF-12 — your scorer's name is the headline of the row: bigger, and in your goal green. */
.fd-ticker__scorer { color: var(--color-success); font-size: 1.15em; }
.fd-ticker--yellow    { border-left: var(--shadow-offset) solid var(--color-accent-yellow); }
.fd-ticker--red       { border-left: var(--shadow-offset) solid var(--color-accent-red); }
.fd-ticker--info      { background: var(--color-ink); color: var(--color-bg); }

/* ==========================================================================
   ScoreBox — black box, big digits (scoreSlam on goal), blue minute tag.
   ========================================================================== */
.fd-score {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-ink);
  color: var(--color-bg);
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard);
}
.fd-score__digits {
  font-family: var(--font-display);
  font-size: var(--text-score);
  line-height: 1;
  letter-spacing: var(--tracking-display-tight);
}
/* GF-06 — each digit is its own inline-block so scoreSlam can scale just the one that changed. */
.fd-score__digit { display: inline-block; }
.fd-score__min {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  background: var(--color-accent-blue);
  color: var(--color-on-dark);
  padding: 2px 6px;
  letter-spacing: var(--tracking-mono-wide);
}

/* ==========================================================================
   DraftCard — rarity band IS the spinner; revealed shows pos+era+name+overall.
   ========================================================================== */
.fd-draft {
  width: 220px;
  background: var(--color-panel);
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform var(--motion-snap), box-shadow var(--motion-snap);
}
.fd-draft--small { width: 168px; }
.fd-draft__band {
  --rar: var(--color-rarity-normal);
  --rar-fg: var(--color-ink);
  padding: var(--space-xs) var(--space-sm);
  background: var(--rar);
  color: var(--rar-fg);
  border-bottom: var(--border-width) solid var(--color-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-micro);
  display: flex;
  justify-content: space-between;
}
.fd-draft__band--legendary { --rar: var(--color-rarity-legendary); --rar-fg: var(--ink-fixed); }
.fd-draft__band--rare      { --rar: var(--color-rarity-rare);      --rar-fg: var(--color-on-dark); }
.fd-draft__band--normal    { --rar: var(--color-rarity-normal);    --rar-fg: var(--ink-fixed); }
.fd-draft.is-spinning .fd-draft__band { animation: diceWiggle 220ms linear infinite; }
.fd-draft__body { padding: var(--space-md); display: grid; gap: var(--space-sm); }
.fd-draft__name { font-family: var(--font-display); text-transform: uppercase; line-height: 1.05; }
.fd-draft__ovr { font-family: var(--font-display); font-size: var(--text-section); line-height: 1; }
/* wrap so a multi-position player's extra chips fall to a second line INSIDE the fixed-width card
   instead of overflowing its width — the card never grows wider than its 220/168px box. */
.fd-draft__meta { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; }
.fd-draft:hover { transform: translate(var(--lift-offset), var(--lift-offset)); box-shadow: 9px 9px 0 0 var(--color-shadow); }
.fd-draft.is-selected {
  border-width: 5px;
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-accent-yellow);
  transform: translate(var(--lift-offset), var(--lift-offset));
}
.fd-draft.is-taken { opacity: var(--opacity-dim); cursor: not-allowed; pointer-events: none; }

/* Tier edge — a chunky rarity-colored left border reads the player's tier at a glance. */
.fd-draft { border-left-width: 8px; border-left-color: var(--rar-edge, var(--color-rarity-normal)); }
.fd-draft--legendary { --rar-edge: var(--color-rarity-legendary); }
.fd-draft--rare      { --rar-edge: var(--color-rarity-rare); }
.fd-draft--normal    { --rar-edge: var(--color-rarity-normal); }

/* Staggered entrance reveal — replays whenever the parent re-keys a fresh draw / re-roll. backwards
   (not forwards) so the post-animation transform releases and :hover lift still works. */
.fd-draft--reveal {
  animation: draftReveal 280ms var(--ease-overshoot, ease-out) backwards;
  animation-delay: var(--reveal-delay, 0ms);
}
html.reduced-motion .fd-draft--reveal { animation: none; }

/* GF-32: rarity-tiered entrances. A RARE brightens as it lands; a LEGENDARY (already last + held in
   the stagger) slams heavier and fires a one-shot gold edge flash. NORMAL cards are untouched. */
.fd-draft--reveal-rare {
  animation: draftReveal 280ms var(--ease-overshoot, ease-out) backwards,
             zoneLand 700ms ease-out backwards;
  animation-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms);
}
.fd-draft--reveal-epic {
  position: relative;
  animation: stampIn 420ms var(--ease-punch) backwards,
             zoneLand 900ms ease-out backwards;
  animation-delay: var(--reveal-delay, 0ms), var(--reveal-delay, 0ms);
}
.fd-draft--reveal-epic::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--color-accent-yellow);
  animation: edgeFlash 950ms ease-out both;
  animation-delay: var(--reveal-delay, 0ms);
}
html.reduced-motion .fd-draft--reveal-rare,
html.reduced-motion .fd-draft--reveal-epic { animation: none; }
html.reduced-motion .fd-draft--reveal-epic::after { animation: none; opacity: 0; }

/* ==========================================================================
   FormationCard — selectable shape: mini pitch (slot dots) + name + line counts.
   ========================================================================== */
.fd-formation-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 180px;
  padding: var(--space-md);
  background: var(--color-panel);
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard);
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform var(--motion-snap), box-shadow var(--motion-snap);
}
.fd-formation-card:hover { transform: translate(var(--lift-offset), var(--lift-offset)); box-shadow: 9px 9px 0 0 var(--color-shadow); }
.fd-formation-card:active { transform: translate(var(--shadow-offset), var(--shadow-offset)); box-shadow: none; }
.fd-formation-card:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.fd-formation-card.is-selected {
  box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-accent-yellow);
  transform: translate(var(--lift-offset), var(--lift-offset));
}
.fd-formation-card__name {
  font-family: var(--font-display);
  font-size: var(--text-section);   /* 28px — the 64px scoreline size wrapped "4-2-3-1" to two lines */
  letter-spacing: var(--tracking-display-tight);
  white-space: nowrap;
  line-height: 1;
}
.fd-formation-card__pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--color-panel-alt);
  border: var(--border-width-nested) solid var(--color-ink);
}
.fd-formation-card__dot {
  position: absolute;
  width: 15px;
  height: 15px;
  border: var(--border-width-micro) solid var(--color-ink);
  transform: translate(-50%, -50%);
}
.fd-formation-card__dot--glk { background: var(--color-macro-glk); }
.fd-formation-card__dot--def { background: var(--color-macro-def); }
.fd-formation-card__dot--mid { background: var(--color-macro-mid); }
.fd-formation-card__dot--ata { background: var(--color-macro-ata); }
.fd-formation-card__lines {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  opacity: 0.8;
}

/* ==========================================================================
   PitchSlot / BenchSlot — 80px slots with arm / out-of-position / drag rings.
   ========================================================================== */
/* Drag-and-drop: the player cards are grabbable, and neither a drag sweep nor a double-click may
   select their text — mid-drag selection reads as a glitch and breaks the drop gesture. Containers
   included so the sweep can't select neighboring cards' text either. */
.fd-slot, .fd-pool,
.fd-squad__pitch, .fd-squad__pool, .fd-pause__pitch, .fd-pause__bench {
  user-select: none;
  -webkit-user-select: none;
}
.fd-slot[draggable="true"], .fd-pool[draggable="true"] { cursor: grab; }
.fd-slot[draggable="true"]:active, .fd-pool[draggable="true"]:active { cursor: grabbing; }

.fd-slot {
  position: relative;
  width: 80px;
  height: 80px;
  display: grid;
  /* Single full-width column (not an auto content track) so children — crucially the energy bar —
     span the slot's fixed inner width identically for every player, instead of tracking name length.
     align-content centers the stack vertically; items stretch to the column. */
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: stretch;
  text-align: center;
  gap: 2px;
  padding: 4px;
  background: var(--slot-bg, var(--color-panel));
  color: var(--slot-fg, var(--color-ink));
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  font-family: var(--font-display);
  transition: transform var(--motion-snap), box-shadow var(--motion-snap), outline-color var(--motion-snap);
}
/* Line-family fills — the XI reads as colored lines (canon macro palette). */
.fd-slot--glk { --slot-bg: var(--color-macro-glk); --slot-fg: var(--ink-fixed); }
.fd-slot--def { --slot-bg: var(--color-macro-def); --slot-fg: var(--color-on-dark); }
.fd-slot--mid { --slot-bg: var(--color-macro-mid); --slot-fg: var(--ink-fixed); }
.fd-slot--ata { --slot-bg: var(--color-macro-ata); --slot-fg: var(--ink-fixed); }
/* Empty slot: a faint wash of its line color so the shape still reads which line goes where. */
.fd-slot--empty {
  background: var(--color-panel-alt); /* fallback if color-mix is unsupported */
  background: color-mix(in srgb, var(--slot-bg, var(--color-panel-alt)) 16%, var(--color-panel-alt));
  color: var(--color-ink);
  border-style: dashed;
}
/* Truncate long names so they never widen/overflow the fixed square (full name stays on the title/aria).
   The big landscape pitch (.fd-squad__pitch) has the height to wrap to two lines instead — see below. */
.fd-slot__name { font-size: var(--text-micro); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fd-slot__ovr { font-size: var(--text-ui); line-height: 1; }
/* Energy reads as a vertical gauge pinned inside the LEFT edge (fills bottom-up like a tank),
   so tired players jump out across the pitch; .fd-slot--has-energy reserves the strip's room.
   Wide enough (10px) to read as a drained/full tank at a glance, not a stray border. */
.fd-slot--has-energy { padding-left: 22px; }
.fd-slot__energy {
  position: absolute;
  left: 4px; top: 4px; bottom: 4px;
  width: 10px;
  background: var(--color-panel-alt);
  border: var(--border-width-micro) solid var(--color-ink);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.fd-slot__energy-fill { display: block; width: 100%; }
.fd-slot__energy-fill.is-high { background: var(--color-success); }
.fd-slot__energy-fill.is-mid  { background: var(--color-accent-yellow); }
.fd-slot__energy-fill.is-low  { background: var(--color-accent-red); }
/* Yellow-card chip — a tiny tilted "card" in the top-right corner of a booked player (one more = red). */
.fd-slot__booked {
  position: absolute;
  top: 3px; right: 4px;
  width: 9px; height: 12px;
  background: var(--color-accent-yellow);
  border: var(--border-width-micro) solid var(--color-ink);
  transform: rotate(8deg);
}
.fd-slot.is-armed { outline: var(--border-width) solid var(--color-accent-blue); outline-offset: 2px; }
/* A reposition target while another pitch player is armed: tap to swap their slots (dashed = "move here"). */
.fd-slot.is-swap { outline: var(--border-width) dashed var(--color-accent-blue); outline-offset: 2px; }
.fd-slot.is-out   { outline: var(--border-width) solid var(--color-tier-failure); outline-offset: 2px; }
.fd-slot.is-out::after {
  content: "!";
  position: absolute; top: -10px; right: -10px;
  width: 18px; height: 18px; display: grid; place-items: center;
  background: var(--color-tier-failure); color: var(--color-ink);
  border: var(--border-width-micro) solid var(--color-ink);
}
.fd-slot.is-drag-match    { outline: var(--border-width) solid var(--color-success); outline-offset: 2px; }
.fd-slot.is-drag-mismatch { opacity: var(--opacity-dim); }
/* Bench affinity to the vacated slot: green = natural, gold = can cover (secondary), amber = out of
   position. Recolors the selectable outline so the eye can sort the bench at a glance during a sub. */
.fd-slot.is-aff-exact     { outline-color: var(--color-success); }
.fd-slot.is-aff-secondary { outline-color: var(--color-accent-yellow); }
.fd-slot.is-aff-other     { outline-color: var(--color-tier-failure); }
.fd-slot--bench { width: auto; min-width: 80px; }

/* ==========================================================================
   PoolRow — squad pool row; suspended = BAN badge + dim + unclickable.
   ========================================================================== */
.fd-pool {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  min-height: 48px;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-panel);
  border: var(--border-width-micro) solid var(--color-ink);
  cursor: pointer;
}
.fd-pool + .fd-pool { border-top: 0; }
.fd-pool__num { font-family: var(--font-mono); min-width: 3ch; opacity: var(--opacity-muted); }
.fd-pool__sec { display: inline-flex; flex-wrap: nowrap; overflow: hidden; gap: 2px; }
.fd-pool__name { flex: 1 1 auto; min-width: 0; font-family: var(--font-display); text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-pool__ovr { font-family: var(--font-display); font-size: var(--text-ui); }
.fd-pool.is-suspended,
.fd-pool.is-injured { opacity: var(--opacity-dim); cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   TacticCard — D20 conditions range + risk columns; selected = blue fill.
   ========================================================================== */
.fd-tactic {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--color-panel);
  border: var(--border-width) solid var(--color-ink);
  border-left-width: 8px;   /* discipline-risk accent stripe (see .fd-tactic--{risk}) */
  box-shadow: var(--shadow-hard-sm);
  cursor: pointer;
  transition: background var(--motion-snap), color var(--motion-snap);
}
.fd-tactic--green  { border-left-color: var(--color-success); }
.fd-tactic--yellow { border-left-color: var(--color-accent-yellow); }
.fd-tactic--red    { border-left-color: var(--color-accent-red-surface); }
.fd-tactic__title { font-family: var(--font-display); text-transform: uppercase; }
.fd-tactic__range { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--tracking-mono-wide); }
.fd-tactic__risks { display: flex; gap: var(--space-md); font-family: var(--font-mono); font-size: var(--text-micro); }
/* Per-line shape trade-off chips (DEF/MID/ATT ±): green up, red down. */
.fd-tactic__mods { display: flex; gap: var(--space-md); font-family: var(--font-mono); font-size: var(--text-micro); font-weight: 700; }
.fd-tactic__mods .is-up { color: var(--color-success); }
.fd-tactic__mods .is-down { color: var(--color-accent-red); }
.fd-tactic.is-selected { background: var(--color-accent-blue); color: var(--color-on-dark); }
/* On the blue selected fill the tinted chips fall below AA — inherit the on-dark ink instead. */
.fd-tactic.is-selected .fd-tactic__mods .is-up,
.fd-tactic.is-selected .fd-tactic__mods .is-down { color: inherit; }
/* Focus ring switches to yellow on the blue fill so it stays visible (T18 AA). */
.fd-tactic.is-selected:focus-visible { outline-color: var(--color-accent-yellow); }

/* ==========================================================================
   SuspensionBadge — red BAN corner badge / yellow accumulation pips.
   ========================================================================== */
.fd-susp {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 2px 6px;
  border: var(--border-width-micro) solid var(--color-ink);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-micro);
}
.fd-susp--red { background: var(--color-accent-red-surface); color: var(--color-on-dark); }
.fd-susp--injury { background: var(--color-tier-failure); color: var(--ink-fixed); }
.fd-susp--accum { background: var(--color-accent-yellow); color: var(--ink-fixed); letter-spacing: 2px; }

/* ==========================================================================
   Check — footer validation status (ok / warn / missing).
   ========================================================================== */
.fd-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-micro);
}
.fd-check__glyph { font-size: var(--text-ui); line-height: 1; }
.fd-check--ok      { color: var(--color-success); }
.fd-check--warn    { color: var(--color-tier-failure); }
.fd-check--missing { color: var(--color-accent-red-text); }

/* ==========================================================================
   V2Header — wordmark + tags · round tracker (or kicker) · NationMark + ⚙.
   Final-decisions bar: 60px white strip, 4px ink bottom border, no offset
   shadow. Slim variant: transparent chrome row (Path/Match felt headers).
   ========================================================================== */
.fd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}
.fd-header--bar {
  min-height: 60px;
  padding: 0 var(--space-md) 0 20px;
  background: var(--color-panel);
  border-bottom: var(--border-width) solid var(--color-ink);
}
.fd-header--slim {
  padding: var(--space-md) var(--space-lg) var(--space-sm) var(--space-lg);
  background: transparent;
}
.fd-header__left, .fd-header__right { display: flex; align-items: center; gap: var(--space-sm); }
.fd-header__wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: 21px;
  letter-spacing: var(--tracking-display-tight);
}
.fd-header--slim .fd-header__wordmark { font-size: 18px; }
.fd-header__kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.fd-header__nation { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-ui); }
.fd-header__coach {
  font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase; opacity: var(--opacity-strong); padding-right: var(--space-sm);
  border-right: var(--border-width-micro) solid var(--color-ink); max-width: 16ch;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-header__gear {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-width: 40px;
  font-size: 20px; line-height: 1; cursor: pointer;
  background: var(--color-panel); color: var(--color-ink);
  border: var(--border-width) solid var(--color-ink);
  box-shadow: var(--shadow-hard);
  transition: transform 120ms linear, box-shadow 120ms linear;
}
.fd-header__gear:hover { transform: translate(-2px, -2px); }
.fd-header__gear:active { transform: translate(var(--shadow-offset), var(--shadow-offset)); box-shadow: none; }
.fd-header__gear:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
@media (max-width: 767px) {
  .fd-header { justify-content: center; }
  .fd-header__center { order: 3; width: 100%; justify-content: center; display: flex; }
}

/* ==========================================================================
   SettingsModal — "One Sheet, Complete" (final decisions, 2A): the whole
   real inventory in one 2-column sheet of numbered sections, no tabs.
   Rows = label + one-line desc left, the control right. Every change saves
   instantly; RESET ALL DATA is the one destructive act (two-click armed).
   ========================================================================== */
.fd-sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  align-items: start;
  max-height: min(64vh, 700px);
  overflow-y: auto;
}
.fd-sheet__col { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
.fd-sheet__sec {
  border: var(--border-width-nested) solid var(--color-ink);
  background: var(--color-panel);
  display: flex;
  flex-direction: column;
}
.fd-sheet__sechead {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-ink);
  color: var(--color-bg);
  padding: var(--space-sm) var(--space-md);
}
.fd-sheet__secnum { font-family: var(--font-display); font-size: 13px; color: var(--color-on-ink-accent); }
.fd-sheet__sectitle { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; flex: 1; }
.fd-sheet__mutedbadge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  background: var(--color-accent-red-surface);
  color: var(--color-on-dark);
  padding: 2px 7px;
}
.fd-sheet__row {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 12px var(--space-md);
  border-bottom: var(--border-width-micro) solid var(--color-panel-alt);
}
.fd-sheet__sec > .fd-sheet__row:last-child { border-bottom: none; }
.fd-sheet__row.is-dim { opacity: var(--opacity-disabled); }
.fd-sheet__row-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.fd-sheet__row-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.fd-sheet__row-desc {
  font-size: 9.5px;
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  text-transform: uppercase;
}
.fd-sheet__row-control { flex: none; display: flex; align-items: center; }

/* The 10-stop volume cells: click a block; clicking the lit top block steps down one. */
.fd-vol { display: inline-flex; align-items: center; }
.fd-vol__cell {
  width: 16px;
  height: 20px;
  flex: none;
  border: var(--border-width-micro) solid var(--color-ink);
  background: var(--color-panel-alt);
  padding: 0;
  cursor: pointer;
}
.fd-vol__cell + .fd-vol__cell { margin-left: -2px; }
.fd-vol__cell.is-on { background: var(--color-accent-blue); }
.fd-vol__cell:focus-visible { outline: var(--focus-ring); outline-offset: 1px; }
.fd-vol__num {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 13px;
  width: 42px;
  text-align: right;
}

/* AUTOSAVE: informational, permanently on — the FD-026 inert dashed idiom, never a dimmed button. */
.fd-sheet__inert {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.14em;
  padding: 9px 12px;
  border: var(--border-width-micro) dashed var(--color-ink);
  color: var(--text-secondary);
  text-transform: uppercase;
  white-space: nowrap;
}

/* RESET ALL DATA: red-outline idle, red-filled countdown while armed. */
.fd-sheet__reset {
  font-family: var(--font-display);
  font-size: 11px;
  text-transform: uppercase;
  padding: 10px 16px;
  border: var(--border-width-micro) solid var(--color-ink);
  background: var(--color-panel);
  color: var(--color-accent-red-text);
  cursor: pointer;
  white-space: nowrap;
}
.fd-sheet__reset.is-armed {
  border-color: var(--color-accent-red-surface);
  background: var(--color-accent-red-surface);
  color: var(--color-on-dark);
}
.fd-sheet__reset:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.fd-sheet__footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.fd-sheet__footer-kicker {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}
@media (max-width: 860px) {
  .fd-sheet { grid-template-columns: 1fr; }
}

/* ==========================================================================
   ThemeToggle — thin wrapper around Segmented; no extra rules needed.
   KickerPicker / DuelDice / SubPicker — net-new shells (visual only in T10).
   ========================================================================== */
.fd-kicker { display: grid; gap: var(--space-sm); }
.fd-kicker__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-panel);
  color: var(--color-ink);   /* own the fg — the shootout renders on a fixed-dark surface (white text) */
  border: var(--border-width-micro) solid var(--color-ink);
  cursor: pointer;
}
.fd-kicker__row.is-default {
  outline: var(--border-width) solid var(--color-accent-blue);
  outline-offset: 2px;
}
.fd-kicker__hint {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide);
  color: var(--text-secondary);   /* FD-005 */
}

/* Attacker · VS · keeper as a fixed 3-column grid — flex-wrap used to drop the keeper under the
   attacker when the GF-25 edge chip widened that side inside the penalty modal. */
.fd-duel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  justify-items: center;
  align-items: start;
  gap: var(--space-lg);
}
.fd-duel__side { display: grid; gap: var(--space-sm); justify-items: center; min-width: 0; }
.fd-duel__side--attacker { outline: var(--border-width) solid var(--color-accent-blue); outline-offset: var(--space-sm); padding: var(--space-sm); }
.fd-duel__label { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-micro); }
/* GF-25 — the attacker's rulebook edge is permanent UI on the framed side… */
.fd-duel__edge {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide);
  text-align: center;
  padding: 2px var(--space-sm);
  border: var(--border-width-micro) solid var(--color-accent-blue);
  color: var(--color-accent-blue);
  max-width: 100%; /* wrap inside the column instead of widening the attacker side */
}
/* …and each side's resolved Penalty-Tier word lands under its wheel at the verdict. */
.fd-duel__tier {
  font-family: var(--font-display);
  text-transform: uppercase;
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-stamp);
}
.fd-duel__vs { align-self: center; font-family: var(--font-display); font-size: var(--text-section); }
/* "TAP TO ROLL" prompt under the human's own die during a penalty reveal. */
.fd-duel__tap {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono-wide);
  padding: 2px var(--space-sm);
  border: var(--border-width-micro) solid var(--color-ink);
  background: var(--color-accent-yellow);
  color: var(--ink-fixed);
}

.fd-subpicker { display: grid; gap: var(--space-sm); }
.fd-subpicker__pair {
  display: flex; align-items: center; gap: var(--space-sm);
  font-family: var(--font-display); text-transform: uppercase;
}
.fd-subpicker__arrow-out { color: var(--color-accent-red-text); }
.fd-subpicker__arrow-in  { color: var(--color-success); }

/* --- Generic layout helpers used by the gallery & screens ----------------- */
.fd-stack { display: grid; gap: var(--space-md); }
.fd-row { display: flex; gap: var(--space-md); flex-wrap: wrap; align-items: center; }

/* --- Truncation policy (FD-024) -------------------------------------------
   ALL-CAPS mono in tight panels clips constantly. Preference order:
     1. reserve a min-width and let the cell size to it (table columns);
     2. allow 2 lines where vertical space exists (.fd-clamp-2);
     3. only then ellipsis a single line (.fd-truncate), ALWAYS with a title= tooltip.
   These shared helpers replace the copy-pasted overflow/ellipsis triplet. */
/* --- First-run / empty states (FD-004) ------------------------------------
   One shared treatment so a clean slate reads as "nothing here yet, do X" rather
   than a wall of zeros/locks. Title + body + an optional inline action. */
.fd-empty { display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
.fd-empty--center { align-items: center; text-align: center; }
.fd-empty__title { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-section); line-height: 1; }
.fd-empty__body { color: var(--text-secondary); }
.fd-empty__action { margin-top: var(--space-sm); }

.fd-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-clamp-2 {
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.fd-kicker-text {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide);
  color: var(--text-secondary);   /* FD-005: solid AA grey, not dimmed ink */
  text-transform: uppercase;
}

/* ==========================================================================
   T13 — interactive states fleshed out for KickerPicker / SubPicker / DuelDice.
   ========================================================================== */
.fd-kicker { outline: none; }
.fd-kicker__row.is-focus {
  background: var(--color-select);
  color: var(--ink-fixed);
  transform: translate(var(--lift-offset), var(--lift-offset));
  box-shadow: var(--shadow-hard-sm);
}
.fd-kicker__name { display: flex; align-items: center; gap: var(--space-sm); }
.fd-kicker__ovr { font-family: var(--font-display); }
/* GF-22 — energy % + risk glyphs at pick time (the OVR shown always equals the duel wheel's). */
.fd-kicker__meta { display: inline-flex; align-items: center; gap: var(--space-md); }
.fd-kicker__energy {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide);
  opacity: var(--opacity-muted);
}
.fd-kicker__energy.is-low { color: var(--color-accent-red); opacity: 1; }
.fd-kicker__glyph { display: inline-flex; line-height: 0; }
.fd-kicker__glyph--booked  { color: var(--color-accent-yellow); }
.fd-kicker__glyph--injured { color: var(--color-accent-red); }

/* The OFF/ON lists scroll as one region (deep 26-man squads) so the RESUME button below stays
   visible. The reserve leaves room for the two headers + the footer button. */
.fd-subpicker__cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);
  align-items: start;
  max-height: calc(100vh - 14rem);
  max-height: calc(100dvh - 14rem);
  overflow-y: auto;
}
.fd-subpicker__col { display: grid; gap: var(--space-xs); align-content: start; }
.fd-subpicker__coltitle {
  font-family: var(--font-mono); font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide); text-transform: uppercase;
  opacity: var(--opacity-muted);
}
.fd-subpicker__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-panel);
  border: var(--border-width-micro) solid var(--color-ink);
  cursor: pointer;
}
.fd-subpicker__row.is-sel {
  outline: var(--border-width) solid var(--color-accent-blue);
  outline-offset: 2px;
}
.fd-subpicker__row.is-disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
.fd-subpicker__who { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-display); text-transform: uppercase; }
.fd-subpicker__meta { display: flex; align-items: center; gap: var(--space-sm); }
.fd-subpicker__ovr { font-family: var(--font-display); }

.fd-duel.is-settled { align-items: center; }
.fd-duel__stamp { align-self: center; grid-column: 1 / -1; }

/* Too narrow for the twin wheels side by side (≤360px phones) → stack attacker / VS / keeper. */
@media (max-width: 480px) {
  .fd-duel { grid-template-columns: minmax(0, 1fr); }
  .fd-duel__stamp { grid-column: auto; }
}

@media (max-width: 768px) {
  .fd-subpicker__cols { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MatchPausePanel — the in-match reorganization surface: opponent header, the
   lineup pitch (same render as pre-kickoff), and the bench. Reuses .fd-squad__slot
   for placement + PitchSlot for the cards.
   ========================================================================== */
.fd-pause { display: flex; flex-direction: column; gap: var(--space-md); }
/* Team bar — opponent header on the left, the YOUR-TEAM / OPPONENT toggle pushed to the right. */
.fd-pause__teambar { display: flex; align-items: center; gap: var(--space-sm); }
.fd-pause__teambar .fd-pause__opp { flex: 1 1 auto; min-width: 0; }
.fd-pause__teamhint { margin: 0; }
.fd-pause__opp {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width-micro) solid var(--color-ink);
}
.fd-pause__opp-meta { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.fd-pause__opp-name {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--tracking-display-tight);
}
.fd-pause__opp-lines { display: inline-flex; gap: var(--space-xs); flex-wrap: wrap; }
.fd-pause__opp.is-clickable { cursor: pointer; }
.fd-pause__opp.is-clickable:hover { background: var(--color-panel-alt); }
.fd-pause__opp-toggle { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-micro); }
/* Opponent squad reveal — their current XI/squad grouped by line, tapped open from the opp header. */
.fd-pause__opp-squad {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-width-micro) solid var(--color-ink);
  border-top: 0;
  max-height: 40vh;
  overflow-y: auto;
}
.fd-pause__opp-line { display: flex; flex-direction: column; gap: 2px; }
.fd-pause__opp-line-head {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
  opacity: var(--opacity-dim);
}
.fd-pause__opp-row {
  display: grid;
  grid-template-columns: 4.5ch 1fr auto;
  gap: var(--space-sm);
  align-items: baseline;
  font-size: var(--fs-body);
}
.fd-pause__opp-row-pos { font-family: var(--font-mono); font-size: var(--text-micro); opacity: var(--opacity-dim); }
.fd-pause__opp-row-name { font-family: var(--font-display); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-pause__opp-row-ovr { font-family: var(--font-mono); font-weight: 700; }
.fd-pause__prompt { margin: 0; }
/* Pause reorganize: pitch (left) + bench (right) side by side in the wide modal; stacks when narrow. */
.fd-pause__reorg {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: var(--space-lg);
  align-items: start;
}
.fd-pause__reorg-main { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }
@media (max-width: 720px) {
  .fd-pause__reorg { grid-template-columns: 1fr; }
}
/* LANDSCAPE pitch (GK left, attack right) — identical sizing model to the pre-kickoff SquadScreen pitch,
   which lays out every formation reliably. Width-driven 4:3 (bounded by the row height) so all 11 chips
   always sit inside the bordered box regardless of formation; the pause used to run portrait/height-driven
   and dropped wide + top-line players outside the frame. */
.fd-pause__pitch {
  position: relative;
  width: min(100%, calc(52vh * 4 / 3));
  aspect-ratio: 4 / 3;
  max-width: 100%;
  margin-inline: auto;
  background: var(--color-panel-alt);
  border: var(--border-width) solid var(--color-ink);
}
/* halfway line — vertical, now depth runs left→right */
.fd-pause__pitch::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: var(--border-width-micro) solid var(--color-ink);
  opacity: var(--opacity-soft);
}
/* Slots sized for the widened pause pitch — big enough to read name + ovr + energy. */
.fd-pause__pitch .fd-slot { width: 72px; height: 72px; }
.fd-pause__slotwrap { position: relative; display: inline-flex; }
.fd-pause__mark {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: var(--z-raised);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  padding: 2px 3px;
  border: var(--border-width-micro) solid var(--color-ink);
}
.fd-pause__mark--off { background: var(--color-accent-red-surface); color: var(--color-on-dark); }
/* INJ sits in the opposite (top-left) corner so it never collides with the GK/OFF mark on the same player. */
.fd-pause__mark--inj { background: var(--color-tier-failure); color: var(--ink-fixed); left: -6px; right: auto; }
.fd-pause__mark--gk  { background: var(--color-accent-yellow); color: var(--ink-fixed); }
.fd-pause__keeper { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.fd-pause__bench { display: flex; flex-direction: column; gap: var(--space-sm); min-width: 0; }
.fd-pause__bench-title {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-mono-wide);
  text-transform: uppercase;
}
/* On the side, the bench tiles into a compact auto-fill grid instead of one long wrapping row. */
.fd-pause__bench-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: var(--space-sm); }
.fd-pause__bench-row .fd-pause__slotwrap { justify-content: center; }

/* ==========================================================================
   Touch targets (T18) — coarse pointers get ≥44×44 hit areas by SPACING, never by
   scaling the neo-brutalist art (WCAG 2.5.8 / Responsive & Accessibility §Touch).
   Fine-pointer (mouse) layouts keep their compact sizing. BButton md+ (44px),
   PitchSlot (80px), PoolRow (48px) and round-tracker chips (46px) already comply.
   Non-interactive decorations (progress dots, rarity swatches) are exempt by design.
   ========================================================================== */
@media (pointer: coarse) {
  .fd-btn--sm        { min-height: 44px; }
  .fd-seg__opt       { min-height: 44px; }   /* incl. --sm (Theme/Language toggles) */
  .fd-toggle         { min-height: 44px; }
  .fd-vol__cell      { min-height: 44px; }   /* volume cells stay tappable on coarse pointers */
  .fd-kicker__row    { min-height: 44px; }
  .fd-subpicker__row { min-height: 44px; }
  .fd-header__gear   { width: 44px; height: 44px; min-width: 44px; }
  /* Slider: the whole track becomes a 44px-tall draggable target; the 22×36 thumb art is unchanged. */
  .fd-slider__track  { height: 44px; }
}

/* ==========================================================================
   Tutorial tour (first-run) — fixed card above screen chrome, below any modal
   scrim, plus the hard-outline highlight on the step's target CTA.
   ========================================================================== */
.fd-tour-card {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: calc(var(--z-modal) - 1);           /* 39: above chrome, under modals(40) */
  max-width: 520px; min-width: 0;
  width: calc(100vw - 32px); width: calc(100dvw - 32px);
  border: 4px solid var(--color-ink); background: var(--color-bg); color: var(--color-ink);
  box-shadow: var(--shadow-hard); padding: 12px 16px;
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.fd-tour-card__text { margin: 0; }
.fd-tour-card__actions { display: flex; gap: var(--space-sm); align-items: center; justify-content: flex-end; }
.fd-tour-target { outline: 4px solid var(--color-accent-yellow); outline-offset: 4px; }