/* ============================================================================
   screens.css — T11 screen layouts (START · DRAFT · DRAW · HUB).
   Token-only: every value is a var() from tokens.css. No hardcoded hex / px
   colors. The neo-brutalist primitives live in components.css; this file only
   arranges them and adds the screen-specific composites (NationTile, review
   rows, group table, the HUB 3-column grid).
   ============================================================================ */

.fd-boot {
    padding: var(--space-xl);
    font-family: var(--font-mono);
    color: var(--color-ink);
}

/* Common screen scaffold: a vertical stack with generous gaps. */
.fd-start,
.fd-draft-screen,
.fd-draw,
.fd-hub {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

/* Final-decisions screens break out of the .app-main gutters (negative margins mirror MainLayout's
   padding steps) so the 60px top bar runs edge to edge. Inner sections carry their own padding. */
.fd-fullbleed {
    margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-lg));
    min-height: calc(100vh - 0px);
    gap: 0;
}
@media (max-width: 1023px) {
    .fd-fullbleed { margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-md)); }
}
@media (max-width: 767px) {
    .fd-fullbleed { margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-sm)); }
}

/* Top-of-screen action row — the primary advance/return live here so they are reachable
   on load without scrolling to a screen footer (not sticky; just repositioned). Return sits
   left, the primary advance pushes to the right via the spacer. */
.fd-screen-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}
.fd-screen-actions__spacer { margin-left: auto; }

/* Desktop fit for the roguelike draft: keep the step (pick layout or final review) inside one viewport
   at 16:9 1080p — the offer/main panel + the squad-so-far aside scroll internally instead of the page.
   ≤1024px / short viewports keep natural page scrolling. Mirrors START / SQUAD. */
/* Only fit-to-viewport on genuinely tall screens (≥960px). Below that, the page scrolls naturally so
   the tall pack-reveal step never hides its CONTINUE/lock button. overflow-y:auto is a backstop so even
   in fit mode an over-tall step scrolls inside the screen instead of clipping. */
@media (min-width: 1025px) and (min-height: 960px) {
    .fd-draft-screen {
        height: calc(100svh - 2 * var(--space-xl));
        min-height: 0;
        overflow-y: auto;
    }
    .fd-draft-screen > .fd-header,
    .fd-draft-screen > .fd-screen-actions { flex: 0 0 auto; }
    /* The tall regions take the remaining height and scroll their own content. */
    .fd-draft-screen__layout,
    .fd-draft-screen > .fd-review { flex: 1 1 auto; min-height: 0; }
    /* Direct-child panels (pack-select, pack-reveal) also fill + scroll internally rather than the page. */
    .fd-draft-screen > .fd-panel { flex: 1 1 auto; min-height: 0; }
    .fd-draft-screen > .fd-panel > .fd-panel__body { min-height: 0; overflow-y: auto; }
    .fd-draft-screen__main { min-height: 0; }
    .fd-draft-screen__main > .fd-panel { min-height: 0; }
    .fd-draft-screen__main > .fd-panel > .fd-panel__body { min-height: 0; overflow-y: auto; }
    .fd-draft-screen__aside { max-height: 100%; overflow-y: auto; }
    .fd-draft-screen > .fd-review { overflow-y: auto; }
}

/* ----------------------------------------------------------------------------
   NationTile — shared nation card (START grid · DRAW reveal · HUB fixture).
   ---------------------------------------------------------------------------- */
.fd-nationtile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard-sm);
    transition: transform var(--motion-snap), box-shadow var(--motion-snap), background var(--motion-snap);
}

.fd-nationtile.is-clickable { cursor: pointer; }

.fd-nationtile.is-clickable:hover,
.fd-nationtile.is-clickable:focus-visible {
    transform: translate(var(--lift-offset), var(--lift-offset));
    box-shadow: var(--shadow-hard);
}

.fd-nationtile.is-selected {
    background: var(--color-select);
    color: var(--ink-fixed);
}

.fd-nationtile.is-you {
    background: var(--color-select);
    color: var(--ink-fixed);
}

.fd-nationtile.is-locked {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
}

.fd-nationtile__name {
    font-family: var(--font-display);
    font-size: var(--text-ui);
    text-align: center;
    text-transform: uppercase;
}

.fd-nationtile__ovr {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-mono-wide);
}

.fd-nationtile__you {
    position: absolute;
    top: calc(-1 * var(--space-sm));
    right: calc(-1 * var(--space-sm));
}

/* Team-Tiers bracket accent — a small corner marker on the tile's top-left, colored by bracket. */
.fd-nationtile__bracket {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    width: 12px;
    height: 12px;
    border: 2px solid var(--color-ink);
    background: var(--bracket-color, var(--color-accent-blue));
}
.fd-nationtile__bracket--underdog   { --bracket-color: var(--color-bracket-underdog); }
.fd-nationtile__bracket--regular    { --bracket-color: var(--color-bracket-regular); }
.fd-nationtile__bracket--contestant { --bracket-color: var(--color-bracket-contestant); }

/* INFO modal — campaign table (CAMPAIGN · THE PATH · BONUS DRAFT · STATUS), one row per level.
   The frontier row gets the soft highlight wash; locked rows read inert. */
.fd-start__info-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
}
.fd-start__info-blurb {
    flex: 1 1 100%;
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-micro);
    line-height: 1.6;
    color: var(--text-secondary);
}
.fd-start__campaigntable {
    border: var(--border-width-nested) solid var(--color-ink);
}
.fd-start__ct-head,
.fd-start__ct-row {
    display: grid;
    grid-template-columns: 96px 1fr 1fr 86px;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm) var(--space-md);
}
.fd-start__ct-head > * { min-width: 0; }
.fd-start__ct-row  > * { min-width: 0; }
.fd-start__ct-head {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    color: var(--text-secondary);
    text-transform: uppercase;
}
.fd-start__ct-row { border-top: var(--border-width-micro) solid var(--color-ink); }
.fd-start__ct-row.is-frontier { background: var(--color-highlight-soft); }
.fd-start__ct-row.is-locked   { opacity: var(--opacity-disabled); }
.fd-start__ct-lvl { display: flex; flex-direction: column; gap: 2px; }
.fd-start__ct-num {
    font-family: var(--font-display);
    font-size: 14px;
}
.fd-start__ct-name {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 8.5px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
}
.fd-start__ct-cell {
    font-family: var(--font-body);
    font-size: 10.5px;
    line-height: 1.5;
}
.fd-start__ct-status {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 8.5px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
}
.fd-start__promote {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: var(--tracking-mono-wide);
    color: var(--text-tertiary);
    text-transform: uppercase;
}

.fd-nationtile__lock {
    text-align: center;
}

.fd-nationtile__info {
    margin-top: var(--space-xs);
    /* FD-010: a comfortable hit target (was a cramped micro chip). */
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    background: transparent;
    border: var(--border-width-micro) solid var(--color-ink);
    color: inherit;
    cursor: pointer;
}

.fd-nationtile__info:hover { background: var(--color-panel-alt); }

/* ----------------------------------------------------------------------------
   SquadReview — XI + bench rows with rarity swatch, era, overall.
   ---------------------------------------------------------------------------- */
.fd-review {
    /* auto-fit so it follows the CONTAINER (e.g. the ≤560px view-squad modal), collapsing to one
       column when there isn't room — instead of forcing two cramped columns that scroll sideways. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
}
.fd-review > * { min-width: 0; }

.fd-review__list {
    display: flex;
    flex-direction: column;
}

.fd-review__row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    border-bottom: var(--border-width-micro) solid var(--color-panel-alt);
}

.fd-review__rarity {
    flex: 0 0 auto;
    width: 10px;
    height: 26px;
    border: var(--border-width-micro) solid var(--color-ink);
}

.fd-review__rarity--legendary { background: var(--color-rarity-legendary); }
.fd-review__rarity--rare      { background: var(--color-rarity-rare); }
.fd-review__rarity--normal    { background: var(--color-rarity-normal); }

.fd-review__num {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    width: 2ch;
    text-align: right;
    opacity: var(--opacity-muted);
}

.fd-review__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-body);
    font-size: var(--text-ui);
}

.fd-review__ovr {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-ui);
}

/* ----------------------------------------------------------------------------
   MODE SELECT — the opening menu: stacked wordmark over two tournament POSTERS
   (WORLDWIDE 26 / FOOTDICE — BRASIL). Each poster leads with its own procedural
   SVG crest (pip-globe vs losango die) so the two modes read apart at a glance;
   entrance is single-shot (stamp + staggered pops — reduced-motion collapses).
   Art fills use --ink-fixed/--color-cream (never theme-flip) + accents.
   ---------------------------------------------------------------------------- */
.fd-modeselect {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
    min-height: 82vh;
    padding-block: var(--space-lg);
}

.fd-modeselect__hero { text-align: center; }

.fd-modeselect__wordmark {
    font-family: var(--font-title);
    font-size: var(--text-title);
    letter-spacing: var(--tracking-display-tight);
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.95;
}

.fd-modeselect__sub {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-ui);
    letter-spacing: 0.18em;
    margin-top: var(--space-sm);
}

.fd-modeselect__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(320px, 440px));
    gap: var(--space-xl);
}
@media (max-width: 899px) {
    .fd-modeselect__cards { grid-template-columns: minmax(300px, 440px); }
}

/* A poster, not a SaaS card: art on top bleeding to the frame, ink frame + hard shadow,
   the whole thing lifts and the art zooms on hover — the same snap grammar as the board. */
.fd-modeselect__card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    text-align: left;
    font: inherit;
    color: var(--color-fg);
    background: var(--color-bg);
    border: var(--border);
    box-shadow: var(--shadow-hard);
    cursor: pointer;
    overflow: hidden;
    transition: transform var(--motion-snap), box-shadow var(--motion-snap);
}
.fd-modeselect__card:hover,
.fd-modeselect__card:focus-visible {
    transform: translate(-3px, -3px);
    box-shadow: 9px 9px 0 var(--color-ink);
    outline: none;
}

/* ---- The crest art (procedural SVG; fixed-ink palette so it never theme-flips) -------------- */
.fd-modeselect__art {
    display: block;
    height: 168px;
    border-bottom: var(--border);
}
.fd-modeselect__art svg {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform var(--motion-snap);
}
.fd-modeselect__card:hover .fd-modeselect__art svg,
.fd-modeselect__card:focus-visible .fd-modeselect__art svg {
    transform: scale(1.05) rotate(-1.2deg);
}

.fd-ms-bg-world { fill: var(--ink-fixed); }
.fd-ms-globe { fill: var(--color-accent-blue); stroke: var(--color-cream); stroke-width: 3; }
.fd-ms-grid { stroke: var(--color-cream); stroke-width: 2.5; fill: none; }
.fd-ms-pip-yellow { fill: var(--color-accent-yellow); }
.fd-ms-die { fill: var(--color-cream); }
.fd-ms-pip-ink { fill: var(--ink-fixed); }

.fd-ms-bg-brasil { fill: var(--color-felt); }
.fd-ms-terrace { stroke: var(--color-cream); stroke-width: 3; opacity: 0.25; }
.fd-ms-losango { fill: var(--color-accent-yellow); stroke: var(--ink-fixed); stroke-width: 4; }
.fd-ms-orb { fill: var(--color-accent-blue); stroke: var(--ink-fixed); stroke-width: 4; }
.fd-ms-pip-cream { fill: var(--color-cream); }

/* Mode-colored keel under the art — the two posters differ even in peripheral vision. */
.fd-modeselect__card--world .fd-modeselect__body { box-shadow: inset 0 6px 0 var(--color-accent-blue); }
.fd-modeselect__card--brasil .fd-modeselect__body { box-shadow: inset 0 6px 0 var(--color-accent-yellow); }

.fd-modeselect__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: calc(var(--space-md) + 6px) var(--space-lg) var(--space-sm);
    background: var(--color-bg);
    color: var(--color-fg);
}

.fd-modeselect__kicker {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: 0.16em;
}

.fd-modeselect__title {
    font-family: var(--font-display);
    font-size: var(--text-section);
    line-height: 1.04;
}

.fd-modeselect__desc {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: 0.08em;
    color: var(--color-fg);
    opacity: 0.75;
}

.fd-modeselect__status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    min-height: 76px;
    padding: 0 var(--space-lg) var(--space-md);
    background: var(--color-bg);
    color: var(--color-fg);
}

.fd-modeselect__slotline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
}

.fd-modeselect__cta,
.fd-modeselect__new {
    font-family: var(--font-display);
    font-size: var(--text-ui);
    letter-spacing: 0.06em;
}
.fd-modeselect__cta { color: var(--color-accent-blue); }

/* ---- FOOTDICE — BRASIL safra chips: the drawn era badge on draw rows/tiles, group tables and the
   bracket tie modal. Mono micro-chips; absent entirely outside the BRASIL mode. ------------------- */
.fd-draw__row-era {
    font: inherit;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: 0.06em;
    padding: 0 4px;
    border: 2px solid var(--color-ink);
    background: var(--color-bg);
    color: var(--color-ink);
    cursor: pointer;
    white-space: nowrap;
}
.fd-draw__row-era:hover,
.fd-draw__row-era:focus-visible {
    background: var(--color-accent-yellow);
    outline: none;
}

.fd-draw__tile-era,
.fd-grouptable__era {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    opacity: 0.7;
    white-space: nowrap;
    margin-inline-start: 4px;
}

/* One non-wrapping line inside the fixed-width nation cell: the name truncates with an ellipsis,
   the safra mark keeps its width and never wraps underneath (mirrors the FD-014 fixed layout). */
.fd-grouptable__nationline {
    display: flex;
    align-items: baseline;
    gap: 2px;
    min-width: 0;
}
.fd-grouptable__nationline > .fd-grouptable__nationbtn,
.fd-grouptable__nationline > .fd-grouptable__nationtext {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fd-grouptable__nationline > .fd-grouptable__era { flex: 0 0 auto; }

.fd-bracket__eraline {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    margin: var(--space-xs) 0 0;
}

/* ----------------------------------------------------------------------------
   START
   ---------------------------------------------------------------------------- */
.fd-start__hero {
    text-align: center;
    padding-block: var(--space-lg);
}

.fd-start__wordmark {
    font-family: var(--font-title);
    font-size: var(--text-title);
    letter-spacing: var(--tracking-display-tight);
    margin: 0;
}
/* Continue-gate hero: the brand's primary stacked lockup — FOOT over the DICE block. */
.fd-start__wordmark--stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.95;
}
.fd-start__wordmark--stack .fd-logo-block { margin-right: 0; }

.fd-start__sub {
    font-family: var(--font-display);   /* the edition wordmark */
    font-size: var(--text-section);
    margin: var(--space-xs) 0 0;
}

/* ---- Design 2A "The Board, Reclassed": full-bleed topbar / rail+board / ink dock. The screen
   breaks out of the .app-main gutters (negative margins mirror MainLayout's padding steps) so the
   topbar border and the dock run edge to edge. --------------------------------------------------- */
.fd-start--board {
    gap: 0;
    margin: calc(-1 * var(--space-xl)) calc(-1 * var(--space-lg));
}
@media (max-width: 1023px) {
    .fd-start--board { margin: calc(-1 * var(--space-lg)) calc(-1 * var(--space-md)); }
}
@media (max-width: 767px) {
    .fd-start--board { margin: calc(-1 * var(--space-md)) calc(-1 * var(--space-sm)); }
}

/* Topbar: wordmark + kicker left · rules + meta buttons right. */
.fd-start__topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    min-height: 72px;
    padding: var(--space-sm) 28px;
    border-bottom: var(--border);
    background: var(--color-bg);
}
.fd-start__wordmark--bar { font-size: 36px; line-height: 1; }
.fd-start__topkick {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono-max);
    color: var(--text-secondary);
    text-transform: uppercase;
}
.fd-start__topbar-spacer { flex: 1 1 auto; }
/* Topbar buttons restyle the shared BButton to the 2A micro chrome (smaller type + shadow). */
.fd-start__topbar .fd-btn {
    box-shadow: var(--shadow-hard-xs);
    min-height: 36px;
}
.fd-start__metabtns { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.fd-start__metabtns .fd-btn {
    border-width: var(--border-width-micro);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.1em;
}

/* Rare-state notices (corrupt save / resume error) sit between topbar and main. */
.fd-start__notices { padding: var(--space-md) 28px 0; }

/* Main: fixed 430px setup rail + fluid board. */
.fd-start__main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-md) 28px var(--space-lg);
}
.fd-start__main > * { min-width: 0; }
.fd-start__rail {
    flex: 0 0 430px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-height: 0;
}

/* Rail/board panels share the Panel chrome with an ink header bar + yellow step numeral. */
.fd-start__panelhead {
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-md);
    font-size: 14px;
}
.fd-start__step { color: var(--color-on-ink-accent); }
.fd-start__panelkick {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    opacity: var(--opacity-soft);
    white-space: nowrap;
}

/* 01 YOUR NATION — empty prompt / selected summary + campaign chooser. */
.fd-start__nationbody { display: flex; flex-direction: column; gap: var(--space-md); }
.fd-start__empty {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
    text-align: center;
    padding: 26px var(--space-md);
    border: var(--border-width-nested) dashed color-mix(in srgb, var(--color-ink) 35%, transparent);
}
.fd-start__empty-prompt {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: var(--tracking-mono-max);
    color: var(--text-secondary);
}
.fd-start__empty-hint {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--text-tertiary);
}
.fd-start__selnation { display: flex; align-items: center; gap: var(--space-md); }
.fd-start__selmeta { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.fd-start__selname {
    font-family: var(--font-display);
    font-size: 19px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fd-start__selline { display: flex; align-items: center; gap: var(--space-sm); }
.fd-start__selovr {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: var(--tracking-mono-wide);
}
.fd-start__flagbox {
    flex: 0 0 auto;
    display: inline-flex;
    line-height: 0;
    border: var(--border-width-micro) solid var(--color-ink);
}
.fd-start__campaign {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    border-top: var(--border-width-micro) solid var(--color-ink);
    padding-top: var(--space-sm);
}
/* One-shot draw-the-eye highlight when a nation is picked: the block is @key'd on the nation id so it
   remounts and replays anim-slam-in, and the gold left rule keeps the campaign chooser marked after. */
.fd-start__campaign--pick {
    border-left: var(--border-width) solid var(--color-accent-yellow);
    padding-left: var(--space-sm);
}
.fd-start__campaignhead { display: flex; align-items: baseline; justify-content: space-between; }
/* Campaign progress as three graphical segments: filled up to the frontier, hollow (locked) after.
   Filled goes gold on nations you've advanced past DEBUT (.is-progressed); on a selected row the
   fills flip to --ink-fixed so they read on the yellow selection surface (mirrors the form bar). */
.fd-start__pips { display: inline-flex; gap: 3px; align-items: center; }
.fd-start__pip {
    width: 9px;
    height: 9px;
    border: var(--border-width-micro) solid var(--color-ink);
}
.fd-start__pip.is-filled { background: var(--color-ink); }
.fd-start__pip.is-locked { background: transparent; }
.fd-start__col-campaign.is-progressed .fd-start__pip.is-filled {
    background: var(--color-accent-yellow);
    border-color: var(--color-accent-yellow);
}
.fd-start__row.is-selected .fd-start__pip { border-color: var(--ink-fixed); }
.fd-start__row.is-selected .fd-start__pip.is-filled { background: var(--ink-fixed); }
.fd-start__campaign-btns { display: flex; gap: var(--space-sm); }
.fd-start__campaign-btns > * { min-width: 0; }
.fd-start__campaign-btn {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 0;
    border: var(--border-width-nested) solid var(--color-ink);
    background: var(--color-panel);
    color: var(--color-ink);
    cursor: pointer;
    transition: background var(--motion-snap), color var(--motion-snap);
}
.fd-start__campaign-num {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-max);
    opacity: var(--opacity-soft);
}
.fd-start__campaign-name {
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
}
.fd-start__campaign-btn.is-active {
    background: var(--color-ink);
    color: var(--color-on-ink-accent);
}
.fd-start__campaign-btn:disabled {
    opacity: var(--opacity-dim);
    cursor: not-allowed;
}
.fd-start__hint {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.fd-start__tablelink {
    align-self: flex-start;
    padding: 2px 0;
    border: 0;
    background: transparent;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: var(--tracking-mono-wide);
    color: var(--color-accent-blue-text);
    text-decoration: underline;
    text-transform: uppercase;
    cursor: pointer;
}
.fd-start__tablelink:hover { color: var(--color-accent-red-text); }

/* THE BOARD — controls, bracket filter chips, column header, scrolling nation rows. */
.fd-start__board {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.fd-start__boardctl {
    flex: 0 0 auto;
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-md) 0;
}
.fd-start__search { position: relative; flex: 1 1 auto; min-width: 0; }
.fd-start__search .fd-input { padding-left: 34px; }
.fd-start__searchic {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    color: var(--text-tertiary);
    pointer-events: none;
}
.fd-start__filterrow {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
}
.fd-start__filterkick {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    color: var(--text-secondary);
    text-transform: uppercase;
}
.fd-start__filter {
    padding: 5px 9px;
    border: var(--border-width-micro) solid var(--color-ink);
    background: var(--color-panel);
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--motion-snap), color var(--motion-snap);
}
.fd-start__filter.is-active {
    background: var(--color-ink);
    color: var(--color-bg);
}
.fd-start__legend {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
    text-transform: uppercase;
}
.fd-start__list {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0 var(--space-md) var(--space-md);
    border: var(--border-width-nested) solid var(--color-ink);
    overflow: hidden;
}
.fd-start__listhead,
.fd-start__row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 7px 12px;
}
.fd-start__listhead {
    flex: 0 0 auto;
    background: var(--color-panel-alt);
    border-bottom: var(--border-width-nested) solid var(--color-ink);
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    color: var(--text-secondary);
    text-transform: uppercase;
    padding-block: var(--space-sm);
}
.fd-start__listbody {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.fd-start__listempty { padding: var(--space-md); }
.fd-start__row {
    min-height: 40px;
    border-bottom: var(--border-width-micro) solid var(--color-ink);
    background: var(--color-panel);
    cursor: pointer;
    transition: background var(--motion-snap), color var(--motion-snap);
}
.fd-start__row:not(.is-selected):hover,
.fd-start__row:not(.is-selected):focus-visible { background: var(--color-panel-alt); }
.fd-start__row:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-offset)); }
.fd-start__row.is-selected {
    background: var(--color-select);
    color: var(--ink-fixed);
}
.fd-start__col-idx {
    flex: 0 0 26px;
    font-family: var(--font-mono);
    font-size: 9px;
    opacity: var(--opacity-muted);
}
.fd-start__col-flag { flex: 0 0 38px; display: flex; }
.fd-start__col-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fd-start__col-bracket { flex: 0 0 118px; }
.fd-start__col-campaign {
    flex: 0 0 128px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.fd-start__lvlname {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.fd-start__col-form { flex: 0 0 96px; }
.fd-start__formtrack {
    display: block;
    width: 100%;
    height: 10px;
    border: var(--border-width-micro) solid var(--color-ink);
    background: var(--color-bg);
    overflow: hidden;
}
.fd-start__formfill {
    display: block;
    height: 100%;
    background: var(--text-tertiary);
}
.fd-start__formfill.is-hot { background: var(--color-accent-blue); }
.fd-start__row.is-selected .fd-start__formfill { background: var(--ink-fixed); }
.fd-start__col-ovr {
    flex: 0 0 34px;
    text-align: right;
    font-family: var(--font-mono);
    font-weight: 800;
    font-size: 14px;
}
.fd-start__col-info { flex: 0 0 28px; display: flex; justify-content: flex-end; }
.fd-start__infobtn {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-micro) solid var(--color-ink);
    background: var(--color-panel);
    color: var(--color-ink);
    cursor: pointer;
    transition: background var(--motion-snap), color var(--motion-snap);
}
.fd-start__infobtn:hover,
.fd-start__infobtn:focus-visible {
    background: var(--color-ink);
    color: var(--color-bg);
}
.fd-start__infobtn .fd-ic { width: 13px; height: 13px; }

/* Bracket chips — GIANT / DARK HORSE / MINNOW (shared by board, rail, INFO). */
.fd-start__chip {
    display: inline-block;
    padding: 2px 5px;
    border: var(--border-width-micro) solid var(--color-ink);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fd-start__chip--giant     { background: var(--color-bracket-giant);     color: var(--on-bracket-giant); }
.fd-start__chip--darkhorse { background: var(--color-bracket-darkhorse); color: var(--on-bracket-darkhorse); }
.fd-start__chip--minnow    { background: var(--color-bracket-minnow);    color: var(--on-bracket-minnow); }

/* Bottom dock — fixed-dark (never flips): selection summary · FD-010 checklist · gated CTA. */
.fd-start__dock {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    min-height: 116px;
    padding: var(--space-md) 28px;
    background: var(--ink-fixed);
    color: var(--paper-fixed);
}
.fd-start__dock-sel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}
/* IP-compliance affiliation disclaimer (Start footer + Settings sheet). */
.fd-start__disclaimer {
    max-width: none;
    margin: var(--space-md) 0 0;
    padding: 0 28px var(--space-md);
    text-align: center;
    text-transform: none;
}
.fd-sheet__disclaimer {
    margin: 0 0 var(--space-sm);
    text-align: center;
    text-transform: none;
    opacity: 0.75;
}

/* The brand block runs edge to edge like the topbar/dock — cancel the .app-main gutters (mirrors the
   .fd-start--board breakout steps) so the full-width banner reaches the page edges and bottom. */
.fd-start__brandwrap {
    margin: 0 calc(-1 * var(--space-lg)) calc(-1 * var(--space-xl));
}
@media (max-width: 1023px) {
    .fd-start__brandwrap { margin: 0 calc(-1 * var(--space-md)) calc(-1 * var(--space-lg)); }
}
@media (max-width: 767px) {
    .fd-start__brandwrap { margin: 0 calc(-1 * var(--space-sm)) calc(-1 * var(--space-md)); }
}

/* Scroll cue — a subtle chevron at the bottom edge while the brand banner is below the fold. Fixed +
   pointer-events:none so it never blocks the dock; fades out (is-hidden, set by fdScrollHint) the
   moment the banner enters view. The bob is a sanctioned subtle loop (owner request, 2026-07-20); it
   collapses to a static chevron under the reduced-motion block, and the chevron shape — not the
   motion — carries the "more below" meaning. */
.fd-scrollhint {
    position: fixed;
    left: 50%;
    bottom: var(--space-sm);
    transform: translateX(-50%);
    z-index: var(--z-chrome);
    pointer-events: none;
    /* Reads over the dark ink dock that owns the first-viewport bottom; the shadow keeps it legible
       for the brief moment it passes over paper while scrolling toward the banner. */
    color: var(--paper-fixed);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
    opacity: 0.7;
    transition: opacity 200ms linear;
    animation: scrollHintBob 1.5s ease-in-out infinite;
}
.fd-scrollhint.is-hidden { opacity: 0; }
.fd-scrollhint__chev {
    display: block;
    width: 12px;
    height: 12px;
    border-right: 3px solid currentColor;
    border-bottom: 3px solid currentColor;
    transform: rotate(45deg);
}
.fd-start__dock .fd-start__flagbox--dock { border-color: var(--paper-fixed); }
.fd-start__dock-meta { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.fd-start__dock-name {
    font-family: var(--font-display);
    font-size: 19px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fd-start__dock-line {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    opacity: var(--opacity-soft);
}
.fd-start__dock-nosel {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    opacity: var(--opacity-muted);
}
/* FD-010 checklist chips: always visible; done turns green, missing stays red — on the fixed-dark
   dock the brighter red keeps AA (the -text red is tuned for bone). */
.fd-start__checklist { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.fd-start__checklist .fd-check {
    border: var(--border-width-micro) solid currentColor;
    padding: 5px 9px;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 0.12em;
    white-space: nowrap;
}
.fd-start__dock .fd-check--ok      { color: var(--color-success); }
.fd-start__dock .fd-check--missing { color: var(--color-accent-red); }
/* Armed CTA: selection gold + fixed ink (START-button legibility rule). Gated: transparent with a
   dashed pale border — the checklist beside it says what's missing. */
.fd-start__dock .fd-btn {
    min-width: 380px;
    min-height: 64px;
    font-size: 18px;
}
.fd-start__dock .fd-btn:disabled {
    background: transparent;
    background-image: none;
    color: var(--paper-fixed);
    opacity: var(--opacity-dim);
    border: var(--border-width-nested) dashed var(--paper-fixed);
    box-shadow: none;
}

/* Coach-archetype carousel (mirrors the SQUAD tactic picker): ‹ card › — one archetype at a time,
   plus five quick-jump tabs below (design 2A: jump AND select, fixing 1-of-5 visibility). */
.fd-start__archhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.fd-start__archcount {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
}
.fd-start__carousel { display: flex; align-items: stretch; gap: var(--space-sm); }
.fd-start__carousel .fd-btn { min-width: 44px; }
.fd-start__carousel .fd-tactic {
    flex: 1 1 auto; min-width: 0; min-height: 78px; text-align: center;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    border-left-width: var(--border-width); /* no discipline-risk stripe — coach carries no risk accent */
}
.fd-start__coachbuff { font-family: var(--font-mono); font-size: var(--text-micro); text-transform: uppercase; }
/* The "not picked yet" prompt inside the archetype card — the card is a real checklist gate. */
.fd-start__coachtap { color: var(--color-accent-blue-text); }
.fd-start__carousel .fd-tactic:not(.is-selected) { cursor: pointer; border-style: dashed; }
.fd-start__archtabs { display: flex; gap: 6px; margin-top: var(--space-sm); }
.fd-start__archtabs > * { min-width: 0; }
.fd-start__archtab {
    flex: 1 1 0;
    padding: 8px 0;
    border: var(--border-width-micro) solid var(--color-ink);
    background: var(--color-panel);
    color: var(--color-ink);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--motion-snap), color var(--motion-snap);
}
.fd-start__archtab.is-active {
    background: var(--color-ink);
    color: var(--color-on-ink-accent);
}

.fd-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.fd-field:last-child { margin-bottom: 0; }

.fd-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-ui);
    color: var(--color-ink);
    background: var(--color-panel);
    border: var(--border-width-nested) solid var(--color-ink);
    box-shadow: var(--shadow-inset-input);
}

.fd-input:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.fd-start__credits {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    font-family: var(--font-body);
    font-size: var(--text-ui);
}
.fd-start__credit-block { display: flex; flex-direction: column; gap: 2px; }
.fd-start__credit-block p { margin: 0; }
.fd-start__credit-name { font-family: var(--font-display); }
.fd-start__credit-link { color: var(--color-accent-blue-text); }
.fd-start__credit-tm {
    margin: var(--space-md) 0 var(--space-sm);
    text-align: center;
    text-transform: none;
}

/* Desktop fit (T-menu): the whole fresh-start screen is one viewport — topbar and dock pinned by the
   flex column, the board's nation list scrolling internally. ≤1024px / short viewports stack the rail
   above the board and keep natural page scrolling (the dock flows in-line). */
@media (min-width: 1025px) and (min-height: 640px) {
    .fd-start--board {
        height: 100svh;
        min-height: 0;
    }
    /* Room for the rail panels' hard shadows inside the fixed row. */
    .fd-start--board .fd-start__rail {
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: var(--shadow-offset);
        padding-bottom: var(--shadow-offset);
    }
}
@media (max-width: 1024px) {
    .fd-start__main { flex-direction: column; }
    .fd-start__rail { flex: 0 0 auto; }
    .fd-start__listbody { max-height: 60svh; }
    .fd-start__dock .fd-btn { min-width: 0; width: 100%; }
}
/* Phone: the 8-column nation board can't read at 360px — drop the secondary
   columns (index, form bar, campaign level) and keep flag · name · tier · OVR ·
   info. Tighten row gap and dock so nothing clips. */
@media (max-width: 768px) {
    .fd-start__listhead,
    .fd-start__row { gap: var(--space-sm); padding-inline: var(--space-sm); }
    .fd-start__col-idx,
    .fd-start__col-form,
    .fd-start__col-campaign { display: none; }
    .fd-start__col-bracket { flex-basis: auto; }
    .fd-start__dock {
        min-height: 0;
        padding: var(--space-md);
        gap: var(--space-sm) var(--space-md);
    }
}

/* Continue-run gate + abandon + corrupt export */
.fd-start__resume {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.fd-start__resume-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.fd-start__resume-nation {
    font-family: var(--font-display);
    font-size: var(--text-section);
}

.fd-start__resume-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.fd-start__abandon-warn {
    font-family: var(--font-display);
    font-size: var(--text-section);
}

.fd-start__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 60vh;
    overflow-y: auto;
}

.fd-start__export {
    max-height: 30vh;
    overflow: auto;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    background: var(--color-panel-alt);
    border: var(--border-width-micro) solid var(--color-ink);
    padding: var(--space-sm);
}

/* ----------------------------------------------------------------------------
   DRAFT
   ---------------------------------------------------------------------------- */
.fd-draft-screen__modes {
    justify-content: space-between;
}

.fd-draft-screen__formation {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding-block: var(--space-lg);
}

.fd-draft-screen__formation-name {
    font-family: var(--font-display);
    font-size: var(--text-result);
    letter-spacing: var(--tracking-display-tight);
}

/* FD-011: the three-card offer keeps equal-height cards (no ragged tops). */
.fd-draft-screen__offer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: var(--space-md);
    padding-block: var(--space-md);
}
.fd-draft-screen__offer .fd-draft { align-self: stretch; }

/* FD-011: pack cards lay out on a clean auto-fill grid (no centered ragged wrap), and every card
   is the same height regardless of name length or chip count. */
.fd-draft-screen__pack {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-sm);
    padding-block: var(--space-md);
    align-items: stretch;
}
.fd-draft-screen__pack .fd-draft { width: auto; height: 100%; }

/* Pre-draft pack selection — one option block per available starter pack. */
.fd-draft-screen__packs { display: flex; flex-direction: column; gap: var(--space-lg); }
.fd-draft-screen__packopt {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    border: var(--border-width-micro) solid var(--color-ink);
    background: var(--color-panel);
    padding: var(--space-md);
}
.fd-draft-screen__packopt-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}
.fd-draft-screen__packopt-name {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display-tight);
}

.fd-draft-screen__dots {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
    margin-bottom: var(--space-md);
}

.fd-draft-screen__dot {
    width: 14px;
    height: 14px;
    border: var(--border-width-micro) solid var(--color-ink);
    background: var(--color-panel-alt);
}

.fd-draft-screen__dot.is-done { background: var(--color-ink); }
.fd-draft-screen__dot.is-current { background: var(--color-accent-blue); }

.fd-draft-screen__reroll {
    display: flex;
    justify-content: center;
}

/* Draft layout: step content + a live squad-so-far aside (stacks on narrow screens). */
.fd-draft-screen__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: var(--space-lg);
    align-items: start;
}

.fd-draft-screen__formations {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    padding-block: var(--space-md);
}

.fd-draft-screen__autofinish {
    display: flex;
    justify-content: center;
    margin-top: var(--space-md);
}

.fd-draft-screen__aside { position: sticky; top: var(--space-md); }

/* Squad-so-far: the live roster being assembled. */
.fd-squadsofar { display: grid; gap: 2px; }

.fd-squadsofar__shape {
    font-family: var(--font-display);
    font-size: var(--text-section);
    letter-spacing: var(--tracking-display-tight);
    margin-bottom: var(--space-xs);
}

.fd-squadsofar__row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border: var(--border-width-micro) solid transparent;
    font-size: var(--text-ui);
}

.fd-squadsofar__row.is-filled { background: var(--color-panel-alt); }
.fd-squadsofar__row.is-current { border-color: var(--color-accent-blue); background: var(--color-panel-alt); }
.fd-squadsofar__row.is-star .fd-squadsofar__name { font-family: var(--font-display); }

.fd-squadsofar__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fd-squadsofar__name--pending { opacity: var(--opacity-dim); }
.fd-squadsofar__ovr { font-family: var(--font-display); flex: none; }

.fd-squadsofar__pack {
    margin-top: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    text-transform: uppercase;
    opacity: 0.75;
}

.fd-draft-screen__tools {
    display: flex;
    justify-content: center;
    margin-top: var(--space-sm);
}

/* MY CURRENT PLAYERS — the star + slot picks + banked pack, grouped, inside the draft modal.
   Scoped to .fd-myplayers so it never collides with the shared PoolRow primitive (.fd-pool). */
.fd-myplayers { display: grid; gap: var(--space-md); max-height: 60vh; overflow-y: auto; }
.fd-myplayers__group { display: grid; gap: var(--space-xs); }
.fd-myplayers__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    text-transform: uppercase;
}
.fd-myplayers__row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-bottom: var(--border-width-micro) solid var(--color-panel-alt);
    font-size: var(--text-ui);
}
.fd-myplayers__row.is-star { background: var(--color-panel-alt); }
.fd-myplayers__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-myplayers__ovr { font-family: var(--font-display); flex: none; }

@media (max-width: 860px) {
    .fd-draft-screen__layout { grid-template-columns: 1fr; }
    .fd-draft-screen__aside { position: static; }
}

/* ----------------------------------------------------------------------------
   DRAFT — "Pitch Board" (final decisions): left rail (THE BOARD + the banked
   '26 core, always visible) · portrait pitch whose slots fill as you pick ·
   right tools rail. The formation choice is a scrim overlay over the board.
   ---------------------------------------------------------------------------- */
/* NOTE: the DraftCard component owns `.fd-draft__*` (components.css) — the screen's
   three-column shell must not reuse its names or it restyles every card's innards. */
.fd-draft__layout {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr) 230px;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg) var(--space-lg) var(--space-lg);
    align-items: start;
}
.fd-draft__rail { display: flex; flex-direction: column; gap: var(--space-md); min-width: 0; }

/* THE BOARD — ink-headed key/value card with a per-step context note. */
.fd-draft__board,
.fd-draft__core {
    background: var(--color-panel);
    border: var(--border-width-nested) solid var(--color-ink);
    box-shadow: var(--shadow-hard-xs);
    display: flex;
    flex-direction: column;
}
.fd-draft__board-head {
    background: var(--color-ink);
    color: var(--color-bg);
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    padding: 7px 12px;
}
.fd-draft__board-rows { display: flex; flex-direction: column; }
.fd-draft__board-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 7px 12px;
    border-bottom: 1px solid var(--color-panel-alt);
    font-family: var(--font-mono);
    font-size: 11px;
    text-transform: uppercase;
}
.fd-draft__board-label { color: var(--text-secondary); letter-spacing: 0.1em; }
.fd-draft__board-value { font-weight: 800; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.fd-draft__board-note {
    margin: 0;
    padding: var(--space-sm) 12px;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* '26 CORE — BANKED: yellow header + ten macro-chip rows + the promise footnote. */
.fd-draft__core-head {
    background: var(--color-accent-yellow);
    color: var(--ink-fixed);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
    padding: 7px 12px;
    border-bottom: var(--border-width-micro) solid var(--color-ink);
}
.fd-draft__core-count { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; font-weight: 800; }
.fd-draft__core-rows { display: flex; flex-direction: column; overflow-y: auto; }
.fd-draft__core-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 5px 10px;
    border-bottom: 1px solid var(--color-panel-alt);
}
.fd-draft__core-row:last-child { border-bottom: none; }
.fd-draft__core-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.fd-draft__core-ovr { font-family: var(--font-mono); font-size: 11px; font-weight: 800; }
.fd-draft__core-foot {
    margin: 0;
    padding: var(--space-sm) 10px;
    border-top: var(--border-width-micro) solid var(--color-panel-alt);
    font-family: var(--font-mono);
    font-size: 8px;
    letter-spacing: 0.1em;
    line-height: 1.6;
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* The center: the pitch board (portrait; slots absolutely placed by PitchLayout) + the offer. */
.fd-draft__center {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
    align-items: center;
}
.fd-draft__pitch {
    position: relative;
    width: min(470px, 100%);
    aspect-ratio: 47 / 52;
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard);
    overflow: hidden;
}
/* Furniture at 15% ink: halfway line + center circle (boxes read through the slot grammar). */
.fd-draft__pitch-line {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 2px;
    background: var(--color-ink);
    opacity: 0.15;
}
.fd-draft__pitch-circle {
    position: absolute;
    left: 50%; top: 50%;
    width: 90px; height: 90px;
    border: 2px solid var(--color-ink);
    opacity: 0.15;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.fd-draft__slot {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 64px;
    max-width: 92px;
    padding: 4px 6px;
    text-align: center;
    font-family: var(--font-display);
    text-transform: uppercase;
}
.fd-draft__slot-name {
    font-size: 9px;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fd-draft__slot-meta { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.06em; color: var(--text-secondary); }
.fd-draft__slot.is-filled {
    background: var(--color-panel);
    border: var(--border-width-micro) solid var(--color-ink);
    box-shadow: var(--shadow-hard-xs);
}
.fd-draft__slot.is-current {
    background: var(--color-accent-yellow);
    color: var(--ink-fixed);
    border: var(--border-width-nested) solid var(--color-ink);
    box-shadow: var(--shadow-hard-xs);
    animation: goPulse 900ms var(--ease-punch) 5; /* finite punctuation, never an idle loop */
}
.fd-draft__slot.is-ghost {
    background: var(--color-highlight-pale);
    border: var(--border-width-micro) dashed var(--color-ink);
    opacity: 0.9;
}
.fd-draft__slot.is-empty {
    border: var(--border-width-micro) dashed var(--text-tertiary);
    color: var(--text-tertiary);
}

.fd-draft__offerzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
}
.fd-draft__offer-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}
/* Cross-nation Team-Tiers bonus slot — the "worldwide pick" surprise reads louder than a normal slot. */
.fd-draft__offer-kicker--bonus {
    color: var(--ink-fixed, var(--text-primary));
    background: var(--color-accent-yellow, gold);
    font-weight: 700;
    padding: 3px 8px;
    border: var(--border-hard, 4px solid);
    box-shadow: var(--shadow-hard, 6px 6px 0 currentColor);
}
.fd-draft__offer-card { display: contents; } /* hover wrapper — no box of its own */
.fd-draft__hint { text-align: center; }

/* Formation choice: the shape panel takes the board column (no scrim — the rails, auto-finish
   included, stay reachable for the tutorial tour and keyboard users). */
.fd-draft__shape-panel {
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 900px;
    width: 100%;
}
.fd-draft__shape-head { display: flex; flex-direction: column; gap: var(--space-xs); }
.fd-draft__shape-title { font-family: var(--font-display); font-size: var(--text-section); text-transform: uppercase; }
.fd-draft__shape-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono-wide);
    color: var(--text-secondary);
    text-transform: uppercase;
}

/* Review: the gold lock strip above the squad review. */
.fd-draft__review {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg) var(--space-lg) var(--space-lg);
}
.fd-draft__review-strip {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard-sm);
    padding: var(--space-sm) var(--space-md);
}
.fd-draft__review-line { font-family: var(--font-display); font-size: 15px; text-transform: uppercase; }
.fd-draft__review-grow { flex: 1; }

.fd-draft__nodraft {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg) var(--space-lg) var(--space-lg);
}

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

/* ----------------------------------------------------------------------------
   DRAW — "The Big Board" (final decisions): your group anchored left (seeded
   rows + THE CUT rule line + toughness rank), the whole field as a 4×3 wall
   of compact group tiles with a DRAW ORDER ⇄ TOUGHNESS sort.
   ---------------------------------------------------------------------------- */
.fd-draw { display: flex; flex-direction: column; }

.fd-draw__body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-lg) 40px;
    align-items: flex-start;
}

.fd-draw__left {
    flex: none;
    width: 400px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}
.fd-draw__kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono-max);
    text-transform: uppercase;
    color: var(--text-secondary);
}
.fd-draw__title {
    font-family: var(--font-title);
    font-size: 34px;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}
.fd-draw__tough {
    align-self: flex-start;
    background: var(--color-accent-yellow);
    color: var(--ink-fixed);
    border: var(--border-width-micro) solid var(--color-ink);
    font-family: var(--font-display);
    font-size: 10px;
    text-transform: uppercase;
    padding: 3px 9px;
}

/* Your group card: four seeded rows, the CUT divider between 2/3, fate notes on rows 3/4. */
.fd-draw__you-card {
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard);
    display: flex;
    flex-direction: column;
}
.fd-draw__row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: var(--border-width-micro) solid var(--color-panel-alt);
    font-family: var(--font-body);
    font-size: var(--fs-mono);
}
.fd-draw__you-card > .fd-draw__row:last-of-type { border-bottom: none; }
.fd-draw__row.is-you { background: var(--color-select); color: var(--ink-fixed); font-weight: 800; }
.fd-draw__row-rank { font-family: var(--font-display); font-size: 12px; width: 2ch; }
.fd-draw__row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.fd-draw__row-note {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}
.fd-draw__row:last-of-type .fd-draw__row-note { color: var(--color-accent-red-text); }
.fd-draw__row-ovr { font-family: var(--font-display); font-size: 15px; }
.fd-draw__cut {
    background: var(--color-ink);
    color: var(--color-on-ink-accent);
    font-family: var(--font-display);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 5px var(--space-sm);
}
.fd-draw__footnote { text-align: center; }

/* The field wall: sort chips + a 4-across grid of compact tiles; your tile gets the gold ring. */
.fd-draw__wall {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.fd-draw__wall-head { display: flex; align-items: center; gap: var(--space-md); }
.fd-draw__wall-title {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    flex: 1;
}
.fd-draw__sort { display: inline-flex; }
.fd-draw__sort-chip {
    font-family: var(--font-display);
    font-size: 10px;
    text-transform: uppercase;
    padding: 6px 12px;
    background: var(--color-panel);
    color: var(--color-ink);
    border: var(--border-width-micro) solid var(--color-ink);
    cursor: pointer;
}
.fd-draw__sort-chip + .fd-draw__sort-chip { margin-left: -2px; }
.fd-draw__sort-chip.is-active { background: var(--color-select); color: var(--ink-fixed); }
.fd-draw__sort-chip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.fd-draw__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    overflow-y: auto;
    min-height: 0;
    padding: 4px; /* room for the you-tile ring inside the scroll clip */
}
.fd-draw__tile {
    background: var(--color-panel);
    border: var(--border-width-micro) solid var(--color-ink);
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.fd-draw__tile.is-you {
    border-width: var(--border-width-nested);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-shadow),
                0 0 0 var(--border-width) var(--color-accent-yellow);
}
.fd-draw__tile-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    padding: 6px 10px;
    border-bottom: var(--border-width-micro) solid var(--color-ink);
}
.fd-draw__tile.is-you .fd-draw__tile-head { background: var(--color-accent-yellow); color: var(--ink-fixed); }
.fd-draw__tile-letter { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; }
.fd-draw__tile-avg {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
}
.fd-draw__tile.is-you .fd-draw__tile-avg { color: var(--ink-fixed); }
.fd-draw__tile-rank {
    font-family: var(--font-display);
    font-size: 10px;
    padding: 1px 6px;
    border: var(--border-width-micro) solid var(--text-tertiary);
    color: var(--text-secondary);
}
.fd-draw__tile-rank.is-hard { background: var(--color-accent-red-surface); color: var(--color-on-dark); border-color: var(--color-ink); }
.fd-draw__tile-rank.is-soft { background: var(--color-success); color: var(--ink-fixed); border-color: var(--color-ink); }
.fd-draw__tile-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 5px 10px;
    border-bottom: 1px solid var(--color-panel-alt);
    font-family: var(--font-body);
    font-size: 11px;
}
.fd-draw__tile-row:last-child { border-bottom: none; }
.fd-draw__tile-row.is-you { background: var(--color-select); color: var(--ink-fixed); font-weight: 800; }
.fd-draw__tile-row.is-top .fd-draw__tile-ovr { font-weight: 800; }
.fd-draw__tile-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.fd-draw__tile-ovr { font-family: var(--font-mono); }

@media (max-width: 1200px) {
    .fd-draw__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .fd-draw__body { flex-direction: column; }
    .fd-draw__left { width: 100%; }
    .fd-draw__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ----------------------------------------------------------------------------
   HUB — "One Road" (final decisions): 60px bar · road timeline strip · two
   columns (NEXT STOP flex 1.5 · right stack flex 1 with the mandatory banner,
   group table, compact camp status). The road IS the wayfinding.
   ---------------------------------------------------------------------------- */
.fd-hub__road-strip {
    flex: none;
    padding: var(--space-lg) 40px var(--space-sm) 40px;
}

.fd-hub__body {
    flex: 1;
    min-height: 0;
    display: flex;
    /* Cards hug their content — a stretched NEXT STOP card reads as dead space, not presence. */
    align-items: flex-start;
    gap: var(--space-lg);
    padding: var(--space-sm) 40px var(--space-lg) 40px;
}

.fd-hub__next { flex: 1.5; min-width: 0; display: flex; flex-direction: column; }

.fd-hub__stack {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.fd-hub__fixture {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin: var(--space-md) 0;
}

.fd-hub__ovr {
    font-family: var(--font-display);
    font-size: 24px;
}
.fd-hub__ovr--opp { color: var(--text-secondary); }

.fd-hub__vs {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--text-secondary);
}

.fd-hub__intel {
    margin: var(--space-sm) 0 var(--space-md);
    text-align: center;
}

.fd-hub__qualify {
    font-family: var(--font-display);
    font-size: var(--text-ui);
    text-transform: uppercase;
    margin: 0;
}

/* NEXT STOP footer: SQUAD · TOURNAMENT · EDIT LINEUP (the blue one takes double width). */
.fd-hub__actions {
    display: flex;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: var(--border-width-nested) solid var(--color-ink);
}
.fd-hub__actions > * { flex: 1; min-width: 0; }
.fd-hub__actions > *:last-child { flex: 2; }

/* The mandatory path-stop banner (the hub-cta slot): a single yellow row with the ink MANDATORY
   chip and the CHOOSE → action; swaps to the blue kick-off bar once the stop is resolved. */
.fd-hub__banner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard);
    padding: var(--space-sm) var(--space-md);
}
/* The banner is a FIXED bright-yellow scene: remap the flipping ink/bg/shadow locals to their pinned
   twins so the black CHOOSE button and MANDATORY chip stay truly ink (border + dark shadow) in dark
   theme instead of flipping to cream-on-yellow with a light shadow. */
.fd-hub__banner--path {
    background: var(--color-accent-yellow);
    color: var(--ink-fixed);
    --color-ink: var(--ink-fixed);
    --color-bg: var(--paper-fixed);
    --color-shadow: var(--ink-fixed);
}
.fd-hub__banner--go { background: transparent; border: none; box-shadow: none; padding: 0; }
.fd-hub__banner-title {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 13px;
    min-width: 0;
}
.fd-hub__banner-grow { flex: 1; }

/* CAMP STATUS — compact 11px rows (FD-013): coach, energy + the locked-tools one-liner, then any
   active path modifiers in the same idiom. */
.fd-hub__camp { display: flex; flex-direction: column; gap: var(--space-xs); }
.fd-hub__camp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: var(--border-width-micro) solid var(--color-panel-alt);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.fd-hub__camp-row:last-child { border-bottom: none; padding-bottom: 0; }
.fd-hub__camp-row[title] { cursor: help; }
.fd-hub__mod-label { min-width: 0; overflow-wrap: anywhere; }

/* Group table */
.fd-grouptable {
    width: 100%;
    border-collapse: collapse;
    /* FD-014: fixed layout + the colgroup below pin column widths so every table aligns identically. */
    table-layout: fixed;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
}
.fd-grouptable__col-rank   { width: 2.4ch; }
.fd-grouptable__col-code   { width: 5ch; }
/* Club codes run 4-6 letters (BAENAO, LARANJ) — widen the pinned column so the code never
   bleeds into the name. Applied by the panel only when a long code is present (legacy 3-letter
   nation tables keep their exact width). */
.fd-grouptable--wide-code .fd-grouptable__col-code { width: 8ch; }
.fd-grouptable__col-nation { width: auto; }   /* takes the remaining width; long names ellipsis */
.fd-grouptable__col-num    { width: 3.4ch; }
.fd-grouptable__col-pts    { width: 4ch; }

.fd-grouptable th {
    text-align: right;
    padding: var(--space-xs);
    border-bottom: var(--border-width-nested) solid var(--color-ink);
    letter-spacing: var(--tracking-mono-wide);
}

.fd-grouptable td {
    text-align: right;
    padding: var(--space-xs);
    border-bottom: var(--border-width-micro) solid var(--color-panel-alt);
}

/* Must out-rank the ".fd-grouptable td/th" right-align above (element+class > bare class). */
.fd-grouptable th.fd-grouptable__rank,
.fd-grouptable td.fd-grouptable__rank,
.fd-grouptable th.fd-grouptable__nation,
.fd-grouptable td.fd-grouptable__nation,
.fd-grouptable th.fd-grouptable__code,
.fd-grouptable td.fd-grouptable__code { text-align: left; }

/* Name cell: single line, ellipsis when it can't fit (full name on the cell title — FD-014/FD-024). */
.fd-grouptable__nation { font-family: var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fd-grouptable__pts { font-weight: 700; }
.fd-grouptable__code { text-align: left; font-family: var(--font-display); }
/* FD-004: em-dash cells for a row with no results yet. */
.fd-grouptable__empty { color: var(--text-tertiary); }

.fd-grouptable tr.is-qualify td { box-shadow: inset 3px 0 0 var(--color-success); }
/* A third-placer currently inside the best-8 cut-off — yellow edge, distinct from the green top-2. */
.fd-grouptable tr.is-best-third td { box-shadow: inset 3px 0 0 var(--color-accent-yellow); }

.fd-grouptable tr.is-you td {
    background: var(--color-select);
    color: var(--ink-fixed);
    font-weight: 800;
}

/* ----------------------------------------------------------------------------
   Responsive — collapse the multi-column grids; keep brutalist constants fixed.
   ---------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .fd-hub__body { flex-direction: column; }
}

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

/* Touch: the nation INFO button gets a ≥44px hit target on coarse pointers (T18). */
@media (pointer: coarse) {
    .fd-nationtile__info { min-height: 44px; }
}

/* ============================================================================
   T12 screens — PATH · SQUAD · PREMATCH. Token-only; the dice / slot / pool /
   tactic / check primitives are styled in components.css — this only arranges
   them and adds the screen composites (the pitch, the line bars, the ritual).
   ============================================================================ */
.fd-path,
.fd-squad,
.fd-prematch {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* ---- PATH ---------------------------------------------------------------- */
/* FD-015/FD-025: cap + centre the path so the "one choice, no take-backs" moment fills the frame. */
.fd-path {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    max-width: 940px;
    margin-inline: auto;
    width: 100%;
}
.fd-path__head { text-align: center; }

.fd-path__title {
    font-family: var(--font-title);
    font-size: var(--text-title);
    letter-spacing: var(--tracking-display-tight);
    margin: 0;
}

.fd-path__sub {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-mono-wide);
    color: var(--text-secondary);   /* FD-005 */
    margin: var(--space-xs) 0 0;
}

/* The screen shell around the centered column: slim header + road strip (fd-fullbleed root). */
.fd-path-screen { display: flex; flex-direction: column; }
.fd-path-screen:focus { outline: none; }
.fd-path__road { flex: none; padding: var(--space-sm) 40px 0 40px; }

.fd-path__choices {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
    align-items: stretch;
}

/* The Crossroads choice card (FD-015): white slab, colored frame (per node type — FD-023 the color
   axis) with the ink-under-frame double shadow, tilted ±1.2° alternating; hover untilts. The card
   itself is informational — the COMMIT footer is the action. */
.fd-path__card {
    --card-frame: var(--color-accent-blue);
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative; /* anchors the per-tier hover tooltip */
    cursor: pointer;    /* the whole card is the choice now */
    background: var(--color-panel);
    border: var(--border-width) solid var(--card-frame);
    box-shadow: 0 0 0 var(--border-width) var(--color-ink),
                10px 10px 0 var(--border-width) var(--card-frame);
    transform: rotate(-1.2deg);
    transition: transform var(--motion-snap);
}
.fd-path__card:nth-child(even) { transform: rotate(1.2deg); }
.fd-path__card:hover,
.fd-path__card:focus-visible { transform: rotate(0deg) scale(1.02); }
.fd-path__card:focus-visible { outline: var(--focus-ring); outline-offset: 4px; }

.fd-path__card--red    { --card-frame: var(--color-accent-red-surface); }
.fd-path__card--blue   { --card-frame: var(--color-accent-blue); }
.fd-path__card--green  { --card-frame: var(--color-success); }
.fd-path__card--yellow { --card-frame: var(--color-select); }

.fd-path__card-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--card-frame);
    color: var(--color-on-dark);
    padding: var(--space-sm) var(--space-md);
}
.fd-path__card--yellow .fd-path__card-head,
.fd-path__card--green .fd-path__card-head { color: var(--ink-fixed); }
.fd-path__card-name {
    font-family: var(--font-display);
    font-size: 14px;
    text-transform: uppercase;
    min-width: 0;
    overflow-wrap: anywhere;
}
.fd-path__card-kind {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    white-space: nowrap;
}
.fd-path__card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    flex: 1;
}
.fd-path__card-icon {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-frame);
    color: var(--color-on-dark);
    border: var(--border-width-nested) solid var(--color-ink);
    font-size: 30px;
}
.fd-path__card--yellow .fd-path__card-icon,
.fd-path__card--green .fd-path__card-icon { color: var(--ink-fixed); }
.fd-path__card-desc {
    font-family: var(--font-body);
    font-size: var(--fs-mono);
    line-height: 1.7;
    text-align: center;
    color: var(--color-ink);
    margin: 0;
}
.fd-path__card-reward {
    background: var(--color-ink);
    color: var(--color-on-ink-accent);
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
    padding: 6px 12px;
}
.fd-path__oddsbar {
    width: 100%;
    display: flex;
    height: 20px;
    border: var(--border-width-nested) solid var(--color-ink);
    background: var(--color-panel-alt);
}
.fd-path__oddsbar-strong { background: var(--color-success); }
.fd-path__oddsbar-ok     { background: var(--color-accent-yellow); }
.fd-path__oddsbar-risk   { background: var(--color-accent-red-surface); }
.fd-path__oddsline {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    text-transform: uppercase;
}
/* The COMMIT footer is now a visual banner (the whole card is the button) — it lights up on card hover. */
.fd-path__card-commit {
    display: block;
    text-align: center;
    border-top: var(--border-width) solid var(--color-ink);
    background: var(--color-ink);
    color: var(--color-bg);
    font-family: var(--font-display);
    font-size: 13px;
    text-transform: uppercase;
    padding: 15px;
    transition: background var(--motion-snap), color var(--motion-snap);
}
.fd-path__card:hover .fd-path__card-commit,
.fd-path__card:focus-visible .fd-path__card-commit {
    background: var(--card-frame);
    color: var(--color-on-dark);
}
.fd-path__card--yellow:hover .fd-path__card-commit,
.fd-path__card--green:hover .fd-path__card-commit,
.fd-path__card--yellow:focus-visible .fd-path__card-commit,
.fd-path__card--green:focus-visible .fd-path__card-commit { color: var(--ink-fixed); }

/* Per-tier hover/focus tooltip: every outcome the die can roll, boost green / nerf red. Sits above the
   card; appears on hover OR keyboard focus (focus-within) so it is never mouse-only. */
.fd-path__tip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%);
    width: max(240px, 95%);
    display: none;
    flex-direction: column;
    gap: 3px;
    background: var(--color-panel);
    color: var(--color-ink);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard);
    padding: var(--space-sm) var(--space-md);
    z-index: 20;
    text-align: left;
}
.fd-path__card:hover .fd-path__tip,
.fd-path__card:focus-within .fd-path__tip { display: flex; }
.fd-path__tip-title {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 3px;
}
.fd-path__tip-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    font-family: var(--font-mono);
    font-size: 11px;
}
.fd-path__tip-tier { text-transform: uppercase; color: var(--color-ink); min-width: 0; }
.fd-path__tip-eff { font-weight: 700; white-space: nowrap; }
.fd-path__tip-row.is-up .fd-path__tip-eff { color: var(--color-success); }
.fd-path__tip-row.is-down .fd-path__tip-eff { color: var(--color-accent-red-surface); }

/* Static tilt is composition, not motion — but the hover untilt must still collapse. */
@media (prefers-reduced-motion: reduce) {
    html:not(.motion-full) .fd-path__card,
    html:not(.motion-full) .fd-path__card:nth-child(even),
    html:not(.motion-full) .fd-path__card:hover,
    html:not(.motion-full) .fd-path__card:focus-visible { transform: none; }
}
html.reduced-motion .fd-path__card,
html.reduced-motion .fd-path__card:nth-child(even),
html.reduced-motion .fd-path__card:hover,
html.reduced-motion .fd-path__card:focus-visible { transform: none; }

.fd-path__foot {
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-mono-wide);
    color: var(--text-secondary);
}
/* FD-015: the success/risk odds at the current squad OVR, so the gamble is legible up front. */
.fd-path__odds {
    text-align: center;
}

.fd-path__lines {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

/* Line buttons stack label over the line's current rating (the number training will move). */
.fd-path__lines .fd-btn {
    flex-direction: column;
    gap: var(--space-xs);
}

.fd-path__line-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.fd-path__line-ovr {
    font-family: var(--font-mono);
    font-size: var(--text-ui);
    font-weight: 700;
}

.fd-path__roll,
.fd-path__result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    padding-block: var(--space-md);
}
.fd-path__roll { position: relative; } /* GF-03: hosts the .fd-natflash overlay on a NAT 1/100 */

.fd-path__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
.fd-path__flavor { font-family: var(--font-body); text-align: center; max-width: 48ch; }
.fd-path__hint { text-align: center; }

/* ---- SQUAD — "Vertical Pitch" (final decisions, 1C) -----------------------
   Portrait green pitch left (attack upward, FD-002 computed slots), right
   column = lines bar + green NEXT CTA · checks · pool (scrolls) · the six
   tactic chips in one visible row. Fits 1080p with no page scroll. */
.fd-squad { display: flex; flex-direction: column; overflow-x: clip; }

.fd-squad__body {
    flex: 1;
    min-height: 0;
    display: flex;
    gap: var(--space-lg);
    padding: var(--space-md) var(--space-lg) var(--space-lg) var(--space-lg);
    align-items: stretch;
}

.fd-squad__pitchcol {
    flex: none;
    width: 470px;   /* the canonical vertical-pitch column — the pitch fills it */
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-height: 0;
    align-items: stretch;
}

/* Lineup tools (auto-fill / clear / undo) sit with the XI they act on. */
.fd-squad__tools {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    align-self: stretch;
    flex: 0 0 auto;
}

/* The pitch: a bordered PORTRAIT field (own goal at the bottom, attack upward) — green, with the
   halfway line + centre circle. Width-driven off the 470px column; aspect-ratio sets the height. */
.fd-squad__pitch--vertical {
    position: relative;
    width: 100%;
    aspect-ratio: 47 / 58;
    background: var(--color-felt);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* FD-002 at 470px: PitchLayout's min cross gap is 0.17 ≈ 80px of this pitch — chips must be a
   notch narrower than the gap so a five-man line never touches. */
.fd-squad__pitch--vertical .fd-slot { width: 72px; height: 72px; }
/* The 72px chips: a slimmer energy tank + tighter pads buy the name ~12px of width, so GERSON /
   FALCÃO fit whole at 8px instead of breaking mid-word ("GERS/ON"). Long doubles still wrap on
   their space via the shared two-line clamp below. */
.fd-squad__pitch--vertical .fd-slot--has-energy,
.fd-pause__pitch .fd-slot--has-energy { padding-left: 13px; }
.fd-squad__pitch--vertical .fd-slot__energy,
.fd-pause__pitch .fd-slot__energy { width: 6px; left: 3px; }
.fd-squad__pitch-half {
    position: absolute;
    left: 0; right: 0; top: 46%;
    height: 3px;
    background: var(--paper-fixed);
    opacity: 0.5;
}
.fd-squad__pitch-circle {
    position: absolute;
    left: 50%; top: 46%;
    width: 90px; height: 90px;
    border: 3px solid var(--paper-fixed);
    opacity: 0.5;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
/* The attack-direction footer bar pinned to the pitch's bottom edge. */
.fd-squad__pitchfoot {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--ink-fixed);
    color: var(--paper-fixed);
    border-top: var(--border-width-nested) solid var(--ink-fixed);
    padding: 6px var(--space-md);
}
.fd-squad__pitchfoot-attack {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    color: var(--color-accent-yellow);
    text-transform: uppercase;
    flex: 1;
}
.fd-squad__pitchfoot-shape { font-family: var(--font-display); font-size: 10px; text-transform: uppercase; }

.fd-squad__slot {
    position: absolute;
    transform: translate(-50%, -50%);
}
/* Slots sit above the footer band: compress the placement area to leave it clear. */
.fd-squad__pitch--vertical .fd-squad__slot { margin-top: -14px; }

/* Right column: top row (lines bar + CTA), checks, pool grows/scrolls, tactic row fixed bottom. */
.fd-squad__right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
    min-height: 0;
}
.fd-squad__toprow { display: flex; gap: var(--space-md); align-items: stretch; }
.fd-squad__linesbar {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard-sm);
    padding: var(--space-sm) var(--space-md);
}
.fd-squad__linesbar-label { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; }
.fd-squad__linesbar-grow { flex: 1; }
.fd-squad__oppnote {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    color: var(--text-secondary);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fd-squad__checks { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* Pool panel: takes all remaining height; body scrolls internally. */
.fd-squad__right > .fd-panel { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.fd-squad__right > .fd-panel > .fd-panel__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.fd-squad__right .fd-squad__pool { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }

/* The tactic row: all six chips visible at once (no carousel, no inner scroll). */
.fd-squad__tacticbar {
    flex: 0 0 auto;
    display: flex;
    align-items: stretch;
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard-sm);
}
.fd-squad__tacticbar-label {
    display: flex;
    align-items: center;
    background: var(--color-ink);
    color: var(--color-bg);
    font-family: var(--font-display);
    font-size: 12px;
    text-transform: uppercase;
    padding: var(--space-sm) var(--space-md);
    flex: none;
}
/* The picker column: carousel (arrows + the full TacticCard) over the six quick-jump tabs —
   the START archetype grammar (the visible card is the pick). */
.fd-squad__tacticpick {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-sm);
}
.fd-squad__tacticcarousel {
    display: flex;
    align-items: stretch;
    gap: var(--space-sm);
    min-width: 0;
}
.fd-squad__tacticcarousel .fd-tactic { flex: 1; min-width: 0; }
.fd-squad__tactics {
    display: flex;
    gap: var(--space-sm);
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
}
.fd-squad__tacticchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--color-panel);
    border: var(--border-width-nested) solid var(--color-ink);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 10px;
    text-transform: uppercase;
    color: var(--color-ink);
    transition: transform var(--motion-snap);
    min-width: 0;
}
.fd-squad__tacticchip:hover { transform: translate(-1px, -1px); }
.fd-squad__tacticchip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
/* Active tab: ink fill + highlight text — the same grammar as the START archetype tabs. */
.fd-squad__tacticchip.is-selected {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: var(--color-on-ink-accent);
    box-shadow: var(--shadow-hard-xs);
}
.fd-squad__tacticchip-name { white-space: nowrap; }

/* Fit-to-viewport on desktop (≥700px CSS height): the fullbleed screen is exactly the viewport, the
   pool scrolls internally. Below that, scroll naturally (mobile / very short). */
@media (min-width: 1025px) and (min-height: 700px) {
    .fd-squad { height: 100svh; overflow: hidden; }
}
@media (max-width: 1024px) {
    .fd-squad__body { flex-direction: column; align-items: stretch; }
    .fd-squad__pitchcol { width: 100%; max-width: 470px; margin-inline: auto; }
}
/* Phone: the lines bar + the big NEXT/SAVE button can't share a row at 360px (the
   button crowds onto the DEF/MID/ATT chips). Stack them, and let the bar wrap its
   own chips so BACK · LINES · DEF/MID/ATT never collide. */
@media (max-width: 768px) {
    .fd-squad__toprow { flex-direction: column; }
    .fd-squad__linesbar { flex-wrap: wrap; }
}

/* FD-002/FD-024: on the placement pitches (squad + the widened pause pitch) AND the pause bench a
   long surname wraps to two lines rather than hard-truncating or colliding with the overall — one
   name grammar across the whole substitution surface. */
.fd-squad__pitch .fd-slot__name,
.fd-pause__pitch .fd-slot__name,
.fd-pause__bench .fd-slot__name {
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.05;
    /* One notch under --text-micro: two 9px display-font lines fit CARLOS ALBERTO /
       GABRIEL JESUS whole inside the fixed chip instead of clipping mid-name. */
    font-size: 9px;
    letter-spacing: 0;
}
/* The 72px chips (vertical squad pitch + the pause pitch AND its bench) drop one more notch so a
   ROMÁRIO / GERSON fits its ~55px text column whole instead of breaking mid-name. Must sit AFTER
   the clamp block — same (0,2,0) specificity, the cascade decides. */
.fd-squad__pitch--vertical .fd-slot__name,
.fd-pause__pitch .fd-slot__name,
.fd-pause__bench .fd-slot__name { font-size: 8px; }

.fd-squad__armed {
    margin-top: var(--space-md);
    text-align: center;
    color: var(--color-accent-blue-text);
}

.fd-squad__pool {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-md);
    max-height: min(64vh, 520px);
    overflow-y: auto;
}

/* Pool rows: slightly shorter in the squad context to show more rows. */
.fd-squad__pool .fd-pool { min-height: 36px; padding: 4px var(--space-md); }

.fd-squad__checks { display: flex; flex-wrap: wrap; gap: var(--space-md); }

/* PoolRow energy bar (the PoolRow primitive renders it when Energy >= 0). */
.fd-pool__energy {
    flex: 0 0 auto;
    width: 56px;
    height: 8px;
    background: var(--color-panel-alt);
    border: var(--border-width-micro) solid var(--color-ink);
}

.fd-pool__energy-fill { display: block; height: 100%; }
.fd-pool__energy-fill.is-high { background: var(--color-success); }
.fd-pool__energy-fill.is-mid  { background: var(--color-accent-yellow); }
.fd-pool__energy-fill.is-low  { background: var(--color-accent-red); }
/* Numeric energy readout (xxx/100) next to the pool bar. */
.fd-pool__energy-num { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--text-micro); }

/* ---- PREMATCH — "The Altar" (final decisions): one ritual, one surface ----
   Header row (← SQUAD · tie · line chips) → centered altar column (kicker,
   the gold-ringed die, ROLL THE MOOD, result, the full mood table) → the
   gated KICK OFF strip. FD-016 / FD-023 / FD-026. */
.fd-prematch { display: flex; flex-direction: column; }
.fd-prematch:focus { outline: none; }

.fd-prematch__header {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg) var(--space-sm) var(--space-lg);
}
.fd-prematch__header-grow { flex: 1; }
.fd-prematch__tie {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-display);
    font-size: 15px;
    text-transform: uppercase;
    white-space: nowrap;
}
.fd-prematch__tie-name--opp { color: var(--text-secondary); }
.fd-prematch__vs { font-family: var(--font-display); color: var(--text-secondary); }

.fd-prematch__altar {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
}
.fd-prematch__kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: var(--tracking-mono-max);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0;
    text-align: center;
}

/* The altar aura: gold ring + soft glow around the shared D20 (the die itself is untouched). */
.fd-prematch__die {
    padding: var(--space-md);
    box-shadow: 0 0 0 var(--border-width) var(--color-accent-yellow),
                0 0 60px 0 var(--color-highlight-soft);
}

.fd-prematch__intel {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-mono-wide);
    text-align: center;
}

.fd-prematch__result { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.fd-prematch__mood { font-family: var(--font-display); font-size: var(--text-section); text-align: center; }
.fd-prematch__flavor { font-family: var(--font-body); text-align: center; max-width: 40ch; }
.fd-prematch__tags { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }
.fd-prematch__hint { text-align: center; }

/* The gate strip: an unmistakable gate while locked (BButton's FD-026 hatch), a real primary after. */
.fd-prematch__gate {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg) var(--space-lg) var(--space-lg);
}

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

/* Below ~420px a 4-across defence overlaps with 80px slots — shrink the pitch slots so the
   single-column pitch stays legible at the 360px floor (T18; art shrinks, borders stay 4px). */
@media (max-width: 420px) {
    .fd-squad__pitch .fd-slot { width: 64px; height: 64px; }
}

/* ==========================================================================
   MATCH — "The Tabletop" (final decisions, FD-017): the one intentionally
   dark in-run scene. Dark-green felt + 45° weave; paper scorebug; the feed
   deals paper cards (die cell vs time cell); right rail = mood + controls.
   The felt is a FIXED scene — cards on it pin --paper-fixed/--ink-fixed.
   ========================================================================== */
.fd-match {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    position: relative;
    background:
        repeating-linear-gradient(45deg, var(--color-felt-weave) 0 24px, transparent 24px 48px),
        var(--color-felt);
    color: var(--paper-fixed);
}
.fd-match:focus { outline: none; }
/* The slim header sits on felt — its kicker takes the felt caption tint. */
.fd-match .fd-header__kicker { color: var(--text-on-felt); }
.fd-match .fd-header__wordmark { color: var(--paper-fixed); }

/* The paper scorebug: flag+code · ink score cell · code+flag · blue minute cell (inside ScoreBox). */
.fd-match__scoreboard {
    display: flex;
    justify-content: center;
    padding-block: var(--space-sm) var(--space-md);
    position: relative; /* GF-12: hosts the one-shot .fd-match__flash edge-flash overlay */
}
.fd-match__scorebug {
    display: flex;
    align-items: stretch;
    background: var(--paper-fixed);
    color: var(--ink-fixed);
    border: var(--border-width) solid var(--ink-fixed);
    box-shadow: var(--shadow-on-scene);
}
.fd-match__team {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
    padding: var(--space-sm) var(--space-md);
}
.fd-match__teamcode {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 22px;
}

/* Live DEF/MID/ATT for both teams — sits under the scorebug, always on the felt. Your side left,
   opponent right (mirrors the scorebug), so the eye reads each team's lines beside its own code. */
.fd-match__lines {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
}
.fd-match__lines-side {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    min-width: 0;
}
.fd-match__lines-side--opp { flex-direction: row-reverse; }
.fd-match__lines-code {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: 15px;
    color: var(--text-on-felt);
}

.fd-match__body {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: var(--space-md);
    padding: 0 40px var(--space-md) 40px;
    width: 100%;
}
.fd-match__feed {
    flex: 2.2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.fd-match__feed-kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono-max);
    text-transform: uppercase;
    color: var(--text-on-felt);
}
/* FD: the feed scrolls inside its own viewport so the rail stays put as the history grows.
   Newest event reveals at the top, so no manual scrolling is needed to follow play. */
.fd-match__ticker {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 62vh;
    overflow-y: auto;
    padding: 4px 6px 4px 4px; /* room for the tilt + card shadows inside the scroll clip */
}

/* One dealt event card: 64px left cell (die or timestamp) + head/tag/math body. Paper on felt —
   fixed palette. Alternating micro-tilt (collapses under reduced motion). */
.fd-match__card {
    display: flex;
    align-items: stretch;
    flex: none;
    background: var(--paper-fixed);
    color: var(--ink-fixed);
    border: var(--border-width) solid var(--ink-fixed);
    box-shadow: var(--shadow-on-scene);
    transform: rotate(-0.6deg);
    animation: slamIn 200ms var(--ease-punch);
}
.fd-match__ticker .fd-match__card:nth-child(even) { transform: rotate(0.6deg); }
.fd-match__card-cell {
    flex: none;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border-right: var(--border-width) solid var(--ink-fixed);
}
.fd-match__card-cell--gold  { background: var(--color-accent-yellow); color: var(--ink-fixed); }
.fd-match__card-cell--green { background: var(--color-tier-excellent); color: var(--ink-fixed); }
.fd-match__card-cell--red   { background: var(--color-accent-red-surface); color: var(--color-on-dark); }
.fd-match__card-cell--time  { background: var(--ink-fixed); color: var(--paper-fixed); }
.fd-match__card-roll { font-family: var(--font-display); font-size: 22px; line-height: 1; }
.fd-match__card-celllabel { font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.1em; }
.fd-match__card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 10px var(--space-md);
}
.fd-match__card-headrow { display: flex; align-items: baseline; gap: var(--space-sm); }
.fd-match__card-head {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 13px;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}
.fd-match__card-math {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--text-secondary-fixed); /* fixed paper-secondary — the card never flips with the theme */
    text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
    html:not(.motion-full) .fd-match__card,
    html:not(.motion-full) .fd-match__ticker .fd-match__card:nth-child(even) { transform: none; }
}
html.reduced-motion .fd-match__card,
html.reduced-motion .fd-match__ticker .fd-match__card:nth-child(even) { transform: none; }

/* Right rail: MOOD OF THE NIGHT + the controls stack (pause / skip / speed / kicker). */
.fd-match__rail {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}
.fd-match__mood {
    background: var(--paper-fixed);
    color: var(--ink-fixed);
    border: var(--border-width) solid var(--ink-fixed);
    box-shadow: var(--shadow-on-scene);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.fd-match__mood-title { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; }
.fd-match__mood-row { display: flex; align-items: center; gap: var(--space-md); }
.fd-match__mood-die {
    flex: none;
    width: 44px;
    height: 44px;
    background: var(--color-accent-yellow);
    border: var(--border-width-nested) solid var(--ink-fixed);
    transform: rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px;
}
.fd-match__mood-die > span {
    transform: rotate(-45deg);
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--ink-fixed);
}
.fd-match__mood-text { font-family: var(--font-mono); font-size: 11px; line-height: 1.5; min-width: 0; }
.fd-match__rail-controls {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}
.fd-match__rail-kicker {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    color: var(--text-on-felt);
}
.fd-match__speed { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); }
.fd-match__speed-val { font-family: var(--font-mono); min-width: 3ch; text-align: center; font-weight: 700; color: var(--paper-fixed); }

/* In-match stance switch (free, any minute): three chips on the felt; the active one is the only
   yellow in the rail, and the mono receipt under it spells the live DEF/MID/ATT trade. */
.fd-match__stance { display: flex; flex-direction: column; gap: var(--space-xs); }
.fd-match__stance-label,
.fd-match__stance-mods {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    color: var(--paper-fixed);
}
.fd-match__stance-btns { display: flex; gap: var(--space-xs); }
.fd-match__stance-btns > * { min-width: 0; }
.fd-match__stance-btn {
    flex: 1 1 0;
    padding: 6px 4px;
    background: transparent;
    border: var(--border-width-nested) solid var(--paper-fixed);
    color: var(--paper-fixed);
    font-family: var(--font-display);
    font-size: 9px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform var(--motion-snap);
}
.fd-match__stance-btn:hover { transform: translate(-1px, -1px); }
.fd-match__stance-btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.fd-match__stance-btn.is-active {
    background: var(--color-accent-yellow);
    border-color: var(--color-accent-yellow);
    color: var(--ink-fixed);
    font-weight: 700;
}

@media (max-width: 1024px) {
    .fd-match__body { flex-direction: column; }
    .fd-match__rail-controls { margin-top: 0; }
}

.fd-match__duel,
.fd-match__ht,
.fd-match__ft,
.fd-match__oppen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
}
.fd-match__duel { position: relative; } /* GF-03: hosts the .fd-natflash overlay on a NAT 1/100 */
/* Opponent penalty — Brassfoot-style staged reveal (preparing → shooting → result). */
.fd-match__oppen { padding: var(--space-lg) 0; }
.fd-match__oppen-stage {
    font-family: var(--font-display);
    font-size: var(--text-section);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display-tight);
}
.fd-match__oppen--preparing .fd-match__oppen-stage,
.fd-match__oppen--shooting .fd-match__oppen-stage { opacity: var(--opacity-muted); }
.fd-match__oppen-scorer { font-family: var(--font-mono); font-size: var(--text-ui); }
/* CONTINUE bar under a settled penalty — the modal waits here for the player to dismiss it. */
.fd-match__pen-foot { display: flex; justify-content: center; margin-top: var(--space-md); }
.fd-match__ht-band { display: flex; justify-content: center; }
.fd-match__ht-list { display: grid; gap: var(--space-xs); width: 100%; }
.fd-match__ht-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    border: var(--border-width-micro) solid var(--color-ink);
    font-family: var(--font-display); text-transform: uppercase;
}
.fd-match__ft-line { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-section); }

/* FD-017: the six talk-wheel segments previewed before the roll. */
.fd-match__ht-legend { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; align-items: center; }
.fd-match__ht-legend-rows { display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: center; }
.fd-match__ht-legend-item {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px var(--space-sm);
    border: var(--border-width-micro) solid var(--color-ink);
    font-family: var(--font-mono); font-size: var(--text-micro); text-transform: uppercase;
}
.fd-match__ht-legend-sign { font-family: var(--font-display); }
.fd-match__ht-legend-item.is-up   .fd-match__ht-legend-sign { color: var(--color-success); }
.fd-match__ht-legend-item.is-down .fd-match__ht-legend-sign { color: var(--color-accent-red-text); }
.fd-match__ht-legend-item.is-flat .fd-match__ht-legend-sign { color: var(--text-secondary); }

/* --- Shootout takeover ---------------------------------------------------- */
.fd-shootout {
    position: fixed;
    inset: 0;
    z-index: var(--z-chrome);
    /* Fixed dark dramatic surface — must NOT invert in dark theme (--color-ink flips light there). */
    background: var(--ink-fixed);
    color: var(--paper-fixed);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
}
.fd-shootout__head {
    display: flex; align-items: center; gap: var(--space-lg);
    font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-section);
}
.fd-shootout__vs { font-size: var(--text-ui); opacity: var(--opacity-soft); letter-spacing: var(--tracking-mono-wide); }
.fd-shootout__pips { display: grid; gap: var(--space-sm); }
.fd-shootout__piprow { display: flex; gap: var(--space-xs); font-size: var(--text-section); line-height: 1; }
.fd-shootout__pip { font-size: var(--text-section); }
.fd-shootout__pip.is-goal { color: var(--color-success); }
.fd-shootout__pip.is-miss { color: var(--color-accent-red); }
.fd-shootout__pip.is-pending { opacity: var(--opacity-dim); }
.fd-shootout__kicker { font-family: var(--font-display); text-transform: uppercase; display: flex; gap: var(--space-sm); align-items: center; }
.fd-shootout__sd {
    font-family: var(--font-display); text-transform: uppercase;
    color: var(--color-accent-red); letter-spacing: var(--tracking-stamp);
}
/* GF-21 — sudden death swaps the caption for a banner that owns the room (fixed dark surface:
   the banner sets both its own background AND color). */
.fd-shootout__sd--banner {
    background: var(--color-accent-red);
    color: var(--color-on-dark);
    border: var(--border-width) solid var(--paper-fixed);
    box-shadow: var(--shadow-hard-sm);
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--text-ui);
    margin: 0;
}
/* GF-21 — the decisive-kick stakes chip above the duel: green when the moment is yours to seize,
   red when it can end you. Stamped in per kick (anim-stamp-in re-keys on the kick index). */
.fd-shootout__stakes {
    font-family: var(--font-display);
    text-transform: uppercase;
    font-size: var(--text-ui);
    letter-spacing: var(--tracking-stamp);
    padding: var(--space-xs) var(--space-md);
    border: var(--border-width) solid var(--paper-fixed);
    box-shadow: var(--shadow-hard-sm);
}
.fd-shootout__stakes.is-good { background: var(--color-success);    color: var(--ink-fixed); }
.fd-shootout__stakes.is-bad  { background: var(--color-accent-red); color: var(--color-on-dark); }

/* ==========================================================================
   RUNOVER / CHAMPION (T13) — full-bleed end screens.
   ========================================================================== */
.fd-end {
    position: fixed;
    inset: 0;
    z-index: var(--z-chrome);
    overflow: auto;
    display: grid;
    place-items: center;
    padding: var(--space-lg);
}
/* Compact vertical rhythm: the WHOLE ceremony — down to SHARE / NEW RUN — must fit a laptop
   viewport without scrolling, or the ending reads as a dead screen with no way out. */
.fd-end__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
    text-align: center;
    max-width: 720px;
}
.fd-end__inner > p { margin: 0; }
.fd-end__title {
    font-family: var(--font-title);
    font-size: clamp(44px, 8vh, var(--text-colossal));
    line-height: 0.95;
    letter-spacing: var(--tracking-display-tight);
}
/* Fixed dark "RUN OVER" surface — stays dark in both themes (--color-ink flips light in dark mode). */
.fd-runover { background: var(--color-void); color: var(--paper-fixed); }
/* FD-019: the defeat twin of the champion headline — red with the dark-red double hard shadow. */
.fd-end__title--over {
    color: var(--color-accent-red);
    text-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-red-void);
}

/* The 3-star row + the 84px plate (gold trophy / red skull) — the two endings rhyme. */
.fd-end__stars { font-size: 26px; letter-spacing: var(--tracking-stamp); display: flex; gap: var(--space-lg); }
.fd-end__stars--gold { color: var(--color-accent-yellow); filter: drop-shadow(3px 3px 0 var(--color-accent-navy)); }
.fd-end__stars--dim { color: var(--text-tertiary); opacity: var(--opacity-dim); filter: drop-shadow(3px 3px 0 var(--color-red-void)); }
.fd-end__plate {
    width: 84px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: var(--border-width) solid var(--ink-fixed);
}
.fd-end__plate--trophy {
    background: var(--color-accent-yellow);
    color: var(--ink-fixed);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-accent-navy);
    font-size: 42px;
}
.fd-end__plate--skull {
    background: var(--color-red-deep);
    border-color: var(--color-accent-red);
    box-shadow: var(--shadow-offset) var(--shadow-offset) 0 0 var(--color-red-void);
}
/* Two black eye dots — the skull is drawn, not sprited. */
.fd-end__plate--skull > span {
    width: 16px;
    height: 16px;
    background: var(--color-void);
    border-radius: 50%;
}

.fd-end__nation { display: flex; align-items: center; gap: var(--space-md); }
.fd-end__nation-name { font-family: var(--font-display); text-transform: uppercase; font-size: 26px; }
.fd-end__story {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-mono-max);
    text-transform: uppercase;
    opacity: var(--opacity-strong);
    margin: 0;
}

/* The gold-framed rewards strip — identical frame on both endings (a death always pays forward). */
.fd-end__rewards {
    border: var(--border-width) solid var(--color-accent-yellow);
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-items: center;
    max-width: 100%;
}
.fd-champion .fd-end__rewards { background: var(--color-accent-navy); }
.fd-runover .fd-end__rewards { background: var(--color-red-void); }
/* CampaignStrip — the three-campaign progress line inside the rewards frame (both endings). Gold pips
   read on the navy/red surfaces; cleared/current are gold, locked is dim paper; the just-unlocked pip
   punches in via anim-result-punch (added in markup) so a win clearly reveals the new campaign. */
.fd-campaign-strip { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); }
.fd-campaign-strip__head { opacity: var(--opacity-muted); }
.fd-campaign-strip__pips { display: flex; gap: var(--space-lg); }
.fd-campaign-strip__pip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 20px;            /* sizes the lock/unlock/star Icon (1em); the numeral overrides below */
    color: var(--paper-fixed);
    opacity: var(--opacity-dim);
}
.fd-campaign-strip__pip.is-cleared { color: var(--color-accent-yellow); opacity: var(--opacity-strong); }
.fd-campaign-strip__pip.is-current { color: var(--color-accent-yellow); opacity: 1; }
.fd-campaign-strip__num {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono-wide);
}
.fd-end__reason {
    font-family: var(--font-mono);
    font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
}
.fd-end__epitaph { font-family: var(--font-body); font-size: var(--fs-body); max-width: 48ch; opacity: var(--opacity-strong); }

/* FD batch T1: the post-elimination epilogue — the tournament resolves without you. */
.fd-end__world {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-sm);
    max-width: 48ch;
    padding: var(--space-md);
    border: var(--border-width) solid var(--paper-fixed);
}
.fd-end__world-head {
    margin: 0;
    font-family: var(--font-mono); font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono-wide); text-transform: uppercase;
    opacity: var(--opacity-muted);
}
.fd-end__world-line { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); text-align: center; }

/* Blue celebration surface — a FIXED ceremony palette (the raw hex-equivalent blue, not the
   theme-adaptive accent, so dark mode never re-tints the coronation). */
.fd-champion { background: var(--color-champion-field); color: var(--paper-fixed); }
/* FD-018: CHAMPIONS in solid gold with the navy double hard shadow — reads boldly off the blue. */
.fd-end__title--champ {
    color: var(--color-accent-yellow);
    text-shadow: var(--shadow-offset) var(--shadow-offset) 0 var(--color-accent-navy);
}

/* FD-018/FD-019: end-screen action row + the shareable result block (mono, copy-by-hand like the save export). */
.fd-end__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; align-items: center; }

/* Run breakdown modal: match list + generated PNG preview. */
.fd-breakdown { display: flex; flex-direction: column; gap: var(--space-md); }
.fd-breakdown__png {
    max-width: 100%;
    height: auto;
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard-sm);
    align-self: flex-start;
}
/* The card's own modal: image + share/copy/download actions centered as one column. */
.fd-breakdown--card { align-items: center; }
.fd-breakdown--card .fd-breakdown__png { align-self: center; }
/* Share/copy/download row: wraps to a column on narrow phones so no button is clipped. */
.fd-share-actions { display: flex; flex-wrap: wrap; gap: var(--space-md); justify-content: center; }
.fd-share-msg {
    font-family: var(--font-mono); font-size: var(--text-micro);
    color: var(--text-secondary); text-align: center; margin: 0;
}
.fd-end__share {
    font-family: var(--font-mono); font-size: var(--text-micro);
    white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: var(--border-width-micro) solid currentColor;
    text-align: left;
}

/* --- Run-history strip (shared) ------------------------------------------- */
.fd-runhistory { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.fd-runhistory__chip {
    display: flex; align-items: center; gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border: var(--border-width-micro) solid var(--color-ink);
    background: var(--color-panel);
    color: var(--color-ink);
    font-family: var(--font-display); text-transform: uppercase;
}
.fd-runhistory__chip--win  { background: var(--color-success); }
.fd-runhistory__chip--draw { background: var(--color-accent-yellow); }
.fd-runhistory__chip--loss { background: var(--color-accent-red-surface); color: var(--color-on-dark); }
.fd-runhistory__stage { font-family: var(--font-mono); font-size: var(--text-micro); letter-spacing: var(--tracking-mono-wide); }
.fd-runhistory__pens { font-family: var(--font-mono); font-size: var(--text-micro); opacity: var(--opacity-soft); }

/* Champion register: fixed-paper chips (the strip sits on the blue ceremony field); the FIN chip gold. */
.fd-runhistory--champion .fd-runhistory__chip { border-color: var(--ink-fixed); color: var(--ink-fixed); }
.fd-runhistory--champion .fd-runhistory__chip:last-child {
    background: var(--color-accent-yellow);
    color: var(--ink-fixed);
}
/* Run Over register (FD-019): the dark idiom — deep-green wins with mint text, the fatal round in
   deep red. Every chip pins its own fills; the void field never flips. */
.fd-runhistory--runover .fd-runhistory__chip--win,
.fd-runhistory--runover .fd-runhistory__chip--draw {
    background: var(--color-green-deep);
    border-color: var(--color-success);
    color: var(--color-green-mint);
}
.fd-runhistory--runover .fd-runhistory__chip--loss {
    background: var(--color-red-void);
    border-color: var(--color-accent-red);
    color: var(--paper-fixed);
}

@media (max-width: 768px) {
    .fd-match__scoreboard { gap: var(--space-md); }
    .fd-match__teamname { font-size: var(--text-ui); }
    .fd-end__title { font-size: var(--text-result); }
}

/* At the 360px floor "CHAMPIONS" overflows at 64px — drop to title size so the end screens never
   trigger horizontal scroll (T18; the colossal/result ceremony is kept at wider widths). */
@media (max-width: 480px) {
    .fd-end__title { font-size: var(--text-title); }
}

/* --- LIFETIME STATS — "The Scoreboard" (final decisions, 1A) --------------
   Hero band of five headline tiles, then one big card of six numbered
   sections in three columns. Personal bests take the yellow value highlight. */
.fd-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg) 30px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
}
.fd-stats__head { display: flex; align-items: flex-end; gap: var(--space-md); }
.fd-stats__head-titles { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.fd-stats__kicker {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono-max);
    text-transform: uppercase;
    color: var(--text-secondary);
}
.fd-stats__title {
    font-family: var(--font-title);
    font-size: 32px;
    line-height: 1;
    margin: 0;
    text-transform: uppercase;
}

.fd-stats__hero {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr 1fr 0.8fr 1.3fr;
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard);
}
.fd-stats__tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: 20px 24px;
    justify-content: center;
    min-width: 0;
}
.fd-stats__tile + .fd-stats__tile { border-left: var(--border-width-nested) solid var(--color-ink); }
.fd-stats__tile--ink { background: var(--color-ink); color: var(--color-bg); }
.fd-stats__tile--ink .fd-stats__tile-value { color: var(--color-on-ink-accent); }
.fd-stats__tile-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: var(--tracking-mono-max);
    text-transform: uppercase;
    opacity: var(--opacity-muted);
}
.fd-stats__tile-value {
    font-family: var(--font-display);
    font-size: clamp(24px, 2.6vw, 38px);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
}
/* Phrase values (BEST RUN's localized round name) — smaller, wrapping, never ellipsed to nonsense. */
.fd-stats__tile-value--wrap {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: clamp(16px, 1.5vw, 24px);
    line-height: 1.1;
}
.fd-stats__tile-sub {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: var(--opacity-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-stats__sheet {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard);
}
.fd-stats__col {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 20px 24px;
    min-width: 0;
}
.fd-stats__col + .fd-stats__col { border-left: var(--border-width-nested) solid var(--color-ink); }
.fd-stats__sechead {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    background: var(--color-ink);
    color: var(--color-bg);
    padding: var(--space-sm) 12px;
    margin-top: var(--space-lg);
}
.fd-stats__sechead:first-child { margin-top: 0; }
.fd-stats__secnum { font-family: var(--font-display); font-size: 12px; color: var(--color-on-ink-accent); }
.fd-stats__sectitle { font-family: var(--font-display); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.fd-stats__row {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    padding: 10px 2px;
    border-bottom: 1px solid var(--color-panel-alt);
    font-family: var(--font-body);
    font-size: var(--fs-mono);
}
.fd-stats__row-label { min-width: 0; flex: 1; }
.fd-stats__row-value { font-weight: 800; white-space: nowrap; letter-spacing: 0.06em; flex: none; }
/* Personal bests take the yellow highlight. */
.fd-stats__row-value.is-best {
    background: var(--color-accent-yellow);
    color: var(--ink-fixed);
    padding: 1px 7px;
    outline: var(--border-width-micro) solid var(--color-ink);
}
.fd-stats__foot {
    margin: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
}
@media (max-width: 1024px) {
    .fd-stats__hero { grid-template-columns: 1fr 1fr; }
    .fd-stats__tile + .fd-stats__tile { border-left: none; border-top: var(--border-width-nested) solid var(--color-ink); }
    .fd-stats__sheet { grid-template-columns: 1fr; }
    .fd-stats__col + .fd-stats__col { border-left: none; border-top: var(--border-width-nested) solid var(--color-ink); }
}
/* Phone: the 32px title is a single unbreakable word (CONQUISTAS) that slid under
   the BACK button — drop it to the responsive section size and let it wrap. Also
   pull the 30px side gutter back so the sheet gets the width. */
@media (max-width: 768px) {
    .fd-stats { padding-inline: var(--space-md); }
    .fd-stats__title { font-size: var(--text-section); overflow-wrap: anywhere; }
}

/* --- ACHIEVEMENTS — "The Unlock Ledger" (final decisions, 1A) --------------
   Summary bar · band filter chips · one scrolling ledger: unlocked (newest
   first, date + run recorded) above locked (dimmed, conditions readable). */
.fd-ach__summary {
    display: flex;
    align-items: stretch;
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard);
}
.fd-ach__summary-count,
.fd-ach__summary-stars {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
}
.fd-ach__summary-count { border-right: var(--border-width-nested) solid var(--color-ink); }
.fd-ach__summary-stars { background: var(--color-ink); color: var(--color-bg); }
.fd-ach__summary-big { font-family: var(--font-display); font-size: 30px; line-height: 1; white-space: nowrap; }
.fd-ach__summary-big--gold { color: var(--color-on-ink-accent); }
.fd-ach__summary-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: var(--tracking-mono-max);
    text-transform: uppercase;
    opacity: var(--opacity-muted);
}
.fd-ach__summary-progress {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
    justify-content: center;
    padding: var(--space-md) var(--space-lg);
}
.fd-ach__bar {
    height: 24px;
    border: var(--border-width-nested) solid var(--color-ink);
    background: var(--color-panel);
    position: relative;
}
.fd-ach__bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--color-accent-yellow); }
.fd-ach__summary-note {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fd-ach__filters { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.fd-ach__filter {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 12px;
    border: var(--border-width-nested) solid var(--color-ink);
    background: var(--color-panel);
    color: var(--color-ink);
    box-shadow: var(--shadow-hard-xs);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
    transition: transform var(--motion-snap), box-shadow var(--motion-snap);
}
.fd-ach__filter:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-hard-sm); }
.fd-ach__filter:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.fd-ach__filter.is-active { background: var(--color-ink); color: var(--color-bg); }
.fd-ach__filter-count { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.1em; opacity: 0.55; }
.fd-ach__filters-grow { flex: 1; }
.fd-ach__sorted {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}

.fd-ach__ledger {
    flex: 1;
    min-height: 0;
    background: var(--color-panel);
    border: var(--border-width) solid var(--color-ink);
    box-shadow: var(--shadow-hard);
    overflow-y: auto;
    position: relative;
    max-height: 62vh;
}
.fd-ach__ledgerhead {
    position: sticky;
    top: 0;
    z-index: var(--z-raised);
    background: var(--color-ink);
    color: var(--color-bg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 9px var(--space-md);
}
.fd-ach__ledgerhead-title { font-family: var(--font-display); font-size: 13px; color: var(--color-on-ink-accent); letter-spacing: 0.04em; text-transform: uppercase; flex: none; }
.fd-ach__ledgerhead-note {
    flex: 1;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    opacity: var(--opacity-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fd-ach__row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 11px var(--space-md);
    border-bottom: 1px solid var(--color-panel-alt);
}
.fd-ach__icon {
    flex: none;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-nested) solid var(--color-ink);
    background: var(--color-accent-yellow);
    color: var(--ink-fixed);
    font-size: 26px;
}
.fd-ach__row.is-off .fd-ach__icon {
    border-color: var(--text-tertiary);
    background: var(--color-panel-alt);
    color: var(--text-tertiary);
}
.fd-ach__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.fd-ach__titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fd-ach__name { font-family: var(--font-display); font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; }
.fd-ach__row.is-off .fd-ach__name { color: var(--text-secondary); }
.fd-ach__chip {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 2px 7px;
    background: var(--color-accent-yellow);
    color: var(--ink-fixed);
    outline: var(--border-width-micro) solid var(--color-ink);
    white-space: nowrap;
    flex: none;
    text-transform: uppercase;
}
.fd-ach__row.is-off .fd-ach__chip {
    background: transparent;
    color: var(--text-secondary);
    outline-color: var(--text-tertiary);
}
.fd-ach__band {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    color: var(--text-tertiary);
    white-space: nowrap;
}
.fd-ach__cond { font-family: var(--font-body); font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); }
.fd-ach__right {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    text-align: right;
}
.fd-ach__stamp {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: var(--tracking-mono-max);
    text-transform: uppercase;
    color: var(--text-tertiary);
}
.fd-ach__row.is-on .fd-ach__stamp {
    background: var(--color-ink);
    color: var(--color-on-ink-accent);
    padding: 2px 7px;
}
.fd-ach__date { font-family: var(--font-mono); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.fd-ach__run {
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--text-secondary);
    text-transform: uppercase;
}
.fd-ach__row--empty { color: var(--text-secondary); }
.fd-ach__empty-mark { font-family: var(--font-display); font-size: 13px; }
.fd-ach__empty-text { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }

/* --- Meta-progression screens (T14) --------------------------------------- */
.fd-meta { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg); max-width: 1100px; margin: 0 auto; }
.fd-meta__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.fd-meta__title { font-family: var(--font-title); text-transform: uppercase; font-size: var(--text-title); }
.fd-meta__count { text-align: center; }
.fd-meta__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }

/* Star ladder */
.fd-meta__ladder { list-style: none; margin: var(--space-md) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.fd-meta__ladder-row { display: grid; grid-template-columns: 4rem 1fr 1.5rem; align-items: center; gap: var(--space-sm);
    padding: var(--space-xs) var(--space-sm); border: var(--border-width-micro) solid var(--color-ink); background: var(--color-panel); opacity: var(--opacity-soft); }
.fd-meta__ladder-row.is-earned { opacity: 1; background: var(--color-success); }
/* TBD rewards (not yet implemented): muted + dashed, never shown as a real earned unlock. */
.fd-meta__ladder-row.is-tbd { opacity: var(--opacity-soft); background: var(--color-panel); border-style: dashed; }
.fd-meta__ladder-row.is-tbd .fd-meta__ladder-label { font-style: italic; }
.fd-meta__ladder-star { font-family: var(--font-mono); letter-spacing: var(--tracking-mono-wide); }
.fd-meta__ladder-label { font-family: var(--font-body); }
.fd-meta__ladder-mark { font-family: var(--font-display); text-align: center; }

/* Progress bar */
.fd-progress { height: 16px; border: var(--border-width-nested) solid var(--color-ink); background: var(--color-panel); margin: var(--space-sm) 0; }
.fd-progress__fill { height: 100%; background: var(--color-accent-blue); transition: width var(--motion-snap); }

/* Nation + pack boards. Grid + stretch so locked tiles (which carry a variable-length unlock note)
   stay the same height as unlocked ones — no ragged board (T19 unlocks QA). */
.fd-meta__nations { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-md); align-items: stretch; }
.fd-meta__nations-scroll { max-height: 58vh; overflow-y: auto; }
.fd-meta__nations .fd-nationtile { height: 100%; justify-content: flex-start; }
/* Push the unlock note / info button to the bottom so every card's flag + name + OVR align. */
.fd-meta__nations .fd-nationtile__lock,
.fd-meta__nations .fd-nationtile__info { margin-top: auto; }
.fd-meta__packs { display: flex; flex-direction: column; gap: var(--space-md); }
.fd-meta__pack-nation { display: flex; flex-direction: column; gap: var(--space-xs); }

/* Achievements */
.fd-meta__achievements { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); }
.fd-ach { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm);
    border: var(--border-width-micro) solid var(--color-ink); background: var(--color-panel); }
.fd-ach.is-earned { background: var(--color-success); }
.fd-ach.is-locked { opacity: var(--opacity-disabled); }
/* FD-004: lift the most-attainable locked badges out of the dim wall so there's a clear "next" to chase. */
.fd-ach.is-next { opacity: 1; border-width: var(--border-width); border-color: var(--color-accent-blue); box-shadow: var(--shadow-hard-sm); }
.fd-ach__head { display: flex; align-items: center; gap: var(--space-sm); }
.fd-ach__name { font-family: var(--font-display); text-transform: uppercase; }
.fd-ach__cond { font-family: var(--font-body); font-size: var(--fs-body); }
.fd-ach__reward { }

/* Lifetime stats */
.fd-meta__stat { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-md);
    padding: var(--space-xs) 0; border-bottom: var(--border-width-micro) solid var(--color-ink); }
.fd-meta__stat-label { font-family: var(--font-body); min-width: 0; }
/* Composite numeric values (e.g. "0 / 0 / 0") must never wrap or split across lines, even when a
   translated label is long (PT "Vitórias / Empates / Derrotas"). The label wraps; the value stays whole. */
.fd-meta__stat-value { font-family: var(--font-mono); letter-spacing: var(--tracking-mono-wide);
    flex: none; white-space: nowrap; text-align: right; }
.fd-meta__table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-micro); }
.fd-meta__table th, .fd-meta__table td { border: var(--border-width-micro) solid var(--color-ink); padding: var(--space-xs) var(--space-sm); text-align: left; }
.fd-meta__table th { font-family: var(--font-display); text-transform: uppercase; }

/* Run-end earnings panel */
.fd-earnings { display: flex; flex-direction: column; gap: var(--space-sm); align-items: center;
    padding: var(--space-md); border: var(--border-width) solid var(--color-ink); background: var(--color-panel); color: var(--color-ink); box-shadow: var(--shadow-hard); }
.fd-earnings__row { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }

@media (max-width: 768px) {
    .fd-meta { padding: var(--space-md); }
    .fd-meta__grid { grid-template-columns: 1fr; }
}

/* ---- TOURNAMENT (all groups + bracket) ----------------------------------- */
.fd-tourney { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg); overflow-x: clip; }
.fd-tourney__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); flex-wrap: wrap; }
.fd-tourney__title {
    font-family: var(--font-title);
    font-size: var(--text-title);
    letter-spacing: var(--tracking-display-tight);
}
/* Codes & Anchor status + legend row (FD-004: say what state the field is in). */
.fd-tourney__status {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}
.fd-tourney__status-line {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    min-width: 0;
}
.fd-tourney__legend {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    white-space: nowrap;
}
.fd-tourney__legend-swatch {
    width: 10px;
    height: 10px;
    border: var(--border-width-micro) solid var(--color-ink);
    display: inline-block;
}
.fd-tourney__legend-swatch--advance { background: var(--color-success); }
.fd-tourney__legend-swatch--third { background: var(--color-accent-yellow); }

/* The wall: 4-across group tiles; YOUR group is the anchor with the gold-under-ink ring. */
.fd-tourney__groups {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    padding: 4px; /* room for the anchor ring */
}
.fd-tourney__groups > * { min-width: 0; }
.fd-tourney__group.is-you > .fd-panel {
    box-shadow: var(--shadow-hard-sm), 0 0 0 var(--border-width) var(--color-accent-yellow);
}
@media (max-width: 1280px) {
    .fd-tourney__groups { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .fd-tourney__groups { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .fd-tourney__groups { grid-template-columns: 1fr; }
}
/* Phone: the tab strip (RESULTS · STANDINGS · BRACKET · …) is wider than 360px and
   the .fd-tourney overflow-x:clip would just cut the last tab off. Let the strip
   scroll horizontally on its own instead — the same pattern the bracket uses. */
@media (max-width: 768px) {
    .fd-tourney__bar .fd-seg { max-width: 100%; overflow-x: auto; }
}

/* The bracket scrolls horizontally inside its own container — the page never does. */
.fd-bracket { display: flex; gap: var(--space-md); overflow-x: auto; padding-bottom: var(--space-md); }
.fd-bracket__round {
    display: flex;
    flex-direction: column;
    min-width: 168px;
}
/* Round header as an ink bar — the same header grammar as the standings/stats sections. */
.fd-bracket__roundhead {
    flex: 0 0 auto;
    background: var(--color-ink);
    color: var(--color-bg);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    padding: 5px var(--space-sm);
    margin-bottom: var(--space-sm);
}
/* Each tie is a flex:1 SLOT taking exactly 1/N of the equal-height column, with its compact box
   centred inside. That makes a feeding pair's mid-line land exactly on the next round's tie centre,
   so the connector elbows below resolve in pure CSS (no measurement). */
.fd-bracket__tie {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fd-bracket__tiebox {
    display: flex;
    flex-direction: column;
    width: 100%;
    border: var(--border-width-nested) solid var(--color-ink);
    background: var(--color-panel);
    box-shadow: var(--shadow-hard-xs);
}
/* Your tie anchors the bracket — the gold-under-ink ring shared with the standings wall. */
.fd-bracket__tiebox.is-you { box-shadow: 0 0 0 3px var(--color-accent-yellow), var(--shadow-hard-sm); }

/* Connector lines — winners flow left → right. The roundhead is a <span>, so :nth-of-type counts
   only the tie <div>s: odd = top-of-pair (elbow drops to the pair mid-line), even = bottom-of-pair
   (elbow rises to it). The half-gap stubs from adjacent rounds meet at the mid-gap spine. */
.fd-bracket__round:not(:last-child) .fd-bracket__tie:nth-of-type(odd)::after,
.fd-bracket__round:not(:last-child) .fd-bracket__tie:nth-of-type(even)::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--space-md) / 2);
    width: calc(var(--space-md) / 2);
    height: 50%;
    border-right: var(--border-width-micro) solid var(--color-ink);
}
.fd-bracket__round:not(:last-child) .fd-bracket__tie:nth-of-type(odd)::after {
    top: 50%;
    border-top: var(--border-width-micro) solid var(--color-ink);
}
.fd-bracket__round:not(:last-child) .fd-bracket__tie:nth-of-type(even)::after {
    bottom: 50%;
    border-bottom: var(--border-width-micro) solid var(--color-ink);
}
/* Incoming feed — every round but the first receives a stub from the previous round's spine. */
.fd-bracket__round:not(:first-child) .fd-bracket__tie::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--space-md) / 2);
    width: calc(var(--space-md) / 2);
    border-top: var(--border-width-micro) solid var(--color-ink);
}
.fd-bracket__side {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-display);
    font-size: var(--text-micro);
    text-transform: uppercase;
}
.fd-bracket__side + .fd-bracket__side { border-top: var(--border-width-micro) solid var(--color-ink); }
.fd-bracket__side.is-you { background: var(--color-accent-yellow); color: var(--ink-fixed); }
.fd-bracket__side.is-win { background: var(--color-success); color: var(--ink-fixed); }
.fd-bracket__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-bracket__tbd { opacity: var(--opacity-muted); font-family: var(--font-mono); }
.fd-bracket__sidebtn {
    display: flex; align-items: center; gap: var(--space-xs);
    width: 100%; min-width: 0; padding: 0;
    background: none; border: 0; color: inherit; font: inherit; cursor: pointer; text-align: left;
}

/* Tap the [i] strip on a decided tie to open its full match detail in a modal (FD batch T8). */
.fd-bracket__tieinfo {
    width: 100%; padding: 2px 0;
    border: 0; border-top: var(--border-width-micro) solid var(--color-ink);
    background: var(--color-bg);
    font-family: var(--font-mono); font-size: var(--text-micro); line-height: 1; cursor: pointer;
}
.fd-bracket__modaldetail { display: flex; flex-direction: column; gap: var(--space-md); }

/* FD batch T7: the tie modal's shootout ledger — kick order, ✓/✗ outcome, running score. */
.fd-bracket__penshead {
    margin: 0;
    font-family: var(--font-mono); font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono-wide); text-transform: uppercase;
}
.fd-bracket__penlist {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
    font-family: var(--font-mono); font-size: var(--text-ui);
}
.fd-bracket__pen { display: flex; gap: var(--space-sm); align-items: baseline; min-width: 0; }
.fd-bracket__pen.is-miss { opacity: var(--opacity-muted); }
.fd-bracket__penmark { flex: 0 0 auto; }
.fd-bracket__penscore { margin-left: auto; flex: 0 0 auto; }

/* FD batch T9: the per-match TIMELINE ledger — every goal / card / sub / injury, minute-ordered. */
.fd-timeline { margin-top: var(--space-sm); }
.fd-timeline__head {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-mono); font-size: var(--fs-mono);
    letter-spacing: var(--tracking-mono-wide); text-transform: uppercase;
}
.fd-timeline__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
    font-family: var(--font-mono); font-size: var(--text-ui);
}
.fd-timeline__row { display: flex; gap: var(--space-sm); align-items: baseline; min-width: 0; }
.fd-timeline__row.is-away { opacity: var(--opacity-strong); }
.fd-timeline__min { flex: 0 0 3ch; text-align: right; }
.fd-timeline__mark { flex: 0 0 auto; }
.fd-timeline__mark.is-yellow { color: var(--color-accent-yellow); }
.fd-timeline__mark.is-red { color: var(--color-accent-red); }
.fd-timeline__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tap a nation in a standings row to open its team-view (plain text until then). */
.fd-grouptable__nationbtn {
    background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer;
    text-align: left; text-decoration: underline dotted; text-underline-offset: 2px;
    /* FD-014: keep the drill-in name on one line so it ellipsis-clips with its cell. */
    max-width: 100%; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ===================================================================== */
/* T20 — Tournament Center: results / match stats / leaderboards / team-view */
/* ===================================================================== */

.fd-tourney__stats { display: flex; flex-direction: column; gap: var(--space-lg); }
.fd-tourney__boards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-md);
}
.fd-tourney__boards > * { min-width: 0; }

/* --- Result rows (one per other match) --- */
/* Final-decisions grammar (matches the standings wall): framed panel rows with hard shadows,
   an ink score box, and the gold-under-ink ring anchoring YOUR match. */
.fd-results { display: flex; flex-direction: column; gap: var(--space-md); max-width: 860px; width: 100%; margin-inline: auto; }
/* FD: label above the player's own match in the results list. */
.fd-results__you { color: var(--color-accent-blue-text); margin-bottom: calc(-1 * var(--space-xs)); }
.fd-result {
    border: var(--border-width-nested) solid var(--color-ink);
    background: var(--color-panel);
    box-shadow: var(--shadow-hard-xs);
    padding: var(--space-sm) var(--space-md);
}
.fd-result.is-open { box-shadow: var(--shadow-hard-sm); }
/* The player's own fixture anchors the list — the same gold-under-ink ring as the standings wall. */
.fd-results__you + .fd-result {
    box-shadow: 0 0 0 3px var(--color-accent-yellow), var(--shadow-hard-sm);
}
.fd-result__line { display: flex; align-items: center; gap: var(--space-sm); }
.fd-result__team {
    display: flex; align-items: center; gap: var(--space-sm);
    flex: 1 1 0; min-width: 0;
    background: none; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.fd-result__team:hover .fd-result__name { text-decoration: underline; text-underline-offset: 3px; }
.fd-result__team.is-away { justify-content: flex-end; }
.fd-result__name {
    font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-ui);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* The score reads as a scorebug cell: ink box, display digits. */
.fd-result__score {
    flex: 0 0 auto; padding: 3px 12px;
    background: var(--color-ink); color: var(--color-bg);
    font-family: var(--font-display); font-size: var(--text-ui);
}
.fd-result__info {
    flex: 0 0 auto; width: 28px; height: 28px;
    border: var(--border-width-micro) solid var(--color-ink); background: var(--color-panel-alt);
    color: var(--color-ink);
    font-family: var(--font-mono); font-size: var(--text-ui); line-height: 1; cursor: pointer;
    transition: transform var(--motion-snap);
}
.fd-result__info:hover { transform: translate(-1px, -1px); box-shadow: var(--shadow-hard-xs); }
.fd-result__pens {
    margin-top: var(--space-xs);
    font-family: var(--font-mono); font-size: var(--text-micro); opacity: var(--opacity-muted);
    text-align: center; text-transform: uppercase; letter-spacing: var(--tracking-mono-wide);
}
.fd-result__scorers {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);
    margin-top: var(--space-xs); font-family: var(--font-mono); font-size: var(--text-micro);
}
.fd-result__scorers-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fd-result__scorers-side.is-away { text-align: right; }
.fd-result__chip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Full match stat sheet (expanded inside a result row, or a team-view) --- */
.fd-mstats {
    display: flex; flex-direction: column; gap: var(--space-sm);
    margin-top: var(--space-sm); padding-top: var(--space-sm);
    border-top: var(--border-width-micro) solid var(--color-ink);
}
.fd-mstats__goals { display: flex; flex-direction: column; gap: 2px; }
.fd-mstats__goal {
    display: flex; align-items: baseline; gap: var(--space-xs);
    font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-micro);
}
.fd-mstats__goal.is-away { flex-direction: row-reverse; text-align: right; }
.fd-mstats__min { font-family: var(--font-mono); opacity: var(--opacity-muted); }
.fd-mstats__pen { color: var(--color-accent-red-text); }
.fd-mstats__assist { opacity: var(--opacity-muted); }
.fd-mstats__bars { display: flex; flex-direction: column; gap: var(--space-xs); }
.fd-statbar {
    display: grid; grid-template-columns: 3ch 1fr 3ch; align-items: center;
    gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--text-micro);
}
.fd-statbar__val { white-space: nowrap; }
.fd-statbar__val:last-of-type { text-align: right; }
.fd-statbar__track {
    display: flex; height: 12px; border: var(--border-width-micro) solid var(--color-ink); overflow: hidden;
}
.fd-statbar__fill { height: 100%; }
.fd-statbar__fill.is-home { background: var(--color-accent-blue); }
.fd-statbar__fill.is-away { background: var(--color-accent-yellow); }
.fd-statbar__label {
    grid-column: 1 / -1; text-align: center; opacity: var(--opacity-muted);
    letter-spacing: var(--tracking-mono-wide);
}
.fd-mstats__cards { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.fd-mstats__card {
    display: inline-flex; align-items: baseline; gap: var(--space-xs);
    padding: 2px var(--space-xs); border: var(--border-width-micro) solid var(--color-ink);
    font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-micro);
}
.fd-mstats__card.is-yellow { background: var(--color-accent-yellow); color: var(--ink-fixed); }
.fd-mstats__card.is-red { background: var(--color-accent-red-surface); color: #fff; }
.fd-mstats__card.is-injury { background: var(--color-panel-alt); }

/* --- Player ratings (0–10, home left / away right; top-rated per side is the man of the match) --- */
.fd-mstats__ratings { display: flex; flex-direction: column; gap: var(--space-xs); }
.fd-mstats__ratings-title {
    margin: 0; font-family: var(--font-display); text-transform: uppercase;
    font-size: var(--text-micro); letter-spacing: var(--tracking-mono-wide); opacity: var(--opacity-muted);
}
.fd-mstats__ratings-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.fd-mstats__ratingcol { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fd-mstats__rating {
    display: flex; align-items: baseline; gap: var(--space-xs); min-width: 0; font-size: var(--text-micro);
}
.fd-mstats__ratingcol.is-away .fd-mstats__rating { flex-direction: row-reverse; }
.fd-mstats__rname {
    flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-display); text-transform: uppercase;
}
.fd-mstats__rmarks { font-family: var(--font-mono); opacity: var(--opacity-muted); white-space: nowrap; }
.fd-mstats__rassist { margin-left: 2px; }
.fd-mstats__rval {
    font-family: var(--font-mono); font-weight: 700; padding: 0 var(--space-xs); min-width: 3.5ch; text-align: center;
    border: var(--border-width-micro) solid var(--color-ink);
}
.fd-mstats__rval.is-hot { background: var(--color-macro-mid); color: var(--ink-fixed); }
.fd-mstats__rval.is-ok { background: var(--color-panel-alt); }
.fd-mstats__rval.is-cold { background: var(--color-accent-red-surface); color: #fff; }
.fd-mstats__rating.is-motm .fd-mstats__rname { font-weight: 700; }
.fd-mstats__rating.is-motm .fd-mstats__rname::after { content: " ★"; }

/* --- Team of the tournament: best XI by average rating, on the landscape 4-3-3 pitch (GK left → attack
   right), reusing the squad/subs field metrics so it reads like a team sheet. --- */
.fd-tott { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.fd-tott__title {
    margin: 0; font-family: var(--font-display); text-transform: uppercase;
    font-size: var(--text-section); letter-spacing: var(--tracking-mono-wide);
}
/* Best XI as a ranked list (GK → attack), one row per player, honours badged on the right. */
.fd-tott__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.fd-tott__row {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-xs); background: var(--color-panel);
    border: var(--border-width-micro) solid var(--color-ink);
}
.fd-tott__rating {
    flex: 0 0 auto;
    font-family: var(--font-mono); font-weight: 700; font-size: var(--text-ui);
    padding: 0 var(--space-xs); min-width: 3.5ch; text-align: center;
    border: var(--border-width-micro) solid var(--color-ink);
}
.fd-tott__rating.is-hot { background: var(--color-macro-mid); color: var(--ink-fixed); }
.fd-tott__rating.is-ok { background: var(--color-panel-alt); }
.fd-tott__rating.is-cold { background: var(--color-accent-red-surface); color: #fff; }
.fd-tott__pos {
    flex: 0 0 auto; min-width: 3.5ch; text-align: center;
    font-family: var(--font-mono); font-weight: 700; font-size: var(--text-micro);
    padding: 0 var(--space-xs); color: var(--ink-fixed);
    background: var(--macro); border: var(--border-width-micro) solid var(--color-ink);
}
.fd-tott__name {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-ui);
}
.fd-tott__nation { flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--text-micro); opacity: var(--opacity-muted); }
.fd-tott__badges { flex: 0 0 auto; display: inline-flex; gap: var(--space-xs); }
.fd-tott__badge {
    display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem;
    border: var(--border-width-micro) solid var(--color-ink); color: var(--ink-fixed);
}
.fd-tott__badge--motm  { background: var(--color-accent-yellow); }
.fd-tott__badge--boot  { background: var(--color-macro-ata); }
.fd-tott__badge--assist { background: var(--color-macro-mid); }
.fd-tott__badge--champ { background: var(--color-accent-yellow); }

/* Golden boot + top assist cards under the tournament XI (end-of-run summary). */
.fd-awards { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: center; }
.fd-awards__card {
    display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px var(--space-sm);
    min-width: 14rem; padding: var(--space-sm); background: var(--color-panel);
    border: var(--border-width-micro) solid var(--color-ink); box-shadow: var(--shadow-hard-sm);
}
.fd-awards__label {
    grid-column: 1 / -1; font-family: var(--font-display); text-transform: uppercase;
    font-size: var(--text-micro); letter-spacing: var(--tracking-mono-wide); opacity: var(--opacity-muted);
}
.fd-awards__player { font-family: var(--font-display); text-transform: uppercase; min-width: 0; }
.fd-awards__nation { grid-column: 1; font-family: var(--font-mono); font-size: var(--text-micro); opacity: var(--opacity-muted); }
.fd-awards__value {
    grid-row: 2 / 4; grid-column: 2; align-self: center;
    font-family: var(--font-mono); font-weight: 700; font-size: var(--text-section); color: var(--color-ink);
}

/* --- Leaderboards (golden boot / assists / cards) --- */
/* table-layout:fixed so a long player name actually ellipsis-clips instead of overflowing into the
   nation column (auto layout sizes columns to content and ignores the cell's overflow:hidden). */
.fd-leaderboard { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: var(--font-mono); font-size: var(--text-micro); }
.fd-leaderboard td { padding: var(--space-xs); border-bottom: var(--border-width-micro) solid var(--color-panel-alt); }
.fd-leaderboard tr:last-child td { border-bottom: 0; }
/* The leader anchors the board (standings-wall grammar: gold cell, weight 800). */
.fd-leaderboard tr:first-child td { font-weight: 800; }
.fd-leaderboard tr:first-child .fd-leaderboard__rank { background: var(--color-accent-yellow); color: var(--ink-fixed); opacity: 1; }
.fd-leaderboard__rank { width: 3ch; opacity: var(--opacity-muted); text-align: center; font-family: var(--font-display); }
.fd-leaderboard__mark { width: 28px; }
.fd-leaderboard__player {
    font-family: var(--font-display); text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;   /* takes the remaining width */
}
.fd-leaderboard__nation {
    width: 10ch; opacity: var(--opacity-muted); text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right;
}
/* Wide enough for the cards board's "2Y · 1R" pairs — 4ch clipped them to "2Y ·". */
.fd-leaderboard__value { width: 8ch; text-align: right; font-weight: 700; white-space: nowrap; }

/* --- Player team season table --- */
.fd-season { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--text-micro); }
.fd-season th, .fd-season td { padding: var(--space-xs); text-align: center; }
/* Header row shares the grouptable grammar: heavy ink rule under mono-wide headings. */
.fd-season thead th {
    border-bottom: var(--border-width-nested) solid var(--color-ink);
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
}
.fd-season tbody tr { border-bottom: var(--border-width-micro) solid var(--color-panel-alt); }
.fd-season tbody tr:last-child { border-bottom: 0; }
.fd-season__player {
    width: 99%; text-align: left !important;
    font-family: var(--font-display); text-transform: uppercase;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fd-season__hi { font-weight: 700; }

/* --- Team-view (read-only squad for any nation) --- */
.fd-teamview { display: flex; flex-direction: column; gap: var(--space-lg); }
.fd-teamview__bar { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.fd-teamview__title { font-family: var(--font-title); font-size: var(--text-section); }
.fd-teamview__grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-md);
}
.fd-teamview__grid > * { min-width: 0; }
/* The drill-in pitch caps at the canonical 470px column width whatever the panel's span. */
.fd-teamview .fd-squad__pitch--vertical { max-width: 470px; margin-inline: auto; }
.fd-teamstats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.fd-teamstats__record { font-family: var(--font-mono); font-size: var(--text-ui); }
.fd-teamstats__tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.fd-teamstats__scorers {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-sm);
    margin-top: var(--space-sm); padding-top: var(--space-sm);
    border-top: var(--border-width-micro) solid var(--color-ink);
}
.fd-teamstats__scorer { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-micro); }

/* ==========================================================================
   Game Feel Wave 2 (GF-01/02/10/13/23/30/31) — per-screen additions.
   ========================================================================== */

/* FD: fixed two-slot message area — stakes + chance each own a reserved line, so a strip
   appearing/fading never shifts the PAUSE/SKIP/speed controls below it. */
.fd-match__strips { display: flex; flex-direction: column; }
.fd-match__strips-slot { min-height: 26px; display: flex; align-items: center; justify-content: center; }

/* GF-13: the live fate line under the scoreboard — mono, color flips with qualification state.
   Own-color-only (no background), so no own-bg-own-fg pairing is needed. */
.fd-match__stakes {
    max-width: 880px; width: 100%; margin-inline: auto;
    text-align: center;
    font-family: var(--font-mono); font-size: var(--text-ui); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
}
.fd-match__stakes.is-good { color: var(--color-success); }
.fd-match__stakes.is-bad  { color: var(--color-accent-red-text); }

/* GF-10: the transient chance strip — a near-miss pulses here for a breath and self-fades.
   Never a ticker row; aria-hidden (the ticker stays the SR record). */
.fd-match__chance {
    max-width: 880px; width: 100%; margin-inline: auto;
    text-align: center;
    font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-ui);
}
.fd-match__chance.is-you { color: var(--color-success); }
.fd-match__chance.is-opp { color: var(--color-accent-red-text); }

/* GF-03 (via GF-01): the half-time modal hosts the NAT edge-flash overlay once its die lands a roll. */
.fd-match__ht { position: relative; }

/* GF-02: the tactic chip + mono math line between the natural face and the final face. */
.fd-prematch__mod { display: flex; flex-direction: column; align-items: center; gap: var(--space-xs); }
.fd-prematch__mod-math { font-family: var(--font-mono); font-size: var(--text-ui); font-weight: 700; }

/* GF-23: old → new delta lines under the path stamp; green up, red down (color-only, no own bg). */
.fd-path__deltas { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.fd-path__delta { font-family: var(--font-mono); font-size: var(--text-ui); font-weight: 700; }
.fd-path__delta.is-up   { color: var(--color-success); }
.fd-path__delta.is-down { color: var(--color-accent-red-text); }

/* --- Chapter interstitial (GF-30/GF-31) — full-screen one-shot chapter beats. Fixed dark takeover
   like the shootout: must NOT invert in dark theme, so ink/paper-fixed own both bg and fg. */
.fd-chapter {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    background: var(--ink-fixed);
    color: var(--paper-fixed);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
}
.fd-chapter__panel {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-lg);
    max-width: min(640px, 100%);
    text-align: center;
}
.fd-chapter__kicker {
    font-family: var(--font-mono); font-size: var(--text-ui); font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    opacity: var(--opacity-muted);
}
.fd-chapter__title {
    font-family: var(--font-title);
    font-size: var(--text-title);
    text-transform: uppercase;
    letter-spacing: var(--tracking-display-tight);
    margin: 0;
}
.fd-chapter__fixture { display: flex; align-items: center; gap: var(--space-lg); flex-wrap: wrap; justify-content: center; }
.fd-chapter__team { font-family: var(--font-display); text-transform: uppercase; font-size: var(--text-section); }
.fd-chapter__score { font-family: var(--font-title); font-size: var(--text-title); }
.fd-chapter__vs { font-family: var(--font-mono); font-weight: 700; opacity: var(--opacity-muted); }
/* The group table rides on a light panel inside the dark takeover — the Panel brings its own bg/fg. */
.fd-chapter__table { width: 100%; color: var(--color-ink); }

/* ==========================================================================
   Game Feel Wave 3 (GF-33/34) — end-screen additions.
   ========================================================================== */

/* GF-34: the cause-of-death line — mono, muted, grounded in the fatal match's numbers. */
.fd-end__cause {
    font-family: var(--font-mono);
    font-size: var(--text-ui);
    text-transform: uppercase;
    opacity: var(--opacity-muted);
}

/* GF-33: earnings tags stagger in one by one; the next-unlock pull closes the panel. */
.fd-earnings__item { display: inline-block; }
.fd-earnings__next {
    font-family: var(--font-mono);
    font-size: var(--text-ui);
    text-transform: uppercase;
    margin-top: var(--space-sm);
}

/* ---------------------------------------------------------------------------
   DEVELOPER MODE — the /dev console + in-run overlay panel. Development builds
   only (gated in the components); English only, mirrors /gallery. Uses tokens
   only — no hardcoded colours.
   --------------------------------------------------------------------------- */
.fd-devpage { padding: var(--space-lg); max-width: 1100px; margin: 0 auto; }
.fd-devpage__bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-md); flex-wrap: wrap; margin-bottom: var(--space-sm);
}
.fd-devpage__bar h1 { font-family: var(--font-display); }

/* Fields shared by the panel. */
.fd-dev__num { width: 6rem; }
.fd-dev__range { flex: 1; min-width: 8rem; }
.fd-dev__sel { min-width: 8rem; }
.fd-dev__num, .fd-dev__sel {
    font-family: var(--font-mono);
    border: var(--border-width-nested) solid var(--color-ink);
    background: var(--color-panel);
    color: var(--color-ink);
    padding: var(--space-xs) var(--space-sm);
}

/* Dense wrap grids for the toggle lists (achievements, titles/cosmetics). */
.fd-dev__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-xs) var(--space-md);
}

/* Nation list — scrollable, one unlock toggle + three level buttons per row. */
.fd-dev__nations {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-sm) var(--space-md);
    max-height: 320px;
    overflow-y: auto;
    padding-right: var(--space-xs);
}
/* Stacked so the three level buttons (with their hard shadows) get a full-width row and never overlap
   the unlock toggle or each other. */
.fd-dev__nation {
    display: flex; flex-direction: column;
    gap: var(--space-xs); min-width: 0;
    padding-bottom: var(--space-xs);
}

/* Dev data tables (player editor, balance knobs, match-lab ladder). Scroll inside the wrap so the
   page never scrolls horizontally; edited rows get the yellow flag. */
.fd-dev__tablewrap { overflow-x: auto; max-height: 65vh; overflow-y: auto; min-width: 0; }
.fd-dev__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: var(--text-ui);
}
.fd-dev__table th {
    position: sticky; top: 0;
    background: var(--color-ink);
    color: var(--color-bg);
    text-align: left;
    padding: var(--space-xs) var(--space-sm);
}
.fd-dev__table td {
    border-bottom: var(--border-width-nested) solid var(--color-ink);
    padding: var(--space-xs) var(--space-sm);
    vertical-align: top;
}
.fd-dev__row--edited td { background: var(--color-accent-yellow); color: var(--color-ink); }
/* Marked for deletion on save — reads as danger, name struck through. */
.fd-dev__row--doomed td { background: var(--color-accent-red-surface); color: var(--color-on-dark); text-decoration: line-through; }
/* The expanded per-row editor (name / primary line / position chips / delete). */
.fd-dev__editrow td {
    background: var(--color-panel);
    border-left: var(--border-width-nested) solid var(--color-accent-blue);
    padding: var(--space-sm) var(--space-md);
}
/* Sort buttons live inside the sticky ink header — inherit its colors, read as plain header text. */
.fd-dev__sort {
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    padding: 0;
    cursor: pointer;
    white-space: nowrap;
}
.fd-dev__dim { opacity: 0.6; font-size: 0.85em; }
.fd-dev__desc { font-family: var(--font-body); opacity: 0.8; max-width: 46ch; }
.fd-dev__error { color: var(--color-accent-red-text); }
.fd-dev__search { width: 12rem; }
.fd-dev__num--ovr { width: 4.5rem; }

/* Match-lab W/D/L bar: win green, draw yellow, loss red (STATUS/OUTCOME token roles). */
.fd-dev__bar {
    display: flex;
    height: 20px;
    border: var(--border-width-nested) solid var(--color-ink);
    background: var(--color-panel);
    min-width: 0;
}
.fd-dev__bar--slim { height: 12px; min-width: 120px; }
.fd-dev__bar-w { background: var(--color-success); }
.fd-dev__bar-d { background: var(--color-accent-yellow); }
.fd-dev__bar-l { background: var(--color-accent-red); }
.fd-dev__cellbar { min-width: 130px; }
.fd-dev__scorelines {
    display: flex; flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
    font-family: var(--font-mono);
}
.fd-dev__scoreline { white-space: nowrap; }

/* The in-run floating DEV toggle — sits above everything, out of the way bottom-left. */
.fd-devfab {
    position: fixed;
    left: var(--space-md);
    bottom: var(--space-md);
    z-index: var(--z-debug);
    font-family: var(--font-display);
    font-size: var(--text-ui);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-accent-yellow);
    color: var(--color-ink);
    border: var(--border);
    box-shadow: var(--shadow-hard-sm);
    cursor: pointer;
}
.fd-devfab:hover { transform: translate(-1px, -1px); }

/* ---------------------------------------------------------------------------
   BONUS DRAFT (Team Tiers, two-step): Step 1 picks candidates per rarity band,
   Step 2 substitutes each into the squad.
   --------------------------------------------------------------------------- */
.fd-bonus-screen { display: flex; flex-direction: column; gap: var(--space-md); }
.fd-bonus-screen__band { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-md); }
.fd-bonus-screen__cards { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.fd-bonus-screen__incoming { display: flex; justify-content: center; margin-bottom: var(--space-md); }
.fd-bonus-screen__prompt { font-family: var(--font-display); text-transform: uppercase; margin: var(--space-md) 0 var(--space-sm); }
.fd-bonus-screen__roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-sm); }
.fd-bonus-screen__row {
    display: flex; align-items: center; gap: var(--space-sm);
    padding: var(--space-sm); text-align: left; min-width: 0;
    border: var(--border-width-nested) solid var(--color-ink);
    background: var(--color-panel); color: var(--color-ink);
    box-shadow: var(--shadow-hard-sm); cursor: pointer;
    transition: transform var(--motion-snap);
}
.fd-bonus-screen__row:hover { transform: translate(-1px, -1px); }
.fd-bonus-screen__row.is-xi { border-color: var(--color-accent-yellow); }
.fd-bonus-screen__name { flex: 1 1 auto; min-width: 0; }
.fd-bonus-screen__ovr { font-family: var(--font-mono); font-weight: 700; }

/* ============================================================================
   MOBILE crafting tier (≤768px, floor 360px) — desktop is untouched; every rule
   below lives inside a max-width block. The full-bleed run screens set their own
   28–40px side gutters (the .app-main step-down doesn't reach them); on a phone
   that 80px of dead side padding is the "boxes too big" complaint. Pull the wide
   horizontal gutters back to one space step so content gets the width it needs.
   ============================================================================ */
@media (max-width: 768px) {
    /* Full-bleed screen bodies — collapse the 28–40px side gutters to --space-md. */
    .fd-start__topbar,
    .fd-start__notices { padding-inline: var(--space-md); }
    .fd-start__main { padding: var(--space-md); }
    .fd-hub__road-strip,
    .fd-path__road { padding-inline: var(--space-md); }
    .fd-hub__body { padding: var(--space-md); }
    .fd-draw__body { padding: var(--space-md); }
    .fd-match__body { padding: 0 var(--space-md) var(--space-md); }

    /* The board wordmark is a desktop 36px display glyph — trim so the topbar
       doesn't dominate the phone's first fold. */
    .fd-start__wordmark--bar { font-size: 28px; }
}
@media (max-width: 480px) {
    /* Smallest phones — squeeze the side gutters once more. */
    .fd-start__topbar,
    .fd-start__notices,
    .fd-start__main,
    .fd-hub__road-strip,
    .fd-hub__body,
    .fd-path__road,
    .fd-draw__body { padding-inline: var(--space-sm); }
    .fd-match__body { padding-inline: var(--space-sm); }
}

/* ============================================================================
   MOBILE PORTRAIT REWORK (scale-only)
   The viewport-freeze (App.razor) renders every screen at the desktop width (1440)
   and lets the browser scale it down to the phone, so width media queries can't see
   "mobile" here. But the frozen viewport keeps the DEVICE's orientation, so
   (orientation: portrait) targets a portrait phone/tablet while a landscape desktop
   (also >= 1025 wide) keeps the desktop layout untouched. Each block stacks a desktop
   horizontal layout into a portrait-natural vertical one showing the SAME content the
   desktop shows (nothing hidden) — desktop is the gold standard. Kept at the end of the
   file so these win the cascade over each screen's base + max-width rules (equal
   specificity, later source order). To leave a screen as the plain scaled-desktop
   version, omit it here. Modal/tour rules live at the end of components.css.
   ============================================================================ */
@media (min-width: 1025px) and (orientation: portrait) {

    /* MODE SELECT — the two posters stack vertically and widen, so each is a full-width
       tap target instead of a side-by-side desktop pair. mirrors .fd-modeselect__cards. */
    .fd-modeselect__cards { grid-template-columns: minmax(320px, 720px); }
    .fd-modeselect__art { height: 200px; }

    /* START — 01 · 02 setup rail on top, THE BOARD filling the rest (list scrolls
       internally); dock + CTA stay in one viewport, brand/wishlist banner below the fold. */
    .fd-start__main { flex-direction: column; }
    .fd-start__rail { flex: 0 0 auto; max-height: 48svh; }
    .fd-start__board { flex: 1 1 auto; min-height: 0; }
    /* Resume gate (a run was found on boot) — the sparse hero + resume card top-anchored;
       center it in the frame. mirrors .fd-start--gate scaffold (.fd-start, screens.css:16). */
    .fd-start--gate { min-height: calc(100svh - 2 * var(--space-xl)); justify-content: center; }

    /* DRAFT — one column, rows: board (top) · pitch/formation (grows, centered) · action rail
       (pinned bottom). Enlarge the field, the offer/pick cards and the formation cards so they
       use the phone instead of rendering tiny in the scaled-down desktop. */
    .fd-draft__layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
    .fd-draft__center { align-self: stretch; justify-content: center; }
    .fd-draft__pitch { width: min(980px, 96%); aspect-ratio: 47 / 62; } /* taller field: from 470px, 47/52 */
    .fd-draft__shape-panel { max-width: none; }
    .fd-draft-screen__offer .fd-draft { width: 420px; }          /* pick cards: from 220px */
    .fd-formation-card { width: min(360px, 30%); }               /* formation cards: from 180px */
    /* Review — STARTING XI above BENCH (one column) instead of two cramped side-by-side. */
    .fd-review { grid-template-columns: 1fr; }
    /* The review + no-draft states are natural-height columns with no grid of their own —
       grow + center so the squad review fills the frame instead of pinning to the top.
       mirrors .fd-draft__review / .fd-draft__nodraft (screens.css:1487, 1505). */
    .fd-draft__review,
    .fd-draft__nodraft { flex: 1 1 auto; min-height: 0; justify-content: safe center; }

    /* DRAW — player group (seed card + continue) pinned at the top, the 8-group wall grows to
       fill the space below it (kept 2-up). Scale each group box up (header + rows bigger).
       align-items:stretch overrides the base flex-start: in a flex COLUMN that lets the wall (and
       thus the 2×1fr grid) span the full width, so the group boxes fill it instead of hugging the
       left. mirrors .fd-draw__body (screens.css:1523). */
    .fd-draw__body { flex-direction: column; align-items: stretch; }
    .fd-draw__left { width: 100%; flex: 0 0 auto; }
    .fd-draw__wall { flex: 1 1 auto; min-height: 0; }
    .fd-draw__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
    .fd-draw__tile-head { padding: 12px 16px; }
    .fd-draw__tile-letter { font-size: 24px; }
    .fd-draw__tile-avg { font-size: 15px; }
    .fd-draw__tile-rank { font-size: 16px; padding: 3px 10px; }
    .fd-draw__tile-row { font-size: 20px; padding: 10px 16px; }
    /* Thin-patch / no-tournament: THE BOARD wall isn't emitted (DrawScreen.razor: Board.Count == 0),
       leaving only the group column — margin:auto in the flex-column body centers it instead of
       pinning it to the top. */
    .fd-draw__left:only-child { margin-block: auto; }

    /* HUB — the mandatory path banner (the advance CTA) is pulled ABOVE the fixture; the cards then
       stack compact from the top with the leftover space pooling at the bottom (top-aligned, natural
       heights — no stretched hero). display:contents lifts the aside's children (banner · group table ·
       camp) into the body flow so only the banner reorders past the fixture; the group table + camp keep
       their natural order below it. The go-bar variant (no path pending) has no --path order, so it stays
       below the fixture as before. mirrors .fd-hub__body/.fd-hub__stack (screens.css:1720,1732). */
    .fd-hub__body { flex-direction: column; align-items: stretch; padding-inline: 0; gap: var(--space-lg); justify-content: flex-start; }
    .fd-hub__stack { display: contents; }
    .fd-hub__banner--path { order: -1; }
    .fd-hub__next { flex: 0 0 auto; } /* override the desktop flex:1.5 so the fixture keeps its natural height in the column (no stretched hero) */
    .fd-hub__ovr { font-size: 48px; }
    .fd-hub__vs { font-size: 34px; }
    .fd-hub__fixture { gap: var(--space-lg); margin: var(--space-lg) 0; }
    .fd-hub__actions .fd-btn { font-size: 20px; min-height: 60px; }

    /* PATH — fill the frame instead of centering a tiny card. The .fd-path column grows; its single
       Panel (Line / Roll / Result / Quiet-week) OR the choices column expands to the full height with
       content centered inside, and the dice / cards / line buttons are enlarged so the moment owns the
       phone. mirrors .fd-path (screens.css:1917) and its step Panels. */
    .fd-path { flex: 1 1 auto; min-height: 0; max-width: 1200px; }
    .fd-path > .fd-panel {
        flex: 1 1 auto; min-height: 0; width: 100%;
        display: flex; flex-direction: column;
    }
    .fd-path > .fd-panel > .fd-panel__body {
        flex: 1 1 auto; min-height: 0;
        display: flex; flex-direction: column;
        justify-content: safe center; gap: var(--space-lg);
    }
    /* The choices column fills the frame and the cards SHARE its height (flex:1 each) instead of
       centering a fixed-size cluster: two choices ⇒ each card grows tall, four ⇒ each is compact, so
       the crossroads always fills — no dead gap on a 2-option (REST-only-ish) stop. The card body
       centers its icon/desc/odds so a grown card reads deliberate, not half-empty. */
    .fd-path__choices { flex-direction: column; align-items: center; flex: 1 1 auto; }
    .fd-path__card { width: min(720px, 94%); flex: 1 1 0; }       /* crossroads cards: from 420px, share the height */
    .fd-path__card-body { justify-content: center; }
    .fd-path__lines { gap: var(--space-lg); }
    .fd-path__lines .fd-btn { min-height: 168px; min-width: 220px; font-size: var(--text-section); }
    .fd-path__line-ovr { font-size: 40px; }
    .fd-path__roll,
    .fd-path__result { align-items: center; }
    .fd-path__roll .fd-dice svg,
    .fd-path__result .fd-dice svg { width: 560px; height: auto; } /* D100: from 240px */

    /* SQUAD — bigger vertical field (widen the pitch column; aspect-ratio makes it taller too).
       The pool fills the rest via the orientation-independent chain at screens.css:2326-2335. */
    .fd-squad__body { flex-direction: column; }
    .fd-squad__pitchcol { width: 100%; max-width: 780px; margin-inline: auto; } /* taller field: from 470px */
    /* The 470px→780px field left the fixed 72px chips tiny against the grass. Scale them to the desktop
       proportion (72/470 ≈ 0.15 → ~120px at 780px); PitchLayout's 0.17 cross-gap (≈133px here) still
       clears a five-man line with room to spare. Bump name/OVR so the larger chip reads.
       mirrors .fd-squad__pitch--vertical .fd-slot (screens.css:2238) + the name clamp (screens.css:2446). */
    .fd-squad__pitch--vertical .fd-slot { width: 120px; height: 120px; }
    .fd-squad__pitch--vertical .fd-slot__name { font-size: 13px; }
    .fd-squad__pitch--vertical .fd-slot__ovr { font-size: 20px; }

    /* TOURNAMENT — no portrait rule existed and the screen isn't full-bleed, so it top-anchored.
       Bind it to the viewport, pin bar + status, and let the active tab body grow and scroll
       internally. STANDINGS drops to the 2-up wall (mirrors the ≤1024 rule at screens.css:3656).
       mirrors .fd-tourney (screens.css:3598). */
    .fd-tourney { height: calc(100svh - 2 * var(--space-xl)); }
    .fd-tourney__bar,
    .fd-tourney__status { flex: 0 0 auto; }
    /* One full-width column: each group table reads big (fixes "small horizontally"); the 8 tables
       stack tall and scroll, so there is no dead space below the wall. */
    .fd-tourney__groups { grid-template-columns: 1fr; align-content: start; }
    .fd-tourney__groups,
    .fd-tourney__stats,
    .fd-results,
    .fd-bracket { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .fd-results { justify-content: safe center; }

    /* BONUS DRAFT — grow + center the pick/substitute panel body; enlarge the pick cards and
       drop the roster to 2-up so they read on the phone. mirrors .fd-bonus-screen (screens.css:4307). */
    .fd-bonus-screen { min-height: calc(100svh - 2 * var(--space-xl)); }
    .fd-bonus-screen > .fd-panel { flex: 1 1 auto; min-height: 0; }
    .fd-bonus-screen > .fd-panel > .fd-panel__body {
        min-height: 0; display: flex; flex-direction: column;
        justify-content: safe center; gap: var(--space-md);
    }
    .fd-bonus-screen__cards { justify-content: center; }
    .fd-bonus-screen__cards .fd-draft { width: 340px; }          /* pick cards: from ~220px */
    .fd-bonus-screen__roster { grid-template-columns: repeat(2, 1fr); }

    /* ACHIEVEMENTS — bind to the viewport so the unlock ledger (flex:1) has a bounded parent to
       fill; lift its 62vh cap. Summary + filters stay pinned above it. mirrors .fd-ach__ledger
       (screens.css:3405). */
    .fd-ach-screen { height: calc(100svh - 2 * var(--space-xl)); }
    .fd-ach-screen .fd-ach__ledger { max-height: none; }

    /* LIFETIME STATS — the 5-up hero + 3-up sheet render tiny at the frozen width; collapse them to
       full-width stacked rows (flip the dividers to top borders) so they fill the frame. The screen
       itself only top-anchored (gap below on a short/fresh profile): bind it to the viewport and
       safe-center the stack so short content centers and a full sheet scrolls the page from the top.
       Scope to :not(.fd-ach-screen) — Achievements shares .fd-stats but has its own viewport binding.
       mirrors the ≤1024 collapse at screens.css:3304. */
    .fd-stats:not(.fd-ach-screen) { min-height: calc(100svh - 2 * var(--space-xl)); justify-content: safe center; }
    .fd-stats__hero { grid-template-columns: 1fr 1fr; }
    .fd-stats__sheet { grid-template-columns: 1fr; }
    .fd-stats__tile + .fd-stats__tile { border-left: none; border-top: var(--border-width-nested) solid var(--color-ink); }
    .fd-stats__col + .fd-stats__col { border-left: none; border-top: var(--border-width-nested) solid var(--color-ink); }

    /* PREMATCH — bigger D20 die; altar centers when it fits, scrolls if it overflows. */
    .fd-prematch__altar { justify-content: safe center; overflow-y: auto; min-height: 0; }
    .fd-prematch__die .fd-dice svg { width: 460px; height: auto; } /* D20: from 240px */

    /* MATCH — one viewport: score + lines pinned, the ticker feed fills and scrolls, the
       rail (mood + PAUSE/SKIP/speed controls) sits below and stays visible. */
    /* box-sizing:border-box keeps the box at 100svh; the bottom padding reserves space so the rail's
       PAUSE/SKIP/speed controls lift off Safari's bottom bar instead of hugging the edge (bug: actions
       too close to the margin). max() keeps a gutter even where the safe-area inset is 0. */
    .fd-match { height: 100svh; overflow: hidden; padding-bottom: max(var(--space-md), env(safe-area-inset-bottom)); }
    .fd-match__body { flex-direction: column; }
    .fd-match__feed { flex: 1 1 auto; min-height: 0; }
    .fd-match__ticker { flex: 1 1 auto; min-height: 0; max-height: none; }
    .fd-match__rail { flex: 0 0 auto; }
    .fd-match__rail-controls { margin-top: var(--space-sm); }
    /* Bigger header: scoreline, team codes, minute, line chips. */
    .fd-match__scoreboard { padding-block: var(--space-md) var(--space-lg); }
    .fd-match__teamcode { font-size: 40px; }
    .fd-match__scorebug .fd-score__digits { font-size: 84px; }
    .fd-match__scorebug .fd-score__min { font-size: 22px; }
    .fd-match__lines-code { font-size: 26px; }
    .fd-match__lines .fd-tag { font-size: 20px; padding: 6px 10px; }
    /* Bigger bottom controls: stance chips, PAUSE/SKIP, speed, mood. */
    .fd-match__stance-btn { font-size: 20px; padding: 14px 10px; }
    .fd-match__stance-label { font-size: 15px; }
    .fd-match__stance-mods { font-size: 13px; }
    .fd-match__rail-controls .fd-btn { font-size: 22px; min-height: 64px; }
    .fd-match__speed .fd-btn { font-size: 20px; }
    .fd-match__speed-val { font-size: 24px; }
    .fd-match__mood-title { font-size: 18px; }
    .fd-match__mood-text { font-size: 18px; }
    .fd-match__mood-die { width: 60px; height: 60px; }
    .fd-match__mood-die > span { font-size: 24px; }
    /* Half-time interaction: bigger dice, legend, swing rows and buttons. */
    .fd-match__ht .fd-dice svg { width: 380px; height: auto; }
    .fd-match__ht-legend-item { font-size: 18px; padding: 4px var(--space-md); }
    .fd-match__ht-row { font-size: 20px; }
    .fd-match__ht .fd-btn { font-size: 22px; min-height: 60px; }
    /* Substitution / pause — stack the pitch above the bench and let the pitch use the full
       width so it fills the phone (vertical/bottom-to-top orientation is a separate change — it
       is computed in MatchPausePanel and would also affect desktop; flagged for a decision). */
    .fd-pause__reorg { grid-template-columns: 1fr; }
    .fd-pause__pitch { width: 100%; max-width: none; }

    /* End ceremonies (RUNOVER / CHAMPION) — widen the column; safe-center so a tall ceremony
       scrolls from the top. Enlarge the lower half: actions, rewards, summary, run history. */
    .fd-end { place-items: safe center; }
    .fd-end__inner { max-width: 100%; gap: var(--space-lg); }
    .fd-end__actions { gap: var(--space-lg); }
    .fd-end__actions .fd-btn { font-size: 24px; min-height: 64px; padding: 16px 28px; }
    .fd-end__rewards { padding: var(--space-lg) var(--space-xl); }
    .fd-campaign-strip__pip { font-size: 34px; }
    .fd-end__reason,
    .fd-end__cause,
    .fd-earnings__next { font-size: 22px; }
    .fd-runhistory__chip { font-size: 20px; padding: var(--space-sm) var(--space-md); }
    .fd-runhistory__stage,
    .fd-runhistory__pens { font-size: 16px; }

    /* Chapter interstitial — widen the panel; safe-center + scroll for the tall
       group-table beat. */
    .fd-chapter { justify-content: safe center; overflow-y: auto; }
    .fd-chapter__panel { max-width: 100%; }

    /* READABILITY — content-bearing small text on dense screens. Under the scale-down, hardcoded
       ~9-14px (and a few --fs-body/--fs-mono) content values render ~3-5px physical. These portrait-
       only overrides raise the PRIMARY content (names, values, rows) to a legible floor; the base px
       are left untouched so desktop is unchanged. Decorative mono kickers/captions stay small (many
       route through --text-micro, already bumped in tokens.css). Each notes its base size/line. */
    /* Start — nation board list */
    .fd-start__col-name { font-size: 22px; }            /* base 13px (screens.css:683) — nation name */
    .fd-start__col-ovr  { font-size: 22px; }            /* base 14px (screens.css:724) — OVR value */
    .fd-start__row      { min-height: 56px; }           /* base 40px (screens.css:658) — tap row */
    /* Start — campaign INFO table */
    .fd-start__ct-num   { font-size: 22px; }            /* base 14px (screens.css:191) — level numeral */
    .fd-start__ct-name  { font-size: 16px; }            /* base 8.5px (screens.css:196) — level name */
    .fd-start__ct-cell  { font-size: 18px; }            /* base 10.5px (screens.css:202) — path/draft cells */
    /* Squad — reserves pool (name inherits --fs-body, not covered by the token bump) */
    .fd-squad__pool .fd-pool__name { font-size: 20px; } /* inherited --fs-body ~17px — player name */
    .fd-squad__pool .fd-pool { min-height: 52px; }      /* base 36px (screens.css:2465) — tap row */
    /* Tournament — bracket round heading (only non-token content size) */
    .fd-bracket__roundhead { font-size: 16px; }         /* base 11px (screens.css:3681) — round heading */
    /* Achievements — ledger rows */
    .fd-ach__name { font-size: 22px; }                  /* base 13px (screens.css:3466) — achievement title */
    .fd-ach__date { font-size: 16px; }                  /* base 11px (screens.css:3516) — unlock date */
    .fd-ach__cond { font-size: 18px; }                  /* --fs-body ~17px via screens.css:3572 — description */
    /* Lifetime stats — sheet (row carries label + value; both inherit .fd-stats__row) */
    .fd-stats__row      { font-size: 20px; }            /* base --fs-mono ~15px (screens.css:3283) */
    .fd-stats__sectitle { font-size: 20px; }            /* base 12px (screens.css:3275) — section title */
    .fd-stats__secnum   { font-size: 20px; }            /* base 12px (screens.css:3274) — section number */
    /* Draft — banked core / board rows / pitch slot / pick-card name */
    .fd-draft__core-name { font-size: 18px; }           /* base 10px (screens.css:1341) — core player name */
    .fd-draft__core-ovr  { font-size: 18px; }           /* base 11px (screens.css:1345) — core rating */
    .fd-draft__board-row { font-size: 18px; }           /* base 11px (screens.css:1294) — board key/value */
    .fd-draft__slot-name { font-size: 15px; }           /* base 9px (screens.css:1407) — slot name (92px box, ellipsis) */
    .fd-draft__name { font-size: 24px; }                /* inherited --fs-body ~17px — pick-card player name */

    /* Shootout is already a centered vertical column — scaling handles it, left as-is. */
}