/* ============================================================================
   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);
}

/* ----------------------------------------------------------------------------
   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;
}

.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);
}
.fd-start__campaignhead { display: flex; align-items: baseline; justify-content: space-between; }
.fd-start__pips {
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
}
.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);
}
.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; }
.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__rules {
    margin: 0;
    padding-left: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--text-ui);
}

/* 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%; }
}

/* 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);
}
.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__camp-locked {
    display: inline-flex;
    align-items: center;
    color: var(--text-secondary);
    font-size: 10px;
    white-space: nowrap;
}
.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; }
.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;
    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 { transform: rotate(0deg) scale(1.02); }

.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;
}
.fd-path__card-commit {
    border: none;
    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;
    cursor: pointer;
    transition: background var(--motion-snap), color var(--motion-snap);
}
.fd-path__card-commit:hover {
    background: var(--card-frame);
    color: var(--color-on-dark);
}
.fd-path__card--yellow .fd-path__card-commit:hover,
.fd-path__card--green .fd-path__card-commit:hover { color: var(--ink-fixed); }
.fd-path__card-commit:focus-visible { outline: var(--focus-ring); outline-offset: -4px; }

/* 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 { transform: none; }
}
html.reduced-motion .fd-path__card,
html.reduced-motion .fd-path__card:nth-child(even),
html.reduced-motion .fd-path__card:hover { 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; }
}

/* 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;
}

.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); }

@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); }
.fd-end__ladder { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; justify-content: center; }
.fd-end__ladder-label,
.fd-end__ladder-next {
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-mono-wide);
    text-transform: uppercase;
}
.fd-end__ladder-bar {
    width: 170px;
    height: 10px;
    border: var(--border-width-micro) solid var(--color-accent-yellow);
    background: var(--color-void);
    display: inline-block;
}
.fd-end__ladder-fill { display: block; height: 100%; background: var(--color-accent-yellow); }
.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 + download button centered as one column. */
.fd-breakdown--card { align-items: center; }
.fd-breakdown--card .fd-breakdown__png { align-self: center; }
.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); }
}

/* --- 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; }
/* UNLOCKS now shows only the lifetime ★ total + a placeholder Stars Shop (spending is TBD). */
.fd-unlocks .fd-meta__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.fd-unlocks .fd-input { margin-bottom: var(--space-md); }

.fd-unlocks__stars {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-xs); padding: var(--space-lg) 0;
}
.fd-unlocks__stars-num {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    font-family: var(--font-display); font-size: var(--text-title); line-height: 1;
}
.fd-unlocks__shop { padding: var(--space-md) 0; text-align: center; }
.fd-unlocks__shop-tbd { font-family: var(--font-display); font-size: var(--text-section); margin: 0 0 var(--space-xs); }
.fd-meta__nations-scroll { max-height: 58vh; overflow-y: auto; }
@media (max-width: 880px) {
    .fd-unlocks .fd-meta__grid { grid-template-columns: 1fr; }
}
.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; }
}

/* 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; }