@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --cs-primary: #3B82F6;
    --cs-accent: #8b5cf6;
    --cs-cta: #F59E0B;
    --cs-bg: #0B0F1A;
    --cs-surface: #131929;
    --cs-surface-elevated: #1C2540;
    --cs-text: #F1F5F9;
    --cs-muted: #94A3B8;
    --cs-border: #2A3352;
    --cs-shadow-md: 0 4px 6px rgba(0,0,0,.40);
    --cs-shadow-lg: 0 10px 15px rgba(0,0,0,.50);
    /* Injury */
    --cs-out: #EF4444;
    --cs-doubtful: #F97316;
    --cs-questionable: #EAB308;
    --cs-ir: #EF4444;
    --cs-pup: #F97316;
    --cs-probable: #22C55E;
    --cs-active: #22C55E;
    /* Status tints */
    --cs-tint-warning: rgba(245,158,11,0.12);
    --cs-tint-info:    rgba(59,130,246,0.12);
    --cs-tint-success: rgba(34,197,94,0.12);
    --cs-tint-error:   rgba(239,68,68,0.12);
    /* Status text */
    --cs-text-warning:      #FCD34D;
    --cs-text-success:      #4ADE80;
    --cs-text-success-soft: #86EFAC;
    --cs-text-error:        #FCA5A5;
    --cs-text-info:         #93C5FD;
    --cs-text-subtle:       #CBD5E1;
    /* Status borders */
    --cs-border-warning: #D97706;
    --cs-border-success: #22C55E;
    --cs-border-error:   #EF4444;
    /* Grade badges */
    --cs-grade-a: #16a34a;
    --cs-grade-b: #ca8a04;
    --cs-grade-c: #ea580c;
    --cs-grade-d: #dc2626;
    /* Defense analysis bars */
    --cs-bar-low:       #86efac;
    --cs-bar-medium:    #fde047;
    --cs-bar-high:      #fb923c;
    --cs-bar-very-high: #f87171;
    /* Leaderboard medals */
    --cs-medal-1: #FBBF24;
    --cs-medal-2: #6B7280;
    --cs-medal-3: #92400E;
    /* Crew highlight */
    --cs-highlight-blue: #1e3a5f;
    --cs-primary-dark: #2563eb;
}

html {
    scroll-behavior: smooth;
}

html, body {
    font-family: 'Fira Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--cs-text);
}

/* The dot pattern belongs on `html` ALONE. Declared on `html, body` it was rasterised TWICE
   across the whole scrollable document: html's background propagates to the canvas, and body
   then painted an identical copy on top as an ordinary element background. The two were
   pixel-aligned — under MudBlazor's reset body has margin 0 and padding 0, so both origins
   coincide — which is why the duplication was invisible and why dropping one changes nothing
   on screen. It is a full-page gradient fill per tile, removed for free. */
html {
    background: var(--cs-bg);
    background-image: radial-gradient(circle, rgba(255,255,255,0.022) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* ── Question card ───────────────────────────────────────────────────── */
.cs-qcard {
    background: var(--cs-surface);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--cs-shadow-md);
    transition: box-shadow 200ms ease, transform 150ms ease;
    position: relative;
}

/* Status-coded left accent */
@keyframes cs-card-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Open cards: pulse lives on ::before so hover never touches the card animation */
.cs-qcard-open { animation: cs-card-enter 300ms ease-out backwards; box-shadow: var(--cs-shadow-md); }
.cs-qcard-open::before {
    content: ''; position: absolute;
    left: 0; top: 6px; bottom: 6px; width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--cs-primary);
}
.cs-qcard-threshold    { animation: cs-card-enter 300ms ease-out backwards; box-shadow: inset 3px 0 0 var(--cs-border-warning), var(--cs-shadow-md); }
.cs-qcard-resolved     { animation: cs-card-enter 300ms ease-out backwards; box-shadow: inset 3px 0 0 var(--cs-text-success), var(--cs-shadow-md); }
.cs-qcard-insufficient { animation: cs-card-enter 300ms ease-out backwards; box-shadow: inset 3px 0 0 var(--cs-border), var(--cs-shadow-md); }

/* Card hover is desktop-only. A touch device has no hover to give, and the lift used to
   carry `will-change: transform` on .cs-qcard itself — which promotes EVERY card in the
   feed to its own compositing layer. Twenty a page, up to a hundred once FeedState
   restores five, was past the Android WebView's tile budget: the compositor outran the
   rasteriser and the feed checkerboarded to bare background while scrolling. */
@media (hover: hover) {
    .cs-qcard:hover              { box-shadow: var(--cs-shadow-lg); transform: translateY(-2px); }
    .cs-qcard-open:hover         { box-shadow: var(--cs-shadow-lg); }
    .cs-qcard-threshold:hover    { box-shadow: inset 3px 0 0 var(--cs-border-warning), var(--cs-shadow-lg); }
    .cs-qcard-resolved:hover     { box-shadow: inset 3px 0 0 var(--cs-text-success), var(--cs-shadow-lg); }
    .cs-qcard-insufficient:hover { box-shadow: inset 3px 0 0 var(--cs-border), var(--cs-shadow-lg); }
}

/* Badges row */
.cs-qcard-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.cs-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cs-badge-boosted  { background: var(--cs-tint-warning); color: var(--cs-text-warning); border: 1px solid var(--cs-border-warning); }
.cs-badge-bucket   { background: var(--cs-tint-info); color: var(--cs-text-info); border: 1px solid #1D4ED8; }
.cs-badge-sf       { background: rgba(139,92,246,0.15); color: #C4B5FD; border: 1px solid #6D28D9; }
.cs-badge-coaskers { background: var(--cs-tint-success); color: var(--cs-text-success-soft); border: 1px solid #166534; }
/* Visually distinct from the co-asker badge on purpose: it makes the daily-puzzle framing legible
   rather than passing house content off as community activity. Muted rather than loud — it is a
   provenance note, not a promotion. */
.cs-badge-drop { background: var(--cs-tint-info); color: var(--cs-text-info); border: 1px solid var(--cs-border); }

/* Injury badges */
.cs-ibadge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    margin-left: 4px;
}
.cs-ibadge-out, .cs-ibadge-ir { background: var(--cs-out); }
.cs-ibadge-doubtful, .cs-ibadge-pup { background: var(--cs-doubtful); }
.cs-ibadge-questionable { background: var(--cs-questionable); }
.cs-ibadge-probable, .cs-ibadge-active { background: var(--cs-active); }

/* Compact players row */
.cs-players-compact { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

.cs-player-compact { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; }
.cs-player-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.cs-portrait-sm {
    width: 52px; height: 52px; border-radius: 50%;
    overflow: hidden; background: var(--cs-border);
    display: flex; align-items: center; justify-content: center;
}
.cs-portrait-img { width: 100%; height: 100%; object-fit: cover; }
.cs-player-name-sm { font-size: 12px; font-weight: 600; text-align: center; max-width: 72px; }
.cs-player-opp { font-size: 10px; color: var(--cs-muted); text-align: center; }
.cs-vs { font-size: 13px; font-weight: 500; color: var(--cs-muted); padding: 0 4px; align-self: center; }

/* Footer row */
.cs-qcard-footer { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }

/* Time chips */
.cs-time-chip {
    padding: 3px 10px; border-radius: 9999px; font-size: 12px; font-weight: 600;
}
/* The pulse itself is on ::after — see cs-live-pulse. */
.cs-time-urgent  { background: var(--cs-tint-error); color: var(--cs-text-error); position: relative; }
.cs-time-warning { background: var(--cs-tint-warning); color: var(--cs-text-warning); position: relative; }
.cs-time-normal  { background: var(--cs-surface-elevated); color: var(--cs-muted); }

.cs-freshness { font-size: 11px; color: var(--cs-muted); }
.cs-freshness-sm { font-size: 10px; color: var(--cs-muted); margin-top: 4px; text-align: center; }

/* Vote open button */
.cs-vote-open-btn {
    width: 100%; padding: 10px 0; border-radius: 8px;
    background: var(--cs-primary); color: #fff;
    border: none; font-size: 15px; font-weight: 600;
    cursor: pointer; transition: opacity 150ms ease, box-shadow 150ms ease;
}
.cs-vote-open-btn:hover { opacity: .9; box-shadow: 0 0 20px rgba(59,130,246,0.4); }
.cs-vote-open-btn:focus-visible { outline: 3px solid rgba(59,130,246,.5); }

/* Your question indicator */
.cs-your-question {
    text-align: center; font-size: 13px; font-weight: 500;
    color: var(--cs-muted); padding: 8px 0;
    border: 1px dashed var(--cs-border); border-radius: 8px;
}

/* Injury warning banner */
.cs-injury-banner {
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--cs-tint-warning); border-left: 4px solid var(--cs-border-warning);
    padding: 10px 12px; border-radius: 6px;
    font-size: 13px; color: var(--cs-text-warning);
    margin-bottom: 14px;
}

/* ── Player vote cards (expanded voting state) ───────────────────────── */
.cs-player-cards {
    display: flex; gap: 12px; margin-bottom: 16px;
}
.cs-player-cards-wrap { flex-wrap: wrap; }

.cs-pvcard {
    flex: 1; min-width: 120px; max-width: 200px;
    border: 1px solid var(--cs-border); border-radius: 10px;
    padding: 16px 12px; text-align: center;
    cursor: pointer; transition: all 200ms ease;
    background: var(--cs-surface); position: relative; user-select: none;
}
.cs-pvcard:hover:not(.cs-pvcard-selected) { border-color: #3B82F6; box-shadow: 0 0 0 1px #3B82F6; }
.cs-pvcard:focus-visible { outline: 3px solid rgba(59,130,246,.5); }
@keyframes cs-player-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.05); }
    100% { transform: scale(1); }
}
.cs-pvcard-selected {
    border: 3px solid var(--cs-primary); background: rgba(59,130,246,0.10);
    animation: cs-player-pop 180ms ease-out;
}
.cs-pvcard-dimmed { opacity: .55; }

.cs-pvcard-portrait-wrap { position: relative; display: inline-block; margin-bottom: 8px; }
.cs-pvcard-portrait {
    width: 80px; height: 80px; border-radius: 50%;
    object-fit: cover; background: var(--cs-border); display: block;
}
.cs-check-circle {
    position: absolute; top: 0; right: 0;
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--cs-primary);
    display: flex; align-items: center; justify-content: center;
}

.cs-pvcard-name { font-size: 15px; font-weight: 700; color: var(--cs-text); margin-bottom: 2px; min-height: 2.5em; display: flex; align-items: flex-end; justify-content: center; }
.cs-pvcard-meta { font-size: 12px; color: var(--cs-muted); margin-bottom: 6px; }
.cs-pvcard-opp { margin-left: 4px; }
.cs-matchup-nudge { font-size: 12px; text-align: center; margin-bottom: 10px; }
.cs-matchup-nudge a { color: var(--cs-primary); text-decoration: none; font-weight: 600; }
.cs-matchup-nudge a:hover { text-decoration: underline; }
.cs-injury-desc { font-size: 12px; color: var(--cs-muted); margin-top: 4px; }

/* Pick counter */
.cs-pick-counter {
    text-align: center; font-size: 14px; font-weight: 500;
    color: var(--cs-text-subtle); margin-bottom: 10px;
}

/* Submit button */
.cs-submit-btn {
    width: 100%; padding: 12px 0; border-radius: 8px;
    background: var(--cs-border); color: var(--cs-muted);
    border: none; font-size: 15px; font-weight: 600;
    cursor: not-allowed; margin-bottom: 8px;
    transition: background 150ms ease;
}
.cs-submit-btn-ready {
    background: var(--cs-cta); color: #1E293B; cursor: pointer;
    transition: opacity 150ms ease, box-shadow 150ms ease;
}
.cs-submit-btn-ready:hover { opacity: .9; box-shadow: 0 0 20px rgba(245,158,11,0.4); }
.cs-submit-btn:focus-visible { outline: 3px solid rgba(245,158,11,.5); }

/* Cancel button */
.cs-cancel-btn {
    width: 100%; padding: 8px 0; border-radius: 8px;
    background: transparent; color: var(--cs-muted);
    border: 1px solid var(--cs-border); font-size: 14px;
    cursor: pointer; transition: background 150ms ease;
}
.cs-cancel-btn:hover { background: var(--cs-surface-elevated); }

/* ── Post-vote distribution ──────────────────────────────────────────── */
.cs-distribution { margin-top: 8px; }

.cs-dist-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px;
    padding-left: 11px;
}
.cs-dist-name { font-size: 13px; font-weight: 500; width: 120px; flex-shrink: 0; display: flex; align-items: center; }
.cs-dist-name-yours { color: var(--cs-primary); font-weight: 700; }
.cs-dist-track {
    flex: 1; height: 8px; background: var(--cs-surface-elevated); border-radius: 4px; overflow: hidden;
}
.cs-dist-bar {
    height: 100%; border-radius: 4px;
    transition: width 600ms cubic-bezier(.34,1.56,.64,1);
}
.cs-dist-pct { font-size: 14px; font-weight: 700; width: 40px; text-align: right; flex-shrink: 0; }
.cs-dist-total { font-size: 12px; color: var(--cs-muted); margin-top: 6px; }
.cs-threshold-caveat {
    font-size: 12px; color: var(--cs-muted); margin-top: 8px;
    padding: 6px 10px; background: var(--cs-surface); border-radius: 6px;
    border-left: 3px solid var(--cs-border);
}

/* ── Results page ────────────────────────────────────────────────────── */
.cs-results-section { margin-bottom: 24px; }
.cs-results-section-title {
    font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--cs-muted); margin-bottom: 12px;
}

/* Correct/incorrect result highlight */
.cs-dist-row-correct { border-left: 3px solid var(--cs-text-success); padding-left: 8px; border-radius: 2px; }
.cs-dist-row-incorrect { opacity: .7; }
.cs-dist-correct-label {
    font-size: 11px; font-weight: 700; color: var(--cs-text-success); margin-left: 4px;
}
.cs-dist-yours-label {
    font-size: 11px; font-weight: 600; color: var(--cs-primary); margin-left: 4px;
}

/* Crowd-Beater callouts */
.cs-crowd-beater-note {
    font-size: 12px; color: var(--cs-muted); margin-top: 8px;
    padding: 6px 10px; background: var(--cs-surface); border-radius: 6px;
    border-left: 3px solid var(--cs-primary);
}
.cs-crowd-beater-callout {
    font-size: 13px; font-weight: 600; color: var(--cs-text-success);
    padding: 8px 12px; background: var(--cs-tint-success, rgba(21,128,61,.08));
    border-left: 4px solid var(--cs-text-success); border-radius: 6px;
}

/* Below-threshold caveat (amber) */
.cs-threshold-caveat-amber {
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--cs-tint-warning); border-left: 4px solid var(--cs-border-warning);
    padding: 10px 12px; border-radius: 6px;
    font-size: 13px; color: var(--cs-text-warning); margin-top: 12px;
}

/* Zero-vote state */
.cs-zero-votes {
    text-align: center; padding: 24px 16px;
    background: var(--cs-surface); border-radius: 8px;
    font-size: 14px; color: var(--cs-muted);
}

/* Pro gate wrapper */
.cs-pro-gate-wrap { position: relative; border-radius: 8px; overflow: hidden; }
.cs-pro-blur-panel { filter: blur(5px); pointer-events: none; user-select: none; min-height: 150px; }
.cs-pro-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: rgba(11,15,26,.88);
    gap: 12px; padding: 16px;
}
.cs-pro-overlay-title { font-size: 16px; font-weight: 700; color: var(--cs-text); text-align: center; }
.cs-pro-overlay-desc { font-size: 13px; color: var(--cs-muted); text-align: center; max-width: 260px; }
.cs-pro-overlay-btn {
    padding: 10px 24px; border-radius: 8px;
    background: var(--cs-cta); color: #1E293B;
    border: none; font-size: 14px; font-weight: 700; cursor: pointer;
    transition: opacity 150ms ease, box-shadow 150ms ease;
}
.cs-pro-overlay-btn:hover { opacity: .9; box-shadow: 0 0 20px rgba(245,158,11,0.45); }

/* Matchup stats */
.cs-matchup-player { margin-bottom: 16px; }
.cs-matchup-player-name { font-size: 14px; font-weight: 700; margin-bottom: 6px; }
.cs-matchup-meta { font-size: 12px; color: var(--cs-muted); margin-bottom: 4px; }
.cs-matchup-avg {
    font-size: 22px; font-weight: 800; color: var(--cs-primary);
    display: inline-block; margin-right: 6px;
}
.cs-matchup-label { font-size: 12px; color: var(--cs-muted); }
.cs-matchup-weekly { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cs-matchup-week-cell {
    padding: 4px 8px; background: var(--cs-surface-elevated); border-radius: 4px;
    font-size: 11px; text-align: center;
}
.cs-matchup-week-label { color: var(--cs-muted); display: block; }
.cs-matchup-week-val { font-weight: 700; }
.cs-matchup-no-data { font-size: 13px; color: var(--cs-muted); font-style: italic; }

/* Matchup player card (Phase 11.6) */
.cs-matchup-player-card {
    padding: 12px 14px; border: 1px solid var(--cs-border); border-radius: 8px;
    margin-bottom: 12px; background: var(--cs-surface);
}
.cs-matchup-player-header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 6px; }
.cs-matchup-player-info { flex: 1; }
.cs-matchup-player-name { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.cs-matchup-player-meta { font-size: 12px; color: var(--cs-muted); }

/* Grade badge */
.cs-grade-badge-wrap { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.cs-grade-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 6px;
    font-size: 16px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.cs-grade-a { background: var(--cs-grade-a); box-shadow: 0 0 12px rgba(22,163,74,0.55); }
.cs-grade-b { background: var(--cs-grade-b); box-shadow: 0 0 8px rgba(202,138,4,0.40); }
.cs-grade-c { background: var(--cs-grade-c); box-shadow: 0 0 8px rgba(234,88,12,0.35); }
.cs-grade-d { background: var(--cs-grade-d); box-shadow: 0 0 8px rgba(220,38,38,0.35); }
.cs-grade-unknown { background: #475569; }
.cs-grade-computing { background: #2A3352; color: #94a3b8; font-size: 20px; letter-spacing: -2px; }
.cs-grade-low-confidence { font-size: 10px; color: var(--cs-text-warning); margin-top: 3px; font-style: italic; text-align: center; }

/* Prior-season data notice */
.cs-prior-season-notice {
    font-size: 12px; color: var(--cs-muted);
    background: color-mix(in srgb, var(--cs-primary) 8%, transparent);
    border-left: 3px solid var(--cs-primary);
    border-radius: 0 5px 5px 0; padding: 6px 10px; margin-bottom: 10px;
}

/* Insight text */
.cs-matchup-insight { font-size: 13px; color: var(--cs-text); margin: 4px 0 4px; line-height: 1.4; }
.cs-matchup-insight-secondary { font-size: 12px; color: var(--cs-muted); margin: 0 0 8px; line-height: 1.4; }
/* Phase 21.10 — recent fantasy production: per-game log (oldest→newest) + window average, in the
   question's scoring bucket. The headline baseline; the avg is pushed to the end of the row. */
.cs-matchup-recent { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 8px; font-size: 12px; }
.cs-matchup-recent-label { color: var(--cs-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.cs-matchup-recent-log { color: var(--cs-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-matchup-recent-avg { margin-left: auto; color: var(--cs-accent); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* "pts" / "pts avg" unit — muted + lighter so the numbers keep the visual weight. */
.cs-matchup-recent-unit { color: var(--cs-muted); font-weight: 400; font-size: 11px; }
/* Phase 11.2 — injury adjustment reason / own-status warning. Full-width line that
   wraps (overflow-wrap) so a long two-reason note never crushes the grade badge. */
.cs-matchup-injury-note { font-size: 11px; color: var(--cs-text-warning); margin: 2px 0 4px; line-height: 1.35; font-style: italic; overflow-wrap: anywhere; }

/* More stats toggle */
.cs-more-stats-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border: 1px solid var(--cs-border); border-radius: 6px;
    background: var(--cs-surface); cursor: pointer; font-size: 13px; color: var(--cs-muted);
    width: 100%; margin-top: 4px; text-align: left; min-height: 44px;
}
.cs-more-stats-toggle:hover { background: var(--cs-surface-elevated); }

/* More stats sub-sections */
.cs-more-stats-section {
    margin-top: 10px; padding: 10px 12px;
    background: var(--cs-surface); border-radius: 6px; border: 1px solid var(--cs-border);
}
.cs-more-stats-section-title {
    font-size: 11px; font-weight: 700; color: var(--cs-muted);
    text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px;
}

/* Defense bars */
.cs-def-week-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.cs-def-week-label { font-size: 11px; color: var(--cs-muted); width: 32px; flex-shrink: 0; }
.cs-def-bar-track { flex: 1; background: var(--cs-border); border-radius: 2px; height: 10px; overflow: hidden; }
.cs-def-bar-fill { height: 100%; border-radius: 2px; }
/* Defense bar color = favorability for the player (not points magnitude — that's the bar length).
   Generous defense = smash spot (green) … stingy defense = tough matchup (red). */
.cs-def-bar-favorable  { background: var(--cs-bar-low); }       /* green  */
.cs-def-bar-lean-fav   { background: var(--cs-bar-medium); }    /* yellow */
.cs-def-bar-lean-tough { background: var(--cs-bar-high); }      /* orange */
.cs-def-bar-tough      { background: var(--cs-bar-very-high); } /* red    */
/* Kicker FG accuracy rows */
.cs-k-accuracy-row  { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
/* margin-right:auto on the label pushes the value + detail to the right edge, so the kicker rows
   right-align to match the usage/DST sections instead of left-packing into fixed columns. */
.cs-k-accuracy-label { font-size: 12px; color: var(--cs-muted); margin-right: auto; }
.cs-k-accuracy-val  { font-size: 12px; font-weight: 700; flex-shrink: 0; }
.cs-k-accuracy-made { font-size: 11px; color: var(--cs-muted); flex-shrink: 0; }
.cs-k-accuracy-great { color: var(--cs-bar-low-text, #16a34a); }
.cs-k-accuracy-ok    { color: var(--cs-bar-medium-text, #ca8a04); }
.cs-k-accuracy-poor  { color: var(--cs-bar-high-text, #ea580c); }
.cs-k-accuracy-none  { color: var(--cs-muted); }
.cs-def-week-val { font-size: 11px; font-weight: 700; color: var(--cs-text); width: 34px; flex-shrink: 0; text-align: right; }
.cs-def-weighted-avg { font-size: 12px; color: var(--cs-muted); margin-top: 6px; }

/* Opposing-defense sub-labels + EPA-allowed rows (Phase 21.5d) */
.cs-def-subtitle { font-size: 11px; color: var(--cs-muted); margin: -4px 0 8px; }
.cs-def-epa-subtitle {
    font-size: 11px; font-weight: 700; color: var(--cs-muted);
    text-transform: uppercase; letter-spacing: .05em; margin: 10px 0 6px;
}
.cs-def-epa-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.cs-def-epa-label { font-size: 12px; color: var(--cs-muted); width: 36px; flex-shrink: 0; }
.cs-def-epa-val { font-size: 12px; font-weight: 700; width: 46px; flex-shrink: 0; text-align: right; font-variant-numeric: tabular-nums; }
.cs-def-epa-rank { font-size: 11px; font-weight: 600; color: var(--cs-muted); width: 34px; flex-shrink: 0; }
.cs-def-epa-word { font-size: 11px; font-weight: 600; }
.cs-def-epa-generous { color: var(--cs-bar-low-text, #16a34a); }       /* green — favorable for the player */
.cs-def-epa-stingy   { color: var(--cs-bar-very-high-text, #ef4444); } /* red — tough matchup */
.cs-def-epa-neutral  { color: var(--cs-muted); }
/* Phase 21.10 — spelled-out jargon labels keep the acronym as a muted, smaller suffix so power users
   still recognise "(WOPR)" while everyone can read the plain name (works on mobile; no hover needed). */
.cs-stat-acr { font-size: 10px; font-weight: 400; opacity: 0.7; }

/* Usage trend */
.cs-usage-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.cs-usage-label { font-size: 12px; color: var(--cs-muted); }
.cs-usage-trend { font-size: 12px; font-weight: 600; color: var(--cs-text); }
/* Fixed-width direction column so the up/down/flat glyphs line up vertically across rows,
   independent of the variable-width percent string to their left. SVG (not Unicode) for
   consistent metrics + baseline. */
.cs-usage-arrow { display: inline-flex; justify-content: center; align-items: center; width: 14px; margin-left: 6px; }
.cs-usage-arrow svg { width: 9px; height: 9px; display: block; }
/* Trend direction color = good/bad for the player (more usage is always better here):
   rising = green, falling = red, flat = muted (no signal). */
.cs-trend-up   { color: var(--cs-bar-low-text, #16a34a); }
.cs-trend-down { color: var(--cs-bar-very-high-text, #ef4444); }
.cs-trend-flat { color: var(--cs-muted); }

/* Game context */
.cs-game-ctx { display: flex; flex-wrap: wrap; gap: 16px; }
.cs-game-ctx-item { display: flex; flex-direction: column; }
.cs-game-ctx-label { font-size: 11px; color: var(--cs-muted); text-transform: uppercase; letter-spacing: .04em; }
.cs-game-ctx-value { font-size: 15px; font-weight: 700; color: var(--cs-text); }
.cs-def-venue-tag { font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; margin-right: 4px; flex-shrink: 0; }
.cs-def-venue-h { background: #1E3A8A; color: var(--cs-text-info); border: 1px solid var(--cs-primary); }
.cs-def-venue-a { background: var(--cs-surface-elevated); color: var(--cs-text-subtle); border: 1px solid #475569; }
.cs-def-venue-split { font-size: 11px; margin-top: 2px; }
.cs-def-venue-sep { color: var(--cs-muted); }
.cs-stack-favorable { color: var(--cs-text-success); }
.cs-stack-weak { color: var(--cs-text-error); }
.cs-line-move-up { color: var(--cs-text-success); }
.cs-line-move-down { color: var(--cs-text-error); }
.cs-weather-adverse { color: var(--cs-text-error); font-weight: 600; }
.cs-weather-ok { color: var(--cs-muted); }

/* My Questions list */
.cs-myq-card {
    background: var(--cs-surface); border-radius: 10px; padding: 16px 20px;
    margin-bottom: 12px; box-shadow: var(--cs-shadow-md);
}
.cs-myq-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.cs-myq-players { font-size: 15px; font-weight: 600; flex: 1; }
.cs-myq-footer { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.cs-myq-vote-count { font-size: 12px; color: var(--cs-muted); }

.cs-myq-refresh-chip {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 10px 16px; margin-bottom: 16px;
    background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
    border-radius: 8px; cursor: pointer;
    color: var(--cs-cta); font-size: 13px; font-weight: 600;
    transition: background 150ms ease;
}
.cs-myq-refresh-chip:hover { background: rgba(245,158,11,0.2); }

.cs-myq-section-header {
    display: flex; align-items: center; gap: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--cs-cta); margin-bottom: 14px;
}
.cs-myq-section-header::before,
.cs-myq-section-header::after { content: ''; flex: 1; height: 1px; background: rgba(245,158,11,0.3); }

.cs-myq-section-divider { height: 1px; background: var(--cs-border); margin: 20px 0 14px; }

/* ── Payment failure banner ──────────────────────────────────────────── */
.cs-payment-failure-banner {
    background: var(--cs-tint-error); border-bottom: 1px solid var(--cs-border-error);
    color: var(--cs-text-error); font-size: 13px; font-weight: 500;
    display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 8px 16px;
}
.cs-payment-failure-cta {
    background: none; border: none; color: var(--cs-text-error);
    font-size: 13px; font-weight: 700; cursor: pointer;
    text-decoration: underline; padding: 0;
}

/* ── Pricing page ────────────────────────────────────────────────────── */
.cs-pricing-trial-badge {
    display: inline-block; padding: 8px 18px; border-radius: 9999px;
    background: var(--cs-tint-warning); color: var(--cs-text-warning); border: 1px solid var(--cs-border-warning);
    font-size: 14px; font-weight: 700; margin-bottom: 24px; text-align: center; width: 100%;
}
.cs-pricing-card {
    border-radius: 12px; padding: 24px; margin-bottom: 16px;
}
.cs-pricing-card-primary {
    border: 2px solid #3B82F6; box-shadow: 0 4px 12px rgba(59,130,246,.25);
    background: var(--cs-surface);
}
.cs-pricing-card-secondary {
    border: 1px solid var(--cs-border); background: var(--cs-bg);
}
.cs-pricing-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.cs-pricing-price { font-size: 28px; font-weight: 800; color: var(--cs-primary); margin-bottom: 16px; }
.cs-pricing-period { font-size: 16px; font-weight: 400; color: var(--cs-muted); }
.cs-pricing-save { font-size: 13px; color: var(--cs-text-success); font-weight: 600; margin-bottom: 8px; }
.cs-pricing-season-note { font-size: 13px; color: var(--cs-muted); margin-bottom: 16px; }
.cs-pricing-features {
    list-style: none; padding: 0; margin: 0 0 20px;
}
.cs-pricing-features li {
    font-size: 14px; color: var(--cs-text); padding: 5px 0;
    padding-left: 22px; position: relative;
}
.cs-pricing-features li::before {
    content: "✓"; position: absolute; left: 0;
    color: var(--cs-text-success); font-weight: 700;
}
.cs-pricing-cta-primary {
    width: 100%; padding: 14px; border-radius: 8px;
    background: var(--cs-cta); color: #1E293B;
    border: none; font-size: 16px; font-weight: 700; cursor: pointer;
    transition: opacity 150ms ease; margin-bottom: 8px;
}
.cs-pricing-cta-primary:hover { opacity: .9; }
.cs-pricing-cta-primary:disabled { opacity: .5; cursor: not-allowed; }
.cs-pricing-cta-secondary {
    width: 100%; padding: 12px; border-radius: 8px;
    background: transparent; color: var(--cs-primary);
    border: 1.5px solid var(--cs-primary); font-size: 15px; font-weight: 600;
    cursor: pointer; transition: background 150ms ease; margin-top: 12px;
}
.cs-pricing-cta-secondary:hover { background: rgba(59,130,246,0.10); }
.cs-pricing-cta-secondary:disabled { opacity: .5; cursor: not-allowed; }
.cs-pricing-fine-print { font-size: 12px; color: var(--cs-muted); text-align: center; margin: 0; }
.cs-pricing-divider { border: none; border-top: 1px solid var(--cs-border); margin: 24px 0; }
.cs-pricing-credits-section { padding: 0 4px 24px; }
.cs-pricing-credits-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.cs-pricing-credits-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cs-pricing-boost-btn {
    /* display:block is load-bearing — the UA/MudBlazor button reset lays children out in a
       row, which blockifies .cs-pricing-boost-save and rendered "3-pack — $4.99Save $1"
       with the chip jammed against the price instead of on its own line. */
    display: block;
    flex: 1; min-width: 140px; padding: 12px 16px; border-radius: 8px;
    background: var(--cs-surface); color: var(--cs-text);
    border: 1.5px solid var(--cs-border); font-size: 14px; font-weight: 600;
    cursor: pointer; transition: border-color 150ms ease, background 150ms ease;
    position: relative; text-align: center;
}
.cs-pricing-boost-btn:hover { border-color: var(--cs-primary); background: var(--cs-surface-elevated); }
.cs-pricing-boost-btn:disabled { opacity: .5; cursor: not-allowed; }
.cs-pricing-boost-btn-pack { border-color: #D97706; }
.cs-pricing-boost-save {
    display: block; font-size: 11px; font-weight: 700;
    color: var(--cs-text-warning); margin-top: 2px;
}

/* ── Pro gate modal ───────────────────────────────────────────────────── */
.cs-pro-gate-modal { max-width: 400px; text-align: center; }
.cs-pro-gate-close {
    position: absolute; top: 16px; right: 16px;
    background: none; border: none; cursor: pointer;
    color: var(--cs-muted); padding: 4px;
    border-radius: 4px; transition: color 150ms ease;
}
.cs-pro-gate-close:hover { color: var(--cs-text); }
.cs-modal { position: relative; }
.cs-pro-gate-lock { margin-bottom: 12px; }
.cs-pro-gate-headline {
    font-size: 18px; font-weight: 700; color: var(--cs-text);
    margin-bottom: 10px;
}
.cs-pro-gate-copy { font-size: 14px; color: var(--cs-muted); margin-bottom: 20px; line-height: 1.5; }
.cs-pro-gate-cta {
    width: 100%; padding: 13px; border-radius: 8px;
    background: var(--cs-cta); color: #1E293B;
    border: none; font-size: 15px; font-weight: 700; cursor: pointer;
    transition: opacity 150ms ease; margin-bottom: 12px;
}
.cs-pro-gate-cta:hover { opacity: .9; }
.cs-pro-gate-cta:disabled { opacity: .5; cursor: not-allowed; }
.cs-pro-gate-pricing-link {
    display: block; font-size: 13px; color: var(--cs-primary);
    text-decoration: none; font-weight: 600;
}
.cs-pro-gate-pricing-link:hover { text-decoration: underline; }

/* ── Billing result pages ─────────────────────────────────────────────── */
.cs-billing-result-icon { margin: 0 auto 20px; display: flex; justify-content: center; }
.cs-billing-result-icon-success { color: var(--cs-text-success); }

/* ── Boost buy section (no credits) ──────────────────────────────────── */
.cs-boost-buy-section {
    padding: 14px; background: var(--cs-surface); border-radius: 8px;
    margin-bottom: 14px; border: 1px solid var(--cs-border);
}
.cs-boost-buy-title { font-size: 13px; font-weight: 600; margin-bottom: 10px; color: var(--cs-text); }
.cs-boost-buy-row { display: flex; gap: 8px; }

/* Status badges */
.cs-status-open        { background: var(--cs-tint-info); color: var(--cs-text-info); }
.cs-status-thresholdmet { background: var(--cs-tint-success); color: var(--cs-text-success-soft); }
.cs-status-resolved    { background: var(--cs-tint-success); color: var(--cs-text-success); }
.cs-status-resolvedinsufficient { background: var(--cs-tint-warning); color: var(--cs-text-warning); }
.cs-status-badge {
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 9999px; text-transform: uppercase;
}

/* ── Boost button (My Questions list) ───────────────────────────────── */
.cs-boost-btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 6px;
    background: var(--cs-tint-warning); color: var(--cs-text-warning);
    border: 1px solid var(--cs-border-warning);
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: background 150ms ease, opacity 150ms ease;
    flex-shrink: 0;
}
.cs-boost-btn:hover { background: rgba(245,158,11,0.25); }
.cs-boost-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Credit balance chip (nav) ───────────────────────────────────────── */
.cs-credit-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 9999px;
    background: var(--cs-tint-warning); color: var(--cs-text-warning);
    border: 1px solid var(--cs-border-warning);
    font-size: 13px; font-weight: 700;
    flex-shrink: 0;
    transition: box-shadow 150ms ease;
}
.cs-credit-chip:hover { box-shadow: 0 0 12px rgba(245,158,11,0.45); }

/* ── Error boundary recovery pane ────────────────────────────────────── */
/* Shown when a component throws during render. Deliberately calm and branded: on mobile this
   replaces what would otherwise be a silently frozen app, so it has to look like a considered
   state rather than a crash. */
.cs-error-pane {
    max-width: 460px;
    margin: 48px auto;
    padding: 32px 24px;
    text-align: center;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    box-shadow: var(--cs-shadow-md);
}
.cs-error-pane-icon { color: var(--cs-text-warning); margin-bottom: 12px; }
.cs-error-pane-title { font-size: 20px; font-weight: 700; color: var(--cs-text); margin: 0 0 8px; }
.cs-error-pane-body { font-size: 14px; color: var(--cs-muted); margin: 0 0 20px; line-height: 1.5; }
.cs-error-pane-actions { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.cs-error-pane-btn {
    padding: 10px 22px; border-radius: 8px; border: none; cursor: pointer;
    background: var(--cs-primary); color: #fff; font-size: 15px; font-weight: 600;
}
.cs-error-pane-link { color: var(--cs-muted); font-size: 14px; text-decoration: none; }
.cs-error-pane-ref { margin: 18px 0 0; font-size: 11px; color: var(--cs-muted); }
.cs-error-pane-ref code { font-size: 11px; color: var(--cs-muted); }

/* ── Top nav bar ─────────────────────────────────────────────────────── */
/* Frosted on every device, touch included. This was briefly gated to pointer devices on the
   theory that a position:sticky header has its backdrop change every scroll frame, so the
   blur must be recomputed every frame. That much is true — but it was not what emptied the
   feed while scrolling. Correctly sized headshots fixed that on their own (see HeadshotImage),
   and with them in place, gating the blur measured no difference at all: 0.0% blank frames
   either way, three cold-start trials each on a Pixel 6 Pro. No performance case left, so the
   design stands. Kept in a class rather than the inline style it used to live in, because an
   inline background would outrank the class. */
.cs-topnav {
    background: rgba(19,25,41,0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ── Nav activity badge (My Questions unseen count) ─────────────────── */
.cs-nav-badge {
    position: absolute; top: -6px; right: -10px;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9999px;
    background: var(--cs-cta); color: #fff;
    font-size: 11px; font-weight: 700; line-height: 18px;
    text-align: center; pointer-events: none;
    border: 1.5px solid rgba(255,255,255,0.15);
}
/* On the hamburger the badge sits top-right of the button */
.cs-hamburger-badge { top: 2px; right: 2px; }

/* In-flow variant, used for the badges that sit inside a MudMenuItem row rather than pinned to
   a corner. It MUST be `relative`, not `static`. The pulse ring is an absolutely-positioned
   ::after with `inset: 0`, so it needs the badge itself to be the containing block; with a
   static badge the nearest positioned ancestor is MudBlazor's `.mud-menu-item` (which sets
   position:relative), and the ring is drawn around the ENTIRE menu row — a 4px amber stadium
   inheriting the badge's 9999px radius, pulsing to scale(1.25) out of the popover, forever.
   `relative` lays out identically to `static` while making the badge a containing block; the
   base rule's top/-right offsets have to be cleared or they become relative displacements. */
.cs-nav-badge-inline { position: relative; top: auto; right: auto; transform: none; }

/* ── Boost confirmation modal ────────────────────────────────────────── */
.cs-modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,.65); backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.cs-modal {
    background: rgba(28,37,64,0.92); border-radius: 16px; padding: 28px;
    box-shadow: 0 20px 40px rgba(0,0,0,.60), 0 0 0 1px rgba(59,130,246,0.12);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
    max-width: 460px; width: 100%;
}
.cs-boost-dialog { max-width: 420px; }

/* Boost-threshold interstitial rows.
   ⚠️ THE ROW IS AN EXPLICIT FLEX CONTAINER. Two stacked <div>s inside a <button> do NOT
   stack: the browser gives a button an anonymous centring layout of its own, which put the
   player names and the vote count on the same line, overlapping. Inline styles could not fix
   that because the problem was the button's own box, not the children's. */
.cs-boost-row {
    display: flex; align-items: center; gap: 12px; width: 100%;
    background: var(--cs-surface-elevated); border: 1px solid var(--cs-border);
    border-radius: 10px; padding: 12px 14px; cursor: pointer;
    color: inherit; font: inherit; text-align: left;
    transition: border-color 150ms ease, background 150ms ease;
}
.cs-boost-row:hover { border-color: var(--cs-primary); background: rgba(59,130,246,0.08); }
.cs-boost-row:focus-visible { outline: 2px solid var(--cs-primary); outline-offset: 2px; }

/* min-width:0 lets a long pair of names wrap instead of shoving the meta column out of
   alignment — without it a flex item refuses to shrink below its content width. */
.cs-boost-row-text { flex: 1 1 auto; min-width: 0; }
.cs-boost-row-players {
    display: block; font-size: 14px; font-weight: 700;
    color: var(--cs-text); margin-bottom: 3px;
}
.cs-boost-row-meta { display: block; font-size: 12px; color: var(--cs-muted); }

/* Fixed, non-shrinking, so every row's chevron lands on the same vertical line no matter how
   the names above it wrapped. */
.cs-boost-row-chev { flex: 0 0 auto; color: var(--cs-muted); font-size: 16px; line-height: 1; }
.cs-boost-row:hover .cs-boost-row-chev { color: var(--cs-primary); }
.cs-modal-header {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
}
.cs-modal-title { font-size: 17px; font-weight: 700; color: var(--cs-text); }
/* ⚠️ THIS CLASS WAS REFERENCED BY FOUR PARAGRAPHS AND DEFINED BY NONE. They fell through to
   the browser default <p>: 16px, full-strength colour, and a 1em margin on BOTH sides, sitting
   between siblings that are 13px muted with no top margin. Matches .cs-modal-desc, which is the
   same role one element lower; the top margin is zeroed explicitly because nothing in this
   stylesheet reboots <p>. */
.cs-modal-sub { font-size: 13px; color: var(--cs-muted); margin: 0 0 14px; line-height: 1.5; }
.cs-modal-players {
    font-size: 14px; font-weight: 600; color: var(--cs-text);
    margin-bottom: 8px;
}
.cs-modal-desc { font-size: 13px; color: var(--cs-muted); margin-bottom: 14px; line-height: 1.5; }
.cs-modal-credit-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; background: var(--cs-surface); border-radius: 8px;
    font-size: 13px; margin-bottom: 14px;
}
.cs-modal-credit-cost { font-weight: 600; color: var(--cs-text); }
.cs-modal-credit-balance { color: var(--cs-muted); }
.cs-modal-toggle-row {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--cs-text); cursor: pointer;
    margin-bottom: 20px;
}
.cs-modal-toggle-input { cursor: pointer; width: 16px; height: 16px; }
.cs-modal-toggle-label { user-select: none; }
.cs-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }
.cs-modal-cancel-btn {
    padding: 10px 20px; border-radius: 8px;
    background: transparent; color: var(--cs-muted);
    border: 1px solid var(--cs-border);
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 150ms ease;
}
.cs-modal-cancel-btn:hover { background: var(--cs-surface); }
.cs-modal-cancel-btn:disabled { opacity: .5; cursor: not-allowed; }
.cs-modal-confirm-btn {
    padding: 10px 24px; border-radius: 8px;
    background: var(--cs-cta); color: #1E293B;
    border: none;
    font-size: 14px; font-weight: 700; cursor: pointer;
    transition: opacity 150ms ease;
    min-width: 80px;
}
.cs-modal-confirm-btn:hover { opacity: .9; }
.cs-modal-confirm-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Crew dialogs ────────────────────────────────────────────────────── */
.cs-dialog {
    border: 1.5px solid var(--cs-primary) !important;
    border-radius: 12px !important;
}

/* ── Nav avatar glow ─────────────────────────────────────────────────── */
.cs-nav-avatar {
    transition: box-shadow 150ms ease, transform 150ms ease;
}
.cs-nav-avatar:hover {
    box-shadow: 0 0 16px rgba(139,92,246,0.55);
    transform: scale(1.05);
}

/* ── CTA glows ───────────────────────────────────────────────────────── */
.cs-nav-cta {
    transition: box-shadow 150ms ease, opacity 150ms ease;
}
/* ── Mobile nav ─────────────────────────────────────────────────────── */
.cs-hamburger {
    display: none;
    background: none; border: none; cursor: pointer;
    padding: 6px; color: var(--cs-text); flex-shrink: 0;
}
.cs-mobile-menu {
    /* ⚠️ MUST TRACK THE HEADER'S HEIGHT, INSET AND ALL. This is fixed-positioned, so it
       cannot flow beneath the sticky header — it has to be told where the header ends, and
       the header is 58px PLUS the safe-area inset on a notched device. Hardcoding 58px put
       this 26px underneath the nav on iOS even before the header was corrected, and would
       have put it 44px under afterwards. Same expression as NavMenu.razor's min-height, so
       the two cannot drift; resolves to plain 58px wherever the inset is 0. */
    position: fixed; top: calc(58px + var(--cs-safe-top, env(safe-area-inset-top, 0px)));
    left: 0; right: 0; z-index: 99;
    background: rgba(19,25,41,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    display: flex; flex-direction: column;
    animation: cs-mobile-menu-in 150ms ease-out backwards;
}
@keyframes cs-mobile-menu-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cs-mobile-menu a {
    display: flex; align-items: center;
    padding: 15px 24px; font-size: 16px; font-weight: 600;
    color: var(--cs-text); text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    min-height: 52px;
    transition: background 120ms ease, color 120ms ease;
}
.cs-mobile-menu a:hover, .cs-mobile-menu a:active { background: rgba(59,130,246,0.1); color: var(--cs-primary); }
.cs-mobile-menu a.cs-mobile-link-active { color: var(--cs-primary); }
/* `relative`, never `static` — see .cs-nav-badge-inline for why. */
.cs-mobile-menu .cs-nav-badge { position: relative; margin-left: 8px; top: auto; right: auto; }
/* Brand: full wordmark on desktop, compact football mark on mobile. The
   swap happens at the same 767px breakpoint the nav reconfigures at. */
.cs-brand-wordmark { display: block; }
.cs-brand-mark { display: none; }

/* Phase 19.5: top nav trimmed to Feed/Leaderboard/Hall of Fame, so the
   hamburger threshold dropped from 959 → 768px. The three remaining
   links + brand + Ask + avatar fit comfortably below the old breakpoint. */
@media (max-width: 767px) {
    .cs-nav-link { display: none !important; }
    .cs-hamburger { display: flex; align-items: center; justify-content: center; }
    .cs-nav-cta { padding: 7px 12px !important; font-size: 13px !important; }
    .cs-cta-full { display: none; }
    .cs-cta-short { display: inline; }
    .cs-brand-wordmark { display: none; }
    .cs-brand-mark { display: block; }
}
@media (min-width: 768px) {
    .cs-cta-short { display: none; }
    .cs-mobile-menu { display: none; }
}
.cs-nav-cta:hover {
    box-shadow: 0 0 18px rgba(59,130,246,0.45);
    opacity: .95;
}
.cs-cta-amber {
    transition: box-shadow 150ms ease, opacity 150ms ease !important;
}
.cs-cta-amber:hover:not(:disabled) {
    box-shadow: 0 0 22px rgba(245,158,11,0.45) !important;
    opacity: .95;
}

/* ── Landing page retro rows ─────────────────────────────────────────── */
.cs-retro-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
}
.cs-retro-row[style*="cursor:pointer"]:hover { background: rgba(59,130,246,0.05); border-radius: 6px; padding-left: 6px; padding-right: 6px; }
.cs-retro-divider { border-top: 1px solid var(--cs-border); margin: 0; }
.cs-retro-info { flex: 1; min-width: 0; }
.cs-retro-name { font-size: 14px; font-weight: 600; color: var(--cs-text); line-height: 1.3; }
.cs-retro-meta { font-size: 12px; color: var(--cs-muted); margin-top: 2px; }
.cs-retro-rank { font-size: 13px; font-weight: 700; color: var(--cs-muted); width: 20px; flex-shrink: 0; text-align: center; }
.cs-retro-pct { font-size: 14px; font-weight: 700; flex-shrink: 0; }
.cs-retro-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; flex-shrink: 0; }
.cs-retro-bar-wrap { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 80px; }
.cs-retro-bar { flex: 1; height: 8px; background: var(--cs-border); border-radius: 4px; overflow: hidden; }
.cs-retro-bar-fill { height: 100%; border-radius: 4px; transition: width .3s ease; }
.cs-retro-bar-green { background: var(--cs-grade-a); }
.cs-retro-bar-amber { background: var(--cs-grade-b); }
.cs-retro-bar-red { background: var(--cs-grade-d); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .cs-pvcard { min-width: 100px; }
    .cs-pvcard-portrait { width: 64px; height: 64px; }
    .cs-pvcard-name { font-size: 13px; }
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #60A5FA;
}

.btn-primary {
    color: #fff;
    background-color: #3B82F6;
    border-color: #2563EB;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem rgba(59,130,246,.2), 0 0 0 0.25rem rgba(59,130,246,.5);
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--cs-text-success);
}

.invalid {
    outline: 1px solid var(--cs-text-error);
}

.validation-message {
    color: var(--cs-text-error);
}

#blazor-error-ui {
    color-scheme: dark only;
    background: #1C2540;
    color: #F1F5F9;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* ── Personal Stats Explorer ──────────────────────────────────────────── */
.cs-position-tile { display:flex; flex-direction:column; align-items:center; text-align:center; padding:14px 16px; border-left:3px solid var(--cs-border); border-radius:8px; background:var(--cs-surface); width:100%; height:100%; box-sizing:border-box; }
.cs-position-tile-pos { font-size:11px; font-weight:700; color:var(--cs-muted); letter-spacing:.5px; text-transform:uppercase; }
.cs-position-tile-pct { font-size:28px; font-weight:800; line-height:1.1; margin:4px 0 2px; }
.cs-position-tile-picks { font-size:11px; color:var(--cs-muted); }
.cs-accuracy-badge { padding:4px 10px; border-radius:20px; font-size:13px; font-weight:700; flex-shrink:0; }
.cs-accuracy-badge.cs-retro-bar-green { background:rgba(34,197,94,0.15); color:var(--cs-grade-a); }
.cs-accuracy-badge.cs-retro-bar-amber { background:rgba(234,179,8,0.15); color:var(--cs-grade-b); }
.cs-accuracy-badge.cs-retro-bar-red { background:rgba(239,68,68,0.15); color:var(--cs-grade-d); }
.cs-diff-card { padding:16px; text-align:center; border-radius:8px; background:var(--cs-surface); height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.cs-diff-label { font-size:11px; font-weight:700; color:var(--cs-muted); letter-spacing:.5px; text-transform:uppercase; margin-bottom:6px; }
.cs-diff-pct { font-size:30px; font-weight:800; line-height:1.1; margin-bottom:4px; }
.cs-diff-picks { font-size:11px; color:var(--cs-muted); }
.cs-heatmap-cell { border-radius:5px; text-align:center; }
.cs-heatmap-cell-empty { border-radius:5px; background:rgba(255,255,255,0.03); }

/* ── My Stats page ───────────────────────────────────────────────────── */
.cs-stat-card {
    background: var(--cs-surface); border-radius: 10px; padding: 16px;
    box-shadow: var(--cs-shadow-md); text-align: center;
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cs-stat-card-accent { border-top: 3px solid var(--cs-primary); }
.cs-stat-card-eligible { border-top: 3px solid var(--cs-text-success); }
.cs-stat-card-interactive {
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.cs-stat-card-interactive:hover { border-color: var(--cs-primary); }
.cs-stat-card-interactive.cs-stat-card-active {
    border-color: var(--cs-primary);
    border-top: 3px solid var(--cs-primary);
}
.cs-stat-card-info {
    box-shadow: none !important;
    border: 1px dashed var(--cs-border) !important;
    opacity: 0.8;
}
.cs-stat-value {
    font-size: 28px; font-weight: 800; color: var(--cs-text);
    line-height: 1.1; margin-bottom: 4px;
}
.cs-stat-denom { font-size: 18px; font-weight: 500; color: var(--cs-muted); }
.cs-stat-label { font-size: 12px; font-weight: 600; color: var(--cs-muted); text-transform: uppercase; letter-spacing: .04em; }

/* ── Wrapped page ────────────────────────────────────────────────────── */
.cs-wrapped-card {
    background: var(--cs-surface); border-radius: 10px; padding: 16px;
    box-shadow: var(--cs-shadow-md); text-align: center;
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.cs-wrapped-card-hero {
    border-top: 3px solid var(--cs-border);
}
.cs-wrapped-hero-value {
    font-size: 36px; font-weight: 800; color: var(--cs-text);
    line-height: 1.1; margin-bottom: 4px;
}
.cs-wrapped-section { }
.cs-wrapped-hof-banner {
    display: flex; align-items: center;
    background: var(--cs-tint-warning); border: 1px solid var(--cs-border-warning);
    border-radius: 10px; padding: 12px 16px;
}
.cs-sparkline {
    display: flex; align-items: flex-end;
    height: 44px; gap: 3px; width: 100%;
}
.cs-sparkline-bar {
    flex: 1; border-radius: 2px 2px 0 0;
    min-height: 3px; cursor: default;
    transition: filter 0.15s;
}
.cs-sparkline-bar:hover { filter: brightness(1.3); }
.cs-sparkline-labels {
    display: flex; gap: 3px; margin-top: 3px; width: 100%;
}
.cs-sparkline-label {
    flex: 1; font-size: 8px; text-align: center;
    color: var(--cs-muted); overflow: hidden;
}
.cs-wrapped-percentile {
    display: flex; align-items: center;
    background: var(--cs-surface); border: 1px solid var(--cs-primary);
    border-radius: 10px; padding: 12px 16px;
    font-size: 14px; color: var(--cs-text);
}
.cs-wrapped-badge-chip {
    display: inline-flex; align-items: center;
    background: var(--cs-surface-elevated); border: 1px solid;
    border-radius: 20px; padding: 5px 12px;
}
.cs-wrapped-badge-rarity {
    font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .04em; margin-left: 6px;
}

/* ── Leaderboard page ────────────────────────────────────────────────── */
.cs-lb-tabs {
    display: flex; gap: 4px; flex-wrap: wrap;
    border-bottom: 2px solid var(--cs-border);
    padding-bottom: 0;
}
.cs-lb-tab {
    padding: 8px 16px; border-radius: 6px 6px 0 0;
    background: transparent; border: none;
    font-size: 14px; font-weight: 600; color: var(--cs-muted);
    cursor: pointer; transition: color 150ms ease, background 150ms ease;
    margin-bottom: -2px;
}
.cs-lb-tab:hover { color: var(--cs-text); }
.cs-lb-tab-active {
    color: var(--cs-primary);
    border-bottom: 2px solid var(--cs-primary);
    background: var(--cs-highlight-blue);
}
.cs-lb-row-mine { background: rgba(59,130,246,0.08) !important; }
.cs-lb-you-badge {
    display: inline-block; margin-left: 6px;
    padding: 1px 6px; border-radius: 9999px;
    background: var(--cs-primary); color: #fff;
    font-size: 10px; font-weight: 700; vertical-align: middle;
}

@media (min-width: 640px) {
    .cs-lb-col-sm { display: table-cell !important; }
}
@media (min-width: 768px) {
    .cs-lb-col-md { display: table-cell !important; }
}

/* ── Vote history rows (/me/votes) ────────────────────────────────────── */
.cs-vh-row {
    display: flex; align-items: center; gap: 6px 12px;
    flex-wrap: wrap; padding: 10px 16px;
    font-size: 14px;
}
.cs-vh-divider { border-bottom: 1px solid var(--cs-border); }
.cs-vh-meta { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.cs-vh-players { font-weight: 600; color: var(--cs-text); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.cs-name-short { display: none; }
@media (max-width: 600px) {
    .cs-vh-meta { flex: 0 0 100%; }
    .cs-vh-players { text-align: left; }
    .cs-name-full { display: none; }
    .cs-name-short { display: inline; }
    .cs-vh-difficulty { display: none; }
}
.cs-vh-pick { color: var(--cs-text); white-space: nowrap; }
.cs-vh-badge {
    display: inline-block; padding: 2px 8px; border-radius: 4px;
    font-size: 12px; font-weight: 700; white-space: nowrap;
}
.cs-vh-badge-correct { background: var(--cs-tint-success); color: var(--cs-text-success-soft); }
.cs-vh-badge-wrong   { background: var(--cs-tint-error); color: var(--cs-text-error); }
.cs-vh-badge-pending { background: var(--cs-surface-elevated); color: var(--cs-muted); }
.cs-vh-difficulty { color: var(--cs-muted); margin-left: auto; white-space: nowrap; }
.cs-vh-meta-badge { background: var(--cs-surface-elevated); color: var(--cs-muted); border: 1px solid var(--cs-border); white-space: nowrap; }
.cs-vh-vs { color: var(--cs-muted); font-weight: 400; font-size: 12px; }
.cs-vh-inline-correct { color: var(--cs-text-success-soft); font-weight: 700; }
.cs-vh-inline-wrong   { color: var(--cs-text-error); font-weight: 700; }
.cs-vh-inline-pending { color: var(--cs-text); font-weight: 600; }
.cs-vh-inline-other   { color: var(--cs-muted); font-weight: 400; }
.cs-vh-stat-chip {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 9999px;
    background: var(--cs-surface-elevated); color: var(--cs-muted);
    border: 1px solid var(--cs-border);
    font-size: 12px; font-weight: 600;
}
.cs-vh-stat-correct { background: var(--cs-tint-success); color: var(--cs-text-success); border-color: var(--cs-border-success); }
.cs-vh-stat-wrong   { background: var(--cs-tint-error);   color: var(--cs-text-error);   border-color: var(--cs-border-error); }
.cs-vh-stat-hard    { background: var(--cs-tint-warning); color: var(--cs-text-warning); border-color: var(--cs-border-warning); }
.cs-vh-stat-chip.cs-vh-stat-active                    { outline: 2px solid var(--cs-primary);      outline-offset: 1px; box-shadow: 0 0 8px var(--cs-primary); }
.cs-vh-stat-correct.cs-vh-stat-active                 { outline-color: var(--cs-text-success);     box-shadow: 0 0 8px var(--cs-text-success); }
.cs-vh-stat-wrong.cs-vh-stat-active                   { outline-color: var(--cs-text-error);       box-shadow: 0 0 8px var(--cs-text-error); }
.cs-vh-stat-hard.cs-vh-stat-active                    { outline-color: var(--cs-text-warning);     box-shadow: 0 0 8px var(--cs-text-warning); }
.cs-vh-stat-chip:hover { opacity: 0.85; }

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbmsiPjwvc3ZnPg==) no-repeat 1rem/1.8rem, #7f1d1d;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #2A3352;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #3B82F6;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #f472b6;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--cs-muted);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── Live pulse dot ──────────────────────────────────────────────────── */
/* Compositor-only pulse. This used to animate `box-shadow` on the element itself, which is
   a PAINT property — every frame, forever, on every urgent/warning time chip in the feed.
   Near kickoff that is most of a page, and each repaint invalidated the tile under it,
   competing with rasterising the rows being scrolled into view. Now the ring is painted
   once on a ::after and only scaled and faded, which the compositor does without repainting.
   Ring colour is the amber CTA for both chips, as it was before. */
@keyframes cs-live-pulse {
    0%   { opacity: .55; transform: scale(1); }
    70%  { opacity: 0;   transform: scale(1.25); }
    100% { opacity: 0;   transform: scale(1.25); }
}

.cs-time-urgent::after,
.cs-time-warning::after,
.cs-nav-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 4px rgba(245,158,11,0.55);
    opacity: 0;
    pointer-events: none;
    animation: cs-live-pulse 2.5s ease-out infinite;
}
.cs-time-warning::after { animation-duration: 3.5s; }

/* ── "New" badge ─────────────────────────────────────────────────────── */
@keyframes cs-new-ripple {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.55); }
    70%  { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}
.cs-new-badge {
    display: inline-flex; align-items: center;
    font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
    color: var(--cs-cta); border: 1px solid var(--cs-cta);
    border-radius: 10px; padding: 1px 7px;
    animation: cs-new-ripple 1.8s ease-out infinite;
}

/* ── Shimmer skeleton loading ────────────────────────────────────────── */
@keyframes cs-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}
.cs-skeleton-line {
    border-radius: 4px;
    background: linear-gradient(90deg, var(--cs-surface) 25%, var(--cs-surface-elevated) 50%, var(--cs-surface) 75%);
    background-size: 1200px 100%;
    animation: cs-shimmer 1.6s infinite linear;
}
.cs-skeleton-card {
    background: var(--cs-surface);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--cs-shadow-md);
}

/* ── Score reveal on resolved cards ──────────────────────────────────── */
@keyframes cs-score-reveal {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cs-qcard-resolved .cs-dist-row:nth-child(1) .cs-dist-pct,
.cs-qcard-resolved .cs-dist-row:nth-child(1) .cs-dist-name { animation: cs-score-reveal 350ms ease-out 0ms   backwards; }
.cs-qcard-resolved .cs-dist-row:nth-child(2) .cs-dist-pct,
.cs-qcard-resolved .cs-dist-row:nth-child(2) .cs-dist-name { animation: cs-score-reveal 350ms ease-out 80ms  backwards; }
.cs-qcard-resolved .cs-dist-row:nth-child(3) .cs-dist-pct,
.cs-qcard-resolved .cs-dist-row:nth-child(3) .cs-dist-name { animation: cs-score-reveal 350ms ease-out 160ms backwards; }
.cs-qcard-resolved .cs-dist-row:nth-child(4) .cs-dist-pct,
.cs-qcard-resolved .cs-dist-row:nth-child(4) .cs-dist-name { animation: cs-score-reveal 350ms ease-out 240ms backwards; }

/* ── Confetti particle fall ──────────────────────────────────────────── */
@keyframes cs-confetti-fall {
    0%   { transform: translateY(0) rotate(0deg);   opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ── Nav links ───────────────────────────────────────────────────────── */
@keyframes cs-nav-enter {
    from { opacity: 0; transform: translateY(-5px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cs-nav-link {
    position: relative;
    font-size: 14px; font-weight: 600;
    color: var(--cs-text); text-decoration: none; flex-shrink: 0;
    transition: color 150ms ease;
    animation: cs-nav-enter 220ms ease-out backwards;
}
.cs-nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0;
    width: 0; height: 2px;
    background: var(--cs-primary);
    border-radius: 1px;
    transition: width 200ms ease;
}
.cs-nav-link:hover { color: var(--cs-primary); }
.cs-nav-link:hover::after { width: 100%; }
.cs-nav-link-active { color: var(--cs-primary); }
.cs-nav-link-active::after { width: 100%; }

/* ── Leaderboard #1 gold accent ───────────────────────────────────────── */
.cs-lb-row-gold {
    background: rgba(251,191,36,0.06) !important;
    box-shadow: inset 3px 0 0 #FBBF24,
                inset 0 1px 0 rgba(251,191,36,0.12),
                inset 0 -1px 0 rgba(251,191,36,0.12);
}
.cs-lb-row-gold td {
    background: transparent !important;
}

/* ── Badge grid ─────────────────────────────────────────────────────────── */
.cs-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.cs-badge-tile {
    background: var(--cs-surface-elevated);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: border-color 0.15s;
}
.cs-badge-tile-earned {
    border-color: rgba(59,130,246,0.3);
}
.cs-badge-tile-locked {
    opacity: 0.65;
}
.cs-badge-tile:hover {
    border-color: var(--cs-primary);
}
.cs-badge-icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}
.cs-badge-tile-name {
    font-size: 13px;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 2px;
    line-height: 1.3;
}
.cs-badge-tile-rarity {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 6px;
}
.cs-badge-tile-desc {
    font-size: 11px;
    color: var(--cs-muted);
    line-height: 1.4;
    margin-bottom: 8px;
}
.cs-badge-tile-earned-at {
    font-size: 10px;
    color: var(--cs-muted);
    margin-top: auto;
}
.cs-badge-tile-locked-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--cs-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: auto;
}
.cs-badge-prize-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #F59E0B;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.3);
    border-radius: 20px;
    padding: 2px 8px;
    margin-top: 6px;
}
.cs-badge-prog-bar-wrap {
    width: 100%;
    height: 4px;
    background: var(--cs-border);
    border-radius: 2px;
    overflow: hidden;
    margin-top: auto;
    margin-bottom: 4px;
}
.cs-badge-prog-bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}
.cs-badge-prog-label {
    font-size: 10px;
    color: var(--cs-muted);
    font-weight: 600;
}

/* ── Season Recap ────────────────────────────────────────────────────────── */
.cs-recap-card {
    border: 1px solid var(--cs-border);
}
.cs-recap-stats-row {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
}
.cs-recap-stat {
    flex: 1;
    min-width: 90px;
    text-align: center;
    padding: 8px 4px;
}
.cs-recap-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--cs-text);
    line-height: 1.1;
    margin-bottom: 4px;
}
.cs-recap-stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--cs-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.cs-recap-badges-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
}
.cs-recap-badge-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px;
    background: var(--cs-surface-elevated);
    border: 1px solid var(--cs-border);
    border-radius: 10px;
}

/* ── Hall of Fame ────────────────────────────────────────────────────────── */
.cs-hof-season-header {
    font-size: 20px;
    font-weight: 800;
    color: var(--cs-text);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cs-border);
}
.cs-hof-podium {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    justify-content: center;
}
.cs-hof-podium-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--cs-surface-elevated);
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    padding: 16px 12px 12px;
    flex: 1;
    max-width: 180px;
}
.cs-hof-podium-1 {
    padding-top: 24px;
    border-color: rgba(245,158,11,0.4);
}
.cs-hof-medal {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 8px;
}
.cs-hof-podium-name a,
.cs-hof-spec-name a,
.cs-lb-table a {
    text-decoration: none;
    color: inherit;
}
.cs-hof-podium-name a:hover,
.cs-hof-spec-name a:hover,
.cs-lb-table a:hover {
    text-decoration: underline;
}
.cs-hof-podium-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--cs-text);
    margin-bottom: 2px;
    word-break: break-word;
}
.cs-hof-podium-stat {
    font-size: 18px;
    font-weight: 800;
    color: var(--cs-primary);
    margin-bottom: 2px;
}
.cs-hof-podium-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--cs-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cs-hof-specialist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}
.cs-hof-specialist-tile {
    background: var(--cs-surface-elevated);
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    padding: 12px 8px;
    text-align: center;
}
.cs-hof-specialist-tile--me {
    border-color: var(--cs-primary);
    background: var(--cs-tint-primary);
}
.cs-hof-spec-pos {
    font-size: 12px;
    font-weight: 800;
    color: var(--cs-primary);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.cs-hof-spec-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--cs-text);
    margin-bottom: 2px;
    word-break: break-word;
}
.cs-hof-spec-stat {
    /* Points, in the primary colour the podium and the Top 10 table use for the same figure —
       this is the number the award is decided on, so it reads as the headline. */
    font-size: 14px;
    font-weight: 800;
    color: var(--cs-primary);
    margin-bottom: 1px;
}
.cs-hof-specialist-tile--empty {
    /* Muted and dashed so it reads as a deliberate result, not a tile that failed to load. */
    border-style: dashed;
    opacity: .72;
}
.cs-hof-spec-unclaimed {
    color: var(--cs-muted);
    font-style: italic;
}
.cs-hof-spec-sub {
    /* Accuracy, demoted to context. It used to be the only figure on the tile, which made the
       card look like it was won on accuracy. */
    font-size: 11px;
    font-weight: 600;
    color: var(--cs-muted);
}

/* ── Legal pages (Termly HTML export) ────────────────────────────── */
.cs-legal-doc [data-custom-class='body'],
.cs-legal-doc [data-custom-class='body'] * { background: transparent !important; }
.cs-legal-doc [data-custom-class='title'],
.cs-legal-doc [data-custom-class='title'] * { font-family: Arial !important; font-size: 26px !important; color: var(--cs-text) !important; }
.cs-legal-doc [data-custom-class='subtitle'],
.cs-legal-doc [data-custom-class='subtitle'] * { font-family: Arial !important; color: var(--cs-muted) !important; font-size: 14px !important; }
.cs-legal-doc [data-custom-class='heading_1'],
.cs-legal-doc [data-custom-class='heading_1'] * { font-family: Arial !important; font-size: 19px !important; color: var(--cs-text) !important; }
.cs-legal-doc [data-custom-class='heading_2'],
.cs-legal-doc [data-custom-class='heading_2'] * { font-family: Arial !important; font-size: 17px !important; color: var(--cs-text) !important; }
.cs-legal-doc [data-custom-class='body_text'],
.cs-legal-doc [data-custom-class='body_text'] * { color: var(--cs-muted) !important; font-size: 14px !important; font-family: Arial !important; }
.cs-legal-doc [data-custom-class='link'],
.cs-legal-doc [data-custom-class='link'] * { color: var(--cs-primary) !important; font-size: 14px !important; font-family: Arial !important; word-break: break-word !important; }

/* ── Phase 17.3 Targets widget ───────────────────────────────────── */

.cs-targets-widget {
    background: var(--cs-surface);
}

.cs-targets-new-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    background: var(--cs-primary);
    color: #fff;
    text-transform: uppercase;
    animation: cs-targets-new-pulse 1.8s ease-in-out 0s 2;
}

@keyframes cs-targets-new-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}

.cs-targets-faq-link {
    color: var(--cs-primary);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.cs-targets-faq-link:hover { text-decoration: underline; }

.cs-targets-bullseye-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(22,163,74,0.18), rgba(22,163,74,0.06));
    border: 1px solid rgba(22,163,74,0.45);
    color: var(--cs-grade-a);
}

.cs-targets-bullseye-icon {
    font-size: 24px;
    line-height: 1;
}

.cs-target-row {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--cs-border);
}

.cs-target-row:first-of-type { border-top: none; }

.cs-target-row-main {
    flex: 1;
    min-width: 0;
}

.cs-target-row-progress {
    flex: 0 0 130px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.cs-target-description {
    font-size: 11px;
    color: var(--cs-muted);
    margin-top: 2px;
}

.cs-target-difficulty {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--cs-surface-elevated);
    color: var(--cs-muted);
    flex-shrink: 0;
}

.cs-target-diff-easy     { color: var(--cs-grade-a); border: 1px solid rgba(22,163,74,.4); }
.cs-target-diff-medium   { color: var(--cs-grade-b); border: 1px solid rgba(234,179,8,.4); }
.cs-target-diff-hard     { color: var(--cs-grade-d); border: 1px solid rgba(220,38,38,.4); }
.cs-target-diff-variable { color: var(--cs-primary); border: 1px solid rgba(59,130,246,.4); }

.cs-target-check {
    color: var(--cs-grade-a);
    font-size: 14px;
    font-weight: 800;
    margin-left: 2px;
}

.cs-target-x {
    color: var(--cs-grade-d);
    font-size: 14px;
    font-weight: 800;
    margin-left: 2px;
}

.cs-target-progress-numeric {
    font-size: 11px;
    color: var(--cs-muted);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cs-target-progress-track {
    width: 100%;
    height: 6px;
    background: var(--cs-border);
    border-radius: 3px;
    overflow: hidden;
}

.cs-target-progress-bar {
    height: 100%;
    border-radius: 3px;
    transition: width .3s ease;
}

.cs-target-bar-primary { background: var(--cs-primary); }
.cs-target-bar-green   { background: var(--cs-grade-a); }
.cs-target-bar-red     { background: var(--cs-grade-d); }

.cs-target-pending-label {
    font-size: 11px;
    color: var(--cs-muted);
    font-weight: 600;
}

.cs-target-pending-hint {
    font-size: 10px;
    color: var(--cs-muted);
    opacity: .8;
    text-align: right;
}

.cs-target-pending .cs-target-row-main { opacity: .85; }

.cs-target-complete .cs-target-row-main MudText,
.cs-target-failed .cs-target-row-main MudText { opacity: 1; }

.cs-targets-footer-link {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cs-border);
    text-align: center;
}

/* ── Weekly results interstitial: target reveal + Bullseye + Week N+1 preview ── */

.cs-interstitial-bullseye {
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.cs-interstitial-target-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-interstitial-target-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--cs-surface-elevated);
    border: 1px solid var(--cs-border);
    font-size: 13px;
}

.cs-interstitial-target-row.is-complete {
    background: var(--cs-tint-success);
    border-color: var(--cs-border-success);
    color: var(--cs-text-success);
}

.cs-interstitial-target-row.is-failed {
    background: var(--cs-tint-error);
    border-color: var(--cs-border-error);
    color: var(--cs-text-error);
}

/* Phase 19.5: misses collapse to a single summary row. Same grid +
   muted-error palette as a failed row so it reads as "missed stuff"
   without 4 reds shouting at the user on a typical week. */
.cs-interstitial-misses-toggle {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(239, 68, 68, .06);
    border: 1px solid rgba(239, 68, 68, .25);
    color: var(--cs-text-error);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.cs-interstitial-misses-toggle:hover {
    background: rgba(239, 68, 68, .1);
    border-color: rgba(239, 68, 68, .35);
}

.cs-interstitial-misses-toggle:focus-visible {
    outline: 2px solid var(--cs-primary);
    outline-offset: 2px;
}

.cs-interstitial-misses-summary {
    font-size: 13px;
    font-weight: 700;
}

#interstitial-misses-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.cs-interstitial-target-marker {
    font-weight: 800;
    text-align: center;
    font-size: 16px;
    line-height: 1;
}

.cs-interstitial-target-title {
    font-weight: 700;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-interstitial-target-diff {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .75;
}

.cs-interstitial-next-week {
    display: block;
    width: 100%;
    background: var(--cs-surface-elevated);
    border: 1px solid var(--cs-border);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}

.cs-interstitial-next-week:hover {
    background: var(--cs-surface);
    border-color: var(--cs-primary);
}

.cs-interstitial-next-week-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.cs-interstitial-next-week-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cs-muted);
}

.cs-interstitial-next-week-cta {
    font-size: 12px;
    font-weight: 700;
    color: var(--cs-primary);
}

.cs-interstitial-next-week-titles {
    font-size: 12px;
    color: var(--cs-text-subtle);
    line-height: 1.45;
}

/* ── Targets history page ── */

.cs-history-bullseye-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    color: #fff;
    padding: 3px 8px;
    border-radius: 999px;
}

.cs-history-target-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-history-target-row {
    display: grid;
    grid-template-columns: 22px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--cs-surface-elevated);
    border: 1px solid var(--cs-border);
}

.cs-history-target-row.is-complete {
    background: var(--cs-tint-success);
    border-color: var(--cs-border-success);
}

.cs-history-target-row.is-failed {
    background: var(--cs-tint-error);
    border-color: var(--cs-border-error);
    opacity: .85;
}

.cs-history-target-marker {
    font-weight: 800;
    text-align: center;
    font-size: 16px;
    line-height: 1;
}

.cs-history-target-row.is-complete .cs-history-target-marker { color: var(--cs-text-success); }
.cs-history-target-row.is-failed   .cs-history-target-marker { color: var(--cs-text-error); }

.cs-history-target-body {
    min-width: 0;
}

.cs-history-target-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--cs-text);
}

.cs-history-target-desc {
    font-size: 11px;
    color: var(--cs-muted);
    line-height: 1.4;
    margin-top: 2px;
}

.cs-history-target-diff {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--cs-surface);
    border: 1px solid var(--cs-border);
    color: var(--cs-muted);
}

/* ── Interstitial badge chip with inline reward (Phase 19.5) ──
   Compresses the badge + reward stack into a single horizontal pill so
   the modal stops growing past one screen on big-reward weeks. */
.cs-interstitial-badge-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--cs-surface-elevated);
    border: 1px solid var(--cs-border);
    border-radius: 20px;
    padding: 6px 10px 6px 12px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--cs-text);
    transition: border-color 150ms ease;
}

.cs-interstitial-badge-chip:hover {
    border-color: var(--cs-primary);
}

.cs-interstitial-badge-chip.has-reward {
    border-color: rgba(56, 189, 248, .35);
}

.cs-interstitial-badge-emoji { font-size: 14px; line-height: 1; }
.cs-interstitial-badge-name { line-height: 1.2; }

.cs-interstitial-badge-reward {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    padding-left: 8px;
    margin-left: 2px;
    border-left: 1px solid var(--cs-border);
    animation: cs-reward-count-up 600ms ease-out 200ms backwards;
}

.cs-interstitial-badge-reward-shield       { color: #38bdf8; }
.cs-interstitial-badge-reward-boost_credit { color: #facc15; }

.cs-interstitial-badge-reward-cap {
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--cs-muted);
    margin-left: 2px;
    padding: 1px 5px;
    border: 1px solid var(--cs-border);
    border-radius: 8px;
}

/* ── Interstitial Rewards Unlocked (Phase 17.3.6) ── */

.cs-interstitial-rewards {
    margin: 0 0 16px 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid var(--cs-border);
    text-align: left;
}

.cs-interstitial-rewards-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cs-muted);
    margin-bottom: 8px;
}

.cs-interstitial-reward-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
}

.cs-interstitial-reward-row:last-child {
    border-bottom: 0;
}

.cs-interstitial-reward-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.cs-interstitial-reward-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cs-interstitial-reward-amount {
    font-size: 14px;
    font-weight: 700;
    color: var(--cs-text);
    animation: cs-reward-count-up 600ms ease-out 200ms backwards;
}

.cs-interstitial-reward-shield .cs-interstitial-reward-amount { color: #38bdf8; }
.cs-interstitial-reward-boost_credit .cs-interstitial-reward-amount { color: #facc15; }

.cs-interstitial-reward-source {
    font-size: 11px;
    color: var(--cs-muted);
    font-weight: 500;
}

@keyframes cs-reward-count-up {
    from { transform: scale(.8); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* ── /me/badges Rewards This Season (Phase 17.3.6) ── */

.cs-badges-rewards-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cs-muted);
    margin-bottom: 10px;
}

.cs-badges-rewards-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    flex-wrap: wrap;
}

.cs-badges-rewards-icon {
    font-size: 18px;
    line-height: 1;
}

.cs-badges-rewards-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--cs-text);
}

.cs-badges-rewards-attribution {
    font-size: 12px;
    color: var(--cs-muted);
    flex: 1;
    min-width: 0;
}

/* ── Shields stat card denominator (Phase 17.3.6) ── */
.cs-stat-value-denom {
    font-size: .55em;
    font-weight: 500;
    color: var(--cs-muted);
    margin-left: 2px;
    vertical-align: baseline;
}

/* ── Interstitial shields-at-max cap note (Phase 17.3.7) ── */
.cs-interstitial-reward-cap-note {
    font-size: 10px;
    font-weight: 600;
    color: var(--cs-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-left: 2px;
}

.cs-badges-rewards-footnote {
    font-size: 11px;
    color: var(--cs-muted);
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--cs-border);
    line-height: 1.4;
}

/* ── Phase 19.5: Mobile Engagement Chip Strip ───────────────────────────── */

/* Responsive helpers — the strip lives only on mobile, the original
   widget column lives only on tablet+. Mud's sm breakpoint is 600px. */
.cs-mobile-only { display: block; }
.cs-desktop-only { display: none; }

@media (min-width: 600px) {
    .cs-mobile-only { display: none; }
    .cs-desktop-only { display: block; }
}

.cs-engagement-chip-strip-wrapper {
    margin-bottom: 16px;
}

.cs-engagement-chip-strip {
    display: flex;
    gap: 6px;
    justify-content: space-between;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 4px 4px 8px;
    scrollbar-width: none;
}

.cs-engagement-chip-strip::-webkit-scrollbar { display: none; }

.cs-engagement-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 44px;       /* touch target */
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--cs-border);
    background: var(--cs-surface-elevated, #1a1f2e);
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 100ms ease;
    position: relative;
}

.cs-engagement-chip:hover {
    border-color: var(--cs-primary);
}

.cs-engagement-chip:focus-visible {
    outline: 2px solid var(--cs-primary);
    outline-offset: 2px;
}

.cs-engagement-chip-active {
    background: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #fff;
}

.cs-engagement-chip-loading {
    color: transparent;
    pointer-events: none;
}

.cs-engagement-chip-icon { font-size: 14px; line-height: 1; }
.cs-engagement-chip-label { font-size: 12px; }
.cs-engagement-chip-value {
    font-size: 12px;
    font-weight: 700;
    opacity: .85;
    margin-left: 1px;
}

.cs-engagement-chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    margin-left: 4px;
    animation: cs-chip-pulse 1.6s ease-in-out infinite;
}

@keyframes cs-chip-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.25); opacity: .7; }
}

.cs-engagement-chip-shimmer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.08) 50%,
        rgba(255,255,255,0) 100%);
    background-size: 200% 100%;
    animation: cs-chip-shimmer 1.4s linear infinite;
}

@keyframes cs-chip-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.cs-engagement-chip-panel {
    margin-top: 8px;
}

/* First-load nudge: a brief horizontal sway on the first chip so the
   user notices the strip is scrollable. Triggered once via localStorage. */
.cs-engagement-chip-strip.cs-engagement-strip-nudge .cs-engagement-chip:first-child {
    animation: cs-strip-nudge 1.2s ease-in-out 1;
}

@keyframes cs-strip-nudge {
    0%   { transform: translateX(0); }
    25%  { transform: translateX(14px); }
    55%  { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

/* Now also covers the feed's own motion — card entry and the two infinite pulses. Those
   were never listed here, so asking for reduced motion still left a page of cards sliding
   in and every urgent chip pulsing forever. */
@media (prefers-reduced-motion: reduce) {
    .cs-engagement-chip-dot,
    .cs-engagement-chip-shimmer,
    .cs-engagement-chip-strip.cs-engagement-strip-nudge .cs-engagement-chip:first-child,
    .cs-qcard-open,
    .cs-qcard-threshold,
    .cs-qcard-resolved,
    .cs-qcard-insufficient,
    .cs-time-urgent::after,
    .cs-time-warning::after,
    .cs-nav-badge::after {
        animation: none;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Phase 19.5: shared collapse-toggle button used by Targets/Streaks/Crews
   widgets on desktop. Header bar stays full width + clickable; chevron
   rotates with expanded state. */
.cs-widget-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 12px;
    color: inherit;
    border-radius: 12px;
}

.cs-widget-toggle:hover {
    background: var(--cs-surface-hover, rgba(255,255,255,.03));
}

.cs-widget-toggle:focus-visible {
    outline: 2px solid var(--cs-primary);
    outline-offset: -2px;
}


/* Boost chip at zero credits. Reads as an offer, not an error state — the chip is now
   always present, so a bare bright "0" would look like a broken counter. */
.cs-credit-chip-empty {
    opacity: 0.55;
    background: transparent;
    border: 1px solid var(--cs-border, rgba(255, 255, 255, 0.18));
}

.cs-credit-chip-empty:hover {
    opacity: 1;
}

/* The chip is a <button> now; strip the default chrome so it still looks like a chip. */
button.cs-credit-chip {
    font: inherit;
    cursor: pointer;
    appearance: none;
}

/* ── Store badges (landing hero, web only) ──────────────────────────────────
   Apple requires a minimum 40px onscreen height and clear space of at least a
   quarter of the badge height; 44px also clears the touch-target minimum.
   Google's download carries 42% transparent padding; the committed asset is
   cropped to its alpha bounds so both marks render at the same visible height
   (aspects 2.99 Apple / 3.37 Google). `--cs-play-badge-scale` remains as a
   tuning hook — Google's rule is "equal or greater", so larger is compliant and
   smaller is not. Apple imposes no relative size, only first position. */
.cs-store-badges { margin-top: 1.75rem; }

.cs-store-badges-label {
    font-size: 12px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cs-muted);
    margin-bottom: .6rem;
}

.cs-store-badges-row {
    display: flex;
    align-items: center;
    gap: 14px;              /* > 1/4 of badge height — Apple's clear-space rule */
    flex-wrap: wrap;
}

.cs-store-badge {
    display: inline-flex;
    align-items: center;
    line-height: 0;         /* kills the inline-image descender gap */
    border-radius: 8px;
}
.cs-store-badge img {
    height: 44px;
    width: auto;
    display: block;
}
.cs-store-badge-play img {
    height: calc(44px * var(--cs-play-badge-scale, 1));
}

/* Badges must not be restyled — no filters, no recolouring. A focus ring and a
   subtle lift are presentation, not modification. */
.cs-store-badge:focus-visible {
    outline: 2px solid var(--cs-primary);
    outline-offset: 3px;
}
.cs-store-badge:hover { opacity: .88; }
@media (prefers-reduced-motion: no-preference) {
    .cs-store-badge { transition: opacity .15s ease; }
}