*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { font-size: 16px; -webkit-text-size-adjust: 100%; }
        body {
            font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
            background: var(--bg);
            color: var(--ink);
            line-height: 1.5;
            min-height: 100vh;
            min-height: 100dvh;
            padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        img { display: block; max-width: 100%; }
        button { font-family: inherit; cursor: pointer; }
        a { color: inherit; text-decoration: none; }

        /* ─── Header ───
           padding-top reserves the iOS PWA status-bar zone so SOS/signal/battery
           don't overlap header content (and don't eat taps on header controls). */
        .app-header {
            position: sticky; top: 0; z-index: 80;
            background: var(--surface);
            border-bottom: 1px solid var(--border);
            padding:
                calc(14px + env(safe-area-inset-top, 0px))
                calc(20px + env(safe-area-inset-right, 0px))
                14px
                calc(20px + env(safe-area-inset-left, 0px));
            display: flex; align-items: center; justify-content: space-between; gap: 12px;
        }
        .app-header-brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
        .app-header-logo { height: 28px; width: auto; display: block; flex-shrink: 0; }
        .app-header-brand .divider { width: 1px; height: 22px; background: var(--border-strong); flex-shrink: 0; }
        /* Athlete switcher styles — see athlete/css/athlete-switcher.css. */
        .app-header-actions { display: flex; align-items: center; gap: 6px; }
        .header-icon-btn {
            width: 38px; height: 38px; border-radius: 50%;
            border: 1px solid transparent; background: transparent;
            color: var(--ink-muted);
            display: inline-flex; align-items: center; justify-content: center;
            transition: all 0.15s ease;
            position: relative;
        }
        .header-icon-btn:hover { background: #f4f4f5; color: var(--ink); }
        .header-icon-btn svg { width: 20px; height: 20px; stroke-width: 2; }
        /* v251: unified bell dot — matches every athlete page. */
        .header-bell-dot {
            position: absolute; top: 7px; right: 7px;
            width: 9px; height: 9px; border-radius: 50%;
            background: var(--live);
            border: 2px solid var(--surface);
            box-shadow: 0 0 0 1px rgba(239,68,68,0.20);
            pointer-events: none;
        }

        /* ─── Container ─── */
        .container { max-width: 720px; margin: 0 auto; padding: 20px 16px 40px; }

        /* ─── Page title (above the season strip) ─── */
        .page-title {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 34px;
            font-weight: 800;
            letter-spacing: 0.5px;
            text-transform: uppercase;
            color: var(--ink);
            line-height: 1;
            margin: 6px 4px 6px;
        }
        .page-subtitle {
            font-family: 'Oswald', sans-serif;
            font-size: 13px;
            font-weight: 500;
            letter-spacing: 1.4px;
            color: var(--ink-muted);
            text-transform: uppercase;
            margin: 0 4px 22px;
        }
        .page-subtitle .accent { color: var(--team-primary); font-weight: 600; }

        /* ─── Season Record Slab — broadcast-style, single big record ─── */
        .season-slab {
            position: relative;
            display: flex;
            align-items: stretch;
            background: #0c0d10;
            border-radius: var(--radius);
            box-shadow: 0 12px 32px rgba(12,13,16,0.18), 0 2px 6px rgba(12,13,16,0.10);
            margin-bottom: 24px;
            overflow: hidden;
            color: #ffffff;
        }
        /* v240: dark-mode standout for the season slab. The earlier v239
           chasing-comet (animated conic-gradient) was visually wrong —
           conic sweeps from the element CENTER in a circular path, so on
           a rectangular card the bright arc sticks at corners and skips
           along long edges. Reverted to a static treatment that just
           lifts the card against the dark bg: ambient team-color halo +
           inner top-edge highlight. No animation, no rectangular-perimeter
           weirdness. Lessons doc §17.1.6 for the full write-up. */
        html[data-theme="dark"] .season-slab,
        html[data-theme="auto"] .season-slab {
            box-shadow:
                0 12px 32px rgba(0,0,0,0.55),
                0 0 32px color-mix(in srgb, var(--team-primary, #22c55e) 22%, transparent),
                inset 0 1px 0 rgba(255,255,255,0.08);
        }
        .season-slab-rail {
            width: 6px;
            background: linear-gradient(180deg, var(--team-primary), var(--team-secondary));
            flex-shrink: 0;
        }
        .season-slab-body {
            flex: 1;
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: center;
            gap: 16px;
            padding: 20px 22px;
        }
        .season-slab-left {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .season-slab-eyebrow {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2.4px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.55);
        }
        .season-slab-record {
            font-family: 'Orbitron', 'Saira Condensed', sans-serif;
            /* v238: clamp + nowrap so double-digit losses/ties don't wrap to
               a second line. Auto-shrinks on narrow viewports while keeping
               the big-broadcast feel on wider ones. */
            font-size: clamp(28px, 11vw, 52px);
            font-weight: 800;
            line-height: 0.95;
            color: #ffffff;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0;
            white-space: nowrap;
        }
        .season-slab-record .sep {
            color: rgba(255,255,255,0.30);
            font-weight: 600;
            margin: 0 4px;
        }
        .season-slab-sub {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 2.4px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.45);
            margin-top: 2px;
        }
        .season-slab-right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 4px;
            padding-left: 16px;
            border-left: 1px solid rgba(255,255,255,0.10);
        }
        .season-slab-stat {
            display: flex;
            align-items: baseline;
            gap: 6px;
            font-variant-numeric: tabular-nums;
        }
        .season-slab-stat .num {
            font-family: 'Orbitron', 'Saira Condensed', sans-serif;
            font-size: 15px;
            font-weight: 700;
            color: #ffffff;
            line-height: 1;
            letter-spacing: 0;
        }
        .season-slab-stat .lbl {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 10px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.55);
        }
        .season-slab-stat.diff .num { color: #4ade80; }
        .season-slab-stat.diff.neg .num { color: #f87171; }
        @media (max-width: 380px) {
            .season-slab-body { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
            .season-slab-right { align-items: flex-start; padding-left: 0; border-left: 0; border-top: 1px solid rgba(255,255,255,0.10); padding-top: 12px; flex-direction: row; gap: 18px; }
            .season-slab-record { font-size: clamp(24px, 10vw, 48px); }
        }

        /* ─── Filters — two-axis: Upcoming/Past segmented + Type chips ─── */
        .filter-stack {
            display: flex; flex-direction: column;
            gap: 12px;
            margin: 8px 0 18px;
        }
        .filter-time {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            padding: 4px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 12px;
            box-shadow: var(--shadow-sm);
        }
        .filter-time-btn {
            padding: 11px 16px;
            background: transparent;
            border: 0;
            border-radius: 9px;
            font-family: 'Saira Condensed', sans-serif;
            font-size: 13px; font-weight: 700;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color: var(--ink-muted);
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            transition: all 0.15s ease;
            cursor: pointer;
        }
        .filter-time-btn .count {
            display: inline-flex; align-items: center; justify-content: center;
            min-width: 22px; height: 22px;
            padding: 0 7px;
            background: var(--bg);
            color: var(--ink-muted);
            border-radius: 999px;
            font-family: 'Manrope', sans-serif;
            font-size: 11px; font-weight: 800;
            letter-spacing: 0;
        }
        .filter-time-btn.active {
            background: var(--ink);
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(10,10,10,0.18);
        }
        .filter-time-btn.active .count {
            background: rgba(255,255,255,0.18);
            color: #ffffff;
        }
        .filter-type {
            display: flex; align-items: center; justify-content: center;
            gap: 4px;
            font-family: 'Saira Condensed', sans-serif;
            font-size: 12px; font-weight: 700;
            letter-spacing: 1.6px;
            text-transform: uppercase;
        }
        .filter-type-btn {
            padding: 8px 14px;
            background: transparent;
            border: 0;
            border-radius: 8px;
            font: inherit; letter-spacing: inherit; text-transform: inherit;
            color: var(--ink-faint);
            cursor: pointer;
            transition: color 0.15s ease;
        }
        .filter-type-btn:hover { color: var(--ink-muted); }
        .filter-type-btn.active { color: var(--ink); }
        .filter-type-btn.active::after {
            content: '';
            display: block;
            width: 18px; height: 2px;
            background: var(--team-primary);
            border-radius: 2px;
            margin: 4px auto 0;
        }
        .filter-type-sep { color: var(--border-strong); font-weight: 400; padding: 0 2px; }

        /* ─── Month Group Header ─── */
        .month-header {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            margin: 26px 4px 12px;
        }
        .month-header h3 {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 18px;
            font-weight: 800;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            color: var(--ink);
        }
        .month-header .month-count {
            font-family: 'Manrope', sans-serif;
            font-size: 13px;
            font-weight: 500;
            color: var(--ink-faint);
            letter-spacing: 0.3px;
        }

        /* ─── Game Card ─── */
        .game-card {
            display: flex;
            align-items: center;
            gap: 16px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius-sm);
            padding: 18px 18px;
            transition: all 0.15s ease;
            position: relative;
        }
        .game-card + .game-card { margin-top: 10px; }
        .game-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

        /* Next-up game gets a team-color left rail to draw the eye */
        .game-card.next-up {
            border-color: var(--team-primary);
            border-left-width: 4px;
            padding-left: 15px;
        }
        .game-card.live {
            border-color: rgba(239,68,68,0.45);
            border-left: 4px solid var(--live);
            padding-left: 15px;
        }

        .game-card-date {
            flex-shrink: 0; text-align: center; width: 52px;
        }
        .gcd-month {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color: var(--ink-faint);
        }
        .gcd-day {
            font-family: 'Orbitron', 'Saira Condensed', sans-serif;
            font-size: 24px;
            font-weight: 700;
            color: var(--ink);
            line-height: 1;
            margin-top: 3px;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0;
        }
        .game-card.next-up .gcd-day,
        .game-card.live .gcd-day { color: var(--team-primary); }
        .game-card.live .gcd-day { color: var(--live); }

        .game-card-body { flex: 1; min-width: 0; }
        /* v242: REC cam-pill on past games that have a camera recording */
        .gcb-cam-pill {
            display: inline-flex; align-items: center; gap: 4px;
            margin-left: 8px;
            padding: 2px 7px;
            border-radius: 999px;
            background: rgba(239,68,68,0.10);
            color: #ef4444;
            font-family: 'Saira Condensed', sans-serif;
            font-size: 10px; font-weight: 800;
            letter-spacing: 1.4px; text-transform: uppercase;
            vertical-align: middle;
            line-height: 1.4;
        }
        .gcb-cam-pill-dot {
            width: 5px; height: 5px; border-radius: 50%;
            background: #ef4444;
            box-shadow: 0 0 0 2px rgba(239,68,68,0.18);
        }
        .gcb-opponent {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 0.5px;
            color: var(--ink);
            text-transform: uppercase;
            line-height: 1.15;
        }
        .gcb-opponent .ha-tag {
            display: inline-block;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1.4px;
            color: var(--ink-faint);
            margin-right: 6px;
            font-family: 'Saira Condensed', sans-serif;
        }
        /* Carlos May 23 night feedback (item 3): the PRACTICE tag had an
           inline `background:#f59e0b` orange but inherited gray text from
           the base .ha-tag rule → gray on orange = unreadable. Now: tight
           orange block, BLACK text, bold, minimal padding so the orange
           hugs the letters ("orange behind it with no padding"). */
        .gcb-opponent .ha-tag--practice {
            background: #f59e0b;
            color: #000;
            font-weight: 800;
            padding: 2px 6px;
            border-radius: 3px;
            letter-spacing: 1px;
        }

        /* Carlos May 23 night follow-up: practice card was showing the
           full 3-line address as the location ("Tustin Sports Park,
           12850 Robinson Dr, Tustin, CA 92782, USA"). Now: primary line
           (field name or venue first chunk) gets the weight, secondary
           line (rest of the address, no state/zip/country tail) sits
           below in muted style. Mirrors how a coach actually thinks
           about a practice — "Field 4 at Tustin Sports Park" — not the
           full ZIP code. */
        .game-card-body .gcb-venue {
            font-family: 'Manrope', sans-serif;
            font-size: 15px;
            font-weight: 700;
            color: var(--ink);
            line-height: 1.3;
            margin-top: 6px;
        }
        .game-card-body .gcb-venue-sub {
            font-family: 'Manrope', sans-serif;
            font-size: 12px;
            font-weight: 500;
            color: var(--ink-muted);
            line-height: 1.3;
            margin-top: 2px;
        }
        .gcb-meta {
            font-family: 'Manrope', sans-serif;
            font-size: 14px;
            font-weight: 500;
            color: var(--ink-muted);
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 6px;
            flex-wrap: wrap;
            line-height: 1.35;
        }
        .gcb-meta .dot {
            width: 3px; height: 3px; border-radius: 50%;
            background: var(--ink-faint);
            display: inline-block;
        }
        .gcb-tag {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            background: var(--team-primary-soft);
            color: var(--team-primary);
            border-radius: 4px;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: uppercase;
            margin-top: 8px;
            font-family: 'Saira Condensed', sans-serif;
        }
        .gcb-tag.live {
            background: var(--live-soft);
            color: var(--live);
        }
        .gcb-tag.dot-pulse::before {
            content: '';
            display: inline-block;
            width: 6px; height: 6px;
            border-radius: 50%;
            background: currentColor;
            margin-right: 5px;
            animation: dotPulse 1.6s ease-out infinite;
        }
        @keyframes dotPulse {
            0%   { box-shadow: 0 0 0 0 currentColor; }
            70%  { box-shadow: 0 0 0 5px transparent; }
            100% { box-shadow: 0 0 0 0 transparent; }
        }

        .game-card-result {
            flex-shrink: 0; text-align: right; min-width: 94px;
        }
        .score-chip {
            display: inline-flex;
            align-items: baseline;
            gap: 6px;
            padding: 7px 14px;
            background: #ffffff;
            border: 1.5px solid var(--team-color, #0a0a0a);
            border-radius: 999px;
            font-family: 'Orbitron', 'Saira Condensed', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: var(--team-color, #0a0a0a);
            font-variant-numeric: tabular-nums;
            letter-spacing: 0;
        }
        .score-chip .result-tag {
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 12px;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            margin-right: 2px;
        }
        .score-chip.win  { --team-color: #22c55e; }
        .score-chip.loss { --team-color: #ef4444; }
        .score-chip.tie  { --team-color: #f59e0b; }

        .time-chip {
            display: inline-flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 2px;
        }
        .time-chip-time {
            font-family: 'Orbitron', 'Saira Condensed', sans-serif;
            font-size: 20px;
            font-weight: 700;
            color: var(--ink);
            line-height: 1;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0;
        }
        .time-chip-ampm {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 12px;
            font-weight: 600;
            color: var(--ink-faint);
            letter-spacing: 1.4px;
            text-transform: uppercase;
        }
        .game-card.next-up .time-chip-time { color: var(--team-primary); }

        /* ─── RSVP segmented control ─── */
        .rsvp-status {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 12px;
            font-family: 'Manrope', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--ink-muted);
            letter-spacing: 0.2px;
        }
        .rsvp-status-dot {
            display: inline-block;
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #16a34a;
            flex-shrink: 0;
        }
        .rsvp-status-divider {
            width: 1px;
            height: 11px;
            background: var(--border-strong);
            margin: 0 4px;
        }
        .rsvp-status .muted { color: var(--ink-faint); font-weight: 500; }

        .rsvp-row {
            display: flex;
            gap: 8px;
            margin-top: 12px;
            width: 100%;
        }
        .rsvp-btn {
            flex: 1;
            /* Pad bumped 10→16 (May 23) → 20 (May 24). Carlos said "still
               same issue" after the 16px pass — the visible content cluster
               (icon + text) needed more breathing inside the pill. */
            padding: 14px 20px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 9px;
            color: var(--ink-muted);
            font-family: 'Saira Condensed', sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.4px;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            cursor: pointer;
            transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
            min-width: 0;
        }
        .rsvp-btn svg {
            width: 15px;
            height: 15px;
            stroke-width: 2.4;
            flex-shrink: 0;
        }
        .rsvp-btn:hover {
            border-color: var(--border-strong);
            color: var(--ink);
        }
        .rsvp-btn:active { transform: scale(0.97); }
        .rsvp-btn.active.going {
            background: var(--accent-green);
            border-color: var(--accent-green);
            color: #ffffff;
            box-shadow: 0 2px 10px var(--accent-green-2);
        }
        .rsvp-btn.active.maybe {
            background: var(--accent-amber);
            border-color: var(--accent-amber);
            color: #ffffff;
            box-shadow: 0 2px 10px var(--accent-amber-2);
        }
        .rsvp-btn.active.cant {
            background: var(--accent-red);
            border-color: var(--accent-red);
            color: #ffffff;
            box-shadow: 0 2px 10px var(--accent-red-2);
        }
        /* When one is active, dim the other two slightly but keep them
           clearly tappable. Was 0.42 (May 23) — too aggressive, made
           MAYBE/CAN'T read as "disabled" not "untapped." Carlos saw the
           visible boxes from the v304 chrome fix but still flagged the
           inactive pills as feeling broken. 0.7 keeps the active pill
           obvious without making the others feel dead. */
        .rsvp-row.has-response .rsvp-btn:not(.active) {
            opacity: 0.7;
        }
        .rsvp-row.has-response .rsvp-btn:not(.active):hover {
            opacity: 1;
        }

        /* Mobile: 3 RSVP buttons + 14×20 padding + icon + uppercase 1.4em
           letter-spacing was overflowing the .game-card body on narrow
           viewports (Carlos screenshot May 27 2026, iPhone, CAN'T button
           clipped past card boundary). Tighten everything proportionally
           so all 3 fit inside the card edge with breathing room. */
        @media (max-width: 480px) {
            .rsvp-row { gap: 6px; }
            .rsvp-btn {
                padding: 11px 6px;
                font-size: 11px;
                letter-spacing: 0.4px;
                gap: 4px;
            }
            .rsvp-btn svg { width: 13px; height: 13px; }
        }
        /* Ultra-narrow (small iPhones / split-screen): drop the icons
           entirely so the labels have room to breathe */
        @media (max-width: 360px) {
            .rsvp-btn svg { display: none; }
        }

        /* Carlos May 23 night feedback: in dark mode the inactive RSVP
           pills (MAYBE/CAN'T when GOING is selected, or all 3 when none
           is) had `background: var(--surface)` — same color as the card
           BG — so the pill chrome was invisible. Just floating text.
           Now: elevated surface so the pills pop, stronger border so
           the box shape reads even with no fill color. */
        html[data-theme="dark"] .rsvp-btn:not(.active),
        html[data-theme="auto"] .rsvp-btn:not(.active),
        html:not([data-theme]) .rsvp-btn:not(.active) {
            background: var(--surface-elevated, rgba(255,255,255,0.06));
            border-color: var(--border-strong, rgba(255,255,255,0.18));
        }
        @media (prefers-color-scheme: dark) {
            html[data-theme="auto"] .rsvp-btn:not(.active),
            html:not([data-theme]) .rsvp-btn:not(.active) {
                background: var(--surface-elevated, rgba(255,255,255,0.06));
                border-color: var(--border-strong, rgba(255,255,255,0.18));
            }
        }

        /* When a game's row gets bigger (because RSVP row is open) we relax the right-column
           alignment so the time chip stays vertically centered with the card content. */
        .game-card.has-rsvp { align-items: flex-start; padding-top: 14px; }
        .game-card.has-rsvp .game-card-date { padding-top: 2px; }
        .game-card.has-rsvp .game-card-result { padding-top: 2px; }

        /* ─── Empty state for a filter that returns no games ─── */
        .empty-state {
            text-align: center;
            padding: 48px 20px;
            color: var(--ink-muted);
        }
        .empty-state svg {
            width: 40px; height: 40px;
            color: var(--ink-faint);
            margin-bottom: 12px;
        }
        .empty-state h4 {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1.8px;
            text-transform: uppercase;
            color: var(--ink);
            margin-bottom: 4px;
        }
        .empty-state p {
            font-size: 13px;
            color: var(--ink-muted);
        }

        /* ─── Bottom Nav ─── */
        /* v246: opaque + no backdrop-filter — bleed-into-home-indicator fix */
        .bottom-nav {
            position: fixed; bottom: 0; left: 0; right: 0;
            background: var(--surface);
            border-top: 1px solid var(--border);
            height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
            padding-bottom: env(safe-area-inset-bottom, 0px);
            display: flex; align-items: stretch;
            z-index: 100;
        }
        .bn-item {
            flex: 1;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 6px;
            color: var(--ink-muted);
            transition: color 0.15s ease;
            position: relative;
            padding: 10px 4px;
            margin: 8px 5px;
            border-radius: 16px;
        }
        /* Bottom nav icons — high-specificity rules (no !important) so they win
           cleanly over any cascading rule that may have crept in. Explicit display
           keeps iOS Safari from collapsing an unstyled <svg> in flex column layout. */
        nav.bottom-nav .bn-item svg {
            display: block;
            width: 26px;
            height: 26px;
            stroke-width: 2;
            stroke: currentColor;
            fill: none;
            flex-shrink: 0;
        }
        nav.bottom-nav .bn-item { color: #a1a1aa; }
        nav.bottom-nav .bn-item svg { stroke-width: 1.8; }
        nav.bottom-nav .bn-item.active { color: #ffffff; }
        nav.bottom-nav .bn-item.active svg { stroke-width: 2.4; }
        .bn-label {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }
        .bn-item.active {
            background: linear-gradient(135deg, var(--team-primary), var(--team-secondary));
            color: #ffffff;
            box-shadow: 0 4px 14px color-mix(in srgb, var(--team-primary) 28%, transparent),
                        inset 0 1px 0 rgba(255,255,255,0.18);
        }
        /* ─── This Week map card ─── */
        .week-map-card {
            position: relative;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            overflow: hidden;
            margin: 0 0 18px;
        }
        .week-map-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, var(--team-primary), var(--team-secondary));
            z-index: 2;
        }
        .week-map-eyebrow {
            display: flex; align-items: baseline; justify-content: space-between;
            padding: 14px 18px 10px;
            font-family: 'Saira Condensed', sans-serif;
            font-size: 12px; font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--ink-muted);
        }
        .week-map-eyebrow .count {
            font-family: 'Manrope', sans-serif; font-size: 11px; font-weight: 600;
            letter-spacing: 0; color: var(--ink-faint); text-transform: none;
        }
        #weekScheduleMap {
            height: 200px; width: 100%; background: #eaeef3;
        }
        .week-map-legend {
            display: flex; align-items: center; gap: 16px;
            padding: 12px 18px;
            border-top: 1px solid var(--border);
            font-family: 'Manrope', sans-serif; font-size: 12px; font-weight: 600;
            color: var(--ink-muted);
        }
        .week-map-legend .dot {
            display: inline-block; width: 10px; height: 10px;
            border-radius: 50%; margin-right: 6px; vertical-align: middle;
        }
        .week-map-legend .dot.game { background: #22c55e; }
        .week-map-legend .dot.practice { background: #f59e0b; }
        .week-map-legend .dot.live { background: #ef4444; }
    
        .skeleton-bar { display: inline-block; background: linear-gradient(90deg, var(--surface) 0%, var(--border) 50%, var(--surface) 100%); background-size: 200% 100%; animation: skel-shimmer 1.4s linear infinite; border-radius: 6px; vertical-align: middle; color: transparent !important; }
        .skeleton-bar * { color: transparent !important; }
        @keyframes skel-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
        /* Full-card skeleton — shown until SCv2.loadGames returns. */
        .game-card-skel {
            height: 86px;
            border-radius: var(--radius-sm);
            background: linear-gradient(90deg, var(--surface) 0%, var(--border) 50%, var(--surface) 100%);
            background-size: 200% 100%;
            animation: skel-shimmer 1.4s linear infinite;
        }
        .game-card-skel + .game-card-skel { margin-top: 10px; }
        /* Sort toggle for past games — single button that flips order */
        .schedule-sort-toggle {
            margin: 0 0 12px;
            padding: 8px 14px;
            background: var(--surface);
            border: 1px solid var(--border);
            border-radius: 999px;
            font-family: 'Saira Condensed', sans-serif;
            font-size: 11px; font-weight: 800;
            letter-spacing: 1.4px; text-transform: uppercase;
            color: var(--ink-muted);
            cursor: pointer;
            display: inline-flex; align-items: center; gap: 6px;
            -webkit-tap-highlight-color: transparent;
        }
        .schedule-sort-toggle svg { width: 12px; height: 12px; stroke-width: 2.2; }
        .schedule-sort-toggle:active { transform: scale(0.97); }