/* /Components/Board/Broadcast/ReplayPlayer.razor.rz.scp.css */
/* The replay transport HUD floats over the letterboxed board (video-player style), so the board reuses the
   live Play.razor board scale-to-viewport unchanged. Shared by /replay (stored) and /replay/watch (imported). */
.cf-replay__root[b-1lmfm7j619] {
    position: relative;
}

/* The fixed transport can wrap to two rows at the terminal move. Keep that footprint outside the fitted board
   so its public current-beat ticker remains readable at both desktop replay widths. */
.cf-replay__root .bcast-fit[b-1lmfm7j619] {
    bottom: 118px;
}

/* Version-drift notice - a quiet dark-glass strip pinned to the top, amber-edged (advisory, not an error). */
.cf-replay__drift[b-1lmfm7j619] {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- local stack: floats above the letterboxed board, like the transport HUD */
    z-index: 100;
    max-width: calc(100vw - 24px);
    padding: 8px 16px;
    border-radius: 8px;
    background: rgb(18 16 22 / 0.86); /* stylelint-disable-line function-disallowed-list -- bespoke: dark-glass tint over the board (not an app surface) */
    border: 1px solid color-mix(in srgb, var(--cf-warning) 60%, transparent);
    color: #f0e7d4; /* stylelint-disable-line color-no-hex -- bespoke: warm cream ink for the dark-glass surface */
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    backdrop-filter: blur(6px);
}

.cf-replay__hud[b-1lmfm7j619] {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- local stack: the transport HUD floats just above the letterboxed board, not part of the --cf-z-* surface scale */
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    background: rgb(18 16 22 / 0.86); /* stylelint-disable-line function-disallowed-list -- bespoke: dark-glass HUD tint over the board (not an app surface) */
    border: 1px solid color-mix(in srgb, var(--cf-accent) 35%, transparent);
    border-radius: 10px;
    color: #ece4d6; /* stylelint-disable-line color-no-hex -- bespoke: warm cream HUD ink for the dark-glass surface */
    font-size: 13px;
    box-shadow: 0 6px 24px color-mix(in srgb, var(--cf-overlay-dark) 40%, transparent);
    backdrop-filter: blur(6px);
    max-width: calc(100vw - 24px);
    flex-wrap: wrap;
    justify-content: center;
}

.cf-replay__tag[b-1lmfm7j619] {
    color: var(--cf-accent);
    font-weight: 700;
    letter-spacing: 0.06em;
}

.cf-replay__title[b-1lmfm7j619] {
    font-weight: 600;
}

.cf-replay__vs[b-1lmfm7j619] {
    opacity: 0.65;
    margin: 0 6px;
    font-weight: 400;
}

.cf-replay__transport[b-1lmfm7j619] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.cf-replay__transport button[b-1lmfm7j619] {
    min-width: 36px;
    height: 34px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--cf-overlay-light) 6%, transparent);
    color: #ece4d6; /* stylelint-disable-line color-no-hex -- bespoke: warm cream HUD ink for the dark-glass surface */
    border: 1px solid color-mix(in srgb, var(--cf-overlay-light) 12%, transparent);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.cf-replay__transport button:hover:not(:disabled)[b-1lmfm7j619] {
    background: color-mix(in srgb, var(--cf-accent) 22%, transparent);
}

.cf-replay__transport button:disabled[b-1lmfm7j619] {
    opacity: 0.35;
    cursor: default;
}

.cf-replay__transport input[type="range"][b-1lmfm7j619] {
    width: 180px;
    accent-color: var(--cf-accent);
}

.cf-replay__count[b-1lmfm7j619] {
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Speed chip - cycles 0.5×/1×/2×/4×; same dark-glass treatment as the transport buttons. */
.cf-replay__speed[b-1lmfm7j619] {
    min-width: 40px;
    height: 34px;
    padding: 0 8px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--cf-overlay-light) 6%, transparent);
    color: #ece4d6; /* stylelint-disable-line color-no-hex -- bespoke: warm cream HUD ink for the dark-glass surface */
    border: 1px solid color-mix(in srgb, var(--cf-overlay-light) 12%, transparent);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.cf-replay__speed:hover[b-1lmfm7j619] {
    background: color-mix(in srgb, var(--cf-accent) 22%, transparent);
}

/* Download chip in the HUD - a quiet outline that lifts to the accent on hover, matching the transport ink. */
.cf-replay__download[b-1lmfm7j619] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--cf-overlay-light) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--cf-accent) 35%, transparent);
    color: #ece4d6; /* stylelint-disable-line color-no-hex -- bespoke: warm cream HUD ink for the dark-glass surface */
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cf-replay__download:hover[b-1lmfm7j619] {
    background: color-mix(in srgb, var(--cf-accent) 22%, transparent);
}

.cf-replay__message[b-1lmfm7j619] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px;
    color: var(--cf-text-muted);
    font-size: 16px;
}

/* ════════════════════════════════════════════════════════════════════════════
   REPLAY MOVE-LOG RAIL
   The log IS the replay's primary navigation surface, so it's a persistent
   parchment reading panel docked to the right - NOT the dark-glass HUD treatment.
   Parchment is deliberate: it lets the rail reuse the live board's log craft
   verbatim (the .board-logline category rails, weight tiers and tone spans are
   authored for a light --cf-surface). When the rail is open the board (.bcast-fit)
   insets to make room, and board-fit.js re-fits the board to the narrower stage
   (ResizeObserver), so the board is only scaled, never hidden behind the rail.
   ════════════════════════════════════════════════════════════════════════════ */
.cf-replay__root[b-1lmfm7j619] {
    --cf-replay-logw: 340px;
}

.cf-replay__root--logopen .bcast-fit[b-1lmfm7j619] {
    right: var(--cf-replay-logw);
}

/* The mobile drawer scrim is inert (hidden) on desktop, where the board insets beside the rail (no overlap). It
   only paints under the touch breakpoint when the rail is open - see the @media block below. */
.cf-replay__scrim[b-1lmfm7j619] {
    display: none;
}

.cf-replay__log[b-1lmfm7j619] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--cf-replay-logw);
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- local stack: the reading rail sits above the letterboxed board, below the floating HUD (z 100) */
    z-index: 90;
    display: flex;
    flex-direction: column;
    background: var(--cf-surface);
    /* A stronger edge than --cf-border: a parchment hairline vanishes against the dark felt the rail lifts off. */
    border-left: 1px solid var(--cf-border-strong);
    box-shadow: -10px 0 30px color-mix(in srgb, var(--cf-overlay-dark) 35%, transparent);
    /* Seat tints for the reused .board-tone-you/opp spans - unset outside a seat-styled container, they fall
       back to plain ink. Match the broadcast You=crimson / Opp=moss orientation (Players[0] / Players[1]). */
    --board-tone-you: var(--game-tone-crimson);
    --board-tone-opp: var(--game-tone-moss);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.22s ease, visibility 0.22s;
}

.cf-replay__root--logopen .cf-replay__log[b-1lmfm7j619] {
    transform: translateX(0);
    visibility: visible;
}

.cf-replay__log-head[b-1lmfm7j619] {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 13px;
    border-bottom: 1px solid var(--cf-border);
    background: var(--cf-surface-2);
}

.cf-replay__log-title[b-1lmfm7j619] {
    font-family: var(--game-font-display, inherit);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cf-text);
}

.cf-replay__log-collapse[b-1lmfm7j619] {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid var(--cf-border);
    background: var(--cf-surface);
    color: var(--cf-text-muted);
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
}

.cf-replay__log-collapse:hover[b-1lmfm7j619] {
    color: var(--cf-text);
    border-color: var(--cf-accent);
}

/* The facet chips reuse the live .board-logfilter look; in the rail they're PRIMARY nav, not glance chrome, so
   they get readable type + a real target rather than the 8.5px / 2px-pad in-board size. */
.cf-replay__log .board-logfilter[b-1lmfm7j619] {
    margin: 0;
    padding: 9px 13px 5px;
    flex: none;
}

.cf-replay__log .board-logfilter__chip[b-1lmfm7j619] {
    font-size: 10px;
    padding: 5px 11px;
}

.cf-replay__loglist[b-1lmfm7j619] {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 13px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* A touch larger than the cramped in-board feed (9px) - this rail is the main read, not a glance. */
    font-size: 11px;
    line-height: 1.4;
    color: var(--cf-text-muted);
}

.cf-replay__log-empty[b-1lmfm7j619] {
    color: var(--cf-text-muted);
    font-style: italic;
    padding: 10px 2px;
}

/* Each beat / phase header is a full-width seek button. Strip the native button chrome on three sides but
   leave border-left to board.css, so the [data-kind] category rail still paints; cursor + hover advertise
   that the line jumps the board to that beat. */
.cf-replay__logline[b-1lmfm7j619],
.cf-replay__loghdr[b-1lmfm7j619] {
    width: 100%;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.cf-replay__logline[b-1lmfm7j619] {
    text-align: left;
    padding: 4px 6px 4px 7px;
    border-radius: 5px;
}

.cf-replay__loghdr[b-1lmfm7j619] {
    padding: 5px 6px;
    border-radius: 5px;
}

/* The reused [data-kind] category rail is 2px in the cramped in-board feed; at the rail's larger read it gets
   3px so the category colour registers. Rail-scoped - the live in-board feed is untouched. */
.cf-replay__logline[data-kind][b-1lmfm7j619] {
    border-left-width: 3px;
}

/* Rest state reads as a plain transcript line; hover ARMS it as a seek target - a clearer accent wash plus a
   hairline ring - since the rail's whole premise is that every line jumps the board. */
.cf-replay__logline:hover[b-1lmfm7j619] {
    background: color-mix(in srgb, var(--cf-accent) 10%, var(--cf-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cf-accent) 30%, transparent);
}

.cf-replay__loghdr:hover .board-logline__body[b-1lmfm7j619],
.cf-replay__loghdr:hover b[b-1lmfm7j619] {
    color: var(--cf-text);
}

/* The live beat: a gold wash + full-strength ink AND a gold spine, so "where am I now" stays unmistakable in a
   long auto-following list. The spine is an INSET shadow (not a border), so it coexists with the [data-kind]
   category rail on the same edge instead of replacing it. */
.cf-replay__logline--now[b-1lmfm7j619] {
    background: color-mix(in srgb, var(--cf-accent) 18%, var(--cf-surface));
    box-shadow: inset 3px 0 0 var(--cf-accent);
}

.cf-replay__logline--now .board-logline__body[b-1lmfm7j619] {
    color: var(--cf-text);
}

.cf-replay__logline--now .board-logline__time[b-1lmfm7j619] {
    color: var(--cf-accent-deep, var(--cf-text));
    font-weight: 700;
}

/* Log toggle in the HUD - the dark-glass chip treatment of its transport siblings. */
.cf-replay__logtoggle[b-1lmfm7j619] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 11px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--cf-overlay-light) 6%, transparent);
    color: #ece4d6; /* stylelint-disable-line color-no-hex -- bespoke: warm cream HUD ink for the dark-glass surface */
    border: 1px solid color-mix(in srgb, var(--cf-overlay-light) 12%, transparent);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.cf-replay__logtoggle:hover[b-1lmfm7j619] {
    background: color-mix(in srgb, var(--cf-accent) 22%, transparent);
}

.cf-replay__logtoggle--on[b-1lmfm7j619] {
    background: color-mix(in srgb, var(--cf-accent) 26%, transparent);
    border-color: color-mix(in srgb, var(--cf-accent) 55%, transparent);
}

/* With the rail open the board area is the viewport minus the rail; recentre the floating HUD + drift banner
   over THAT region (they slide as the rail animates). */
.cf-replay__hud[b-1lmfm7j619],
.cf-replay__drift[b-1lmfm7j619] {
    transition: left 0.22s ease;
}

.cf-replay__root--logopen .cf-replay__hud[b-1lmfm7j619],
.cf-replay__root--logopen .cf-replay__drift[b-1lmfm7j619] {
    left: calc((100vw - var(--cf-replay-logw)) / 2);
}

/* The tablet ticker type scale plus an open desktop log can otherwise let long recent beats collapse the
   primary beat to zero width. Give the public beat priority; the recent-beat strip remains the shrinkable edge. */
@media (width >= 761px) and (width <= 1100px) {
    .cf-replay__root--logopen[b-1lmfm7j619]  .bcast-ticker__now {
        min-width: 320px;
    }

    .cf-replay__root--logopen[b-1lmfm7j619]  .bcast-ticker__recent {
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
    }
}

/* Narrow screens: a 340px squeeze would shrink the board too far, so the rail becomes an overlay drawer over a
   full-width board (toggled), rather than insetting it. */
@media (max-width: 760px) {
    .cf-replay__root[b-1lmfm7j619] {
        --cf-replay-logw: min(86vw, 340px);
    }

    .cf-replay__root--logopen .bcast-fit[b-1lmfm7j619] {
        right: 0;
    }

    .cf-replay__root--logopen .cf-replay__hud[b-1lmfm7j619],
    .cf-replay__root--logopen .cf-replay__drift[b-1lmfm7j619] {
        left: 50%;
    }

    /* The rail is an overlay drawer here, so dim the board behind it - it reads as a drawer (not "the panel ate
       the screen") and the scrim is a tap-anywhere-to-close target. */
    .cf-replay__root--logopen .cf-replay__scrim[b-1lmfm7j619] {
        display: block;
        position: fixed;
        inset: 0;
        /* stylelint-disable-next-line declaration-property-value-disallowed-list -- local stack: the drawer scrim sits just below the rail (z 90), above the board */
        z-index: 89;
        background: color-mix(in srgb, var(--cf-overlay-dark) 50%, transparent);
    }

    /* On the touch drawer the rail's lines / chips / collapse are PRIMARY nav a finger taps (glance chrome on
       the desktop rail), so give them real targets near the 44px minimum. */
    .cf-replay__loglist[b-1lmfm7j619] {
        font-size: 12px;
    }

    .cf-replay__logline[b-1lmfm7j619] {
        padding: 9px 10px;
    }

    .cf-replay__loghdr[b-1lmfm7j619] {
        padding: 10px;
    }

    .cf-replay__log .board-logfilter__chip[b-1lmfm7j619] {
        padding: 9px 13px;
    }

    .cf-replay__log-collapse[b-1lmfm7j619] {
        width: 44px;
        height: 44px;
    }
}
/* /Components/Board/BugReportDialog.razor.rz.scp.css */
.cf-bug-report__replay-note[b-chp9j9pclf] {
    font-size: 12px;
    color: var(--cf-text-muted);
    background: var(--cf-surface-2);
    border-left: 3px solid var(--cf-brand);
    padding: 7px 10px;
    border-radius: 0 4px 4px 0;
    margin-bottom: 14px;
    line-height: 1.5;
}

.cf-bug-report__label[b-chp9j9pclf] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cf-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 6px;
}

.cf-bug-report__textarea[b-chp9j9pclf] {
    width: 100%;
    box-sizing: border-box;
    min-height: 130px;
    resize: vertical;
    background: var(--cf-surface);
    color: var(--cf-text);
    border: 1px solid var(--cf-border);
    border-radius: 6px;
    padding: 9px 11px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.55;
    transition: border-color .15s;
}

.cf-bug-report__textarea:focus[b-chp9j9pclf] {
    border-color: var(--cf-brand);
}

.cf-bug-report__textarea:focus-visible[b-chp9j9pclf] {
    outline: 2px solid var(--cf-focus);
    outline-offset: 1px;
}

.cf-bug-report__textarea:disabled[b-chp9j9pclf] {
    opacity: .6;
    cursor: not-allowed;
}

.cf-bug-report__counter[b-chp9j9pclf] {
    font-size: 11px;
    color: var(--cf-text-muted);
    text-align: right;
    margin-top: 5px;
}

.cf-bug-report__counter--low[b-chp9j9pclf] {
    color: var(--cf-warning-fg);
    font-weight: 600;
}
/* /Components/Board/EventLogPanel.razor.rz.scp.css */
/* Moderator delete control on a chat line (admin/moderation layer). Subtle until hovered so it doesn't
   compete with the message; the board-chatline base classes themselves live in the global board stylesheet. */
.cf-chat-delete[b-bpizds54r6] {
    flex: none;
    margin-inline-start: 0.35rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cf-danger);
    cursor: pointer;
    opacity: 0.55;
    font-size: 0.85em;
    line-height: 1;
}

.cf-chat-delete:hover[b-bpizds54r6],
.cf-chat-delete:focus-visible[b-bpizds54r6] {
    opacity: 1;
}
/* /Components/Board/GmContextMenu.razor.rz.scp.css */
.cf-gm-context-menu-backdrop[b-yh5z994dqv] {
    position: fixed;
    inset: 0;
    z-index: 800; /* stylelint-disable-line declaration-property-value-disallowed-list -- local: board overlay scale (board.css), below --cf-z-dropdown */
}

.cf-gm-context-menu[b-yh5z994dqv] {
    position: fixed;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 6px;
    min-width: 180px;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--cf-overlay-dark) 55%, transparent); /* bespoke */
    overflow: hidden;
    z-index: 801; /* stylelint-disable-line declaration-property-value-disallowed-list -- local: one above its own backdrop */
}

.cf-gm-context-menu__head[b-yh5z994dqv] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px 6px;
    background: color-mix(in srgb, var(--cf-accent) 9%, transparent); /* bespoke - GM-tool amber wash */
    border-bottom: 1px solid var(--cf-border);
}

.cf-gm-context-menu__name[b-yh5z994dqv] {
    font-size: 12px;
    font-weight: 600;
    color: var(--cf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-gm-context-menu__list[b-yh5z994dqv] {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}

.cf-gm-context-menu__item[b-yh5z994dqv] {
    display: block;
    width: 100%;
    padding: 7px 12px;
    background: none;
    border: none;
    text-align: left;
    font-size: 13px;
    color: var(--cf-text);
    cursor: pointer;
    white-space: nowrap;
}
.cf-gm-context-menu__item:hover[b-yh5z994dqv] {
    background: color-mix(in srgb, var(--cf-accent) 12%, transparent); /* bespoke */
}
.cf-gm-context-menu__item:focus-visible[b-yh5z994dqv] {
    outline: 2px solid var(--cf-focus);
    outline-offset: -2px; /* inset - the menu clips overflow */
}
/* /Components/Board/GmPanel.razor.rz.scp.css */
.cf-gm-panel[b-5esve8lci4] {
    position: fixed;
    top: 48px;
    right: 0;
    width: 240px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--cf-surface);
    border-left: 1px solid color-mix(in srgb, var(--cf-accent) 30%, transparent); /* bespoke - GM-tool amber edge */
    border-bottom: 1px solid color-mix(in srgb, var(--cf-accent) 30%, transparent); /* bespoke */
    border-radius: 0 0 0 8px;
    box-shadow: -4px 4px 24px color-mix(in srgb, var(--cf-overlay-dark) 50%, transparent); /* bespoke */
    z-index: 750; /* stylelint-disable-line declaration-property-value-disallowed-list -- local: board overlay scale (board.css), below --cf-z-dropdown */
    display: flex;
    flex-direction: column;
}

.cf-gm-panel__head[b-5esve8lci4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--cf-accent) 10%, transparent); /* bespoke */
    border-bottom: 1px solid color-mix(in srgb, var(--cf-accent) 20%, transparent); /* bespoke */
    flex-shrink: 0;
}

.cf-gm-panel__title[b-5esve8lci4] {
    flex: 1;
    font-size: 12px;
    font-weight: 700;
    color: var(--cf-brand);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cf-gm-panel__close[b-5esve8lci4] {
    background: none;
    border: none;
    color: var(--cf-text-muted);
    cursor: pointer;
    font-size: 15px;
    padding: 2px 4px;
    line-height: 1;
}
.cf-gm-panel__close:hover[b-5esve8lci4] { color: var(--cf-text); }

.cf-gm-panel__section[b-5esve8lci4] {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--cf-border);
}

.cf-gm-panel__label[b-5esve8lci4] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cf-brand);
    margin-bottom: 8px;
}

.cf-gm-panel__seat-row[b-5esve8lci4] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.cf-gm-panel__seat-name[b-5esve8lci4] {
    font-size: 11px;
    color: var(--cf-text-muted);
    min-width: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-gm-panel__resource[b-5esve8lci4] {
    display: flex;
    align-items: center;
    gap: 3px;
}

.cf-gm-panel__res-label[b-5esve8lci4] {
    font-size: 10px;
    color: var(--cf-text-muted);
}

.cf-gm-panel__input[b-5esve8lci4] {
    width: 44px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 4px;
    color: var(--cf-text);
    font-size: 12px;
    padding: 2px 4px;
    text-align: center;
}
.cf-gm-panel__input:focus[b-5esve8lci4] {
    border-color: var(--cf-brand);
}
.cf-gm-panel__input:focus-visible[b-5esve8lci4] {
    outline: 2px solid var(--cf-focus);
    outline-offset: 1px;
}

.cf-gm-panel__seat-zones[b-5esve8lci4] {
    margin-bottom: 6px;
}

.cf-gm-panel__zone-btns[b-5esve8lci4] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}

.cf-gm-panel__hint[b-5esve8lci4] {
    padding: 8px 12px;
    font-size: 10px;
    color: var(--cf-text-muted);
    line-height: 1.5;
}

/* ---- shared GM button styles (also used by GmZoneBrowser and GmContextMenu) ---- */
:global(.cf-gm-badge)[b-5esve8lci4] {
    background: var(--cf-accent);
    color: var(--cf-accent-contrast); /* dark ink on the gold GM badge (AA at this size) */
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    padding: 1px 4px;
    border-radius: 3px;
    flex-shrink: 0;
}

:global(.cf-gm-btn)[b-5esve8lci4] {
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    border-radius: 4px;
    color: var(--cf-text);
    cursor: pointer;
    font-size: 12px;
    padding: 4px 8px;
    white-space: nowrap;
}
:global(.cf-gm-btn:hover)[b-5esve8lci4] {
    background: color-mix(in srgb, var(--cf-accent) 15%, transparent); /* bespoke */
    border-color: color-mix(in srgb, var(--cf-accent) 40%, transparent); /* bespoke */
}
:global(.cf-gm-btn:focus-visible)[b-5esve8lci4] {
    outline: 2px solid var(--cf-focus);
    outline-offset: 1px;
}
:global(.cf-gm-btn--xs)[b-5esve8lci4] {
    font-size: 10px;
    padding: 2px 6px;
}
:global(.cf-gm-btn--sm)[b-5esve8lci4] {
    font-size: 11px;
    padding: 3px 7px;
}
:global(.cf-gm-btn--block)[b-5esve8lci4] {
    display: block;
    width: 100%;
    margin-bottom: 4px;
    text-align: left;
}
:global(.cf-gm-btn--warn)[b-5esve8lci4] {
    border-color: color-mix(in srgb, var(--cf-accent) 35%, transparent); /* bespoke */
    color: var(--cf-brand);
}
:global(.cf-gm-btn--warn:hover)[b-5esve8lci4] {
    background: color-mix(in srgb, var(--cf-accent) 20%, transparent); /* bespoke */
}
/* /Components/Board/GmZoneBrowser.razor.rz.scp.css */
.cf-gm-zone-browser-backdrop[b-0lxp5toqpm] {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--cf-overlay-dark) 55%, transparent); /* bespoke - modal scrim */
    z-index: 900; /* stylelint-disable-line declaration-property-value-disallowed-list -- local: board overlay scale (board.css), below --cf-z-dropdown */
    display: flex;
    align-items: center;
    justify-content: center;
}

.cf-gm-zone-browser[b-0lxp5toqpm] {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 8px;
    min-width: 360px;
    max-width: 500px;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 8px 32px color-mix(in srgb, var(--cf-overlay-dark) 60%, transparent); /* bespoke */
}

.cf-gm-zone-browser__head[b-0lxp5toqpm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--cf-surface-2);
    border-bottom: 1px solid var(--cf-border);
    flex-shrink: 0;
}

.cf-gm-zone-browser__title[b-0lxp5toqpm] {
    font-size: 13px;
    font-weight: 600;
    color: var(--cf-text);
    flex: 1;
}

.cf-gm-zone-browser__close[b-0lxp5toqpm] {
    background: none;
    border: none;
    color: var(--cf-text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 2px 4px;
    line-height: 1;
}
.cf-gm-zone-browser__close:hover[b-0lxp5toqpm] { color: var(--cf-text); }

.cf-gm-zone-browser__empty[b-0lxp5toqpm] {
    padding: 20px;
    text-align: center;
    color: var(--cf-text-muted);
    font-size: 13px;
}

.cf-gm-zone-browser__list[b-0lxp5toqpm] {
    list-style: none;
    margin: 0;
    padding: 6px 0;
    overflow-y: auto;
    flex: 1;
}

.cf-gm-zone-browser__card[b-0lxp5toqpm] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-bottom: 1px solid var(--cf-border);
}
.cf-gm-zone-browser__card:last-child[b-0lxp5toqpm] { border-bottom: none; }

.cf-gm-zone-browser__name[b-0lxp5toqpm] {
    flex: 1;
    font-size: 13px;
    color: var(--cf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cf-gm-zone-browser__type[b-0lxp5toqpm] {
    font-size: 10px;
    color: var(--cf-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    min-width: 56px;
}

.cf-gm-zone-browser__actions[b-0lxp5toqpm] {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
/* /Components/Board/MatchSettingsDialog.razor.rz.scp.css */
.cf-match-settings__section[b-c5q9j3kmc8] {
    margin-bottom: 1.25rem;
}

.cf-match-settings__section:last-child[b-c5q9j3kmc8] {
    margin-bottom: 0;
}

.cf-match-settings__heading[b-c5q9j3kmc8] {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
}

.cf-match-settings__note[b-c5q9j3kmc8] {
    margin: 0 0 0.6rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--cf-text-muted);
}

.cf-match-settings__phases[b-c5q9j3kmc8] {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.9rem;
}

.cf-match-settings__toggle[b-c5q9j3kmc8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
    font-size: 0.88rem;
    cursor: pointer;
}

.cf-match-settings__toggle input[b-c5q9j3kmc8] {
    width: 1rem;
    height: 1rem;
    cursor: pointer;
    accent-color: var(--cf-brand);
}

.cf-match-settings__save[b-c5q9j3kmc8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.cf-match-settings__save-hint[b-c5q9j3kmc8] {
    font-size: 0.78rem;
    color: var(--cf-text-muted);
}

.cf-match-settings__confirm[b-c5q9j3kmc8] {
    display: flex;
    gap: 0.5rem;
}

/* Sound row: the mute toggle (globally styled .board-sound, board.css) beside the volume tier. */
.cf-match-settings__sound[b-c5q9j3kmc8] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
/* /Components/Board/MobileValidationResearchPanel.razor.rz.scp.css */
.cf-mobile-validation[b-ez4ljjk6ik] {
    display: grid;
    gap: 12px;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid color-mix(in srgb, var(--cf-border-strong) 70%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--cf-surface) 90%, var(--cf-brand));
}

.cf-mobile-validation__header[b-ez4ljjk6ik],
.cf-mobile-validation__operations[b-ez4ljjk6ik],
.cf-mobile-validation__facts > div[b-ez4ljjk6ik],
.cf-mobile-validation__events li[b-ez4ljjk6ik] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cf-mobile-validation__header h2[b-ez4ljjk6ik],
.cf-mobile-validation__events h3[b-ez4ljjk6ik] {
    margin: 0;
    font-size: 13px;
}

.cf-mobile-validation__eyebrow[b-ez4ljjk6ik],
.cf-mobile-validation label > span[b-ez4ljjk6ik],
.cf-mobile-validation dt[b-ez4ljjk6ik] {
    color: var(--cf-text-muted);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cf-mobile-validation__status[b-ez4ljjk6ik] {
    padding: 4px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cf-surface-2) 80%, transparent);
    font: 600 11px/1.2 ui-monospace, monospace;
}

.cf-mobile-validation__form[b-ez4ljjk6ik] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.cf-mobile-validation label[b-ez4ljjk6ik] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.cf-mobile-validation__wide[b-ez4ljjk6ik],
.cf-mobile-validation__primary[b-ez4ljjk6ik] {
    grid-column: 1 / -1;
}

.cf-mobile-validation input[b-ez4ljjk6ik],
.cf-mobile-validation select[b-ez4ljjk6ik],
.cf-mobile-validation textarea[b-ez4ljjk6ik],
.cf-mobile-validation button[b-ez4ljjk6ik] {
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--cf-border) 72%, transparent);
    border-radius: 5px;
    color: inherit;
    background: color-mix(in srgb, var(--cf-surface) 76%, transparent);
    font: inherit;
}

.cf-mobile-validation input[b-ez4ljjk6ik],
.cf-mobile-validation select[b-ez4ljjk6ik],
.cf-mobile-validation textarea[b-ez4ljjk6ik] {
    padding: 7px;
}

.cf-mobile-validation button[b-ez4ljjk6ik] {
    min-height: 32px;
    padding: 6px 9px;
    cursor: pointer;
}

.cf-mobile-validation button:disabled[b-ez4ljjk6ik] {
    cursor: not-allowed;
    opacity: .45;
}

.cf-mobile-validation__primary[b-ez4ljjk6ik],
.cf-mobile-validation__release:not(:disabled)[b-ez4ljjk6ik] {
    border-color: color-mix(in srgb, var(--cf-brand) 65%, transparent);
    background: color-mix(in srgb, var(--cf-brand) 20%, transparent);
}

.cf-mobile-validation__operations[b-ez4ljjk6ik] {
    align-items: stretch;
    flex-wrap: wrap;
}

.cf-mobile-validation__operations button[b-ez4ljjk6ik] {
    flex: 1 1 120px;
}

.cf-mobile-validation__facts[b-ez4ljjk6ik] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 12px;
    margin: 0;
}

.cf-mobile-validation__facts dd[b-ez4ljjk6ik] {
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
    font: 500 10px/1.3 ui-monospace, monospace;
}

.cf-mobile-validation__events ol[b-ez4ljjk6ik] {
    display: grid;
    gap: 4px;
    margin: 6px 0 0;
    padding-left: 18px;
}

.cf-mobile-validation__events li[b-ez4ljjk6ik] {
    align-items: baseline;
    font-size: 10px;
}

.cf-mobile-validation__events span[b-ez4ljjk6ik] {
    color: var(--cf-text-muted);
    font-family: ui-monospace, monospace;
}

.cf-mobile-validation__error[b-ez4ljjk6ik] {
    margin: 0;
    color: var(--cf-danger);
    font-size: 11px;
}

.cf-mobile-validation__trace textarea[b-ez4ljjk6ik] {
    resize: vertical;
    white-space: pre;
    font: 10px/1.4 ui-monospace, monospace;
}
/* /Components/Board/SetupWealthMeter.razor.rz.scp.css */
/* §8.2 live setup-placement wealth meter. Built on global --cf-* tokens (not the board-scoped --board-*) so the
   component self-styles anywhere it renders - under the board's setup prompt and in the component gallery. */
.cf-setup-wealth[b-w5lsgfl629] { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--cf-font-ui); font-size: var(--cf-text-xs); }

.cf-setup-wealth__bar[b-w5lsgfl629] {
    position: relative; flex: 0 1 150px; min-width: 70px; height: 7px;
    border-radius: 999px; background: var(--cf-surface-2);
    border: 1px solid var(--cf-border-strong); overflow: hidden;
}

.cf-setup-wealth__fill[b-w5lsgfl629] {
    position: absolute; inset: 0 auto 0 0; height: 100%;
    background: var(--cf-accent);
    transition: width 120ms ease, background-color 120ms ease;
}

.cf-setup-wealth__text[b-w5lsgfl629] { white-space: nowrap; color: var(--cf-text-muted); }
.cf-setup-wealth__note[b-w5lsgfl629] { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cf-text); }

/* Wealth blew the budget - the bar itself is the problem → red. */
.cf-setup-wealth--over .cf-setup-wealth__fill[b-w5lsgfl629] { background: var(--cf-danger); }
/* Confirm would fail (over-budget OR a non-wealth block) → the status reads red. A within-budget non-wealth
   block keeps the bar gold (wealth is fine) and reddens only the note. */
.cf-setup-wealth--invalid .cf-setup-wealth__note[b-w5lsgfl629] { color: var(--cf-danger-fg); }

@media (prefers-reduced-motion: reduce) {
    .cf-setup-wealth__fill[b-w5lsgfl629] { transition: none; }
}
/* /Components/Cards/CardBrowser.razor.rz.scp.css */
.cf-browser[b-85v6qucxwk] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

.cf-browser--compact[b-85v6qucxwk] {
    position: relative;
    min-inline-size: 0;
    block-size: 100%;
    contain: inline-size;
}

.cf-browser__compact-bar[b-85v6qucxwk] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--cf-space-2);
    min-block-size: 0;
    min-inline-size: 0;
    padding: var(--cf-space-2) var(--cf-space-3);
    border-block-end: 1px solid var(--cf-border);
    background: var(--cf-bg);
    /* Local: the single compact toolbar stays above its own results and below its filter overlay. */
    z-index: 1;
}

.cf-browser__compact-bar .cf-browser__search[b-85v6qucxwk] {
    min-inline-size: 0;
    margin: 0;
}

.cf-browser__search--compact input[b-85v6qucxwk] {
    block-size: 40px;
    padding-inline-end: 44px;
}

.cf-browser__search--compact .cf-browser__clear[b-85v6qucxwk] {
    inset-inline-end: 9px;
}

.cf-browser__compact-filters[b-85v6qucxwk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cf-space-1);
    min-block-size: 40px;
    padding-inline: var(--cf-space-3);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    background: var(--cf-surface);
    color: var(--cf-text);
    font: 600 var(--cf-text-sm) var(--cf-font-ui);
    cursor: pointer;
}

.cf-browser__compact-filters:hover[b-85v6qucxwk],
.cf-browser__compact-filters[aria-expanded="true"][b-85v6qucxwk] {
    border-color: var(--cf-brand);
    background: color-mix(in srgb, var(--cf-brand) 8%, var(--cf-surface));
}

.cf-browser__compact-filters:focus-visible[b-85v6qucxwk] {
    outline: none;
    box-shadow: 0 0 0 2px var(--cf-bg), 0 0 0 4px var(--cf-brand);
}

/* Columns trigger - same affordance as the Filters trigger, shown only for the row view (the only view with
   columns to configure). It sits in both the compact bar and the full filter row. */
.cf-browser__columns-trigger[b-85v6qucxwk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cf-space-1);
    min-block-size: 34px;
    padding-inline: var(--cf-space-2);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    background: var(--cf-surface);
    color: var(--cf-text);
    font: 600 var(--cf-text-sm) var(--cf-font-ui);
    cursor: pointer;
}

.cf-browser--compact .cf-browser__columns-trigger[b-85v6qucxwk] { min-block-size: 40px; padding-inline: var(--cf-space-3); }

.cf-browser__columns-trigger:hover[b-85v6qucxwk],
.cf-browser__columns-trigger--on[b-85v6qucxwk] {
    border-color: var(--cf-brand);
    background: color-mix(in srgb, var(--cf-brand) 8%, var(--cf-surface));
}

.cf-browser__columns-trigger:focus-visible[b-85v6qucxwk] {
    outline: none;
    box-shadow: 0 0 0 2px var(--cf-bg), 0 0 0 4px var(--cf-brand);
}

@media (pointer: coarse) {
    .cf-browser__columns-trigger[b-85v6qucxwk] { min-block-size: 44px; }
}

.cf-browser__filter-count[b-85v6qucxwk] {
    display: inline-grid;
    place-items: center;
    min-inline-size: 21px;
    block-size: 21px;
    padding-inline: 5px;
    border-radius: var(--cf-radius-pill);
    background: var(--cf-brand);
    color: var(--cf-brand-contrast);
    font: 700 11px/1 var(--cf-font-mono);
}

.cf-browser--compact .cf-browser__scroll[b-85v6qucxwk] {
    flex: 1 1 0;
    min-block-size: 0;
    min-inline-size: 0;
    overflow: auto;
    padding: var(--cf-space-2) var(--cf-space-3) var(--cf-space-4);
}

/* The short-height Curve dock cannot fit a useful filter row below its 58px compact toolbar. Let the
   contained popover overlay that toolbar so its header stays visible and its body still exposes complete
   filter controls. Ledger has enough block space and keeps the below-toolbar placement. */
@media (min-width: 961px) and (max-height: 699px) {
    .cf-browser--curve-dock[b-85v6qucxwk]  .cf-filter-surface--popover {
        inset-block-start: 0;
        max-block-size: 100%;
    }
}

/* ---- toolbar (sticky) ---- */
.cf-browser__bar[b-85v6qucxwk] {
    position: sticky;
    top: 0;
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- local stack: above the
       scrolling card body, below the deck-editor's own chrome (40/50) + lane clearance (100); not cross-surface */
    z-index: 20;
    background: var(--cf-bg);
    padding: 18px 24px 12px;
    border-bottom: 1px solid var(--cf-border);
}

.cf-browser__search[b-85v6qucxwk] { position: relative; margin-bottom: 12px; }
.cf-browser__search[b-85v6qucxwk]  .cf-browser__search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cf-text-muted);
    pointer-events: none;
}
.cf-browser__search input[b-85v6qucxwk] {
    width: 100%;
    height: 44px;
    border-radius: var(--cf-radius-md);
    border: 1px solid var(--cf-border-strong);
    background: var(--cf-surface);
    padding: 0 76px 0 42px;
    font-size: 15px;
    color: var(--cf-text);
    font-family: var(--cf-font-ui);
}
.cf-browser__search input:focus-visible[b-85v6qucxwk] { outline: none; border-color: var(--cf-brand); box-shadow: 0 0 0 2px var(--cf-bg), 0 0 0 4px var(--cf-brand); }
.cf-browser__search input[b-85v6qucxwk]::placeholder { color: var(--cf-text-muted); }
.cf-browser__clear[b-85v6qucxwk],
.cf-browser__help[b-85v6qucxwk] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cf-surface-2);
    color: var(--cf-text-muted);
}
.cf-browser__clear[b-85v6qucxwk] { right: 42px; }
.cf-browser__help[b-85v6qucxwk] { right: 10px; font-weight: 700; font-size: 14px; line-height: 1; }
.cf-browser__clear:hover[b-85v6qucxwk],
.cf-browser__help:hover[b-85v6qucxwk],
.cf-browser__help--on[b-85v6qucxwk] { background: var(--cf-surface-hover); color: var(--cf-text); }

.cf-browser__filters[b-85v6qucxwk] { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.cf-browser__filter-grp[b-85v6qucxwk] { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.cf-browser__glabel[b-85v6qucxwk] { font-family: var(--cf-font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cf-text-muted); }

.cf-fchip[b-85v6qucxwk] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 11px;
    border-radius: var(--cf-radius-pill);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    color: var(--cf-text);
    transition: background var(--cf-dur-fast), border-color var(--cf-dur-fast), color var(--cf-dur-fast);
}
.cf-fchip:hover[b-85v6qucxwk] { border-color: var(--cf-border-strong); }
.cf-fchip--on[b-85v6qucxwk] { background: color-mix(in srgb, var(--cf-brand) 10%, var(--cf-surface)); border-color: var(--cf-brand); color: var(--cf-brand); }
.cf-fchip--on.cf-fchip--fac[b-85v6qucxwk] { background: color-mix(in srgb, var(--fac) 12%, var(--cf-surface)); border-color: var(--fac); color: var(--fac); }
.cf-fchip:focus-visible[b-85v6qucxwk] { outline: none; box-shadow: 0 0 0 2px var(--cf-bg), 0 0 0 4px var(--cf-brand); }

.cf-browser__view-toggle[b-85v6qucxwk] { display: inline-flex; border: 1px solid var(--cf-border-strong); border-radius: var(--cf-radius-md); overflow: hidden; margin-left: auto; }
.cf-browser__view-toggle button[b-85v6qucxwk] {
    width: 38px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cf-surface);
    color: var(--cf-text-muted);
    border: 0;
    cursor: pointer;
}
.cf-browser__view-toggle button + button[b-85v6qucxwk] { border-left: 1px solid var(--cf-border); }
.cf-browser__view-toggle button.cf-browser__view-btn--on[b-85v6qucxwk] { background: var(--cf-brand); color: var(--cf-brand-contrast); }
.cf-browser__view-toggle button:focus-visible[b-85v6qucxwk] { outline: none; box-shadow: inset 0 0 0 2px var(--cf-brand); }

/* "More filters" disclosure - the grammar-term chip drawer (attribute / keyword / struggle icon). */
.cf-browser__more-toggle[b-85v6qucxwk] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px;
    border-radius: var(--cf-radius-pill);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    background: none;
    border: 1px dashed var(--cf-border-strong);
    color: var(--cf-text-muted);
}
.cf-browser__more-toggle:hover[b-85v6qucxwk] { background: var(--cf-surface-hover); color: var(--cf-text); }
.cf-browser__more-toggle--on[b-85v6qucxwk] { border-style: solid; color: var(--cf-text); }
.cf-browser__more-toggle:focus-visible[b-85v6qucxwk] { outline: none; box-shadow: 0 0 0 2px var(--cf-bg), 0 0 0 4px var(--cf-brand); }

.cf-browser__more[b-85v6qucxwk] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--cf-border);
}

/* Coarse pointers (touch): comfortable ~44px tap targets for the primary filter/view controls, and a 16px
   search font - anything smaller makes iOS Safari auto-zoom the viewport on focus (the viewport meta
   deliberately leaves user scaling enabled). */
@media (pointer: coarse) {
    .cf-browser__search input[b-85v6qucxwk] { padding-right: 108px; font-size: 16px; }
    .cf-browser__clear[b-85v6qucxwk],
    .cf-browser__help[b-85v6qucxwk] { width: 44px; height: 44px; }
    .cf-browser__clear[b-85v6qucxwk] { right: 58px; }
    .cf-browser__help[b-85v6qucxwk] { right: 6px; }
    .cf-fchip[b-85v6qucxwk] { height: 44px; }
    .cf-browser__more-toggle[b-85v6qucxwk] { height: 44px; }
    .cf-browser__view-toggle button[b-85v6qucxwk] { width: 48px; height: 44px; }
    .cf-browser__compact-filters[b-85v6qucxwk] { min-block-size: 44px; }
    .cf-browser__search--compact .cf-browser__clear[b-85v6qucxwk] { inset-inline-end: 0; }
}

/* ---- results ---- */
.cf-browser__scroll[b-85v6qucxwk] { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; padding: 16px 24px 28px; scrollbar-width: thin; }
.cf-browser__scroll[b-85v6qucxwk]::-webkit-scrollbar { width: 10px; }
.cf-browser__scroll[b-85v6qucxwk]::-webkit-scrollbar-thumb { background: var(--cf-border-strong); border-radius: 6px; border: 3px solid var(--cf-bg); }
.cf-browser__result-count[b-85v6qucxwk] { font-size: 12.5px; color: var(--cf-text-muted); margin: 0 2px 12px; font-weight: 600; }
.cf-browser__result-count b[b-85v6qucxwk] { color: var(--cf-text); }

.cf-browser__card-grid[b-85v6qucxwk] { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 12px; }

.cf-browser__error[b-85v6qucxwk] {
    margin-bottom: var(--cf-space-4);
    padding: var(--cf-space-2) var(--cf-space-3);
    background: color-mix(in srgb, var(--cf-danger) 14%, var(--cf-surface));
    border: 1px solid var(--cf-danger);
    border-radius: var(--cf-radius-md);
    color: var(--cf-text);
    font-size: var(--cf-text-sm);
}

/* ---- the full bar, collapsed (narrow viewport) ----
   The markup ships BOTH filter affordances and these rules pick one, so a phone's very first paint is already
   correct - see the comment in CardBrowser.razor. 960px is the deck editor's own narrow-workspace edge, so the
   pool and its host switch together. The compact PROFILES are excluded throughout: their bar is a separate
   element that is collapsed at every width. */
.cf-browser:not(.cf-browser--compact) .cf-browser__compact-filters[b-85v6qucxwk] { display: none; }

@media (max-width: 960px) {
    /* The chip rail, its disclosure drawer, and the view toggle inside it all fold into the Filters sheet.
       The Columns trigger folds away with them: it belongs to the row view, and the view toggle that reaches
       the row view is itself collapsed here. (A compact profile is always in the row view and keeps its own
       Columns trigger on its own bar.) */
    .cf-browser:not(.cf-browser--compact) .cf-browser__filters[b-85v6qucxwk],
    .cf-browser:not(.cf-browser--compact) .cf-browser__more[b-85v6qucxwk] { display: none; }

    .cf-browser:not(.cf-browser--compact) .cf-browser__compact-filters[b-85v6qucxwk] { display: inline-flex; }

    .cf-browser:not(.cf-browser--compact) .cf-browser__bar[b-85v6qucxwk] {
        /* Search and trigger share one row. Relative rather than sticky - a phone's bar scrolls away with
           the page so the card grid gets the whole viewport - and relative rather than static so the bar
           stays the containing block for anything positioned against it, exactly as the compact profile's
           own bar is. */
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--cf-space-2);
        padding: var(--cf-space-2) var(--cf-space-3);
    }

    .cf-browser:not(.cf-browser--compact) .cf-browser__bar .cf-browser__search[b-85v6qucxwk] { margin-bottom: 0; }
}

/* Past the breakpoint the collapsed affordances are inert. The sheet is hidden too, not just the trigger: a
   window widened while it was open would otherwise leave its full-screen scrim over the page. */
@media (min-width: 961px) {
    .cf-browser:not(.cf-browser--compact) .cf-browser__compact-sheet[b-85v6qucxwk] { display: none; }
}

@media (max-width: 640px) {
    .cf-browser__bar[b-85v6qucxwk] { padding: var(--cf-space-3) var(--cf-space-3) var(--cf-space-2); }
    .cf-browser__search input[b-85v6qucxwk] { padding-right: 108px; font-size: 16px; }
    .cf-browser__clear[b-85v6qucxwk],
    .cf-browser__help[b-85v6qucxwk] { width: 44px; height: 44px; }
    .cf-browser__clear[b-85v6qucxwk] { right: 58px; }
    .cf-browser__help[b-85v6qucxwk] { right: 6px; }
    .cf-browser__scroll[b-85v6qucxwk] { padding: var(--cf-space-3) var(--cf-space-2) var(--cf-space-5); }
    .cf-browser__card-grid[b-85v6qucxwk] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--cf-space-2);
    }
}
/* /Components/Cards/CardDetailPopover.razor.rz.scp.css */
/* Floating hover preview. position:fixed escapes the scrolling column; JS (cfEditor.placePopover) sets
   left/top. Shrink-wraps the rendered card frame (CardFrameStandard, via .cf-cf-mount's calc'd box) plus
   a slim caption. Uses the global @keyframes cf-pop-in (animation names aren't scoped). */
.cf-card-detail-popover[b-83qebdvy9c] {
    position: fixed;
    z-index: var(--cf-z-tooltip);
    /* Enlarge the rules text beyond the frame's display scale (the frame is read here, not just shown):
       see the --cf-text-scale knob in card-frames.css. Frame display scale is per-host (Scale parameter);
       the inline max-width tracks it so max-content sizes to the rendered frame without clipping. */
    --cf-text-scale: 1.1;
    width: max-content;
    pointer-events: none;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-3);
    padding: 8px;
    animation: cf-pop-in 0.12s ease;
}

/* caption beneath the frame - the set name (left) + the in-deck tally (right) */
.cf-card-detail-popover__caption[b-83qebdvy9c] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 0 3px 1px;
    font-size: 11.5px;
    color: var(--cf-text-muted);
}
.cf-card-detail-popover__caption .cf-card-detail-popover__pack[b-83qebdvy9c] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
.cf-card-detail-popover__caption .cf-card-detail-popover__count[b-83qebdvy9c] {
    margin-left: auto;
    flex: 0 0 auto;
    font-family: var(--cf-font-mono);
    font-weight: 700;
    color: var(--cf-text);
    font-variant-numeric: tabular-nums;
}
.cf-card-detail-popover__caption .cf-card-detail-popover__count .cf-card-detail-popover__sep[b-83qebdvy9c] { color: var(--cf-text-muted); margin: 0 1px; }
.cf-card-detail-popover__caption .cf-card-detail-popover__count .cf-card-detail-popover__label[b-83qebdvy9c] { color: var(--cf-text-muted); font-weight: 600; font-family: var(--cf-font-ui); margin-left: 3px; }
/* /Components/Cards/CardFilterSurface.razor.rz.scp.css */
.cf-filter-surface[b-9jp95ogo44] {
    color: var(--cf-text);
    min-block-size: 0;
    min-inline-size: 0;
}

.cf-filter-surface--popover[b-9jp95ogo44] {
    position: absolute;
    display: flex;
    flex-direction: column;
    inset-block-start: 58px;
    inset-inline-end: var(--cf-space-3);
    inline-size: min(560px, calc(100% - (2 * var(--cf-space-3))));
    max-block-size: min(70vh, 620px, calc(100% - 58px - var(--cf-space-3)));
    overflow: hidden;
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-lg);
    background: var(--cf-surface);
    box-shadow: var(--cf-shadow-3);
    z-index: var(--cf-z-dropdown);
}

.cf-filter-surface--sheet[b-9jp95ogo44] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    block-size: 100vh;
    block-size: 100dvh;
    padding: var(--cf-space-3);
    padding-block-end: max(var(--cf-space-3), env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--cf-overlay-dark) 58%, transparent);
    z-index: var(--cf-z-dialog);
}

.cf-filter-surface__panel[b-9jp95ogo44] {
    display: flex;
    flex-direction: column;
    inline-size: min(680px, 100%);
    max-block-size: min(82dvh, 760px);
    min-block-size: 0;
    min-inline-size: 0;
    overflow: hidden;
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-lg) var(--cf-radius-lg) 0 0;
    background: var(--cf-surface);
    box-shadow: var(--cf-shadow-3);
}

.cf-filter-surface__head[b-9jp95ogo44] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-block-size: 48px;
    padding: var(--cf-space-2) var(--cf-space-3);
    border-block-end: 1px solid var(--cf-border);
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-lg);
    font-weight: 700;
}

.cf-filter-surface__close[b-9jp95ogo44] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    border: 1px solid var(--cf-border);
    border-radius: 50%;
    background: var(--cf-surface-2);
    color: var(--cf-text);
    cursor: pointer;
}

.cf-filter-surface__close:focus-visible[b-9jp95ogo44] {
    outline: none;
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand);
}

.cf-filter-surface__body[b-9jp95ogo44] {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3);
    max-block-size: inherit;
    min-block-size: 0;
    min-inline-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--cf-space-3);
}

.cf-filter-surface--popover > .cf-filter-surface__body[b-9jp95ogo44] {
    flex: 1 1 auto;
    max-block-size: none;
}

.cf-filter-surface__panel > .cf-filter-surface__body[b-9jp95ogo44] {
    max-block-size: calc(min(82dvh, 760px) - 49px);
}

@media (pointer: coarse) {
    .cf-filter-surface__close[b-9jp95ogo44] { inline-size: 44px; block-size: 44px; }
}
/* /Components/Cards/CardFrameGallery.razor.rz.scp.css */
.cf-card-frame-gallery[b-1dh5l6nse6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
}

.cf-card-frame-gallery__item[b-1dh5l6nse6] {
    position: relative;
}

.cf-card-frame-gallery__btn[b-1dh5l6nse6] {
    display: block;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    border-radius: 8px;
}

.cf-card-frame-gallery__btn:focus-visible[b-1dh5l6nse6] {
    outline: none;
    box-shadow: 0 0 0 2px var(--cf-bg), 0 0 0 4px var(--cf-brand);
}

.cf-card-frame-gallery__btn--at-limit[b-1dh5l6nse6] {
    opacity: 0.5;
    cursor: default;
}

.cf-card-frame-gallery__item--selected .cf-card-frame-gallery__btn[b-1dh5l6nse6] {
    box-shadow: 0 0 0 3px var(--cf-brand);
}

.cf-card-frame-gallery__qty[b-1dh5l6nse6] {
    position: absolute;
    top: 8px;
    right: 8px;
    height: 22px;
    min-width: 22px;
    padding: 0 5px;
    border-radius: 11px;
    background: var(--cf-brand);
    color: var(--cf-brand-contrast);
    font-size: 11px;
    font-weight: 700;
    font-family: var(--cf-font-mono);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1;
}

.cf-card-frame-gallery__qty--at-limit[b-1dh5l6nse6] {
    background: color-mix(in srgb, var(--cf-text-muted) 60%, transparent);
    color: var(--cf-bg);
}
/* /Components/Cards/CardPoolColumnPicker.razor.rz.scp.css */
/* Column checklist inside the shared filter surface. Two columns of ticks so the whole registry is visible
   without scrolling the popover; tokens come from app.css (--cf-*). */
.cf-pool-columns[b-6k7a4v4mg9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--cf-space-1) var(--cf-space-3);
}

.cf-pool-columns__item[b-6k7a4v4mg9] {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2);
    min-height: 32px;
    cursor: pointer;
    font-size: 13px;
    color: var(--cf-text);
}

.cf-pool-columns__item input[b-6k7a4v4mg9] {
    width: 16px;
    height: 16px;
    accent-color: var(--cf-brand);
    cursor: pointer;
}

/* Name and Quantity are structural - shown ticked and disabled so the list still says they're columns. */
.cf-pool-columns__item--fixed[b-6k7a4v4mg9] {
    cursor: default;
    color: var(--cf-text-muted);
}

.cf-pool-columns__item--fixed input[b-6k7a4v4mg9] { cursor: default; }

@media (pointer: coarse) {
    .cf-pool-columns[b-6k7a4v4mg9] { grid-template-columns: minmax(0, 1fr); }
    .cf-pool-columns__item[b-6k7a4v4mg9] { min-height: 44px; }
    .cf-pool-columns__item input[b-6k7a4v4mg9] { width: 20px; height: 20px; }
}
/* /Components/Cards/CardPoolTable.razor.rz.scp.css */
/* Throneteki/ThronesDB-style ledger - the card browser's one row-based view. The sticky header and every row
   share one grid whose track list the component composes from the visible columns, so the columns stay aligned
   however the set is filtered. Sizing lives here: each column owns a --cf-pool-track-* custom property, set
   per profile below. Tokens come from app.css (--cf-*); child components (Crest, Icon) are reached with
   ::deep. Visual spec: docs/wireframes/design_handoff_ledger_view. */
.cf-card-pool-table[b-uropo1ti1u] {
    /* max-content so a wide column set can overflow (.cf-browser__scroll scrolls it horizontally) rather than
       squeezing the tracks; min-width so a narrow set still fills the panel instead of stranding a gap. */
    width: max-content;
    min-width: 100%;
    border: 1px solid var(--cf-border);
    background: var(--cf-surface);
}

/* The wrapper is the profile-local sizing boundary. Keeping containment off the role=table node preserves
   its semantic surface while allowing a deck panel to reflow independently of the page width. */
.cf-card-pool-table-host[b-uropo1ti1u] {
    container: card-pool / inline-size;
    min-height: 0;
    min-width: 0;
}

/* Per-column tracks. The component names these in grid-template-columns; a column the user has hidden simply
   contributes no track. The dense Standard profile (the Tapestry cards panel) keeps the stat columns to a
   badge's width so the tram-lines stay tight. */
.cf-card-pool-table--standard[b-uropo1ti1u] {
    --cf-pool-track-quantity: auto;
    --cf-pool-track-name: minmax(70px, 24rem);
    --cf-pool-track-cost: 34px;
    --cf-pool-track-strength: 34px;
    --cf-pool-track-loyalty: 28px;
    --cf-pool-track-icons: 62px;
    --cf-pool-track-type: 26px;
    --cf-pool-track-faction: 26px;
    --cf-pool-track-attributes: minmax(90px, .8fr);
    --cf-pool-track-pack: minmax(100px, .8fr);
    --cf-pool-track-momentum: 34px;
    --cf-pool-track-spoils: 34px;
    --cf-pool-track-levy: 34px;
}

.cf-card-pool-table--ledger-rich[b-uropo1ti1u] {
    --cf-pool-track-quantity: 98px;
    --cf-pool-track-name: minmax(160px, 1fr);
    --cf-pool-track-cost: 48px;
    --cf-pool-track-strength: 52px;
    --cf-pool-track-loyalty: 44px;
    --cf-pool-track-icons: 84px;
    --cf-pool-track-type: 84px;
    --cf-pool-track-faction: 76px;
    --cf-pool-track-attributes: minmax(100px, .8fr);
    --cf-pool-track-pack: minmax(110px, .8fr);
    --cf-pool-track-momentum: 62px;
    --cf-pool-track-spoils: 62px;
    --cf-pool-track-levy: 62px;
}

.cf-card-pool-table--curve-dock[b-uropo1ti1u] {
    --cf-pool-track-quantity: 98px;
    --cf-pool-track-name: minmax(120px, 1fr);
    --cf-pool-track-cost: 44px;
    --cf-pool-track-strength: 44px;
    --cf-pool-track-loyalty: 40px;
    --cf-pool-track-icons: 62px;
    --cf-pool-track-type: 60px;
    --cf-pool-track-faction: 60px;
    --cf-pool-track-attributes: minmax(80px, .7fr);
    --cf-pool-track-pack: minmax(90px, .7fr);
    --cf-pool-track-momentum: 54px;
    --cf-pool-track-spoils: 54px;
    --cf-pool-track-levy: 54px;
}

.cf-card-pool-table__head[b-uropo1ti1u],
.cf-card-pool-table__row[b-uropo1ti1u] {
    display: grid; /* grid-template-columns is composed inline from the visible columns */
    align-items: center;
    column-gap: 7px;
    padding: 0 10px;
}

/* ---- sticky header (sticks to the top of CardBrowser's .browser-scroll) ---- */
.cf-card-pool-table__head[b-uropo1ti1u] {
    position: sticky;
    top: 0;
    z-index: 3;
    height: var(--lhead-height, 38px);
    background: var(--cf-surface-2);
    border-bottom: 1px solid var(--cf-border-strong);
    font-family: var(--cf-font-display);
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cf-text);
}
.cf-card-pool-table__head-cost[b-uropo1ti1u],
.cf-card-pool-table__head-strength[b-uropo1ti1u],
.cf-card-pool-table__head-type[b-uropo1ti1u],
.cf-card-pool-table__head-faction[b-uropo1ti1u],
.cf-card-pool-table__head--loyalty[b-uropo1ti1u],
.cf-card-pool-table__head--icons[b-uropo1ti1u],
.cf-card-pool-table__head--momentum[b-uropo1ti1u],
.cf-card-pool-table__head--spoils[b-uropo1ti1u],
.cf-card-pool-table__head--levy[b-uropo1ti1u] {
    text-align: center;
    color: var(--cf-text-muted);
    font-size: 12.5px;
}

/* sortable column headers - bare buttons that inherit the label type, with a hover/active brand tint and a
   small direction caret. Click the active column again to flip (handled in code). */
.cf-card-pool-table__sort[b-uropo1ti1u] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    min-height: 24px; /* sortable headers are a >=24px hit target (WCAG 2.5.8) within the 38px header */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.cf-card-pool-table__head-cost .cf-card-pool-table__sort[b-uropo1ti1u],
.cf-card-pool-table__head-strength .cf-card-pool-table__sort[b-uropo1ti1u],
.cf-card-pool-table__head-type .cf-card-pool-table__sort[b-uropo1ti1u],
.cf-card-pool-table__head-faction .cf-card-pool-table__sort[b-uropo1ti1u],
.cf-card-pool-table__head--loyalty .cf-card-pool-table__sort[b-uropo1ti1u],
.cf-card-pool-table__head--icons .cf-card-pool-table__sort[b-uropo1ti1u],
.cf-card-pool-table__head--momentum .cf-card-pool-table__sort[b-uropo1ti1u],
.cf-card-pool-table__head--spoils .cf-card-pool-table__sort[b-uropo1ti1u],
.cf-card-pool-table__head--levy .cf-card-pool-table__sort[b-uropo1ti1u] {
    width: 100%;
    justify-content: center;
}
.cf-card-pool-table__sort:hover[b-uropo1ti1u] { color: var(--cf-brand); }
.cf-card-pool-table__sort--active[b-uropo1ti1u] { color: var(--cf-brand); }
.cf-card-pool-table__sort:focus-visible[b-uropo1ti1u] { outline: none; box-shadow: inset 0 0 0 2px var(--cf-brand); border-radius: 2px; }
/* faint resting up/down hint on every sortable column; the active column's direction caret is full strength */
.cf-card-pool-table__caret[b-uropo1ti1u] { font-size: 9px; line-height: 1; opacity: .35; }
.cf-card-pool-table__sort--active .cf-card-pool-table__caret[b-uropo1ti1u] { opacity: 1; }

/* ---- rows ---- */
.cf-card-pool-table__row[b-uropo1ti1u] {
    min-height: var(--lrow-min-height, 40px);
    border-bottom: 1px solid var(--cf-border);
    transition: background .1s;
}
.cf-card-pool-table__row:last-child[b-uropo1ti1u] { border-bottom: 0; }
.cf-card-pool-table__row:hover[b-uropo1ti1u] { background: var(--cf-surface-2); }
.cf-card-pool-table__row--in-deck[b-uropo1ti1u] { background: color-mix(in srgb, var(--cf-brand) 7%, var(--cf-surface)); }
.cf-card-pool-table__row--in-deck:hover[b-uropo1ti1u] { background: color-mix(in srgb, var(--cf-brand) 11%, var(--cf-surface)); }

/* quantity: 0·1·2·3 segmented selector - the signature ThronesDB inline control */
.cf-card-pool-table__qty-cell[b-uropo1ti1u] { min-width: 0; }
.cf-card-pool-table__qty[b-uropo1ti1u] {
    display: inline-flex;
    width: max-content;
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-sm);
    overflow: hidden;
}
/* the group itself is the tab stop now (buttons are tabindex=-1) - give it the focus ring */
.cf-card-pool-table__qty:focus-visible[b-uropo1ti1u] { outline: none; box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 3px var(--cf-brand); }
.cf-card-pool-table__qty-btn[b-uropo1ti1u] {
    width: 24px; /* >=24px hit target (WCAG 2.5.8); segments are adjacent so the spacing exception won't apply */
    height: 25px;
    padding: 0;
    border: 0;
    cursor: pointer;
    background: var(--cf-surface);
    color: var(--cf-text-muted);
    font-family: var(--cf-font-mono);
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background .1s, color .1s;
}
.cf-card-pool-table__qty-btn + .cf-card-pool-table__qty-btn[b-uropo1ti1u] { border-left: 1px solid var(--cf-border); }
.cf-card-pool-table__qty-btn:hover:not(:disabled, .cf-card-pool-table__qty-btn--on, .cf-card-pool-table__qty-btn--zero)[b-uropo1ti1u] { background: var(--cf-surface-2); color: var(--cf-text); }
.cf-card-pool-table__qty-btn--on[b-uropo1ti1u] { background: var(--cf-brand); color: var(--cf-brand-contrast); } /* a committed count (>=1) */
/* the current "0" - a quiet MUTED outline, not a crimson chip: across a 188-row pool, a crimson ring on
   every not-in-deck row painted a faint crimson column. Crimson in this column now means a count >=1 only. */
.cf-card-pool-table__qty-btn--zero[b-uropo1ti1u] { color: var(--cf-text-muted); box-shadow: inset 0 0 0 1px var(--cf-border); }
.cf-card-pool-table__qty-btn:disabled[b-uropo1ti1u] { opacity: .5; cursor: not-allowed; } /* still legible (the digit shows the copy limit) */
.cf-card-pool-table__qty-btn:focus-visible[b-uropo1ti1u] { outline: none; box-shadow: inset 0 0 0 2px var(--cf-brand); position: relative; z-index: 1; }
.cf-card-pool-table__qty-btn--on:focus-visible[b-uropo1ti1u] { box-shadow: inset 0 0 0 2px var(--cf-brand-contrast); } /* ring visible on the red fill */

/* destiny "Set" (a singleton, not a 0..N copy count) + the non-countable token dash */
.cf-card-pool-table__destiny[b-uropo1ti1u] {
    height: 25px;
    padding: 0 11px;
    border-radius: var(--cf-radius-sm);
    cursor: pointer;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    color: var(--cf-brand);
    font-family: var(--cf-font-mono);
    font-size: 11px;
    font-weight: 700;
}
.cf-card-pool-table__destiny:hover[b-uropo1ti1u] { background: #f6efe1; border-color: var(--cf-brand); } /* stylelint-disable-line color-no-hex -- bespoke: warm destiny-hover wash */
.cf-card-pool-table__destiny:focus-visible[b-uropo1ti1u] { outline: none; box-shadow: inset 0 0 0 2px var(--cf-brand); }
.cf-card-pool-table__none[b-uropo1ti1u] { color: var(--cf-text-muted); font-size: 12px; } /* legible (was border-strong = 3.64:1, below AA) */

/* name - display font, single line, ellipsis; unique cards get a leading star */
.cf-card-pool-table__name-cell[b-uropo1ti1u] { display: flex; align-items: baseline; min-width: 0; }
.cf-card-pool-table__name-cell .cf-card-pool-table__name[b-uropo1ti1u] {
    font-family: var(--cf-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--cf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.cf-card-pool-table__name-cell .cf-card-pool-table__name .cf-card-pool-table__star[b-uropo1ti1u] { color: var(--cf-faction-saracenenvoy); margin-right: 3px; }
/* off-faction tint (mirrors the deck list); the hover rule below is equal-specificity and later, so a
   hovered row still reads brand. */
.cf-card-pool-table__row--off .cf-card-pool-table__name-cell .cf-card-pool-table__name[b-uropo1ti1u] { color: var(--fac); }
.cf-card-pool-table__row:hover .cf-card-pool-table__name-cell .cf-card-pool-table__name[b-uropo1ti1u] { color: var(--cf-brand); }

/* cost · strength columns - the coin/shield badges the list view used, so the two stats stay distinguishable
   by shape rather than by column position alone. Scaled down to sit inside a dense row. */
.cf-card-pool-table__cell-cost[b-uropo1ti1u],
.cf-card-pool-table__cell-strength[b-uropo1ti1u] { display: flex; justify-content: center; }
.cf-card-pool-table__cell-cost[b-uropo1ti1u]  .cf-cost,
.cf-card-pool-table__cell-strength[b-uropo1ti1u]  .cf-power {
    min-width: 24px;
    height: 22px;
    font-size: 12px;
}

/* the remaining printed-number columns (loyalty, quest stats) stay plain tabular digits */
.cf-card-pool-table__cell--loyalty[b-uropo1ti1u],
.cf-card-pool-table__cell--momentum[b-uropo1ti1u],
.cf-card-pool-table__cell--spoils[b-uropo1ti1u],
.cf-card-pool-table__cell--levy[b-uropo1ti1u] {
    text-align: center;
    font-family: var(--cf-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--cf-text-muted);
    font-variant-numeric: tabular-nums;
}

.cf-card-pool-table__cell-type[b-uropo1ti1u] { display: flex; justify-content: center; color: var(--cf-text-muted); }
.cf-card-pool-table__cell-type[b-uropo1ti1u]  .cf-icon { width: 18px; height: 18px; }
.cf-card-pool-table__cell-faction[b-uropo1ti1u] { display: flex; justify-content: center; }
.cf-card-pool-table__cell-faction[b-uropo1ti1u]  .cf-crest { width: 17px; height: 17px; }

/* struggle icons - the row of icons a card carries, or a dash */
.cf-card-pool-table__cell--icons[b-uropo1ti1u] { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; }

/* the word beside an icon/crest in the roomier profiles (the legibility the flat list row had) */
.cf-card-pool-table__word[b-uropo1ti1u] {
    font-size: 12px;
    color: var(--cf-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.cf-card-pool-table--ledger-rich .cf-card-pool-table__cell-type[b-uropo1ti1u],
.cf-card-pool-table--ledger-rich .cf-card-pool-table__cell-faction[b-uropo1ti1u],
.cf-card-pool-table--curve-dock .cf-card-pool-table__cell-type[b-uropo1ti1u],
.cf-card-pool-table--curve-dock .cf-card-pool-table__cell-faction[b-uropo1ti1u] { justify-content: flex-start; gap: 5px; }

/* rows live in their own rowgroup so <Virtualize>'s spacers are never invalid children of role="table" */
.cf-card-pool-table__body[b-uropo1ti1u] { display: block; min-width: 0; }

/* Metadata stays textual, while the mobile fact labels are real DOM so the compact layout remains legible
   without relying on generated content. */
.cf-card-pool-table__head--attributes[b-uropo1ti1u],
.cf-card-pool-table__head--pack[b-uropo1ti1u],
.cf-card-pool-table__cell--attributes[b-uropo1ti1u],
.cf-card-pool-table__cell--pack[b-uropo1ti1u] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cf-card-pool-table__head--attributes[b-uropo1ti1u],
.cf-card-pool-table__head--pack[b-uropo1ti1u] { color: var(--cf-text-muted); }
.cf-card-pool-table__cell--attributes[b-uropo1ti1u],
.cf-card-pool-table__cell--pack[b-uropo1ti1u] { font-size: 12px; color: var(--cf-text-muted); }
.cf-card-pool-table__fact-label[b-uropo1ti1u] { display: none; }

/* An explicit text-and-border state cue supplements the in-deck row wash, including in grayscale. */
.cf-card-pool-table__in-deck-label[b-uropo1ti1u] {
    flex: 0 0 auto;
    margin-left: 6px;
    padding: 1px 4px;
    border: 1px solid currentcolor;
    border-radius: 999px;
    color: var(--cf-brand);
    font-family: var(--cf-font-mono);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
}

/* Narrow panels (a reflowed deck rail, a phone-width dock) stop being a shared grid: the row wraps and each
   cell carries its own label. That has to work for ANY column set, so it must not name grid areas - a picked
   column with no area would land wherever the grid felt like. Wider panels that simply run out of room scroll
   horizontally (.cf-browser__scroll) instead of dropping columns the user asked for. */
@container card-pool (width < 640px) {
    .cf-card-pool-table__head[b-uropo1ti1u],
    .cf-card-pool-table__row[b-uropo1ti1u] {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 3px 10px;
        height: auto;
        padding-top: 7px;
        padding-bottom: 7px;
    }

    .cf-card-pool-table__head[b-uropo1ti1u] { min-height: 44px; }

    /* Name takes its own line; the stats flow beneath it. */
    .cf-card-pool-table__head--name[b-uropo1ti1u],
    .cf-card-pool-table__cell--name[b-uropo1ti1u] { flex: 1 0 100%; }

    .cf-card-pool-table__cell--attributes[b-uropo1ti1u],
    .cf-card-pool-table__cell--pack[b-uropo1ti1u] { flex: 1 0 100%; }

    .cf-card-pool-table__fact-label[b-uropo1ti1u] {
        display: block;
        color: var(--cf-text-muted);
        font-family: var(--cf-font-display);
        font-size: 10px;
        font-weight: 700;
        text-align: left;
    }

    .cf-card-pool-table__cell--type[b-uropo1ti1u],
    .cf-card-pool-table__cell--faction[b-uropo1ti1u] { align-items: flex-start; flex-direction: column; justify-content: flex-start; }
}

/* Touch: every control in the ledger grows to a 44px target, and the tracks that hold them grow with it.
   Declared on .cf-card-pool-table so these win over the per-profile track blocks above (equal specificity,
   later in the file). */
@media (pointer: coarse) {
    .cf-card-pool-table[b-uropo1ti1u] {
        --cf-pool-track-quantity: 178px;
        --cf-pool-track-cost: 44px;
        --cf-pool-track-strength: 44px;
        --cf-pool-track-loyalty: 44px;
        --cf-pool-track-type: 44px;
        --cf-pool-track-faction: 44px;
        --cf-pool-track-momentum: 44px;
        --cf-pool-track-spoils: 44px;
        --cf-pool-track-levy: 44px;
    }
    .cf-card-pool-table__sort[b-uropo1ti1u] { min-width: 44px; min-height: 44px; }
    .cf-card-pool-table__qty-cell[b-uropo1ti1u] { display: flex; align-items: center; min-height: 44px; }
    .cf-card-pool-table__qty-btn[b-uropo1ti1u] { width: 44px; height: 44px; }
    .cf-card-pool-table__destiny[b-uropo1ti1u] { min-width: 44px; min-height: 44px; }
}

@media (forced-colors: active) {
    .cf-card-pool-table__in-deck-label[b-uropo1ti1u] { forced-color-adjust: none; border-color: CanvasText; color: CanvasText; }
}
/* /Components/Cards/CardReaderSheet.razor.rz.scp.css */
/* Shared mobile card reader. The dialog fills the viewport; the inline variant is a plain block. */
.cf-card-reader--dialog[b-ncsitkerb1] {
    position: fixed;
    inset: 0;
    z-index: var(--cf-z-dialog);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: var(--cf-space-3);
}

.cf-card-reader__scrim[b-ncsitkerb1] {
    position: fixed;
    inset: 0;
    border: 0;
    padding: 0;
    background: var(--cf-scrim);
}

.cf-card-reader__panel[b-ncsitkerb1] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cf-space-3);
    width: 100%;
    max-width: 640px;
    padding: var(--cf-space-3);
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg);
    container-type: inline-size;
}

.cf-card-reader__close[b-ncsitkerb1] {
    position: absolute;
    top: var(--cf-space-2);
    right: var(--cf-space-2);
    /* .cf-frame below is its own stacking context (transform: scale), so without an explicit order here
       it paints on top of this button at narrow panel widths where the frame's header overlaps it. */
    z-index: 1;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    font-size: 24px;
    color: var(--cf-text-muted);
    cursor: pointer;
}

/* .cf-card-reader__panel uses align-items: center, which gives its flex children (this one included) no
   definite inline size. The cqw-based fit rules below need the panel's content-box width to resolve
   through this element, so it must stretch to fill the panel itself; width: 100% does that without
   changing the panel's centring of its OTHER children (name, rules text, step controls). display: flex +
   justify-content: center re-centers this element's own content (the frame) now that the element itself
   is full-width. */
.cf-card-reader__frame[b-ncsitkerb1] {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* THE fit rule, and the reason this component's stylesheet has a ::deep in it.
   · .cf-frame-mount belongs to CardFrameStandard, a CHILD component. Blazor scoped CSS rewrites selectors
     with this component's scope attribute, which the child's elements do not carry - so without ::deep
     this rule silently matches nothing and the frame never fits. (Same trap MainLayout.razor.css:108
     documents.) A silent no-op here would defeat the whole feature, so do not "simplify" it away.
   · CardFrameStandard sets --cf-scale INLINE from its Scale parameter, so a stylesheet !important is what
     wins - and unlike a JS-measured scale it re-evaluates on rotation with no interop round-trip.
   600px is the frame's intrinsic width. The scale is measured against the PANEL's own content-box width
   (100cqw, via container-type: inline-size on .cf-card-reader__panel above), not the viewport - a vw-based
   constant can't account for the dialog wrapper's padding, the panel's own padding/border, AND whatever
   padding the inline-mode host adds on top, and any one fixed number is wrong for at least one of them.
   The THIRD term is a HEIGHT ceiling, and it is what keeps the transcript above the fold. Width-fit alone
   puts a 600x900 portrait frame at 413px tall on a 375px phone, and the reading starts below it - on a
   short phone (667px tall) that lands the rules text off-screen no matter how the transcript is ordered.
   --cf-reader-frame-block INHERITS, so a host whose reader is frame-only (the /cards two-column rail,
   where the transcript is display:none) raises it back and keeps the card at full scale; a custom property
   avoids re-fighting this rule's !important from the host stylesheet, where the rewritten ::deep selectors
   tie on specificity and bundle order would decide the winner. */
.cf-card-reader__frame[b-ncsitkerb1]  .cf-frame-mount {
    --cf-scale: min(var(--cf-reader-frame-scale), 100cqw / 600px, var(--cf-reader-frame-block, 50svh) / 900px) !important;
}

/* CardFaceView dispatches Quest cards to QuestCardAlt instead of CardFrameStandard, and that component
   mounts a DIFFERENT class - .cf-frame-quest-mount, not .cf-frame-mount - at a 900px intrinsic width
   (vs. 600px). A class selector matches exact tokens, so the rule above does not reach this mount at
   all; without this sibling rule a quest overflows the panel. This is NOT redundant with the rule
   above - do not merge or delete it. The ceiling is derived from --cf-reader-frame-scale x 600/900,
   which is exactly what CardFaceView computes for a quest at the portrait ceiling, so both frames land
   at the same effective on-screen size at full scale. */
.cf-card-reader__frame[b-ncsitkerb1]  .cf-frame-quest-mount {
    --cf-scale: min(calc(var(--cf-reader-frame-scale) * 600 / 900), 100cqw / 900px, var(--cf-reader-frame-block, 50svh) / 630px) !important;
}

.cf-card-reader__transcript[b-ncsitkerb1] {
    width: 100%;
    color: var(--cf-text);
}

/* On a phone the reading comes first and the frame second. Frame-first is right when both fit on one
   screen - recognition, then detail - but at 375px the frame is 406px tall even under the height ceiling
   above, and it pushed the rules text to y=700 of an 812px viewport with its own block crossing the fold.
   Recognition is already paid for here: the reader is opened by tapping a specific card, and the panel's
   own <h2> names it. Visual order only - the DOM keeps frame-then-transcript, so assistive tech reads the
   frame's aria-label (which carries the full card text) in the order it always has, and nothing in the
   frame is focusable, so tab order is unaffected. */
@media (max-width: 640px) {
    .cf-card-reader__frame[b-ncsitkerb1] {
        order: 1;
    }
}

.cf-card-reader__name[b-ncsitkerb1] {
    margin: 0;
    font-size: var(--cf-text-lg);
}

.cf-card-reader__title[b-ncsitkerb1] {
    margin: 0 0 var(--cf-space-2);
    color: var(--cf-text-muted);
    font-style: italic;
}

.cf-card-reader__facts[b-ncsitkerb1] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px var(--cf-space-3);
    margin: var(--cf-space-3) 0 0;
    font-size: var(--cf-text-sm);
}

.cf-card-reader__facts > div[b-ncsitkerb1] {
    display: contents;
}

.cf-card-reader__facts dt[b-ncsitkerb1] {
    color: var(--cf-text-muted);
}

.cf-card-reader__facts dd[b-ncsitkerb1] {
    margin: 0;
}

.cf-card-reader__rules p[b-ncsitkerb1] {
    margin: 0 0 var(--cf-space-2);
}

.cf-card-reader__steps[b-ncsitkerb1] {
    display: flex;
    align-items: center;
    gap: var(--cf-space-3);
}

.cf-card-reader__step[b-ncsitkerb1] {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    background: var(--cf-surface);
    font-size: var(--cf-text-lg);
    cursor: pointer;
}

.cf-card-reader__step:disabled[b-ncsitkerb1] {
    opacity: 0.45;
    cursor: default;
}

.cf-card-reader__tally[b-ncsitkerb1] {
    font-variant-numeric: tabular-nums;
    color: var(--cf-text-muted);
}
/* /Components/Cards/CardSearchGrammarHelp.razor.rz.scp.css */
.cf-card-search-grammar-help[b-3dpkw8rjbz] {
    margin: 0 0 12px;
    padding: 12px 14px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    font-size: 12px;
    color: var(--cf-text);
    display: grid;
    gap: 14px;
}

.cf-card-search-grammar-help h4[b-3dpkw8rjbz] {
    margin: 0 0 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cf-text-muted);
    display: flex;
    align-items: baseline;
}

.cf-card-search-grammar-help h4 .cf-card-search-grammar-help__ops[b-3dpkw8rjbz] { font-family: var(--cf-font-mono); letter-spacing: 0; text-transform: none; }

.cf-card-search-grammar-help ul[b-3dpkw8rjbz] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.cf-card-search-grammar-help li[b-3dpkw8rjbz] { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.cf-card-search-grammar-help code[b-3dpkw8rjbz] {
    font-family: var(--cf-font-mono);
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    border-radius: 4px;
    padding: 1px 5px;
    color: var(--cf-text);
}

.cf-card-search-grammar-help span[b-3dpkw8rjbz] { color: var(--cf-text-muted); }

.cf-card-search-grammar-help em[b-3dpkw8rjbz] {
    font-family: var(--cf-font-mono);
    font-style: normal;
    color: var(--cf-text);
    background: var(--cf-surface-2);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: auto;
}

.cf-card-search-grammar-help__note[b-3dpkw8rjbz] { margin: 0 0 6px; color: var(--cf-text-muted); line-height: 1.5; }

.cf-card-search-grammar-help__examples[b-3dpkw8rjbz] { gap: 4px; }
.cf-card-search-grammar-help__examples em[b-3dpkw8rjbz] { margin-left: 0; }
/* /Components/Cards/CardTile.razor.rz.scp.css */
.cf-card-tile[b-4gozmeg043] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2);
    width: 100%;
    text-align: left;
    font: inherit;
    padding: var(--cf-space-3);
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-top: 3px solid var(--fac, var(--cf-border-strong));
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-1);
    color: var(--cf-text);
    cursor: pointer;
    content-visibility: auto;
    contain-intrinsic-size: auto 210px;
    transition: border-color var(--cf-dur-fast) var(--cf-ease), box-shadow var(--cf-dur-fast) var(--cf-ease);
}

.cf-card-tile:hover[b-4gozmeg043] { border-color: var(--fac, var(--cf-border-strong)); box-shadow: var(--cf-shadow-2); }
.cf-card-tile--selected[b-4gozmeg043] { border-color: var(--cf-brand); box-shadow: inset 0 0 0 1px var(--cf-brand); }
.cf-card-tile:focus-visible[b-4gozmeg043] { outline: none; box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand); }

.cf-card-tile--at-limit[b-4gozmeg043] { opacity: 0.62; cursor: not-allowed; }
.cf-card-tile--at-limit[b-4gozmeg043]::after {
    content: "AT LIMIT";
    position: absolute;
    top: 9px;
    right: 9px;
    font-family: var(--cf-font-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cf-text-muted);
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    padding: 2px 6px;
    border-radius: var(--cf-radius-pill);
}

.cf-card-tile__art[b-4gozmeg043] {
    position: relative;
    height: 66px;
    overflow: hidden;
    border-radius: var(--cf-radius-sm);
    background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--fac, var(--cf-surface-2)) 14%, var(--cf-bg)) 0 6px,
        color-mix(in srgb, var(--fac, var(--cf-surface-2)) 7%, var(--cf-bg)) 6px 12px
    );
}
.cf-card-tile__art img[b-4gozmeg043] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.cf-card-tile__head[b-4gozmeg043] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cf-space-2); }
.cf-card-tile__head-text[b-4gozmeg043] { min-width: 0; }
.cf-card-tile__name[b-4gozmeg043],
.cf-card-tile__title[b-4gozmeg043] { display: block; }
.cf-card-tile__name[b-4gozmeg043] { font-family: var(--cf-font-display); font-size: 15px; font-weight: 700; line-height: 1.15; color: var(--cf-text); }
.cf-card-tile__name .cf-card-tile__star[b-4gozmeg043] { color: var(--cf-faction-saracenenvoy); margin-right: 2px; }
.cf-card-tile__title[b-4gozmeg043] { font-size: 11px; color: var(--cf-text-muted); font-style: italic; margin-top: 2px; }
.cf-card-tile__stats[b-4gozmeg043] { display: flex; gap: 6px; flex: 0 0 auto; }

.cf-card-tile__foot[b-4gozmeg043] { display: flex; align-items: center; justify-content: space-between; gap: var(--cf-space-2); margin-top: auto; }
.cf-card-tile__type[b-4gozmeg043] { font-family: var(--cf-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--cf-text-muted); text-transform: uppercase; }
.cf-card-tile__faction[b-4gozmeg043] { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--fac, var(--cf-text-muted)); }
.cf-card-tile__skills[b-4gozmeg043] { display: inline-flex; gap: 4px; }

/* in-flow with the name's first line (absolute, it covered the opening letters of every name) */
.cf-card-tile__count[b-4gozmeg043] {
    display: inline-flex;
    align-items: center;
    height: 19px;
    padding: 0 6px;
    margin-right: 6px;
    vertical-align: text-bottom;
    border-radius: var(--cf-radius-pill);
    font-family: var(--cf-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--cf-brand);
    color: var(--cf-brand-contrast);
    border: 1px solid var(--cf-brand-hover);
}
.cf-card-tile__count--zero[b-4gozmeg043] { background: var(--cf-surface-2); color: var(--cf-text-muted); border-color: var(--cf-border); }
.cf-card-tile__count--max[b-4gozmeg043] { background: var(--cf-warning); border-color: #6f4708; color: var(--cf-overlay-light); } /* stylelint-disable-line color-no-hex -- bespoke: deep-amber rim on the at-max count pip */
/* /Components/Cards/CostBadge.razor.rz.scp.css */
.cf-cost[b-c99chaljhb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 5px;
    border-radius: var(--cf-radius-pill);
    background: var(--cf-accent);
    color: var(--cf-accent-contrast);
    border: 1px solid color-mix(in srgb, var(--cf-accent) 68%, var(--cf-overlay-dark));
    font-weight: 700;
    font-size: var(--cf-text-sm);
    font-variant-numeric: tabular-nums;
    /* position context for the delta-direction chevron pip (.cf-cost__pip) */
    position: relative;
}

/* Categorical direction-of-change pip sitting in the coin's top-right; currentColor inherits the coin's ink
   so the chevron stays readable on either fill (parchment cream on green success, dark on amber warning). */
.cf-cost__pip[b-c99chaljhb] {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 7px;
    height: 7px;
    display: block;
    pointer-events: none;
}

.cf-cost--empty[b-c99chaljhb] {
    background: var(--cf-surface-2);
    color: var(--cf-text-muted);
    border-color: var(--cf-border-strong);
}

/* Live cost modified from its printed wealth (ENGINE_SPEC §6.2 / §6.2a). Cheaper after a reduction reads
   green; a Loyalty-surcharged, pricier cost reads amber (worse, system-wide - red is reserved for "illegal").
   Dark ink (not cream) clears AA on both fills; a cream inset ring is the non-colour "modified" tell that
   survives the badge shrinking to ~18px and survives colour-blindness - the coin shape + host tooltip do the
   rest, so colour is never the only signal. */
.cf-cost--better[b-c99chaljhb] {
    background: var(--cf-success);
    color: var(--game-parchment);
    border-color: color-mix(in srgb, var(--cf-success) 64%, var(--cf-overlay-dark));
    box-shadow: inset 0 0 0 0.75px #fff7ec; /* stylelint-disable-line color-no-hex -- bespoke: warm inner ring on the cost pip */
}

.cf-cost--worse[b-c99chaljhb] {
    background: var(--cf-warning);
    color: var(--cf-accent-contrast);
    border-color: color-mix(in srgb, var(--cf-warning) 64%, var(--cf-overlay-dark));
    box-shadow: inset 0 0 0 0.75px #fff7ec; /* stylelint-disable-line color-no-hex -- bespoke: warm inner ring on the cost pip */
}
/* /Components/Cards/Crest.razor.rz.scp.css */
.cf-crest[b-8whxi8pbbe] {
    display: inline-block;
    flex: 0 0 auto;
    width: 1em;
    height: 1em;
    background-color: currentColor;
    -webkit-mask: var(--cf-crest-url) no-repeat center / contain;
    mask: var(--cf-crest-url) no-repeat center / contain;
}
/* /Components/Cards/FactionBadge.razor.rz.scp.css */
/* `color` is set inline to the faction-ink token; crest + border + label all inherit it via currentColor. */
.cf-faction[b-rqtnnhxbp7] {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-2);
}

.cf-faction__crest[b-rqtnnhxbp7] {
    flex: 0 0 auto;
    width: 1.25em;
    height: 1.25em;
    background-color: currentColor;
    -webkit-mask: var(--cf-crest-url) no-repeat center / contain;
    mask: var(--cf-crest-url) no-repeat center / contain;
}

.cf-faction__label[b-rqtnnhxbp7] {
    font-weight: 600;
}

.cf-faction--compact[b-rqtnnhxbp7],
.cf-faction--full[b-rqtnnhxbp7] {
    padding: 2px var(--cf-space-3) 2px var(--cf-space-2);
    border: 1px solid currentColor;
    border-radius: var(--cf-radius-pill);
    background: color-mix(in srgb, currentColor 8%, var(--cf-surface));
    font-size: var(--cf-text-sm);
}

.cf-faction--compact .cf-faction__label[b-rqtnnhxbp7] {
    font-size: var(--cf-text-xs);
    letter-spacing: 0.04em;
}

.cf-faction--icon .cf-faction__crest[b-rqtnnhxbp7] {
    width: 1.6em;
    height: 1.6em;
}
/* /Components/Cards/FactionChip.razor.rz.scp.css */
/* Faction toggle chip - moved here from the per-page scoped sheets (was byte-identical in DeckListFilters
   and Browse). The .chip-row that lays these out stays with each page. The --fac accent comes from the
   button's own inline style, so .cf-fac-chip--on can color-mix against it. */
.cf-fac-chip[b-xwatcnfvy2] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 13px 0 11px;
    border-radius: var(--cf-radius-pill);
    font-size: 13px;
    font-weight: 600;
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    color: var(--cf-text);
    cursor: pointer;
}

.cf-fac-chip:hover[b-xwatcnfvy2] { border-color: var(--cf-border-strong); }

.cf-fac-chip--on[b-xwatcnfvy2] {
    color: var(--fac);
    background: color-mix(in srgb, var(--fac) 12%, var(--cf-surface));
    border-color: color-mix(in srgb, var(--fac) 45%, var(--cf-surface));
}

.cf-fac-chip:focus-visible[b-xwatcnfvy2] {
    outline: none;
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 3px var(--cf-brand);
}
/* /Components/Cards/PowerBadge.razor.rz.scp.css */
.cf-power[b-1gnkckbgp3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 28px;
    padding: 0 5px 4px;
    background: var(--cf-brand);
    color: var(--cf-brand-contrast);
    clip-path: polygon(50% 100%, 6% 72%, 6% 6%, 94% 6%, 94% 72%);
    font-weight: 700;
    font-size: var(--cf-text-sm);
    font-variant-numeric: tabular-nums;
}

.cf-power--empty[b-1gnkckbgp3] {
    background: var(--cf-surface-2);
    color: var(--cf-text-muted);
}

/* Live Power modified from its printed value (ENGINE_SPEC §11 stat fold). A buff reads green (stronger), a
   debuff amber (worse, matching the cost coin). Dark ink (vs the base's cream) both clears AA on the lighter
   fills AND flips the text lightness - a colour-blind-safe "modified" tell; a dark drop-shadow halo gives the
   clip-path shield the structural cue the coin gets from its inset ring (box-shadow can't follow the polygon). */
.cf-power--better[b-1gnkckbgp3] {
    background: var(--cf-success);
    color: var(--cf-accent-contrast);
    filter: drop-shadow(0 0 1.4px var(--cf-accent-contrast));
}

.cf-power--worse[b-1gnkckbgp3] {
    background: var(--cf-warning);
    color: var(--cf-accent-contrast);
    filter: drop-shadow(0 0 1.4px var(--cf-accent-contrast));
}
/* /Components/Cards/StruggleIcon.razor.rz.scp.css */
.cf-struggle[b-5mdhjg1p14] {
    display: inline-block;
    flex: 0 0 auto;
    background-color: var(--cf-struggle-color, currentColor);
    -webkit-mask: var(--cf-struggle-url) no-repeat center / contain;
    mask: var(--cf-struggle-url) no-repeat center / contain;
}

/* Per-type hue (Combat red · Guile green · Sorcery violet · Faith blue) so the four struggle types
   read by colour + shape, not silhouette alone. A context that needs a neutral/inherited glyph can
   still set --cf-struggle-color on the icon itself. */
.cf-struggle--combat[b-5mdhjg1p14] { --cf-struggle-color: var(--cf-struggle-combat); }
.cf-struggle--guile[b-5mdhjg1p14] { --cf-struggle-color: var(--cf-struggle-guile); }
.cf-struggle--sorcery[b-5mdhjg1p14] { --cf-struggle-color: var(--cf-struggle-sorcery); }
.cf-struggle--faith[b-5mdhjg1p14] { --cf-struggle-color: var(--cf-struggle-faith); }
/* /Components/Decks/DeckCard.razor.rz.scp.css */
/* Deck tile (wireframe deck card) ported onto --cf-* tokens. The crest band + border are derived from
   the faction ink (--fac) via color-mix so each card carries its faction without bespoke per-faction
   tokens. No overflow:hidden - the ⋯ menu pops out below the band. */

.cf-deck-card[b-lfyxnvc5q1] {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-1);
    transition: box-shadow var(--cf-dur-fast) var(--cf-ease),
                transform var(--cf-dur-fast) var(--cf-ease),
                border-color var(--cf-dur-fast) var(--cf-ease);
}

.cf-deck-card:hover[b-lfyxnvc5q1] {
    box-shadow: var(--cf-shadow-2);
    border-color: var(--cf-border-strong);
    transform: translateY(-2px);
}

/* The deck name is the open affordance (a stretched link); show the focus ring on the whole tile. */
.cf-deck-card:has(.cf-deck-card__open:focus-visible)[b-lfyxnvc5q1] {
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand);
}

.cf-deck-card__crestband[b-lfyxnvc5q1] {
    height: 96px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cf-radius-lg) var(--cf-radius-lg) 0 0;
    background: color-mix(in srgb, var(--fac) 10%, var(--cf-surface));
    border-bottom: 1px solid color-mix(in srgb, var(--fac) 32%, var(--cf-surface));
    color: var(--fac);
}

.cf-deck-card__menu-wrap[b-lfyxnvc5q1] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1; /* above the deck-name stretched ::after so the menu stays clickable */
}

.cf-deck-card__menu[b-lfyxnvc5q1] {
    width: 36px;
    height: 36px;
    border-radius: var(--cf-radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cf-text-muted);
    background: color-mix(in srgb, var(--cf-surface) 70%, transparent);
    border: 1px solid var(--cf-border);
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    line-height: 1;
}

.cf-deck-card__menu:hover[b-lfyxnvc5q1] { background: var(--cf-surface); color: var(--cf-text); }
.cf-deck-card__menu:focus-visible[b-lfyxnvc5q1] { outline: none; box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 3px var(--cf-brand); }

/* transparent full-screen catcher so an outside click closes the menu */
.cf-deck-card__menu-backdrop[b-lfyxnvc5q1] {
    position: fixed;
    inset: 0;
    z-index: var(--cf-z-dropdown);
    background: transparent;
}

.cf-deck-card__menu-pop[b-lfyxnvc5q1] {
    position: absolute;
    top: 34px;
    right: 0;
    z-index: calc(var(--cf-z-dropdown) + 1);
    min-width: 150px;
    display: flex;
    flex-direction: column;
    padding: 5px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    box-shadow: var(--cf-shadow-3);
}

.cf-deck-card__menu-pop button[b-lfyxnvc5q1] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 0;
    background: none;
    border-radius: var(--cf-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cf-text);
    text-align: left;
    cursor: pointer;
}

.cf-deck-card__menu-pop button:hover[b-lfyxnvc5q1] { background: var(--cf-surface-2); }
.cf-deck-card__menu-pop button:focus-visible[b-lfyxnvc5q1] { outline: none; box-shadow: inset 0 0 0 2px var(--cf-brand); }
.cf-deck-card__menu-pop button.cf-deck-card__menu-item--danger[b-lfyxnvc5q1] { color: var(--cf-danger-fg); }
.cf-deck-card__menu-pop button.cf-deck-card__menu-item--danger:hover[b-lfyxnvc5q1] { background: color-mix(in srgb, var(--cf-danger) 8%, var(--cf-surface)); }

.cf-deck-card__share-chip[b-lfyxnvc5q1] {
    position: absolute;
    bottom: 8px;
    left: 8px;
}

/* Community mode: like + fork actions, top-right of the crest band (where the ⋯ menu sits in Library). */
.cf-deck-card__actions[b-lfyxnvc5q1] {
    position: absolute;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    z-index: 1; /* above the deck-name stretched ::after so like/fork stay clickable */
}

/* "forked from …" credit line in the body. */
.cf-deck-card__fork-from[b-lfyxnvc5q1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    font-size: 11.5px;
    color: var(--cf-text-muted);
}

.cf-deck-card__fork-from a[b-lfyxnvc5q1] { position: relative; z-index: 1; color: var(--cf-brand); font-weight: 600; }
.cf-deck-card__fork-from a:hover[b-lfyxnvc5q1] { text-decoration: underline; }

.cf-deck-card__chip[b-lfyxnvc5q1] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 9px;
    border-radius: var(--cf-radius-pill);
    font-size: 11px;
    font-weight: 600;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    color: var(--cf-text-muted);
}

.cf-deck-card__chip--public[b-lfyxnvc5q1] {
    color: var(--cf-success-fg);
    border-color: color-mix(in srgb, var(--cf-success) 35%, var(--cf-surface));
    background: color-mix(in srgb, var(--cf-success) 10%, var(--cf-surface));
}

/* Library-only readiness chip ("Needs fixes") at the right edge of the counts row; warn tones mirror the
   lobby picker's readiness pill, and the first violation rides the title as the tooltip. */
.cf-deck-card__chip--warn[b-lfyxnvc5q1] {
    margin-left: auto;
    color: var(--cf-warning-fg);
    border-color: color-mix(in srgb, var(--cf-warning) 40%, var(--cf-surface));
    background: color-mix(in srgb, var(--cf-warning) 12%, var(--cf-surface));
    position: relative; /* above the card's stretched-link overlay (z-index 0), or the detail tooltip never shows */
    z-index: 1;
}

.cf-deck-card__body[b-lfyxnvc5q1] {
    padding: 13px 15px 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cf-deck-card__name[b-lfyxnvc5q1] {
    font-family: var(--cf-font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cf-text);
}

/* When the name is the open affordance it's a link with a stretched hit area covering the whole tile. The
   action controls (menu / like / fork / author link) are raised above this ::after via z-index, so no
   interactive control is nested inside the link (the role="button"-wrapping-controls ARIA defect). */
.cf-deck-card__open[b-lfyxnvc5q1] {
    display: block;
    text-decoration: none;
}

.cf-deck-card__open[b-lfyxnvc5q1]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cf-deck-card__open:focus-visible[b-lfyxnvc5q1] {
    outline: none; /* the ring is shown on the whole tile via .cf-deck-card:has(.cf-deck-card__open:focus-visible) */
}

/* Fallback: where :has() is unsupported the tile-level ring can't apply, so keep a ring on the link itself
   (never leave keyboard focus invisible). */
@supports not selector(:has(*)) {
    .cf-deck-card__open:focus-visible[b-lfyxnvc5q1] {
        outline: 2px solid var(--cf-brand);
        outline-offset: 2px;
    }
}

.cf-deck-card__destiny[b-lfyxnvc5q1] {
    font-size: 12.5px;
    color: var(--cf-text-muted);
}

.cf-deck-card__author[b-lfyxnvc5q1] {
    position: relative;
    z-index: 1; /* above the deck-name stretched ::after so the profile link is clickable */
    color: var(--cf-text);
    font-weight: 600;
}

.cf-deck-card__author:hover[b-lfyxnvc5q1] { color: var(--cf-brand); text-decoration: underline; }

.cf-deck-card__counts[b-lfyxnvc5q1] {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* the readiness chip drops to its own line on the narrowest grid tiles */
    gap: 14px;
    margin-top: 9px;
    font-size: 12.5px;
}

.cf-deck-card__count[b-lfyxnvc5q1] {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: var(--cf-text);
}

.cf-deck-card__counts b[b-lfyxnvc5q1] { font-variant-numeric: tabular-nums; }

.cf-deck-card__count-unit[b-lfyxnvc5q1] {
    color: var(--cf-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.cf-deck-card__foot[b-lfyxnvc5q1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 11px;
    padding-top: 11px;
    border-top: 1px solid var(--cf-border);
    font-size: 11.5px;
    color: var(--cf-text-muted);
}
/* /Components/Decks/DeckContentsPanel.razor.rz.scp.css */
.cf-deck-contents[b-kgjaf4tody] { display: flex; flex-direction: column; gap: var(--cf-space-3); }
.cf-deck-contents--compact[b-kgjaf4tody] { gap: var(--cf-space-2); }
.cf-deck-contents--compact[b-kgjaf4tody]  .cf-editor__block { padding: var(--cf-space-2); }
/* /Components/Decks/DeckCurveMobile.razor.rz.scp.css */
.cf-curve-mobile[b-yhhb9ftv0d] {
    display: grid;
    gap: 1rem;
    min-height: 0;
    min-width: 0;
}

.cf-curve-mobile__distribution[b-yhhb9ftv0d] {
    align-items: end;
    display: grid;
    gap: .35rem;
    grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
    min-width: 0;
}

.cf-curve-mobile__lane[b-yhhb9ftv0d] {
    align-items: center;
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    border-radius: .4rem;
    color: var(--cf-text);
    display: flex;
    flex-direction: column;
    gap: .1rem;
    justify-content: end;
    min-height: 4.5rem;
    padding: .35rem .2rem;
}

.cf-curve-mobile__lane--selected[b-yhhb9ftv0d] {
    border-color: var(--cf-brand);
    box-shadow: inset 0 0 0 1px var(--cf-brand);
}

.cf-curve-mobile__lane:focus-visible[b-yhhb9ftv0d] {
    outline: 2px solid var(--cf-brand);
    outline-offset: 2px;
}

.cf-curve-mobile__coin[b-yhhb9ftv0d] { font-weight: 800; }
.cf-curve-mobile__count[b-yhhb9ftv0d] { color: var(--cf-text-muted); font-size: .8rem; }
.cf-curve-mobile__marker[b-yhhb9ftv0d] { font-size: .65rem; font-weight: 700; line-height: 1; }

.cf-curve-mobile__selected[b-yhhb9ftv0d] {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: .5rem;
    min-width: 0;
    padding: .75rem;
}

.cf-curve-mobile__title[b-yhhb9ftv0d] { font-size: 1rem; margin: 0 0 .5rem; }
.cf-curve-mobile__title span[b-yhhb9ftv0d] { color: var(--cf-text-muted); font-size: .85em; }
.cf-curve-mobile__rows[b-yhhb9ftv0d] { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.cf-curve-mobile__empty[b-yhhb9ftv0d] { color: var(--cf-text-muted); margin: 0; }
/* /Components/Decks/DeckEditorStatusStrip.razor.rz.scp.css */
.cf-deck-status[b-2vwye1x6fn] {
    align-items: center;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
    display: flex;
    flex-wrap: wrap;
    gap: var(--cf-space-2);
    padding: var(--cf-space-2) var(--cf-space-3);
}

.cf-deck-status__counts[b-2vwye1x6fn], .cf-deck-status__issues[b-2vwye1x6fn] { display: inline-flex; align-items: center; gap: var(--cf-space-2); }
.cf-deck-status__counts[b-2vwye1x6fn] { color: var(--cf-text-muted); font-size: var(--cf-text-xs); }
.cf-deck-status__counts b[b-2vwye1x6fn] { color: var(--cf-text); font-variant-numeric: tabular-nums; }
.cf-deck-status__issue-count[b-2vwye1x6fn] { color: var(--cf-text-muted); font-size: var(--cf-text-xs); font-weight: 700; }
.cf-deck-status__issue[b-2vwye1x6fn] { border-radius: var(--cf-radius-pill); font-size: 11px; font-weight: 700; padding: 2px 7px; }
.cf-deck-status__issue--error[b-2vwye1x6fn] { background: color-mix(in srgb, var(--cf-danger) 12%, var(--cf-surface)); color: var(--cf-danger-fg); }
.cf-deck-status__issue--warning[b-2vwye1x6fn] { background: color-mix(in srgb, var(--cf-warning) 14%, var(--cf-surface)); color: var(--cf-warning-fg); }
.cf-deck-status__issue--info[b-2vwye1x6fn] { background: color-mix(in srgb, var(--cf-info-fg) 12%, var(--cf-surface)); color: var(--cf-info-fg); }
.cf-deck-status__verdict[b-2vwye1x6fn] { color: var(--cf-text); font-size: var(--cf-text-xs); font-weight: 700; margin-left: auto; }
/* /Components/Decks/DeckEditorTabs.razor.rz.scp.css */
.cf-editor-tabs[b-alg4lxz0be] {
    display: flex;
    gap: .35rem;
}

.cf-editor-tabs__tab[b-alg4lxz0be] {
    align-items: center;
    display: inline-flex;
    gap: .4rem;
}

.cf-editor-tabs__badge[b-alg4lxz0be] {
    border-radius: 999px;
    font-size: .75em;
    min-width: 1.5em;
}
/* /Components/Decks/DeckExportDialog.razor.rz.scp.css */
.cf-export-dialog__format[b-yu0iin302k] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.cf-export-dialog__label[b-yu0iin302k] {
    font-size: 12px;
    font-weight: 600;
    color: var(--cf-text);
}

.cf-export-dialog__select-wrap[b-yu0iin302k] {
    position: relative;
    display: inline-flex;
}

.cf-export-dialog__select[b-yu0iin302k] {
    height: 38px;
    padding: 0 32px 0 12px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    font-family: var(--cf-font-ui);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cf-text);
    cursor: pointer;
}

.cf-export-dialog__select:focus-visible[b-yu0iin302k] {
    outline: none;
    border-color: var(--cf-brand);
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand);
}

.cf-export-dialog__select-wrap[b-yu0iin302k]  .cf-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cf-text-muted);
    pointer-events: none;
}

.cf-export-dialog__textarea[b-yu0iin302k] {
    width: 100%;
    min-height: 200px;
    resize: vertical;
    border-radius: var(--cf-radius-md);
    padding: 12px 13px;
    font-family: var(--cf-font-mono);
    font-size: 12.5px;
    line-height: 1.55;
}

.cf-export-dialog__textarea--readonly[b-yu0iin302k] {
    background: var(--cf-surface-2);
    color: var(--cf-text-muted);
    border: 1px solid var(--cf-border-strong);
}
/* /Components/Decks/DeckImportDialog.razor.rz.scp.css */
.cf-import-dialog__tabs[b-fhb7184i6u] {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    margin-bottom: 14px;
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
}

.cf-import-dialog__tab[b-fhb7184i6u] {
    font-size: 13px;
    font-weight: 600;
    padding: 9px 14px;
    border: 0;
    background: none;
    border-radius: var(--cf-radius-sm);
    color: var(--cf-text-muted);
    cursor: pointer;
}

.cf-import-dialog__tab--on[b-fhb7184i6u] {
    background: var(--cf-surface);
    color: var(--cf-brand);
    box-shadow: var(--cf-shadow-1);
}

.cf-import-dialog__tab:focus-visible[b-fhb7184i6u] { outline: none; box-shadow: inset 0 0 0 2px var(--cf-brand); }

.cf-import-dialog__label[b-fhb7184i6u] {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cf-text);
    margin-bottom: 7px;
}

.cf-import-dialog__textarea[b-fhb7184i6u] {
    width: 100%;
    min-height: 150px;
    resize: vertical;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    padding: 12px 13px;
    font-family: var(--cf-font-mono);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--cf-text);
}

.cf-import-dialog__textarea[b-fhb7184i6u]::placeholder { color: var(--cf-text-muted); }

.cf-import-dialog__textarea:focus-visible[b-fhb7184i6u] {
    outline: none;
    border-color: var(--cf-brand);
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand);
}

.cf-import-dialog__preview[b-fhb7184i6u] {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
    background: var(--cf-surface-2);
}

.cf-import-dialog__state-tag[b-fhb7184i6u] {
    font-family: var(--cf-font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
    margin-bottom: 10px;
}

.cf-import-dialog__preview-ok[b-fhb7184i6u] {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--fac, var(--cf-text));
}

.cf-import-dialog__preview-name[b-fhb7184i6u] {
    font-family: var(--cf-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--cf-text);
}

.cf-import-dialog__preview-sub[b-fhb7184i6u] {
    font-size: 12.5px;
    color: var(--cf-text-muted);
}

.cf-import-dialog__preview-err[b-fhb7184i6u] {
    color: var(--cf-danger-fg);
    font-size: 13px;
    font-weight: 500;
}

.cf-import-dialog__dropped[b-fhb7184i6u] {
    margin-top: 12px;
    font-size: 12.5px;
}

.cf-import-dialog__dropped > summary[b-fhb7184i6u] {
    cursor: pointer;
    font-weight: 600;
    color: var(--cf-warning-fg, var(--cf-text-muted));
}

.cf-import-dialog__dropped ul[b-fhb7184i6u] {
    margin: 8px 0 0;
    padding-left: 18px;
    max-height: 160px;
    overflow-y: auto;
    color: var(--cf-text-muted);
    font-family: var(--cf-font-mono);
    font-size: 11.5px;
    line-height: 1.6;
}

.cf-import-dialog__dropped li[b-fhb7184i6u] { word-break: break-word; }
/* /Components/Decks/DeckLedgerTable.razor.rz.scp.css */
/* Read-only ThronesDB-style dense deck table for the public share page - the mirror of the editor's Ledger
   layout. Header + rows share one CSS grid so columns align. Tokens come from app.css (--cf-*); child
   components (Crest, Icon, StruggleIcon) are reached with ::deep. Visual language follows CardPoolTable. */
.cf-deck-ledger[b-zasdyry5bt] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.cf-deck-ledger__sec-head[b-zasdyry5bt] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
}

.cf-deck-ledger__sec-title[b-zasdyry5bt] {
    font-family: var(--cf-font-display);
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.cf-deck-ledger__sec-count[b-zasdyry5bt] {
    font-family: var(--cf-font-mono);
    font-size: 11px;
    color: var(--cf-text-muted);
}

.cf-deck-ledger__table[b-zasdyry5bt] {
    width: 100%;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
    background: var(--cf-surface);
    overflow: hidden;
}

.cf-deck-ledger__head[b-zasdyry5bt],
.cf-deck-ledger__row[b-zasdyry5bt] {
    display: grid;
    /* qty · name (flexes to fill) · cost · strength · type · faction - equal 28px trailing columns give clean
       vertical tram-lines for the stat block and a >=24px sort/hit target. */
    grid-template-columns: 40px minmax(120px, 1fr) 28px 28px 28px 28px;
    align-items: center;
    column-gap: 8px;
    padding: 0 12px;
}

.cf-deck-ledger__table--quest .cf-deck-ledger__row[b-zasdyry5bt],
.cf-deck-ledger__head--quest[b-zasdyry5bt] {
    grid-template-columns: 40px minmax(120px, 1fr) auto;
}

.cf-deck-ledger__h-struggles[b-zasdyry5bt] { color: var(--cf-text-muted); font-size: 12.5px; text-align: right; }

/* ---- header ---- */
.cf-deck-ledger__head[b-zasdyry5bt] {
    height: 38px;
    background: var(--cf-surface-2);
    border-bottom: 1px solid var(--cf-border-strong);
    font-family: var(--cf-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--cf-text);
}

.cf-deck-ledger__h-qty[b-zasdyry5bt] { color: var(--cf-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }

.cf-deck-ledger__h-cost[b-zasdyry5bt],
.cf-deck-ledger__h-strength[b-zasdyry5bt],
.cf-deck-ledger__h-type[b-zasdyry5bt],
.cf-deck-ledger__h-faction[b-zasdyry5bt] { color: var(--cf-text-muted); font-size: 12.5px; }

/* sortable column headers - bare buttons that inherit the label type, with a hover/active brand tint and a
   small direction caret. Click the active column again to flip (handled in code). */
.cf-deck-ledger__sort[b-zasdyry5bt] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    min-height: 24px; /* >=24px hit target (WCAG 2.5.8) within the 38px header */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.cf-deck-ledger__h-cost .cf-deck-ledger__sort[b-zasdyry5bt],
.cf-deck-ledger__h-strength .cf-deck-ledger__sort[b-zasdyry5bt],
.cf-deck-ledger__h-type .cf-deck-ledger__sort[b-zasdyry5bt],
.cf-deck-ledger__h-faction .cf-deck-ledger__sort[b-zasdyry5bt] {
    width: 100%;
    justify-content: center;
}

.cf-deck-ledger__sort:hover[b-zasdyry5bt] { color: var(--cf-brand); }
.cf-deck-ledger__sort--active[b-zasdyry5bt] { color: var(--cf-brand); }
.cf-deck-ledger__sort:focus-visible[b-zasdyry5bt] { outline: none; box-shadow: inset 0 0 0 2px var(--cf-brand); border-radius: 2px; }

/* faint resting up/down hint on every sortable column; the active column's direction caret is full strength */
.cf-deck-ledger__caret[b-zasdyry5bt] { font-size: 9px; line-height: 1; opacity: .35; }
.cf-deck-ledger__sort--active .cf-deck-ledger__caret[b-zasdyry5bt] { opacity: 1; }

/* ---- rows ---- */
.cf-deck-ledger__row[b-zasdyry5bt] {
    min-height: 38px;
    border-bottom: 1px solid var(--cf-border);
    transition: background .1s;
}

.cf-deck-ledger__row:last-child[b-zasdyry5bt] { border-bottom: 0; }
.cf-deck-ledger__row:hover[b-zasdyry5bt] { background: var(--cf-surface-2); }

.cf-deck-ledger__qty[b-zasdyry5bt] {
    font-family: var(--cf-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 13px;
    color: var(--cf-brand);
}

/* name - display font, single line, ellipsis; unique cards get a leading star */
.cf-deck-ledger__name-cell[b-zasdyry5bt] { display: flex; align-items: center; min-width: 0; }

.cf-deck-ledger__name[b-zasdyry5bt] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--cf-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--cf-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.cf-deck-ledger__star[b-zasdyry5bt] { color: var(--cf-faction-saracenenvoy); }

/* off-faction tint (mirrors the deck list); the hover rule is equal-specificity and later, so a hovered row
   still reads brand. */
.cf-deck-ledger__row--off .cf-deck-ledger__name[b-zasdyry5bt] { color: var(--fac); }
.cf-deck-ledger__row:hover .cf-deck-ledger__name[b-zasdyry5bt] { color: var(--cf-brand); }

/* cost · strength · type · faction columns */
.cf-deck-ledger__cell-cost[b-zasdyry5bt],
.cf-deck-ledger__cell-strength[b-zasdyry5bt] {
    text-align: center;
    font-family: var(--cf-font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--cf-text);
    font-variant-numeric: tabular-nums;
}

.cf-deck-ledger__cell-strength[b-zasdyry5bt] { color: var(--cf-text-muted); }

.cf-deck-ledger__cell-type[b-zasdyry5bt] { display: flex; justify-content: center; color: var(--cf-text-muted); }
.cf-deck-ledger__cell-type[b-zasdyry5bt]  .cf-icon { width: 16px; height: 16px; }

.cf-deck-ledger__cell-faction[b-zasdyry5bt] { display: flex; justify-content: center; }
.cf-deck-ledger__cell-faction[b-zasdyry5bt]  .cf-crest { width: 15px; height: 15px; }

/* quest rows: struggle icons trail the name */
.cf-deck-ledger__cell-struggles[b-zasdyry5bt] { display: inline-flex; align-items: center; gap: 5px; justify-content: flex-end; }
/* /Components/Decks/DeckListFilters.razor.rz.scp.css */
.cf-deck-filters[b-c7vnmpg7k3] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0 22px;
}

.cf-deck-filters__chips[b-c7vnmpg7k3] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cf-deck-filters__select-wrap[b-c7vnmpg7k3] {
    position: relative;
    display: inline-flex;
}

.cf-deck-filters__select[b-c7vnmpg7k3] {
    height: 40px;
    padding: 0 32px 0 13px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    font-family: var(--cf-font-ui);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cf-text);
    cursor: pointer;
}

.cf-deck-filters__select:focus-visible[b-c7vnmpg7k3] {
    outline: none;
    border-color: var(--cf-brand);
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand);
}

/* the trailing chevron/sort glyph (Icon renders its own scope, so reach it with ::deep) */
.cf-deck-filters__select-wrap[b-c7vnmpg7k3]  .cf-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cf-text-muted);
    pointer-events: none;
}
/* /Components/Decks/DeckReviewPanel.razor.rz.scp.css */
.cf-deck-review[b-44249af2rf] { display: flex; flex-direction: column; gap: var(--cf-space-3); max-height: 100%; overflow-y: auto; }
.cf-deck-review:focus-visible[b-44249af2rf] { outline: 2px solid var(--cf-brand); outline-offset: 2px; }
/* /Components/Decks/DeckRevisionHistory.razor.rz.scp.css */
.cf-revision-history__grid[b-o4jp6ke2zd] {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 0;
    min-height: 280px;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
    overflow: hidden;
}

.cf-revision-history__list[b-o4jp6ke2zd] {
    border-right: 1px solid var(--cf-border);
    background: var(--cf-surface);
    overflow-y: auto;
    max-height: 56vh;
}

.cf-revision-history__item[b-o4jp6ke2zd] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 14px;
    border: 0;
    border-bottom: 1px solid var(--cf-border);
    background: none;
    cursor: pointer;
}

.cf-revision-history__item:hover[b-o4jp6ke2zd] { background: var(--cf-surface-2); }

.cf-revision-history__item--on[b-o4jp6ke2zd] {
    background: color-mix(in srgb, var(--cf-brand) 7%, var(--cf-surface));
    box-shadow: inset 3px 0 0 var(--cf-brand);
}

.cf-revision-history__item:focus-visible[b-o4jp6ke2zd] { outline: none; box-shadow: inset 0 0 0 2px var(--cf-brand); }

.cf-revision-history__item .cf-revision-history__rev-num[b-o4jp6ke2zd] { font-weight: 700; font-size: 13px; color: var(--cf-text); }
.cf-revision-history__item .cf-revision-history__rev-meta[b-o4jp6ke2zd] { font-size: 11.5px; color: var(--cf-text-muted); margin-top: 2px; }

.cf-revision-history__diff[b-o4jp6ke2zd] {
    padding: 14px 16px;
    overflow-y: auto;
    max-height: 56vh;
}

.cf-revision-history__state-tag[b-o4jp6ke2zd] {
    font-family: var(--cf-font-mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
    margin-bottom: 10px;
}

.cf-revision-history__diff-row[b-o4jp6ke2zd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 9px;
    border-radius: var(--cf-radius-sm);
    font-size: 13px;
}

.cf-revision-history__glyph[b-o4jp6ke2zd] {
    width: 16px;
    text-align: center;
    font-weight: 800;
}

.cf-revision-history__card-name[b-o4jp6ke2zd] { color: var(--cf-text); font-weight: 500; }

.cf-revision-history__qty[b-o4jp6ke2zd] {
    font-family: var(--cf-font-mono);
    font-size: 12px;
    font-weight: 700;
    margin-left: auto;
}

.cf-revision-history__diff-row--added[b-o4jp6ke2zd] { background: color-mix(in srgb, var(--cf-success) 10%, var(--cf-surface)); color: var(--cf-success-fg); }
.cf-revision-history__diff-row--removed[b-o4jp6ke2zd] { background: color-mix(in srgb, var(--cf-danger) 8%, var(--cf-surface)); color: var(--cf-danger-fg); }
.cf-revision-history__diff-row--changed[b-o4jp6ke2zd] { background: color-mix(in srgb, var(--cf-warning) 12%, var(--cf-surface)); color: var(--cf-warning-fg); }

.cf-revision-history__empty[b-o4jp6ke2zd] {
    padding: 28px 16px;
    text-align: center;
    color: var(--cf-text-muted);
    font-size: 13px;
}
/* /Components/Decks/DeckValidationPanel.razor.rz.scp.css */
.cf-validation[b-gtqkyue6yi] {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3);
}

/* legal badge */
.cf-validation__legal[b-gtqkyue6yi] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: var(--cf-radius-md);
    background: color-mix(in srgb, var(--cf-success) 14%, var(--cf-surface));
    border: 1px solid color-mix(in srgb, var(--cf-success) 45%, var(--cf-surface));
    color: var(--cf-success-fg);
}
.cf-validation__legal-ring[b-gtqkyue6yi] {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cf-success);
    color: var(--cf-overlay-light);
}
.cf-validation__legal-text b[b-gtqkyue6yi] { font-family: var(--cf-font-display); font-size: 16px; display: block; }
.cf-validation__legal-text span[b-gtqkyue6yi] { font-size: 12px; color: var(--cf-success-fg); }

/* empty placeholder */
.cf-validation__placeholder[b-gtqkyue6yi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 22px 14px;
    border: 1px dashed var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    background: var(--cf-surface-2);
    color: var(--cf-text-muted);
}
.cf-validation__placeholder[b-gtqkyue6yi]  .cf-icon { color: var(--cf-text-faint); }
.cf-validation__placeholder p[b-gtqkyue6yi] { margin: 0; font-size: 12.5px; }

/* severity summary pills */
.cf-validation__summary[b-gtqkyue6yi] { display: flex; gap: 8px; }
.cf-validation__pill[b-gtqkyue6yi] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 4px;
    border-radius: var(--cf-radius-md);
    border: 1px solid;
    font-variant-numeric: tabular-nums;
}
.cf-validation__pill-count[b-gtqkyue6yi] { font-family: var(--cf-font-display); font-size: 18px; font-weight: 700; line-height: 1; }
.cf-validation__pill-label[b-gtqkyue6yi] { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
.cf-validation__pill--error[b-gtqkyue6yi] { background: color-mix(in srgb, var(--cf-danger) 10%, var(--cf-surface)); border-color: color-mix(in srgb, var(--cf-danger) 40%, var(--cf-surface)); color: var(--cf-danger-fg); }
.cf-validation__pill--warning[b-gtqkyue6yi] { background: color-mix(in srgb, var(--cf-warning) 12%, var(--cf-surface)); border-color: color-mix(in srgb, var(--cf-warning) 40%, var(--cf-surface)); color: var(--cf-warning-fg); }
.cf-validation__pill--info[b-gtqkyue6yi] { background: color-mix(in srgb, var(--cf-info-fg) 10%, var(--cf-surface)); border-color: color-mix(in srgb, var(--cf-info-fg) 40%, var(--cf-surface)); color: var(--cf-info-fg); }

.cf-validation__list[b-gtqkyue6yi] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2);
}
/* /Components/Decks/DeckViolationRow.razor.rz.scp.css */
.cf-violation[b-8j6v8umuvj] {
    display: flex;
    gap: var(--cf-space-2);
    align-items: flex-start;
    padding: var(--cf-space-2);
    border-radius: var(--cf-radius-sm);
    border-left: 3px solid var(--cf-border);
    background: var(--cf-surface-2);
}

/* The severity Icon renders its own (child-scoped) span - pierce with ::deep to tint it. */
.cf-violation[b-8j6v8umuvj]  .cf-violation__severity-icon {
    flex: 0 0 auto;
    margin-top: 1px;
}

.cf-violation__body[b-8j6v8umuvj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cf-violation__msg[b-8j6v8umuvj] {
    font-size: var(--cf-text-xs);
    color: var(--cf-text);
}

.cf-violation__cite[b-8j6v8umuvj] {
    font-size: var(--cf-text-xs);
    color: var(--cf-text-muted);
    font-family: var(--cf-font-mono);
}

.cf-violation__actions[b-8j6v8umuvj] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.cf-violation__action[b-8j6v8umuvj] {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    min-height: 28px;
    padding: 4px 8px;
    color: var(--cf-text);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-sm);
    cursor: pointer;
}

.cf-violation__action:hover[b-8j6v8umuvj] {
    background: var(--cf-surface-hover);
}

.cf-violation__action:focus-visible[b-8j6v8umuvj] {
    outline: none;
    box-shadow: 0 0 0 2px var(--cf-bg), 0 0 0 4px var(--cf-brand);
}

.cf-violation__action[b-8j6v8umuvj]  .cf-icon {
    color: var(--cf-text-muted);
}

.cf-violation--error[b-8j6v8umuvj] { border-left-color: var(--cf-danger); }
.cf-violation--error[b-8j6v8umuvj]  .cf-violation__severity-icon { color: var(--cf-danger-fg); }

.cf-violation--warning[b-8j6v8umuvj] { border-left-color: var(--cf-warning); }
.cf-violation--warning[b-8j6v8umuvj]  .cf-violation__severity-icon { color: var(--cf-warning-fg); }

.cf-violation--info[b-8j6v8umuvj] { border-left-color: var(--cf-info-fg); }
.cf-violation--info[b-8j6v8umuvj]  .cf-violation__severity-icon { color: var(--cf-info-fg); }
/* /Components/Decks/FactionPicker.razor.rz.scp.css */
.cf-faction-grid[b-cjuz413v4e] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    border-radius: var(--cf-radius-md);
    outline: 2px solid transparent;
    outline-offset: 3px;
    transition: outline-color var(--cf-dur-fast) var(--cf-ease);
}

.cf-faction-grid--has-faction[b-cjuz413v4e] { outline-color: var(--fac); }

.cf-faction-cell[b-cjuz413v4e] {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: var(--cf-radius-md);
    cursor: pointer;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    color: var(--fac, var(--cf-text-muted));
    transition: border-color var(--cf-dur-fast) var(--cf-ease), background var(--cf-dur-fast) var(--cf-ease);
}

.cf-faction-cell:hover[b-cjuz413v4e] { border-color: var(--fac, var(--cf-border-strong)); background: color-mix(in srgb, var(--fac) 8%, var(--cf-surface)); }
.cf-faction-cell__ab[b-cjuz413v4e] { font-family: var(--cf-font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--cf-text-muted); }

.cf-faction-cell--selected[b-cjuz413v4e] { background: color-mix(in srgb, var(--fac) 10%, var(--cf-surface)); border-color: var(--fac); box-shadow: inset 0 0 0 1px var(--fac); }
.cf-faction-cell--selected .cf-faction-cell__ab[b-cjuz413v4e] { color: var(--fac); }
.cf-faction-cell--selected[b-cjuz413v4e]::after {
    content: "";
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--fac);
}

.cf-faction-cell:focus-visible[b-cjuz413v4e] { outline: none; box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand); }

.cf-faction-name-hint[b-cjuz413v4e] {
    margin: 8px 0 0;
    font-family: var(--cf-font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--fac, var(--cf-text-muted));
    text-align: center;
    letter-spacing: .02em;
}

/* Chosen state - collapses the grid to a faction card, mirroring the destiny card (.cf-editor__destiny-card). */
.cf-faction-card[b-cjuz413v4e] {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 13px;
    border-radius: var(--cf-radius-md);
    border: 1px solid var(--fac, var(--cf-border));
    background: color-mix(in srgb, var(--fac, var(--cf-border-strong)) 9%, var(--cf-surface));
}

.cf-faction-card__seal[b-cjuz413v4e] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cf-surface);
    border: 1.5px solid var(--fac, var(--cf-border-strong));
    color: var(--fac);
}

.cf-faction-card__nm[b-cjuz413v4e] {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--cf-font-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--cf-text);
    letter-spacing: .02em;
}

.cf-faction-card__swap[b-cjuz413v4e] {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--cf-brand);
    cursor: pointer;
    background: none;
    border: 0;
    padding: 4px 6px;
    border-radius: var(--cf-radius-sm);
}

.cf-faction-card__swap:hover[b-cjuz413v4e] { background: color-mix(in srgb, var(--cf-brand) 8%, transparent); }
.cf-faction-card__swap:focus-visible[b-cjuz413v4e] { outline: none; box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand); }
/* /Components/Decks/ForkButton.razor.rz.scp.css */
.cf-fork[b-0cwi4ve9o4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 30px;
    width: 30px;
    padding: 0;
    border-radius: var(--cf-radius-pill);
    background: color-mix(in srgb, var(--cf-surface) 82%, transparent);
    border: 1px solid var(--cf-border);
    color: var(--cf-text-muted);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: color var(--cf-dur-fast) var(--cf-ease), border-color var(--cf-dur-fast) var(--cf-ease);
}

.cf-fork--labeled[b-0cwi4ve9o4] { width: auto; padding: 0 13px; }

.cf-fork:hover[b-0cwi4ve9o4] { border-color: var(--cf-border-strong); color: var(--cf-text); }

.cf-fork:disabled[b-0cwi4ve9o4] { opacity: .65; cursor: default; }

.cf-fork:focus-visible[b-0cwi4ve9o4] {
    outline: none;
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 3px var(--cf-brand);
}

/* See Button.razor.css: 44px tap target on a coarse pointer only. */
@media (pointer: coarse) {
    .cf-fork[b-0cwi4ve9o4] { min-height: 44px; min-width: 44px; }
}
/* /Components/Decks/LikeButton.razor.rz.scp.css */
.cf-like[b-jspolwilbf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 11px;
    border-radius: var(--cf-radius-pill);
    background: color-mix(in srgb, var(--cf-surface) 82%, transparent);
    border: 1px solid var(--cf-border);
    color: var(--cf-text-muted);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: color var(--cf-dur-fast) var(--cf-ease), border-color var(--cf-dur-fast) var(--cf-ease);
}

.cf-like:hover[b-jspolwilbf] { border-color: var(--cf-border-strong); color: var(--cf-text); }

/* Liked state reads via colour (the icon is a tinted silhouette either way). */
.cf-like--on[b-jspolwilbf] {
    color: var(--cf-brand);
    border-color: color-mix(in srgb, var(--cf-brand) 40%, var(--cf-surface));
    background: color-mix(in srgb, var(--cf-brand) 8%, var(--cf-surface));
}

.cf-like:disabled[b-jspolwilbf] { opacity: .65; cursor: default; }

.cf-like:focus-visible[b-jspolwilbf] {
    outline: none;
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 3px var(--cf-brand);
}

.cf-like__count[b-jspolwilbf] { line-height: 1; }

/* See Button.razor.css: 44px tap target on a coarse pointer only. */
@media (pointer: coarse) {
    .cf-like[b-jspolwilbf] { min-height: 44px; min-width: 44px; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Keyboard skip link (WCAG 2.4.1) - off-screen until focused. */
.cf-skip-link[b-47ena9sgkr] {
    position: absolute;
    left: var(--cf-space-2);
    top: -60px;
    z-index: var(--cf-z-tooltip);
    padding: var(--cf-space-2) var(--cf-space-3);
    background: var(--cf-accent);
    color: var(--cf-accent-contrast);
    border-radius: var(--cf-radius-sm);
    transition: top var(--cf-dur-fast) var(--cf-ease);
}

.cf-skip-link:focus[b-47ena9sgkr] {
    top: var(--cf-space-2);
}

.cf-app-shell[b-47ena9sgkr] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.cf-app-header[b-47ena9sgkr] {
    display: flex;
    align-items: center;
    gap: var(--cf-space-6);
    padding: var(--cf-space-3) var(--cf-space-5);
    min-height: var(--cf-header-height); /* authoritative for the sticky offsets that pin beneath it */
    /* Royal banner: a velvet-crimson field edged in gold - the heraldry of Camelot above the body.
       The --cf-banner-* pair computes to the same mixes this always used in light, and deepens in dark. */
    background: linear-gradient(180deg, var(--cf-banner-top), var(--cf-banner-bottom));
    border-bottom: 3px solid var(--cf-accent);
    box-shadow: var(--cf-shadow-2);
    position: sticky;
    top: 0;
    z-index: var(--cf-z-sticky);
}

.cf-brand[b-47ena9sgkr] {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-2);
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-xl);
    font-weight: 700;
    color: var(--cf-accent);
    letter-spacing: 0.02em;
    text-shadow: 0 1px 0 color-mix(in srgb, var(--cf-overlay-dark) 35%, transparent); /* bespoke - lift the gold off the crimson field */
}

.cf-brand:hover[b-47ena9sgkr] {
    text-decoration: none;
}

/* Brand lockup - keeps the standing "Early access" tag tight to the wordmark (the header's own gap is wide). */
.cf-brand-lockup[b-47ena9sgkr] {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-2);
}

/* Pre-release status chip beside the wordmark - a quiet, gold-edged plate, deliberately NOT gold-filled: the
   lone solid-gold pill on the banner stays the "your turn" signal. Cream lettering on the crimson field, small
   caps, so it reads as an intentional status label rather than a nav item or CTA. */
.cf-brand-tag[b-47ena9sgkr] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--cf-radius-pill);
    border: 1px solid color-mix(in srgb, var(--cf-accent) 50%, transparent);
    background: color-mix(in srgb, var(--cf-overlay-dark) 22%, transparent); /* bespoke - darkening wash on the crimson banner */
    color: var(--cf-cream);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
}

/* ---- collapsible nav: a no-JS checkbox-toggled menu (☰ below 720px) ---- */
/* Desktop: the ☰ label and its checkbox are hidden; the nav sits inline across the banner. */
.cf-nav-toggle__cb[b-47ena9sgkr],
.cf-nav-toggle[b-47ena9sgkr] {
    display: none;
}

.cf-app-nav[b-47ena9sgkr] {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2);
    flex: 1;          /* fill the banner after the brand so the spacer can split destinations from the right cluster */
    min-width: 0;
}

/* Pushes the right cluster (New deck + avatar, or Log in + Register) to the far edge, leaving the primary
   destinations beside the brand. Collapsed away on mobile, where the nav is a vertical dropdown. */
.cf-nav-spacer[b-47ena9sgkr] {
    flex: 1 1 auto;
}

/* Gold-on-crimson primary CTA on the banner (the wireframe's "New deck"; "Register" for anonymous
   visitors). Cream-on-crimson had the luminance contrast but blended into the rest of the cream banner
   text - same vocabulary as the hero gold button, with the dark gold edge giving shape contrast that
   pure-gold lacked alone. The CTA is a <NavLink>, whose rendered <a> does NOT carry this component's
   scope id, so the selector MUST pierce with ::deep (as the .cf-nav-link rules below do). Without it the
   rule never matched and the CTA rendered unstyled — crimson `a`-link text on the crimson banner. */
.cf-app-nav[b-47ena9sgkr]  .cf-nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-2);
    height: 38px;
    padding: 0 var(--cf-space-4);
    border-radius: var(--cf-radius-md);
    background: var(--cf-accent);
    color: var(--cf-accent-contrast);
    border: 1px solid var(--cf-gold-border);
    font-size: var(--cf-text-sm);
    font-weight: 700;
    text-decoration: none;
}

.cf-app-nav[b-47ena9sgkr]  .cf-nav-cta:hover {
    background: var(--cf-gold-hover);
    color: var(--cf-accent-contrast);
    text-decoration: none;
}

.cf-app-nav[b-47ena9sgkr]  .cf-nav-cta:focus-visible {
    outline-color: var(--cf-accent);
}

/* NavLink renders its own <a>, which doesn't carry this component's scope id - pierce with ::deep. */
.cf-app-nav[b-47ena9sgkr]  .cf-nav-link {
    padding: var(--cf-space-1) var(--cf-space-3);
    border-radius: var(--cf-radius-sm);
    color: var(--cf-cream); /* cream on the crimson banner */
    font-size: var(--cf-text-sm);
    text-decoration: none;
}

.cf-app-nav[b-47ena9sgkr]  .cf-nav-link:hover {
    color: var(--cf-overlay-light); /* bespoke - pure white on hover over the crimson banner */
    background: color-mix(in srgb, var(--cf-overlay-light) 14%, transparent); /* bespoke */
}

.cf-app-nav[b-47ena9sgkr]  .cf-nav-link.active {
    color: var(--cf-accent);
    background: color-mix(in srgb, var(--cf-overlay-dark) 42%, transparent); /* bespoke */
}

/* Log in: a secondary (outlined) action beside the Register CTA. */
.cf-app-nav[b-47ena9sgkr]  .cf-nav-link--ghost {
    border: 1px solid color-mix(in srgb, var(--cf-overlay-light) 35%, transparent); /* bespoke */
}

.cf-app-nav[b-47ena9sgkr]  .cf-nav-link--ghost:hover {
    border-color: color-mix(in srgb, var(--cf-overlay-light) 60%, transparent); /* bespoke */
}

/* On the dark banner the body's crimson focus ring would vanish - use gold there instead. */
.cf-brand:focus-visible[b-47ena9sgkr],
.cf-app-nav[b-47ena9sgkr]  .cf-nav-link:focus-visible {
    outline-color: var(--cf-accent);
}

/* "Your turn" count on the My-games link - a small gold pill (the lone gold on the crimson banner draws the
   eye to the one nav item that needs action). NavLink renders its own <a>, so pierce the scope with ::deep. */
.cf-app-nav[b-47ena9sgkr]  .cf-nav-link .cf-nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 999px;
    background: var(--cf-accent);
    color: var(--cf-accent-contrast);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* ---- identity menu: avatar + DisplayName open a dropdown owning the "me" links ---- */
.cf-user-menu[b-47ena9sgkr] {
    position: relative;
    display: inline-flex;
}

/* hidden-but-focusable checkbox; its focus + checked state surface on the adjacent trigger label */
.cf-user-menu__cb[b-47ena9sgkr] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.cf-user-menu__trigger[b-47ena9sgkr] {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-2);
    height: 38px;
    padding: 0 var(--cf-space-3) 0 5px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cf-overlay-light) 22%, transparent); /* bespoke - faint outline on the crimson banner */
    color: var(--cf-cream);
    cursor: pointer;
}

.cf-user-menu__trigger:hover[b-47ena9sgkr] {
    background: color-mix(in srgb, var(--cf-overlay-light) 14%, transparent); /* bespoke */
    color: var(--cf-overlay-light); /* bespoke */
}

.cf-user-menu__cb:focus-visible + .cf-user-menu__trigger[b-47ena9sgkr] {
    outline: 2px solid var(--cf-accent);
    outline-offset: 2px;
}

.cf-user-avatar[b-47ena9sgkr] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cf-accent);
    color: var(--cf-accent-contrast);
    border: 1px solid var(--cf-gold-border);
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
}

.cf-user-name[b-47ena9sgkr] {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--cf-text-sm);
    font-weight: 700;
}

.cf-user-caret[b-47ena9sgkr] {
    opacity: 0.85;
    transition: transform var(--cf-dur-fast) var(--cf-ease);
}

.cf-user-menu__cb:checked + .cf-user-menu__trigger .cf-user-caret[b-47ena9sgkr] {
    transform: rotate(180deg);
}

/* the dropdown - a parchment card hung under the trigger, right-aligned to the banner edge */
.cf-user-menu__panel[b-47ena9sgkr] {
    display: none;
    position: absolute;
    top: calc(100% + var(--cf-space-2));
    right: 0;
    min-width: 236px;
    padding: var(--cf-space-2);
    background: var(--cf-surface);
    color: var(--cf-text);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
    box-shadow: var(--cf-shadow-3);
    z-index: var(--cf-z-sticky);
}

.cf-user-menu__cb:checked ~ .cf-user-menu__panel[b-47ena9sgkr] {
    display: block;
}

.cf-user-menu__head[b-47ena9sgkr] {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2);
    padding: 6px var(--cf-space-2) var(--cf-space-2);
}

.cf-user-avatar--lg[b-47ena9sgkr] {
    width: 36px;
    height: 36px;
    font-size: 14px;
}

.cf-user-menu__name[b-47ena9sgkr] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--cf-text-md);
    font-weight: 700;
    color: var(--cf-text);
}

.cf-user-menu__group[b-47ena9sgkr] {
    padding: 4px 0;
}

.cf-user-menu__head + .cf-user-menu__group[b-47ena9sgkr],
.cf-user-menu__group + .cf-user-menu__group[b-47ena9sgkr] {
    border-top: 1px solid var(--cf-border);
}

/* the logout form is one of the menu groups; its button is styled as a menu row */
.cf-user-menu .cf-nav-logout[b-47ena9sgkr] {
    display: block;
    margin: 0;
}

/* menu rows: NavLink renders an <a> and the logout is a <button>; ::deep matches both regardless of scope */
.cf-user-menu[b-47ena9sgkr]  .cf-user-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--cf-space-2) var(--cf-space-3);
    border-radius: var(--cf-radius-sm);
    color: var(--cf-text);
    font: inherit;
    font-size: var(--cf-text-sm);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
}

.cf-user-menu[b-47ena9sgkr]  .cf-user-menu__item:hover {
    background: var(--cf-surface-hover);
    color: var(--cf-text);
}

.cf-user-menu[b-47ena9sgkr]  .cf-user-menu__item.active {
    background: var(--cf-surface-2);
}

.cf-user-menu[b-47ena9sgkr]  .cf-user-menu__item:focus-visible {
    outline: 2px solid var(--cf-brand);
    outline-offset: -2px;
}

/* ---- Learn menu: a no-JS dropdown grouping the tutorial + the rules reference (mirrors the avatar menu) ---- */
.cf-learn-menu[b-47ena9sgkr] {
    position: relative;
    display: inline-flex;
}

/* hidden-but-focusable checkbox; focus + checked state surface on the adjacent trigger label */
.cf-learn-menu__cb[b-47ena9sgkr] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    opacity: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* the trigger reads as a peer of the cream nav links beside it, with a caret */
.cf-learn-menu__trigger[b-47ena9sgkr] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: var(--cf-space-1) var(--cf-space-3);
    border-radius: var(--cf-radius-sm);
    color: var(--cf-cream);
    font-size: var(--cf-text-sm);
    cursor: pointer;
    white-space: nowrap;
}

.cf-learn-menu__trigger:hover[b-47ena9sgkr] {
    color: var(--cf-overlay-light); /* bespoke - pure white on hover over the crimson banner */
    background: color-mix(in srgb, var(--cf-overlay-light) 14%, transparent); /* bespoke */
}

.cf-learn-menu__cb:focus-visible + .cf-learn-menu__trigger[b-47ena9sgkr] {
    outline: 2px solid var(--cf-accent);
    outline-offset: 2px;
}

.cf-learn-caret[b-47ena9sgkr] {
    opacity: 0.85;
    transition: transform var(--cf-dur-fast) var(--cf-ease);
}

.cf-learn-menu__cb:checked + .cf-learn-menu__trigger .cf-learn-caret[b-47ena9sgkr] {
    transform: rotate(180deg);
}

/* the dropdown - a parchment card hung under the trigger, left-aligned to it */
.cf-learn-menu__panel[b-47ena9sgkr] {
    display: none;
    position: absolute;
    top: calc(100% + var(--cf-space-2));
    left: 0;
    min-width: 200px;
    padding: var(--cf-space-2);
    background: var(--cf-surface);
    color: var(--cf-text);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
    box-shadow: var(--cf-shadow-3);
    z-index: var(--cf-z-sticky);
}

.cf-learn-menu__cb:checked ~ .cf-learn-menu__panel[b-47ena9sgkr] {
    display: block;
}

/* menu rows - NavLink renders an <a>, so pierce the scope with ::deep (matches the avatar-menu rows) */
.cf-learn-menu[b-47ena9sgkr]  .cf-learn-menu__item {
    display: block;
    padding: var(--cf-space-2) var(--cf-space-3);
    border-radius: var(--cf-radius-sm);
    color: var(--cf-text);
    font-size: var(--cf-text-sm);
    text-decoration: none;
}

.cf-learn-menu[b-47ena9sgkr]  .cf-learn-menu__item:hover {
    background: var(--cf-surface-hover);
    color: var(--cf-text);
}

.cf-learn-menu[b-47ena9sgkr]  .cf-learn-menu__item.active {
    background: var(--cf-surface-2);
}

.cf-learn-menu[b-47ena9sgkr]  .cf-learn-menu__item:focus-visible {
    outline: 2px solid var(--cf-brand);
    outline-offset: -2px;
}

.cf-app-main[b-47ena9sgkr] {
    flex: 1;
    padding: var(--cf-space-6);
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* ---- mobile: collapse the nav behind the ☰ toggle ---- */
/* No-JS baseline: the menu toggles via the checkbox and SSR navigations reset it; js/nav.js layers on
   Escape + outside-click dismissal for both the ☰ and the avatar menu when a circuit is connected. */
@media (max-width: 720px) {
    /* the ☰ label is the visible control; push it to the right of the banner */
    .cf-nav-toggle[b-47ena9sgkr] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative; /* anchor the your-turn count badge */
        width: 44px;
        height: 44px;
        margin-left: auto;
        border-radius: var(--cf-radius-sm);
        color: var(--cf-cream);
        cursor: pointer;
    }

    .cf-nav-toggle:hover[b-47ena9sgkr] {
        color: var(--cf-overlay-light); /* bespoke */
        background: color-mix(in srgb, var(--cf-overlay-light) 14%, transparent); /* bespoke */
    }

    /* The your-turn count on the collapsed ☰ (mobile) - the gold pill that's on the "My games" link on desktop,
       shrunk to a corner badge so a phone shows the signal without opening the menu. */
    .cf-nav-toggle__badge[b-47ena9sgkr] {
        position: absolute;
        top: 2px;
        right: 2px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 15px;
        height: 15px;
        padding: 0 4px;
        border-radius: 999px;
        background: var(--cf-accent);
        color: var(--cf-accent-contrast);
        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        /* a thin crimson ring detaches the pill from both the ☰ glyph beneath it and the banner field, so the
           wider "9+" cap doesn't clip the icon's top-right arm */
        box-shadow: 0 0 0 1.5px var(--cf-brand);
    }

    /* keep the checkbox focusable (not display:none) but visually hidden; surface its focus and
       checked state on the adjacent ☰ label */
    .cf-nav-toggle__cb[b-47ena9sgkr] {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        opacity: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .cf-nav-toggle__cb:focus-visible + .cf-nav-toggle[b-47ena9sgkr] {
        outline: 2px solid var(--cf-accent);
        outline-offset: 2px;
    }

    .cf-nav-toggle__cb:checked + .cf-nav-toggle[b-47ena9sgkr] {
        color: var(--cf-accent);
        background: color-mix(in srgb, var(--cf-overlay-dark) 42%, transparent); /* bespoke */
    }

    /* nav: hidden until the toggle is checked, then a dropdown beneath the banner (anchored to the
       sticky header) */
    .cf-app-nav[b-47ena9sgkr] {
        display: none;
        flex: 0 1 auto;
    }

    .cf-nav-toggle__cb:checked ~ .cf-app-nav[b-47ena9sgkr] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--cf-space-1);
        position: absolute;
        top: 100%;
        right: var(--cf-space-5);
        min-width: 220px;
        margin-top: var(--cf-space-2);
        padding: var(--cf-space-2);
        background: linear-gradient(180deg, var(--cf-banner-top), var(--cf-banner-bottom));
        border: 1px solid var(--cf-accent);
        border-radius: var(--cf-radius-md);
        box-shadow: var(--cf-shadow-3);
        z-index: var(--cf-z-sticky);
    }

    /* full-width rows in the dropdown; the spacer is meaningless in a vertical menu */
    .cf-nav-toggle__cb:checked ~ .cf-app-nav[b-47ena9sgkr]  .cf-nav-link {
        display: block;
    }

    .cf-nav-spacer[b-47ena9sgkr] {
        display: none;
    }

    .cf-app-nav[b-47ena9sgkr]  .cf-nav-cta {
        margin: var(--cf-space-1) 0;
        justify-content: center;
    }

    /* the avatar trigger collapses and the panel flattens into the crimson dropdown as a grouped list */
    .cf-user-menu[b-47ena9sgkr] {
        display: block;
        width: 100%;
    }

    .cf-user-menu__cb[b-47ena9sgkr],
    .cf-user-menu__trigger[b-47ena9sgkr],
    .cf-user-menu__head[b-47ena9sgkr] {
        display: none;
    }

    .cf-user-menu__panel[b-47ena9sgkr] {
        display: block;
        position: static;
        min-width: 0;
        margin: 0;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
        color: var(--cf-cream);
    }

    .cf-user-menu__group[b-47ena9sgkr] {
        padding: 0;
    }

    .cf-user-menu__head + .cf-user-menu__group[b-47ena9sgkr],
    .cf-user-menu__group + .cf-user-menu__group[b-47ena9sgkr] {
        border-top: 1px solid color-mix(in srgb, var(--cf-overlay-light) 18%, transparent); /* bespoke */
        margin-top: var(--cf-space-1);
        padding-top: var(--cf-space-1);
    }

    .cf-user-menu[b-47ena9sgkr]  .cf-user-menu__item {
        color: var(--cf-cream);
        border-radius: var(--cf-radius-sm);
    }

    .cf-user-menu[b-47ena9sgkr]  .cf-user-menu__item:hover {
        color: var(--cf-overlay-light); /* bespoke */
        background: color-mix(in srgb, var(--cf-overlay-light) 14%, transparent); /* bespoke */
    }

    .cf-user-menu[b-47ena9sgkr]  .cf-user-menu__item.active {
        color: var(--cf-accent);
        background: color-mix(in srgb, var(--cf-overlay-dark) 42%, transparent); /* bespoke */
    }

    /* Learn menu flattens too: hide the trigger, drop both rows inline into the crimson ☰ dropdown */
    .cf-learn-menu[b-47ena9sgkr] {
        display: block;
        width: 100%;
    }

    .cf-learn-menu__cb[b-47ena9sgkr],
    .cf-learn-menu__trigger[b-47ena9sgkr] {
        display: none;
    }

    .cf-learn-menu__panel[b-47ena9sgkr] {
        display: block;
        position: static;
        min-width: 0;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .cf-learn-menu[b-47ena9sgkr]  .cf-learn-menu__item {
        color: var(--cf-cream);
    }

    .cf-learn-menu[b-47ena9sgkr]  .cf-learn-menu__item:hover {
        color: var(--cf-overlay-light); /* bespoke */
        background: color-mix(in srgb, var(--cf-overlay-light) 14%, transparent); /* bespoke */
    }

    .cf-learn-menu[b-47ena9sgkr]  .cf-learn-menu__item.active {
        color: var(--cf-accent);
        background: color-mix(in srgb, var(--cf-overlay-dark) 42%, transparent); /* bespoke */
    }
}
/* /Components/Layout/MotdBanner.razor.rz.scp.css */
.cf-motd[b-l0h1q17vh4] {
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    line-height: 1.4;
    text-align: center;
    color: var(--cf-text);
    background: var(--cf-surface-2);
    border-bottom: 1px solid var(--cf-border);
    border-left: 4px solid var(--cf-accent);
}

/* Severity washes are bespoke light-parchment tints - no semantic token captures these exact pale fills. */
.cf-motd--warning[b-l0h1q17vh4] {
    border-left-color: #c9882a; /* stylelint-disable-line color-no-hex -- bespoke: warning severity tint, hand-tuned for contrast on parchment */
    background: #f6ecd2; /* stylelint-disable-line color-no-hex -- bespoke: warning wash */
}

.cf-motd--critical[b-l0h1q17vh4] {
    border-left-color: var(--cf-danger);
    background: #f7dede; /* stylelint-disable-line color-no-hex -- bespoke: critical wash */
    color: #5a1d1d; /* stylelint-disable-line color-no-hex -- bespoke: critical ink */
    font-weight: 600;
}

/* Dark theme: the pale washes would glare (and the warning one would carry the now-cream --cf-text at
   ~1.4:1) - re-mix the same severities on the dark surface instead. Token-derived, so no bespoke hexes. */
[data-theme="dark"] .cf-motd--warning[b-l0h1q17vh4] {
    border-left-color: var(--cf-warning);
    background: color-mix(in srgb, var(--cf-warning) 20%, var(--cf-surface));
}

[data-theme="dark"] .cf-motd--critical[b-l0h1q17vh4] {
    background: color-mix(in srgb, var(--cf-danger) 22%, var(--cf-surface));
    color: var(--cf-text);
}

/* Severity word prefix - so the level isn't conveyed by colour alone (colour-blind + screen-reader users). */
.cf-motd__label[b-l0h1q17vh4] {
    margin-inline-end: 0.35rem;
    font-weight: 700;
}

.cf-motd__text[b-l0h1q17vh4] {
    white-space: pre-wrap;
}
/* /Components/Layout/ShareLayout.razor.rz.scp.css */
.cf-share__shell[b-91xcgiechr] {
    min-height: 100vh;
    max-width: 1040px;
    margin: 0 auto;
    padding: 22px 24px 56px;
}

/* Brand lockup carries the bottom gap to the deck below; the tag sits beside the wordmark, not inside the link. */
.cf-share__brand-lockup[b-91xcgiechr] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

/* a quiet back-to-app wordmark (ink/crimson on parchment - gold is banner-only) */
.cf-share__brand[b-91xcgiechr] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--cf-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--cf-brand);
    text-decoration: none;
}

.cf-share__brand:hover[b-91xcgiechr] { text-decoration: none; color: var(--cf-brand-hover); }

/* Pre-release status chip on the light share page - crimson lettering on a faint crimson wash to match the
   wordmark, small caps so it reads as a status label. (The header chip is cream-on-crimson; this is its
   light-background twin. Gold stays banner-only here too.) */
.cf-share__tag[b-91xcgiechr] {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--cf-radius-pill);
    border: 1px solid color-mix(in srgb, var(--cf-brand) 35%, transparent);
    background: color-mix(in srgb, var(--cf-brand) 8%, transparent);
    color: var(--cf-brand);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    cursor: default;
}

.cf-skip-link[b-91xcgiechr] {
    position: absolute;
    left: var(--cf-space-2);
    top: -60px;
    z-index: var(--cf-z-tooltip);
    padding: var(--cf-space-2) var(--cf-space-3);
    background: var(--cf-accent);
    color: var(--cf-accent-contrast);
    border-radius: var(--cf-radius-sm);
    transition: top var(--cf-dur-fast) var(--cf-ease);
}

.cf-skip-link:focus[b-91xcgiechr] { top: var(--cf-space-2); }

/* Coarse-pointer minimum for the back-to-app wordmark - a real tap target at 27px tall otherwise.
   Gated on the pointer so the desktop header lockup keeps its quiet proportions. The skip link stays
   as-is (it only exists while focused) and so does the inline @author link, which WCAG 2.5.8 exempts
   as a link inside a sentence. */
@media (pointer: coarse) {
    .cf-share__brand[b-91xcgiechr] { min-height: 44px; }
}
/* /Components/Layout/SiteFooter.razor.rz.scp.css */
/* Footer band - sits beneath the parchment body in a quieter surface so it reads as chrome, not content.
   The header owns the crimson-and-gold heraldry; the footer is deliberately understated. */
.cf-footer[b-b6mdketsme] {
    margin-top: auto; /* with the flex-column .cf-app-shell, pin the footer to the bottom on short pages */
    background: var(--cf-surface-2);
    border-top: 1px solid var(--cf-border);
    color: var(--cf-text-muted);
}

.cf-footer__inner[b-b6mdketsme] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--cf-space-5);
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--cf-space-6) var(--cf-space-6) var(--cf-space-4);
}

.cf-footer__brand[b-b6mdketsme] {
    max-width: 42ch;
}

.cf-footer__title[b-b6mdketsme] {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-2);
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-md);
    font-weight: 700;
    color: var(--cf-text);
}

.cf-footer__tagline[b-b6mdketsme] {
    margin: var(--cf-space-2) 0 0;
    font-size: var(--cf-text-sm);
    line-height: 1.5;
}

.cf-footer__link[b-b6mdketsme] {
    color: var(--cf-brand);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.cf-footer__link:hover[b-b6mdketsme] {
    color: var(--cf-brand-hover);
}

/* Build stamp - the live build's identity (commit + date). Quiet monospaced chrome: sits opposite the
   brand on wide screens (the inner is space-between) and drops under it on narrow. */
.cf-footer__build[b-b6mdketsme] {
    margin: 0;
    align-self: flex-end;
    font-family: var(--cf-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--cf-text-xs, 0.72rem);
    color: var(--cf-text-muted);
    opacity: 0.8;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .cf-footer__inner[b-b6mdketsme] {
        flex-direction: column;
        gap: var(--cf-space-4);
    }

    .cf-footer__build[b-b6mdketsme] {
        align-self: flex-start;
    }
}
/* /Components/Layout/ThemeToggle.razor.rz.scp.css */
/* One compact control on the crimson banner - icon-only on desktop (title/aria carry the words), a
   full-width labelled row inside the ☰ dropdown below 720px, where the nav flattens. */
.cf-theme-toggle[b-hpgaaslpwe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cf-space-2);
    width: 38px;
    height: 38px;
    padding: 0;
    border: 0;
    border-radius: var(--cf-radius-sm);
    background: none;
    color: var(--cf-cream);   /* banner ink - the control rides the crimson field in every theme */
    cursor: pointer;
}

.cf-theme-toggle:hover[b-hpgaaslpwe] {
    color: var(--cf-overlay-light);
    background: color-mix(in srgb, var(--cf-overlay-light) 14%, transparent);
}

/* the body's crimson focus ring would vanish on the banner - gold, like every banner control */
.cf-theme-toggle:focus-visible[b-hpgaaslpwe] {
    outline: 2px solid var(--cf-accent);
    outline-offset: 2px;
}

.cf-theme-toggle__label[b-hpgaaslpwe] {
    display: none;
    font-size: var(--cf-text-sm);
    white-space: nowrap;
}

/* Coarse pointers (touch): the ~44px floor for the banner's icon-only button (a tablet holds the
   desktop layout). Sits BEFORE the flattened-menu block so its full-width row still wins below 720px. */
@media (pointer: coarse) {
    .cf-theme-toggle[b-hpgaaslpwe] {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 720px) {
    .cf-theme-toggle[b-hpgaaslpwe] {
        width: 100%;
        height: 44px;   /* touch target in the flattened menu */
        justify-content: flex-start;
        padding: 0 var(--cf-space-3);
    }

    .cf-theme-toggle__label[b-hpgaaslpwe] {
        display: inline;
    }
}
/* /Components/Pages/Browse.razor.rz.scp.css */
/* Public-deck discovery page. Reuses the deck library's visual language (toolbar + grid); the styles are
   duplicated here because Blazor CSS isolation scopes them per component. */

.cf-browse__head[b-d5e9kvwjc0] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cf-browse__title[b-d5e9kvwjc0] {
    font-family: var(--cf-font-display);
    font-size: 30px;
    font-weight: 700;
    margin: 0;
}

.cf-browse__sub[b-d5e9kvwjc0] {
    color: var(--cf-text-muted);
    font-size: 13.5px;
    margin-top: 4px;
}

/* ---- toolbar ---- */
.cf-browse__toolbar[b-d5e9kvwjc0] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0 22px;
}


.cf-browse__chips[b-d5e9kvwjc0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.cf-browse__select-wrap[b-d5e9kvwjc0] {
    position: relative;
    display: inline-flex;
}

.cf-browse__select[b-d5e9kvwjc0] {
    height: 40px;
    padding: 0 32px 0 13px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    font-family: var(--cf-font-ui);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cf-text);
    cursor: pointer;
}

.cf-browse__select:focus-visible[b-d5e9kvwjc0] {
    outline: none;
    border-color: var(--cf-brand);
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand);
}

.cf-browse__select-wrap[b-d5e9kvwjc0]  .cf-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cf-text-muted);
    pointer-events: none;
}

/* ---- grid ---- */
.cf-browse__grid[b-d5e9kvwjc0] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
}

.cf-browse__more[b-d5e9kvwjc0] {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

/* ---- loading + empty ---- */
.cf-browse__loader[b-d5e9kvwjc0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px;
}

.cf-browse__spinner[b-d5e9kvwjc0] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--cf-border);
    border-top-color: var(--cf-brand);
    animation: cf-browse-spin-b-d5e9kvwjc0 .8s linear infinite;
}

.cf-browse__loader-label[b-d5e9kvwjc0] {
    font-size: 13px;
    color: var(--cf-text-muted);
    letter-spacing: .02em;
}

@keyframes cf-browse-spin-b-d5e9kvwjc0 {
    to { transform: rotate(360deg); }
}
/* /Components/Pages/Cards.razor.rz.scp.css */
.cf-cards[b-uhv5or8f41] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-5);
    align-items: start;
}

@media (min-width: 900px) {
    .cf-cards:has(.cf-cards__detail)[b-uhv5or8f41] {
        /* Was `auto`, which shrink-wraps the item's max-content contribution. That broke when the
           detail started hosting CardReaderSheet: its `.cf-card-reader__panel` is `container-type:
           inline-size`, and under inline-size containment an element's contents do NOT contribute to
           its own intrinsic width - the panel's max-content contribution collapses to ~0, so the
           `auto` track collapsed too, and the panel's `100cqw` container query then resolved against
           that collapsed width, shrinking the frame to a thumbnail. A definite track gives the
           container something to resolve against. The width is DERIVED, not a magic number: the frame at
           its scale ceiling, plus 52px of chrome - CardReaderSheet's panel padding (2 x --cf-space-3)
           and 1px border each side, then this rail's own padding and border again. Change the ceiling
           in app.css and this track follows. */
        grid-template-columns: 1fr calc(600px * var(--cf-reader-frame-scale) + 52px);
    }
}

.cf-cards__detail[b-uhv5or8f41] {
    position: sticky;
    top: var(--cf-header-height);
    /* Enlarge the rules text past the frame's display scale on this read surface (see --cf-text-scale
       in card-frames.css). */
    --cf-text-scale: 1.1;
    /* Was `width: max-content`, which is 422px for a 0.66-scaled frame and overflowed a 375px viewport
       (document width 446px, horizontal page scroll, card cut off). Bounded to the viewport instead;
       the reader's own rule scales the frame to fit inside it. */
    width: 100%;
    max-width: 100%;
    justify-self: center;
    padding: var(--cf-space-3);
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg);
}

/* Below the two-column breakpoint the detail is placed FIRST. Dropping it after the grid put it under
   188 result tiles - a tap on a card looked like it did nothing at all. */
@media (max-width: 899px) {
    .cf-cards__detail[b-uhv5or8f41] {
        order: -1;
        /* NOT sticky here. Sticky is the DESKTOP rail's job - it pins beside a scrolling grid. Below the
           breakpoint the detail sits ABOVE the grid instead, where sticky makes it hang over the cards as
           you scroll past, covering the list you are trying to browse. `relative`, not `static`: the close
           button is absolutely positioned against this region, and a static ancestor would let it escape
           to the initial containing block. */
        position: relative;
    }
}

/* At two-column widths the frame is legible at its own scale, so the transcript would only duplicate it.
   display:none also takes it out of the accessibility tree, where the frame's aria-label already carries
   the card text.
   ::deep is REQUIRED: .cf-card-reader__transcript belongs to CardReaderSheet, a child component whose
   elements do not carry this page's scope attribute. Without it the rule silently matches nothing. */
@media (min-width: 900px) {
    .cf-cards__detail[b-uhv5or8f41]  .cf-card-reader__transcript {
        display: none;
    }

    /* Frame-only here (the transcript above is hidden), so nothing is waiting below it and the reader's
       50svh height ceiling would only shrink the card for no one. Inherits down to the mount - see the
       --cf-reader-frame-block note in CardReaderSheet.razor.css. No ::deep: custom properties inherit. */
    .cf-cards__detail[b-uhv5or8f41] {
        --cf-reader-frame-block: 100svh;
    }
}

/* Quiet inline notice for a bad /cards/{code} deep link - informational, not an error state. */
.cf-cards__notfound[b-uhv5or8f41] {
    margin: 0 0 var(--cf-space-3);
    font-size: var(--cf-text-sm);
    color: var(--cf-text-muted);
}

.cf-cards__detail-code[b-uhv5or8f41] {
    margin-top: var(--cf-space-2);
    text-align: center;
    color: var(--cf-text-muted);
    font-size: var(--cf-text-xs);
}

/* Dismiss control for the detail region. Sized for a coarse pointer (see Button.razor.css) and pinned to
   the region's own top-right rather than the viewport, so it scrolls away with the card it closes. */
.cf-cards__detail-close[b-uhv5or8f41] {
    position: absolute;
    top: var(--cf-space-2);
    right: var(--cf-space-2);
    z-index: 1;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    color: var(--cf-text-muted);
    cursor: pointer;
}

.cf-cards__detail-close:hover[b-uhv5or8f41] {
    color: var(--cf-text);
}
/* /Components/Pages/Compete.razor.rz.scp.css */
/* COMPETITIVE_PLAY_SPEC §5.1 - the Qualifier Gauntlet page. Parchment surface + crimson brand accent, on the shipped
   --cf-* token theme. Tokens are globally defined in app.css, so no per-use fallbacks (see CSS_CONVENTIONS). */

.cf-compete[b-sn1c9msse6] {
    max-width: 34rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

.cf-compete__head[b-sn1c9msse6] {
    text-align: center;
    margin-bottom: 1.25rem;
}

.cf-compete__title[b-sn1c9msse6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.6rem;
    margin: 0 0 0.25rem;
    color: var(--cf-text);
}

.cf-compete__lede[b-sn1c9msse6] {
    margin: 0;
    color: var(--cf-text-muted);
    font-size: 0.95rem;
}

.cf-compete__card[b-sn1c9msse6] {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 1px 2px color-mix(in srgb, var(--cf-text) 6%, transparent);
}

.cf-compete__empty[b-sn1c9msse6] {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

.cf-compete__muted[b-sn1c9msse6] {
    color: var(--cf-text-muted);
    margin: 0;
}

/* Event header: name + rules on the left, rating / tickets meters on the right. */
.cf-compete__event[b-sn1c9msse6] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--cf-border);
}

.cf-compete__event-name[b-sn1c9msse6] {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--cf-text);
}

.cf-compete__rules[b-sn1c9msse6] {
    color: var(--cf-text-muted);
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

.cf-compete__meters[b-sn1c9msse6] {
    display: flex;
    gap: 1.25rem;
    margin: 0;
    text-align: right;
}

.cf-compete__meters dt[b-sn1c9msse6] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cf-text-muted);
}

.cf-compete__meters dd[b-sn1c9msse6] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cf-text);
}

.cf-compete__of[b-sn1c9msse6] {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--cf-text-muted);
}

/* Run progress. */
.cf-compete__run[b-sn1c9msse6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
}

.cf-compete__score[b-sn1c9msse6] {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

.cf-compete__score-num[b-sn1c9msse6] {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1;
    color: var(--cf-text);
}

.cf-compete__score-sep[b-sn1c9msse6] {
    font-size: 1.6rem;
    color: var(--cf-text-muted);
}

.cf-compete__score-label[b-sn1c9msse6] {
    margin-left: 0.4rem;
    color: var(--cf-text-muted);
    font-size: 0.85rem;
}

.cf-compete__pips[b-sn1c9msse6] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.cf-compete__pip[b-sn1c9msse6] {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 1px solid var(--cf-border);
    background: transparent;
}

.cf-compete__pip--win[b-sn1c9msse6] {
    background: var(--cf-brand);
    border-color: var(--cf-brand);
}

.cf-compete__pip--loss[b-sn1c9msse6] {
    background: var(--cf-text-muted);
    border-color: var(--cf-text-muted);
}

.cf-compete__pip-gap[b-sn1c9msse6] {
    width: 1rem;
}

.cf-compete__searching[b-sn1c9msse6] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cf-text-muted);
}

.cf-compete__queue[b-sn1c9msse6] {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
}

.cf-compete__queue .cf-compete__searching[b-sn1c9msse6] {
    justify-content: center;
    font-weight: 600;
    color: var(--cf-text);
}

.cf-compete__queue-meta[b-sn1c9msse6] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.cf-compete__queue-meta div[b-sn1c9msse6] {
    padding: 0.65rem;
    border: 1px solid var(--cf-border);
    border-radius: 0.5rem;
    background: var(--cf-bg);
    text-align: center;
}

.cf-compete__queue-meta dt[b-sn1c9msse6] {
    margin: 0 0 0.2rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--cf-text-muted);
}

.cf-compete__queue-meta dd[b-sn1c9msse6] {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--cf-text);
}

.cf-compete__queue-help[b-sn1c9msse6] {
    margin: 0;
    color: var(--cf-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

.cf-compete__cancel[b-sn1c9msse6] {
    max-width: 15rem;
    align-self: center;
}

.cf-compete__spinner[b-sn1c9msse6] {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 2px solid var(--cf-border);
    border-top-color: var(--cf-brand);
    animation: cf-compete-spin-b-sn1c9msse6 0.8s linear infinite;
}

@keyframes cf-compete-spin-b-sn1c9msse6 {
    to { transform: rotate(360deg); }
}

/* Outcome badges. */
.cf-compete__badge[b-sn1c9msse6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.cf-compete__badge--qualified[b-sn1c9msse6] {
    background: color-mix(in srgb, var(--cf-brand) 16%, transparent);
    color: var(--cf-brand-hover);
    border: 1px solid var(--cf-brand);
}

.cf-compete__badge--out[b-sn1c9msse6] {
    background: var(--cf-surface-2);
    color: var(--cf-text-muted);
    border: 1px solid var(--cf-border);
}

/* Entry controls. */
.cf-compete__field[b-sn1c9msse6] {
    display: block;
    margin-bottom: 0.85rem;
}

.cf-compete__field-label[b-sn1c9msse6] {
    display: block;
    font-size: 0.8rem;
    color: var(--cf-text-muted);
    margin-bottom: 0.3rem;
}

.cf-compete__select[b-sn1c9msse6] {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--cf-border);
    border-radius: 0.5rem;
    background: var(--cf-bg);
    color: var(--cf-text);
    font: inherit;
}

.cf-compete__deck-readiness[b-sn1c9msse6] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: -0.25rem 0 0.85rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--cf-border);
    background: var(--cf-bg);
    color: var(--cf-text-muted);
    font-size: 0.86rem;
}

.cf-compete__deck-readiness strong[b-sn1c9msse6] {
    color: var(--cf-text);
}

.cf-compete__deck-readiness--warn[b-sn1c9msse6] {
    border-color: color-mix(in srgb, var(--cf-brand) 45%, var(--cf-border));
    background: color-mix(in srgb, var(--cf-brand) 8%, var(--cf-bg));
}

.cf-compete__btn[b-sn1c9msse6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.7rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cf-compete__btn:disabled[b-sn1c9msse6] {
    opacity: 0.6;
    cursor: default;
}

.cf-compete__btn--primary[b-sn1c9msse6] {
    background: var(--cf-brand);
    color: var(--cf-brand-contrast);
}

.cf-compete__btn--primary:hover:not(:disabled)[b-sn1c9msse6] {
    filter: brightness(1.05);
}

.cf-compete__btn--ghost[b-sn1c9msse6] {
    background: transparent;
    border-color: var(--cf-border);
    color: var(--cf-text);
    text-decoration: none;
}

.cf-compete__note[b-sn1c9msse6] {
    margin: 0.85rem 0 0;
    padding: 0.6rem 0.8rem;
    border-radius: 0.5rem;
    background: var(--cf-surface-2);
    color: var(--cf-text);
    font-size: 0.9rem;
    text-align: center;
}

@media (max-width: 520px) {
    .cf-compete__queue-meta[b-sn1c9msse6] {
        grid-template-columns: 1fr;
    }

    .cf-compete__cancel[b-sn1c9msse6] {
        max-width: none;
    }
}
/* /Components/Pages/Decks.razor.rz.scp.css */
.cf-decks__head[b-zi9u9udr9i] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cf-decks__title[b-zi9u9udr9i] {
    font-family: var(--cf-font-display);
    font-size: 30px;
    font-weight: 700;
    margin: 0;
}

.cf-decks__sub[b-zi9u9udr9i] {
    color: var(--cf-text-muted);
    font-size: 13.5px;
    margin-top: 4px;
}

.cf-decks__grid[b-zi9u9udr9i] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
}

/* loading */
.cf-decks__loader[b-zi9u9udr9i] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px;
}

.cf-decks__spinner[b-zi9u9udr9i] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--cf-border);
    border-top-color: var(--cf-brand);
    animation: cf-decks-spin-b-zi9u9udr9i .8s linear infinite;
}

.cf-decks__loader-label[b-zi9u9udr9i] {
    font-size: 13px;
    color: var(--cf-text-muted);
    letter-spacing: .02em;
}

@keyframes cf-decks-spin-b-zi9u9udr9i {
    to { transform: rotate(360deg); }
}

/* delete confirm */
.cf-decks__confirm[b-zi9u9udr9i] {
    margin: 0;
    font-size: 14px;
    color: var(--cf-text);
}
/* /Components/Pages/DeckShare.razor.rz.scp.css */
.cf-share[b-0l3n3duf8q] {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-lg);
    overflow: hidden;
    box-shadow: var(--cf-shadow-2);
}

/* ---------- Identity band ---------- */
.cf-share__band[b-0l3n3duf8q] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
    padding: 26px 28px;
    border-bottom: 2px solid color-mix(in srgb, var(--fac) 35%, var(--cf-surface));
    background: linear-gradient(180deg, var(--cf-surface), var(--cf-surface-2));
}

.cf-share__idcard[b-0l3n3duf8q] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: var(--cf-surface);
    border: 1px solid color-mix(in srgb, var(--fac) 35%, var(--cf-surface));
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-1);
}

.cf-share__name[b-0l3n3duf8q] {
    margin: 0;
    font-family: var(--cf-font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
}

.cf-share__line[b-0l3n3duf8q] {
    color: var(--cf-text-muted);
    font-size: 13px;
    margin-top: 3px;
}

.cf-share__mid[b-0l3n3duf8q] {
    min-width: 0;
}

.cf-share__desc[b-0l3n3duf8q] {
    color: var(--cf-text-muted);
    font-size: 13.5px;
    max-width: 640px;
    margin: 0 0 12px;
}

.cf-share__stats[b-0l3n3duf8q] {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-end;
}

.cf-share__stats .cf-share__chip[b-0l3n3duf8q] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--cf-radius-pill);
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--cf-text-muted);
}

.cf-share__chips[b-0l3n3duf8q] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cf-share__forked[b-0l3n3duf8q] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--cf-text-muted);
    margin: 0 0 10px;
}

.cf-share__forked b[b-0l3n3duf8q] { color: var(--cf-text); }

.cf-share__stats .cf-share__by[b-0l3n3duf8q] {
    font-size: 12.5px;
    color: var(--cf-text-muted);
}

.cf-share__stats .cf-share__by b[b-0l3n3duf8q] { color: var(--cf-text); }
.cf-share__stats .cf-share__by .cf-share__author[b-0l3n3duf8q] { color: var(--cf-text); font-weight: 700; }
.cf-share__stats .cf-share__by .cf-share__author:hover[b-0l3n3duf8q] { color: var(--cf-brand); text-decoration: underline; }

.cf-share__stats .cf-btn[b-0l3n3duf8q] { margin-top: 6px; }

/* The deck body opts into the editor's component styles by carrying .cf-editor-root (deck-editor.css scopes
   everything under it). That class is otherwise a full-viewport flex shell - neutralize its base layout here
   so it's just a styling scope on this page. Higher specificity than the base rule, and scoped, so it wins. */
.cf-share .cf-editor-root[b-0l3n3duf8q] {
    height: auto;
    display: block;
    overflow: visible;
    background: transparent;
}

/* ---------- Layout toolbar ---------- */
.cf-share__toolbar[b-0l3n3duf8q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 13px 28px;
    border-bottom: 1px solid var(--cf-border);
    background: var(--cf-surface);
}

/* Keep the layout switch (and the curve tile toggle) grouped left, so the "Test setup" action sits
   alone on the right of the space-between toolbar. */
.cf-share__toolbar-left[b-0l3n3duf8q] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- Body: deck layout + stats rail ---------- */
.cf-share__body[b-0l3n3duf8q] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 304px;
    gap: 26px;
    align-items: start;
    padding: 24px 28px 30px;
}

.cf-share__main[b-0l3n3duf8q] { min-width: 0; }

/* Curve layout: full-width board, stats strip below (the cost board wants width). The rail's blocks - the
   completeness meters + each stat block - flow into a tidy auto-fill grid instead of a tall side column. */
.cf-share__body--wide[b-0l3n3duf8q] { grid-template-columns: 1fr; }
.cf-share__body--wide .cf-share__rail[b-0l3n3duf8q] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px 18px;
    align-items: start;
}

/* Curve frames can run wider than the column - let the board scroll on its own rather than clip.
   overflow-x:auto forces overflow-y to compute to auto too, so the box also clips vertically at its
   top edge - pad the top so the peak lane's "peak" tag (top:-8px on the coin head) isn't cut off. */
.cf-share__curve-scroll[b-0l3n3duf8q] { overflow-x: auto; padding-top: 16px; }

.cf-share__rail[b-0l3n3duf8q] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
}

/* ---------- Tapestry: two deck-list columns ---------- */
.cf-share__cols[b-0l3n3duf8q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.cf-share__col-h[b-0l3n3duf8q] {
    font-family: var(--cf-font-display);
    font-size: 17px;
    margin: 0 0 8px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.cf-share__col .cf-share__col-count[b-0l3n3duf8q] {
    font-family: var(--cf-font-mono);
    font-size: 11px;
    color: var(--cf-text-muted);
    font-weight: 400;
}

/* ---------- Loading + invalid ---------- */
.cf-share__loading[b-0l3n3duf8q] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 20px;
    color: var(--cf-text-muted);
    font-size: 14px;
}

.cf-share__loading .cf-share__spinner[b-0l3n3duf8q] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid var(--cf-border);
    border-top-color: var(--cf-brand);
    animation: cf-share-spin-b-0l3n3duf8q .8s linear infinite;
}

@keyframes cf-share-spin-b-0l3n3duf8q { to { transform: rotate(360deg); } }

.cf-share__back[b-0l3n3duf8q] {
    margin-top: 8px;
    font-weight: 600;
    color: var(--cf-brand);
}

@media (max-width: 860px) {
    .cf-share__band[b-0l3n3duf8q] { grid-template-columns: 1fr; }
    .cf-share__stats[b-0l3n3duf8q] { text-align: left; align-items: flex-start; }
    .cf-share__body[b-0l3n3duf8q] { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    .cf-share__cols[b-0l3n3duf8q] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ---------- Hero (the one place gold lives, on the dark crimson band) ---------- */
.cf-hero[b-1hbz2k08xe] {
    position: relative;
    text-align: center;
    padding: 52px 28px;
    border-radius: var(--cf-radius-lg);
    border-bottom: 4px solid var(--cf-accent);
    color: var(--cf-cream); /* the band's crimson is pinned below, so its ink stays cream in every theme */
    /* stylelint-disable color-no-hex -- bespoke: dark-crimson hero band gradient, no --cf-* token equivalent (darker than --cf-brand) */
    background:
        radial-gradient(120% 150% at 16% -30%, #c22222 0%, transparent 55%),
        linear-gradient(180deg, #9c1414 0%, #7c0f0f 55%, #650c0c 100%);
    /* stylelint-enable color-no-hex */
    box-shadow: var(--cf-shadow-2);
}

/* small decorative crown - the only brand mark in the hero (the banner owns the wordmark) */
.cf-hero__crest[b-1hbz2k08xe] {
    display: block;
    margin: 0 auto var(--cf-space-2);
    color: var(--cf-accent);
}

.cf-hero__headline[b-1hbz2k08xe] {
    font-family: var(--cf-font-display);
    font-size: clamp(28px, 4.5vw, 40px);
    font-weight: 700;
    color: var(--cf-accent);
    text-shadow: 0 1px 0 color-mix(in srgb, var(--cf-overlay-dark) 45%, transparent);
    margin: 0;
    line-height: 1.1;
}

.cf-hero__headline em[b-1hbz2k08xe] {
    font-style: italic;
}

.cf-hero__tag[b-1hbz2k08xe] {
    font-size: var(--cf-text-md);
    color: color-mix(in srgb, var(--cf-cream) 88%, transparent);
    margin: var(--cf-space-3) auto var(--cf-space-6);
    max-width: 540px;
    line-height: 1.5;
}

.cf-hero__cta[b-1hbz2k08xe] {
    display: flex;
    gap: var(--cf-space-3);
    justify-content: center;
    flex-wrap: wrap;
}

.cf-hero__btn[b-1hbz2k08xe] {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-2);
    height: 48px;
    padding: 0 26px;
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-text-md);
    font-weight: 700;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--cf-dur-fast) var(--cf-ease);
}

.cf-hero__btn:hover[b-1hbz2k08xe] { text-decoration: none; }

/* Press nudge on all variants (the lobby/account pattern) - deliberately outside the
   transition list so a tap confirms instantly. */
.cf-hero__btn:active[b-1hbz2k08xe] { transform: translateY(0.5px); }

.cf-hero__btn--gold[b-1hbz2k08xe] {
    background: var(--cf-accent);
    color: var(--cf-accent-contrast);
    border-color: var(--cf-gold-border);
}

.cf-hero__btn--gold:hover[b-1hbz2k08xe] { background: var(--cf-gold-hover); }

.cf-hero__btn--ghost[b-1hbz2k08xe] {
    background: color-mix(in srgb, var(--cf-overlay-dark) 20%, transparent);
    color: var(--cf-cream);
    border-color: color-mix(in srgb, var(--cf-cream) 55%, transparent);
}

.cf-hero__btn--ghost:hover[b-1hbz2k08xe] { background: color-mix(in srgb, var(--cf-overlay-dark) 32%, transparent); }

/* gold focus ring on the dark hero (the body's crimson ring would vanish here) */
.cf-hero__btn:focus-visible[b-1hbz2k08xe] {
    outline: none;
    /* bespoke: inner ring matches the hero band's darkest crimson stop */
    box-shadow: 0 0 0 2px #7c0f0f, 0 0 0 4px var(--cf-accent), 0 0 0 5px var(--cf-cream); /* stylelint-disable-line color-no-hex -- bespoke: focus ring matches the hero's darkest crimson stop */
}

/* ---------- How it works (evergreen pillars) ---------- */
.cf-how[b-1hbz2k08xe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--cf-space-4);
    margin-top: var(--cf-space-6);
}

.cf-how__card[b-1hbz2k08xe] {
    padding: var(--cf-space-5) var(--cf-space-5) var(--cf-space-4);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg);
    background: var(--cf-surface);
}

.cf-how__ico[b-1hbz2k08xe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--cf-radius-md);
    margin-bottom: var(--cf-space-3);
    background: var(--cf-brand);
    color: var(--cf-brand-contrast);
}

.cf-how__card h2[b-1hbz2k08xe] {
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-lg);
    margin: 0 0 var(--cf-space-1);
}

.cf-how__card p[b-1hbz2k08xe] {
    margin: 0 0 var(--cf-space-3);
    color: var(--cf-text-muted);
    font-size: var(--cf-text-sm);
    line-height: 1.5;
}

.cf-how__link[b-1hbz2k08xe] {
    font-size: var(--cf-text-sm);
    font-weight: 600;
    color: var(--cf-brand);
    text-decoration: none;
}

.cf-how__link:hover[b-1hbz2k08xe] { text-decoration: underline; }

/* ---------- Featured ---------- */
.cf-featured[b-1hbz2k08xe] {
    padding: var(--cf-space-8) 0 var(--cf-space-2);
}

.cf-featured__head[b-1hbz2k08xe] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cf-space-3);
    flex-wrap: wrap;
}

.cf-featured__head h2[b-1hbz2k08xe] {
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-2xl);
    margin: 0;
}

.cf-featured__sub[b-1hbz2k08xe] {
    font-size: var(--cf-text-sm);
    color: var(--cf-text-muted);
}

.cf-featured__note[b-1hbz2k08xe] {
    margin-top: var(--cf-space-4);
    padding: var(--cf-space-7);
    text-align: center;
    color: var(--cf-text-muted);
    font-size: var(--cf-text-sm);
    border: 1px dashed var(--cf-border);
    border-radius: var(--cf-radius-lg);
    background: var(--cf-surface-2);
}

.cf-fac-group[b-1hbz2k08xe] {
    margin-top: var(--cf-space-6);
}

.cf-fac-group__head[b-1hbz2k08xe] {
    display: flex;
    align-items: center;
    gap: var(--cf-space-3);
    margin-bottom: var(--cf-space-4);
    padding-bottom: var(--cf-space-2);
    border-bottom: 1px solid var(--cf-border);
    color: var(--fac);
}

.cf-fac-group__head h3[b-1hbz2k08xe] {
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-md);
    margin: 0;
    color: var(--fac);
}

.cf-fac-group__more[b-1hbz2k08xe] {
    margin-left: auto;
    font-size: var(--cf-text-xs);
    font-weight: 600;
    color: var(--cf-brand);
    text-decoration: none;
}

.cf-fac-group__more:hover[b-1hbz2k08xe] { text-decoration: underline; }

/* Cap the column so a lone deck stays card-sized (a `1fr` track would balloon a single card to full width). */
.cf-deck-grid[b-1hbz2k08xe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 264px));
    gap: var(--cf-space-4);
}

/* "Build a {faction} deck" tile that pairs a sparse faction row - tinted to the faction accent via --fac. */
.cf-build-tile[b-1hbz2k08xe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--cf-space-2);
    padding: var(--cf-space-4);
    border: 1px dashed color-mix(in srgb, var(--fac, var(--cf-brand)) 45%, var(--cf-border));
    border-radius: var(--cf-radius-lg);
    background: var(--cf-surface-2);
    color: var(--fac, var(--cf-brand));
    font-weight: 700;
    font-size: var(--cf-text-sm);
    text-align: center;
    text-decoration: none;
}

.cf-build-tile:hover[b-1hbz2k08xe] {
    background: var(--cf-surface-hover);
    text-decoration: none;
}

.cf-build-tile:focus-visible[b-1hbz2k08xe] {
    outline: 2px solid var(--fac, var(--cf-brand));
    outline-offset: 2px;
}

/* ---------- Signed-in "resume" hero (your-turn games) ---------- */
.cf-hero--resume[b-1hbz2k08xe] {
    text-align: left;
    /* Flatter than the marketing hero: the gold headline is LEFT-aligned (where the centered hero's bright
       top-left radial sits), so drop the radial highlight to keep the large gold headline ≥3:1 on the crimson.
       bespoke: dark-crimson hero band gradient - no --cf-* token equivalent. */
    background: linear-gradient(180deg, #8c1212 0%, #7c0f0f 55%, #650c0c 100%); /* stylelint-disable-line color-no-hex -- bespoke: dark-crimson page-hero band */
}

.cf-resume__head[b-1hbz2k08xe] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cf-space-3);
    margin-bottom: var(--cf-space-4);
}

.cf-resume__head .cf-hero__headline[b-1hbz2k08xe] {
    font-size: clamp(24px, 3.5vw, 34px);
}

.cf-resume__all[b-1hbz2k08xe] {
    flex: none;
    color: var(--cf-cream);
    font-size: var(--cf-text-sm);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cf-resume__all:hover[b-1hbz2k08xe] {
    color: var(--cf-overlay-light);
    text-decoration: underline;
}

.cf-resume__list[b-1hbz2k08xe] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2);
}

.cf-resume__row[b-1hbz2k08xe] {
    display: flex;
    align-items: center;
    gap: var(--cf-space-3);
    flex-wrap: wrap;
    padding: var(--cf-space-3);
    border-radius: var(--cf-radius-md);
    background: color-mix(in srgb, var(--cf-overlay-dark) 22%, transparent);
}

.cf-resume__players[b-1hbz2k08xe] {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2);
    min-width: 0;
    font-weight: 700;
}

.cf-resume__name[b-1hbz2k08xe] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16ch;
}

.cf-resume__vs[b-1hbz2k08xe] {
    color: color-mix(in srgb, var(--cf-cream) 70%, transparent);
    font-weight: 400;
    font-size: var(--cf-text-sm);
}

.cf-resume__meta[b-1hbz2k08xe] {
    display: flex;
    align-items: center;
    gap: var(--cf-space-2);
    margin-left: auto;
    font-size: var(--cf-text-sm);
    color: color-mix(in srgb, var(--cf-cream) 82%, transparent);
}

.cf-resume__deadline[b-1hbz2k08xe] {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--cf-overlay-dark) 30%, transparent);
    font-size: var(--cf-text-xs);
}

.cf-resume__deadline--urgent[b-1hbz2k08xe] {
    background: var(--cf-accent);
    color: var(--cf-accent-contrast);
    font-weight: 700;
}

/* Secondary (cream-outline) - gold stays a single accent on the band (the headline + the urgent deadline pill),
   so three Resume buttons don't drown out the one thing that should shout. */
.cf-resume__resume[b-1hbz2k08xe] {
    flex: none;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 var(--cf-space-4);
    border-radius: var(--cf-radius-md);
    border: 1px solid color-mix(in srgb, var(--cf-cream) 50%, transparent);
    background: color-mix(in srgb, var(--cf-overlay-light) 6%, transparent);
    color: var(--cf-cream);
    font-size: var(--cf-text-sm);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.cf-resume__resume:hover[b-1hbz2k08xe] {
    background: color-mix(in srgb, var(--cf-overlay-light) 16%, transparent);
    color: var(--cf-overlay-light);
    text-decoration: none;
}

.cf-resume__resume:focus-visible[b-1hbz2k08xe] {
    outline: 2px solid var(--cf-accent);
    outline-offset: 2px;
}

/* ---------- Learn-to-play callout (signed-in) ---------- */
/* A signpost, not a destination: muted parchment strip under the personalized sections, deliberately
   quieter than the hero band above it (no gold, small type). */
.cf-learn-callout[b-1hbz2k08xe] {
    display: flex;
    align-items: center;
    gap: var(--cf-space-3);
    flex-wrap: wrap;
    margin-top: var(--cf-space-4);
    padding: var(--cf-space-3) var(--cf-space-4);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg);
    background: var(--cf-surface-2);
}

.cf-learn-callout__ico[b-1hbz2k08xe] {
    flex: none;
    color: var(--cf-brand);
}

.cf-learn-callout__copy[b-1hbz2k08xe] {
    margin: 0;
    color: var(--cf-text-muted);
    font-size: var(--cf-text-sm);
    line-height: 1.5;
}

.cf-learn-callout__links[b-1hbz2k08xe] {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-4);
    margin-left: auto;
    white-space: nowrap;
}

.cf-learn-callout__link[b-1hbz2k08xe] {
    font-size: var(--cf-text-sm);
    font-weight: 600;
    color: var(--cf-brand);
    text-decoration: none;
}

.cf-learn-callout__link:hover[b-1hbz2k08xe] { text-decoration: underline; }

/* The tutorial is the primary of the pair - a compact outlined chip, still far below CTA weight. */
.cf-learn-callout__link--primary[b-1hbz2k08xe] {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding: 0 var(--cf-space-3);
    border: 1px solid color-mix(in srgb, var(--cf-brand) 45%, var(--cf-border));
    border-radius: var(--cf-radius-md);
    background: var(--cf-surface);
}

.cf-learn-callout__link--primary:hover[b-1hbz2k08xe] {
    background: var(--cf-surface-hover);
    text-decoration: none;
}

/* "Your decks" section-heading link (matches the "See all" affordance weight). */
.cf-more-link[b-1hbz2k08xe] {
    font-size: var(--cf-text-sm);
    font-weight: 600;
    color: var(--cf-brand);
    text-decoration: none;
}

.cf-more-link:hover[b-1hbz2k08xe] {
    text-decoration: underline;
}

/* "Your decks" is a personal subsection - a lighter heading rank than the community "Featured decks" so the two
   deck grids don't read as one repeated wall. */
.cf-your-decks .cf-featured__head h2[b-1hbz2k08xe] {
    font-size: var(--cf-text-xl);
}

/* Stacked on a narrow screen, equalize the two hero CTAs + stack the resume rows. */
@media (max-width: 480px) {
    .cf-hero__cta[b-1hbz2k08xe] {
        flex-direction: column;
        align-items: stretch;
    }

    .cf-hero__cta .cf-hero__btn[b-1hbz2k08xe] {
        width: 100%;
        justify-content: center;
    }

    .cf-resume__head[b-1hbz2k08xe] {
        flex-wrap: wrap;
    }

    .cf-resume__meta[b-1hbz2k08xe] {
        margin-left: 0;
        width: 100%;
    }

    .cf-resume__resume[b-1hbz2k08xe] {
        width: 100%;
    }
}
/* /Components/Pages/MyGames.razor.rz.scp.css */
/* Page chrome - Blazor scoped CSS does not reach across components, so this page carries its own copy of the
   shared head / loader classes rather than borrowing another page's scope (mirrors Replays.razor.css). */
.cf-mygames__head[b-vjjzot0zsi] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cf-mygames__title[b-vjjzot0zsi] {
    font-family: var(--cf-font-display);
    font-size: 30px;
    font-weight: 700;
    margin: 0;
}

.cf-mygames__sub[b-vjjzot0zsi] {
    color: var(--cf-text-muted);
    font-size: 13.5px;
    margin-top: 4px;
}

.cf-mygames__loader[b-vjjzot0zsi] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px;
}

.cf-mygames__ring[b-vjjzot0zsi] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--cf-border);
    border-top-color: var(--cf-accent);
    animation: cf-mygames-spin-b-vjjzot0zsi .8s linear infinite;
}

.cf-mygames__label[b-vjjzot0zsi] {
    font-size: 13px;
    color: var(--cf-text-muted);
    letter-spacing: .02em;
}

@keyframes cf-mygames-spin-b-vjjzot0zsi {
    to { transform: rotate(360deg); }
}

.cf-mygames__command[b-vjjzot0zsi] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, .9fr);
    gap: 12px;
    margin-top: 24px;
    padding: 12px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 8px;
}

.cf-mygames__next[b-vjjzot0zsi] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 12px;
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    border-radius: 8px;
}

.cf-mygames__eyebrow[b-vjjzot0zsi] {
    color: var(--cf-text-muted);
    font-family: var(--cf-font-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cf-mygames__next-main[b-vjjzot0zsi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cf-mygames__next-title[b-vjjzot0zsi] {
    overflow: hidden;
    color: var(--cf-text);
    font-size: 15px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-mygames__next-meta[b-vjjzot0zsi] {
    color: var(--cf-text-muted);
    font-size: 12px;
}

.cf-mygames__next-actions[b-vjjzot0zsi] {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-self: end;
}

.cf-mygames__primary-resume[b-vjjzot0zsi] {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 8px 15px;
    color: var(--cf-accent-contrast);
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    background: var(--cf-accent);
    border-radius: 8px;
}

.cf-mygames__primary-resume:hover[b-vjjzot0zsi] {
    filter: brightness(1.05);
}

.cf-mygames__metrics[b-vjjzot0zsi] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
}

.cf-mygames__metric[b-vjjzot0zsi] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 68px;
    padding: 10px;
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    border-radius: 8px;
}

.cf-mygames__metric dt[b-vjjzot0zsi] {
    overflow: hidden;
    color: var(--cf-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.cf-mygames__metric dd[b-vjjzot0zsi] {
    margin: 2px 0 0;
    color: var(--cf-text);
    font-family: var(--cf-font-display);
    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

.cf-mygames__metric--risk dd[b-vjjzot0zsi] {
    color: var(--cf-warning);
}

.cf-mygames__toolbar[b-vjjzot0zsi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.cf-mygames__filters[b-vjjzot0zsi] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.cf-mygames__filter[b-vjjzot0zsi] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 6px 10px;
    color: var(--cf-text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 999px;
    cursor: pointer;
}

.cf-mygames__filter b[b-vjjzot0zsi] {
    color: var(--cf-text);
    font-family: var(--cf-font-mono);
    font-size: 11px;
}

.cf-mygames__filter:hover[b-vjjzot0zsi] {
    color: var(--cf-text);
    background: var(--cf-surface-hover);
}

.cf-mygames__filter--on[b-vjjzot0zsi] {
    color: var(--cf-accent-contrast);
    background: var(--cf-accent);
    border-color: var(--cf-accent);
}

.cf-mygames__filter--on b[b-vjjzot0zsi] {
    color: var(--cf-accent-contrast);
}

.cf-mygames__filter:focus-visible[b-vjjzot0zsi] {
    outline: none;
    box-shadow: 0 0 0 2px var(--cf-bg), 0 0 0 4px var(--cf-brand);
}

.cf-mygames__showing[b-vjjzot0zsi] {
    color: var(--cf-text-muted);
    font-size: 12px;
    font-weight: 600;
}

.cf-mygames__filter-empty[b-vjjzot0zsi] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 20px;
    padding: 18px;
    color: var(--cf-text-muted);
    background: var(--cf-surface);
    border: 1px dashed var(--cf-border-strong);
    border-radius: 8px;
}

.cf-mygames__filter-empty button[b-vjjzot0zsi] {
    min-height: 34px;
    padding: 7px 12px;
    color: var(--cf-text);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border-strong);
    border-radius: 8px;
    cursor: pointer;
}

.cf-mygames__filter-empty button:hover[b-vjjzot0zsi] {
    background: var(--cf-surface-hover);
}

.cf-mygames__list[b-vjjzot0zsi] {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cf-mygames__row[b-vjjzot0zsi] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 8px;
}

/* Your-turn rows get a subtle accent edge so the actionable matches stand out. An inset shadow (not a
   border-left) so the row's rounded corners aren't tapered into a wedge. */
.cf-mygames__row--you[b-vjjzot0zsi] {
    box-shadow: inset 3px 0 0 var(--cf-accent);
}

.cf-mygames__players[b-vjjzot0zsi] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

/* The matchup line - the names that were the whole cell before the meta line was added below them. */
.cf-mygames__names[b-vjjzot0zsi] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
    color: var(--cf-text);
}

/* Correspondence context under the names: "Round N · Opponent moved 3h ago" - muted so it sits behind the
   matchup and the turn status. */
.cf-mygames__meta[b-vjjzot0zsi] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    color: var(--cf-text-muted);
}

.cf-mygames__round[b-vjjzot0zsi] {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.cf-mygames__separator[b-vjjzot0zsi] {
    color: var(--cf-border);
}

.cf-mygames__vs[b-vjjzot0zsi] {
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cf-text-muted);
}

.cf-mygames__turn[b-vjjzot0zsi] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    line-height: 1.2;
}

.cf-mygames__badge[b-vjjzot0zsi] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Your turn = the one status that needs action, so it reads as "important" - but a SOFT gold pill, not a second
   solid-gold block, so the solid-gold Resume button stays the single primary CTA on the row. */
.cf-mygames__badge--you[b-vjjzot0zsi] {
    background: color-mix(in srgb, var(--cf-accent) 28%, var(--cf-surface));
    color: var(--cf-text);
}

.cf-mygames__badge--them[b-vjjzot0zsi] {
    background: var(--cf-surface-2);
    color: var(--cf-text-muted);
}

.cf-mygames__badge--idle[b-vjjzot0zsi] {
    background: transparent;
    color: var(--cf-text-muted);
    border: 1px solid var(--cf-border);
}

.cf-mygames__deadline[b-vjjzot0zsi] {
    font-size: 12px;
    color: var(--cf-text-muted);
}

/* Final-fifth of YOUR window - amber, a step before the red overdue state. */
.cf-mygames__deadline--urgent[b-vjjzot0zsi] {
    color: var(--cf-warning);
    font-weight: 600;
}

/* Your move is overdue - a forfeit is imminent, so this out-shouts everything else on the row. */
.cf-mygames__deadline--due[b-vjjzot0zsi] {
    color: var(--cf-danger);
    font-weight: 600;
}

/* The OPPONENT is overdue (they're about to forfeit, to your benefit) - neutral, not an alarm for you. */
.cf-mygames__deadline--late[b-vjjzot0zsi] {
    color: var(--cf-text-muted);
}

.cf-mygames__resume[b-vjjzot0zsi] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    border-radius: 8px;
    background: var(--cf-accent);
    color: var(--cf-accent-contrast);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cf-mygames__resume:hover[b-vjjzot0zsi] {
    filter: brightness(1.05);
}

@media (max-width: 640px) {
    .cf-mygames__command[b-vjjzot0zsi] {
        grid-template-columns: 1fr;
    }

    .cf-mygames__next[b-vjjzot0zsi] {
        grid-template-columns: 1fr;
    }

    .cf-mygames__next-actions[b-vjjzot0zsi] {
        justify-self: stretch;
        justify-content: space-between;
    }

    .cf-mygames__metrics[b-vjjzot0zsi] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cf-mygames__showing[b-vjjzot0zsi] {
        width: 100%;
    }

    .cf-mygames__filter-empty[b-vjjzot0zsi] {
        align-items: stretch;
        flex-direction: column;
    }

    .cf-mygames__row[b-vjjzot0zsi] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "players resume"
            "turn resume";
        row-gap: 6px;
    }

    .cf-mygames__players[b-vjjzot0zsi] { grid-area: players; }
    /* On mobile the turn badge + deadline sit on one row - a hairline keeps "Their move" and "~3h left" from
       reading as a single phrase. */
    .cf-mygames__turn[b-vjjzot0zsi] { grid-area: turn; align-items: center; flex-direction: row; gap: 10px; }
    .cf-mygames__turn .cf-mygames__deadline[b-vjjzot0zsi] { padding-left: 10px; border-left: 1px solid var(--cf-border); }
    .cf-mygames__resume[b-vjjzot0zsi] { grid-area: resume; align-self: center; }
}
/* /Components/Pages/Play.razor.rz.scp.css */
/* Launcher + halt overlay for the live match page. The board itself is styled by
   css/board.css; these cover the pre-match and post-fault chrome only. */

.cf-play-launch[b-8md45ykm9w] {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: var(--cf-bg);
    padding: 24px;
}

.cf-play-launch__panel[b-8md45ykm9w] {
    max-width: 520px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 18px 50px color-mix(in srgb, var(--cf-text) 12%, transparent); /* deep warm panel elevation */
    text-align: center;
}

.cf-play-launch__title[b-8md45ykm9w] {
    font-family: Cinzel, serif; /* bespoke: the game's display face (matches the board it launches into) */
    font-size: 26px;
    margin: 0 0 10px;
    color: var(--cf-text);
}

.cf-play-launch__blurb[b-8md45ykm9w] {
    font-size: 14px;
    line-height: 1.55;
    color: var(--cf-text-muted);
    margin: 0 0 20px;
}

.cf-play-launch__modes[b-8md45ykm9w] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin: 0 0 18px;
    padding: 4px;
    border: 1px solid var(--cf-border);
    border-radius: 9px;
    background: var(--cf-bg);
}

.cf-play-launch__mode-button[b-8md45ykm9w] {
    min-width: 0;
    border: 0;
    border-radius: 7px;
    padding: 8px 9px;
    background: transparent;
    color: var(--cf-text-muted);
    font-family: Cinzel, serif; /* bespoke: the game's display face */
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}

.cf-play-launch__mode-button:hover[b-8md45ykm9w] {
    color: var(--cf-text);
}

.cf-play-launch__mode-button--on[b-8md45ykm9w] {
    background: color-mix(in srgb, var(--cf-accent) 18%, var(--cf-surface));
    color: var(--cf-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cf-accent) 45%, transparent);
}

.cf-play-launch__mode-panel[b-8md45ykm9w] {
    display: grid;
    gap: 14px;
    justify-items: center;
    min-height: 122px;
    align-content: start;
}

.cf-play-launch__mode-copy[b-8md45ykm9w] {
    max-width: 380px;
    margin: 4px 0 0;
    color: var(--cf-text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.cf-play-launch__blurb code[b-8md45ykm9w] {
    background: var(--cf-bg);
    border: 1px solid var(--cf-border);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 12px;
}

.cf-play-launch__advanced[b-8md45ykm9w] {
    margin-top: 16px;
    color: var(--cf-text-muted);
    font-size: 12.5px;
    text-align: left;
}

.cf-play-launch__advanced summary[b-8md45ykm9w] {
    cursor: pointer;
    font-family: Cinzel, serif; /* bespoke: the game's display face */
    font-size: 11px;
    letter-spacing: 0;
    text-transform: uppercase;
}

.cf-play-launch__advanced p[b-8md45ykm9w] {
    margin: 8px 0 0;
    line-height: 1.45;
}

.cf-play-launch__advanced code[b-8md45ykm9w] {
    background: var(--cf-bg);
    border: 1px solid var(--cf-border);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 12px;
}

.cf-play-launch__clock[b-8md45ykm9w] {
    display: grid;
    gap: 8px;
    margin: 0 0 20px;
}

.cf-play-launch__clock-label[b-8md45ykm9w] {
    font-family: Cinzel, serif; /* bespoke: the game's display face */
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
}

.cf-play-launch__presets[b-8md45ykm9w] {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.cf-play-launch__preset[b-8md45ykm9w] {
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 7px;
    border: 1px solid var(--cf-border);
    background: var(--cf-bg);
    color: var(--cf-text);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.cf-play-launch__preset:hover:not(:disabled)[b-8md45ykm9w] {
    border-color: var(--cf-accent);
}

.cf-play-launch__preset--on[b-8md45ykm9w] {
    border-color: var(--cf-accent);
    background: color-mix(in srgb, var(--cf-accent) 16%, var(--cf-surface));
    font-weight: 600;
}

.cf-play-launch__preset:disabled[b-8md45ykm9w] {
    opacity: 0.6;
    cursor: default;
}

.cf-play-launch__start[b-8md45ykm9w] {
    font-family: Cinzel, serif; /* bespoke: the game's display face */
    font-size: 15px;
    letter-spacing: 0.04em;
    padding: 10px 26px;
    border-radius: 8px;
    border: 1px solid var(--cf-accent);
    background: var(--cf-accent);
    color: var(--cf-overlay-light);
    cursor: pointer;
    transition: filter 120ms ease;
}

.cf-play-launch__start:hover:not(:disabled)[b-8md45ykm9w] {
    filter: brightness(1.06);
}

.cf-play-launch__start:disabled[b-8md45ykm9w] {
    opacity: 0.6;
    cursor: default;
}

.cf-play-launch__bots[b-8md45ykm9w] {
    display: grid;
    gap: 8px;
    justify-items: center;
    margin: 16px 0 0;
}

.cf-play-launch__bot-label[b-8md45ykm9w] {
    font-family: Cinzel, serif; /* bespoke: the game's display face */
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
}

.cf-play-launch__faction[b-8md45ykm9w] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 4px;
}

.cf-play-launch__faction-label[b-8md45ykm9w] {
    font-family: Cinzel, serif; /* bespoke: the game's display face */
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
}

.cf-play-launch__faction-select[b-8md45ykm9w] {
    font-size: 14px;
    padding: 7px 12px;
    border-radius: 7px;
    border: 1px solid var(--cf-border);
    background: var(--cf-bg);
    color: var(--cf-text);
    cursor: pointer;
}

.cf-play-launch__faction-select:disabled[b-8md45ykm9w] {
    opacity: 0.6;
    cursor: default;
}

/* Secondary CTAs: outlined gold against the parchment, distinct from the filled primary "Start demo match". */
.cf-play-launch__bot[b-8md45ykm9w] {
    font-family: Cinzel, serif; /* bespoke: the game's display face */
    font-size: 14px;
    letter-spacing: 0.03em;
    padding: 9px 22px;
    min-width: 220px;
    border-radius: 8px;
    border: 1px solid var(--cf-accent);
    background: var(--cf-surface);
    color: var(--cf-text);
    cursor: pointer;
    transition: background 120ms ease, filter 120ms ease;
}

.cf-play-launch__bot:hover:not(:disabled)[b-8md45ykm9w] {
    background: color-mix(in srgb, var(--cf-accent) 14%, var(--cf-surface));
}

.cf-play-launch__bot:disabled[b-8md45ykm9w] {
    opacity: 0.6;
    cursor: default;
}

.cf-play-launch__error[b-8md45ykm9w] {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--cf-danger);
}

/* The match result on the ended panel - the thing a returning player wants first, so it reads above the
   watch-replay blurb. */
.cf-play-launch__outcome[b-8md45ykm9w] {
    font-size: 16px;
    font-weight: 600;
    color: var(--cf-text);
    margin: 0 0 10px;
}

/* Low-emphasis escape from the ended panel - BoardLayout carries no nav bar, so without this the only exit is
   the replay. Sits under the primary "Watch replay" CTA. */
.cf-play-launch__back[b-8md45ykm9w] {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    color: var(--cf-text-muted);
    text-decoration: underline;
}

.cf-play-launch__back:hover[b-8md45ykm9w] {
    color: var(--cf-text);
}

@media (max-width: 520px) {
    .cf-play-launch[b-8md45ykm9w] {
        padding: 16px;
    }

    .cf-play-launch__panel[b-8md45ykm9w] {
        padding: 22px 18px;
    }

    .cf-play-launch__modes[b-8md45ykm9w] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cf-play-launch__presets[b-8md45ykm9w] {
        flex-wrap: wrap;
    }

    .cf-play-launch__preset[b-8md45ykm9w] {
        flex: 1 1 30%;
    }
}

.cf-play-halted[b-8md45ykm9w] {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--cf-text) 55%, transparent); /* dark halt-overlay scrim, deeper than --cf-scrim */
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- local stack: over the board, below the --cf-z-* surface scale; not cross-surface */
    z-index: 60;
}

.cf-play-halted__panel[b-8md45ykm9w] {
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 12px;
    padding: 22px 28px;
    max-width: 420px;
    text-align: center;
    display: grid;
    gap: 12px;
    color: var(--cf-text);
}

.cf-play-halted__detail[b-8md45ykm9w] {
    font-size: 13px;
    color: var(--cf-text-muted);
    overflow-wrap: anywhere;
}

/* The desktop/mobile board choice is no longer a CSS display toggle - Play.razor instantiates
   exactly one board, driven by the matchMedia breakpoint signal (js/viewport.js). */
/* /Components/Pages/Profile.razor.rz.scp.css */
.cf-profile__head[b-ut7xfeos8p] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 8px 0 24px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--cf-border);
}

.cf-profile__avatar[b-ut7xfeos8p] {
    flex: 0 0 auto;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--cf-font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--cf-brand-contrast);
    background: var(--cf-brand);
    box-shadow: var(--cf-shadow-1);
}

.cf-profile__meta[b-ut7xfeos8p] {
    min-width: 0;
}

.cf-profile__name[b-ut7xfeos8p] {
    font-family: var(--cf-font-display);
    font-size: 28px;
    font-weight: 700;
    margin: 0;
    line-height: 1.15;
}

.cf-profile__sub[b-ut7xfeos8p] {
    color: var(--cf-text-muted);
    font-size: 13.5px;
    margin-top: 4px;
}

.cf-profile__bio[b-ut7xfeos8p] {
    margin: 10px 0 0;
    max-width: 60ch;
    font-size: 14px;
    color: var(--cf-text);
    white-space: pre-wrap;
}

.cf-profile__deck-grid[b-ut7xfeos8p] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 16px;
}

/* loading + empty (mirrors the browse/library states; scoped per component) */
.cf-profile__loader[b-ut7xfeos8p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px;
}

.cf-profile__ring[b-ut7xfeos8p] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--cf-border);
    border-top-color: var(--cf-brand);
    animation: cf-profile-spin-b-ut7xfeos8p .8s linear infinite;
}

.cf-profile__label[b-ut7xfeos8p] {
    font-size: 13px;
    color: var(--cf-text-muted);
}

@keyframes cf-profile-spin-b-ut7xfeos8p {
    to { transform: rotate(360deg); }
}

.cf-profile__empty[b-ut7xfeos8p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 26px;
    text-align: center;
    border: 1px dashed var(--cf-border-strong);
    border-radius: var(--cf-radius-lg);
    background: var(--cf-surface-2);
    margin-top: 8px;
}

.cf-profile__empty h4[b-ut7xfeos8p],
.cf-profile__not-found-title[b-ut7xfeos8p] {
    font-family: var(--cf-font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--cf-text);
}

.cf-profile__empty p[b-ut7xfeos8p] {
    margin: 0;
    color: var(--cf-text-muted);
    font-size: 14px;
}

.cf-profile__back-link[b-ut7xfeos8p] {
    margin-top: 8px;
    font-weight: 600;
    color: var(--cf-brand);
}

/* recent matches (COMP-001) */
.cf-profile__matches[b-ut7xfeos8p] {
    margin-top: 28px;
}

.cf-profile__section-title[b-ut7xfeos8p] {
    font-family: var(--cf-font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--cf-text);
}

.cf-profile__match-list[b-ut7xfeos8p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cf-profile__match[b-ut7xfeos8p] {
    display: grid;
    grid-template-columns: 54px 1fr auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
    background: var(--cf-surface-2);
    font-size: 14px;
}

.cf-profile__match-result[b-ut7xfeos8p] {
    padding: 2px 0;
    border-radius: var(--cf-radius-sm);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.cf-profile__match-result--win[b-ut7xfeos8p] {
    color: var(--cf-success-fg);
    background: var(--cf-success);
}

.cf-profile__match-result--loss[b-ut7xfeos8p] {
    color: var(--cf-text-muted);
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
}

.cf-profile__match-vs[b-ut7xfeos8p] {
    overflow: hidden;
    color: var(--cf-text-muted);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-profile__match-opp[b-ut7xfeos8p] {
    font-weight: 600;
    color: var(--cf-text);
}

.cf-profile__match-cause[b-ut7xfeos8p] {
    color: var(--cf-text-muted);
    font-size: 13px;
}

.cf-profile__match-when[b-ut7xfeos8p] {
    color: var(--cf-text-muted);
    font-size: 12.5px;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .cf-profile__match[b-ut7xfeos8p] {
        grid-template-columns: 50px 1fr auto;
    }

    .cf-profile__match-cause[b-ut7xfeos8p] {
        display: none;
    }
}
/* /Components/Pages/Replay.razor.rz.scp.css */
/* The loading / not-found states this page shows before delegating playback to ReplayPlayer (which carries the
   transport-HUD + board styles in its own scoped sheet). */
.cf-replay__message[b-k9cwk1h06e] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px;
    color: var(--cf-text-muted);
    font-size: 16px;
}

/* Share: this page's HudExtra chip. It sits INSIDE ReplayPlayer's dark-glass HUD but is authored here (render
   fragments keep the caller's CSS scope), so it mirrors the player's download-chip recipe verbatim. */
.cf-replay__sharebtn[b-k9cwk1h06e] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 34px;
    padding: 0 12px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--cf-overlay-light) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--cf-accent) 35%, transparent);
    color: #ece4d6; /* stylelint-disable-line color-no-hex -- bespoke: warm cream HUD ink for the dark-glass surface */
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.cf-replay__sharebtn:hover[b-k9cwk1h06e] {
    background: color-mix(in srgb, var(--cf-accent) 22%, transparent);
}

/* Coarse pointers (touch): the §8 ~44px floor - the 34px HUD-chip recipe suits a precise mouse. */
@media (pointer: coarse) {
    .cf-replay__sharebtn[b-k9cwk1h06e] { height: 44px; }
}
/* /Components/Pages/Replays.razor.rz.scp.css */
/* Page chrome (the head/loader classes are scoped per-page elsewhere - Blazor scoped CSS does not
   reach across components - so this page carries its own copy rather than borrowing Decks'/Browse' scope). */
.cf-replays__head[b-phfb1tdu43] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cf-replays__title[b-phfb1tdu43] {
    font-family: var(--cf-font-display);
    font-size: 30px;
    font-weight: 700;
    margin: 0;
}

.cf-replays__sub[b-phfb1tdu43] {
    color: var(--cf-text-muted);
    font-size: var(--cf-text-sm);
    margin-top: 4px;
}

.cf-replays__loader[b-phfb1tdu43] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px;
}

.cf-replays__ring[b-phfb1tdu43] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid var(--cf-border);
    border-top-color: var(--cf-brand);
    animation: cf-replays-spin-b-phfb1tdu43 .8s linear infinite;
}

.cf-replays__label[b-phfb1tdu43] {
    font-size: 13px;
    color: var(--cf-text-muted);
    letter-spacing: .02em;
}

@keyframes cf-replays-spin-b-phfb1tdu43 {
    to { transform: rotate(360deg); }
}

.cf-replays__cap-note[b-phfb1tdu43] {
    margin: 16px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--cf-accent) 8%, var(--cf-surface));
    border: 1px solid var(--cf-border);
    color: var(--cf-text-muted);
    font-size: 13px;
}

/* Filter bar: quiet parchment controls in one wrapping row above the list. */
.cf-replays__filters[b-phfb1tdu43] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.cf-replays__filter-search[b-phfb1tdu43] {
    flex: 1;
    min-width: 180px;
    padding: 9px 12px;
    border: 1px solid var(--cf-border-strong); /* interactive controls take the 3:1 non-text outline */
    border-radius: 8px;
    background: var(--cf-surface);
    color: var(--cf-text);
    font-family: inherit;
    font-size: var(--cf-text-sm);
}

.cf-replays__filter-search[b-phfb1tdu43]::placeholder {
    color: var(--cf-text-muted);
}

.cf-replays__filter-select[b-phfb1tdu43] {
    min-width: 132px;
    padding: 9px 10px;
    border: 1px solid var(--cf-border-strong); /* interactive controls take the 3:1 non-text outline */
    border-radius: 8px;
    background: var(--cf-surface);
    color: var(--cf-text);
    font-family: inherit;
    font-size: var(--cf-text-sm);
    cursor: pointer;
}

.cf-replays__filter-search:focus-visible[b-phfb1tdu43],
.cf-replays__filter-select:focus-visible[b-phfb1tdu43] {
    outline: none; /* the two-layer halo the CardBrowser filter controls use - one focus idiom */
    box-shadow: 0 0 0 2px var(--cf-bg), 0 0 0 4px var(--cf-brand);
}

.cf-replays__nomatch[b-phfb1tdu43] {
    margin: 16px 0 0;
    padding: 20px;
    border: 1px dashed var(--cf-border);
    border-radius: 10px;
    color: var(--cf-text-muted);
    font-size: 13.5px;
    text-align: center;
}

.cf-replays__list[b-phfb1tdu43] {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cf-replays__row[b-phfb1tdu43] {
    display: grid;
    grid-template-columns: 150px 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 10px;
}

.cf-replays__when[b-phfb1tdu43] {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.cf-replays__when-date[b-phfb1tdu43] {
    font-weight: 600;
    color: var(--cf-text);
}

.cf-replays__when-time[b-phfb1tdu43] {
    font-size: 12px;
    color: var(--cf-text-muted);
}

.cf-replays__players[b-phfb1tdu43] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--cf-text);
}

.cf-replays__vs[b-phfb1tdu43] {
    font-weight: 400;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--cf-text-muted);
}

.cf-replays__result[b-phfb1tdu43] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
    text-align: right;
}

.cf-replays__winner[b-phfb1tdu43] {
    font-weight: 600;
    color: var(--cf-accent-deep);
}

.cf-replays__cause[b-phfb1tdu43] {
    font-size: 12px;
    color: var(--cf-text-muted);
}

.cf-replays__visibility[b-phfb1tdu43] {
    font-size: 12px;
    color: var(--cf-text-muted);
}

.cf-replays__from-file[b-phfb1tdu43] {
    color: var(--cf-text-muted);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cf-replays__from-file:hover[b-phfb1tdu43] {
    color: var(--cf-text);
}

.cf-replays__actions[b-phfb1tdu43] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cf-replays__watch[b-phfb1tdu43] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--cf-accent);
    color: var(--cf-accent-contrast); /* the on-gold ink pair - --cf-text flips cream in dark and drowns on the gold */
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cf-replays__watch:hover[b-phfb1tdu43] {
    filter: brightness(1.05);
}

/* Download: a quiet square icon-button beside Watch - outline that warms to the accent on hover. */
.cf-replays__download[b-phfb1tdu43] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--cf-border);
    background: var(--cf-surface);
    color: var(--cf-text-muted);
    font-size: 16px;
    text-decoration: none;
}

.cf-replays__download:hover[b-phfb1tdu43] {
    border-color: var(--cf-accent);
    color: var(--cf-text);
    background: color-mix(in srgb, var(--cf-accent) 10%, var(--cf-surface));
}

/* Share: the download chip's twin (a real <button>); --on tints it whenever the replay has a live link. */
.cf-replays__share[b-phfb1tdu43] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border: 1px solid var(--cf-border);
    background: var(--cf-surface);
    color: var(--cf-text-muted);
    cursor: pointer;
}

.cf-replays__share:hover[b-phfb1tdu43] {
    border-color: var(--cf-accent);
    color: var(--cf-text);
    background: color-mix(in srgb, var(--cf-accent) 10%, var(--cf-surface));
}

.cf-replays__share--on[b-phfb1tdu43] {
    border-color: var(--cf-accent);
    color: var(--cf-accent-deep);
    background: color-mix(in srgb, var(--cf-accent) 12%, var(--cf-surface));
}

/* Coarse pointers (touch): the §8 ~44px touch-target floor for the row's square icon buttons. */
@media (pointer: coarse) {
    .cf-replays__share[b-phfb1tdu43],
    .cf-replays__download[b-phfb1tdu43] {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 640px) {
    .cf-replays__filters[b-phfb1tdu43] {
        align-items: stretch;
    }

    .cf-replays__filter-search[b-phfb1tdu43],
    .cf-replays__filter-select[b-phfb1tdu43] {
        flex: 1 1 100%;
        width: 100%;
    }

    .cf-replays__row[b-phfb1tdu43] {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "players actions"
            "result actions"
            "when when";
        row-gap: 4px;
    }

    .cf-replays__players[b-phfb1tdu43] { grid-area: players; }
    .cf-replays__result[b-phfb1tdu43] { grid-area: result; align-items: flex-start; text-align: left; }
    .cf-replays__when[b-phfb1tdu43] { grid-area: when; flex-direction: row; gap: 8px; }
    .cf-replays__actions[b-phfb1tdu43] { grid-area: actions; align-self: center; }
}
/* /Components/Pages/ReplayShared.razor.rz.scp.css */
/* The loading / not-found states this page shows before delegating playback to ReplayPlayer (its own copy -
   Blazor scoped CSS does not reach across components, so /replay/{id}'s twin class can't be borrowed). */
.cf-replay__message[b-21hioaj8tj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 24px;
    color: var(--cf-text-muted);
    font-size: 16px;
}
/* /Components/Pages/ReplayWatch.razor.rz.scp.css */
/* The importer form - a centered panel on the page background; once a replay loads, ReplayPlayer's fixed board
   takes over the viewport and only the floating exit control (below) remains from this page. */
.cf-watch[b-y63yywhvz8] {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}

.cf-watch__panel[b-y63yywhvz8] {
    width: 100%;
    max-width: 640px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: 14px;
    padding: 28px 28px 22px;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--cf-overlay-dark) 12%, transparent);
}

.cf-watch__title[b-y63yywhvz8] {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    color: var(--cf-text);
}

.cf-watch__lede[b-y63yywhvz8] {
    margin: 0 0 20px;
    color: var(--cf-text-muted);
    line-height: 1.5;
}

.cf-watch__lede code[b-y63yywhvz8] {
    font-size: 0.92em;
    padding: 1px 5px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--cf-accent) 12%, transparent);
    color: var(--cf-text);
}

.cf-watch__label[b-y63yywhvz8] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cf-text-muted);
}

.cf-watch__hint[b-y63yywhvz8] {
    font-weight: 400;
    opacity: 0.85;
}

.cf-watch__textarea[b-y63yywhvz8] {
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid var(--cf-border);
    border-radius: 8px;
    background: var(--cf-bg);
    color: var(--cf-text);
    font-family: var(--cf-font-mono, ui-monospace, monospace);
    font-size: 12.5px;
    line-height: 1.45;
}

.cf-watch__textarea:focus-visible[b-y63yywhvz8] {
    outline: 2px solid var(--cf-accent);
    outline-offset: 1px;
}

.cf-watch__or[b-y63yywhvz8] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
    color: var(--cf-text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.cf-watch__or[b-y63yywhvz8]::before,
.cf-watch__or[b-y63yywhvz8]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cf-border);
}

.cf-watch__file[b-y63yywhvz8] {
    display: block;
    padding: 16px;
    border: 1px dashed var(--cf-border);
    border-radius: 8px;
    background: var(--cf-bg);
}

.cf-watch__file-title[b-y63yywhvz8] {
    display: block;
    margin-bottom: 3px;
    color: var(--cf-text);
    font-size: 14px;
    font-weight: 700;
}

.cf-watch__file-hint[b-y63yywhvz8] {
    display: block;
    margin-bottom: 10px;
    color: var(--cf-text-muted);
    font-size: 12px;
    line-height: 1.4;
}

.cf-watch__error[b-y63yywhvz8] {
    margin-top: 16px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--cf-danger) 45%, transparent);
    background: color-mix(in srgb, var(--cf-danger) 10%, transparent);
    color: var(--cf-text);
    font-size: 13px;
}

.cf-watch__actions[b-y63yywhvz8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
}

.cf-watch__link[b-y63yywhvz8] {
    color: var(--cf-text-muted);
    text-decoration: none;
    font-size: 14px;
}

.cf-watch__link:hover[b-y63yywhvz8] {
    color: var(--cf-text);
}

.cf-watch__btn[b-y63yywhvz8] {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: var(--cf-brand);
    color: var(--cf-brand-contrast);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.cf-watch__btn:hover:not(:disabled)[b-y63yywhvz8] {
    background: var(--cf-brand-hover);
}

.cf-watch__btn:disabled[b-y63yywhvz8] {
    opacity: 0.5;
    cursor: default;
}

/* Floating "load another" control during playback - above the fixed board (.bcast-fit), mirroring the HUD ink. */
.cf-watch__exit[b-y63yywhvz8] {
    position: fixed;
    top: 14px;
    left: 14px;
    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- local stack: floats just above the letterboxed board, like the transport HUD (z-index:100) */
    z-index: 101;
    padding: 8px 14px;
    border-radius: 8px;
    background: rgb(18 16 22 / 0.86); /* stylelint-disable-line function-disallowed-list -- bespoke: dark-glass control over the board (not an app surface) */
    border: 1px solid color-mix(in srgb, var(--cf-accent) 35%, transparent);
    color: #ece4d6; /* stylelint-disable-line color-no-hex -- bespoke: warm cream HUD ink for the dark-glass surface */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(6px);
}

.cf-watch__exit:hover[b-y63yywhvz8] {
    background: color-mix(in srgb, var(--cf-accent) 28%, transparent);
}
/* /Components/Pages/Rules.razor.rz.scp.css */
/* Rules reference, rendered as an illuminated codex - the kingdom's "Book of Play". Scoped to this page.
   Three type voices, all already loaded via App.razor (CSP-approved): Cinzel (var(--game-font-display))
   for the inscriptional rubric heads + wheel labels; IM Fell English (a 17th-century book face) for the
   incipit, the illuminated initial, and flavour lines; the Iowan/Palatino serif (var(--cf-font-display))
   for readable body. Gilt (--cf-accent) is decoration only - it fails AA as text on parchment, so every
   label that must be read is ink or rubric crimson. The Rota (the wheel of the round) is the one signature;
   everything else stays quiet. */

/* ───────────────────────── Shell ───────────────────────── */
.cf-rules[b-dk76tx9695] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--cf-space-4) clamp(32px, 6vw, 64px);
}

/* From lg up: a slim sticky "Index" rail beside the text column, the incipit spanning both. */
@media (min-width: 960px) {
    .cf-rules[b-dk76tx9695] {
        display: grid;
        grid-template-columns: 210px minmax(0, 1fr);
        column-gap: var(--cf-space-7);
        align-items: start;
    }

    .cf-rules-incipit[b-dk76tx9695] { grid-column: 1 / -1; }
    .cf-rules__index[b-dk76tx9695] { grid-column: 1; }
    .cf-rules__body[b-dk76tx9695] { grid-column: 2; }
}

/* ───────────────────────── Incipit (hero) ───────────────────────── */
.cf-rules-incipit[b-dk76tx9695] {
    max-width: 720px;
    margin: clamp(24px, 5vw, 56px) auto var(--cf-space-7);
    padding: 0 var(--cf-space-4);
    text-align: center;
}

/* A pressed signet: a crimson wax disc with the crown struck in gold and a gilt rim - "these are the
   laws, sealed by the crown." The crown glyph is a mask tinted to currentColor, so the seal sets that
   colour to gold. */
.cf-rules-incipit__seal[b-dk76tx9695] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin-bottom: var(--cf-space-4);
    border-radius: 50%;
    color: var(--cf-accent);
    background: radial-gradient(circle at 50% 36%,
        color-mix(in srgb, var(--cf-brand) 88%, var(--cf-overlay-light)),
        color-mix(in srgb, var(--cf-brand) 96%, var(--cf-overlay-dark)));
    border: 1.5px solid color-mix(in srgb, var(--cf-accent) 60%, transparent);
    box-shadow:
        0 0 0 4px color-mix(in srgb, var(--cf-brand) 14%, transparent),
        0 10px 24px -12px color-mix(in srgb, var(--cf-brand) 70%, transparent),
        inset 0 2px 5px color-mix(in srgb, var(--cf-overlay-light) 35%, transparent),
        inset 0 -3px 7px color-mix(in srgb, var(--cf-overlay-dark) 30%, transparent);
}

/* Gilt eyebrow - kept in Cinzel to match every other small label on the page (the section folios, the
   index head, the exemplum tag). IM Fell is reserved for the display-size moments below, where its antique
   strokes read as flourish rather than as squinty microcopy. */
.cf-rules-incipit__folio[b-dk76tx9695] {
    margin: 0 0 var(--cf-space-2);
    font-family: var(--game-font-display);
    font-size: var(--cf-text-2xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--game-gold-ink);
}

/* Two-register title: "HOW TO PLAY" as a tracked Cinzel rubric over the game's name set large in IM Fell
   italic - the carved caps against the flowing antique hand. */
.cf-rules-incipit__title[b-dk76tx9695] {
    margin: 0 0 var(--cf-space-4);
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: clamp(1.2rem, 2.4vw, 1.5rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.1;
    color: var(--cf-text);
}

.cf-rules-incipit__title em[b-dk76tx9695] {
    display: block;
    margin-top: 0.16em;
    font-family: "IM Fell English", var(--cf-font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.5rem, 6.5vw, 3.9rem);
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--cf-brand);
}

.cf-rules-incipit__lede[b-dk76tx9695] {
    max-width: 56ch;
    margin: 0 auto;
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-lg);
    line-height: 1.6;
    color: var(--cf-text-muted);
}

.cf-rules-incipit__onramp[b-dk76tx9695] {
    max-width: 56ch;
    margin: var(--cf-space-4) auto 0;
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-sm);
    line-height: 1.55;
    color: var(--cf-text-muted);
}

.cf-rules-incipit__onramp a[b-dk76tx9695] { color: var(--cf-brand); font-weight: 600; }
.cf-rules-incipit__manicule[b-dk76tx9695] { color: var(--cf-brand); font-size: 1.1em; margin-right: 2px; }

/* The route to the authority. Quieter than the tutorial on-ramp above it - most readers want the plain
   language below, and the ones who need exact wording are already looking for this line. */
.cf-rules-incipit__authority[b-dk76tx9695] {
    max-width: 56ch;
    margin: var(--cf-space-2) auto 0;
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-sm);
    line-height: 1.55;
    color: var(--cf-text-muted);
}

.cf-rules-incipit__authority a[b-dk76tx9695] { color: var(--cf-brand); font-weight: 600; }
.cf-rules-incipit__authority strong[b-dk76tx9695] { color: var(--cf-text); }

/* ───────────────────────── Index rail ───────────────────────── */
.cf-rules__index[b-dk76tx9695] {
    margin: 0 0 var(--cf-space-6);
    padding: var(--cf-space-4) var(--cf-space-5);
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg);
}

@media (min-width: 960px) {
    .cf-rules__index[b-dk76tx9695] {
        position: sticky;
        top: calc(var(--cf-header-height) + var(--cf-space-4));
        margin: 0;
        max-height: calc(100vh - var(--cf-header-height) - var(--cf-space-6));
        overflow-y: auto;
    }
}

.cf-rules__index-head[b-dk76tx9695] {
    display: block;
    margin-bottom: var(--cf-space-3);
    font-family: var(--game-font-display);
    font-size: var(--cf-text-2xs);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--game-gold-ink);
}

.cf-rules__index-list[b-dk76tx9695] {
    margin: 0;
    padding: 0;
    list-style: none;
    columns: 2;
    column-gap: var(--cf-space-5);
}

.cf-rules__index-list li[b-dk76tx9695] { margin-bottom: var(--cf-space-2); break-inside: avoid; }

.cf-rules__index-list a[b-dk76tx9695] {
    display: flex;
    gap: var(--cf-space-2);
    align-items: baseline;
    /* Vertical padding lifts the touch row height - this is the primary jump-nav on phones. */
    padding: var(--cf-space-2) 0;
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-sm);
    color: var(--cf-text);
}

.cf-rules__index-list a:hover[b-dk76tx9695] { color: var(--cf-brand); text-decoration: none; }

/* Roman folio numerals - small gilt Cinzel, right-aligned so the chapter titles start on a common edge. */
.cf-rules__index-num[b-dk76tx9695] {
    flex: none;
    width: 1.7em;
    text-align: right;
    font-family: var(--game-font-display);
    font-size: var(--cf-text-2xs);
    font-weight: 700;
    color: var(--game-gold-ink);
}

@media (min-width: 960px) {
    .cf-rules__index-list[b-dk76tx9695] { columns: 1; }
}

/* ───────────────────────── Body + chapters ───────────────────────── */
.cf-rules__body[b-dk76tx9695] {
    min-width: 0;
    font-family: var(--cf-font-display);
    color: var(--cf-text);
}

.cf-rules__sec[b-dk76tx9695] {
    /* Keep an anchored chapter clear of the sticky banner when jumped to. */
    scroll-margin-top: calc(var(--cf-header-height) + var(--cf-space-4));
    margin-bottom: var(--cf-space-8);
}

.cf-rules__sec p[b-dk76tx9695] {
    margin: 0 0 var(--cf-space-4);
    font-size: 1.05rem;
    line-height: 1.72;
}

.cf-rules__sec strong[b-dk76tx9695] { color: var(--cf-text); font-weight: 700; }
.cf-rules__sec a[b-dk76tx9695] { color: var(--cf-brand); font-weight: 600; }

/* Folio mark + rubric head: the crimson "ruber" chapter title under a small gilt chapter mark, closed by
   a gilt hairline rule. */
.cf-rules__folio[b-dk76tx9695] {
    margin: 0 0 var(--cf-space-1);
    font-family: var(--game-font-display);
    font-size: var(--cf-text-2xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--game-gold-ink);
}

.cf-rules__h2[b-dk76tx9695] {
    margin: 0 0 var(--cf-space-4);
    padding-bottom: var(--cf-space-2);
    border-bottom: 2px solid color-mix(in srgb, var(--cf-accent) 45%, var(--cf-border));
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.4vw, 1.9rem);
    letter-spacing: 0.01em;
    color: var(--cf-brand);
}

/* Sub-head inside a chapter (e.g. "Uniques and duplicates"): a step below the rubric h2 - ink, not crimson,
   so the chapter title keeps the only red on the spread. */
.cf-rules__h3[b-dk76tx9695] {
    margin: var(--cf-space-6) 0 var(--cf-space-3);
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: clamp(1.05rem, 2.2vw, 1.2rem);
    letter-spacing: 0.03em;
    color: var(--cf-text);
}

/* The single illuminated initial - opens Chapter I; the words after it carry on in small caps, the way a
   manuscript incipit runs its first line into the dropped letter. Used exactly once. */
.cf-rules__dropcap[b-dk76tx9695] {
    float: left;
    margin: 0.04em 0.1em -0.06em 0;
    font-family: "IM Fell English", var(--cf-font-display);
    font-size: 3.6em;
    line-height: 0.78;
    color: var(--cf-brand);
}

.cf-rules__dropcap-rest[b-dk76tx9695] { font-variant: small-caps; letter-spacing: 0.03em; }

/* The creed - a centred antique-italic motto between gilt fleurons. */
.cf-rules__creed[b-dk76tx9695] {
    margin: var(--cf-space-5) 0;
    font-family: "IM Fell English", var(--cf-font-display);
    font-style: italic;
    font-size: clamp(1.25rem, 3vw, 1.6rem);
    line-height: 1.3;
    text-align: center;
    color: var(--cf-brand);
}

.cf-rules__creed em[b-dk76tx9695] { font-style: italic; }
.cf-rules__creed[b-dk76tx9695]::before { content: "❧ "; color: var(--cf-accent-deep); }
.cf-rules__creed[b-dk76tx9695]::after { content: " ☙"; color: var(--cf-accent-deep); }

/* ───────────────────────── Asides: rubric / gloss / exemplum ───────────────────────── */
/* Rubric aside - the golden-rule / caution boxes, marked with a fleuron. */
.cf-rules__rubric[b-dk76tx9695] {
    display: flex;
    gap: var(--cf-space-3);
    margin: var(--cf-space-5) 0;
    padding: var(--cf-space-3) var(--cf-space-4);
    border-left: 3px solid var(--cf-accent);
    border-radius: var(--cf-radius-sm);
    background: color-mix(in srgb, var(--cf-accent) 8%, var(--cf-surface));
    font-size: var(--cf-text-sm);
    line-height: 1.55;
}

.cf-rules__rubric--warn[b-dk76tx9695] {
    border-left-color: var(--cf-brand);
    background: color-mix(in srgb, var(--cf-brand) 7%, var(--cf-surface));
}

.cf-rules__rubric-mark[b-dk76tx9695] { flex: none; color: var(--cf-accent-deep); font-size: 1.1rem; line-height: 1.3; }
.cf-rules__rubric--warn .cf-rules__rubric-mark[b-dk76tx9695] { color: var(--cf-brand); }

/* Marginal gloss - a beginner aside, set in IM Fell italic behind a crimson manicule (the pointing hand
   that means "note this" in a manuscript margin). */
.cf-rules__gloss[b-dk76tx9695] {
    display: flex;
    gap: var(--cf-space-3);
    margin: 0 0 var(--cf-space-4);
    padding: var(--cf-space-3) var(--cf-space-4);
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
}

/* This is the longest run of teaching text aimed at the least practised reader, so it stays in the readable
   body serif (not the antique italic). The manicule + recessed card carry the "margin note" feel instead. */
.cf-rules__gloss p[b-dk76tx9695] {
    margin: 0;
    font-family: var(--cf-font-display);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--cf-text);
}

.cf-rules__manicule[b-dk76tx9695] { flex: none; color: var(--cf-brand); font-size: 1.5rem; line-height: 1.1; }

/* Worked example - a gilt-edged "exemplum". */
.cf-rules__exemplum[b-dk76tx9695] {
    margin: var(--cf-space-4) 0 0;
    padding: var(--cf-space-3) var(--cf-space-4);
    background: color-mix(in srgb, var(--cf-accent) 7%, var(--cf-surface));
    border-left: 3px solid var(--cf-accent-deep);
    border-radius: var(--cf-radius-sm);
}

.cf-rules__exemplum-tag[b-dk76tx9695] {
    display: block;
    margin-bottom: var(--cf-space-1);
    font-family: var(--game-font-display);
    font-size: var(--cf-text-2xs);
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--game-gold-ink);
}

.cf-rules__exemplum p[b-dk76tx9695] { margin: 0; font-size: var(--cf-text-sm); line-height: 1.6; color: var(--cf-text); }
.cf-rules__exemplum strong[b-dk76tx9695] { color: var(--cf-text); }

.cf-rules__note[b-dk76tx9695] { font-size: var(--cf-text-sm); color: var(--cf-text-muted); }
.cf-rules__note strong[b-dk76tx9695] { color: var(--cf-text); }

/* ───────────────────────── Components list (what you bring) ───────────────────────── */
.cf-rules__brings[b-dk76tx9695] { margin: 0 0 var(--cf-space-4); padding-left: var(--cf-space-5); }
.cf-rules__brings li[b-dk76tx9695] { margin-bottom: var(--cf-space-2); line-height: 1.6; }
.cf-rules__brings strong[b-dk76tx9695] { color: var(--cf-text); }

/* ───────────────────────── Setup steps ───────────────────────── */
/* A once-only sequence, so it reads as a numbered procession down a gilt spine rather than as the boxed
   cards the round's phases use - same coin vocabulary, lighter weight, no confusion with a phase. */
.cf-rules__steps[b-dk76tx9695] {
    counter-reset: cf-step;
    margin: var(--cf-space-5) 0 var(--cf-space-5);
    padding: 0 0 0 var(--cf-space-6);
    list-style: none;
    border-left: 1px solid color-mix(in srgb, var(--cf-accent) 40%, var(--cf-border));
}

.cf-rules__steps > li[b-dk76tx9695] {
    position: relative;
    counter-increment: cf-step;
    margin-bottom: var(--cf-space-5);
}

.cf-rules__steps > li:last-child[b-dk76tx9695] { margin-bottom: 0; }

.cf-rules__steps > li[b-dk76tx9695]::before {
    content: counter(cf-step);
    position: absolute;
    top: 0;
    left: calc(var(--cf-space-6) * -1 - 14px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: var(--cf-text-sm);
    color: var(--cf-accent-contrast);
    background: radial-gradient(circle at 50% 32%, var(--cf-frame-gold-lite), var(--cf-accent) 64%, var(--cf-accent-deep));
    border: 1px solid var(--cf-gold-border);
}

.cf-rules__step-name[b-dk76tx9695] {
    margin: 2px 0 var(--cf-space-2);
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: var(--cf-text-lg);
    letter-spacing: 0.03em;
    color: var(--cf-text);
}

.cf-rules__steps p[b-dk76tx9695] { margin: 0; font-size: var(--cf-text-sm); line-height: 1.6; color: var(--cf-text-muted); }
.cf-rules__steps strong[b-dk76tx9695] { color: var(--cf-text); }

/* ───────────────────────── Card anatomy ───────────────────────── */
.cf-rules__anatomy[b-dk76tx9695] {
    margin: var(--cf-space-5) 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-5);
    place-items: center;
}

/* Real card frame as the schematic, with a pip overlay tracking the frame's 600x900 zones as percentages
   so the markers stay glued to each region at any container width. line-height:0 kills the strut below the
   mount that would otherwise break the overlay's coordinate space. */
.cf-rules__anatomy-frame[b-dk76tx9695] { position: relative; display: inline-block; line-height: 0; }
.cf-rules__pip-overlay[b-dk76tx9695] { position: absolute; inset: 0; pointer-events: none; }

/* Crimson coin keying the schematic to the legend - reused inline (in the key) and absolutely (on the frame). */
.cf-rules__pip[b-dk76tx9695] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--cf-brand);
    color: var(--cf-brand-contrast);
    font-family: var(--cf-font-ui);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.cf-rules__pip--abs[b-dk76tx9695] {
    position: absolute;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px var(--cf-surface), 0 2px 6px color-mix(in srgb, var(--cf-overlay-dark) 35%, transparent);
}

.cf-rules__anatomy-lead[b-dk76tx9695] { margin: 0 0 var(--cf-space-3); font-weight: 600; color: var(--cf-text); }

.cf-rules__anatomy-key[b-dk76tx9695] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2);
    font-size: var(--cf-text-sm);
}

.cf-rules__anatomy-key li[b-dk76tx9695] { display: flex; gap: var(--cf-space-2); align-items: flex-start; line-height: 1.45; }
.cf-rules__anatomy-key li .cf-rules__pip[b-dk76tx9695] { margin-top: 1px; }
.cf-rules__anatomy-key strong[b-dk76tx9695] { color: var(--cf-text); }

@media (min-width: 720px) {
    .cf-rules__anatomy[b-dk76tx9695] { grid-template-columns: auto 1fr; justify-items: start; }
}

/* ───────────────────────── The Rota (signature) ───────────────────────── */
/* A wheel of the round: gilt rim, seven numbered coins clockwise from 12 o'clock, phase names radiating
   outward, a hub that names the cycle. Decorative (aria-hidden); the ordered list below is the source of
   truth. Coin/label positions are inline percentages of this square box (computed in @code), so the wheel
   scales as one unit. Shown at md+, where there's width; a linear cadence strip stands in below. */
.cf-rules__rota-wrap[b-dk76tx9695] {
    display: none;
    margin: var(--cf-space-6) auto var(--cf-space-4);
    /* Reserve side gutters so the horizontal labels (Kingdom, Refresh) radiate into empty space, not text. */
    padding-inline: clamp(40px, 11vw, 80px);
}

.cf-rules__rota[b-dk76tx9695] {
    position: relative;
    width: min(360px, 100%);
    margin: 0 auto;
    aspect-ratio: 1;
    overflow: visible;
}

/* The rim - the wheel itself, passing through the coin centres (diameter = 2 x the 33% coin radius). */
.cf-rules__rota-rim[b-dk76tx9695] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 66%;
    height: 66%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--cf-accent) 58%, transparent);
    background: radial-gradient(circle, color-mix(in srgb, var(--cf-accent) 6%, transparent) 58%, transparent 70%);
    box-shadow:
        0 0 0 7px color-mix(in srgb, var(--cf-accent) 9%, transparent),
        inset 0 0 26px color-mix(in srgb, var(--cf-accent-deep) 14%, transparent);
}

.cf-rules__rota-hub[b-dk76tx9695] {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 39%;
    height: 39%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-align: center;
    border-radius: 50%;
    /* Kept close to parchment with only a whisper of gold, so the struck-gold coins own the metal and the
       crimson take-turns rings stay the focal contrast (the hub competing in gold flattened the figure). */
    background: radial-gradient(circle at 50% 36%,
        color-mix(in srgb, var(--cf-accent) 14%, var(--cf-surface)),
        var(--cf-surface));
    border: 1.5px solid color-mix(in srgb, var(--cf-accent) 40%, transparent);
    box-shadow:
        0 4px 16px -8px color-mix(in srgb, var(--cf-accent-deep) 50%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--cf-overlay-light) 55%, transparent);
}

.cf-rules__rota-hub-word[b-dk76tx9695] {
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: clamp(0.72rem, 2vw, 0.95rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--cf-text);
}

.cf-rules__rota-hub-sub[b-dk76tx9695] {
    /* Body serif, not IM Fell: this is the smallest text on the page and the antique italic blurred at the
       ~10px floor. The Cinzel "THE ROUND" above already carries the antique register. */
    font-family: var(--cf-font-display);
    font-style: italic;
    font-size: clamp(0.72rem, 1.7vw, 0.8rem);
    line-height: 1.25;
    color: var(--cf-text-muted);
}

/* Numbered coin - a struck-gold station on the rim. Dark engraving on the coin (--cf-accent-contrast,
   ≈8:1 worst-case over the mid/deep gold band - comfortably AA; gold ink would be sub-AA). */
.cf-rules__rota-coin[b-dk76tx9695] {
    position: absolute;
    width: 13%;
    height: 13%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 2;
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: clamp(0.9rem, 2.4vw, 1.15rem);
    color: var(--cf-accent-contrast);
    background: radial-gradient(circle at 50% 32%, var(--cf-frame-gold-lite), var(--cf-accent) 62%, var(--cf-accent-deep));
    border: 1.5px solid var(--cf-gold-border);
    box-shadow:
        0 3px 8px -3px color-mix(in srgb, var(--cf-accent-deep) 70%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--cf-overlay-light) 60%, transparent);
}

/* The two take-turns phases (Kingdom, Confrontation) wear a crimson ring - matched by the note's key dot
   and the crimson edge on their detail rows below. */
.cf-rules__rota-coin--turns[b-dk76tx9695] {
    border-color: var(--cf-brand);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--cf-brand) 24%, transparent),
        0 3px 8px -3px color-mix(in srgb, var(--cf-accent-deep) 70%, transparent);
}

.cf-rules__rota-label[b-dk76tx9695] {
    position: absolute;
    z-index: 2;
    font-family: var(--game-font-display);
    font-weight: 600;
    font-size: clamp(0.62rem, 1.7vw, 0.8rem);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    color: var(--cf-text);
}

/* Anchor per side so each label radiates outward from its coin instead of colliding with a neighbour. */
.cf-rules__rota-label--right[b-dk76tx9695] { transform: translate(0, -50%); text-align: left; }
.cf-rules__rota-label--left[b-dk76tx9695] { transform: translate(-100%, -50%); text-align: right; }
.cf-rules__rota-label--top[b-dk76tx9695] { transform: translate(-50%, -100%); padding-bottom: 5px; }
.cf-rules__rota-label--bottom[b-dk76tx9695] { transform: translate(-50%, 0); padding-top: 5px; }

/* The two take-turns phases (Kingdom, Confrontation): crimson label echoes the crimson coin ring, so the
   distinction reads by colour, not by a 3px ring alone. */
.cf-rules__rota-label--turns[b-dk76tx9695] { color: var(--cf-brand); }

.cf-rules__rota-note[b-dk76tx9695] {
    margin: var(--cf-space-4) 0 0;
    text-align: center;
    font-size: var(--cf-text-sm);
    color: var(--cf-text-muted);
}

.cf-rules__rota-note strong[b-dk76tx9695] { color: var(--cf-text); }

.cf-rules__rota-key[b-dk76tx9695] {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 7px;
    vertical-align: -1px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 32%, var(--cf-frame-gold-lite), var(--cf-accent) 62%, var(--cf-accent-deep));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--cf-brand) 55%, transparent);
}

/* One orchestrated load beat: the coins strike in and the names fade, clockwise (delays set inline in
   source order). Gated behind no-preference, and the resting state is fully visible, so reduced-motion
   users simply see the finished wheel. */
@media (prefers-reduced-motion: no-preference) {
    .cf-rules__rota-coin[b-dk76tx9695] { opacity: 0; animation: cf-rules-coin-in-b-dk76tx9695 var(--cf-dur-slow) var(--cf-ease) both; }
    .cf-rules__rota-label[b-dk76tx9695] { opacity: 0; animation: cf-rules-label-in-b-dk76tx9695 var(--cf-dur-base) var(--cf-ease) both; }
}

@keyframes cf-rules-coin-in-b-dk76tx9695 {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes cf-rules-label-in-b-dk76tx9695 {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Linear cadence strip - the narrow-viewport stand-in for the wheel (the wheel hides below md). The loop
   glyph carries the "it repeats" the wheel shows by being a circle. */
.cf-rules__cadence[b-dk76tx9695] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--cf-space-1) var(--cf-space-2);
    margin: var(--cf-space-5) 0 0;
    padding: var(--cf-space-3);
    background: var(--cf-surface-2);
    border-radius: var(--cf-radius-md);
    font-family: var(--game-font-display);
    font-weight: 600;
    font-size: var(--cf-text-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--cf-text);
}

/* Muted, not faint: these arrows are the only thing carrying "phases proceed in sequence" on mobile (the
   wheel is hidden here), so they must clear AA - --cf-text-faint was 1.88:1 on the strip fill. */
.cf-rules__cadence-arrow[b-dk76tx9695] { color: var(--cf-text-muted); }
.cf-rules__cadence-loop[b-dk76tx9695] { color: var(--cf-accent-deep); font-size: 1.1rem; }

/* Mark the take-turns phases on the mobile strip too, so it reaches parity with the wheel's crimson rings. */
.cf-rules__cadence-phase--turns[b-dk76tx9695] { color: var(--cf-brand); }

@media (min-width: 720px) {
    .cf-rules__rota-wrap[b-dk76tx9695] { display: block; }
    .cf-rules__cadence[b-dk76tx9695] { display: none; }
}

/* ───────────────────────── The round: phase detail ───────────────────────── */
.cf-rules__order[b-dk76tx9695] {
    margin: var(--cf-space-5) 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3);
}

.cf-rules__order-item[b-dk76tx9695] {
    display: flex;
    gap: var(--cf-space-3);
    padding: var(--cf-space-3) var(--cf-space-4);
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
}

.cf-rules__order-item--turns[b-dk76tx9695] { border-left: 3px solid color-mix(in srgb, var(--cf-brand) 55%, var(--cf-border)); }

.cf-rules__order-num[b-dk76tx9695] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: var(--cf-text-sm);
    color: var(--cf-accent-contrast);
    background: radial-gradient(circle at 50% 32%, var(--cf-frame-gold-lite), var(--cf-accent) 64%, var(--cf-accent-deep));
    border: 1px solid var(--cf-gold-border);
}

.cf-rules__order-body[b-dk76tx9695] { min-width: 0; }

.cf-rules__order-name[b-dk76tx9695] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--cf-space-2);
    margin: 3px 0 var(--cf-space-1);
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: var(--cf-text-lg);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cf-text);
}

.cf-rules__order-tag[b-dk76tx9695] {
    font-family: var(--cf-font-ui);
    font-size: var(--cf-text-2xs);
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cf-brand);
    background: color-mix(in srgb, var(--cf-brand) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cf-brand) 28%, transparent);
    border-radius: var(--cf-radius-pill);
    padding: 1px 9px;
}

.cf-rules__order-body p[b-dk76tx9695] { margin: 0; font-size: var(--cf-text-sm); line-height: 1.55; color: var(--cf-text-muted); }
.cf-rules__order-body strong[b-dk76tx9695] { color: var(--cf-text); }

/* ───────────────────────── Struggles: four arenas ───────────────────────── */
.cf-rules__arenas[b-dk76tx9695] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-3);
    margin: var(--cf-space-5) 0;
}

.cf-rules__arena[b-dk76tx9695] {
    display: flex;
    align-items: flex-start;
    gap: var(--cf-space-3);
    padding: var(--cf-space-4);
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-top: 3px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
}

.cf-rules__arena--combat[b-dk76tx9695] { border-top-color: var(--cf-struggle-combat); }
.cf-rules__arena--guile[b-dk76tx9695] { border-top-color: var(--cf-struggle-guile); }
.cf-rules__arena--sorcery[b-dk76tx9695] { border-top-color: var(--cf-struggle-sorcery); }
.cf-rules__arena--faith[b-dk76tx9695] { border-top-color: var(--cf-struggle-faith); }

.cf-rules__arena-icon[b-dk76tx9695] { flex: none; display: inline-flex; margin-top: 1px; }

.cf-rules__arena-name[b-dk76tx9695] {
    margin: 0 0 2px;
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: var(--cf-text-lg);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--cf-text);
}

.cf-rules__arena p[b-dk76tx9695] { margin: 0; font-size: var(--cf-text-sm); line-height: 1.5; color: var(--cf-text-muted); }
.cf-rules__arena strong[b-dk76tx9695] { color: var(--cf-text); }

@media (min-width: 720px) {
    .cf-rules__arenas[b-dk76tx9695] { grid-template-columns: 1fr 1fr; }
}

/* ───────────────────────── Lexicon (keywords + glossary) ───────────────────────── */
.cf-rules__lexicon[b-dk76tx9695] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: var(--cf-space-3) 0;
}

.cf-rules__lexicon > div[b-dk76tx9695] {
    display: flex;
    gap: var(--cf-space-3);
    padding: var(--cf-space-2) 0;
    border-bottom: 1px solid var(--cf-border);
}

.cf-rules__lexicon > div:last-child[b-dk76tx9695] { border-bottom: none; }

.cf-rules__lexicon dt[b-dk76tx9695] {
    flex: none;
    width: 132px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-family: var(--cf-font-display);
    font-weight: 700;
    color: var(--cf-brand);
}

/* Attacker / Defender restriction, lifted out of the keyword's prose to a chip beneath the term - it
   governs legality, so it's the row's most lookup-critical fact. Neutral (no new hue) to avoid colour
   overload; the word and the chip's presence carry the distinction. */
.cf-rules__lexicon-side[b-dk76tx9695] {
    font-family: var(--cf-font-ui);
    font-size: var(--cf-text-2xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    padding: 2px 7px;
    border-radius: var(--cf-radius-pill);
    color: var(--cf-text-muted);
    background: color-mix(in srgb, var(--cf-text-muted) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--cf-text-muted) 32%, transparent);
}

.cf-rules__lexicon dd[b-dk76tx9695] { margin: 0; font-size: var(--cf-text-sm); line-height: 1.5; color: var(--cf-text-muted); }

.cf-rules__lexicon-bridge[b-dk76tx9695] { margin-top: var(--cf-space-5); }

@media (min-width: 720px) {
    .cf-rules__lexicon[b-dk76tx9695] { grid-template-columns: 1fr 1fr; column-gap: var(--cf-space-6); }
    /* Even-count lists fill row-major, so drop the rule under the bottom-left (odd, second-to-last) cell too. */
    .cf-rules__lexicon > div:nth-last-child(2):nth-child(odd)[b-dk76tx9695] { border-bottom: none; }
}

/* ───────────────────────── Colophon (after-CTA) ───────────────────────── */
/* ───────────────────────── Quick reference ───────────────────────── */
/* The returning player's page. Deliberately the densest block in the book: no prose voice, no marginal
   glosses, everything answerable at a glance. */
.cf-rules__quick[b-dk76tx9695] {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--cf-space-3);
    margin: var(--cf-space-5) 0 0;
}

.cf-rules__quick-card[b-dk76tx9695] {
    padding: var(--cf-space-3) var(--cf-space-4);
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-top: 2px solid color-mix(in srgb, var(--cf-accent) 55%, var(--cf-border));
    border-radius: var(--cf-radius-md);
}

.cf-rules__quick-name[b-dk76tx9695] {
    margin: 0 0 var(--cf-space-1);
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: var(--cf-text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cf-brand);
}

.cf-rules__quick p[b-dk76tx9695] { margin: 0; font-size: var(--cf-text-sm); line-height: 1.55; color: var(--cf-text-muted); }
.cf-rules__quick strong[b-dk76tx9695] { color: var(--cf-text); }

@media (min-width: 720px) {
    .cf-rules__quick[b-dk76tx9695] { grid-template-columns: 1fr 1fr; }
}

.cf-rules__colophon[b-dk76tx9695] {
    margin-top: var(--cf-space-8);
    padding-top: var(--cf-space-6);
    border-top: 1px solid var(--cf-border);
    text-align: center;
}

.cf-rules__colophon-mark[b-dk76tx9695] { display: block; margin-bottom: var(--cf-space-2); color: var(--cf-accent-deep); font-size: 1.3rem; }

.cf-rules__colophon-head[b-dk76tx9695] {
    margin: 0 0 var(--cf-space-3);
    font-family: var(--game-font-display);
    font-weight: 700;
    font-size: var(--cf-text-md);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
}

.cf-rules__colophon-links[b-dk76tx9695] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cf-space-4);
}

.cf-rules__colophon-link[b-dk76tx9695] { font-size: var(--cf-text-sm); font-weight: 600; color: var(--cf-brand); }
/* /Components/Pages/RulesFull.razor.rz.scp.css */
/* The complete rulebook (/rules/full). Same parchment tokens and type voices as the /rules codex, but a
   quieter, denser reference register: this page is read to settle an argument, not to be charmed. The
   rulebook body arrives as one MarkupString, so its elements carry no scoped-CSS attribute - everything that
   styles it must go through `.cf-rulebook__doc ::deep`, which compiles to a descendant selector under the
   scoped wrapper. */

.cf-rulebook[b-nlrw29tbar] {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 var(--cf-space-4) clamp(32px, 6vw, 64px);
}

/* ───────────────────────── Head ───────────────────────── */
.cf-rulebook__head[b-nlrw29tbar] {
    margin: clamp(24px, 5vw, 56px) 0 var(--cf-space-6);
    padding-bottom: var(--cf-space-5);
    border-bottom: 1px solid var(--cf-border);
    text-align: center;
}

.cf-rulebook__folio[b-nlrw29tbar] {
    margin: 0 0 var(--cf-space-2);
    font-family: var(--game-font-display);
    font-size: var(--cf-text-2xs);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--game-gold-ink);
}

.cf-rulebook__title[b-nlrw29tbar] {
    margin: 0 0 var(--cf-space-4);
    font-family: "IM Fell English", var(--cf-font-display);
    font-weight: 400;
    font-size: clamp(2.2rem, 5.5vw, 3.2rem);
    line-height: 1.05;
    color: var(--cf-brand);
}

.cf-rulebook__lede[b-nlrw29tbar] {
    max-width: 56ch;
    margin: 0 auto;
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-md);
    line-height: 1.6;
    color: var(--cf-text-muted);
}

.cf-rulebook__lede a[b-nlrw29tbar] { color: var(--cf-brand); font-weight: 600; }

.cf-rulebook__stamp[b-nlrw29tbar] {
    max-width: 56ch;
    margin: var(--cf-space-4) auto 0;
    font-size: var(--cf-text-sm);
    line-height: 1.55;
    color: var(--cf-text-muted);
}

.cf-rulebook__stamp strong[b-nlrw29tbar] { color: var(--cf-text); }
.cf-rulebook__stamp-mark[b-nlrw29tbar] { color: var(--cf-accent-deep); margin-right: 4px; }

.cf-rulebook__back[b-nlrw29tbar] {
    margin: var(--cf-space-7) 0 0;
    padding-top: var(--cf-space-5);
    border-top: 1px solid var(--cf-border);
    text-align: center;
    font-size: var(--cf-text-sm);
}

.cf-rulebook__back a[b-nlrw29tbar] { color: var(--cf-brand); font-weight: 600; }

/* ───────────────────────── Rendered rulebook ───────────────────────── */
.cf-rulebook__doc[b-nlrw29tbar] {
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-md);
    line-height: 1.65;
    color: var(--cf-text);
}

.cf-rulebook__doc[b-nlrw29tbar]  h1 {
    margin: 0 0 var(--cf-space-5);
    font-family: var(--game-font-display);
    font-size: clamp(1.1rem, 2.2vw, 1.35rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--cf-text);
}

/* Rubric chapter heads, matching the /rules codex: crimson, small-caps-ish Cinzel, with a hairline above so
   the long document breaks into visible chapters when scanned. */
.cf-rulebook__doc[b-nlrw29tbar]  h2 {
    margin: var(--cf-space-7) 0 var(--cf-space-4);
    padding-top: var(--cf-space-4);
    border-top: 1px solid var(--cf-border);
    font-family: var(--game-font-display);
    font-size: clamp(1.05rem, 2vw, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--cf-brand);
}

.cf-rulebook__doc[b-nlrw29tbar]  h3 {
    margin: var(--cf-space-6) 0 var(--cf-space-3);
    font-family: var(--game-font-display);
    font-size: var(--cf-text-md);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--cf-text);
}

.cf-rulebook__doc[b-nlrw29tbar]  h4 {
    margin: var(--cf-space-5) 0 var(--cf-space-2);
    font-size: var(--cf-text-sm);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
}

.cf-rulebook__doc[b-nlrw29tbar]  p { margin: 0 0 var(--cf-space-4); }
.cf-rulebook__doc[b-nlrw29tbar]  strong { color: var(--cf-text); font-weight: 700; }
.cf-rulebook__doc[b-nlrw29tbar]  a { color: var(--cf-brand); font-weight: 600; }

.cf-rulebook__doc[b-nlrw29tbar]  ul,
.cf-rulebook__doc[b-nlrw29tbar]  ol {
    margin: 0 0 var(--cf-space-4);
    padding-left: var(--cf-space-5);
}

.cf-rulebook__doc[b-nlrw29tbar]  li { margin-bottom: var(--cf-space-2); }

/* The rulebook's callouts (the golden rule, the Power trap) - rubric-marked, like the /rules asides. */
.cf-rulebook__doc[b-nlrw29tbar]  blockquote {
    margin: 0 0 var(--cf-space-5);
    padding: var(--cf-space-4) var(--cf-space-5);
    border-left: 3px solid var(--cf-accent-deep);
    border-radius: 0 var(--cf-radius-md) var(--cf-radius-md) 0;
    background: var(--cf-surface);
    font-size: var(--cf-text-sm);
    line-height: 1.6;
    color: var(--cf-text-muted);
}

.cf-rulebook__doc[b-nlrw29tbar]  blockquote p:last-child { margin-bottom: 0; }

/* Tables carry the type/keyword/struggle matrices - they must stay readable on a phone, so the wrapper
   scrolls rather than the page. */
.cf-rulebook__doc[b-nlrw29tbar]  table {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0 0 var(--cf-space-5);
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--cf-text-sm);
}

.cf-rulebook__doc[b-nlrw29tbar]  th,
.cf-rulebook__doc[b-nlrw29tbar]  td {
    padding: var(--cf-space-2) var(--cf-space-3);
    border-bottom: 1px solid var(--cf-border);
    text-align: left;
    vertical-align: top;
    line-height: 1.5;
}

.cf-rulebook__doc[b-nlrw29tbar]  th {
    font-family: var(--game-font-display);
    font-size: var(--cf-text-2xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
    white-space: nowrap;
}

/* The appendix timing charts are preformatted ASCII - monospace, and they scroll instead of squeezing. */
.cf-rulebook__doc[b-nlrw29tbar]  pre {
    margin: 0 0 var(--cf-space-5);
    padding: var(--cf-space-4);
    overflow-x: auto;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-md);
    font-size: var(--cf-text-2xs);
    line-height: 1.5;
    color: var(--cf-text-muted);
}

.cf-rulebook__doc[b-nlrw29tbar]  code {
    font-size: 0.92em;
    color: var(--cf-text);
}

.cf-rulebook__doc[b-nlrw29tbar]  hr {
    margin: var(--cf-space-6) 0;
    border: 0;
    border-top: 1px solid var(--cf-border);
}

/* Every heading is a deep-link target (Markdig's auto-identifiers), so each must clear the fixed app header
   when jumped to - otherwise the section title lands underneath it. */
.cf-rulebook__doc[b-nlrw29tbar]  h2,
.cf-rulebook__doc[b-nlrw29tbar]  h3,
.cf-rulebook__doc[b-nlrw29tbar]  h4 {
    scroll-margin-top: calc(var(--cf-header-height) + var(--cf-space-4));
}

/* Deep-linked section: hold the target briefly so a reader arriving from /rules or an in-game tooltip can
   see which rule they landed on. */
.cf-rulebook__doc[b-nlrw29tbar]  h2:target,
.cf-rulebook__doc[b-nlrw29tbar]  h3:target {
    background: color-mix(in srgb, var(--cf-accent) 16%, transparent);
    box-shadow: -6px 0 0 color-mix(in srgb, var(--cf-accent) 16%, transparent);
}
/* /Components/Pages/Showcase.razor.rz.scp.css */
.cf-showcase__lead[b-7o3dlowjow] {
    color: var(--cf-text-muted);
    max-width: 60ch;
}

.cf-showcase__section[b-7o3dlowjow] {
    margin: var(--cf-space-6) 0;
    padding-top: var(--cf-space-4);
    border-top: 1px solid var(--cf-border);
}

.cf-showcase__section h2[b-7o3dlowjow] {
    font-size: var(--cf-text-lg);
    margin-bottom: var(--cf-space-3);
}

.cf-showcase__note[b-7o3dlowjow] {
    color: var(--cf-text-muted);
    font-size: var(--cf-text-sm);
    font-weight: 400;
}

.cf-showcase__row[b-7o3dlowjow] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cf-space-3);
    margin-bottom: var(--cf-space-3);
}

.cf-showcase__icons[b-7o3dlowjow] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: var(--cf-space-3);
}

.cf-showcase__icon-cell[b-7o3dlowjow] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cf-space-1);
    color: var(--cf-text);
    font-size: var(--cf-text-xs);
}

.cf-showcase__struggles span[b-7o3dlowjow] {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-2);
}

.cf-showcase__subheading[b-7o3dlowjow] {
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-md);
    color: var(--cf-text-muted);
    margin: var(--cf-space-5) 0 var(--cf-space-3);
}

/* Hand-card render variants sit on a dark felt strip so the gold bezels + parchment read like the live
   board (the cards are light; the felt makes the gilt edge + dimming legible at rest). */
.cf-showcase__handtray[b-7o3dlowjow] {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 30px 14px 18px;
    margin-bottom: var(--cf-space-4);
    background: var(--game-felt-1);
    border-radius: var(--cf-radius-lg);
    overflow-x: auto;
}

.cf-showcase__cards[b-7o3dlowjow] {
    align-items: flex-start;
    gap: var(--cf-space-5);
}

.cf-showcase__frame-cell[b-7o3dlowjow] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--cf-space-2);
}

.cf-showcase__frame-label[b-7o3dlowjow] {
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-sm);
    color: var(--cf-text-muted);
    letter-spacing: 0.04em;
}
/* /Components/Pages/Tutorial.razor.rz.scp.css */
/* Onboarding hub. Mirrors the Home hero/how language with the --cf-* tokens, scoped to this page. */
.cf-tut-hero[b-s0gy0vmnbm] {
    max-width: 760px;
    margin: clamp(24px, 5vw, 56px) auto var(--cf-space-7);
    padding: 0 var(--cf-space-4);
    text-align: center;
}

/* The crest sits in a coronation-gold medallion so the hero leads with an emblem, not a bare glyph. */
.cf-tut-hero__medallion[b-s0gy0vmnbm] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    margin-bottom: var(--cf-space-3);
    border-radius: 50%;
    background: radial-gradient(circle at 50% 36%,
        color-mix(in srgb, var(--cf-accent) 24%, transparent),
        color-mix(in srgb, var(--cf-accent) 6%, transparent));
    border: 2px solid color-mix(in srgb, var(--cf-accent) 55%, transparent);
    box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--cf-accent) 60%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--cf-overlay-light) 55%, transparent);
}

.cf-tut-hero__crest[b-s0gy0vmnbm] { color: var(--cf-accent); }

.cf-tut-hero__headline[b-s0gy0vmnbm] {
    margin: 0 0 var(--cf-space-3);
    font-family: var(--cf-font-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--cf-text);
}

.cf-tut-hero__headline em[b-s0gy0vmnbm] { font-style: italic; color: var(--cf-brand); }

.cf-tut-hero__tag[b-s0gy0vmnbm] {
    margin: 0;
    font-size: var(--cf-text-lg, 1.15rem);
    line-height: 1.55;
    color: var(--cf-text-muted);
}

/* Secondary path for read-first players - quieter than the lesson CTAs below, but clearly a link. */
.cf-tut-hero__alt[b-s0gy0vmnbm] {
    margin: var(--cf-space-3) 0 0;
    font-size: var(--cf-text-sm, 0.92rem);
    color: var(--cf-text-muted);
}

.cf-tut-hero__alt a[b-s0gy0vmnbm] { color: var(--cf-brand); font-weight: 600; text-decoration: none; }
.cf-tut-hero__alt a:hover[b-s0gy0vmnbm] { text-decoration: underline; }

.cf-tut-lessons[b-s0gy0vmnbm] {
    display: grid;
    /* Cap card width and center, so a single lesson reads as intentional, not a lone item adrift in a wide row. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 380px));
    justify-content: center;
    gap: var(--cf-space-4);
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--cf-space-4);
}

.cf-tut-card[b-s0gy0vmnbm] {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3);
    padding: var(--cf-space-5);
    background: var(--cf-surface);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-lg, 12px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--cf-overlay-light) 50%, transparent),
        0 6px 20px -14px color-mix(in srgb, var(--cf-overlay-dark) 40%, transparent);
    transition: border-color var(--cf-dur-fast, 120ms) var(--cf-ease), transform var(--cf-dur-fast, 120ms) var(--cf-ease);
}

.cf-tut-card:hover[b-s0gy0vmnbm] { border-color: var(--cf-accent); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .cf-tut-card[b-s0gy0vmnbm] { transition: none; }
    .cf-tut-card:hover[b-s0gy0vmnbm] { transform: none; }
}

/* A strip of real card art atop the lesson card. The source images are landscape crops of differing sizes,
   so a fixed ratio + cover normalises them into a tidy uniform rail. Decorative; the lesson's meaning lives
   in the title/summary. */
.cf-tut-card__rail[b-s0gy0vmnbm] {
    display: flex;
    justify-content: center;
    gap: var(--cf-space-2);
    margin-bottom: var(--cf-space-1);
}

.cf-tut-card__art[b-s0gy0vmnbm] {
    width: 33%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    object-position: center 28%;
    border-radius: var(--cf-radius-sm, 6px);
    border: 1px solid var(--cf-border);
    box-shadow: 0 4px 12px -8px color-mix(in srgb, var(--cf-overlay-dark) 55%, transparent);
}

.cf-tut-card__top[b-s0gy0vmnbm] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--cf-space-3);
}

.cf-tut-card__title[b-s0gy0vmnbm] {
    margin: 0;
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-xl, 1.4rem);
    font-weight: 700;
    color: var(--cf-text);
}

.cf-tut-card__chips[b-s0gy0vmnbm] {
    display: flex;
    flex: none;
    gap: var(--cf-space-2);
}

.cf-tut-card__chip[b-s0gy0vmnbm] {
    flex: none;
    padding: 2px var(--cf-space-2);
    border-radius: var(--cf-radius-pill, 999px);
    background: color-mix(in srgb, var(--cf-accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--cf-accent) 30%, transparent);
    font-size: var(--cf-text-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--cf-text-muted);   /* was --cf-accent-deep (~3.5:1 on the faint-gold fill - fails AA); also tames gold-overload */
    white-space: nowrap;
}

/* Coming-soon teaser card: a recessed, dashed frame signals "not yet" - instead of an opacity wash, which
   dropped the text below AA contrast and read as a card that failed to load. Text stays full-strength; inert
   (no hover lift). */
.cf-tut-card--soon[b-s0gy0vmnbm] { background: var(--cf-surface-2); border-style: dashed; box-shadow: none; }
.cf-tut-card--soon:hover[b-s0gy0vmnbm] { border-color: var(--cf-border); transform: none; }
.cf-tut-card__chip--soon[b-s0gy0vmnbm] {
    background: color-mix(in srgb, var(--cf-text-muted) 14%, transparent);
    border-color: color-mix(in srgb, var(--cf-text-muted) 38%, transparent);
    color: var(--cf-text-muted);
}

/* Watch-along chip: a faint crimson tint distinguishes a "watch this match" card from the gold "play" chips at
   a glance (the play-icon Watch button is the other cue). Text stays --cf-text-muted for AA on the light fill. */
.cf-tut-card__chip--watch[b-s0gy0vmnbm] {
    background: color-mix(in srgb, var(--cf-brand) 10%, transparent);
    border-color: color-mix(in srgb, var(--cf-brand) 32%, transparent);
}

.cf-tut-card__summary[b-s0gy0vmnbm] {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--cf-text-sm, 0.92rem);
    line-height: 1.5;
    color: var(--cf-text-muted);
}

.cf-tut-card__foot[b-s0gy0vmnbm] { margin-top: var(--cf-space-1); }

.cf-tut-after[b-s0gy0vmnbm] {
    max-width: 900px;
    margin: var(--cf-space-8) auto 0;
    padding: var(--cf-space-5) var(--cf-space-4) clamp(24px, 5vw, 56px);
    text-align: center;
}

.cf-tut-after__head[b-s0gy0vmnbm] {
    margin: 0 0 var(--cf-space-3);
    font-size: var(--cf-text-md);
    font-weight: 600;
    color: var(--cf-text-muted);
}

.cf-tut-after__links[b-s0gy0vmnbm] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--cf-space-4);
}

.cf-tut-after__link[b-s0gy0vmnbm] {
    font-size: var(--cf-text-sm, 0.92rem);
    font-weight: 600;
    color: var(--cf-brand);
    text-decoration: none;
}

.cf-tut-after__link:hover[b-s0gy0vmnbm] { text-decoration: underline; }
/* /Components/Pages/Watch.razor.rz.scp.css */
/* /watch — the live-match discovery list (§E4.3). Page chrome mirrors Replays' head/list model (scoped CSS
   does not reach across components, so this page carries its own copy); tokens only, no raw color. */
.cf-watch__head[b-eip041h7ff] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cf-watch__title[b-eip041h7ff] {
    font-family: var(--cf-font-display);
    font-size: 30px;
    font-weight: 700;
    margin: 0;
}

.cf-watch__sub[b-eip041h7ff] {
    color: var(--cf-text-muted);
    font-size: var(--cf-text-sm);
    margin-top: 4px;
}

.cf-watch__list[b-eip041h7ff] {
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cf-watch__row[b-eip041h7ff] {
    position: relative; /* the stretched Watch link (::after) anchors to the row */
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid var(--cf-border);
    border-radius: 10px;
    background: var(--cf-surface);
}

.cf-watch__matchup[b-eip041h7ff] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 260px;
}

/* Faction crest beside each name — the sigil art (decorative; the name carries the information). */
.cf-watch__crest[b-eip041h7ff] {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-color: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
}

/* The influence race between the names ("11–8") — the row's closeness scent. */
.cf-watch__score[b-eip041h7ff] {
    flex: none;
    color: var(--cf-text-muted);
    font-weight: 700;
    font-size: var(--cf-text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cf-watch__player[b-eip041h7ff] {
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cf-watch__state[b-eip041h7ff] {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex: 1 1 220px;
    min-width: 0;
}

.cf-watch__round[b-eip041h7ff] {
    color: var(--cf-text-muted);
    font-size: var(--cf-text-sm);
    white-space: nowrap;
}

.cf-watch__watching[b-eip041h7ff] {
    color: var(--cf-text-muted);
    font-size: var(--cf-text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The gold action chip — Replays' .cf-replays__watch recipe verbatim, so "watch a thing" reads identically
   across the two surfaces (accent fill, on-gold ink, no border). Focus ring: the global :focus-visible
   (--cf-focus) covers it — no bespoke rule. */
.cf-watch__go[b-eip041h7ff] {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    background: var(--cf-accent);
    color: var(--cf-accent-contrast); /* the on-gold ink pair - --cf-text flips cream in dark and drowns on the gold */
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cf-watch__go:hover[b-eip041h7ff] {
    filter: brightness(1.05);
}

/* Stretched link: the chip's ::after covers its row (the nearest positioned ancestor), so the WHOLE row
   is the click target while ▷ Watch stays the visual verb. Hovering anywhere on the row hovers the chip. */
.cf-watch__go[b-eip041h7ff]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 10px;
}

.cf-watch__empty-replays[b-eip041h7ff] {
    display: inline-flex;
    align-items: center;
    margin-top: 12px;
    padding: 8px 16px;
    border: 1px solid var(--cf-border-strong);
    border-radius: 8px;
    color: var(--cf-text);
    font-weight: 600;
    text-decoration: none;
}

.cf-watch__empty-replays:hover[b-eip041h7ff] {
    border-color: var(--cf-brand);
}

/* Touch floors: the two tappable affordances keep a 44px minimum hit target on coarse pointers. */
@media (pointer: coarse) {
    .cf-watch__go[b-eip041h7ff],
    .cf-watch__empty-replays[b-eip041h7ff] {
        min-height: 44px;
    }
}
/* /Components/Replays/ReplayShareDialog.razor.rz.scp.css */
/* Body of the share dialog (the modal shell itself is Components/Shared/Dialog + its scoped sheet). */
.cf-rshare__lede[b-53aexmgwre] {
    margin: 0 0 14px;
    color: var(--cf-text-muted);
    font-size: var(--cf-text-sm);
    line-height: 1.5;
}

.cf-rshare__toggle[b-53aexmgwre] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: var(--cf-text);
    cursor: pointer;
}

.cf-rshare__toggle input[b-53aexmgwre] {
    width: 16px;
    height: 16px;
    accent-color: var(--cf-brand);
    cursor: pointer;
}

.cf-rshare__link[b-53aexmgwre] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* Readonly (not inert) so keyboard users can tab in and select-all to copy themselves.
   Field + button hold the deck ShareLinkBlock's 40px row (deck-editor.css share-link precedent). */
.cf-rshare__url[b-53aexmgwre] {
    flex: 1;
    min-width: 0;
    min-height: 40px;
    padding: 8px 10px;
    border: 1px solid var(--cf-border);
    border-radius: 8px;
    background: color-mix(in srgb, var(--cf-accent) 6%, var(--cf-surface));
    color: var(--cf-text);
    font-size: var(--cf-text-sm);
    font-family: var(--cf-font-mono, monospace);
}

.cf-rshare__copy[b-53aexmgwre] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border: 1px solid var(--cf-border);
    border-radius: 8px;
    background: var(--cf-surface);
    color: var(--cf-text-muted);
    cursor: pointer;
}

.cf-rshare__copy:hover[b-53aexmgwre] {
    border-color: var(--cf-accent);
    color: var(--cf-text);
    background: color-mix(in srgb, var(--cf-accent) 10%, var(--cf-surface));
}

.cf-rshare__hint[b-53aexmgwre] {
    margin: 10px 0 0;
    color: var(--cf-text-muted);
    font-size: var(--cf-text-xs);
    line-height: 1.5;
}

.cf-rshare__error[b-53aexmgwre] {
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--cf-danger) 40%, var(--cf-border));
    border-radius: 8px;
    background: color-mix(in srgb, var(--cf-danger) 8%, var(--cf-surface));
    color: var(--cf-danger-fg); /* the -fg tints are the TEXT tier - base --cf-danger is a fill/border colour */
    font-size: var(--cf-text-sm);
}

/* Coarse pointers (touch): the ~44px floor for the copy button (the row centers the field beside it). */
@media (pointer: coarse) {
    .cf-rshare__copy[b-53aexmgwre] {
        width: 44px;
        height: 44px;
    }
}
/* /Components/Shared/Button.razor.rz.scp.css */
.cf-btn[b-dpjjhz02im] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cf-space-2);
    border: 1px solid transparent;
    border-radius: var(--cf-radius-md);
    font-family: var(--cf-font-ui);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--cf-dur-fast) var(--cf-ease),
                border-color var(--cf-dur-fast) var(--cf-ease),
                color var(--cf-dur-fast) var(--cf-ease);
}

/* Sizes - lg clears the 44px touch target. */
.cf-btn--sm[b-dpjjhz02im] { min-height: 32px; padding: 0 var(--cf-space-3); font-size: var(--cf-text-sm); }
.cf-btn--md[b-dpjjhz02im] { min-height: 40px; padding: 0 var(--cf-space-4); font-size: var(--cf-text-sm); }
.cf-btn--lg[b-dpjjhz02im] { min-height: 48px; padding: 0 var(--cf-space-5); font-size: var(--cf-text-md); }

/* Primary - crimson fill. */
.cf-btn--primary[b-dpjjhz02im] { background: var(--cf-brand); color: var(--cf-brand-contrast); }
.cf-btn--primary:hover:not(:disabled)[b-dpjjhz02im] { background: var(--cf-brand-hover); }
.cf-btn--primary:active:not(:disabled)[b-dpjjhz02im] { background: color-mix(in srgb, var(--cf-brand) 76%, var(--cf-overlay-dark)); }

/* Secondary - crimson outline. */
.cf-btn--secondary[b-dpjjhz02im] { background: var(--cf-surface); color: var(--cf-brand); border-color: var(--cf-brand); }
.cf-btn--secondary:hover:not(:disabled)[b-dpjjhz02im] { background: color-mix(in srgb, var(--cf-brand) 8%, var(--cf-surface)); }
.cf-btn--secondary:active:not(:disabled)[b-dpjjhz02im] { background: color-mix(in srgb, var(--cf-brand) 14%, var(--cf-surface)); }

/* Ghost - text only. */
.cf-btn--ghost[b-dpjjhz02im] { background: transparent; color: var(--cf-brand); }
.cf-btn--ghost:hover:not(:disabled)[b-dpjjhz02im] { background: color-mix(in srgb, var(--cf-brand) 10%, transparent); }
.cf-btn--ghost:active:not(:disabled)[b-dpjjhz02im] { background: color-mix(in srgb, var(--cf-brand) 16%, transparent); }

/* Danger - distinct red fill. */
.cf-btn--danger[b-dpjjhz02im] { background: var(--cf-danger); color: var(--cf-brand-contrast); }
.cf-btn--danger:hover:not(:disabled)[b-dpjjhz02im] { background: color-mix(in srgb, var(--cf-danger) 84%, var(--cf-overlay-dark)); }
.cf-btn--danger:active:not(:disabled)[b-dpjjhz02im] { background: color-mix(in srgb, var(--cf-danger) 76%, var(--cf-overlay-dark)); }

.cf-btn:disabled[b-dpjjhz02im] { background: var(--cf-surface-2); color: var(--cf-text-muted); border-color: transparent; cursor: default; }
.cf-btn--secondary:disabled[b-dpjjhz02im],
.cf-btn--ghost:disabled[b-dpjjhz02im] { background: transparent; color: var(--cf-text-muted); }

.cf-btn__spinner[b-dpjjhz02im] {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: cf-btn-spin-b-dpjjhz02im 0.6s linear infinite;
}

@keyframes cf-btn-spin-b-dpjjhz02im { to { transform: rotate(360deg); } }

/* Coarse-pointer minimum. The sm/md sizes are 32px/40px tall, which clears WCAG 2.5.8 AA (24px) but
   misses the 44px target of 2.5.5 AAA and the platform HIG. Raised only under (pointer: coarse) so a
   mouse keeps the denser desktop rhythm - the sizes exist to be dense where density is usable. */
@media (pointer: coarse) {
    .cf-btn--sm[b-dpjjhz02im],
    .cf-btn--md[b-dpjjhz02im] { min-height: 44px; }
}
/* /Components/Shared/Chip.razor.rz.scp.css */
.cf-chip[b-vuhzmtbflv] {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-1);
    padding: 2px var(--cf-space-2);
    border: 1px solid var(--cf-border);
    border-radius: var(--cf-radius-pill);
    background: var(--cf-surface-2);
    color: var(--cf-text);
    font-size: var(--cf-text-sm);
    white-space: nowrap;
}

.cf-chip--selected[b-vuhzmtbflv] {
    border-color: var(--cf-brand);
    color: var(--cf-brand);
    background: color-mix(in srgb, var(--cf-brand) 8%, var(--cf-surface));
}

.cf-chip__remove[b-vuhzmtbflv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
}

.cf-chip__remove:hover[b-vuhzmtbflv] {
    color: var(--cf-brand);
}
/* /Components/Shared/Dialog.razor.rz.scp.css */
/* Reusable modal shell - the `cf-modal` block: backdrop > dialog > head (title/icon/close) > body > foot.
   Flat BEM (cf-modal__element, cf-modal__dialog--wide) keeps specificity even and can't collide with the
   editor's scoped .dialog rules. Note: native CSS nesting can't concatenate BEM names (`&__head` would be
   a type selector), so elements are written flat; nesting is used only for pseudo-class state. */

.cf-modal[b-16r182l87t] {
    /* backdrop / scrim */
    position: fixed;
    inset: 0;
    z-index: var(--cf-z-dialog);
    background: var(--cf-scrim);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cf-space-6);
    animation: cf-modal-in-b-16r182l87t var(--cf-dur-fast) var(--cf-ease);
}

.cf-modal__dialog[b-16r182l87t] {
    width: min(560px, 100%);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-lg);
    box-shadow: var(--cf-shadow-3);
    overflow: hidden;
}

.cf-modal__dialog--wide[b-16r182l87t] {
    width: min(640px, 100%);
}

.cf-modal__head[b-16r182l87t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cf-space-3);
    padding: var(--cf-space-4) var(--cf-space-5);
    border-bottom: 1px solid var(--cf-border);
}

.cf-modal__title[b-16r182l87t] {
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-xl);
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--cf-space-2);
}

/* the head glyph inherits this colour into its currentColor mask - crimson, per the design */
.cf-modal__icon[b-16r182l87t] {
    display: inline-flex;
    color: var(--cf-brand);
}

.cf-modal__close[b-16r182l87t] {
    width: 40px;
    height: 40px;
    border-radius: var(--cf-radius-md);
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cf-surface-2);
    border: 1px solid var(--cf-border);
    color: var(--cf-text-muted);

    &:hover {
        background: var(--cf-surface-hover);
        color: var(--cf-text);
    }

    &:focus-visible[b-16r182l87t] {
        outline: none;
        box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand);
    }
}

.cf-modal__body[b-16r182l87t] {
    padding: var(--cf-space-4) var(--cf-space-5);
    overflow-y: auto;
}

.cf-modal__foot[b-16r182l87t] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--cf-space-3);
    padding: var(--cf-space-4) var(--cf-space-5);
    border-top: 1px solid var(--cf-border);
    background: var(--cf-surface-2);
}

@keyframes cf-modal-in-b-16r182l87t {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
/* All empty / not-found panels render through <EmptyState>; the caller passes the variant MODIFIER via
   CssClass and the component prepends the base. Styles were moved verbatim from the per-page scoped sheets;
   crest rules use ::deep to reach the child <Crest>'s .cf-crest. The dashed-card page empties pass CrestSize
   inline, so they need no crest rule. */
.cf-empty-state[b-jc36z8eck6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* page empty - My Decks / Browse / Profile / My Games / Replays (dashed card; --subtle drops the fill) */
.cf-empty-state--page[b-jc36z8eck6] {
    gap: 12px;
    padding: 48px 26px;
    border: 1px dashed var(--cf-border-strong);
    border-radius: var(--cf-radius-lg);
    background: var(--cf-surface-2);
    margin-top: 8px;
}
.cf-empty-state--page.cf-empty-state--subtle[b-jc36z8eck6] { background: transparent; border-style: solid; border-color: var(--cf-border); }
.cf-empty-state--page h4[b-jc36z8eck6] { font-family: var(--cf-font-display); font-size: 18px; margin: 0; color: var(--cf-text); }
.cf-empty-state--page p[b-jc36z8eck6] { margin: 0; color: var(--cf-text-muted); font-size: 14px; }

/* card browser empty ("no cards match" on /cards and in the editor pool) */
.cf-empty-state--browser[b-jc36z8eck6] {
    gap: 12px;
    padding: 64px 20px;
    color: var(--cf-text-muted);
    max-width: 360px;
    margin: 24px auto;
}
.cf-empty-state--browser[b-jc36z8eck6]  .cf-crest { width: 48px; height: 48px; color: var(--cf-crest-muted); }
.cf-empty-state--browser h4[b-jc36z8eck6] { font-family: var(--cf-font-display); font-size: 18px; margin: 0; color: var(--cf-text); }
.cf-empty-state--browser p[b-jc36z8eck6] { margin: 0; font-size: 13.5px; }

/* editor draw-list empty */
.cf-empty-state--list[b-jc36z8eck6] {
    gap: 8px; padding: 26px 16px; color: var(--cf-text-muted);
}
.cf-empty-state--list[b-jc36z8eck6]  .cf-crest { width: 38px; height: 38px; color: var(--cf-crest-muted); }
.cf-empty-state--list p[b-jc36z8eck6] { margin: 0; font-size: 12.5px; max-width: 200px; }

/* editor spread (fan-by-cost) empty */
.cf-empty-state--spread[b-jc36z8eck6] {
    gap: 12px; padding: 80px 20px; color: var(--cf-text-muted); max-width: 380px; margin: 40px auto;
}
.cf-empty-state--spread[b-jc36z8eck6]  .cf-crest { width: 54px; height: 54px; color: var(--cf-crest-muted); }
.cf-empty-state--spread h2[b-jc36z8eck6] { font-family: var(--cf-font-display); font-size: 20px; margin: 0; color: var(--cf-text); }
.cf-empty-state--spread p[b-jc36z8eck6] { margin: 0; font-size: 14px; }

/* public share page - invalid / unavailable link */
.cf-empty-state--invalid[b-jc36z8eck6] {
    gap: 12px;
    padding: 64px 28px;
    border: 1px dashed var(--cf-border-strong);
    border-radius: var(--cf-radius-lg);
    background: var(--cf-surface-2);
}
.cf-empty-state--invalid h2[b-jc36z8eck6] { font-family: var(--cf-font-display); font-size: 20px; margin: 0; }
.cf-empty-state--invalid p[b-jc36z8eck6] { margin: 0; color: var(--cf-text-muted); font-size: 14px; }
/* /Components/Shared/Icon.razor.rz.scp.css */
/* Tint any monochrome SVG to the current text colour by using it as an alpha mask. */
.cf-icon[b-0lsaseg73q] {
    display: inline-block;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask: var(--cf-icon-url) no-repeat center / contain;
    mask: var(--cf-icon-url) no-repeat center / contain;
    vertical-align: -0.125em;
}
/* /Components/Shared/IconButton.razor.rz.scp.css */
.cf-iconbtn[b-vbrnrelomv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    background: var(--cf-surface);
    color: var(--cf-brand);
    cursor: pointer;
    transition: background var(--cf-dur-fast) var(--cf-ease),
                border-color var(--cf-dur-fast) var(--cf-ease);
}

.cf-iconbtn:hover:not(:disabled)[b-vbrnrelomv] {
    background: color-mix(in srgb, var(--cf-brand) 8%, var(--cf-surface));
}

.cf-iconbtn:active:not(:disabled)[b-vbrnrelomv] {
    background: color-mix(in srgb, var(--cf-brand) 14%, var(--cf-surface));
}

.cf-iconbtn--ghost[b-vbrnrelomv] {
    border-color: transparent;
    background: transparent;
}

.cf-iconbtn--ghost:hover:not(:disabled)[b-vbrnrelomv] {
    background: color-mix(in srgb, var(--cf-brand) 10%, transparent);
}

/* Later in source than the base :active, so the ghost press stays surface-free. */
.cf-iconbtn--ghost:active:not(:disabled)[b-vbrnrelomv] {
    background: color-mix(in srgb, var(--cf-brand) 16%, transparent);
}

.cf-iconbtn:disabled[b-vbrnrelomv] {
    color: var(--cf-text-muted);
    border-color: var(--cf-border);
    cursor: default;
}
/* /Components/Shared/SearchBox.razor.rz.scp.css */
/* Toolbar search field - moved here from the per-page scoped sheets (was byte-identical in DeckListFilters
   and Browse). The .cf-search-box container that lays these out stays with each page. */
.cf-search-box[b-s4ty9rcm68] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 40px;
    padding: 0 13px;
    background: var(--cf-surface);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md);
    color: var(--cf-text-muted);
}

.cf-search-box--grow[b-s4ty9rcm68] {
    flex: 1;
    min-width: 200px;
}

.cf-search-box__input[b-s4ty9rcm68] {
    border: 0;
    background: none;
    outline: none;
    width: 100%;
    font-family: var(--cf-font-ui);
    font-size: 14px;
    color: var(--cf-text);
}

.cf-search-box__input[b-s4ty9rcm68]::placeholder { color: var(--cf-text-muted); }

.cf-search-box:focus-within[b-s4ty9rcm68] {
    border-color: var(--cf-brand);
    box-shadow: 0 0 0 2px var(--cf-surface), 0 0 0 4px var(--cf-brand);
}

/* inline clear button - mirrors the card browser's clear control */
.cf-search-box__clear[b-s4ty9rcm68] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-right: -4px;
    border: 0;
    border-radius: 50%;
    background: var(--cf-surface-2);
    color: var(--cf-text-muted);
    cursor: pointer;
}

.cf-search-box__clear:hover[b-s4ty9rcm68] {
    background: var(--cf-border);
    color: var(--cf-text);
}

.cf-search-box__clear:focus-visible[b-s4ty9rcm68] {
    outline: 2px solid var(--cf-brand);
    outline-offset: 1px;
}

/* suppress the duplicate native search clear (we render our own) */
.cf-search-box__input[b-s4ty9rcm68]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}
/* /Components/Shared/ToastHost.razor.rz.scp.css */
/* The app-wide toast pill - the single owner of .cf-toast, used by every layout's <ToastHost>. (The editor's
   old inline save-banner copy in deck-editor.css was removed when DeckBuilder adopted the shared host.) */

/* The permanent aria-live wrapper: fixed-without-insets removes it from flow (so the always-mounted,
   usually-empty region can never occupy a flex/grid gap slot in the layouts) while leaving the pill's
   own viewport positioning untouched (a fixed ancestor is not a containing block for fixed children).
   The z-index is load-bearing: position:fixed creates a stacking context, so without it the pill's own
   z-index would be trapped inside a z-auto region and paint UNDER dialog overlays. */
.cf-toast__region[b-0mj1nijrlq] { position: fixed; z-index: var(--cf-z-toast); }

.cf-toast[b-0mj1nijrlq] {
    position: fixed;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    z-index: var(--cf-z-toast);
    padding: 10px 16px;
    border-radius: var(--cf-radius-md);
    background: var(--cf-text);
    color: var(--cf-surface);
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--cf-shadow-3);
}

/* Coloured severities (mirror the editor save-banner palette); Neutral keeps the dark pill above. */
.cf-toast--ok[b-0mj1nijrlq] { background: var(--cf-success); color: var(--cf-overlay-light); }
.cf-toast--warn[b-0mj1nijrlq] { background: var(--cf-warning); color: var(--cf-overlay-light); }
.cf-toast--err[b-0mj1nijrlq] { background: var(--cf-danger); color: var(--cf-overlay-light); }
/* /Components/Tutorial/ReplayLessonHost.razor.rz.scp.css */
/* The replay-clip lesson surface. The SpectatorBoard (.bcast-fit) covers the viewport; everything here floats
   above it — a centred pre-roll/complete card, a docked coach when paused on a marker, and the spotlight ring.
   Reuses the --cf-* design tokens + the spotlight treatment from TutorialCoach. */

.cf-clip__message[b-zmg7cxk66b] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cf-space-6);
    font-family: var(--cf-font-ui);
    font-size: var(--cf-text-md, 1rem);
    color: var(--cf-text);
    text-align: center;
}

/* A thin progress bar across the clip's frames, pinned to the top edge. Sits ABOVE the spotlight ring's
   full-viewport scrim (which is at --cf-z-sticky) so clip progress stays visible while paused on a marker; a
   hairline bottom border detaches the gold fill from the board's own gold chrome below it. */
.cf-clip__scrub[b-zmg7cxk66b] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    z-index: calc(var(--cf-z-sticky) + 1);
    background: color-mix(in srgb, var(--cf-overlay-dark) 24%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--cf-overlay-dark) 28%, transparent);
}

.cf-clip__scrub-fill[b-zmg7cxk66b] {
    display: block;
    height: 100%;
    background: var(--cf-accent);
    transition: width var(--cf-dur-base, 200ms) var(--cf-ease, ease);
}

/* ── Centred card: pre-roll (before a clip plays) + clip-complete / handoff ── */
.cf-clip__preroll[b-zmg7cxk66b] {
    position: fixed;
    inset: 0;
    z-index: var(--cf-z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--cf-space-4);
    /* Close to the spotlight ring's 32% scrim so moving from a marker into this card doesn't lurch darker; the
       centred gold-bordered card carries the focus, so it needn't dim as hard as a bare modal would. */
    background: color-mix(in srgb, var(--cf-overlay-dark) 38%, transparent);
}

.cf-clip__preroll-card[b-zmg7cxk66b] {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-3);
    width: min(440px, calc(100vw - 32px));
    padding: var(--cf-space-6);
    text-align: center;
    background: linear-gradient(180deg, var(--cf-surface), var(--cf-surface-2));
    color: var(--cf-text);
    border: 1.5px solid var(--cf-accent);
    border-radius: var(--cf-radius-lg, 12px);
    box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--cf-overlay-dark) 60%, transparent),
        inset 0 2px 0 color-mix(in srgb, var(--cf-overlay-light) 40%, transparent);
    font-family: var(--cf-font-ui);
    animation: cf-clip-in-b-zmg7cxk66b var(--cf-dur-base, 200ms) var(--cf-ease, ease) both;
}

.cf-clip__kicker[b-zmg7cxk66b] {
    font-size: var(--cf-text-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
}

.cf-clip__preroll-title[b-zmg7cxk66b] {
    margin: 0;
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-xl, 1.5rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--cf-text);
}

.cf-clip__preroll-body[b-zmg7cxk66b] {
    margin: 0;
    font-size: var(--cf-text-sm, 0.9rem);
    line-height: 1.5;
    color: var(--cf-text);
    white-space: pre-line;
}

/* ── Docked coach (paused on a marker), mirroring .cf-coach ── */
.cf-clip__coach[b-zmg7cxk66b] {
    position: fixed;
    bottom: clamp(12px, 2vw, 22px);
    left: clamp(12px, 2vw, 22px);
    width: min(360px, calc(100vw - 24px));
    z-index: var(--cf-z-modal);
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2);
    padding: var(--cf-space-4);
    background: linear-gradient(180deg, var(--cf-surface), var(--cf-surface-2));
    color: var(--cf-text);
    border: 1.5px solid var(--cf-accent);
    border-radius: var(--cf-radius-lg, 12px);
    box-shadow: 0 18px 48px -18px color-mix(in srgb, var(--cf-overlay-dark) 55%, transparent),
        inset 0 2px 0 color-mix(in srgb, var(--cf-overlay-light) 40%, transparent);
    font-family: var(--cf-font-ui);
    animation: cf-clip-in-b-zmg7cxk66b var(--cf-dur-base, 200ms) var(--cf-ease, ease) both;
}

.cf-clip__chip[b-zmg7cxk66b] {
    font-size: var(--cf-text-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cf-text-muted);
}

.cf-clip__coach-title[b-zmg7cxk66b] {
    margin: 0 0 var(--cf-space-1);
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-lg, 1.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--cf-text);
}

.cf-clip__coach-text[b-zmg7cxk66b] {
    margin: 0;
    font-size: var(--cf-text-sm, 0.9rem);
    line-height: 1.5;
    color: var(--cf-text);
    white-space: pre-line;
}

.cf-clip__hint[b-zmg7cxk66b] {
    display: flex;
    align-items: flex-start;
    gap: var(--cf-space-2);
    margin: var(--cf-space-3) 0 0;
    padding: var(--cf-space-2) var(--cf-space-3);
    border-radius: var(--cf-radius-md, 8px);
    background: color-mix(in srgb, var(--cf-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--cf-accent) 40%, transparent);
    font-size: var(--cf-text-sm, 0.9rem);
    font-weight: 600;
    color: var(--cf-text);
}

/* ── Primary action button (crimson = the system action colour) ── */
.cf-clip__btn[b-zmg7cxk66b] {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-1);
    margin-top: var(--cf-space-1);
    padding: var(--cf-space-2) var(--cf-space-4);
    border-radius: var(--cf-radius-md, 8px);
    border: 1px solid var(--cf-border-strong);
    background: var(--cf-surface);
    color: var(--cf-text);
    font-family: var(--cf-font-ui);
    font-size: var(--cf-text-sm, 0.9rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--cf-dur-fast, 120ms) var(--cf-ease), border-color var(--cf-dur-fast, 120ms) var(--cf-ease);
}

.cf-clip__btn:hover[b-zmg7cxk66b] { background: var(--cf-surface-2); border-color: var(--cf-accent); }
.cf-clip__btn:focus-visible[b-zmg7cxk66b] { outline: 2px solid var(--cf-focus); outline-offset: 1px; }

.cf-clip__btn--primary[b-zmg7cxk66b] {
    background: var(--cf-brand);
    border-color: var(--cf-brand);
    color: var(--cf-brand-contrast);
}

.cf-clip__btn--primary:hover[b-zmg7cxk66b] { background: var(--cf-brand-hover); border-color: var(--cf-brand-hover); }

/* --cf-focus is crimson, so the base focus ring would be crimson-on-crimson (invisible) on the primary fill —
   and this is the ONLY action on the pre-roll / complete / coach cards. Ring it in gold with an offset instead. */
.cf-clip__btn--primary:focus-visible[b-zmg7cxk66b] { outline-color: var(--cf-accent); outline-offset: 2px; }

/* ── Playing-between-markers control: a small top-right pill that names what's on screen and lets the viewer
      jump to the next stop instead of waiting out the autoplay (a passive replay's biggest dead-air risk). ── */
.cf-clip__playbar[b-zmg7cxk66b] {
    position: fixed;
    top: var(--cf-space-3);
    right: var(--cf-space-3);
    z-index: var(--cf-z-modal);
    display: flex;
    align-items: center;
    gap: var(--cf-space-3);
    padding: var(--cf-space-1) var(--cf-space-1) var(--cf-space-1) var(--cf-space-3);
    background: color-mix(in srgb, var(--cf-surface) 92%, transparent);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-pill, 999px);
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--cf-overlay-dark) 50%, transparent);
    font-family: var(--cf-font-ui);
}

.cf-clip__playbar-now[b-zmg7cxk66b] {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--cf-text-xs, 0.8rem);
    font-weight: 600;
    color: var(--cf-text-muted);
}

/* A utility, not the lesson's forward action — quiet surface styling so it never competes with the crimson
   Continue / Watch / Play CTAs. */
.cf-clip__skip[b-zmg7cxk66b] {
    display: inline-flex;
    align-items: center;
    gap: var(--cf-space-1);
    padding: var(--cf-space-1) var(--cf-space-3);
    border-radius: var(--cf-radius-pill, 999px);
    border: 1px solid var(--cf-border-strong);
    background: var(--cf-surface-2);
    color: var(--cf-text);
    font-family: var(--cf-font-ui);
    font-size: var(--cf-text-xs, 0.8rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--cf-dur-fast, 120ms) var(--cf-ease), border-color var(--cf-dur-fast, 120ms) var(--cf-ease);
}

.cf-clip__skip:hover[b-zmg7cxk66b] { background: var(--cf-surface); border-color: var(--cf-accent); }
.cf-clip__skip:focus-visible[b-zmg7cxk66b] { outline: 2px solid var(--cf-focus); outline-offset: 2px; }

/* ── Spotlight ring (verbatim treatment from TutorialCoach, against the .bcast-* board) ── */
.cf-clip__spotlight[b-zmg7cxk66b] {
    position: fixed;
    z-index: var(--cf-z-sticky);
    pointer-events: none;
    border: 3px solid var(--cf-accent);
    border-radius: var(--cf-radius-md, 8px);
    box-shadow: 0 0 0 9999px color-mix(in srgb, var(--cf-overlay-dark) 32%, transparent),
        0 0 18px 3px color-mix(in srgb, var(--cf-accent) 50%, transparent);
    animation: cf-clip-pulse-b-zmg7cxk66b 1.6s ease-in-out infinite;
    transition: left var(--cf-dur-base, 200ms) var(--cf-ease), top var(--cf-dur-base, 200ms) var(--cf-ease),
        width var(--cf-dur-base, 200ms) var(--cf-ease), height var(--cf-dur-base, 200ms) var(--cf-ease);
}

.cf-clip__spotlight-label[b-zmg7cxk66b] {
    position: absolute;
    top: 6px;
    left: 8px;
    padding: 2px var(--cf-space-2);
    border-radius: var(--cf-radius-pill, 999px);
    background: var(--cf-accent);
    color: var(--cf-accent-contrast);
    font-family: var(--cf-font-ui);
    font-size: var(--cf-text-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--cf-overlay-dark) 50%, transparent);
}

@keyframes cf-clip-in-b-zmg7cxk66b {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes cf-clip-pulse-b-zmg7cxk66b {
    0%, 100% {
        box-shadow: 0 0 0 9999px color-mix(in srgb, var(--cf-overlay-dark) 32%, transparent),
            0 0 12px 2px color-mix(in srgb, var(--cf-accent) 45%, transparent);
    }
    50% {
        box-shadow: 0 0 0 9999px color-mix(in srgb, var(--cf-overlay-dark) 36%, transparent),
            0 0 22px 6px color-mix(in srgb, var(--cf-accent) 70%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cf-clip__preroll-card[b-zmg7cxk66b], .cf-clip__coach[b-zmg7cxk66b] { animation: none; }
    .cf-clip__spotlight[b-zmg7cxk66b] { animation: none; transition: none; }
    /* The scrub-fill width transition is KEPT under reduced-motion on purpose: it eases the per-tick (~1.1s)
       width step so the bar glides instead of strobing. Motion along a single axis is reduced-motion-safe. */
}

@media (max-width: 640px) {
    .cf-clip__coach[b-zmg7cxk66b] {
        left: 8px;
        right: 8px;
        bottom: 8px;
        width: auto;
        padding: var(--cf-space-3);
    }
    .cf-clip__coach-title[b-zmg7cxk66b] { font-size: var(--cf-text-md); }
}
/* /Components/Tutorial/TutorialCoach.razor.rz.scp.css */
/* The docked coaching panel. Sits above the board AND any moment overlay (board moments are z-index ~100)
   so guidance stays visible while the player answers a mulligan/quest, but below toasts. Non-modal: only
   the panel itself captures clicks, the rest of the board stays live. */
.cf-coach[b-oiym0ot18r] {
    position: fixed;
    bottom: clamp(12px, 2vw, 22px);
    left: clamp(12px, 2vw, 22px);
    width: min(360px, calc(100vw - 24px));
    z-index: var(--cf-z-modal);   /* above the board's moment overlays, below app dialogs + toasts */
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2);
    padding: var(--cf-space-4);
    background: linear-gradient(180deg, var(--cf-surface), var(--cf-surface-2));
    color: var(--cf-text);
    border: 1.5px solid var(--cf-accent);
    border-radius: var(--cf-radius-lg, 12px);
    box-shadow: 0 18px 48px -18px color-mix(in srgb, var(--cf-overlay-dark) 55%, transparent),
        inset 0 2px 0 color-mix(in srgb, var(--cf-overlay-light) 40%, transparent);
    font-family: var(--cf-font-ui);
    animation: cf-coach-in-b-oiym0ot18r var(--cf-dur-base, 200ms) var(--cf-ease, ease) both;
}

@keyframes cf-coach-in-b-oiym0ot18r {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.cf-coach--min[b-oiym0ot18r] {
    width: auto;
    padding: var(--cf-space-2) var(--cf-space-3);
}

/* The opening Mulligan owns the full short edge on mobile. Keep the default ribbon to terse compact copy so the
   seven 68px cards retain the whole safe width; only the disclosed explanation may float over the card body. */
.cf-coach--opening-ribbon[b-oiym0ot18r] {
    top: max(6px, env(safe-area-inset-top, 0px));
    right: max(6px, env(safe-area-inset-right, 0px));
    bottom: auto;
    left: max(6px, env(safe-area-inset-left, 0px)); /* stylelint-disable-line declaration-block-no-redundant-longhand-properties -- explicit safe-edge contract from the opening-ribbon geometry */
    width: auto;
    max-height: 72px;
    padding: 6px 10px;
    overflow: visible;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 4px 10px;
}

.cf-coach--opening-ribbon .cf-coach__bar[b-oiym0ot18r] { gap: var(--cf-space-1); }
.cf-coach--opening-ribbon .cf-coach__bartools[b-oiym0ot18r] { margin-left: var(--cf-space-1); }
.cf-coach--opening-ribbon .cf-coach__icon[b-oiym0ot18r] { width: 44px; height: 44px; }
.cf-coach--opening-ribbon .cf-coach__progress[b-oiym0ot18r],
.cf-coach--opening-ribbon .cf-coach__actions[b-oiym0ot18r] { display: none; }
.cf-coach--opening-ribbon .cf-coach__body[b-oiym0ot18r] {
    position: static;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--cf-space-2);
}
.cf-coach--opening-ribbon .cf-coach__title[b-oiym0ot18r] {
    flex: none;
    margin: 0;
    font-size: var(--cf-text-sm);
    white-space: nowrap;
}
.cf-coach--opening-ribbon .cf-coach__hint[b-oiym0ot18r] {
    min-width: 0;
    margin: 0;
    padding: 3px var(--cf-space-2);
    overflow: hidden;
    font-size: var(--cf-text-xs);
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cf-coach--opening-ribbon .cf-coach__why[b-oiym0ot18r] {
    flex: none;
    min-height: 44px;
    margin: 0;
}
@media (max-width: 560px) {
    .cf-coach--opening-ribbon .cf-coach__title[b-oiym0ot18r] { display: none; }
}

/* Victory in this world is gold (coronation), not semantic success-green. */
.cf-coach--finale[b-oiym0ot18r] {
    border-color: var(--cf-accent);
    box-shadow: 0 18px 48px -18px color-mix(in srgb, var(--cf-overlay-dark) 55%, transparent),
        0 0 0 3px color-mix(in srgb, var(--cf-accent) 26%, transparent);
}

.cf-coach__bar[b-oiym0ot18r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cf-space-3);
}

.cf-coach__chip[b-oiym0ot18r] {
    font-size: var(--cf-text-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cf-text-muted);   /* was --cf-accent-deep gold (~3.4:1 on the panel - fails AA for 11px text) */
}

.cf-coach__bartools[b-oiym0ot18r] {
    display: flex;
    gap: var(--cf-space-1);
}

.cf-coach__icon[b-oiym0ot18r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;          /* comfortable tap target (was 26px - under the 44px guideline) */
    height: 40px;
    padding: 0;
    border: none;
    border-radius: var(--cf-radius-sm, 4px);
    background: color-mix(in srgb, var(--cf-overlay-dark) 4%, transparent);   /* a faint resting affordance */
    color: var(--cf-text-muted);
    line-height: 1;
    cursor: pointer;
    transition: background var(--cf-dur-fast, 120ms) var(--cf-ease), color var(--cf-dur-fast, 120ms) var(--cf-ease);
}

.cf-coach__icon:hover[b-oiym0ot18r] {
    background: color-mix(in srgb, var(--cf-overlay-dark) 9%, transparent);
    color: var(--cf-text);
}

.cf-coach__icon:focus-visible[b-oiym0ot18r] { outline: 2px solid var(--cf-focus); outline-offset: 1px; }
.cf-coach__icon:disabled[b-oiym0ot18r] { opacity: 0.55; cursor: not-allowed; }

.cf-coach__transient-stack[b-oiym0ot18r] {
    display: flex;
    flex-direction: column;
    gap: var(--cf-space-2);
    max-height: min(168px, calc(100dvh - 16px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.cf-coach__transient-stack > :first-child[b-oiym0ot18r] { margin-top: 0; }

.cf-coach__exit-confirm[b-oiym0ot18r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cf-space-2);
    padding: var(--cf-space-3);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-surface-2);
}

.cf-coach__exit-question[b-oiym0ot18r] {
    width: 100%;
    margin: 0;
    font-size: var(--cf-text-sm);
    font-weight: 700;
}

.cf-coach__exit-stay[b-oiym0ot18r],
.cf-coach__exit-leave[b-oiym0ot18r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--cf-space-2) var(--cf-space-3);
    border: 1px solid var(--cf-border-strong);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-surface);
    color: var(--cf-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cf-coach__exit-leave[b-oiym0ot18r] {
    border-color: var(--cf-brand);
    background: var(--cf-brand);
    color: var(--cf-brand-contrast);
}

.cf-coach__exit-stay:focus-visible[b-oiym0ot18r],
.cf-coach__exit-leave:focus-visible[b-oiym0ot18r] { outline: 2px solid var(--cf-focus); outline-offset: 1px; }

.cf-coach__exit-stay:disabled[b-oiym0ot18r],
.cf-coach__exit-leave:disabled[b-oiym0ot18r] { opacity: 0.55; cursor: not-allowed; }

.cf-coach--opening-ribbon .cf-coach__transient-stack[b-oiym0ot18r] {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    max-height: calc(100dvh - max(6px, env(safe-area-inset-top, 0px)) - 72px - 8px - var(--moment-opening-footer-reserve) - env(safe-area-inset-bottom, 0px));
    padding: var(--cf-space-3);
    border: 1px solid var(--cf-accent);
    border-radius: var(--cf-radius-md, 8px);
    background: var(--cf-surface);
    box-shadow: 0 12px 28px -16px color-mix(in srgb, var(--cf-overlay-dark) 65%, transparent);
}

/* Only the read-only disclosed explanation may float over the card body. The exit confirmation is
   interactive, so it stays in flow (the ribbon's compound row grows) and can never cover the
   decision shell's controls. */
.cf-coach--opening-ribbon .cf-coach__transient-stack:has(.cf-coach__exit-confirm)[b-oiym0ot18r] {
    position: static;
    grid-column: 1 / -1;
    max-height: none;
}

.cf-coach__progress[b-oiym0ot18r] {
    height: 4px;
    border-radius: var(--cf-radius-pill, 999px);
    background: color-mix(in srgb, var(--cf-overlay-dark) 10%, transparent);
    overflow: hidden;
}

.cf-coach__progress-fill[b-oiym0ot18r] {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cf-accent);
    transition: width var(--cf-dur-base, 200ms) var(--cf-ease);
}

.cf-coach--finale .cf-coach__progress-fill[b-oiym0ot18r] { background: var(--cf-accent); }

.cf-coach__title[b-oiym0ot18r] {
    margin: 0 0 var(--cf-space-1);
    font-family: var(--cf-font-display);
    font-size: var(--cf-text-lg, 1.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--cf-text);
}

.cf-coach__text[b-oiym0ot18r] {
    margin: 0;
    font-size: var(--cf-text-sm, 0.9rem);
    line-height: 1.5;
    color: var(--cf-text);
    white-space: pre-line;   /* honor the \n paragraph breaks authored in the step body */
}

.cf-coach__hint[b-oiym0ot18r] {
    display: flex;
    align-items: flex-start;
    gap: var(--cf-space-2);
    margin: var(--cf-space-3) 0 0;
    padding: var(--cf-space-2) var(--cf-space-3);
    border-radius: var(--cf-radius-md, 8px);
    background: color-mix(in srgb, var(--cf-accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--cf-accent) 40%, transparent);
    font-size: var(--cf-text-sm, 0.9rem);
    font-weight: 600;
    color: var(--cf-text);
}

/* Collapsed (moment) pill: the hint rides directly under the bar, no big body. */
.cf-coach__hint--min[b-oiym0ot18r] { margin-top: var(--cf-space-1); }

.cf-coach__hint-arrow[b-oiym0ot18r] {
    display: inline-flex;
    align-items: center;
    color: var(--cf-accent-deep);
}

.cf-coach__why[b-oiym0ot18r] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: var(--cf-space-1);
    padding: 0 var(--cf-space-2);
    border: 0;
    border-radius: var(--cf-radius-sm, 4px);
    background: transparent;
    color: var(--cf-text-muted);
    font: inherit;
    font-size: var(--cf-text-xs, 0.8rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--cf-dur-fast, 120ms) var(--cf-ease), color var(--cf-dur-fast, 120ms) var(--cf-ease);
}

.cf-coach__why:hover:not(:disabled)[b-oiym0ot18r] {
    background: color-mix(in srgb, var(--cf-overlay-dark) 5%, transparent);
    color: var(--cf-text);
}

.cf-coach__why:disabled[b-oiym0ot18r] {
    opacity: 0.55;
    cursor: not-allowed;
}

.cf-coach__why:focus-visible[b-oiym0ot18r] { outline: 2px solid var(--cf-focus); outline-offset: 1px; }

.cf-coach__detail[b-oiym0ot18r] {
    margin-top: var(--cf-space-1);
    padding: var(--cf-space-2);
}

.cf-coach__context[b-oiym0ot18r],
.cf-coach__payoff[b-oiym0ot18r],
.cf-coach__correction[b-oiym0ot18r] {
    margin: var(--cf-space-2) 0 0;
    padding: var(--cf-space-2) var(--cf-space-3);
    border-radius: var(--cf-radius-md, 8px);
    font-size: var(--cf-text-sm);
    line-height: 1.4;
}

.cf-coach__context[b-oiym0ot18r] {
    border: 1px solid color-mix(in srgb, var(--cf-accent) 40%, transparent);
    background: color-mix(in srgb, var(--cf-accent) 12%, transparent);
}

.cf-coach__payoff[b-oiym0ot18r] {
    border: 1px solid var(--cf-accent);
    background: color-mix(in srgb, var(--cf-accent) 18%, transparent);
    font-weight: 600;
}

.cf-coach__correction[b-oiym0ot18r] {
    border: 1px solid var(--cf-brand);
    background: color-mix(in srgb, var(--cf-brand) 10%, transparent);
}

.cf-coach__actions[b-oiym0ot18r] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cf-space-2);
    margin-top: var(--cf-space-1);
}

.cf-coach__await[b-oiym0ot18r] {
    font-size: var(--cf-text-xs, 0.8rem);
    font-style: italic;
    color: var(--cf-text-muted);
}

/* The "more lessons coming" tease at the finale - a soft line above the CTAs that gives a reason to return. */
.cf-coach__next[b-oiym0ot18r] {
    width: 100%;
    margin: 0 0 var(--cf-space-1);
    font-size: var(--cf-text-xs, 0.8rem);
    line-height: 1.45;
    color: var(--cf-text-muted);
}

/* Finale CTA buttons use the app's gold/ghost language without navigation-owned anchors. */
.cf-coach__cta[b-oiym0ot18r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: var(--cf-space-2) var(--cf-space-3);
    border-radius: var(--cf-radius-md, 8px);
    border: 1px solid var(--cf-border-strong);
    background: var(--cf-surface);
    color: var(--cf-text);
    font-size: var(--cf-text-sm, 0.9rem);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--cf-dur-fast, 120ms) var(--cf-ease), border-color var(--cf-dur-fast, 120ms) var(--cf-ease);
}

.cf-coach__cta:hover:not(:disabled)[b-oiym0ot18r] { background: var(--cf-surface-2); border-color: var(--cf-accent); }
.cf-coach__cta:focus-visible[b-oiym0ot18r] { outline: 2px solid var(--cf-focus); outline-offset: 1px; }
.cf-coach__cta:disabled[b-oiym0ot18r] { opacity: 0.55; cursor: not-allowed; }

/* Crimson = the system's action colour (every Button Primary). The finale panel is ringed + chipped in gold,
   so a gold CTA camouflages in its own surround; crimson makes the one button we want clicked pop. */
.cf-coach__cta--primary[b-oiym0ot18r] {
    background: var(--cf-brand);
    border-color: var(--cf-brand);
    color: var(--cf-brand-contrast);
}

.cf-coach__cta--primary:hover:not(:disabled)[b-oiym0ot18r] { background: var(--cf-brand-hover); border-color: var(--cf-brand-hover); }

/* The cost-reassurance line under the finale CTAs - quiet, centred. */
.cf-coach__finenote[b-oiym0ot18r] {
    width: 100%;
    margin: var(--cf-space-1) 0 0;
    font-size: var(--cf-text-2xs);
    color: var(--cf-text-muted);
    text-align: center;
}

/* The spotlight ring - the coach's own element, positioned in viewport space from a measured rect, so it
   never fights Blazor's board diff. Non-interactive; glides between steps. */
.cf-spotlight[b-oiym0ot18r] {
    position: fixed;
    z-index: var(--cf-z-sticky);   /* dims the board beneath, sits just under the coach panel */
    pointer-events: none;
    border: 3px solid var(--cf-accent);
    border-radius: var(--cf-radius-md, 8px);
    box-shadow: 0 0 0 9999px color-mix(in srgb, var(--cf-overlay-dark) 32%, transparent),
        0 0 18px 3px color-mix(in srgb, var(--cf-accent) 50%, transparent);
    animation: cf-spotlight-pulse-b-oiym0ot18r 1.6s ease-in-out infinite;
    transition: left var(--cf-dur-base, 200ms) var(--cf-ease), top var(--cf-dur-base, 200ms) var(--cf-ease),
        width var(--cf-dur-base, 200ms) var(--cf-ease), height var(--cf-dur-base, 200ms) var(--cf-ease);
}

/* A label naming the ringed region, pinned inside its top-left corner (so it never clips off-screen
   wherever the ring lands). pointer-events stay off (inherited from the ring), so it never intercepts a
   click on the board beneath. */
.cf-spotlight__label[b-oiym0ot18r] {
    position: absolute;
    top: 6px;
    left: 8px;
    padding: 2px var(--cf-space-2);
    border-radius: var(--cf-radius-pill, 999px);
    background: var(--cf-accent);
    color: var(--cf-accent-contrast);
    font-family: var(--cf-font-ui);
    font-size: var(--cf-text-2xs, 11px);
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 2px 6px -2px color-mix(in srgb, var(--cf-overlay-dark) 50%, transparent);
}

@keyframes cf-spotlight-pulse-b-oiym0ot18r {
    0%, 100% {
        box-shadow: 0 0 0 9999px color-mix(in srgb, var(--cf-overlay-dark) 32%, transparent),
            0 0 12px 2px color-mix(in srgb, var(--cf-accent) 45%, transparent);
    }
    50% {
        box-shadow: 0 0 0 9999px color-mix(in srgb, var(--cf-overlay-dark) 36%, transparent),
            0 0 22px 6px color-mix(in srgb, var(--cf-accent) 70%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cf-coach[b-oiym0ot18r] { animation: none; }
    .cf-spotlight[b-oiym0ot18r] { animation: none; }
    .cf-coach__progress-fill[b-oiym0ot18r], .cf-coach__why[b-oiym0ot18r], .cf-spotlight[b-oiym0ot18r] { transition: none; }
}

/* Phone widths: a slimmer panel that still clears the board's bottom controls when expanded; the player
   can minimize it to a pill if it's ever in the way. */
@media (max-width: 640px) {
    .cf-coach[b-oiym0ot18r] {
        left: 8px;
        right: 8px;
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        width: auto;
        padding: var(--cf-space-3);
    }
    .cf-coach__title[b-oiym0ot18r] { font-size: var(--cf-text-md); }   /* was var(--cf-text-base) - no such token; --cf-text-md is 1rem */
    .cf-coach--moment-mobile[b-oiym0ot18r] { max-height: 136px; overflow: hidden; }
    .cf-coach--moment-mobile .cf-coach__compact-copy[b-oiym0ot18r] { min-width: 0; overflow: hidden; }
    .cf-coach--moment-mobile .cf-coach__title[b-oiym0ot18r] {
        margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .cf-coach--moment-mobile .cf-coach__hint--min[b-oiym0ot18r] {
        display: -webkit-box; margin-top: 0; overflow: hidden; line-height: 1.3;
        -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    }
    .cf-coach.cf-coach--opening-ribbon[b-oiym0ot18r] {
        top: max(6px, env(safe-area-inset-top, 0px));
        right: max(6px, env(safe-area-inset-right, 0px));
        bottom: auto;
        left: max(6px, env(safe-area-inset-left, 0px)); /* stylelint-disable-line declaration-block-no-redundant-longhand-properties -- explicit safe-edge override of the phone dock */
        padding: 6px 10px;
    }
}

@media (max-height: 520px) {
    .cf-coach--landscape-mobile[b-oiym0ot18r] {
        --cf-coach-safe-l: env(safe-area-inset-left, 0px);
        --cf-coach-safe-r: env(safe-area-inset-right, 0px);
        left: max(8px, var(--cf-coach-safe-l));
        bottom: max(8px, env(safe-area-inset-bottom, 0px));
        width: min(clamp(228px, 35vw, 300px), calc(100vw - var(--cf-coach-safe-l) - var(--cf-coach-safe-r) - 16px));
        max-height: calc(100dvh - 16px);
        padding: var(--cf-space-2) var(--cf-space-3);
        overflow: auto;
    }
    .cf-coach--landscape-mobile.cf-coach--moment-mobile[b-oiym0ot18r] {
        max-height: calc(100dvh - 16px);
        overflow: auto;
    }
    .cf-coach--landscape-mobile.cf-coach--moment-mobile .cf-coach__compact-copy[b-oiym0ot18r] { overflow: visible; }
    /* Short landscape finale: the recap paragraph is the flexible line — clamp it so the three
       terminal choices (the point of the panel) stay fully visible without scrolling. */
    .cf-coach--landscape-mobile.cf-coach--finale .cf-coach__body[b-oiym0ot18r] {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }
    .cf-coach--landscape-mobile .cf-coach__title[b-oiym0ot18r] { font-size: var(--cf-text-md); }
    .cf-coach--landscape-mobile .cf-coach__hint--min[b-oiym0ot18r] {
        display: flex;
        overflow: visible;
        -webkit-line-clamp: unset;
    }
}

@media (max-height: 520px), (pointer: coarse) {
    .cf-coach--landscape-mobile .cf-coach__icon[b-oiym0ot18r] {
        min-width: 44px;
        min-height: 44px;
    }
}