/* ====================================================================
         * ACCESSIBILITY — A+ MARATHON SPRINT 8 (May 23 2026)
         * --------------------------------------------------------------------
         * (1) Keyboard focus ring across every interactive element
         * (2) Respect prefers-reduced-motion for vestibular-disorder users
         * (3) Treat role="button" + .ref-clickable divs as buttons for focus
         *
         * Specificity stays low so per-component focus rules can still
         * override (e.g. .pin-key already styles its :focus state).
         * ==================================================================== */
        *:focus-visible {
            outline: 2px solid var(--gold, #f59e0b);
            outline-offset: 2px;
            border-radius: 4px;
        }
        [role="button"]:focus-visible,
        .ref-clickable:focus-visible {
            outline: 2px solid var(--gold, #f59e0b);
            outline-offset: 2px;
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
                scroll-behavior: auto !important;
            }
        }

        :root {
            --bg-primary: #0d1117;
            --bg-card: #161b22;
            --bg-card-hover: #1c2128;
            --border: rgba(255, 255, 255, 0.1);
            --text-primary: #ffffff;
            --text-secondary: #8b949e;
            --text-muted: #6e7681;
            --green: #22c55e;
            --green-dim: rgba(34, 197, 94, 0.2);
            --red: #ef4444;
            --red-dim: rgba(239, 68, 68, 0.2);
            --blue: #3b82f6;
            --blue-dim: rgba(59, 130, 246, 0.2);
            --yellow: #eab308;
            --yellow-dim: rgba(234, 179, 8, 0.2);
            --orange: #f97316;
            --purple: #a855f7;
            --purple-dim: rgba(168, 85, 247, 0.2);
            --gold: #f59e0b;
            --gold-dark: #d97706;
            --gold-glow: rgba(245, 158, 11, 0.3);
            --gold-dim: rgba(245, 158, 11, 0.15);
            /* Alias for cross-app `--gc-accent-gold` references (referee CSS
               uses bare `--gold` historically; design-system never defined the
               --gc-accent-gold token but referee CSS at line 54+1265+1231 etc
               references it). Without this alias the Quick Game bolt SVG fill
               resolved to nothing → defaulted to black (Carlos screenshot at
               6:49am May 23 2026). */
            --gc-accent-gold: var(--gold);
            /* Sprint 9 A+ marathon (May 23 2026): alias local referee tokens
             * to canonical design-system tokens. Light mode + theme overrides
             * applied to --gc-* automatically cascade here. Saves a per-file
             * sweep of 100+ raw hex refs without risking visual regression. */
            --gc-bg-app: var(--bg-primary);
            --gc-bg-panel: var(--bg-card);
            --gc-bg-elevated: var(--bg-card-hover);
            --gc-text-color-primary: var(--text-primary);
            --gc-text-color-secondary: var(--text-secondary);
            --gc-text-color-muted: var(--text-muted);
            --gc-border-subtle: var(--border);
            --gc-success-500: var(--green);
            --gc-danger-500: var(--red);
            --gc-info-500: var(--blue);
            --gc-warning-500: var(--yellow);
            --ref-modal-bg: linear-gradient(175deg, rgba(30,34,48,0.95) 0%, rgba(16,19,28,0.98) 100%);
            --ref-modal-border: 1px solid rgba(255,255,255,0.08);
            --ref-modal-shadow: 0 0 0 1px rgba(0,0,0,0.3), 0 30px 80px rgba(0,0,0,0.8), 0 8px 32px rgba(0,0,0,0.5), 0 0 60px rgba(245,158,11,0.04), inset 0 1px 0 rgba(255,255,255,0.05);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            -webkit-user-select: none;
            user-select: none;
        }

        /* v5: legacy .splash-screen CSS removed — replaced by the boot splash
           overlay in /referee/css/splash.css (loaded in head) which mirrors
           the athlete app pattern. The old logoEntry / logoPulse / textEntry
           keyframes were only used by the legacy splash DOM, also removed. */

        /* v5: Lucide bolt icon inside the QUICK GAME card (replaces ⚡ emoji).
           Aligns with the broadcast-grade icon system used in athlete + coach. */
        .quick-game-title {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            justify-content: center;
        }
        .quick-game-bolt {
            width: 22px;
            height: 22px;
            stroke: var(--gc-accent-gold);
            fill: var(--gc-accent-gold);
            filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.45));
        }

        /* v5: team-logo cell — used in scheduled-game-card rendering.
           Replaces the inline 🏈 fallback with a real broadcast-style chip:
           team-color background, optional logo image, initials fallback when
           the image hangs or fails. The img element fires onerror to swap
           in the initials span, so on slow connections we never block on the
           CDN. */
        .team-logo-cell {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
        }
        .team-logo-cell img {
            background: transparent;
        }
        .team-logo-fallback {
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-size: 16px;
            font-weight: 800;
            color: #ffffff;
            letter-spacing: 0.5px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
        }

        body {
            font-family: 'Rajdhani', sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            min-height: 100vh;
            min-height: 100dvh;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .app-container {
            max-width: 430px;
            width: 100%;
            margin: 0 auto;
            padding: clamp(8px, 2.79vw, 12px) clamp(8px, 2.79vw, 12px);
            padding-top: calc(60px + env(safe-area-inset-top, 0px));
            padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-height: 100vh;
            max-height: 100dvh;
            overflow-y: auto;
        }

        /* PORTRAIT-ONLY responsiveness fix (Carlos, Jun 19): on vertical phones the
           content floated with a big dead zone at the top — the body vertically
           centered a short container AND the 60px top padding stacked on top of the
           standalone-PWA safe-area inset. Top-align + fill the viewport + clear just
           the notch. Scoped to portrait (>350px so the Q333 swipe layout is untouched)
           so the landscape two-column layout is left exactly as-is. */
        @media (orientation: portrait) and (min-width: 351px) {
            body { align-items: flex-start; }
            .app-container {
                padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
                min-height: 100vh;
                min-height: 100dvh;
            }
        }

        /* ===== TINY-SCREEN SWIPE PAGER (Q333-class ~341px portrait) =====
           Default: .ref-pager/.ref-pane are inert column wrappers that reproduce
           the old stacked layout (same 10px rhythm), so normal phones/tablets are
           visually IDENTICAL. The no-scroll swipe behavior is added ONLY in the
           @media (max-width:350px) block below. */
        .ref-pager { display: flex; flex-direction: column; gap: 10px; }
        .ref-pane  { display: flex; flex-direction: column; gap: 10px; }
        .ref-pager-dots { display: none; }
        /* The clock/quarter/down glance-strip is a LANDSCAPE-only affordance (the
           scoring pane needs a clock readout because the clock lives on the other
           swipe pane). In portrait everything is stacked in one view, so the strip
           is redundant — hide it by default; the landscape block re-enables it. */
        .ref-score-strip { display: none; }

        @media (max-width: 350px) {
            /* Fixed-height shell: header on top, pager fills the rest, dots pinned
               at bottom. Nothing scrolls — you only swipe left/right. */
            .app-container {
                height: 100dvh;
                max-height: 100dvh;
                overflow: hidden;
                gap: 8px;
                padding-top: calc(52px + env(safe-area-inset-top, 0px));
                padding-bottom: max(6px, env(safe-area-inset-bottom, 0px));
            }
            .ref-pager {
                flex: 1 1 auto;
                min-height: 0;
                flex-direction: row;
                gap: 0;
                overflow-x: auto;
                overflow-y: hidden;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
                margin: 0 calc(-1 * clamp(8px, 2.79vw, 12px)); /* full-bleed past .app-container padding */
            }
            .ref-pager::-webkit-scrollbar { display: none; }
            .ref-pane {
                flex: 0 0 100%;
                width: 100%;
                height: 100%;
                scroll-snap-align: center;
                justify-content: space-evenly; /* fill the height, distribute sections */
                gap: 8px;
                padding: 0 clamp(8px, 2.79vw, 12px);
                overflow: hidden;
            }
            .ref-section-divider { display: none; }
            .ref-pager-dots {
                display: flex;
                flex: 0 0 auto;
                justify-content: center;
                align-items: center;
                gap: 7px;
                padding: 4px 0 2px;
            }
            .ref-pager-dot {
                width: 7px; height: 7px; border-radius: 50%;
                background: rgba(255,255,255,0.22);
                transition: width 0.2s ease, background 0.2s ease;
            }
            .ref-pager-dot.active {
                width: 22px; border-radius: 4px;
                background: var(--accent, #f59e0b);
            }
        }

        /* HEADER - All inline */
        .header-bar {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            background: var(--bg-card);
            border-radius: 10px;
            flex-shrink: 0;
        }

        .header-btn {
            /* Game-day hit-target: 44px minimum for gloved thumbs (May 23
               2026 audit). Was 36px which was too tight under sideline
               stress + cold weather + gloves. */
            width: 44px;
            height: 44px;
            background: var(--bg-card-hover);
            border: 1px solid var(--border);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            cursor: pointer;
            flex-shrink: 0;
        }

        .header-btn:active {
            background: var(--border);
        }

        .header-btn--end {
            background: var(--red-dim);
            border-color: rgba(239, 68, 68, 0.3);
            color: var(--red);
        }
        .header-btn--end:active {
            background: var(--red);
            color: white;
        }

        /* Back-to-games — leave a game without ending it. Lives in the scoreboard
           header top-left (beside the gear). Pure navigation; live game keeps
           running. (Jun 21 2026.) */
        .ref-back-to-games {
            display: inline-flex; align-items: center; gap: 6px;
            background: var(--bg-card); border: 1px solid var(--border); color: var(--text-primary);
            font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.5px; text-transform: uppercase;
            padding: 8px 12px; border-radius: 10px; cursor: pointer; min-height: 40px;
        }
        .ref-back-to-games:active { background: var(--bg-card-hover); }

        .game-id-center {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
        }

        .game-id-label {
            font-size: 12px;
            color: var(--text-muted);
        }

        .game-id-value {
            flex: 1;                 /* center between the gear (left) and END GAME (right) */
            text-align: center;
            font-family: 'Orbitron', monospace;
            font-size: 16px;
            font-weight: 700;
            color: var(--green);
            letter-spacing: 2px;
        }

        /* Portrait / tablet END GAME button (right side of the header). Hidden on the
           Q333 wrist phone — see the landscape @media block, where END GAME lives in
           Settings instead so the tiny screen can stay gear-only. */
        .header-endgame-btn {
            flex-shrink: 0;
            min-height: 44px;        /* gloved-thumb hit target (May 23 2026 audit) */
            padding: 0 14px;
            background: var(--red, #dc2626);
            border: none;
            border-radius: 8px;
            color: #fff;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 1px;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .header-endgame-btn:active { filter: brightness(1.1); }

        /* Possession swap lives ONLY on the Q333 landscape Control screen (the
           landscape @media block flips this to display:flex). In portrait everything
           fits on one page, so the ref just taps a team name to switch possession. */
        .ref-poss-swap { display: none; }

        /* CLOCK CARD - Game clock left, Play clock right */
        .clock-card {
            background: #0d0f12;
            border-radius: 12px;
            padding: clamp(10px, 3.26vw, 14px);
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: clamp(8px, 2.79vw, 12px);
            flex-shrink: 0;
            overflow: hidden;
            position: relative;
            box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.6);
        }

        /* Carbon fiber diagonal stripe texture */
        .clock-card::before {
            content: "";
            position: absolute;
            top: -50%;
            left: -50%;
            right: -50%;
            bottom: -50%;
            background: repeating-linear-gradient(45deg,
                transparent 0,
                transparent 5px,
                rgba(255, 255, 255, 0.03) 5px,
                rgba(255, 255, 255, 0.03) 10px);
            pointer-events: none;
            z-index: 0;
        }

        .clock-card > * {
            position: relative;
            z-index: 1;
        }

        .game-clock-section {
            display: flex;
            flex-direction: column;
        }

        .clock-label {
            font-size: 11px;
            color: var(--text-secondary);
            letter-spacing: 1.5px;
            margin-bottom: 4px;
        }

        .game-clock-display {
            font-family: 'Rajdhani', sans-serif;
            font-size: clamp(74px, 23.26vw, 100px);
            font-weight: 700;
            color: var(--text-primary);
            letter-spacing: 2px;
            line-height: 1;
            min-width: 4.5ch;
            text-align: center;
        }

        /* ⛔ NO GLOW ON A CLOCK THAT TICKS (Carlos, Sep 17 2026). This blur was
           painted on the one element that repaints every second for the whole
           game, and the colour alone already says the clock is running. Same
           family as the v200 animated box-shadow and the v225 blurs. */
        .game-clock-display.running {
            color: var(--green);
        }

        /* Fixed-slot digits (Aug 29 2026): each digit sits in a 1ch cell (the
           width of '0', Rajdhani's widest digit); the colon in a 0.3em cell.
           The string never reflows, and a tick repaints one cell, not the
           whole plate. Applies to the game clock, the score-strip clock and
           the play clock — every element paintClock() writes. */
        .game-clock-display, .play-clock-display, #scoreStripClock {
            white-space: nowrap;
            letter-spacing: 0;
        }
        .game-clock-display .cd, .play-clock-display .cd, #scoreStripClock .cd {
            display: inline-block; width: 1ch; text-align: center;
        }
        .game-clock-display .cc, #scoreStripClock .cc {
            display: inline-block; width: 0.3em; text-align: center;
        }

        .game-clock-buttons {
            display: flex;
            justify-content: center;
            margin-top: 12px;
        }

        .clock-toggle-btn {
            width: 100%;
            /* Game-day hit-target: 48px min-height (May 23 2026 audit). */
            min-height: 48px;
            padding: 12px 24px;
            border-radius: 10px;
            background: var(--green);
            border: none;
            color: var(--bg-primary);
            font-family: 'Rajdhani', sans-serif;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 2px;
            transition: all 0.2s ease;
        }
        .clock-toggle-btn:active { transform: scale(0.98); }
        .clock-toggle-btn.running {
            background: var(--red);
            color: white;
        }
        /* A mirror / view-only band: no START under its clock, at every width (Sep 27 2026). */
        /* transition none: the base rule's `transition: all` would fade visibility over 0.2 s. */
        .clock-toggle-btn.is-view-only { visibility: hidden; pointer-events: none; transition: none; }

        /* Play Clock Section - Redesigned */
        .play-clock-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: stretch;
            flex-shrink: 0;
            width: clamp(89px, 27.91vw, 120px);
        }

        .play-clock-container {
            background: var(--yellow);
            border: 3px solid transparent;
            border-radius: 12px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            width: 100%;
            flex: 1;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.3s, border-color 0.3s;
            position: relative;
            overflow: hidden;
        }

        .play-clock-container:active {
            opacity: 0.85;
        }

        /* Running state — dark bg via ::after mask, content on top */
        .play-clock-container.running {
            background: transparent;
        }

        .play-clock-container.running .play-clock-display {
            color: var(--yellow);
        }

        .play-clock-container.running .play-clock-sublabel {
            color: rgba(255, 255, 255, 0.5);
        }

        .play-clock-container.running .play-clock-box {
            position: relative;
            z-index: 3;
        }

        /* Running = a solid red ring (the 4px band the inner mask leaves).
           ⛔ Aug 29 2026: this used to be a SPINNING conic wedge. Any infinite
           animation keeps WebView → hwui → SurfaceFlinger producing 60 frames a
           second for as long as it is on screen; on the wristband that is a
           full CPU core and the reason every device died at hour four (4h09m
           of CPU in a 3h40m window, measured from batterystats). State is
           carried by colour; the number underneath already counts down. */
        .play-clock-container.running::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: var(--red);
            z-index: 1;
        }

        /* Inner mask — the dark background, sits above the spin, below content */
        .play-clock-container.running::after {
            content: '';
            position: absolute;
            inset: 4px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.9);
            z-index: 2;
        }

        /* Warning state (<=10s) — red background */
        .play-clock-container.pc-warning {
            background: var(--red);
        }

        .play-clock-container.pc-warning .play-clock-display {
            color: #fff;
        }

        .play-clock-container.pc-warning .play-clock-sublabel {
            color: rgba(255, 255, 255, 0.6);
        }

        /* Warning (<=10s) — white ring on red */
        .play-clock-container.pc-warning::before {
            background: #fff;
        }

        .play-clock-container.pc-warning::after {
            background: var(--red);
        }

        .play-clock-container.pc-warning .play-clock-display {
            color: #fff;
        }

        .play-clock-container.pc-warning .play-clock-sublabel {
            color: rgba(255, 255, 255, 0.6);
        }

        /* Danger (<=5s) — white ring on red, white digits. No blink: a blink
           is an infinite animation (see .running::before). */
        .play-clock-container.pc-danger::before {
            background: #fff;
        }

        .play-clock-container.pc-danger::after {
            background: var(--red);
            inset: 8px;            /* thicker white band than warning — the state is readable without a blink */
            border-radius: 6px;
        }

        .play-clock-container.pc-danger .play-clock-display {
            color: #fff;
        }

        .play-clock-container.pc-danger .play-clock-sublabel {
            color: rgba(255, 255, 255, 0.6);
        }

        .play-clock-box {
            text-align: center;
        }

        .play-clock-display {
            font-family: 'Rajdhani', sans-serif;
            font-size: clamp(62px, 19.54vw, 84px);
            font-weight: 700;
            color: #000;
            line-height: 1;
        }

        .play-clock-sublabel {
            font-family: 'Rajdhani', sans-serif;
            font-size: 12px;
            color: rgba(0, 0, 0, 0.55);
            margin-top: 6px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            font-weight: 800;
            line-height: 1.6;
            text-align: center;
        }

        /* QUARTER TABS ROW */
        .ref-quarter-tabs {
            display: flex;
            gap: 4px;
            background: #111;
            padding: 3px;
            border-radius: 8px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
            flex-shrink: 0;
        }

        .ref-quarter-tab {
            flex: 1;
            background: transparent;
            border: none;
            color: #555;
            padding: 12px 0;
            border-radius: 6px;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: 18px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
            overflow: hidden;
            letter-spacing: 1px;
        }

        .ref-quarter-tab:active {
            transform: scale(0.96);
        }

        .ref-quarter-tab.active {
            background: linear-gradient(180deg, #1b262c 0%, #0d1216 100%);
            color: #fff;
            /* No glow (Sep 17 2026): the fill and the volt edge say which
               period is live; a blurred shadow repaints with every quarter
               change and on every band repaint of this row. */
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.1),
                0 4px 8px rgba(0, 0, 0, 0.4);
        }

        .ref-quarter-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 20%;
            right: 20%;
            height: 2px;
            background: var(--green);
            box-shadow: 0 -2px 10px var(--green);
        }

        /* DOWN ROW */
        .ref-down-row {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            padding: 14px 16px;
            background: linear-gradient(180deg, #2a3a44 0%, #182228 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            cursor: pointer;
            flex-shrink: 0;
            -webkit-tap-highlight-color: transparent;
        }

        .ref-down-row:active {
            transform: scale(0.98);
            opacity: 0.9;
        }

        .ref-down-label {
            font-family: 'Rajdhani', sans-serif;
            font-size: 28px;
            font-weight: 700;
            color: white;
            letter-spacing: 1px;
            flex: 1;
            text-align: center;
        }

        .ref-down-bars {
            display: flex;
            gap: 4px;
        }

        .ref-down-bar {
            width: 6px;
            height: 28px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.12);
            transition: all 0.3s;
        }

        .ref-down-bar.active {
            background: rgba(255, 255, 255, 0.7);
            box-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
        }

        /* 4th down — danger state */
        .ref-down-row.fourth-down {
            background: linear-gradient(180deg, var(--red) 0%, #7f1d1d 100%);
            border-color: rgba(239, 68, 68, 0.4);
        }

        .ref-down-row.fourth-down .ref-down-bar {
            background: rgba(255, 255, 255, 0.15);
        }

        .ref-section-divider {
            border: none;
            height: 1px;
            background: rgba(245, 158, 11, 0.3);
            margin: 10px 0;
        }

        /* ── SCOREBOARD V2 — Sidebar + Stacked Team Rows ── */
        .ref-scoreboard-v2 {
            display: flex;
            flex-direction: column;
            gap: 0;
            flex-shrink: 0;
        }

        .ref-team-stack {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
            min-width: 0;
        }

        .ref-team-row {
            display: flex;
            flex-direction: column;
            padding: 10px 14px;
            border-radius: 0;
            /* Chrome 110 fallback (color-mix is Chrome 111+ / old Android WebViews drop
               the whole declaration, killing the team color). Solid tint first, gradient
               second — old engines keep the solid, modern engines use the gradient. */
            background: var(--team-tint, #22c55e);
            background: linear-gradient(135deg,
                var(--team-tint, #22c55e) 0%,
                color-mix(in srgb, var(--team-tint, #22c55e) 45%, black) 100%);
            border: 1px solid rgba(255, 255, 255, 0.1);
            gap: 8px;
            position: relative;
            overflow: hidden;
            box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.12);
            transition: filter 0.4s ease, opacity 0.4s ease;
        }

        /* Non-possession team — subtle dim */
        .ref-team-row:not(.has-possession) {
            filter: saturate(0.6) brightness(0.85);
            opacity: 0.85;
        }

        .ref-team-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
        }

        /* Glossy top shine (default) — becomes sweep on possession */
        .ref-team-row::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 50%;
            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), transparent);
            pointer-events: none;
            z-index: 1;
            border-radius: 0;
        }

        /* Team logo — bleeds off the right edge */
        .ref-team-row::after {
            content: '';
            position: absolute;
            right: -15px;
            top: 50%;
            transform: translateY(-50%);
            width: 90px;
            height: 90px;
            background-image: var(--team-logo);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 1;
            z-index: 0;
            pointer-events: none;
            filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
        }
        .ref-team-row > * { position: relative; z-index: 2; }

        /* Possession — the frame lives in the CONSOLE ROUND 2 block below
           (Sep 17 2026). The 16px green halo that sat here is gone: it was a
           blurred shadow on a plate that repaints with every score, and the
           red frame is the marker now. */
        .ref-team-row.has-possession {
            box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.12);
            overflow: hidden;
        }

        /* ⛔ Aug 29 2026: the possession "shine sweep" (::before, 5s infinite)
           is gone, not paused. Possession is shown by the row state and the
           ball badge. Nothing on a wristband animates forever. */

        /* Football emoji badge on team row */
        .ref-team-football {
            font-size: 18px;
            flex-shrink: 0;
            opacity: 0.12;
            transition: opacity 0.4s, transform 0.4s;
            transform: scale(0.8);
            line-height: 1;
        }
        .ref-team-row.has-possession .ref-team-football {
            opacity: 1;
            transform: scale(1);
        }

        /* Make team identity tappable for possession */
        .ref-team-identity {
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }

        /* Identity block: logo + name */
        .ref-team-identity {
            display: flex;
            align-items: center;
            gap: 10px;
            flex: 1;
            min-width: 0;
        }
        .ref-team-info { display: flex; flex-direction: column; min-width: 0; }

        .ref-team-row .team-name {
            font-size: clamp(26px, 7.44vw, 32px);
            font-weight: 700;
            color: #fff;
            letter-spacing: 0.5px;
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: clamp(160px, 50vw, 220px);
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        }
        .ref-team-row .team-label {
            font-size: 9px;
            color: rgba(255, 255, 255, 0.7);
            letter-spacing: 1px;
            text-transform: uppercase;
            text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
        }

        .ref-team-row .team-logo {
            width: 40px;
            height: 40px;
            border-radius: 8px;
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 12px;
            color: white;
            flex-shrink: 0;
            margin-bottom: 0;
            overflow: hidden;
        }

        /* Timeout dots — horizontal under team name */
        .ref-team-timeouts {
            display: flex;
            flex-direction: row;
            gap: 6px;
            align-items: center;
            cursor: pointer;
            padding: 6px 8px;
            border-radius: 8px;
            -webkit-tap-highlight-color: transparent;
        }

        .ref-team-timeouts:active {
            background: rgba(255, 255, 255, 0.08);
        }

        .timeout-dot {
            width: clamp(16px, 5vw, 22px);
            height: clamp(16px, 5vw, 22px);
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.15);
            border: 2px solid rgba(255, 255, 255, 0.2);
            transition: all 0.2s;
        }

        .timeout-dot.active {
            background: var(--yellow);
            border-color: var(--yellow);
            box-shadow: 0 0 8px rgba(245, 158, 11, 0.4);
        }

        /* Score box — larger, more prominent */
        .ref-team-row .score-box {
            width: auto;
            min-width: clamp(64px, 20vw, 86px);
            height: clamp(54px, 16.74vw, 72px);
            padding: 0 12px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            background: #0d0f12;
            border: 1px solid rgba(255,255,255,0.1);
            box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
            flex-shrink: 0;
        }
        /* Carbon fiber diagonal stripes (matches clock card) */
        .ref-team-row .score-box::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            right: -50%;
            bottom: -50%;
            background: repeating-linear-gradient(45deg,
                transparent 0,
                transparent 5px,
                rgba(255, 255, 255, 0.03) 5px,
                rgba(255, 255, 255, 0.03) 10px);
            pointer-events: none;
            z-index: 0;
        }
        .ref-team-row .score-box > * {
            position: relative;
            z-index: 1;
        }
        .ref-team-row .score-box:active { background: #141618; }
        .ref-team-row .score-value {
            font-family: 'Rajdhani', sans-serif;
            font-size: clamp(40px, 12.56vw, 54px);
            font-weight: 700;
            color: white;
            line-height: 1;
        }

        /* Scoring buttons — match quarter tab style (dark pushable buttons) */
        .ref-score-buttons {
            display: flex;
            gap: 4px;
            background: #111;
            padding: 3px;
            border-radius: 8px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
        }
        .ref-score-btn {
            flex: 1;
            /* Game-day hit-target: 48px min-height for gloved thumbs.
               Was 10px padding → ~30px effective height, too tight under
               sideline stress (May 23 2026 audit). */
            min-height: 48px;
            padding: 10px 0;
            border-radius: 6px;
            border: none;
            background: linear-gradient(180deg, #2a3a44 0%, #182228 100%);
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1px;
            transition: all 0.2s;
            color: #bbb;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.08),
                0 3px 6px rgba(0, 0, 0, 0.4);
            -webkit-tap-highlight-color: transparent;
            user-select: none;
        }
        .ref-score-btn:active {
            transform: scale(0.96);
            box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
        }
        /* Hold-to-confirm visual feedback */
        .ref-score-btn.holding {
            background: linear-gradient(180deg, #263340 0%, #141e26 100%);
            color: #fff;
            box-shadow:
                inset 0 1px 0 rgba(255, 255, 255, 0.12),
                0 0 12px rgba(245, 158, 11, 0.3);
        }
        .ref-score-btn.confirmed {
            background: linear-gradient(180deg, #2a3a20 0%, #1a2a14 100%);
            color: var(--green);
        }
        .ref-score-btn-pts {
            font-family: 'Rajdhani', sans-serif;
            font-size: clamp(16px, 5.12vw, 22px);
            font-weight: 700;
            line-height: 1;
            letter-spacing: 1px;
            transition: color 0.2s;
        }
        .ref-score-btn-label {
            font-family: 'Rajdhani', sans-serif;
            font-size: 10px;
            font-weight: 600;
            color: inherit;
            opacity: 0.5;
            letter-spacing: 1px;
            transition: opacity 0.2s;
        }
        .ref-score-btn.holding .ref-score-btn-label,
        .ref-score-btn.confirmed .ref-score-btn-label {
            opacity: 0.8;
        }
        /* Progress bar fills during hold */
        .ref-score-btn {
            position: relative;
            overflow: hidden;
        }
        .ref-score-btn::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 3px;
            width: 0%;
            background: var(--yellow);
            box-shadow: 0 -1px 6px var(--yellow);
            transition: none;
            border-radius: 0 0 6px 6px;
        }
        .ref-score-btn.holding::after {
            width: 100%;
            transition: width 0.6s linear;
        }
        .ref-score-btn.confirmed::after {
            width: 100%;
            background: var(--green);
            box-shadow: 0 -1px 6px var(--green);
        }

        /* POSSESSION CARD */

        /* Score Modal */
        .modal-backdrop {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal-backdrop.active { display: flex; }

        .score-modal {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            width: 280px;
            text-align: center;
        }

        .modal-title {
            font-size: 14px;
            color: var(--text-secondary);
            letter-spacing: 1px;
            margin-bottom: 16px;
        }

        .modal-score {
            font-family: 'Orbitron', monospace;
            font-size: 80px;
            font-weight: 700;
            color: white;
            margin-bottom: 24px;
        }

        .modal-btns {
            display: flex;
            gap: 16px;
            justify-content: center;
            margin-bottom: 24px;
        }

        .modal-adj-btn {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            border: 3px solid rgba(255, 255, 255, 0.5);
            background: transparent;
            font-size: 32px;
            font-weight: 700;
            cursor: pointer;
            color: white;
        }

        .modal-adj-btn:active {
            background: rgba(255, 255, 255, 0.1);
        }

        .modal-close {
            padding: 12px 36px;
            background: var(--bg-card-hover);
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-primary);
            font-weight: 700;
            font-size: 14px;
            cursor: pointer;
        }

        /* Timeout Modal */
        .timeout-modal {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 28px;
            width: 300px;
            text-align: center;
        }

        .timeout-modal-title {
            font-size: 18px;
            color: var(--yellow);
            letter-spacing: 2px;
            margin-bottom: 8px;
            font-weight: 700;
        }

        .timeout-modal-sub {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 24px;
        }

        .timeout-team-btns {
            display: flex;
            gap: 16px;
            justify-content: center;
            margin-bottom: 20px;
        }

        .timeout-team-btn {
            flex: 1;
            padding: 20px 16px;
            border-radius: 12px;
            border: 3px solid;
            background: transparent;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            transition: transform 0.1s, background 0.2s;
        }

        .timeout-team-btn:active {
            transform: scale(0.97);
        }

        .timeout-team-btn.home {
            border-color: rgba(255, 255, 255, 0.5);
            color: white;
        }

        .timeout-team-btn.home:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .timeout-team-btn.away {
            border-color: rgba(255, 255, 255, 0.5);
            color: white;
        }

        .timeout-team-btn.away:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .timeout-team-btn.disabled {
            opacity: 0.4;
            pointer-events: none;
        }

        .timeout-team-name {
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 1px;
        }

        .timeout-team-remaining {
            font-family: 'Orbitron', monospace;
            font-size: 24px;
            font-weight: 700;
        }

        .timeout-team-dots {
            display: flex;
            gap: 6px;
        }

        .timeout-team-dots .timeout-dot {
            width: 12px;
            height: 12px;
        }

        .timeout-cancel {
            padding: 10px 30px;
            background: transparent;
            border: 1px solid var(--border);
            border-radius: 8px;
            color: var(--text-secondary);
            font-weight: 600;
            font-size: 14px;
            cursor: pointer;
        }

        .timeout-cancel:active {
            background: var(--bg-card-hover);
        }

        /* ==================== REFEREE ONBOARDING ==================== */

        @keyframes modalSlideUp {
            0% { opacity: 0; transform: translateY(20px); }
            100% { opacity: 1; transform: translateY(0); }
        }

        .ref-onboarding {
            overflow: hidden;
        }

        .ref-onboarding::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(245, 158, 11, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(245, 158, 11, 0.06) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
        }

        .ref-onboarding::after {
            content: '';
            position: absolute;
            top: 30%;
            left: 50%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        /* .onboarding-modal/.ref-onboarding-modal glassmorphic styles removed —
           these elements use .ref-premium class in HTML */

        .onboarding-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 16px;
            border-radius: 16px;
        }

        .onboarding-title {
            font-family: 'Orbitron', monospace;
            font-size: 22px;
            font-weight: 800;
            color: var(--green);
            letter-spacing: 2px;
            margin-bottom: 8px;
        }

        .onboarding-subtitle {
            font-size: 16px;
            color: var(--text-secondary);
            margin-bottom: 24px;
        }

        .onboarding-options {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

/* ⛔ NO backdrop-filter / filter:blur ON THE BAND (Sep 12 2026). On the Q333's
   MT6765 WebView a backdrop blur forces the compositor to read back and re-blur
   the layer beneath it on EVERY frame the element is visible — the GPU twin of
   the infinite-animation spin fixed Aug 29. Carlos felt the stutter on a FULL
   battery during provisioning: the two blur(10px) rules sat on the onboarding
   options, under the hold-to-confirm rAF loop. --ref-modal-bg is already
   0.95–0.98 opaque, so the modals look the same without it. Gate:
   scripts/audit-referee-motion.js fails the deploy on the next one. */
        .onboarding-option {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 18px 20px;
            cursor: pointer;
            transition: all 0.25s ease;
            display: flex;
            align-items: center;
            gap: 16px;
            text-align: left;
        }

        .onboarding-option:hover, .onboarding-option:active {
            border-color: rgba(245, 158, 11, 0.4);
            background: rgba(245, 158, 11, 0.08);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(245, 158, 11, 0.15);
        }

        .onboarding-option.league:hover, .onboarding-option.league:active {
            border-color: rgba(234, 179, 8, 0.5);
            background: rgba(234, 179, 8, 0.12);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(234, 179, 8, 0.2);
        }

        .onboarding-option-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            flex-shrink: 0;
        }

        .onboarding-option.league .onboarding-option-icon {
            background: var(--yellow-dim);
        }

        .onboarding-option.quick .onboarding-option-icon {
            background: var(--green-dim);
        }

        .onboarding-option.account .onboarding-option-icon {
            background: var(--blue-dim);
        }

        .onboarding-option.demo {
            border: 2px solid var(--gc-accent-gold);
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(217, 119, 6, 0.1));
        }

        .onboarding-option.demo:hover, .onboarding-option.demo:active {
            border-color: var(--gc-accent-gold);
            background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.15));
            box-shadow: 0 12px 32px rgba(245, 158, 11, 0.35);
            transform: translateY(-3px);
        }

        .onboarding-option.demo .onboarding-option-icon {
            background: transparent;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            padding: 0;
            width: auto;
            height: auto;
            border-radius: 0;
        }

        .onboarding-option.demo .onboarding-option-icon img {
            width: 36px;
            height: 36px;
            object-fit: contain;
        }

        .demo-vs {
            font-size: 10px;
            font-weight: 800;
            color: var(--gc-accent-gold);
            line-height: 1;
        }

        .onboarding-option-text {
            flex: 1;
        }

        .onboarding-option-title {
            font-size: 17px;
            font-weight: 700;
            color: var(--text-primary);
            margin-bottom: 2px;
        }

        .onboarding-option-desc {
            font-size: 13px;
            color: var(--text-secondary);
        }

        /* PIN Entry Screen */
        .pin-entry-screen {
            display: none;
        }

        .pin-entry-screen.active {
            display: block;
        }

        .pin-back-btn {
            position: absolute;
            top: 16px;
            left: 16px;
            background: var(--bg-card-hover);
            border: 1px solid var(--border);
            border-radius: 8px;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-secondary);
            cursor: pointer;
        }

        .pin-display {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin: 24px 0;
        }

        .pin-digit {
            width: 44px;
            height: 56px;
            background: var(--bg-card-hover);
            border: 2px solid var(--border);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Orbitron', monospace;
            font-size: 24px;
            font-weight: 700;
            color: var(--text-primary);
        }

        .pin-digit.filled {
            border-color: var(--yellow);
            color: var(--yellow);
        }

        .pin-digit.current {
            border-color: var(--yellow);
        }


        .pin-keypad {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            max-width: 280px;
            margin: 0 auto;
        }

        .pin-key {
            height: 56px;
            background: var(--bg-card-hover);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text-primary);
            font-family: 'Rajdhani', sans-serif;
            font-size: 24px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.15s;
        }

        .pin-key:active {
            background: var(--yellow);
            color: var(--bg-primary);
            transform: scale(0.95);
        }

        .pin-key.action {
            font-size: 14px;
            color: var(--text-secondary);
        }

        .pin-key.go {
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            color: #0a0d14;
            border-color: var(--gold);
            font-weight: 800;
        }

        .pin-key.go:active {
            background: linear-gradient(135deg, var(--gold-dark), #b45309);
        }

        .pin-error {
            color: var(--red);
            font-size: 14px;
            margin-top: 16px;
            min-height: 20px;
            line-height: 1.4;
            padding: 12px 16px;
            background: rgba(239, 68, 68, 0.1);
            border-radius: 8px;
            text-align: center;
        }

        .pin-error strong {
            display: block;
            font-size: 15px;
            margin-bottom: 4px;
        }

        .pin-loading {
            display: none;
            color: var(--text-secondary);
            font-size: 14px;
            margin-top: 16px;
        }

        .pin-loading.active {
            display: block;
        }

        /* Game Selection Modal
           Carlos screenshot (May 23 2026 1:58am): modal was rendering half off
           the right edge of iPhone portrait after PIN auth. Root cause was the
           `position: relative; overflow: hidden` here overriding the design-
           system's `.gc-modal-backdrop { position: fixed; inset: 0 }`. The
           backdrop should stay full-viewport; the gold-grid + radial-glow
           pseudo-elements still anchor correctly to the fixed backdrop. */
        #gameSelectModal::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image:
                linear-gradient(rgba(245, 158, 11, 0.06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(245, 158, 11, 0.06) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
        }

        #gameSelectModal::after {
            content: '';
            position: absolute;
            top: 30%;
            left: 50%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(245, 158, 11, 0.12) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            pointer-events: none;
        }

        /* #gameSelectModal > .gc-modal glassmorphic styles removed —
           element uses .ref-premium class in HTML */

        .game-select-modal {
            background: var(--bg-card);
            border-radius: 16px;
            padding: 24px;
            width: 360px;
            max-height: 85vh;
            overflow-y: auto;
        }

        #gameSelectModal .gc-modal-title {
            font-family: 'Orbitron', monospace;
            color: var(--gold);
            letter-spacing: 4px;
            font-weight: 700;
        }

        .game-select-title {
            font-family: 'Orbitron', monospace;
            font-size: 24px;
            color: var(--gold);
            letter-spacing: 4px;
            margin-bottom: 8px;
            font-weight: 700;
            text-align: center;
        }

        .game-select-sub {
            font-size: 16px;
            color: var(--text-secondary);
            margin-bottom: 24px;
            text-align: center;
        }

        .game-card {
            background: var(--bg-card-hover);
            border: 2px solid var(--border);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 16px;
            cursor: pointer;
            transition: all 0.2s;
        }

        .game-card:hover, .game-card:active {
            border-color: var(--green);
            background: rgba(34, 197, 94, 0.1);
        }

        .game-card-date {
            font-size: 14px;
            color: var(--text-muted);
            margin-bottom: 12px;
            text-align: center;
        }

        .game-card-matchup {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
        }

        .game-card-team {
            text-align: center;
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .team-logo {
            width: 48px;
            height: 48px;
            border-radius: 0;
            background: transparent;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 16px;
            color: white;
            margin-bottom: 8px;
            overflow: visible;
        }

        .team-logo-img {
            width: 56px;
            height: 56px;
            border-radius: 0;
            object-fit: contain;
        }

        .game-card-team-name {
            font-size: 18px;
            font-weight: 700;
            color: white;
            margin-bottom: 4px;
        }

        .game-card-team-label {
            font-size: 12px;
            color: var(--text-muted);
        }

        .game-card-vs {
            font-size: 16px;
            color: var(--text-muted);
            font-weight: 700;
        }

        .game-card-field {
            font-size: 14px;
            color: var(--text-secondary);
            margin-top: 14px;
            text-align: center;
        }

        /* Self-serve field picker — big in-order grid (portrait 2-up, landscape single row).
           A ref picks the field they're working; each tile shows "FIELD" + the number. */
        .ref-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
        .ref-field-pick-btn {
            /* ⛔ NOT aspect-ratio (Sep 9 2026). 1/0.66 pinned the tile to 73px on a
               430px phone while the content — FIELD label, numeral, park — measured
               84px, so the park line was clipped by exactly its own height and a
               referee saw two tiles reading "1" with nothing to tell them apart.
               A min-height lets a tile that carries a park grow to hold it; one
               without a park still sits at the old size. */
            min-height: 92px; border-radius: 16px; border: 1px solid var(--border);
            background: var(--bg-card); color: var(--text-primary);
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
            cursor: pointer;
            /* ⛔ THE TYPE LIVES ON THE PARTS, NOT ON THE TILE (Sep 9 2026). A single
               3.4rem Orbitron rule on the button meant every character of a field
               NAME got the numeral treatment — fine for "2", catastrophic for
               "Wayne Hills Aux Field 1", which overflowed into its neighbours and
               could not be read at all. The identifier and the park are now two
               spans with their own faces and sizes. */
            padding: 6px 8px; overflow: hidden;
        }
        /* Identifier: Orbitron ONLY when it is genuinely a numeral (Carlos, Aug 9 2026
           — Orbitron is numerals only; it is unreadable as text). */
        .ref-field-pick-btn .rfp-id {
            font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 3.4rem;
            line-height: 0.82; max-width: 100%; overflow-wrap: anywhere;
        }
        /* A lettered or worded identifier ("G", "Turf", a name with no "field" in it)
           reads in the text face at a size that cannot overflow the tile. */
        .ref-field-pick-btn .rfp-id.is-text {
            font-family: 'Saira Condensed', sans-serif; font-size: 1.6rem;
            letter-spacing: 0.5px; line-height: 1.05; text-transform: uppercase;
        }
        /* The park. Not decoration: Wayne plays a Field 1 at two different parks on
           the same day, so this line is what tells two identical tiles apart. */
        .ref-field-pick-btn .rfp-where {
            font-family: 'Saira Condensed', sans-serif; font-weight: 700; font-size: 0.72rem;
            letter-spacing: 1.2px; text-transform: uppercase; line-height: 1.15;
            color: var(--text-secondary); max-width: 100%; overflow-wrap: anywhere;
            margin-top: 3px;
        }
        .ref-field-pick-btn:active { transform: scale(0.98); }
        .ref-field-pick-btn::before { content: 'FIELD'; font-family: 'Saira Condensed', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 2px; color: var(--gold); }
        /* Landscape Q333: all fields in one row, fully visible, no scroll. */
        /* Q333 landscape (716×298): 4 columns × up to 2 rows so fields 1-4 are
           one glance and up to 8 fit with NO scrolling (scrolling on the wrist is
           finicky → accidental wrong taps). Uses max-height:460px to match the
           app's established Q333 landscape breakpoint (the game screen) — the old
           360px never triggered on the device. Tiles short enough that 2 rows fit. */
        @media (orientation: landscape) and (max-height: 460px) {
            .ref-field-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; }
            /* Fill the tile: big Orbitron number dominates, small FIELD label above.
               ~100px tall × 2 rows still fits the 298px Q333 with no scroll. */
            .ref-field-pick-btn { aspect-ratio: auto; height: 100px; gap: 0; }
            .ref-field-pick-btn .rfp-id { font-size: 3.6rem; }
            .ref-field-pick-btn .rfp-id.is-text { font-size: 1.5rem; }
            /* On the wrist the park is one tight line — the tile is 100px tall and the
               numeral has to stay the thing you see from arm's length. */
            .ref-field-pick-btn .rfp-where {
                font-size: 0.62rem; letter-spacing: 0.8px; white-space: nowrap;
                overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
            }
            .ref-field-pick-btn::before { font-size: 0.84rem; letter-spacing: 2px; }
        }
        /* "Back to field selector" — shown above a field's game list so a ref can
           always step back up to the field picker (Carlos, Jun 19). */
        .ref-back-fields {
            display: inline-flex; align-items: center; gap: 6px;
            margin: 0 0 14px; padding: 9px 14px;
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.14);
            border-radius: 10px;
            color: var(--gc-text-secondary, #9aa3b2);
            font-family: 'Rajdhani', sans-serif; font-weight: 700;
            font-size: 0.92rem; letter-spacing: 0.4px; text-transform: uppercase;
            cursor: pointer; -webkit-tap-highlight-color: transparent;
            transition: color 0.15s ease, border-color 0.15s ease;
        }
        .ref-back-fields:hover, .ref-back-fields:active { color: #fff; border-color: var(--yellow); }
        .ref-back-fields svg { flex-shrink: 0; }

        /* Quick Game Card - Stands out */
        .quick-game-card {
            background: linear-gradient(135deg, rgba(234, 179, 8, 0.15) 0%, rgba(249, 115, 22, 0.15) 100%);
            border: 2px solid var(--yellow);
            border-radius: 16px;
            padding: 20px;
            margin-bottom: 20px;
            cursor: pointer;
            transition: all 0.25s ease;
            text-align: center;
            box-shadow: 0 0 20px rgba(234, 179, 8, 0.1);
        }

        .quick-game-card:hover, .quick-game-card:active {
            border-color: var(--orange);
            background: linear-gradient(135deg, rgba(234, 179, 8, 0.25) 0%, rgba(249, 115, 22, 0.25) 100%);
            transform: translateY(-2px);
            box-shadow: 0 12px 32px rgba(234, 179, 8, 0.25);
        }

        .quick-game-icon {
            font-size: 32px;
            margin-bottom: 8px;
        }

        .quick-game-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--yellow);
            letter-spacing: 1px;
            margin-bottom: 4px;
        }

        .quick-game-subtitle {
            font-size: 13px;
            color: var(--text-secondary);
        }

        .game-list-divider {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }

        .game-list-divider::before,
        .game-list-divider::after {
            content: '';
            flex: 1;
            height: 1px;
            background: var(--border);
        }

        .game-list-divider span {
            font-size: 11px;
            color: var(--text-muted);
            letter-spacing: 1px;
        }

        .icon { width: 18px; height: 18px; }

        /* QR Code Share Modal */
        .qr-modal {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 28px;
            width: 320px;
            text-align: center;
        }

        .qr-modal-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--green);
            letter-spacing: 1px;
            margin-bottom: 6px;
        }

        .qr-modal-subtitle {
            font-size: 13px;
            color: var(--text-secondary);
            margin-bottom: 20px;
        }

        .qr-code-container {
            background: white;
            border-radius: 16px;
            padding: 16px;
            display: inline-block;
            margin-bottom: 16px;
        }

        .qr-code-container img {
            display: block;
            width: 180px;
            height: 180px;
        }

        .qr-game-code {
            font-family: 'Orbitron', monospace;
            font-size: 28px;
            font-weight: 700;
            color: var(--green);
            letter-spacing: 3px;
            margin-bottom: 8px;
        }

        .qr-url {
            font-size: 11px;
            color: var(--text-muted);
            margin-bottom: 20px;
            word-break: break-all;
        }

        .qr-share-btn {
            width: 100%;
            padding: 14px;
            background: var(--green);
            border: none;
            border-radius: 10px;
            color: var(--bg-primary);
            font-family: 'Rajdhani', sans-serif;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }

        .qr-share-btn:active {
            transform: scale(0.98);
            opacity: 0.9;
        }

        .qr-share-btn svg {
            width: 18px;
            height: 18px;
        }

        .qr-copy-btn {
            width: 100%;
            padding: 12px;
            background: transparent;
            border: 2px solid var(--border);
            border-radius: 10px;
            color: var(--text-secondary);
            font-family: 'Rajdhani', sans-serif;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }

        .qr-copy-btn:active {
            background: var(--bg-card-hover);
        }

        .qr-close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            background: var(--bg-card-hover);
            border: none;
            border-radius: 50%;
            color: var(--text-muted);
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .qr-modal-wrapper {
            position: relative;
        }

        /* Settings Modal */
        .settings-modal {
            background: var(--bg-card);
            border-radius: 20px;
            padding: 28px;
            width: 320px;
            text-align: center;
        }

        .settings-modal-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--green);
            letter-spacing: 1px;
            margin-bottom: 24px;
        }

        .settings-option {
            width: 100%;
            padding: 16px;
            background: var(--bg-card-hover);
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text-primary);
            font-family: 'Rajdhani', sans-serif;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 12px;
            letter-spacing: 0.5px;
        }

        .settings-option:active {
            transform: scale(0.98);
            background: var(--border);
        }

        .settings-option svg {
            width: 20px;
            height: 20px;
            color: var(--text-secondary);
        }

        .settings-option.primary {
            background: var(--gold);
            border-color: var(--gold);
            color: var(--bg-primary);
        }

        .settings-option.primary svg {
            color: var(--bg-primary);
        }

        .settings-option.primary:active {
            background: var(--gold-dark);
        }

        .settings-divider {
            height: 1px;
            background: var(--border);
            margin: 20px 0;
        }

        .settings-close-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            background: var(--bg-card-hover);
            border: none;
            border-radius: 50%;
            color: var(--text-muted);
            font-size: 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .settings-modal-wrapper {
            position: relative;
        }

        .settings-value {
            color: var(--text-muted);
            font-size: 14px;
        }

        /* Install App Prompt */
        .install-prompt {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
            padding: 16px 20px;
            padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            display: none;
            align-items: center;
            gap: 14px;
            z-index: 9998;
            box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
        }

        .install-prompt.show {
            display: flex;
        }

        .install-prompt-icon {
            width: 50px;
            height: 50px;
            background: rgba(0,0,0,0.2);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .install-prompt-icon img {
            width: 36px;
            height: 36px;
        }

        .install-prompt-text {
            flex: 1;
        }

        .install-prompt-title {
            font-size: 16px;
            font-weight: 700;
            color: #000;
            margin-bottom: 2px;
        }

        .install-prompt-subtitle {
            font-size: 12px;
            color: rgba(0,0,0,0.7);
        }

        .install-prompt-btn {
            background: #000;
            color: #eab308;
            border: none;
            padding: 10px 16px;
            border-radius: 8px;
            font-weight: 700;
            font-size: 13px;
            cursor: pointer;
            white-space: nowrap;
        }

        .install-prompt-close {
            background: transparent;
            border: none;
            color: rgba(0,0,0,0.5);
            font-size: 24px;
            cursor: pointer;
            padding: 4px;
            line-height: 1;
        }

        /* Add-to-Home-Screen walkthrough modal */
        .install-help {
            position: fixed;
            inset: 0;
            z-index: 10001;
            background: rgba(0,0,0,0.72);
            display: none;
            align-items: flex-end;
            justify-content: center;
            padding: 0;
        }
        .install-help.show { display: flex; }
        .install-help-card {
            width: 100%;
            max-width: 440px;
            background: linear-gradient(175deg, #161b27, #0c0f16);
            border: 1px solid rgba(245,158,11,0.35);
            border-bottom: none;
            border-radius: 20px 20px 0 0;
            padding: 24px 22px calc(22px + env(safe-area-inset-bottom, 0px));
            box-shadow: 0 -20px 50px rgba(0,0,0,0.6);
            animation: installHelpUp 0.28s cubic-bezier(0.16,1,0.3,1);
        }
        @keyframes installHelpUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .install-help-logo { width: 44px; height: 44px; display: block; margin: 0 auto 10px; }
        .install-help-title {
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 1.5rem;
            text-align: center;
            color: #fff;
            margin-bottom: 6px;
        }
        .install-help-sub {
            text-align: center;
            color: var(--text-secondary, #9aa3b2);
            font-size: 0.92rem;
            line-height: 1.45;
            margin: 0 0 18px;
        }
        .install-help-steps { list-style: none; margin: 0 0 18px; padding: 0; }
        .install-help-steps li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            padding: 11px 0;
            border-bottom: 1px solid rgba(255,255,255,0.07);
            color: #e8ebf0;
            font-size: 1rem;
            line-height: 1.4;
        }
        .install-help-steps li:last-child { border-bottom: none; }
        .install-help-steps b { color: #fff; }
        .ihs-num {
            flex-shrink: 0;
            width: 26px; height: 26px;
            border-radius: 50%;
            background: var(--gold, #f59e0b);
            color: #1a1205;
            font-weight: 800;
            font-size: 0.9rem;
            display: flex; align-items: center; justify-content: center;
        }
        .install-help-done {
            width: 100%;
            height: 50px;
            border: none;
            border-radius: 12px;
            background: linear-gradient(180deg, var(--gold, #f59e0b), var(--gold-dark, #d97706));
            color: #1a1205;
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: 1.05rem;
            letter-spacing: 0.5px;
            cursor: pointer;
        }

        /* Responsive */
        @media (max-height: 700px) {
            .game-clock-display { font-size: clamp(52px, 16.28vw, 70px); }
            .clock-toggle-btn { padding: 12px 16px; font-size: 14px; }
            .play-clock-section { width: clamp(82px, 25.58vw, 110px); }
            .play-clock-display { font-size: clamp(27px, 8.37vw, 36px); }
            .play-clock-container { padding: 8px; }
            .pc-btn { padding: 8px 6px; font-size: 11px; }
            .ref-team-row { padding: 8px 12px; }
            .ref-team-row .score-box { min-width: 60px; height: 48px; }
            .ref-team-row .score-value { font-size: 42px; }
            .app-container { gap: 8px; }
        }

        @media (max-height: 600px) {
            .game-clock-display { font-size: clamp(45px, 13.95vw, 60px); }
            .clock-toggle-btn { padding: 10px 12px; font-size: 12px; }
            .play-clock-section { width: clamp(74px, 23.26vw, 100px); }
            .play-clock-display { font-size: clamp(24px, 7.44vw, 32px); }
            .play-clock-container { padding: 6px; }
            .pc-btn { padding: 6px 4px; font-size: 10px; }
            .qd-btn { padding: 12px 0; font-size: 20px; }
        }

        /* =====================================================
           LANDSCAPE MODE - Two Column Layout
           ===================================================== */
        @media (orientation: landscape) and (max-height: 500px) {
            body {
                overflow: hidden;
                align-items: flex-start;
            }

            /* Two-column landscape (Option A): NO scroll, NO swipe. .app-container is a
               fixed-height flex shell — header on top, the pager fills the rest with its
               two panes SIDE-BY-SIDE (left = clock/quarters/down, right = scoreboard).
               Reuses the same .ref-pane structure the portrait swipe-pager uses. */
            .app-container {
                max-width: 100%;
                height: 100vh;
                height: 100dvh;
                max-height: 100dvh;
                overflow: hidden;
                padding: 8px 16px;
                padding-left: calc(16px + env(safe-area-inset-left, 0px));
                padding-right: calc(16px + env(safe-area-inset-right, 0px));
                display: flex;
                flex-direction: column;
                gap: 8px;
            }
            .ref-pager {
                flex: 1 1 auto;
                min-height: 0;
                flex-direction: row;   /* two columns, both visible */
                gap: 10px;
                overflow: hidden;       /* no horizontal scroll/swipe in landscape */
                scroll-snap-type: none;
            }
            .ref-pane {
                flex: 1 1 50%;
                width: 50%;
                height: 100%;
                scroll-snap-align: none;
                justify-content: space-evenly; /* fill the column height */
                gap: 8px;
                overflow: hidden;
            }
            .ref-pager-dots { display: none; }   /* no swipe → no dots */
            .ref-section-divider { display: none; }

            /* Header spans full width */
            .header-bar {
                grid-column: 1 / -1;
                padding: 6px 10px;
            }

            /* Tablet+ keeps 44px hit target — don't shrink to 32px (May 23 2026 audit). */
            .header-btn { width: 44px; height: 44px; }

            /* Clock card - left column, spans rows 2-3 */
            .clock-card {
                grid-column: 1;
                grid-row: 2 / 4;
                padding: 10px;
                flex-direction: column;
                gap: 8px;
            }

            .game-clock-section {
                width: 100%;
                align-items: center;
            }

            .game-clock-display {
                font-size: 70px;
            }

            .game-clock-buttons {
                gap: 12px;
                margin-top: 8px;
                justify-content: center;
            }

            .clock-toggle-btn {
                padding: 10px 14px;
                font-size: 13px;
            }

            .play-clock-section {
                width: 100%;
                margin-top: 8px;
            }

            .play-clock-container {
                flex-direction: row;
                justify-content: space-between;
                align-items: center;
                padding: 10px 14px;
            }

            .play-clock-box {
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .play-clock-display {
                font-size: 36px;
            }

            .play-clock-sublabel {
                margin-top: 0;
                font-size: 10px;
            }

            .play-clock-buttons {
                flex-direction: row;
                gap: 6px;
                width: auto;
            }

            .pc-btn {
                padding: 8px 12px;
                font-size: 11px;
            }

            /* Scoreboard - right column, row 2 */
            .ref-scoreboard-v2 { grid-column: 2; grid-row: 2; gap: 4px; }
            .ref-team-row { padding: 6px 10px; gap: 4px; }
            .ref-team-row .team-logo { width: 28px; height: 28px; font-size: 10px; }
            .ref-team-row .team-name { font-size: 13px; max-width: 100px; }
            .ref-team-row .team-label { font-size: 8px; }
            .ref-team-row .score-box { min-width: 56px; height: 42px; padding: 0 8px; }
            .ref-team-row .score-value { font-size: 24px; }
            .ref-team-timeouts .timeout-dot { width: clamp(10px, 2.5vw, 14px); height: clamp(10px, 2.5vw, 14px); }
            .ref-score-btn { padding: 6px 0; }
            .ref-score-btn-pts { font-size: 18px; }
            .ref-score-btn-label { font-size: 9px; }

            /* QDT Row - left column, row 4 */
            .qdt-row {
                grid-column: 1;
                grid-row: 4;
                gap: 6px;
            }

            .qd-btn {
                padding: 10px 0;
                font-size: 18px;
            }

        }

        /* Extra wide landscape (tablet-like) */
        @media (orientation: landscape) and (min-width: 700px) and (max-height: 500px) {
            .app-container {
                max-width: 900px;
                margin: 0 auto;
            }

            .game-clock-display {
                font-size: 80px;
            }

            .clock-toggle-btn {
                padding: 12px 18px;
                font-size: 14px;
            }

            .play-clock-display {
                font-size: 42px;
            }

            .ref-team-row .score-box {
                min-width: 60px;
                height: 48px;
            }

            .ref-team-row .score-value {
                font-size: 45px;
            }
        }

        /* Ultra-short landscape (Q333-class mini phone, ~759x341) — even tighter than the
           500px tier. The tablet rule above renders an 80px clock; at 341px tall the LEFT
           column then overflows and clips the clock + Q1-Q4, and the emergency FAB lands on
           Q1. This tier shrinks the left column to fit and reserves the bottom-left corner
           for the FAB. Right column (scoreboard) fit fine, so it's left alone. Placed AFTER
           the 500px/extra-wide tiers so it wins for devices that match all three. */
        @media (orientation: landscape) and (max-height: 460px) {
            /* Q333 real WebView viewport is ~716x298; the LEFT column must fit ~232px with
               NO scroll. Key move: lay the clock-card out as a ROW (game clock + START on
               the left, play clock on the right) instead of stacking tall — uses the column
               width and stays short. Content packs at the top (flex-start) so the bottom-left
               corner stays clear for the emergency FAB (sized after the base rule below).
               Tuned + verified live on the device via remote DevTools at 716x298. */
            .app-container { padding-top: 4px; padding-bottom: 4px; gap: 6px; }
            .header-bar { padding: 4px 10px; }
            .ref-pane { gap: 6px; }
            .ref-pane[data-pane="main"] { justify-content: flex-start; }

            .clock-card { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; }
            .game-clock-section { width: auto; flex: 0 0 auto; align-items: center; }
            .clock-label { font-size: 8px; margin: 0 0 1px; }
            /* Tap the clock to start/stop — GREEN = running, RED = stopped. No START
               button in landscape (it's hidden); the clock display IS the control. */
            .game-clock-display { font-size: clamp(30px, 12vh, 40px); line-height: 1; cursor: pointer; color: #ef4444; -webkit-tap-highlight-color: transparent; transition: color 0.15s ease; }
            .game-clock-display.running { color: #22c55e; }
            .game-clock-buttons { display: none; }
            .play-clock-section { flex: 1 1 auto; width: auto; margin-top: 0; display: flex; align-items: center; }
            .play-clock-container { padding: 6px 10px; width: 100%; }
            .play-clock-display { font-size: 26px; }
            .play-clock-sublabel { font-size: 9px; }
            .ref-quarter-tabs { gap: 4px; }
            .ref-quarter-tab { padding: 5px 0; font-size: 14px; }
            .ref-down-row { padding: 5px 10px; }
            .ref-down-label { font-size: 14px; }
        }

        /* ═══════════════════════════════════════════════════════════════
           PREMIUM DESIGN DIRECTIVE — Gold-Adapted Glassmorphic Patterns
           ═══════════════════════════════════════════════════════════════ */

        /* Premium Modal Base */
        .ref-premium {
            background: var(--ref-modal-bg);
            border: var(--ref-modal-border);
            border-top: 2px solid var(--gold);
            border-radius: 20px;
            box-shadow: var(--ref-modal-shadow);
            animation: refModalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        @keyframes refModalSlideIn {
            from { opacity: 0; transform: translateY(20px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* Ambient Glow behind modals */
        .ref-glow {
            position: relative;
        }
        .ref-glow::before {
            content: '';
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 900px; height: 600px;
            background: radial-gradient(ellipse, rgba(245,158,11,0.06) 0%, transparent 70%);
            pointer-events: none;
            z-index: -1;
        }

        /* ── GAME SUMMARY MODAL v2 ── */
        .ref-summary-modal {
            width: 92%;
            max-width: 440px;
            overflow: hidden;
        }

        .ref-summary-hero {
            position: relative;
            padding: 40px 24px 30px;
            text-align: center;
            overflow: hidden;
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 80%);
        }
        .ref-summary-hero-glow {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 70%);
            transform: translate(-50%, -50%);
            pointer-events: none;
        }
        .ref-summary-hero-content { position: relative; z-index: 1; }

        .ref-summary-close {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            border: none;
            background: rgba(0,0,0,0.2);
            border-radius: 50%;
            color: white;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            z-index: 10;
            transition: background 0.2s;
        }
        .ref-summary-close:active { background: rgba(0,0,0,0.4); }

        .ref-summary-icon {
            margin-bottom: 12px;
        }
        .ref-summary-icon svg {
            width: 48px;
            height: 48px;
            color: rgba(255,255,255,0.9);
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        }

        .ref-summary-result-text {
            font-family: 'Rajdhani', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            color: white;
            text-transform: uppercase;
            letter-spacing: 4px;
            text-shadow: 0 4px 12px rgba(0,0,0,0.4);
            margin-bottom: 4px;
            line-height: 1;
        }

        .ref-summary-label {
            font-family: 'Rajdhani', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 3px;
            color: rgba(255,255,255,0.7);
            text-transform: uppercase;
        }

        .ref-summary-body { padding: 20px 24px 24px; }

        /* ESPN-style scoreboard in summary */
        .ref-summary-scoreboard {
            display: flex;
            align-items: center;
            gap: 0;
            margin-bottom: 20px;
            border-radius: 10px;
            overflow: hidden;
        }
        .ref-summary-team-card {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 14px 16px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(255,255,255,0.06);
        }
        .ref-summary-team-card.away {
            flex-direction: row-reverse;
            text-align: right;
        }
        .ref-summary-team-card:first-child { border-radius: 10px 0 0 10px; }
        .ref-summary-team-card:last-child { border-radius: 0 10px 10px 0; }
        .ref-summary-logo {
            width: 44px;
            height: 44px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 16px;
            color: white;
            overflow: hidden;
            flex-shrink: 0;
        }
        .ref-summary-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
        .ref-summary-name {
            font-family: 'Rajdhani', sans-serif;
            font-size: 13px;
            font-weight: 700;
            color: rgba(255,255,255,0.6);
            letter-spacing: 0.5px;
            text-transform: uppercase;
            max-width: 90px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ref-summary-score {
            font-family: 'Orbitron', monospace;
            font-size: 28px;
            font-weight: 700;
            color: #fff;
            line-height: 1;
        }
        .ref-summary-final-badge {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-width: 50px;
            padding: 8px 4px;
            background: rgba(255,255,255,0.02);
        }
        .ref-summary-final-badge span {
            font-family: 'Rajdhani', sans-serif;
            font-size: 11px;
            font-weight: 700;
            color: var(--gold);
            letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* Stats grid - 4 columns */
        .ref-summary-stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }
        .ref-summary-stat {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 10px;
            padding: 14px 6px;
            text-align: center;
        }
        .ref-summary-stat-value {
            font-family: 'Rajdhani', sans-serif;
            font-size: 24px;
            font-weight: 700;
            color: white;
            line-height: 1;
            margin-bottom: 4px;
        }
        .ref-summary-stat-label {
            font-family: 'Rajdhani', sans-serif;
            font-size: 10px;
            font-weight: 600;
            color: rgba(255,255,255,0.6);
            letter-spacing: 1px;
        }

        .ref-summary-actions {
            display: flex;
            gap: 12px;
        }
        .ref-summary-btn-secondary, .ref-summary-btn-primary {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 16px;
            border-radius: 10px;
            font-family: 'Rajdhani', sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1.5px;
            cursor: pointer;
            text-transform: uppercase;
            transition: all 0.2s;
        }
        .ref-summary-btn-secondary {
            background: rgba(255,255,255,0.05);
            border: 1px solid rgba(255,255,255,0.15);
            color: rgba(255,255,255,0.8);
        }
        .ref-summary-btn-primary {
            background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
            border: none;
            color: #000;
            box-shadow: 0 4px 15px var(--gold-glow);
        }
        .ref-summary-btn-primary:active { transform: translateY(-1px); }

        /* ── END GAME MODAL ── */
        #endGameModal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            z-index: 2000;
            align-items: center;
            justify-content: center;
        }
        #endGameModal.active { display: flex; }

        .ref-endgame-modal {
            width: 92%;
            max-width: 440px;
            overflow: hidden;
        }
        .ref-endgame-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16px 20px;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .ref-endgame-title {
            display: flex;
            align-items: center;
            gap: 10px;
            font-family: 'Rajdhani', sans-serif;
            font-size: 18px;
            font-weight: 700;
            color: #ef4444;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }
        .ref-endgame-close {
            width: 36px;
            height: 36px;
            border: none;
            border-radius: 8px;
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.5);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            transition: all 0.2s;
        }
        .ref-endgame-close:active { background: rgba(255,255,255,0.15); color: #fff; }

        .ref-endgame-body { padding: 24px 20px; }

        .ref-endgame-label {
            font-family: 'Rajdhani', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: rgba(255,255,255,0.6);
            text-transform: uppercase;
            letter-spacing: 2px;
            text-align: center;
            margin-bottom: 16px;
        }

        .ref-endgame-scoreboard {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px;
            margin-bottom: 20px;
        }
        .ref-endgame-team {
            flex: 1;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .ref-endgame-team.away { flex-direction: row-reverse; text-align: right; }
        .ref-endgame-team-logo {
            width: 42px;
            height: 42px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 16px;
            color: white;
            overflow: hidden;
            flex-shrink: 0;
        }
        .ref-endgame-team-logo img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
        .ref-endgame-team-name {
            font-family: 'Rajdhani', sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: rgba(255,255,255,0.8);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            max-width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ref-endgame-team-score {
            font-family: 'Orbitron', monospace;
            font-size: 32px;
            font-weight: 700;
            color: #fff;
            line-height: 1;
        }
        .ref-endgame-vs {
            font-family: 'Rajdhani', sans-serif;
            font-size: 12px;
            font-weight: 700;
            color: rgba(255,255,255,0.25);
            letter-spacing: 2px;
            flex-shrink: 0;
        }

        .ref-endgame-warning {
            display: flex;
            align-items: center;
            gap: 12px;
            background: rgba(127,29,29,0.25);
            border: 1px solid rgba(239,68,68,0.25);
            border-radius: 10px;
            padding: 14px 16px;
            margin-bottom: 20px;
            color: rgba(255,255,255,0.7);
            font-size: 13px;
            line-height: 1.5;
        }
        .ref-endgame-warning svg { flex-shrink: 0; color: #fbbf24; }

        .ref-endgame-actions { display: flex; gap: 12px; }
        .ref-endgame-btn-cancel,
        .ref-endgame-btn-confirm {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 20px;
            border-radius: 10px;
            font-family: 'Rajdhani', sans-serif;
            font-size: 14px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .ref-endgame-btn-cancel {
            border: 1px solid rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.05);
            color: rgba(255,255,255,0.8);
        }
        .ref-endgame-btn-cancel:active { background: rgba(255,255,255,0.1); }
        .ref-endgame-btn-confirm {
            border: 1px solid rgba(239,68,68,0.5);
            background: rgba(239,68,68,0.15);
            color: #ef4444;
        }
        .ref-endgame-btn-confirm:active { background: rgba(239,68,68,0.25); }

        /* ── Settings Matchup Bar + Swap + Save ── */
        .ref-settings-matchup-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            background: rgba(255,255,255,0.04);
            border: 1px solid rgba(245,158,11,0.2);
            border-radius: 12px;
            padding: 10px 12px;
        }
        .ref-settings-matchup-side {
            display: flex;
            align-items: center;
            gap: 8px;
            flex: 1;
            min-width: 0;
        }
        .ref-settings-matchup-side.away {
            justify-content: flex-end;
            text-align: right;
        }
        .ref-settings-matchup-logo {
            width: 32px; height: 32px;
            border-radius: 8px;
            background: #333;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 14px; color: white;
            flex-shrink: 0;
            overflow: hidden;
        }
        .ref-settings-matchup-logo img {
            width: 100%; height: 100%; object-fit: contain; padding: 2px;
        }
        .ref-settings-matchup-label {
            font-size: 10px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.6);
            line-height: 1;
            margin-bottom: 2px;
        }
        .ref-settings-matchup-name {
            font-family: 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: 13px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: white;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .ref-settings-swap-btn {
            background: rgba(245,158,11,0.15);
            border: 1px solid rgba(245,158,11,0.3);
            border-radius: 10px;
            width: 38px; height: 38px;
            display: flex; align-items: center; justify-content: center;
            color: #f59e0b;
            cursor: pointer;
            flex-shrink: 0;
            transition: all 0.15s ease;
        }
        .ref-settings-swap-btn:active {
            background: rgba(245,158,11,0.3);
            transform: scale(0.92);
        }
        .ref-settings-save-btn {
            width: 100%;
            padding: 14px 20px;
            border: none;
            border-radius: 12px;
            font-family: 'Rajdhani', sans-serif;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
            color: #000;
            box-shadow: 0 2px 12px rgba(245,158,11,0.3);
        }
        .ref-settings-save-btn:active {
            transform: scale(0.97);
            filter: brightness(0.9);
        }

        /* Section Label (Rajdhani style) */
        .ref-section-label {
            font-family: 'Rajdhani', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.6);
            margin-bottom: 12px;
        }

        /* ── GAME WIZARD (4-Step Premium) ── */
        #gameCreationModal {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.85);
            z-index: 2000;
            align-items: center;
            justify-content: center;
            padding: 16px;
        }
        #gameCreationModal.active { display: flex; }
        #gameCreationModal::before {
            content: '';
            position: absolute;
            width: 600px; height: 400px;
            top: 50%; left: 50%; transform: translate(-50%, -50%);
            background: radial-gradient(ellipse, rgba(245,158,11,0.06) 0%, transparent 70%);
            pointer-events: none;
        }

        .ref-gs-modal {
            position: relative; z-index: 1;
            width: min(92vw, 400px);
            max-height: min(90vh, 680px);
            display: flex; flex-direction: column;
            background: var(--ref-modal-bg);
            border: var(--ref-modal-border);
            border-top: 2px solid var(--gold);
            border-radius: 20px;
            box-shadow: var(--ref-modal-shadow);
            animation: refModalSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            overflow: hidden;
        }

        /* Header */
        .ref-gs-header {
            display: flex; align-items: center; gap: 12px;
            height: 56px; padding: 0 20px; flex-shrink: 0;
            border-bottom: 1px solid rgba(255,255,255,0.08);
        }
        .ref-gs-header-icon { flex-shrink: 0; }
        .ref-gs-header-icon img { height: 32px; width: auto; object-fit: contain; }
        .ref-gs-title {
            /* v5: broadcast DNA — Saira Condensed + bumped 20→22px */
            flex: 1;
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-size: 22px; font-weight: 800;
            letter-spacing: 1.5px; text-transform: uppercase;
            color: #ffffff;
        }
        .ref-gs-close {
            width: 36px; height: 36px; border-radius: 10px;
            background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.6); cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            font-size: 20px; transition: all 0.2s;
        }
        .ref-gs-close:active { background: #ef4444; color: #fff; border-color: #ef4444; }

        /* Step Indicator */
        .ref-gs-steps {
            display: flex; align-items: center; justify-content: center;
            gap: 8px; padding: 12px 20px; flex-shrink: 0;
            background: rgba(0,0,0,0.15);
            border-bottom: 1px solid rgba(255,255,255,0.04);
        }
        .ref-gs-step { display: flex; align-items: center; gap: 6px; }
        .ref-gs-step-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: rgba(255,255,255,0.2); transition: all 0.3s;
        }
        .ref-gs-step.active .ref-gs-step-dot {
            width: 10px; height: 10px;
            background: var(--gold); box-shadow: 0 0 10px rgba(245,158,11,0.5);
        }
        .ref-gs-step.done .ref-gs-step-dot { background: rgba(245,158,11,0.4); }
        .ref-gs-step-label {
            /* v5: broadcast DNA — Saira Condensed + 12→13px + brighter inactive */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-size: 13px;
            font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
            color: rgba(255,255,255,0.6); transition: all 0.3s;
        }
        .ref-gs-step.active .ref-gs-step-label { color: var(--gold); }
        .ref-gs-step.done .ref-gs-step-label { color: rgba(255,255,255,0.55); }
        .ref-gs-step-line { width: 20px; height: 1px; background: rgba(255,255,255,0.15); }

        /* Content */
        .ref-gs-content { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
        .ref-gs-view {
            display: none;
            padding: 20px;
        }
        .ref-gs-view.active {
            display: flex; flex-direction: column;
            animation: refGsViewFadeIn 0.35s ease-out;
        }
        @keyframes refGsViewFadeIn {
            from { opacity: 0; transform: translateX(12px); }
            to { opacity: 1; transform: translateX(0); }
        }

        /* ── Matchup Cards (stacked, color-tinted like scoreboard) ── */
        .ref-gs-matchup-title {
            /* v5: broadcast DNA — Saira Condensed + bumped 20→24px + brighter color */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-size: 24px; font-weight: 800;
            letter-spacing: 3px; text-transform: uppercase;
            color: rgba(255,255,255,0.85);
            text-align: center;
            margin-bottom: 18px;
        }
        .ref-gs-matchup-stack {
            display: flex; flex-direction: column;
            align-items: center; gap: 0;
        }
        .ref-gs-matchup-card {
            width: 100%;
            display: flex; align-items: center; gap: 14px;
            padding: 16px 18px;
            border-radius: 14px;
            cursor: pointer;
            touch-action: manipulation;
            position: relative;
            overflow: hidden;
            transition: transform 0.15s ease;
            border: 2px dashed rgba(255,255,255,0.15);
            background: rgba(255,255,255,0.03);
        }
        .ref-gs-matchup-card:active { transform: scale(0.97); }
        /* Filled state — team color gradient like scoreboard rows */
        .ref-gs-matchup-card.filled {
            border: 1px solid rgba(255,255,255,0.12);
            /* Chrome 110 fallback (color-mix is Chrome 111+ / old Android WebViews
               drop the whole declaration, killing the team color). Solid tint
               first, gradient second — old engines keep the solid, modern engines
               use the gradient. Matches the other two team-color rules here. */
            background: var(--mc-color, #22c55e);
            background: linear-gradient(135deg,
                var(--mc-color, #22c55e) 0%,
                color-mix(in srgb, var(--mc-color, #22c55e) 45%, black) 100%);
            box-shadow: inset 0 2px 5px rgba(255,255,255,0.12);
        }
        /* Glossy top shine like scoreboard */
        .ref-gs-matchup-card.filled::before {
            content: '';
            position: absolute; top: 0; left: 0; right: 0;
            height: 50%;
            background: linear-gradient(to bottom, rgba(255,255,255,0.08), transparent);
            pointer-events: none; z-index: 1;
        }
        /* Watermark logo */
        .ref-gs-matchup-card.filled::after {
            content: '';
            position: absolute; right: -10px; top: 50%;
            transform: translateY(-50%);
            width: 80px; height: 80px;
            background-image: var(--mc-logo);
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.15; z-index: 0;
            pointer-events: none;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
        }
        .ref-gs-matchup-card > * { position: relative; z-index: 2; }
        .ref-gs-matchup-logo {
            width: 52px; height: 52px; border-radius: 12px;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Rajdhani', sans-serif; font-size: 22px;
            font-weight: 700; color: rgba(255,255,255,0.6);
            overflow: hidden; flex-shrink: 0;
            background: rgba(255,255,255,0.08);
        }
        .ref-gs-matchup-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
        .ref-gs-matchup-card.filled .ref-gs-matchup-logo {
            color: #fff; background: rgba(0,0,0,0.25);
        }
        .ref-gs-matchup-info { flex: 1; min-width: 0; }
        .ref-gs-matchup-label {
            /* v5: broadcast DNA — Saira Condensed + 11→13px for readability */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-size: 13px; font-weight: 800;
            letter-spacing: 1.8px; text-transform: uppercase;
            color: rgba(255,255,255,0.55);
        }
        .ref-gs-matchup-card.filled .ref-gs-matchup-label {
            color: rgba(255,255,255,0.6);
        }
        .ref-gs-matchup-name {
            /* v5: broadcast DNA — Saira Condensed + bumped 20→22px + brighter unfilled state */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-size: 22px; font-weight: 800;
            letter-spacing: 1px;
            text-transform: uppercase; color: rgba(255,255,255,0.6);
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .ref-gs-matchup-card.filled .ref-gs-matchup-name { color: #fff; }
        .ref-gs-matchup-hint {
            font-family: 'Saira Condensed', sans-serif; font-size: 13px;
            color: rgba(245,158,11,0.7); margin-top: 2px;
        }
        .ref-gs-matchup-card.filled .ref-gs-matchup-hint { display: none; }
        .ref-gs-matchup-chevron {
            color: rgba(255,255,255,0.2); flex-shrink: 0;
        }
        .ref-gs-matchup-card.filled .ref-gs-matchup-chevron {
            color: rgba(255,255,255,0.4);
        }
        /* VS circle between stacked cards */
        .ref-gs-vs-circle {
            width: 48px; height: 48px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            font-family: 'Rajdhani', sans-serif; font-size: 16px;
            font-weight: 800; color: rgba(255,255,255,0.5);
            letter-spacing: 2px;
            background: var(--ref-modal-bg, #12141a);
            border: 2px solid rgba(255,255,255,0.1);
            margin: -14px auto;
            position: relative; z-index: 5;
            box-shadow: 0 2px 12px rgba(0,0,0,0.5);
        }
        /* Mini matchup banner (settings view + ready view) */
        .ref-gs-mini-matchup {
            display: flex; align-items: center; gap: 10px;
            border-radius: 12px; padding: 10px 14px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            margin-bottom: 16px;
        }
        .ref-gs-mini-side {
            flex: 1; display: flex; align-items: center; gap: 8px;
            min-width: 0;
        }
        .ref-gs-mini-side.away { justify-content: flex-end; text-align: right; flex-direction: row-reverse; }
        .ref-gs-mini-logo {
            width: 32px; height: 32px; border-radius: 8px;
            display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 13px; color: white;
            overflow: hidden; flex-shrink: 0;
            background: #333;
        }
        .ref-gs-mini-logo img { width: 100%; height: 100%; object-fit: contain; padding: 2px; }
        .ref-gs-mini-name {
            font-family: 'Rajdhani', sans-serif; font-size: 13px;
            font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
            color: white;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        }
        .ref-gs-mini-vs {
            font-family: 'Rajdhani', sans-serif; font-size: 10px;
            font-weight: 700; color: rgba(255,255,255,0.25);
            letter-spacing: 2px; flex-shrink: 0;
        }

        /* Assigned Game Cards */
        .ref-gs-assigned-section { margin-bottom: 16px; }
        .ref-gs-scheduled-card {
            display: flex; align-items: center;
            padding: 0; border-radius: 12px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            cursor: pointer; transition: all 0.25s;
            margin-bottom: 8px; overflow: hidden; position: relative;
            touch-action: manipulation;
        }
        .ref-gs-scheduled-card:active {
            border-color: rgba(245,158,11,0.5);
            background: rgba(245,158,11,0.05);
        }
        .ref-gs-sched-accent {
            width: 4px; align-self: stretch; flex-shrink: 0;
            background: linear-gradient(180deg, var(--gold), rgba(245,158,11,0.3));
        }
        .ref-gs-sched-info {
            flex: 1; display: flex; align-items: center; gap: 12px;
            padding: 14px 16px;
        }
        .ref-gs-sched-logo {
            width: 40px; height: 40px; flex-shrink: 0;
            filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
        }
        .ref-gs-sched-logo img { width: 100%; height: 100%; object-fit: contain; }
        .ref-gs-sched-teams {
            font-family: 'Rajdhani', sans-serif; font-size: 15px;
            font-weight: 800; color: #fff; text-transform: uppercase;
        }
        .ref-gs-sched-meta {
            font-family: 'Rajdhani', sans-serif; font-size: 11px;
            font-weight: 600; color: rgba(255,255,255,0.6); margin-top: 2px;
        }
        .ref-gs-sched-arrow { color: var(--gold); font-size: 20px; margin-right: 14px; }

        /* Team Grid (Opponent Step) */
        .ref-gs-search-box {
            display: flex; align-items: center; gap: 10px;
            padding: 10px 14px; margin-bottom: 16px;
            background: rgba(255,255,255,0.06);
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 10px;
            transition: border-color 0.2s, background 0.2s;
        }
        .ref-gs-search-box:focus-within {
            border-color: rgba(245,158,11,0.45);
            background: rgba(245,158,11,0.05);
        }
        .ref-gs-search-box:focus-within svg { color: var(--gold); }
        .ref-gs-search-box svg { width: 16px; height: 16px; color: rgba(255,255,255,0.3); flex-shrink: 0; }
        .ref-gs-search-input {
            /* v6: 14→16px (placeholder readability + reduces iOS zoom-on-focus) */
            flex: 1; background: none; border: none; outline: none;
            color: #fff; font-family: 'Saira Condensed', sans-serif; font-size: 16px;
            font-weight: 600;
        }
        .ref-gs-search-input::placeholder { color: rgba(255,255,255,0.4); font-weight: 500; }

        .ref-gs-custom-team {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 16px; margin-bottom: 16px;
            background: transparent;
            border: 1px dashed rgba(255,255,255,0.15);
            border-radius: 10px; cursor: pointer; transition: all 0.2s;
            touch-action: manipulation;
        }
        .ref-gs-custom-team:active {
            border-color: rgba(245,158,11,0.4);
            background: rgba(245,158,11,0.04);
        }
        /* A name has been typed → the card lights up gold, solid border, as a
           clear one-tap "add this team" affordance. */
        .ref-gs-custom-team.is-ready {
            border-style: solid;
            border-color: var(--gold);
            background: rgba(245,158,11,0.12);
        }
        .ref-gs-custom-team.is-ready .ref-gs-custom-title { color: #fff; }
        .ref-gs-custom-icon {
            width: 32px; height: 32px; border-radius: 8px;
            background: rgba(245,158,11,0.15);
            display: flex; align-items: center; justify-content: center;
            color: var(--gold); font-size: 18px;
        }
        .ref-gs-custom-text { flex: 1; }
        .ref-gs-custom-title {
            /* v6: broadcast DNA — 14px Rajdhani→16px Saira 800, brighter */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-size: 16px;
            font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
            color: rgba(255,255,255,0.85);
        }
        .ref-gs-custom-hint {
            /* v6: 11→13px, brighter 0.35→0.5 */
            font-family: 'Saira Condensed', sans-serif; font-size: 13px;
            font-weight: 500;
            color: rgba(255,255,255,0.5); margin-top: 2px;
        }

        .ref-gs-section-label {
            /* v6: broadcast DNA — 11px Rajdhani 700 → 14px Saira 800, brighter 0.35→0.6 */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-size: 14px;
            font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase;
            color: rgba(255,255,255,0.6); margin-bottom: 12px; margin-top: 4px;
        }

        .ref-gs-team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 8px; margin-bottom: 16px;
        }
        .ref-gs-team-cell {
            display: flex; flex-direction: column; align-items: center;
            gap: 6px; padding: 10px 4px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px; cursor: pointer; transition: all 0.2s;
            touch-action: manipulation;
        }
        .ref-gs-team-cell:active {
            background: rgba(255,255,255,0.08);
            border-color: rgba(245,158,11,0.4);
        }
        /* Sep 30 2026 — the picker's new look: a crest never sits on its own
           brand color. Every crest (league, Sideline Command house team, NFL,
           College) sits on this neutral plate instead, so a dark logo on a
           dark jersey and a white logo on a pale jersey read identically. */
        .ref-gs-team-cell-logo { width: 44px; height: 44px; pointer-events: none; }
        .ref-gs-team-cell-plate {
            width: 100%; height: 100%; border-radius: 50%;
            background: rgba(255,255,255,0.09);
            border: 1px solid rgba(255,255,255,0.1);
            display: flex; align-items: center; justify-content: center;
            overflow: hidden; pointer-events: none;
        }
        .ref-gs-team-cell-plate img { width: 76%; height: 76%; object-fit: contain; pointer-events: none; }
        /* Brief flash on tap — this view navigates away immediately after a
           pick (refGsAfterTeamPicked), so there is no lingering multi-select
           grid state to maintain, just this one confirmation beat. */
        .ref-gs-team-cell.is-picked {
            background: rgba(245,158,11,0.14);
            border-color: var(--gold);
        }
        .ref-gs-team-cell.is-picked .ref-gs-team-cell-plate {
            background: rgba(245,158,11,0.22);
            border-color: var(--gold);
        }
        .ref-gs-team-cell-name {
            /* v6: broadcast DNA — 10→13px, weight 600→700, brighter 0.6→0.85 */
            font-family: 'Saira Condensed', sans-serif; font-size: 13px;
            font-weight: 700; color: rgba(255,255,255,0.85);
            letter-spacing: 0.3px; text-transform: uppercase;
            text-align: center; line-height: 1.2; pointer-events: none;
            max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }

        /* Settings Grid */
        /* Wizard Settings-step rule tiles (Jun 17 2026) — tall instrument-panel
           steppers: 5 across, value on top, −/+ split bar below. Fills the wrist
           screen without the old vertical cram; sharp 4px edges, gold top rail. */
        .rgs-tiles {
            display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; margin-bottom: 14px;
        }
        .rgs-tile {
            display: flex; flex-direction: column; min-height: 104px;
            background: rgba(255,255,255,0.035); border: 1px solid rgba(255,255,255,0.1);
            border-top: 2px solid rgba(245,158,11,0.55); border-radius: 4px; overflow: hidden;
        }
        .rgs-tile-label {
            font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 11px;
            letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255,255,255,0.55);
            text-align: center; padding: 7px 2px 2px; white-space: nowrap;
        }
        .rgs-tile-center { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 0; }
        .rgs-tile-val { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 32px; color: var(--gold); line-height: 1; }
        .rgs-tile-unit { font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255,255,255,0.6); }
        .rgs-tile-btns { display: flex; flex: 0 0 auto; border-top: 1px solid rgba(255,255,255,0.1); }
        .rgs-tile-btn { flex: 1 1 0; height: 40px; border: none; border-radius: 0; background: rgba(255,255,255,0.05); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; touch-action: manipulation; }
        .rgs-tile-btn:active { background: rgba(245,158,11,0.3); }
        .rgs-tile-btn:first-child { border-right: 1px solid rgba(255,255,255,0.08); }

        /* Q333 wrist (short landscape): compress the Settings step so the mini-
           matchup + all 5 tiles fit the ~298px screen without scrolling. */
        @media (max-height: 460px) {
            .ref-gs-mini-matchup { padding: 4px 12px; margin-bottom: 7px; border-radius: 8px; }
            .ref-gs-mini-logo { width: 26px; height: 26px; }
            .ref-gs-view-settings .ref-gs-section-label { margin-bottom: 4px; }
            .rgs-tiles { gap: 6px; margin-bottom: 6px; }
            .rgs-tile { min-height: 64px; }
            .rgs-tile-label { padding: 5px 2px 1px; font-size: 10px; }
            .rgs-tile-val { font-size: 23px; }
            .rgs-tile-btn { height: 30px; font-size: 19px; }
        }

        .ref-gs-settings-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px; margin-bottom: 16px;
        }
        .ref-gs-settings-grid--2col {
            grid-template-columns: repeat(2, 1fr);
        }
        .ref-gs-setting-card {
            /* v6: a bit more breathing room for the bumped numeric */
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.08);
            border-radius: 12px; padding: 16px 8px;
            text-align: center;
        }
        .ref-gs-setting-label {
            /* v6: broadcast DNA — 11px Rajdhani→14px Saira 800, brighter 0.4→0.6 */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-size: 14px;
            font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
            color: rgba(255,255,255,0.6); margin-bottom: 10px;
        }
        .ref-gs-setting-value-wrap {
            display: flex; align-items: center; justify-content: center; gap: 10px;
        }
        .ref-gs-setting-btn {
            /* v6: 28→32px visual + ::before halo to 44px hit target (premium self-audit) */
            position: relative;
            width: 32px; height: 32px; border-radius: 50%;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
            color: rgba(255,255,255,0.85); font-size: 20px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            padding: 0; line-height: 1; transition: all 0.15s;
            font-family: 'Saira Condensed', sans-serif; font-weight: 600;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-gs-setting-btn::before {
            /* invisible 44x44 hit-target halo — visual stays compact */
            content: '';
            position: absolute; top: 50%; left: 50%;
            width: 44px; height: 44px; transform: translate(-50%, -50%);
        }
        .ref-gs-setting-btn:active {
            background: rgba(245,158,11,0.2); border-color: rgba(245,158,11,0.4);
            color: var(--gold);
        }
        .ref-gs-setting-value {
            /* v6: broadcast DNA — 20px Rajdhani→28px Orbitron (scoreboard feel) */
            font-family: 'Orbitron', 'Rajdhani', monospace; font-size: 28px;
            font-weight: 700; color: #fff; min-width: 44px;
            letter-spacing: 1px;
        }
        .ref-gs-setting-unit {
            /* v6: broadcast DNA — 10px Rajdhani 600→13px Saira 700, brighter 0.3→0.55 */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-size: 13px;
            font-weight: 700; color: rgba(255,255,255,0.55);
            letter-spacing: 1.4px; text-transform: uppercase; margin-top: 6px;
        }

        /* Game Code Section */
        .ref-gs-code-section {
            text-align: center; padding: 16px;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px;
        }
        .ref-gs-code-label {
            /* v6: 11px Rajdhani→14px Saira 800, brighter 0.35→0.6 */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-size: 14px;
            font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase;
            color: rgba(255,255,255,0.6); margin-bottom: 8px;
        }
        .ref-gs-code-value {
            /* v6: Rajdhani→Orbitron for broadcast-grade numerics */
            font-family: 'Orbitron', 'Rajdhani', monospace; font-size: 34px;
            font-weight: 700; color: var(--gold); letter-spacing: 6px;
        }
        .ref-gs-code-hint {
            /* v6: 11→13px, brighter 0.3→0.5 */
            font-family: 'Saira Condensed', sans-serif; font-size: 13px;
            font-weight: 500;
            color: rgba(255,255,255,0.5); margin-top: 6px;
        }
        /* Quick game's games row still queued — quiet, persistent, non-blocking
           (onboarding.js refreshQuickGameSaveBanner). Toast z-index is 9000;
           this sits under it so GAME ON never fights it. */
        .ref-save-banner {
            position: fixed; left: 50%; transform: translateX(-50%);
            bottom: calc(env(safe-area-inset-bottom, 0px) + 6px);
            z-index: 1500; pointer-events: none;
            padding: 4px 12px; border-radius: 999px;
            background: rgba(0,0,0,0.72); border: 1px solid rgba(245,158,11,0.45);
            color: var(--gold); font-family: 'Rajdhani', sans-serif;
            font-size: 12px; font-weight: 700; letter-spacing: 0.5px;
            white-space: nowrap;
        }
        .ref-save-banner[hidden] { display: none; }
        .ref-gs-share-btn {
            display: inline-flex; align-items: center; gap: 6px;
            margin-top: 10px; padding: 8px 16px;
            background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
            border-radius: 8px; color: var(--gold); cursor: pointer;
            font-family: 'Rajdhani', sans-serif; font-size: 12px;
            font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
            transition: all 0.2s;
        }
        .ref-gs-share-btn:active { background: rgba(245,158,11,0.2); }
        .ref-gs-share-btn svg { width: 14px; height: 14px; }

        /* Ready View */
        .ref-gs-live-badge {
            display: inline-flex; align-items: center; gap: 8px;
            margin-bottom: 20px; padding: 8px 20px;
            background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.3);
            border-radius: 20px;
        }
        .ref-gs-live-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--gold);
        }
        .ref-gs-live-text {
            /* v6: 14px Rajdhani 700 → 15px Saira 800, tighter tracking match for ribbon */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-size: 15px;
            font-weight: 800; color: var(--gold); letter-spacing: 2px;
            text-transform: uppercase;
        }

        /* Game code — massive standalone row */
        .ref-gs-ready-code-row {
            text-align: center; padding: 14px 0; margin-top: 16px;
            background: rgba(255,255,255,0.02);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 12px;
        }
        .ref-gs-ready-code-label {
            /* v6: 11px Rajdhani→14px Saira 800, brighter 0.35→0.6 */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-size: 14px;
            font-weight: 800; letter-spacing: 2.2px; text-transform: uppercase;
            color: rgba(255,255,255,0.6); margin-bottom: 6px;
        }
        .ref-gs-ready-code-value {
            /* v6: Rajdhani→Orbitron for broadcast numerics */
            font-family: 'Orbitron', 'Rajdhani', monospace; font-size: 40px;
            font-weight: 700; color: var(--gold); letter-spacing: 8px;
            line-height: 1;
        }

        .ref-gs-ready-details {
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 8px; margin-top: 12px;
        }
        .ref-gs-ready-detail {
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 8px; padding: 12px 6px; text-align: center;
        }
        .ref-gs-ready-detail-val {
            /* v6: 15px Rajdhani→18px Orbitron 700 */
            font-family: 'Orbitron', 'Rajdhani', monospace; font-size: 18px;
            font-weight: 700; color: #fff;
        }
        .ref-gs-ready-detail-label {
            /* v6: 10→12px, Rajdhani→Saira 800, brighter 0.35→0.55 */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-size: 12px;
            font-weight: 800; color: rgba(255,255,255,0.55);
            letter-spacing: 1.3px; text-transform: uppercase; margin-top: 4px;
        }

        /* Footer */
        .ref-gs-footer {
            display: flex; gap: 12px;
            padding: 16px 20px; flex-shrink: 0;
            border-top: 1px solid rgba(255,255,255,0.06);
        }
        .ref-gs-btn-back {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            padding: 14px 20px; border-radius: 10px;
            background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15);
            color: rgba(255,255,255,0.85);
            /* v6: 14px Rajdhani→16px Saira 800 — matches Next button scale */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-size: 16px;
            font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase;
            cursor: pointer; transition: all 0.2s;
        }
        .ref-gs-btn-back:active { background: rgba(255,255,255,0.1); }
        .ref-gs-btn-back svg { width: 18px; height: 18px; }
        .ref-gs-btn-next {
            flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
            padding: 14px 20px; border-radius: 10px;
            background: linear-gradient(135deg, var(--gold), var(--gold-dark));
            border: none; color: #000;
            /* v6: 15px Rajdhani→17px Saira 800 — broadcast CTA */
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-size: 17px;
            font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase;
            cursor: pointer; transition: all 0.2s;
            box-shadow: 0 4px 15px rgba(245,158,11,0.3);
        }
        .ref-gs-btn-next:active { transform: translateY(-1px); }
        .ref-gs-btn-next:disabled {
            opacity: 0.4; cursor: not-allowed;
            box-shadow: none;
        }
        .ref-gs-btn-next svg { width: 18px; height: 18px; }

        /* Stepper (reused in settings modal) */
        .ref-stepper {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px;
            background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px; margin-bottom: 8px;
        }
        .ref-stepper-label {
            font-family: 'Rajdhani', sans-serif; font-size: 15px;
            font-weight: 600; color: rgba(255,255,255,0.7);
        }
        .ref-stepper-controls-row {
            display: flex; align-items: center; gap: 12px;
        }
        .ref-stepper-btn {
            width: 36px; height: 36px; border-radius: 50%;
            background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
            color: #fff; font-size: 20px; font-weight: 400;
            cursor: pointer; transition: all 0.15s;
            display: flex; align-items: center; justify-content: center;
            line-height: 1; padding: 0;
        }
        .ref-stepper-btn:active {
            background: rgba(245,158,11,0.2); border-color: rgba(245,158,11,0.4);
            color: var(--gold);
        }
        .ref-stepper-value {
            font-family: 'Rajdhani', sans-serif; font-size: 19px;
            font-weight: 700; color: #fff; min-width: 70px; text-align: center;
        }

        /* Start Game Button (big CTA) */
        .ref-start-btn {
            width: 100%; padding: 16px 24px;
            background: linear-gradient(180deg, #fbbf24 0%, var(--gold-dark) 100%);
            color: #000; font-family: 'Rajdhani', sans-serif;
            font-size: 18px; font-weight: 700; letter-spacing: 2px;
            text-transform: uppercase; border: none; border-radius: 12px;
            cursor: pointer;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 4px 16px rgba(245,158,11,0.3);
            transition: all 0.2s;
        }
        .ref-start-btn:active {
            transform: translateY(-1px);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 24px rgba(245,158,11,0.4);
        }

        /* ── Score Modal Premium Upgrade ── */
        .ref-score-header {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-bottom: 12px;
        }
        .ref-score-logo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Rajdhani', sans-serif;
            font-size: 16px;
            font-weight: 700;
            color: rgba(255,255,255,0.5);
            overflow: hidden;
            flex-shrink: 0;
        }
        .ref-score-logo img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            padding: 2px;
        }
        .ref-score-team-name {
            font-family: 'Rajdhani', sans-serif;
            font-size: 18px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #fff;
        }

        /* ── Timeout Modal Premium Upgrade ── */

        /* Premium Settings Stepper Override */
        #settingsModal .ref-stepper {
            margin-bottom: 4px;
        }

        /* ── Inline Style Replacements ── */
        .ref-share-btn-inline {
            margin-top: 10px;
            padding: 10px 24px;
            background: var(--gold-dim);
            border: 1px solid var(--gold-glow);
            border-radius: 10px;
            color: var(--gold);
            font-family: 'Rajdhani', sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 1.5px;
            cursor: pointer;
            touch-action: manipulation;
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
            margin-right: auto;
        }

        .ref-stepper-controls-row {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ref-color-input {
            width: 44px;
            height: 40px;
            padding: 2px;
            border: 1px solid rgba(255,255,255,0.15);
            border-radius: 8px;
            background: rgba(255,255,255,0.06);
            cursor: pointer;
            flex-shrink: 0;
        }

        .ref-qr-game-code {
            font-family: 'Rajdhani', sans-serif;
            font-size: 30px;
            font-weight: 700;
            color: var(--gold);
            letter-spacing: 4px;
            margin-bottom: 8px;
        }

        /* ── Mobile Responsive ── */
        @media (max-width: 480px) {
            .ref-gc-modal { max-width: 95vw; }
            .ref-tp-modal { max-width: 95vw; max-height: 90vh; }
            .ref-tp-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
            .ref-matchup-grid { gap: 10px; }
            .ref-slot-logo { width: 60px; height: 60px; font-size: 22px; }
            .ref-game-code-value { font-size: 28px; letter-spacing: 4px; }
        }

        /* ── Emergency Button ── */
        .ref-emergency-fab {
            position: fixed;
            bottom: 20px;
            left: 20px;
            /* Game-day hit-target: 48px (May 23 2026 audit). */
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(239, 68, 68, 0.7);
            border: 1.5px solid rgba(255, 255, 255, 0.15);
            color: rgba(255,255,255,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 900;
            box-shadow: 0 2px 10px rgba(239, 68, 68, 0.3);
            transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-emergency-fab.holding {
            background: #ef4444;
            transform: scale(1.2);
            box-shadow: 0 4px 24px rgba(239, 68, 68, 0.6), 0 0 0 8px rgba(239, 68, 68, 0.2);
        }
        .ref-emergency-fab svg {
            width: 18px;
            height: 18px;
            stroke-width: 2.5;
        }

        /* Ultra-short landscape (Q333-class): FAB tucked into the bottom-RIGHT corner,
           a touch bigger than before for an easier game-day tap. Placed AFTER the base
           .ref-emergency-fab rule so it wins on source order — no !important needed. */
        @media (orientation: landscape) and (max-height: 460px) {
            .ref-emergency-fab { width: 38px; height: 38px; bottom: 6px; left: auto; right: 6px; }
            .ref-emergency-fab svg { width: 18px; height: 18px; }
        }

        /* ── Penalty FAB (PORTRAIT phone) ──────────────────────────────────
           Amber alert bubble mirroring the emergency FAB's shape/size. In
           landscape the PENALTY trigger is the footer pager tab, so this FAB is
           portrait-only — hidden by default, flipped to flex in the @media below.
           Penalty sits bottom-LEFT; the emergency bubble moves bottom-RIGHT so
           the two never overlap. (Jun 17 2026) */
        .ref-penalty-fab {
            position: fixed;
            bottom: 20px;
            left: 20px;
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background: rgba(245, 158, 11, 0.75);
            border: 1.5px solid rgba(255, 255, 255, 0.18);
            color: #fff;
            display: none;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 900;
            box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
            transition: transform 0.18s ease, box-shadow 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-penalty-fab:active { transform: scale(0.92); box-shadow: 0 4px 18px rgba(245, 158, 11, 0.5); }
        .ref-penalty-fab svg { width: 20px; height: 20px; stroke-width: 2.5; }

        @media (orientation: portrait) {
            .ref-penalty-fab { display: flex; }
            .ref-emergency-fab { left: auto; right: 20px; }
        }

        /* ───────────────────────────────────────────────────────────
           QUICK-GAME WIZARD — LANDSCAPE (wrist device, ~716×298).
           Built portrait-tall; re-flowed here for a short, wide
           viewport: wider modal, compressed header/step rail, matchup
           cards side-by-side instead of stacked, denser team grid.
           (Carlos "optimize it autonomously", Jun 1 2026) */
        @media (orientation: landscape) and (max-height: 460px) {
            #gameCreationModal { padding: 8px; }
            .ref-gs-modal { width: min(96vw, 680px); max-height: 96vh; }

            /* Reclaim vertical space from the chrome */
            .ref-gs-header { height: 38px; padding: 0 14px; gap: 8px; }
            .ref-gs-header-icon img { height: 22px; }
            .ref-gs-title { font-size: 16px; letter-spacing: 1px; }
            .ref-gs-close { width: 28px; height: 28px; font-size: 16px; }
            .ref-gs-steps { padding: 5px 14px; gap: 6px; }
            .ref-gs-step-dot { width: 7px; height: 7px; }
            .ref-gs-step.active .ref-gs-step-dot { width: 8px; height: 8px; }
            .ref-gs-step-label { font-size: 11px; letter-spacing: 0.8px; }
            .ref-gs-step-line { width: 14px; }
            .ref-gs-view { padding: 12px 16px; }

            /* Matchup: cards go side-by-side with the VS chip between them */
            .ref-gs-matchup-title { font-size: 16px; letter-spacing: 2px; margin-bottom: 10px; }
            .ref-gs-matchup-stack { flex-direction: row; align-items: stretch; gap: 10px; }
            .ref-gs-matchup-stack .ref-gs-matchup-card { flex: 1; min-width: 0; padding: 10px 12px; }
            .ref-gs-vs-circle { align-self: center; flex-shrink: 0; margin: 0; }
            .ref-gs-matchup-logo { width: 36px; height: 36px; }
            .ref-gs-matchup-hint, .ref-gs-matchup-chevron { display: none; }

            /* Team grid: tighter cells, more columns across the wider modal */
            .ref-gs-team-grid { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; margin-bottom: 10px; }
            .ref-gs-team-cell { padding: 8px 4px; }

            /* Footer: slimmer action bar */
            .ref-gs-footer { padding: 10px 14px; gap: 10px; }
            .ref-gs-btn-back { padding: 10px 16px; font-size: 14px; }
            .ref-gs-btn-next { padding: 10px 16px; font-size: 15px; }

            /* SELECT GAME modal (post-PIN game list) — scoped to its id so the
               shared .gc-modal design-system class is untouched elsewhere.
               Fit the wrist height; the body already scrolls. */
            #gameSelectModal .gc-modal { width: min(96vw, 680px); max-height: 96vh; }
            #gameSelectModal .gc-modal-header { padding: 10px 16px; }
            #gameSelectModal .gc-modal-body { padding: 12px 16px; }
            #gameSelectModal .quick-game-card { padding: 12px; }
        }

        /* iPad/WebKit guard (May 29 2026): an <svg> flex-item collapses to 0px width
           inside a flex button, hiding the icon. Global safety net so any icon button
           added later is covered — matches the coach / platform / athlete fix. */
        button svg,
        button i[data-lucide] {
            flex-shrink: 0;
        }

        /* ── Emergency Modal ── */
        .ref-emergency-backdrop {
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.92); /* solid scrim — blur removed (iPad tap-stall on a safety-critical surface), May 29 2026 */
            z-index: 9500;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        .ref-emergency-backdrop.active {
            opacity: 1;
            pointer-events: auto;
        }
        .ref-emergency-modal {
            width: 92%;
            max-width: 420px;
            max-height: 90vh;
            overflow-y: auto;
            background: linear-gradient(175deg, rgba(30, 34, 48, 0.97) 0%, rgba(14, 16, 24, 0.99) 100%);
            border: 1px solid rgba(239, 68, 68, 0.2);
            border-radius: 20px;
            padding: 0;
            transform: scale(0.92) translateY(20px);
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 40px 100px rgba(0, 0, 0, 0.8), 0 0 80px rgba(239, 68, 68, 0.08);
        }
        .ref-emergency-backdrop.active .ref-emergency-modal {
            transform: scale(1) translateY(0);
        }
        .ref-emergency-header {
            padding: 28px 24px 20px;
            text-align: center;
            border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        }
        .ref-emergency-header-icon {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: rgba(239, 68, 68, 0.15);
            border: 1px solid rgba(239, 68, 68, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 14px;
        }
        .ref-emergency-header-icon svg {
            width: 28px;
            height: 28px;
            color: #ef4444;
        }
        .ref-emergency-title {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 22px;
            font-weight: 700;
            letter-spacing: 1.5px;
            color: #ef4444;
            text-transform: uppercase;
        }
        .ref-emergency-subtitle {
            font-size: 13px;
            color: var(--text-secondary);
            margin-top: 4px;
        }
        .ref-emergency-body {
            padding: 20px 24px 24px;
        }
        .ref-emergency-type-label {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--text-secondary);
            margin-bottom: 12px;
        }
        .ref-emergency-type-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 20px;
        }
        .ref-emergency-type-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 18px 10px;
            background: rgba(255, 255, 255, 0.04);
            border: 1.5px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-emergency-type-card:active {
            transform: scale(0.96);
        }
        .ref-emergency-type-card.selected {
            background: rgba(239, 68, 68, 0.12);
            border-color: rgba(239, 68, 68, 0.5);
            box-shadow: 0 0 20px rgba(239, 68, 68, 0.1);
        }
        .ref-emergency-type-card.selected .ref-emergency-type-icon {
            color: #ef4444;
        }
        .ref-emergency-type-card.selected .ref-emergency-type-name {
            color: #fff;
        }
        .ref-emergency-type-icon {
            width: 36px;
            height: 36px;
            color: var(--text-secondary);
            transition: color 0.2s ease;
        }
        .ref-emergency-type-icon svg {
            width: 100%;
            height: 100%;
        }
        .ref-emergency-type-name {
            font-size: 13px;
            font-weight: 600;
            color: var(--text-secondary);
            letter-spacing: 0.5px;
            transition: color 0.2s ease;
        }
        .ref-emergency-notes {
            width: 100%;
            min-height: 80px;
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 12px;
            color: #fff;
            font-size: 14px;
            padding: 12px 14px;
            resize: vertical;
            font-family: inherit;
            outline: none;
            transition: border-color 0.2s ease;
        }
        .ref-emergency-notes::placeholder {
            color: var(--text-muted);
        }
        .ref-emergency-notes:focus {
            border-color: rgba(239, 68, 68, 0.4);
        }
        .ref-emergency-notes-label {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }
        .ref-emergency-actions {
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin-top: 24px;
        }
        .ref-emergency-btn-report {
            width: 100%;
            padding: 16px;
            border: none;
            border-radius: 14px;
            background: #ef4444;
            color: #fff;
            font-family: 'Saira Condensed', sans-serif;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 52px;
        }
        .ref-emergency-btn-report:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }
        .ref-emergency-btn-report:not(:disabled):active {
            transform: scale(0.97);
            background: #dc2626;
        }
        .ref-emergency-btn-cancel {
            width: 100%;
            padding: 14px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 14px;
            background: transparent;
            color: var(--text-secondary);
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            min-height: 48px;
        }
        .ref-emergency-btn-cancel:active {
            background: rgba(255, 255, 255, 0.05);
        }

        /* Confirmation state */
        .ref-emergency-confirmation {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 48px 24px;
            text-align: center;
            gap: 16px;
        }
        .ref-emergency-confirmation.active {
            display: flex;
        }
        .ref-emergency-confirm-icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            background: rgba(34, 197, 94, 0.15);
            border: 2px solid rgba(34, 197, 94, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            animation: confirmPop 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .ref-emergency-confirm-icon svg {
            width: 36px;
            height: 36px;
            color: #22c55e;
        }
        .ref-emergency-confirm-title {
            font-family: 'Saira Condensed', sans-serif;
            font-size: 20px;
            font-weight: 700;
            color: #22c55e;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .ref-emergency-confirm-msg {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
        }
        @keyframes confirmPop {
            0% { transform: scale(0.5); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

        /* ============================================================
           RG HERO CARD — Q333 assigned-game redesign (Jun 3 2026)
           Base here = portrait stack; the landscape @media (max-height:400px)
           flips it side-by-side (left hero | right matchup) and collapses the
           modal chrome. Left = kickoff countdown / running clock + field;
           right = big logos + names (+ live scores when in_progress).
           ============================================================ */
        /* Uniform status-colored game board (Jun 21 2026 flow redesign).
           Every assigned game is one row; outline color = _boardStatus. */
        .gb-board { display: flex; flex-direction: column; gap: 10px; }
        /* Assigned-games visibility is a CLASS toggle, NOT an inline display, so the
           landscape media query below can own the display value (flex column). An
           inline display:block here used to override that rule → the height:100% board
           collapsed and the Quick Game card laid over the games (Jun 24 2026). */
        #assignedGamesSection { display: none; }
        #assignedGamesSection.is-shown { display: block; }
        /* GAMES AS SQUARE-ISH CARDS IN A GRID (Jul 2 2026) — auto-fills 2 columns
           on the narrow portrait wrist, 3-4 across in landscape, so several games
           read at a glance instead of one long row pushing the rest off-screen.
           Per-card priority: TIME BLOCK + who-vs-who (what a ref verifies by).
           Completed games persist as FINAL + score. Status class = color language. */
        .gb-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 8px; align-content: start; }
        .gb-card {
            position: relative; display: flex; flex-direction: column; gap: 7px;
            padding: 11px 11px 9px; min-height: 130px; border-radius: 14px; cursor: pointer; overflow: hidden;
            background: var(--bg-card); border: 1.5px solid var(--border);
            -webkit-tap-highlight-color: transparent;
        }
        .gb-card:active { background: var(--bg-card-hover); transform: scale(0.985); }
        /* left accent bar reinforces the status color at a glance */
        .gb-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--text-muted); }
        .gb-card.final::before { background: var(--green); }
        .gb-card.live::before  { background: var(--red); }
        .gb-card.ready::before { background: var(--gold); }
        .gb-card.final { border-color: rgba(34,197,94,0.40); background: linear-gradient(180deg, rgba(34,197,94,0.08), transparent); }
        .gb-card.live  { border-color: rgba(239,68,68,0.45); background: linear-gradient(180deg, rgba(239,68,68,0.09), transparent); }
        .gb-card.ready { border-color: rgba(245,158,11,0.42); background: linear-gradient(180deg, rgba(245,158,11,0.08), transparent); }
        .gb-time { font-family: 'Saira Condensed', sans-serif; font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: 0.3px; }
        .gb-time .ap { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); margin-left: 3px; }
        .gb-match { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
        .gb-team { display: flex; align-items: center; gap: 6px; min-width: 0; }
        .gb-tn { font-family: 'Saira Condensed', sans-serif; font-size: 1.02rem; font-weight: 700; text-transform: uppercase;
            line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
        .gb-tag { flex: 0 0 auto; margin-left: auto; font-family: 'Saira Condensed', sans-serif; font-size: 0.5rem; font-weight: 800;
            letter-spacing: 0.5px; padding: 1px 4px; border-radius: 3px; line-height: 1.5; }
        .gb-tag.h { background: rgba(34,197,94,0.18); color: var(--green); border: 1px solid rgba(34,197,94,0.30); }
        .gb-tag.a { background: rgba(255,255,255,0.06); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.12); }
        .gb-vs { font-family: 'Saira Condensed', sans-serif; font-size: 0.6rem; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; }
        .gb-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 6px; }
        .gb-st { font-family: 'Saira Condensed', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
        .gb-card.final .gb-st { color: var(--green); }
        .gb-card.live  .gb-st { color: var(--red); }
        .gb-card.ready .gb-st { color: var(--gold); }
        .gb-card:not(.final):not(.live):not(.ready) .gb-st { color: var(--text-secondary); font-size: 0.72rem; }
        .gb-score { font-family: 'Saira Condensed', sans-serif; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.5px; }

        /* DIVISION on a game card (Sep 17 2026, UTL North Jersey): referees run
           different rules by division and age, and one field changes division every
           hour ("Dolphins" plays in seven of them). The division rides above the
           kickoff; on the next-up card it rides in the volt banner instead. */
        .gb-div { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 0.78rem;
            letter-spacing: 1.2px; text-transform: uppercase; color: var(--gold); line-height: 1;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .gb-next-banner .gb-dv-sep { opacity: 0.55; }
        /* Portrait base for the next-up marker (the wrist carousel restyles it as a
           volt banner). Before Sep 17 it had no base rule and painted as body text. */
        .gb-next-banner { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 0.78rem;
            letter-spacing: 1.2px; text-transform: uppercase; color: #8fd400; line-height: 1.1; }
        .gb-next-banner.is-live { color: var(--red); }
        .gb-next .gb-div { display: none; }
        /* Phone: the division drops to its own gold line under UP NEXT, the same
           eyebrow every other card wears. The wrist banner puts it back inline. */
        .gb-next-banner .gb-dv-sep { display: none; }
        .gb-next-banner .gb-bn-dv { display: block; margin-top: 3px; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

        @media (orientation: landscape) and (max-height: 460px) {
            /* SELECT GAME on the wrist (Q333 ~716x298): reclaim every bit of chrome
               and lay the games out as a GRID — same pattern as the field picker —
               so time + matchup read clearly instead of single rows eating the short
               height. (Replaces the Jun 24 scroll-list approach.) */

            /* Near-full-bleed modal: drop the outer margin/radius, use the whole
               height. (The old centered modal wasted a margin band top + bottom.) */
            #gameSelectModal { padding: 0; }
            #gameSelectModal .gc-modal {
                display: flex; flex-direction: column;
                width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; max-height: none;
                margin: 0; border-radius: 0; border-left: 0; border-right: 0;
            }
            /* Compact header + tight body (kills the negative-space bands). */
            #gameSelectModal .gc-modal-header { padding: 6px 14px; min-height: 0; }
            #gameSelectModal .gc-modal-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 8px 12px; }
            #assignedGamesSection.is-shown { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }

            /* QUICK GAME IS NOT ON THE WRIST GAME LIST (Carlos, Sep 17 2026). A league
               referee signed in with a PIN is here to run scheduled games; the button
               cost ~50px of a 298px screen and clipped every card's away team. It
               lives in Settings (the header gear, reachable from this screen in every
               state, so a referee with no games is never trapped — the Jul 2 case).
               Phones keep the big card. */
            #gameSelectModal .quick-game-card { display: none; }

            /* Board scrolls within the flex modal; the base auto-fill grid owns the
               columns (2 on the narrow wrist, 3-4 across in landscape). Compact the
               cards a touch so more fit the short landscape height. */
            .gb-board { flex: 1 1 0; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
            .gb-card { min-height: 112px; padding: 9px 10px 8px; gap: 5px; }
            .gb-time { font-size: 1.3rem; }
        }

        .rg-card {
            position: relative; display: flex; flex-direction: column; gap: 14px;
            padding: 16px 18px; margin-bottom: 12px;
            background: linear-gradient(135deg, rgba(245,158,11,0.12), rgba(245,158,11,0.03));
            border: 1.5px solid rgba(245,158,11,0.34); border-radius: 16px;
            cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent;
            transition: transform 0.15s ease, border-color 0.15s ease;
        }
        .rg-card:active { transform: scale(0.99); }
        .rg-card.rg-live {
            background: linear-gradient(135deg, rgba(239,68,68,0.16), rgba(239,68,68,0.04));
            border-color: rgba(239,68,68,0.45);
        }
        .rg-left { display: flex; flex-direction: column; }
        .rg-eyebrow {
            display: flex; align-items: center; gap: 7px;
            font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 12px;
            letter-spacing: 0.2em; text-transform: uppercase; color: var(--gc-accent-gold);
            margin-bottom: 3px;
        }
        .rg-live .rg-eyebrow { color: #ef4444; }
        .rg-dot {
            width: 8px; height: 8px; border-radius: 50%; background: #ef4444;
            box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
        }
        .rg-kick { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 52px; line-height: 0.9; color: #fff; letter-spacing: -0.01em; }
        .rg-live .rg-kick { text-shadow: 0 0 18px rgba(239,68,68,0.35); }
        .rg-unit { font-size: 22px; margin-left: 2px; }
        .rg-sub { margin-top: 9px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
        .rg-subtime { font-family: 'Saira Condensed', sans-serif; font-weight: 700; font-size: 18px; letter-spacing: 0.04em; color: var(--text-secondary); }
        .rg-live .rg-subtime { color: #ef4444; font-weight: 800; font-size: 22px; }
        .rg-field { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 28px; color: #fff; line-height: 1; }
        .rg-field small { display: block; font-size: 10px; letter-spacing: 0.16em; color: var(--text-secondary); font-weight: 700; margin-top: 2px; }
        .rg-right { display: flex; flex-direction: column; gap: 7px; }
        .rg-team { display: flex; align-items: center; gap: 14px; background: rgba(0,0,0,0.28); border-radius: 12px; padding: 8px 14px; }
        .rg-logo { width: 54px; height: 54px; border-radius: 11px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .rg-logo img { width: 44px; height: 44px; object-fit: contain; }
        .rg-logo-fb { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 18px; color: #fff; }
        .rg-namewrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
        .rg-name { font-family: 'Saira Condensed', sans-serif; font-weight: 700; font-size: 26px; color: #fff; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .rg-rec { font-family: 'Saira Condensed', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.06em; color: var(--text-secondary); }
        .rg-score { font-family: 'Orbitron', sans-serif; font-weight: 800; font-size: 32px; color: #fff; }
        .rg-vs { font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.2em; color: var(--text-secondary); text-align: center; }
        .rg-open {
            position: absolute; top: 14px; right: 16px;
            font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 12px;
            letter-spacing: 0.12em; text-transform: uppercase; color: #0a0e17;
            background: var(--gc-accent-gold); padding: 7px 14px; border-radius: 8px;
        }
        .rg-live .rg-open { background: #ef4444; color: #fff; }
        .rg-decline {
            width: 100%; padding: 9px; background: transparent;
            border: 1px solid rgba(255,255,255,0.16); border-radius: 8px;
            color: #9aa3af; font-family: inherit; font-size: 0.8rem; font-weight: 600;
            letter-spacing: 0.02em; cursor: pointer;
        }

        /* ============================================================
           NEXT UP CARD — premium broadcast DNA (May 23 2026)
           Used by renderAssignedGames() in referee/app.js. First card
           is the hero "NEXT UP" treatment; remaining games collapse to
           a tighter row variant.
           ============================================================ */
        .next-up-card {
            position: relative;
            margin-bottom: 14px;
            padding: 18px 18px 16px;
            background: linear-gradient(180deg, rgba(245,158,11,0.10) 0%, rgba(245,158,11,0.04) 60%, rgba(245,158,11,0.02) 100%);
            border: 1.5px solid rgba(245,158,11,0.32);
            border-radius: 16px;
            cursor: pointer;
            overflow: hidden;
            transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .next-up-card::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent 0%, var(--gc-accent-gold) 50%, transparent 100%);
            opacity: 0.7;
        }
        .next-up-card:hover {
            transform: translateY(-1px);
            border-color: rgba(245,158,11,0.55);
            box-shadow: 0 12px 28px -16px rgba(245,158,11,0.45);
        }
        .next-up-card:active { transform: scale(0.99); }

        .next-up-card.next-up-live {
            background: linear-gradient(180deg, rgba(239,68,68,0.14) 0%, rgba(239,68,68,0.05) 60%);
            border-color: rgba(239,68,68,0.45);
        }
        .next-up-card.next-up-live::before {
            background: linear-gradient(90deg, transparent 0%, #ef4444 50%, transparent 100%);
        }

        .next-up-banner {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;
        }
        .next-up-label {
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-weight: 800;
            font-size: 11px;
            letter-spacing: 0.22em;
            color: var(--gc-accent-gold);
            text-transform: uppercase;
        }
        .next-up-live .next-up-label { color: #ef4444; }
        .next-up-live-dot {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: #ef4444;
            box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
        }

        .next-up-kickoff {
            margin-bottom: 14px;
        }
        .next-up-kickoff-primary {
            font-family: 'Orbitron', 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 26px;
            line-height: 1.05;
            letter-spacing: 0.04em;
            color: var(--text-primary);
            text-transform: uppercase;
        }
        .next-up-live .next-up-kickoff-primary {
            color: #ef4444;
            text-shadow: 0 0 18px rgba(239,68,68,0.35);
        }
        .next-up-kickoff-secondary {
            margin-top: 4px;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 600;
            font-size: 13px;
            letter-spacing: 0.08em;
            color: var(--text-secondary);
            text-transform: uppercase;
        }

        .next-up-matchup {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            gap: 10px;
            padding: 12px 14px;
            margin-bottom: 12px;
            background: rgba(0,0,0,0.22);
            border-radius: 10px;
        }
        .next-up-team {
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 0;
        }
        .next-up-team--away {
            justify-content: flex-end;
            flex-direction: row-reverse;
        }
        .next-up-team-name {
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 15px;
            color: var(--text-primary);
            letter-spacing: 0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .next-up-vs {
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 700;
            font-size: 11px;
            color: var(--text-tertiary, rgba(255,255,255,0.4));
            letter-spacing: 0.12em;
        }

        .next-up-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 14px;
            font-size: 12px;
            color: var(--text-secondary);
        }
        .next-up-loc {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            color: var(--text-secondary);
        }
        .next-up-loc svg {
            opacity: 0.7;
            flex-shrink: 0;
        }
        .next-up-code {
            font-family: 'Orbitron', monospace;
            font-size: 11px;
            font-weight: 700;
            letter-spacing: 0.1em;
            padding: 3px 8px;
            background: rgba(245,158,11,0.12);
            color: var(--gc-accent-gold);
            border-radius: 4px;
        }
        .next-up-pay {
            margin-left: auto;
            font-family: 'Orbitron', sans-serif;
            font-weight: 700;
            font-size: 16px;
            color: #22c55e;
            letter-spacing: 0.04em;
        }

        .next-up-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 14px;
            background: var(--gc-accent-gold);
            color: #0b0e17;
            border-radius: 10px;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 14px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            transition: filter 0.15s ease;
        }
        .next-up-card:hover .next-up-cta { filter: brightness(1.05); }
        .next-up-live .next-up-cta {
            background: #ef4444;
            color: #fff;
        }

        /* ---- Upcoming row (compact variant for games 2+) ---- */
        .upcoming-row {
            display: grid;
            grid-template-columns: 90px 1fr auto 18px;
            align-items: center;
            gap: 12px;
            padding: 12px 14px;
            margin-bottom: 8px;
            background: rgba(255,255,255,0.03);
            border: 1px solid rgba(255,255,255,0.06);
            border-radius: 10px;
            cursor: pointer;
            transition: background 0.15s ease, border-color 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .upcoming-row:hover {
            background: rgba(255,255,255,0.05);
            border-color: rgba(245,158,11,0.2);
        }
        .upcoming-row:active { transform: scale(0.995); }
        .upcoming-row-kickoff {
            min-width: 0;
        }
        .upcoming-row-day {
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 12px;
            color: var(--gc-accent-gold);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            line-height: 1.1;
        }
        .upcoming-row-time {
            font-size: 11px;
            color: var(--text-tertiary, rgba(255,255,255,0.5));
            margin-top: 2px;
        }
        .upcoming-row-matchup {
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 700;
            font-size: 13px;
            color: var(--text-primary);
            letter-spacing: 0.02em;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .upcoming-row-vs {
            color: var(--text-tertiary, rgba(255,255,255,0.4));
            font-weight: 600;
            margin: 0 6px;
            font-size: 11px;
        }
        .upcoming-row-pay {
            font-family: 'Orbitron', monospace;
            font-weight: 700;
            font-size: 13px;
            color: #22c55e;
            min-width: 36px;
            text-align: right;
        }
        .upcoming-row-arrow {
            color: var(--text-tertiary, rgba(255,255,255,0.35));
            font-size: 16px;
            text-align: right;
        }

        @media (max-width: 480px) {
            .next-up-kickoff-primary { font-size: 22px; }
            .next-up-team-name { font-size: 14px; }
            .next-up-matchup { gap: 6px; padding: 10px 12px; }
            .upcoming-row { grid-template-columns: 72px 1fr auto 16px; gap: 10px; }
            .upcoming-row-day { font-size: 11px; }
        }
    
        /* ============================================================
           APP MODE — URL-driven page state (May 23 2026)
           body[data-app-mode] is set by js: 'dashboard' when no game is
           loaded (URL has no ?game= param), 'game' when a game is loaded.
           This makes the scoreboard literally vanish when on the dashboard
           so it can't bleed through the modal overlay, which was the
           root cause of the "scoreboard showing behind SELECT GAME"
           layering issue. The URL becomes the source of truth — reload,
           bookmark, back-button all behave correctly.
           ============================================================ */
        body[data-app-mode="dashboard"] .app-container {
            display: none;
        }
        body[data-app-mode="dashboard"] {
            background: var(--bg-app, #0d1117);
        }

        /* ============================================================
           REFEREE ONBOARDING v47 — broadcast lock-screen DNA (May 23 2026)
           Full-screen, PIN-first, premium SC product feel.
           ============================================================ */
        /* IMPORTANT: do NOT set `display: flex` on the base class — same
           anti-pattern that leaked the Settings modal onto the boot screen
           (caught + fixed v49). Onboarding's JS sets inline display:flex
           when opening, so we ONLY want the visual props here. */
        .ref-onboarding--v2 {
            background: linear-gradient(180deg, #05070d 0%, #0b0e17 50%, #05070d 100%);
            align-items: center;
            justify-content: center;
            overflow-y: auto;
            padding: max(20px, env(safe-area-inset-top, 20px)) 16px max(20px, env(safe-area-inset-bottom, 20px));
            -webkit-overflow-scrolling: touch;
        }
        /* Defensive — if any future code path uses .active to show the
           onboarding modal (instead of inline style), the layout still
           applies correctly. Mirrors the .gc-modal-backdrop.active pattern. */
        .ref-onboarding--v2.active {
            display: flex;
        }

        /* Animated field-grid background — broadcast production vibe */
        .ref-onboarding-bg {
            position: absolute;
            inset: 0;
            overflow: hidden;
            pointer-events: none;
        }
        .ref-onboarding-grid {
            position: absolute;
            inset: -10%;
            background-image:
                linear-gradient(rgba(245, 158, 11, 0.04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(245, 158, 11, 0.04) 1px, transparent 1px);
            background-size: 40px 40px;
            opacity: 0.6;
            mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
            -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 70%);
        }
        .ref-onboarding-glow {
            position: absolute;
            top: 18%;
            left: 50%;
            transform: translateX(-50%);
            width: 480px;
            height: 480px;
            border-radius: 50%;
            /* was: + filter: blur(40px) — a per-frame GPU blur of a gradient that is already soft */
            background: radial-gradient(circle, rgba(245, 158, 11, 0.16) 0%, rgba(245, 158, 11, 0.06) 35%, transparent 70%);
            opacity: 0.7;
        }

        .ref-onboarding--v2 .ref-onboarding-stage {
            position: relative;
            z-index: 1;
            width: 100%;
            max-width: 420px;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        .ref-onb-hero {
            text-align: center;
        }

        .ref-onb-brand {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            margin-bottom: 22px;
        }
        .ref-onb-logo {
            width: 68px;
            height: 68px;
            margin-bottom: 4px;
            filter: drop-shadow(0 8px 20px rgba(245, 158, 11, 0.35));
        }
        .ref-onb-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 0.24em;
            text-transform: uppercase;
            color: var(--gc-accent-gold, #f59e0b);
        }
        .ref-onb-dot {
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--gc-accent-gold, #f59e0b);
            box-shadow: 0 0 8px var(--gc-accent-gold, #f59e0b);
        }
        .ref-onb-headline {
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-weight: 800;
            font-size: 36px;
            line-height: 1;
            letter-spacing: 0.16em;
            color: #fff;
            margin: 2px 0 4px;
            text-transform: uppercase;
        }
        /* Version footer on the PIN screen (Carlos, Sep 6 2026): app build + wrapper, so a
           band's software can be read at arm's length without a cable. */
        .ref-onb-version { margin: 6px 0 0; font-family: var(--gc-font-body, 'Rajdhani', sans-serif); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gc-text-color-secondary, rgba(255,255,255,0.45)); }
        .ref-onb-tagline {
            font-family: 'Inter', -apple-system, sans-serif;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.55);
            margin: 0;
            letter-spacing: 0.01em;
        }

        /* ---- PIN entry block (hero) ---- */
        .ref-onb-pin {
            margin-bottom: 22px;
        }
        .ref-onb-pin .pin-display {
            margin: 0 auto 20px;
            justify-content: center;
        }
        .ref-onb-keypad {
            max-width: 320px;
            margin: 0 auto;
        }

        /* ---- The league's day code (mig 360, v219) ----
           Two prompts on one pad. At the CODE prompt the last two dots are not
           there: four digits, four dots. The sentence over them is longer than
           "Enter your PIN…" and is allowed to wrap (the wrist layout pins the
           default one to a single nowrap line). */
        .ref-onboarding .pin-display--code .pin-digit:nth-child(n + 5) { display: none; }
        .ref-onb-tagline--day { white-space: normal; }
        /* v220 — THE CODE PROMPT TAKES THE STAGE (Carlos, Sep 8 2026: "I had no
           idea it even switched"). #onboardingModal wears .ref-onboarding--code
           while the pad asks for the league's four digits: the headline turns
           gold and says LEAGUE CODE, the eyebrow says PIN ACCEPTED, a hint says
           where the code comes from, and Quick Game / Demo Game step aside so
           the only thing on the screen is the question being asked. */
        .ref-onb-hint {
            margin: 6px 0 0;
            font-family: var(--gc-font-body, 'Rajdhani', sans-serif);
            font-size: 13px; line-height: 1.3; white-space: normal;
            color: rgba(255, 255, 255, 0.72);
        }
        .ref-onb-hint[hidden] { display: none; }
        .ref-onboarding--code .ref-onb-headline { color: var(--gc-accent-gold, #f59e0b); }
        .ref-onboarding--code .ref-onb-tagline { color: #fff; font-size: 15px; white-space: normal; }
        .ref-onboarding--code .ref-onb-secondary { display: none; }
        .ref-onboarding--code .ref-onb-version { display: none; }
        /* Oct 7 2026 — QUICK GAME NEEDS AN OFFICIAL. A signed-out Quick Game tap
           shows this same pad wearing .ref-onboarding--official: one title,
           the PIN boxes, "Sign in with email", Cancel. Nothing else on screen
           (onboarding.js requireOfficialThen). */
        .ref-onb-official-title, .ref-onb-official { display: none; }
        .ref-onboarding--official .ref-onb-official-title {
            display: block; margin: 2px 0 4px;
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-weight: 800;
            font-size: 30px; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
            color: var(--gc-text-color-primary, #fff);
        }
        .ref-onboarding--official .ref-onb-headline,
        .ref-onboarding--official .ref-onb-eyebrow,
        .ref-onboarding--official .ref-onb-tagline,
        .ref-onboarding--official .ref-onb-version,
        .ref-onboarding--official .ref-onb-secondary { display: none; }
        .ref-onboarding--official .ref-onb-official {
            display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 12px 0 0;
        }
        .ref-onb-official-email {
            display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px;
            font-family: var(--gc-font-body, 'Rajdhani', sans-serif); font-weight: 700; font-size: 15px;
            color: var(--gc-accent-gold, #f59e0b); text-decoration: underline; text-underline-offset: 3px;
        }
        .ref-onb-official-cancel {
            min-height: 44px; padding: 0 20px; background: none;
            border: 1px solid var(--gc-border-subtle, rgba(255, 255, 255, 0.22)); border-radius: 4px;
            font-family: var(--gc-font-body, 'Rajdhani', sans-serif); font-weight: 700; font-size: 13px;
            letter-spacing: 0.06em; text-transform: uppercase;
            color: var(--gc-text-color-secondary, rgba(255, 255, 255, 0.8));
        }
        /* Over the wizard too: a start that finds nobody signed in asks here
           without closing the wizard (#gameCreationModal is 2000). */
        #onboardingModal.ref-onboarding--official { z-index: 2100; }
        .ref-onb-back {
            margin: 10px 0 0; padding: 8px 12px; min-height: 36px;
            background: none; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px;
            font-family: var(--gc-font-body, 'Rajdhani', sans-serif); font-weight: 700; font-size: 12px;
            letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8);
            cursor: pointer; -webkit-tap-highlight-color: transparent;
        }
        .ref-onb-back[hidden] { display: none; }
        .ref-onb-back:active { background: rgba(255, 255, 255, 0.1); }

        /* The one line under the pad: the league this band remembers. */
        .ref-onb-league {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 4px 10px;
            margin-top: 10px;
            font-family: 'Inter', -apple-system, sans-serif;
            font-size: 12px;
            color: var(--gc-text-color-secondary);
        }
        .ref-onb-league__pip {
            width: 7px; height: 7px;
            border-radius: 50%;
            background: var(--gc-status-success);
            flex: 0 0 auto;
        }
        .ref-onb-league__name { color: var(--gc-text-color-primary); }
        .ref-onb-league__switch {
            background: none;
            border: 0;
            padding: 0;
            font: inherit;
            color: var(--gc-text-color-secondary);
            text-decoration: underline;
            cursor: pointer;
        }

        .ref-onb-pin-status {
            margin-top: 14px;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--gc-accent-gold, #f59e0b);
        }

        /* ---- Secondary actions ---- */
        .ref-onb-secondary {
            margin-top: 12px;
        }
        .ref-onb-sep {
            position: relative;
            margin: 6px auto 18px;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 600;
            font-size: 11px;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.6);
        }
        .ref-onb-sep::before,
        .ref-onb-sep::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 80px;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
        }
        .ref-onb-sep::before { right: calc(50% + 22px); }
        .ref-onb-sep::after  { left:  calc(50% + 22px); }

        .ref-onb-tile-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 16px;
        }
        .ref-onb-tile {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 6px;
            padding: 16px 12px;
            min-height: 96px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            color: rgba(255, 255, 255, 0.85);
            font: inherit;
            cursor: pointer;
            transition: border-color 0.2s ease, background 0.2s ease, transform 0.12s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-onb-tile svg {
            width: 22px;
            height: 22px;
            color: var(--gc-accent-gold, #f59e0b);
            opacity: 0.85;
        }
        .ref-onb-tile-label {
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 14px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #fff;
        }
        .ref-onb-tile-sub {
            font-size: 11px;
            color: rgba(255, 255, 255, 0.6);
            letter-spacing: 0.04em;
        }
        .ref-onb-tile:hover {
            border-color: rgba(245, 158, 11, 0.35);
            background: rgba(245, 158, 11, 0.04);
        }
        .ref-onb-tile:active { transform: scale(0.98); }

        .ref-onb-footer-link {
            display: block;
            width: 100%;
            padding: 12px 0;
            background: transparent;
            border: none;
            font-family: 'Inter', sans-serif;
            font-size: 13px;
            color: rgba(255, 255, 255, 0.6);
            cursor: pointer;
            letter-spacing: 0.02em;
        }
        .ref-onb-footer-link strong {
            color: var(--gc-accent-gold, #f59e0b);
            font-weight: 700;
        }
        .ref-onb-footer-link:active strong {
            filter: brightness(1.1);
        }

        /* Mobile tightening */
        @media (max-width: 380px) {
            .ref-onb-headline { font-size: 30px; }
            .ref-onb-logo { width: 56px; height: 56px; }
            .ref-onb-tile { min-height: 88px; padding: 14px 10px; }
        }

        /* ============================================================
           REFEREE SETTINGS v47 — broadcast DNA, profile hub (May 23 2026)
           Mirrors v47 onboarding language: gold-on-dark, Saira Condensed
           labels, Orbitron numerics, subtle glow, pulsing LIVE dot.
           ============================================================ */
        /* IMPORTANT: do NOT set `display: flex` on the base class — that
           overrides .gc-modal-backdrop's default `display: none` and
           leaks the Settings modal onto the boot screen (Carlos caught
           May 23 2026 v48). Only set the layout props on the base; let
           the `.gc-modal-backdrop.active` rule own the show/hide. */
        .ref-settings-v2 {
            background: linear-gradient(180deg, #05070d 0%, #0b0e17 50%, #05070d 100%);
            align-items: flex-start;
            justify-content: center;
            overflow-y: auto;
            padding: max(20px, env(safe-area-inset-top, 20px)) 16px max(40px, env(safe-area-inset-bottom, 40px));
            -webkit-overflow-scrolling: touch;
        }
        .ref-settings-stage {
            width: 100%;
            max-width: 440px;
            display: flex;
            flex-direction: column;
            gap: 16px;
            position: relative;
        }

        /* ── 2-pane settings (Jun 17 2026) ── nav rail + content. Portrait =
           top tabs; Q333/landscape = rail on the left filling the wide screen.
           Sections are tagged data-pane and shown/hidden by the active pane. */
        .rset-body { display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; min-height: 0; }
        .rset-rail { display: flex; flex-direction: row; gap: 7px; flex: 0 0 auto; }
        .rset-tab {
            flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px;
            height: 44px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.08);
            border-bottom: 3px solid transparent; background: rgba(255,255,255,0.04);
            color: rgba(255,255,255,0.6); font-family: 'Saira Condensed', sans-serif;
            font-weight: 800; font-size: 14px; letter-spacing: 1px; text-transform: uppercase;
            cursor: pointer; -webkit-tap-highlight-color: transparent;
        }
        .rset-tab svg { width: 18px; height: 18px; flex: 0 0 auto; }
        .rset-tab.active { background: linear-gradient(180deg, rgba(245,158,11,0.16), rgba(245,158,11,0.04)); border-color: rgba(245,158,11,0.4); border-bottom-color: var(--gold); color: #fff; }
        .rset-tab.danger.active { border-color: rgba(239,68,68,0.4); border-bottom-color: #ef4444; background: linear-gradient(180deg, rgba(239,68,68,0.14), rgba(239,68,68,0.04)); }
        .rset-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
        /* Hide every section NOT in the active pane. !important is required to
           beat the inline display:'' the conditional in-game sections set via JS
           — without moving them into pane containers this is the clean isolation. */
        .rset-content[data-active-pane="game"]    [data-pane]:not([data-pane="game"]),
        .rset-content[data-active-pane="profile"] [data-pane]:not([data-pane="profile"]),
        .rset-content[data-active-pane="account"] [data-pane]:not([data-pane="account"]) { display: none !important; }

        @media (orientation: landscape) and (max-height: 460px) {
            .ref-settings-v2 { align-items: stretch; overflow: hidden; padding: max(8px,env(safe-area-inset-top,8px)) 12px max(8px,env(safe-area-inset-bottom,8px)); }
            .ref-settings-stage { max-width: none; height: 100%; gap: 8px; }
            .rset-body { flex-direction: row; }
            .rset-rail { flex-direction: column; flex: 0 0 132px; gap: 7px; }
            .rset-tab { justify-content: flex-start; padding: 0 14px; height: auto; flex: 1 1 0; border-bottom: 1px solid rgba(255,255,255,0.08); border-left: 3px solid transparent; }
            .rset-tab.active { border-bottom-color: rgba(245,158,11,0.4); border-left-color: var(--gold); }
            .rset-tab.danger.active { border-left-color: #ef4444; }
            .rset-content { overflow-y: auto; gap: 6px; }
            /* compress the sections so the GAME pane (watch hand + rule tiles)
               fits the short screen without scrolling */
            .rset-content .ref-settings-section { margin: 0; }
            .rset-content .ref-settings-section-label { margin-bottom: 3px; }
            .rset-content .ref-hand-btn { min-height: 32px; }
            .rset-content .rgs-tile { min-height: 58px; }
        }

        /* ---- Header ---- */
        .ref-settings-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 4px 2px 0;
        }
        .ref-settings-header-titleblock { flex: 1; }
        .ref-settings-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 11px;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--gc-accent-gold, #f59e0b);
        }
        .ref-settings-close {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.7);
            font-size: 22px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-settings-close:active { background: rgba(255, 255, 255, 0.12); }

        /* ---- Profile identity card ---- */
        .ref-settings-profile {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 18px;
            background: linear-gradient(180deg, rgba(245, 158, 11, 0.10) 0%, rgba(245, 158, 11, 0.02) 100%);
            border: 1px solid rgba(245, 158, 11, 0.25);
            border-radius: 16px;
        }
        .ref-settings-avatar {
            flex-shrink: 0;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(180deg, var(--gc-accent-gold, #f59e0b) 0%, #d97706 100%);
            color: #0b0e17;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 22px;
            letter-spacing: 0.04em;
            box-shadow: 0 6px 16px -6px rgba(245, 158, 11, 0.5);
        }
        .ref-settings-identity { flex: 1; min-width: 0; }
        .ref-settings-name {
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 22px;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            color: #fff;
            line-height: 1.1;
        }
        .ref-settings-meta {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.55);
            margin-top: 4px;
            letter-spacing: 0.02em;
        }

        /* ---- Stats row ---- */
        .ref-settings-stats {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 8px;
        }
        .ref-settings-stat {
            padding: 14px 8px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 12px;
            text-align: center;
        }
        .ref-settings-stat-value {
            font-family: 'Orbitron', 'Saira Condensed', sans-serif;
            font-weight: 700;
            font-size: 22px;
            color: var(--gc-accent-gold, #f59e0b);
            line-height: 1;
            letter-spacing: 0.02em;
        }
        .ref-settings-stat-label {
            margin-top: 6px;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 700;
            font-size: 10px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.6);
        }

        /* ---- Sections (Contact, Game Rules) ---- */
        .ref-settings-section {
            padding: 16px;
            background: rgba(255, 255, 255, 0.025);
            border: 1px solid rgba(255, 255, 255, 0.06);
            border-radius: 14px;
        }
        .ref-settings-section-label {
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 11px;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--gc-accent-gold, #f59e0b);
            margin-bottom: 14px;
        }

        /* ---- Info rows (contact block) ---- */
        .ref-settings-info-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.04);
        }
        .ref-settings-info-row:last-of-type { border-bottom: none; }
        .ref-settings-info-key {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
            font-weight: 500;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }
        .ref-settings-info-val {
            font-size: 14px;
            color: #fff;
            font-weight: 500;
            text-align: right;
            word-break: break-word;
            max-width: 60%;
        }
        .ref-settings-info-note {
            margin-top: 12px;
            font-size: 11px;
            color: rgba(255, 255, 255, 0.6);
            font-style: italic;
            text-align: center;
        }

        /* ---- New Game CTA ---- */
        .ref-settings-cta {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            min-height: 52px;
            padding: 14px 20px;
            background: linear-gradient(180deg, var(--gc-accent-gold, #f59e0b) 0%, #d97706 100%);
            border: none;
            border-radius: 12px;
            color: #0b0e17;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 14px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            cursor: pointer;
            box-shadow: 0 8px 20px -8px rgba(245, 158, 11, 0.5);
            transition: filter 0.15s ease, transform 0.12s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-settings-cta:hover { filter: brightness(1.08); }
        .ref-settings-cta:active { transform: scale(0.98); }
        .ref-settings-cta svg {
            color: #0b0e17;
        }

        /* ---- Game section: Code + Share + End (toolbar → settings) ---- */
        .ref-settings-code-row {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            padding: 12px 14px;
            margin-bottom: 12px;
            background: rgba(245, 158, 11, 0.06);
            border: 1px solid rgba(245, 158, 11, 0.22);
            border-radius: 12px;
            cursor: pointer;
            text-align: left;
            -webkit-tap-highlight-color: transparent;
            transition: background 0.15s ease, border-color 0.15s ease;
        }
        .ref-settings-code-row:active { background: rgba(245, 158, 11, 0.12); }
        .ref-settings-code-row--copied {
            background: rgba(34, 197, 94, 0.12);
            border-color: rgba(34, 197, 94, 0.4);
        }
        .ref-settings-code-row--copied .ref-settings-code-val { color: var(--green, #22c55e); }
        .ref-settings-code-key {
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 700;
            font-size: 11px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: rgba(255, 255, 255, 0.5);
        }
        .ref-settings-code-val {
            flex: 1;
            min-width: 0;
            font-family: 'Orbitron', 'Saira Condensed', monospace;
            font-weight: 700;
            font-size: 20px;
            letter-spacing: 0.06em;
            color: var(--gold, #f59e0b);
            text-align: right;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .ref-settings-code-copy { flex-shrink: 0; color: rgba(245, 158, 11, 0.7); }

        .ref-settings-game-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }

        /* Big primary END GAME — the first thing in settings while a game is live */
        .ref-settings-endgame-big {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            min-height: 56px;
            margin: 0 0 16px;
            padding: 16px;
            border: 1px solid rgba(239, 68, 68, 0.5);
            border-radius: 14px;
            background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
            color: #fff;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 18px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
            transition: filter 0.15s ease, transform 0.12s ease;
        }
        .ref-settings-endgame-big:active { transform: scale(0.98); filter: brightness(1.08); }
        .ref-settings-endgame-big svg { flex-shrink: 0; }

        /* Header reduced to just the settings gear — Share/Code/End moved into
           this modal. Left-align the lone gear (no bar chrome to balance). */
        .header-bar--gearonly { justify-content: flex-start; }
        .ref-settings-game-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 48px;
            padding: 12px 10px;
            border-radius: 12px;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800;
            font-size: 13px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            cursor: pointer;
            -webkit-tap-highlight-color: transparent;
            transition: filter 0.15s ease, transform 0.12s ease, background 0.15s ease;
        }
        .ref-settings-game-btn:active { transform: scale(0.98); }
        .ref-settings-game-btn svg { flex-shrink: 0; }
        .ref-settings-game-btn--share {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.14);
            color: #fff;
        }
        .ref-settings-game-btn--share:active { background: rgba(255, 255, 255, 0.10); }
        .ref-settings-game-btn--end {
            background: rgba(239, 68, 68, 0.08);
            border: 1px solid rgba(239, 68, 68, 0.30);
            color: #fca5a5;
        }
        .ref-settings-game-btn--end:active { background: rgba(239, 68, 68, 0.16); color: #fff; }

        /* ---- Sign Out (destructive but de-emphasized) ---- */
        .ref-settings-signout {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 48px;
            padding: 12px 18px;
            background: rgba(239, 68, 68, 0.06);
            border: 1px solid rgba(239, 68, 68, 0.2);
            border-radius: 12px;
            color: #fca5a5;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 700;
            font-size: 13px;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            cursor: pointer;
            transition: background 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-settings-signout:hover {
            background: rgba(239, 68, 68, 0.12);
            color: #fff;
        }
        .ref-settings-signout:active { transform: scale(0.99); }

        /* ---- Build stamp footer ---- */
        .ref-settings-build {
            text-align: center;
            font-size: 11px;
            font-family: 'Orbitron', monospace;
            color: rgba(255, 255, 255, 0.2);
            margin-top: 4px;
            letter-spacing: 0.08em;
            user-select: text;
        }

        /* Mobile tightening */
        @media (max-width: 380px) {
            .ref-settings-avatar { width: 52px; height: 52px; font-size: 19px; }
            .ref-settings-name { font-size: 19px; }
            .ref-settings-stat-value { font-size: 20px; }
        }

        /* ====================================================================
           SHORT LANDSCAPE (Q333 mini, ~716×298) — settings modal compact fit.
           Backdrop keeps overflow-y:auto as the safety net; these rules just
           reduce the resting height so nothing is cut on a 298px-tall screen.
           ==================================================================== */
        @media (orientation: landscape) and (max-height: 460px) {
            .ref-settings-v2 { padding: 10px 16px 14px; align-items: stretch; }
            .ref-settings-stage { max-width: 560px; margin: 0 auto; gap: 10px; }
            .ref-settings-header { padding: 0; }
            .ref-settings-profile { padding: 12px; gap: 12px; }
            .ref-settings-avatar { width: 44px; height: 44px; font-size: 17px; }
            .ref-settings-name { font-size: 18px; }
            .ref-settings-meta { font-size: 11px; margin-top: 2px; }
            .ref-settings-stats { gap: 6px; }
            .ref-settings-stat { padding: 8px 6px; }
            .ref-settings-stat-value { font-size: 17px; }
            .ref-settings-stat-label { margin-top: 3px; font-size: 9px; }
            .ref-settings-section { padding: 12px; }
            .ref-settings-section-label { margin-bottom: 10px; }
            .ref-settings-info-row { padding: 7px 0; }
            .ref-settings-cta { min-height: 44px; padding: 11px 16px; }
            .ref-settings-code-row { padding: 9px 12px; margin-bottom: 10px; }
            .ref-settings-code-val { font-size: 17px; }
            .ref-settings-game-btn { min-height: 42px; padding: 10px; }
            .ref-settings-signout { min-height: 42px; padding: 10px 16px; }
            .ref-gs-settings-grid--2col { grid-template-columns: 1fr 1fr 1fr; }
            .ref-gs-setting-card { padding: 8px 6px; }
            .ref-settings-build { margin-top: 0; }
        }

        /* ====================================================================
           REFEREE ENTRY (PIN) — Q333 mini-phone adaptive layout.
           LANDSCAPE 716×298 = two columns (keypad | brand+options).
           PORTRAIT  341×759 = single column, fill vertical space.
           Scoped to .ref-onboarding--v2 so the in-game UI is untouched.
           ==================================================================== */
        /* Landscape (Q333 ~716×298): two columns per the mockup — LEFT (40%) =
           brand (logo in-line with REFEREE) centered over Quick/Demo tiles +
           Create-account, the whole left column vertically centered; RIGHT (60%)
           = keypad with BIG keys. Grid AREAS place children independent of DOM
           order; `fr` columns (not %) so column-gap can't overflow the right
           edge. Device-verified at 716×298. */
        @media (orientation: landscape) and (max-height: 460px) {
            .ref-onboarding--v2 {
                padding-top: 12px; padding-bottom: 12px;
                padding-left: max(22px, env(safe-area-inset-left, 0px));
                padding-right: max(30px, env(safe-area-inset-right, 0px));
                align-items: stretch; overflow: hidden;
            }
            .ref-onboarding--v2 .ref-onboarding-stage { max-width: 100%; width: 100%; height: 100%; justify-content: center; gap: 0; }
            .ref-onboarding--v2 .ref-onb-hero {
                display: grid;
                grid-template-columns: 40fr 60fr;
                grid-template-rows: 1fr auto auto 1fr;
                grid-template-areas: ". pin" "brand pin" "opts pin" ". pin";
                align-items: center; column-gap: 26px; row-gap: 10px;
                width: 100%; height: 100%;
            }
            /* LEFT TOP — brand: logo IN LINE with eyebrow+REFEREE, group centered */
            .ref-onboarding--v2 .ref-onb-brand {
                grid-area: brand; align-self: end; margin: 0;
                display: grid; grid-template-columns: auto auto;
                grid-template-areas: "logo eyebrow" "logo headline" "tagline tagline" "hint hint" "back back";
                column-gap: 12px; align-items: center; justify-content: center; text-align: left;
            }
            .ref-onboarding--v2 .ref-onb-logo { grid-area: logo; width: 52px; height: 52px; margin: 0; }
            .ref-onboarding--v2 .ref-onb-eyebrow { grid-area: eyebrow; margin: 0; font-size: 11px; justify-content: flex-start; }
            .ref-onboarding--v2 .ref-onb-headline { grid-area: headline; margin: 0; font-size: 36px; line-height: 0.95; }
            .ref-onboarding--v2 .ref-onb-official-title { grid-area: headline; margin: 0; font-size: 26px; line-height: 0.95; }
            .ref-onboarding--v2 .ref-onb-official { grid-area: opts; align-self: start; margin: 0; }
            .ref-onboarding--v2 .ref-onb-tagline { grid-area: tagline; margin: 5px 0 0; font-size: 12px; text-align: center; white-space: nowrap; }
            /* A day-code sentence is a full sentence; on the wrist it wraps
               rather than running off the left panel (nowrap above). */
            .ref-onboarding--v2 .ref-onb-tagline--day { white-space: normal; font-size: 11px; line-height: 1.25; }
            /* v220 — the code prompt on the wrist: the sentence and the hint both
               wrap and stay readable; the headline is the cue. */
            .ref-onboarding--v2 .ref-onb-hint { grid-area: hint; margin: 4px 0 0; font-size: 11px; line-height: 1.25; text-align: center; }
            .ref-onboarding--v2.ref-onboarding--code .ref-onb-tagline { font-size: 13px; line-height: 1.25; }
            .ref-onboarding--v2 .ref-onb-back { grid-area: back; justify-self: center; margin: 6px 0 0; min-height: 30px; padding: 5px 10px; font-size: 11px; }
            .ref-onboarding--v2 .ref-onb-league { margin-top: 6px; font-size: 10px; gap: 2px 8px; }
            /* LEFT BOTTOM — options: no "or", tiles with sublabels */
            .ref-onboarding--v2 .ref-onb-secondary { grid-area: opts; align-self: start; margin: 0; width: 100%; text-align: center; }
            .ref-onboarding--v2 .ref-onb-sep { display: none; }
            .ref-onboarding--v2 .ref-onb-tile-row { gap: 12px; margin: 0 0 8px; display: flex; }
            .ref-onboarding--v2 .ref-onb-tile { min-height: 0; padding: 10px 12px; gap: 3px; flex: 1 1 0; align-items: center; }
            .ref-onboarding--v2 .ref-onb-tile svg { width: 18px; height: 18px; }
            .ref-onboarding--v2 .ref-onb-tile-label { font-size: 14px; }
            .ref-onboarding--v2 .ref-onb-tile-sub { display: block; font-size: 12px; }
            .ref-onboarding--v2 .ref-onb-footer-link { padding: 4px 0 0; font-size: 12px; }
            /* RIGHT — keypad: 60% width, big keys */
            .ref-onboarding--v2 .ref-onb-pin { grid-area: pin; margin: 0; align-self: center; justify-self: stretch; display: flex; flex-direction: column; justify-content: center; height: 100%; width: 100%; }
            .ref-onboarding--v2 .ref-onb-pin .pin-display { margin: 0 0 8px; gap: 8px; display: flex; width: 100%; }
            .ref-onboarding--v2 .ref-onb-pin .pin-digit { flex: 1 1 0; height: 34px; font-size: 18px; border-radius: 8px; }
            .ref-onboarding--v2 .ref-onb-keypad { max-width: none; width: 100%; margin: 0; }
            .ref-onboarding--v2 .ref-onb-keypad.pin-keypad { gap: 8px; }
            .ref-onboarding--v2 .ref-onb-keypad .pin-key { height: 50px; font-size: 24px; border-radius: 10px; }
            .ref-onboarding--v2 .ref-onb-keypad .pin-key.action { font-size: 14px; }
        }
        @media (orientation: portrait) and (max-width: 430px) {
            .ref-onboarding--v2 {
                align-items: stretch;
                padding: max(16px, env(safe-area-inset-top, 16px)) 18px max(16px, env(safe-area-inset-bottom, 16px));
            }
            .ref-onboarding--v2 .ref-onboarding-stage {
                max-width: 100%; min-height: 100dvh; min-height: 100vh;
                justify-content: space-between; gap: 0; padding: 8px 0 4px;
            }
            .ref-onboarding--v2 .ref-onb-hero {
                display: flex; flex-direction: column; justify-content: space-between; flex: 1 1 auto; height: 100%;
            }
            .ref-onboarding--v2 .ref-onb-brand { margin: 0; padding-top: 8px; }
            .ref-onboarding--v2 .ref-onb-logo { width: 72px; height: 72px; }
            .ref-onboarding--v2 .ref-onb-headline { font-size: 40px; }
            .ref-onboarding--v2 .ref-onb-pin {
                margin: 0; display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto;
            }
            .ref-onboarding--v2 .ref-onb-pin .pin-display { margin: 0 auto 22px; }
            /* width:100% — without it the grid collapses to the digits' min-content
               (~28px keys) in the centered flex column. This was the "squished
               keypad" (Carlos, Jun 19). max-width keeps it from getting too wide. */
            .ref-onboarding--v2 .ref-onb-keypad { width: 100%; max-width: 300px; }
            .ref-onboarding--v2 .ref-onb-keypad.pin-keypad { gap: 12px; }
            .ref-onboarding--v2 .ref-onb-keypad .pin-key { height: 60px; }
            .ref-onboarding--v2 .ref-onb-secondary { margin: 0; padding-bottom: 4px; }
            .ref-onboarding--v2 .ref-onb-official { margin: 0; padding-bottom: 4px; flex-direction: row; justify-content: center; gap: 16px; }
        }


        

        /* ====================================================================
           TIME OUT button (Control screen) + team picker. The button stops the
           clock immediately, the picker attributes the timeout. Hidden by
           default; shown in the landscape Control screen.
           ==================================================================== */
        .ref-timeout-btn {
            display: none;
            align-items: center; justify-content: center;
            background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
            color: #fff; border: none; border-radius: 12px;
            font-family: 'Saira Condensed', sans-serif; font-weight: 800;
            font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase;
            cursor: pointer; -webkit-tap-highlight-color: transparent;
            box-shadow: 0 4px 14px rgba(59, 130, 246, 0.3);
            transition: filter 0.15s ease, transform 0.12s ease;
        }
        .ref-timeout-btn:active { filter: brightness(1.1); transform: scale(0.98); }

        /* TIME OUT picker — title + subtitle inline (horizontal room), and the
           3 actions (HOME | AWAY | DISMISS) in ONE row (short on vertical room). */
        .ref-to-head { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
        .ref-to-title { font-family: 'Rajdhani', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: 0.06em; color: #fff; line-height: 1; }
        .ref-to-sub { font-size: 14px; color: rgba(255, 255, 255, 0.55); }
        /* ── Shared team slab — "broadcast bleed" (Direction A). Used by BOTH the
           TIME OUT picker and the PENALTY picker so they match. A giant faded
           team-logo watermark bleeds off the right edge; the big team NAME sits
           bottom-left like a TV chyron; a dark pill above it carries the context
           (OFFENSE/DEFENSE for penalties, "N timeouts" for a timeout). Name +
           watermark size off the slab (cqw) so they FILL it at any dimension.
           Solid color fallback before the color-mix gradient = WebView-110 safe. */
        .tslab {
            --tc: #3b82f6;
            container-type: inline-size;
            position: relative; overflow: hidden;
            border-radius: 16px; cursor: pointer; color: #fff;
            border: 2px solid rgba(255,255,255,0.14);
            background: var(--tc);
            background: linear-gradient(155deg, var(--tc) 0%, color-mix(in srgb, var(--tc) 42%, #0a0d14) 100%);
            box-shadow: inset 0 2px 6px rgba(255,255,255,0.12);
            -webkit-tap-highlight-color: transparent; touch-action: manipulation;
            transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
        }
        .tslab::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 45%; background: linear-gradient(to bottom, rgba(255,255,255,0.10), transparent); pointer-events: none; z-index: 3; }
        .tslab:active { transform: scale(0.985); border-color: var(--gold, #f59e0b); box-shadow: 0 0 26px rgba(245,158,11,0.3), inset 0 2px 6px rgba(255,255,255,0.12); }
        .tslab--disabled { opacity: 0.4; pointer-events: none; filter: grayscale(0.4); }
        /* giant logo watermark, bled off the right edge */
        .tslab-wm { position: absolute; right: -12%; top: 50%; transform: translateY(-50%); height: 128%; aspect-ratio: 1; z-index: 1; opacity: 0.20; pointer-events: none; display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .tslab-wm img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 20px rgba(0,0,0,0.4)); }
        .tslab-initials { font-family: 'Saira Condensed', sans-serif; font-weight: 900; font-size: 60cqw; line-height: 1; color: #fff; }
        /* bottom-left chyron: pill over the big name */
        .tslab-body { position: absolute; inset: auto 0 0 0; z-index: 4; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(6px, 1.6cqw, 12px); padding: clamp(12px, 3.4cqw, 26px); }
        .tslab-pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(0,0,0,0.42); border-radius: 999px; padding: clamp(5px,1.4cqw,9px) clamp(12px,3cqw,18px); font-family: 'Saira Condensed', sans-serif; font-weight: 800; letter-spacing: 0.06em; font-size: clamp(11px, 3.4cqw, 18px); text-transform: uppercase; color: #fff; }
        .tslab-pill-dot { width: clamp(9px,2.4cqw,14px); height: clamp(9px,2.4cqw,14px); border-radius: 50%; background: rgba(255,255,255,0.5); flex: 0 0 auto; }
        .tslab-name {
            font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: clamp(30px, 20cqw, 96px);
            line-height: 0.92; letter-spacing: 0.3px; text-transform: uppercase; text-align: left; color: #fff;
            text-shadow: 0 3px 10px rgba(0,0,0,0.5); max-width: 100%; overflow-wrap: anywhere; word-break: break-word;
            display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
        }

        /* TIME OUT picker — two shared slabs (sizing only; look = .tslab) + DISMISS below */
        .ref-to-slab-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .ref-to-slab { min-height: clamp(130px, 24vh, 230px); }
        .ref-to-dismiss {
            margin-top: 12px; width: 100%; min-height: 48px; border-radius: 12px;
            background: rgba(239,68,68,0.16); border: 1.5px solid rgba(239,68,68,0.55); color: #fff;
            font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 17px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-to-dismiss:active { background: rgba(239,68,68,0.30); }

        /* Quarter cycle button (Control screen) — tap to advance Q1→Q4. Hidden
           by default (portrait keeps the Q1-Q4 tabs); shown in landscape. */
        .ref-quarter-cycle {
            display: none;
            align-items: center; justify-content: center;
            border: none; border-radius: 12px 0 0 12px;
            background: rgba(255, 255, 255, 0.06);
            color: var(--gold, #f59e0b);
            font-family: 'Saira Condensed', sans-serif; font-weight: 800;
            font-size: 26px; letter-spacing: 0.04em;
            cursor: pointer; -webkit-tap-highlight-color: transparent;
        }
        .ref-quarter-cycle:active { background: rgba(255, 255, 255, 0.12); }

        /* Game clock editor (hold the clock) — horizontal min:sec steppers */
        .ref-clock-edit { display: flex; align-items: center; justify-content: center; gap: 18px; }
        .ref-clock-edit-unit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .ref-clock-edit-label { font-family: 'Saira Condensed', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.5); }
        .ref-clock-edit-controls { display: flex; align-items: center; gap: 12px; }
        .ref-clock-edit-btn { width: 48px; height: 48px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 28px; font-weight: 700; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center; }
        .ref-clock-edit-btn:active { background: rgba(255, 255, 255, 0.14); }
        .ref-clock-edit-value { min-width: 66px; font-family: 'Orbitron', monospace; font-weight: 700; font-size: 40px; color: var(--gold, #f59e0b); }
        .ref-clock-edit-colon { font-family: 'Orbitron', monospace; font-weight: 700; font-size: 34px; color: rgba(255, 255, 255, 0.4); align-self: flex-end; padding-bottom: 8px; }

        

        

        

        /* Co-control presence pill (2 REFS · YOU: …). Fixed overlay, top-centered.
           Default position sits it BELOW the header bar so it never covers the
           centered game code (#gameId) — the header is ~60px (44px hit-target +
           padding). The Q333 wrist layout hides the game code and floats the
           gear, so there the pill returns to the very top (override in the
           landscape media block below). Dynamic dot colour + role text are set
           per-render on the inner spans (game-loading.js _renderCoControlBadge). */
        .ref-cc-pill {
            position: fixed;
            top: calc(env(safe-area-inset-top, 0px) + 62px);
            left: 50%;
            transform: translateX(-50%);
            z-index: 9300;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 5px 13px;
            border-radius: 999px;
            pointer-events: none;
            background: rgba(10, 13, 20, 0.92);
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
            font-family: 'Rajdhani', system-ui, sans-serif;
        }

        /* ===== LANDSCAPE GAME SCREEN (Q333 ~716×298) — CONSOLIDATED.
           Merged from the 5 device-tuned blocks (header/pages/control/scoring/
           footer) into ONE on 2026-06-02: each selector declared ONCE at its
           winning (last-wins) value, so editing the wrong duplicate block is no
           longer possible. !important preserved (some beat the more-specific
           possession pseudo-elements). Output verified pixel-identical. ===== */
        @media (orientation: landscape) and (max-height: 460px) {
            .header-bar--gearonly { position: absolute; top: 5px; left: 8px; width: auto; height: auto; min-height: 0; padding: 0; margin: 0; background: none; border: none; box-shadow: none; z-index: 30; }
            /* Q333: collapse to gear-only — game ID + END GAME move into Settings so the gear can float over the scoreboard. */
            .header-bar--gearonly .game-id-value, .header-bar--gearonly .header-endgame-btn { display: none; }
            /* Game code is hidden and the gear floats top-left here, so the
               co-control pill has the top-center to itself — pull it back up
               from its below-the-header default. */
            .ref-cc-pill { top: calc(env(safe-area-inset-top, 8px) + 8px); }

            /* SELECT GAME assigned-game hero card — go side-by-side + reclaim the chrome. */
            #gameSelectModal .gc-modal-header { padding: 7px 14px; }
            #gameSelectModal .gc-modal-title { font-size: 15px; }
            #assignedGamesSection .ref-section-label { display: none; }
            .rg-card { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; padding: 12px 16px; margin-bottom: 8px; }
            .rg-left { justify-content: center; border-right: 1px solid rgba(255, 255, 255, 0.10); padding-right: 16px; }
            .rg-right { justify-content: center; gap: 6px; }
            .rg-kick { font-size: 60px; }
            .rg-card .rg-decline { display: none; } /* no room in landscape — decline lives on the row variant + portrait */
            .header-bar--gearonly .header-btn { width: 41px; height: 41px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(20, 24, 34, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; }
            /* Match the floating gear's compact glassy look so they read as one top-left cluster. */
            .header-bar--gearonly .ref-back-to-games { height: 41px; min-height: 0; padding: 0 11px; font-size: 0.72rem; background: rgba(20, 24, 34, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 9px; }
            .app-container { padding-top: 6px; position: relative; height: 100dvh; max-height: 100dvh; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 6px 10px; }
            .ref-pager { flex: 1 1 auto; min-height: 0; flex-direction: row; gap: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0; display: flex; }
            .ref-pager::-webkit-scrollbar { display: none; }
            .ref-pane { flex: 0 0 100%; width: 100%; max-width: 100%; height: 100%; scroll-snap-align: center; display: flex; flex-direction: column; gap: 10px; padding: 0 6px; overflow: hidden; }
            .ref-pager-dots { display: none !important; flex: 0 0 auto; justify-content: center; align-items: center; gap: 7px; padding: 0; position: absolute; right: 12px; bottom: 7px; z-index: 25; }
            .ref-pager-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: width 0.2s ease, background 0.2s ease; }
            .ref-pager-dot.active { width: 22px; border-radius: 4px; background: var(--gold, #f59e0b); }
            .ref-section-divider { display: none; }
            .ref-pane[data-pane="main"] { justify-content: center; padding: 4px 6px; gap: 22px; padding-top: 8px; padding-bottom: 8px; }
            .clock-card { flex: 0 0 auto; flex-direction: row; align-items: stretch; gap: 6px; padding: 6px 6px; height: 150px; grid-column: auto; grid-row: auto; }
            .game-clock-section { flex: 1 1 auto; width: auto; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
            /* The "GAME CLOCK" label sat under the gear icon on the wrist (Carlos, Aug 29 photo) — the plate IS the clock; the label earns nothing here. */
            .clock-label { display: none; }
            /* Width-derived (Aug 29 2026): five fixed cells must fit the ~390px clock column; 42vh let
               "00:00" overflow it by 50px on the wrist. v203: plate padding 10→6px, digit cells 0.6em,
               colon 0.24em, and 18.5vw (≈151px) — "10:00" is 366px in the 390px column, a breath each
               side; 19.5vw filled it edge to edge and read cramped. Measured live on the band. */
            .game-clock-display { font-size: clamp(60px, 18.5vw, 155px); line-height: 0.82; }
            .game-clock-display .cd { width: 0.6em; }
            .game-clock-display .cc { width: 0.24em; }
            .game-clock-buttons { display: none; }
            .ref-timeout-btn { display: flex; flex: 0 0 20%; width: 20%; min-width: 0; font-size: 15px; line-height: 1.08; text-align: center; border-radius: 12px; padding: 2px; }
            .play-clock-section { flex: 0 0 20%; width: 20%; margin: 0; display: flex; align-items: center; }
            .play-clock-container { padding: 4px; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
            .play-clock-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
            .play-clock-display { font-size: 74px; line-height: 0.85; }
            .play-clock-sublabel { font-size: 15px; line-height: 1.15; font-weight: 800; letter-spacing: 0.02em; }
            .ref-quarter-tabs { display: none; }
            .ref-down-row { display: flex; align-items: center; gap: 12px; padding: 0; height: 64px; overflow: hidden; }
            .ref-quarter-cycle { display: flex; flex: 0 0 22%; width: 22%; height: 100%; background: linear-gradient(180deg, #1b262c 0%, #0d1216 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 8px rgba(0, 0, 0, 0.4); font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 34px; letter-spacing: 1px; border: none; border-radius: 12px; position: relative; overflow: hidden; }
            .ref-down-bars { margin-left: 12px; }
            .ref-down-label { flex: 1 1 auto; font-size: 34px; }
            .ref-pane[data-pane="score"] { justify-content: flex-start; padding-top: 2px; gap: 8px; }
            .ref-score-strip { display: flex; align-items: center; justify-content: center; gap: 14px; flex: 0 0 auto; padding: 0 8px; font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-weight: 800; font-size: clamp(20px, 7vh, 30px); line-height: 1; letter-spacing: 0.04em; color: #fff; white-space: nowrap; }
            .ref-score-strip-clock { color: #ef4444; }
            .ref-score-strip-clock.running { color: #22c55e; }
            .ref-score-strip-sep { color: rgba(255, 255, 255, 0.28); font-weight: 400; }
            .ref-scoreboard-v2 { flex: 1 1 auto; min-height: 0; display: flex; }
            .ref-team-stack { flex-direction: row; gap: 10px; width: 100%; height: 100%; }
            .ref-team-row { flex: 1 1 50%; width: auto; height: 100%; display: flex; flex-direction: column; justify-content: space-between; position: relative !important; overflow: hidden !important; padding-bottom: 12px !important; }
            .ref-team-row .ref-team-top { flex: 1 1 auto; display: grid !important; grid-template-columns: 1fr auto !important; grid-template-areas: "identity score" "timeouts score" !important; align-items: center !important; gap: 6px 14px !important; }
            .ref-team-row .ref-score-buttons { flex: 0 0 auto !important; margin-bottom: 0 !important; }
            /* The solid 3px bar stays; its blurred halo is gone (Sep 17 2026). */
            .ref-quarter-cycle::after { content: ''; position: absolute; bottom: 0; left: 22%; right: 22%; height: 3px; background: var(--green, #22c55e); }
            .ref-timeout-btn-label { font-size: 40px; line-height: 0.92; font-weight: 800; letter-spacing: 0; }
            .header-bar--gearonly .header-btn svg, .header-bar--gearonly .header-btn .icon { width: 23px; height: 23px; }
            .ref-team-row .ref-score-btn { min-height: 60px !important; height: 60px !important; }
            .ref-team-row .ref-score-btn .ref-score-btn-pts { font-size: 40px !important; font-weight: 800 !important; line-height: 1 !important; }
            .ref-team-row .score-box { min-width: 132px !important; min-height: 104px !important; padding: 2px 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; grid-area: score !important; align-self: center !important; }
            .ref-team-row .score-value { font-size: 88px !important; line-height: 1 !important; }
            .ref-team-row .team-name { font-size: 35px !important; line-height: 1 !important; }
            .ref-team-row .team-label { font-size: 22px !important; }
            .ref-team-row .team-logo, .ref-team-row .ref-team-football { display: none !important; }
            .ref-team-row::before { content: '' !important; position: absolute !important; inset: 0 !important; background-image: var(--team-logo, none) !important; background-size: auto 110% !important; background-position: center !important; background-repeat: no-repeat !important; opacity: 0.15 !important; pointer-events: none !important; z-index: 0 !important; }
            .ref-team-row .ref-team-top, .ref-team-row .ref-score-buttons { position: relative !important; z-index: 1 !important; }
            .ref-team-row .ref-team-identity { grid-area: identity !important; }
            .ref-team-row .ref-team-timeouts { grid-area: timeouts !important; justify-content: flex-start !important; gap: 10px !important; }
            .ref-team-row .timeout-dot { width: 26px !important; height: 26px !important; }
            .ref-poss-swap { flex: 0 0 22%; width: 22%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--poss-color, #3b82f6); border: none; border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 4px 8px rgba(0, 0, 0, 0.4); color: #fff; cursor: pointer; position: relative; overflow: hidden; font-family: 'Rajdhani', sans-serif; -webkit-tap-highlight-color: transparent; }
            .ref-poss-swap:active { filter: brightness(1.1); }
            .ref-poss-label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; opacity: 0.85; text-transform: uppercase; }
            .ref-poss-abbr { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: 1px; }
            .ref-pager-nav { display: flex !important; flex: 0 0 auto !important; gap: 10px !important; padding: 3px 8px 2px !important; height: 46px !important; }
            .ref-pager-nav-btn { flex: 1 1 0 !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: rgba(255,255,255,0.05) !important; border: 1px solid rgba(255,255,255,0.10) !important; border-radius: 11px !important; color: rgba(255,255,255,0.55) !important; font-family: 'Saira Condensed', sans-serif !important; font-weight: 800 !important; font-size: 18px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent !important; }
            .ref-pager-nav-btn.active { background: linear-gradient(180deg, #1b262c 0%, #0d1216 100%) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 4px 8px rgba(0,0,0,0.4) !important; }
            .ref-pager-nav-btn:active { background: rgba(255,255,255,0.12) !important; }
            /* PENALTY tab pinned far-left at ~10% width; CONTROL + SCORING split the rest (~45% each). */
            .ref-pager-nav-btn--penalty { flex: 0 0 10% !important; min-width: 64px !important; background: linear-gradient(180deg, rgba(245,158,11,0.22) 0%, rgba(217,119,6,0.30) 100%) !important; border-color: rgba(245,158,11,0.45) !important; color: #fbbf24 !important; font-size: 11px !important; letter-spacing: 0.04em !important; padding: 0 2px !important; }
            .ref-pager-nav-btn--penalty:active { background: linear-gradient(180deg, rgba(245,158,11,0.40) 0%, rgba(217,119,6,0.50) 100%) !important; }
        }
        /* default (non-landscape): hide the footer tabs — portrait uses dots.
           NOTE (Jun 17 2026): this rule was previously TRAPPED inside the
           landscape @media above (its closing `}` was missing — the whole file
           was brace-imbalanced by one), so it never hid the nav in portrait and
           the CONTROL/SCORING/PENALTY footer leaked onto phone portrait. The
           added `}` above closes the landscape block; this is now the true base
           rule. It also re-scopes the portrait/landscape blocks below to their
           intended top level. */
        .ref-pager-nav { display: none; }

        /* Back to Main Menu button in settings (never get stranded) */
        .ref-settings-backstart {
            display: flex; align-items: center; justify-content: center; gap: 10px;
            width: 100%; min-height: 48px; margin-bottom: 12px; padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px;
            background: rgba(255, 255, 255, 0.05); color: #fff;
            font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 14px;
            letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-settings-backstart:active { background: rgba(255, 255, 255, 0.12); }
        /* Sign out — muted/distinct from "back to list"; it's the leave-entirely action */
        .ref-settings-signout { color: rgba(255, 255, 255, 0.6); border-color: rgba(255, 255, 255, 0.1); }
        .ref-settings-signout:active { background: rgba(239, 68, 68, 0.16); color: #fff; border-color: rgba(239, 68, 68, 0.5); }

        /* SELECT GAME (Hub) header → title left, Sign Out right */
        #gameSelectModal .gc-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        .ref-hub-signout {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 12px; border-radius: 9px; flex-shrink: 0;
            background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.7);
            font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 12px;
            letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-hub-signout:active { background: rgba(239, 68, 68, 0.16); color: #fff; border-color: rgba(239, 68, 68, 0.5); }
        /* Header: [back] SELECT GAME ........ [settings] [sign out]. Back is an
           arrow and Settings a gear on every layout: with words, a 390px phone
           header wrapped the back label and pushed SIGN OUT off the edge. */
        #gameSelectModal .gc-modal-header .ref-back-fields { flex: 0 0 auto; margin: 0; padding: 6px 11px; gap: 0; justify-content: center; }
        #gameSelectModal .gc-modal-header .ref-back-fields span { display: none; }
        #gameSelectModal .gc-modal-title { white-space: nowrap; }
        .ref-hub-sp { flex: 1 1 auto; }
        .ref-hub-settings span { display: none; }
        .ref-hub-settings {
            display: inline-flex; align-items: center; gap: 6px;
            padding: 7px 10px; border-radius: 9px; flex-shrink: 0;
            background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.7);
            font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 12px;
            letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        /* Settings opened from the game list must sit above it: both modals are
           z-index 1000 and settings comes first in the document. */
        #settingsModal.active { z-index: 1001; }
        .ref-hub-settings:active { background: rgba(143, 212, 0, 0.16); color: #fff; border-color: rgba(143, 212, 0, 0.5); }

        /* Watch-hand orientation toggle (settings) */
        .ref-hand-section { margin-bottom: 12px; }
        .ref-hand-hint {
            font-weight: 600; font-size: 0.78em; opacity: 0.55;
            text-transform: none; letter-spacing: 0;
        }
        .ref-hand-toggle {
            display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px;
        }
        .ref-hand-btn {
            min-height: 46px; padding: 10px 8px;
            border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px;
            background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7);
            font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 14px;
            letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
            -webkit-tap-highlight-color: transparent; transition: background 0.15s, color 0.15s, border-color 0.15s;
        }
        .ref-hand-btn:active { background: rgba(255, 255, 255, 0.12); }
        .ref-hand-btn.active {
            background: rgba(245, 158, 11, 0.18); color: #fff;
            border-color: rgba(245, 158, 11, 0.6);
        }
        /* Brightness picker reuses the hand-toggle look at 4-up (AUTO/LOW/MED/FULL) */
        .ref-bright-toggle { grid-template-columns: repeat(4, 1fr); }

        /* ── AMBIENT FACE (Q333 battery package, Jul 22 2026) ─────────────────
              Power state, NOT a theme surface: deliberately raw near-black +
              dim grays — it must render minimal-backlight dark in every theme,
              and near-black pixels are the point on the wrist panel. NO
              transitions/animations (every repaint costs battery; the spec is
              a static tap-to-restore face). Sits above toasts (9000): while
              ambient, nothing may light the panel. Shown/hidden + populated
              exclusively by referee/modules/power.js. */
        .ref-ambient {
            position: fixed; inset: 0; z-index: 9800;
            background: #000;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            gap: 2vh;
            cursor: pointer; touch-action: none;
            -webkit-tap-highlight-color: transparent;
            user-select: none; -webkit-user-select: none;
        }
        .ref-ambient[hidden] { display: none; }

        .ref-ambient-clock {
            font-family: 'Orbitron', monospace;
            font-weight: 700; line-height: 1; letter-spacing: 0.04em;
            font-size: clamp(48px, 38vh, 180px);
            /* VOLT (Carlos, Aug 15): on the IPS panel pixel color costs zero
               power — the backlight is the budget, and the floor moved
               0.10→0.14 to more than cover volt's lower luminance vs white.
               A colored glow reads as "alive and resting", not half-dead. */
            color: #8fd400;
            font-variant-numeric: tabular-nums;
        }
        .ref-ambient-row {
            display: flex; gap: 6vw; align-items: baseline;
            font-family: 'Saira Condensed', sans-serif;
            font-weight: 800; letter-spacing: 0.08em;
            font-size: clamp(16px, 10vh, 44px);
            color: rgba(143,212,0,0.55); /* one step dimmer than the clock */
        }

        /* ── iPhone / larger-phone LANDSCAPE refinements ─────────────────────────
              The Q333 wrist-phone landscape design, but at the bigger 393–430px-tall
              breakpoint a real phone gives us. The Q333 itself is <370px tall, so it
              falls below this and keeps its tuned sizes. */
        @media (orientation: landscape) and (min-height: 370px) and (max-height: 460px) {
            /* CONTROL / SCORING footer tabs ~50% taller (46→68) — fills the extra
               vertical room a phone has over the tiny Q333; bigger game-day targets.
               !important mirrors the base .ref-pager-nav rule, which needs it to beat
               the .ref-team-row::before pseudo + grid-area specificity. */
            .ref-pager-nav { height: 68px !important; }
        }

        /* ── Standard-phone PORTRAIT (iPhone et al, >350px wide) ──────────────────
              Fit the whole control surface to the viewport — NO up/down scroll. The
              Q333 (<=350px wide) has its own swipe-pager fit (see @media max-width:350px
              above); this keeps the phone layout STACKED in one view (landscape is the
              two-pane swipe). Trims the generous 80px bottom pad and lets the stack
              distribute to fill the height. (Jun 2026) */
        @media (orientation: portrait) and (min-width: 351px) {
            .app-container {
                height: 100dvh;
                max-height: 100dvh;
                overflow: hidden;                 /* no up/down scroll */
                padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
            }
            .ref-pager {
                flex: 1 1 auto;
                min-height: 0;
                justify-content: center;   /* center the control surface in the viewport (Carlos, Jun 19) — was space-between, which left dead space between the down bar and the team rows */
                gap: clamp(8px, 1.5vh, 12px);
            }
            .ref-pane { min-height: 0; }

            /* ── Portrait game-screen polish (Carlos, Jun 19) — LANDSCAPE UNTOUCHED ── */
            /* Free-floating gear (no box-in-a-box) + shorter top bar */
            .header-btn { background: transparent; border: none; }
            .header-btn:active { background: transparent; color: var(--text-primary); }
            .header-bar { padding: 4px 12px; }
            /* Emergency moved into the header top-right (was a floating FAB; End Game
               removed — it lives in Settings). Static + header-sized here; in landscape
               it stays the original floating FAB. */
            .header-emergency.ref-emergency-fab {
                position: static; bottom: auto; left: auto; right: auto;
                width: 44px; height: 44px; border-radius: 10px; box-shadow: none; flex-shrink: 0;
            }
            .header-emergency.ref-emergency-fab svg { width: 22px; height: 22px; }
            /* Penalty flag — smaller corner bubble */
            .ref-penalty-fab { width: 38px; height: 38px; bottom: 14px; left: 14px; }
            .ref-penalty-fab svg { width: 16px; height: 16px; }
            /* Play-clock area split into TIME OUT (blue, top) + play clock (bottom),
               equal halves — the landscape Time Out button, stacked vertically. The
               game clock spans the full height on the left. */
            .clock-card {
                display: grid;
                grid-template-columns: 1fr clamp(96px, 30vw, 124px);
                /* Play clock taller, TIME OUT shorter (Carlos, Jun 19): 3:5 split so
                   the play clock box is ~25% bigger and TIME OUT ~25% smaller. */
                grid-template-rows: minmax(0, 3fr) minmax(0, 5fr);
                grid-template-areas: "clock timeout" "clock playclock";
                max-height: clamp(184px, 26vh, 214px);
            }
            .game-clock-section { grid-area: clock; justify-content: center; }
            .ref-timeout-btn {
                grid-area: timeout; display: flex; width: 100%; height: 100%; min-height: 0;
                font-size: clamp(17px, 5.4vw, 24px); line-height: 1; border-radius: 12px;
            }
            .play-clock-section { grid-area: playclock; width: auto; min-height: 0; }
            /* Big play-clock number that fills the (now taller) box */
            .play-clock-section .play-clock-container { padding: 5px; gap: 0; }
            .play-clock-section .play-clock-display { font-size: clamp(50px, 16vw, 66px); }
            .play-clock-section .play-clock-sublabel { font-size: 8.5px; margin-top: 1px; line-height: 1.15; letter-spacing: 0.6px; }
        }

        /* ════════════════════════════════════════════════════════════════════
           REFEREE MODALS — Q333 / phone LANDSCAPE pass (Jun 2026)
           The modals were portrait-shaped: a tall stack with big top/bottom
           padding that wastes the short wrist-screen and reads as dead-space.
           In landscape we kill that padding and go two-column so each modal uses
           the full width. Scoped to the landscape breakpoint, so portrait and
           iPhone portrait are completely untouched. (Same reason the settings
           tab + PIN screen were redone.)
           ════════════════════════════════════════════════════════════════════ */
        @media (orientation: landscape) and (max-height: 460px) {
            /* Baseline — every premium modal: cap height (scroll if a tall one
               ever needs it) and trim the generous vertical padding. */
            .gc-modal.ref-premium { max-height: 94dvh !important; overflow-y: auto !important; }
            .gc-modal.ref-premium .gc-modal-body.gc-py-5 { padding-top: 14px !important; padding-bottom: 14px !important; }

            /* SHARE / QR — big QR on the left, scan text + code + url + actions
               stacked on the right (Carlos's reference layout). */
            #qrShareModal .gc-modal.ref-premium { max-width: 600px !important; width: 90vw !important; }
            #qrShareModal .gc-modal-body { display: grid !important; grid-template-columns: auto 1fr !important; column-gap: 24px !important; align-items: center !important; text-align: left !important; padding: 12px 20px 14px !important; }
            #qrShareModal .gc-modal-body > .gc-card { grid-column: 1 !important; grid-row: 1 / 99 !important; align-self: center !important; margin: 0 !important; padding: 10px !important; }
            #qrShareModal #qrCodeImg { max-width: none !important; width: min(52vh, 250px) !important; height: min(52vh, 250px) !important; }
            #qrShareModal .gc-modal-body > p { grid-column: 2 !important; margin: 0 0 6px !important; }
            #qrShareModal #qrGameCode { grid-column: 2 !important; margin: 0 0 4px !important; }
            #qrShareModal #qrUrl { grid-column: 2 !important; margin: 0 0 14px !important; }
            #qrShareModal .gc-btn { grid-column: 2 !important; margin: 0 0 10px !important; }

            /* SCORE adjust + TIMEOUT adjust — identity LEFT, controls RIGHT
               (Carlos, Aug 15: the broadcast lower-third shape for the wide
               wrist; portrait keeps the stacked layout). Replaces the old
               display:contents/order reflow, which broke the moment the DONE
               button changed class. */
            #scoreModal .gc-modal, #timeoutAdjustModal .gc-modal { max-width: 520px !important; }
            #scoreModal .gc-modal-body, #timeoutAdjustModal .gc-modal-body {
                display: grid !important; grid-template-columns: minmax(120px, 26%) 1fr !important;
                column-gap: 20px !important; row-gap: 8px !important; align-items: center !important;
                padding: 14px 20px !important; text-align: center !important;
            }
            #scoreModal .ref-score-header, #timeoutAdjustModal .ref-score-header {
                grid-column: 1 !important; grid-row: 1 / span 3 !important;
                display: flex !important; flex-direction: column !important; gap: 8px !important;
                margin: 0 !important; justify-content: center !important;
            }
            #scoreModal .gc-label-sm, #timeoutAdjustModal .gc-label-sm { grid-column: 2 !important; margin: 0 !important; }
            #scoreModal .ref-adj-row, #timeoutAdjustModal .ref-adj-row {
                display: flex !important; grid-column: 2 !important;
                justify-content: center !important; margin: 0 !important;
            }
            #scoreModal .ref-adj-done, #timeoutAdjustModal .ref-adj-done {
                grid-column: 2 !important; margin: 0 !important; width: 100% !important;
            }

            /* CALL TIMEOUT confirm — title + team on the left, the two action
               buttons on the right (vertically centered against the title block). */
            #timeoutModal .gc-modal-body { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 24px !important; align-items: center !important; text-align: center !important; padding: 14px 22px !important; }
            #timeoutModal .ref-gc-title { grid-column: 1 !important; grid-row: 1 !important; margin: 0 0 4px !important; }
            #timeoutModal #timeoutModalTeam { grid-column: 1 !important; grid-row: 2 !important; margin: 0 !important; }
            #timeoutModal .gc-flex-col { grid-column: 2 !important; grid-row: 1 / 3 !important; align-self: center !important; }
            /* TIME OUT picker + game-clock editor are already horizontal rows; the
               baseline padding-trim above is all they need. */
        }

/* ═══ #64 Penalty modal — FULL-SCREEN (Jun 17 2026) ═══════════════════════
   Team-first → offense/defense auto-filter → press-and-hold a big call to log.
   Built for the Q333 wrist screen: full-bleed for max real estate, oversized
   targets, and a hold-fill that races so the gesture teaches itself. Referee
   gold accent + the ecosystem glass language (175deg gradient, blur, Saira/
   Rajdhani type) so it reads as part of the suite — not a bolt-on. */
.ref-penfs {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    flex-direction: column;
    background: linear-gradient(175deg, rgba(16,19,28,0.97) 0%, rgba(10,13,20,0.99) 100%);
    padding: max(14px, env(safe-area-inset-top, 14px)) 14px max(14px, env(safe-area-inset-bottom, 14px));
    /* no backdrop-filter: a full-screen blurred scrim drops taps on iPad — WebKit hit-tests the blur layer instead of the buttons under it. Aug 11 2026 sweep. Do not re-add. */
}
.ref-penfs.active { display: flex; animation: refPenfsIn 0.28s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes refPenfsIn { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: scale(1); } }

.ref-penfs-sheet {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
    width: 100%; margin: 0 auto; gap: 12px;
    /* No max-width: the slabs (and the call grid) fill the full screen so the
       container-query-sized logo + name scale up to fill big slabs. */
}
.ref-penfs-head { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; }
.ref-penfs-title {
    font-family: 'Saira Condensed', sans-serif; font-weight: 900;
    font-size: 22px; letter-spacing: 2px; text-transform: uppercase; color: #fff;
}
.ref-penfs-close {
    width: 46px; height: 46px; flex: 0 0 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8);
    font-size: 30px; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.ref-penfs-close:active { background: rgba(239,68,68,0.18); color: #fff; border-color: rgba(239,68,68,0.5); }

/* Two-step wizard: each step fills the sheet; only the active one shows. */
.ref-penfs-step { display: none; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 12px; }
.ref-penfs-step.active { display: flex; animation: refPenfsStepIn 0.25s ease-out; }
@keyframes refPenfsStepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } }

/* STEP 1 — oversized team slabs that own the whole screen, side-by-side
   (HOME left, AWAY right) and full-height. */
.ref-penfs-teambig { display: flex; flex-direction: row; gap: 12px; flex: 1 1 auto; min-height: 0; }
/* Penalty slabs share the .tslab look (broadcast bleed); this class only owns
   sizing so the two fill the full-screen row. */
.ref-penfs-team-xl { flex: 1 1 0; min-height: 0; }
/* OFFENSE/DEFENSE dot color lives on the shared pill dot. */
.ref-penfs-team-xl.is-offense .tslab-pill-dot { background: #22c55e; box-shadow: 0 0 10px rgba(34,197,94,0.9); }
.ref-penfs-team-xl.is-defense .tslab-pill-dot { background: #ef4444; box-shadow: 0 0 10px rgba(239,68,68,0.9); }
/* DISMISS — same one-tap back-out the TIME OUT picker has, so an accidental
   PENALTY tap isn't a trap. Sits below the slabs (which flex to fill). */
.ref-penfs-dismiss {
    flex: 0 0 auto; width: 100%; min-height: 54px; border-radius: 14px;
    background: rgba(239,68,68,0.16); border: 1.5px solid rgba(239,68,68,0.55); color: #fff;
    font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 19px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.ref-penfs-dismiss:active { background: rgba(239,68,68,0.30); }

/* STEP 2 — back chevron + which-team title. */
.ref-penfs-back {
    width: 46px; height: 46px; flex: 0 0 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.8);
    font-size: 32px; line-height: 1; cursor: pointer;
    -webkit-tap-highlight-color: transparent; transition: background 0.2s;
}
.ref-penfs-back:active { background: rgba(255,255,255,0.12); }
.ref-penfs-title2 {
    flex: 1 1 auto; text-align: center;
    font-family: 'Saira Condensed', sans-serif; font-weight: 900;
    font-size: 20px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 8px;
}

.ref-penfs-hint {
    flex: 0 0 auto; text-align: center;
    font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 13px;
    letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.6);
}

/* Big call buttons — fill the remaining height, scroll only if they overflow.
   The hold-fill sweeps left→right over the hold window; a tap-too-short just
   snaps it back, which is how the ref learns to hold. */
.ref-penfs-list {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    align-content: stretch; grid-auto-rows: minmax(64px, 1fr); padding-bottom: 4px;
}
.ref-penfs-call {
    container-type: inline-size;   /* label sizes off THIS button (cqw) — fills the box on big screens, scales down on the wrist */
    position: relative; overflow: hidden;
    min-height: 60px; padding: 14px 12px; border-radius: 12px; cursor: pointer;
    background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
    transition: border-color 0.15s, background 0.15s;
}
.ref-penfs-call-fill {
    position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0);
    background: linear-gradient(90deg, rgba(245,158,11,0.45) 0%, rgba(217,119,6,0.55) 100%);
    pointer-events: none;
}
.ref-penfs-call.holding .ref-penfs-call-fill { transform: scaleX(1); transition: transform 0.55s linear; }
.ref-penfs-call.logged { border-color: var(--gold, #f59e0b); }
.ref-penfs-call.logged .ref-penfs-call-fill { transform: scaleX(1); background: linear-gradient(90deg, rgba(245,158,11,0.85), rgba(217,119,6,0.92)); }
.ref-penfs-call-label {
    position: relative;
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: clamp(14px, 9cqw, 34px);
    letter-spacing: 0.5px; text-transform: uppercase; color: #fff; line-height: 1.05; text-align: center;
    width: 100%; overflow-wrap: anywhere;
}

/* Q333 wrist + short landscape: tighten so the whole sheet fits without a
   scroll-hunt — 3 columns, denser slabs. */
@media (max-height: 460px) {
    .ref-penfs { padding: 8px 12px max(8px, env(safe-area-inset-bottom, 8px)); }
    .ref-penfs-sheet, .ref-penfs-step { gap: 8px; }
    /* STEP 1 — teams side-by-side on the short, wide wrist screen; compact so
       logo + name + side pill all fit without overflow. */
    .ref-penfs-teambig { flex-direction: row; gap: 10px; }
    .ref-penfs-team-xl { gap: 8px; padding: 12px 10px; }
    .ref-penfs-team-logo { width: 52px; height: 52px; }
    .ref-penfs-team-initials { font-size: 22px; }
    .ref-penfs-team-name { font-size: 22px; -webkit-line-clamp: 1; }
    .ref-penfs-team-side { font-size: 13px; padding: 4px 12px; letter-spacing: 1.5px; }
    .ref-penfs-title { font-size: 16px; letter-spacing: 1.5px; }
    .ref-penfs-title2 { font-size: 16px; }
    .ref-penfs-close, .ref-penfs-back { width: 38px; height: 38px; flex-basis: 38px; font-size: 26px; }
    /* STEP 2 — 3-up call grid, rows fill the height. */
    .ref-penfs-list { grid-template-columns: repeat(3, 1fr); gap: 7px; grid-auto-rows: minmax(44px, 1fr); }
    .ref-penfs-call { min-height: 44px; padding: 8px; border-radius: 10px; }
    /* call label intentionally NOT pinned here — the cqw clamp scales it to fill each button */
    .ref-penfs-hint { font-size: 10px; }
}

/* ============================================================================
   JOIN DECISION SCREEN — take over / join as co-ref / wrong game
   (Jul 25 2026, CV5P9S). Shown when a ref opens a game another ref holds.

   Tokens only: --gold / --green / --border / --bg-primary / --bg-card-hover /
   --text-secondary from :root above. No raw hex, no !important, no inline
   style=, and NO color-mix() — the Q333 ships Android System WebView 110,
   one version below color-mix support (see the v159 note in sw.js).

   Type follows the app's existing standards: Saira Condensed for the eyebrow
   (the documented FIELD-label treatment) and team names (broadcast DNA);
   Rajdhani for controls. Rajdhani is self-hosted at 400/500/600/700 ONLY —
   never specify 800 here or the engine synthesises a faux-bold that renders
   muddy on the wrist.
   ========================================================================== */
.ref-to-screen {
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: var(--bg-primary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    padding: 18px 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
    box-sizing: border-box;
    overflow: hidden;
}

.ref-to-eyebrow {
    font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
    font-weight: 800;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
}

.ref-to-matchup {
    font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
    font-weight: 800;
    font-size: 31px;
    line-height: 1.05;
    margin-top: 6px;
}

.ref-to-held {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-top: 10px;
}
.ref-to-joined { color: var(--gold); font-weight: 700; font-variant-numeric: tabular-nums; }
.ref-to-ctx    { font-variant-numeric: tabular-nums; }

/* Tiles fill ALL remaining height so the screen never leaves dead space and
   never scrolls — flex rather than a fixed height so it self-fits any short
   landscape, not only the Q333's 298px. */
.ref-to-row {
    display: flex;
    flex-direction: column;
    gap: 11px;
    flex: 1;
    min-height: 0;
    margin-top: 14px;
}

.ref-to-tile {
    flex: 1;
    min-height: 44px;                 /* gloved-thumb law, even if squeezed */
    border-radius: 16px;              /* matches .game-card */
    border: 2px solid var(--border);
    background: var(--bg-card-hover);
    color: var(--text-primary);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 1.08;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;       /* kill the 300ms tap delay on the hold */
}
.ref-to-tile small {
    display: block;
    font-weight: 600;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0.2px;
    color: var(--text-secondary);
    margin-top: 6px;
}

/* 4px top accent bar — the differentiator that survives direct sunlight on a
   field, where the low-alpha tints wash out. */
.ref-to-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: currentColor;
    opacity: 0.9;
}

.ref-to-tile--take  { border-color: var(--gold);  background: var(--gold-dim);  color: var(--gold); }
.ref-to-tile--join  { border-color: var(--green); background: var(--green-dim); color: var(--green); }
.ref-to-tile--wrong { background: transparent; color: var(--text-secondary); }
.ref-to-tile--wrong::before { opacity: 0.35; }

.ref-to-tile.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* Hold-to-confirm fill. Take Over is destructive and the biggest target on the
   wrist, so it must be impossible to trigger with a mis-tap. */
.ref-to-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 0;
    background: var(--gold);
    opacity: 0.28;
    pointer-events: none;
}
.ref-to-lbl { position: relative; }
.ref-to-tile--take.is-holding { border-color: var(--gold); }

/* ---- Q333 wrist landscape (716 x 298) — the constrained layout ----
   Same breakpoint the rest of this file uses for the wrist. Tiles go side by
   side across the wide axis; the header compresses so the row keeps the height. */
@media (orientation: landscape) and (max-height: 460px) {
    .ref-to-screen  { padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 14px); }
    .ref-to-matchup { font-size: 28px; margin-top: 5px; }
    .ref-to-held    { font-size: 13.5px; margin-top: 7px; line-height: 1.35; }
    .ref-to-row     { flex-direction: row; gap: 11px; margin-top: 11px; }
    .ref-to-tile    { font-size: 21px; }
    .ref-to-tile small { font-size: 12px; margin-top: 7px; }
}

/* Very narrow portrait (Q333 portrait ~341px) */
@media (max-width: 360px) {
    .ref-to-matchup { font-size: 27px; }
    .ref-to-tile    { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .ref-to-fill { transition: none; }
}

/* ---- View-only / Take Over banner ----
   Moved out of the 14-line inline cssText blob of raw hex that used to be built
   in game-loading.js, so the app carries ONE takeover treatment rather than two
   that drift apart. Same look, tokens instead of hardcoded colour. */
.ref-takeover-banner {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9400;
    padding: calc(env(safe-area-inset-bottom, 10px) + 10px) 14px 14px;
    background: var(--bg-card);
    border-top: 3px solid var(--gold);
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ref-takeover-banner__label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
}
.ref-takeover-banner__msg { font-size: 15px; color: var(--text-primary); margin-top: 2px; }
.ref-takeover-banner__btn {
    flex-shrink: 0;
    min-width: 120px;
    height: 50px;
    border-radius: 12px;
    background: var(--gold-dim);
    border: 1.5px solid var(--gold);
    color: var(--gold);
    font-family: 'Rajdhani', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

/* ============================================================================
   SHORT-SCREEN MODAL CONTRACT  (Jul 25 2026)

   INCIDENT: twice on the night of Jul 24, referees tapped END GAME, saw the
   confirmation, and walked away believing the game was over. It wasn't — the
   confirm button sat below the fold on the Q333 wrist (716x298) and they never
   reached it. The games stayed 'in_progress'.

   Downstream that is not a cosmetic bug: advance_bracket_winner()
   (161_playoff_brackets.sql:59) returns immediately unless status='completed',
   so a game the ref THINKS they ended never seats its winner in the next round.
   One clipped button, three symptoms.

   ROOT CAUSE: of the 26 rules for .ref-endgame-modal / #endGameModal, ZERO sat
   inside any media query — the modal was built at tablet size and never given a
   short-screen pass. .ref-endgame-modal was `overflow:hidden` with NO
   max-height, so on a 298px-tall viewport the action row was CLIPPED, not
   merely scrolled past. Same defect in the emergency (injury/safety) and
   summary modals — an audit of every referee modal found these three are the
   live ones lacking it (.score-modal / .timeout-modal are dead CSS, no markup).

   THE CONTRACT (an invariant, not a patch — deliberately NOT wrapped in a media
   query, so it holds at every viewport and cannot regress on some size nobody
   thought to test):
     1. the panel never exceeds the viewport
     2. the body scrolls
     3. THE ACTION ROW IS ALWAYS VISIBLE — pinned, never scrolled away
   On tall screens max-height simply never binds, so nothing changes there.

   Any new referee modal with a destructive or confirming action MUST join
   these three selector lists.
   ========================================================================== */
.ref-endgame-modal,
.ref-emergency-modal,
.ref-summary-modal {
    /* vh first as the WebView-110 fallback, dvh second for engines that have it
       (dvh accounts for the Android URL bar; the Q333 kiosk has none, but the
       referee web app also runs in mobile Safari where it matters). */
    max-height: calc(100vh - 16px);
    max-height: calc(100dvh - 16px);
    display: flex;
    flex-direction: column;
    /* the panels set overflow:hidden for their rounded corners — keep that, but
       the BODY below owns scrolling now. */
}

.ref-endgame-body,
.ref-emergency-body,
.ref-summary-body {
    flex: 1 1 auto;
    min-height: 0;                    /* without this a flex child refuses to shrink and the cap does nothing */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* The whole point: confirm/cancel can never be pushed out of reach. */
.ref-endgame-actions,
.ref-emergency-actions,
.ref-summary-actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--bg-card);
    padding-top: 12px;
    padding-bottom: 4px;
    margin-top: 8px;
    /* soft lift so the pinned row reads as floating above scrolled content
       rather than as a hard seam */
    box-shadow: 0 -12px 18px -10px rgba(0, 0, 0, 0.75);
}

/* Q333 wrist landscape (716x298) — reclaim vertical space so the score and the
   action row coexist without the body needing to scroll at all. */
@media (orientation: landscape) and (max-height: 460px) {
    .ref-endgame-body,
    .ref-emergency-body,
    .ref-summary-body { padding: 12px 16px; }

    .ref-endgame-label { margin-bottom: 6px; }
    .ref-endgame-scoreboard { padding: 10px 12px; }
    .ref-endgame-team-logo { width: 34px; height: 34px; }
    .ref-endgame-team-score { font-size: 30px; line-height: 1.05; }
    .ref-endgame-team-name { font-size: 12px; }
    /* the warning line is the least load-bearing content on a 298px screen —
       the confirm button's own label already says what will happen */
    .ref-endgame-warning { padding: 8px 10px; font-size: 12px; }
    .ref-endgame-warning svg { width: 16px; height: 16px; }
    .ref-endgame-actions { margin-top: 6px; padding-top: 8px; }

    .ref-endgame-header,
    .ref-emergency-header { padding-top: 10px; padding-bottom: 10px; }
}

        /* ====================================================================
         * REF CHROME REDESIGN — Aug 14 2026 (the Chargers Friday verdict)
         * --------------------------------------------------------------------
         * Refs' verdict from the Friday slate, day games, older officials:
         *   1. .ref-decide      — confirm/prompt overlays become FULL-SCREEN
         *      decision pages: giant slab buttons, a real X (68px target),
         *      no tap-outside dismissal (glove misfires). Band law applied:
         *      every page IS the page.
         *   2. html.ref-day     — daylight skin for CHROME surfaces only
         *      (PIN/onboarding, settings, decision pages). Dark text on light
         *      surfaces is what survives direct sun on the Q333's IPS panel.
         *      THE GAME CONSOLE IS CANON AND STAYS DARK IN EVERY THEME.
         *      Driven by power.js off the same sunset curve as brightness;
         *      sc_ref_theme_force (day|night) overrides for dev/testing.
         *   3. .ref-int-btn     — TURNOVER (was INT until Sep 25 2026): the
         *      refs' #1 request. One tap = possession flips + downs reset to 1st.
         * ==================================================================== */

        /* ── 1. Full-screen decision pages ─────────────────────────────── */
        .ref-decide {
            position: fixed; inset: 0; z-index: 10000;
            display: flex; flex-direction: column;
            background: #0b0e17;
        }
        .ref-decide-close {
            position: absolute; top: 0; right: 0; z-index: 2;
            width: 68px; height: 68px;
            display: flex; align-items: center; justify-content: center;
            background: rgba(255,255,255,0.05);
            border: 0; border-left: 1px solid rgba(255,255,255,0.16);
            border-bottom: 1px solid rgba(255,255,255,0.16);
            color: #fff; font-size: 36px; line-height: 1; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-decide-close:active { background: rgba(255,255,255,0.18); }
        .ref-decide-body {
            flex: 1 1 auto; min-height: 0;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center; gap: 10px;
            padding: 14px 76px 10px 20px; text-align: center;
        }
        .ref-decide-msg {
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-weight: 800; text-transform: uppercase;
            font-size: clamp(24px, 8vh, 44px); line-height: 1.12;
            letter-spacing: 0.02em; color: #fff;
        }
        .ref-decide-detail {
            font-family: 'Rajdhani', sans-serif; font-weight: 600;
            font-size: 15px; color: rgba(255,255,255,0.65);
        }
        .ref-decide-input {
            width: min(420px, 90%); box-sizing: border-box; padding: 14px;
            border-radius: 4px; border: 2px solid rgba(255,255,255,0.25);
            background: rgba(255,255,255,0.06); color: #fff;
            font-size: 22px; text-align: center;
            font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: 0.1em;
        }
        .ref-decide-actions { flex: 0 0 auto; display: flex; gap: 2px; }
        .ref-decide-btn {
            flex: 1 1 50%; min-height: 88px; border: 0; border-radius: 0;
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-weight: 800; font-size: clamp(20px, 6vh, 30px);
            letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-decide-btn--cancel { background: #1c2128; color: rgba(255,255,255,0.85); }
        .ref-decide-btn--cancel:active { background: #2a3038; }
        .ref-decide-btn--confirm { background: linear-gradient(180deg, #f59e0b, #d97706); color: #0b0e17; }
        .ref-decide-btn--confirm:active { filter: brightness(1.12); }
        .ref-decide--danger .ref-decide-btn--confirm { background: linear-gradient(180deg, #ef4444, #b91c1c); color: #fff; }
        /* START THIS GAME? — the first game on a field (Sep 17 2026). Where, then
           the division in gold (it decides the rules), then who. */
        .ref-decide-msg .ref-sure-q { font-size: 0.5em; letter-spacing: 0.12em; color: rgba(255,255,255,0.6); }
        .ref-decide-msg .ref-sure-where { font-size: 0.62em; color: #fff; }
        .ref-decide-msg .ref-sure-div { font-size: 0.8em; color: var(--gold); line-height: 1.05; }
        .ref-decide-msg .ref-sure-teams { font-size: 0.72em; color: #fff; }
        .ref-decide-msg .ref-sure-teams span { font-size: 0.7em; color: rgba(255,255,255,0.5); }
        @media (orientation: landscape) and (max-height: 460px) {
            .ref-decide-btn { min-height: 30vh; }
            .ref-decide-msg { font-size: clamp(26px, 13vh, 46px); }
        }

        /* ── 2. Settings close: a real target in BOTH themes ───────────── */
        .ref-settings-close {
            width: 52px; height: 52px; border-radius: 4px;
            font-size: 30px; color: #fff;
            background: rgba(255,255,255,0.08);
            border: 1px solid rgba(255,255,255,0.22);
        }

        /* ── 3. Daylight chrome skin ───────────────────────────────────── */
        /* Token-driven components (PIN keypad etc.) flip via scoped vars;
           the hardcoded white-on-dark chrome is overridden explicitly. */
        html.ref-day .ref-onboarding,
        html.ref-day .ref-onboarding--v2,
        html.ref-day .ref-settings-v2,
        html.ref-day .ref-decide {
            --bg-primary: #eef0f4; --bg-card: #ffffff; --bg-card-hover: #e4e8ee;
            --border: rgba(12,16,24,0.18);
            --text-primary: #10141c; --text-secondary: #3d4653; --text-muted: #5a6474;
        }
        /* The day-code league line: the --gc-* aliases are substituted on :root
           (dark), so the daylight skin names its scoped tokens explicitly —
           the same shape the PIN keypad uses a few rules below. */
        html.ref-day .ref-onb-league,
        html.ref-day .ref-onb-league__switch { color: var(--text-secondary); }
        html.ref-day .ref-onb-league__name { color: var(--text-primary); }
        html.ref-day .ref-onboarding--v2,
        html.ref-day .ref-settings-v2 { background: #eef0f4; }
        html.ref-day .ref-onboarding { background: #eef0f4; }
        html.ref-day .ref-onboarding::after,
        html.ref-day .ref-onboarding-glow { opacity: 0.25; }

        /* Decision pages, day */
        html.ref-day .ref-decide { background: #eef0f4; }
        html.ref-day .ref-decide-close {
            background: rgba(12,16,24,0.05);
            border-color: rgba(12,16,24,0.22); color: #10141c;
        }
        html.ref-day .ref-decide-close:active { background: rgba(12,16,24,0.14); }
        html.ref-day .ref-decide-msg { color: #10141c; }
        html.ref-day .ref-decide-detail { color: rgba(16,20,28,0.65); }
        html.ref-day .ref-decide-input {
            border-color: rgba(12,16,24,0.35); background: #fff; color: #10141c;
        }
        html.ref-day .ref-decide-btn--cancel { background: #dde1e8; color: #10141c; }
        html.ref-day .ref-decide-btn--cancel:active { background: #ccd2db; }

        /* Onboarding / PIN, day */
        html.ref-day .ref-onb-headline { color: #10141c; }
        html.ref-day .ref-onb-official-title { color: #10141c; }
        html.ref-day .ref-onb-official-cancel { color: rgba(16,20,28,0.8); border-color: rgba(12,16,24,0.25); }
        html.ref-day .ref-onb-tagline { color: rgba(16,20,28,0.6); }
        html.ref-day .ref-onb-sep { color: rgba(16,20,28,0.6); }
        html.ref-day .ref-onb-sep::after { background: linear-gradient(90deg, transparent, rgba(12,16,24,0.2), transparent); }
        html.ref-day .ref-onb-tile { background: #fff; border-color: rgba(12,16,24,0.16); color: rgba(16,20,28,0.85); }
        html.ref-day .ref-onb-tile-label { color: #10141c; }
        html.ref-day .ref-onb-tile-sub { color: rgba(16,20,28,0.6); }
        html.ref-day .ref-onb-footer-link { color: rgba(16,20,28,0.65); }
        html.ref-day .ref-onb-eyebrow,
        html.ref-day .ref-onb-pin-status,
        html.ref-day .ref-onb-footer-link strong { color: #92400e; }
        html.ref-day .pin-error { background: rgba(239,68,68,0.08); }

        /* Settings, day */
        html.ref-day .ref-settings-close {
            background: rgba(12,16,24,0.05);
            border-color: rgba(12,16,24,0.25); color: #10141c;
        }
        html.ref-day .ref-settings-close:active { background: rgba(12,16,24,0.14); }
        html.ref-day .ref-settings-eyebrow,
        html.ref-day .ref-settings-section-label,
        html.ref-day .ref-settings-stat-value,
        html.ref-day .ref-settings-code-val,
        html.ref-day .ref-settings-code-copy,
        html.ref-day .ref-settings-swap-btn { color: #92400e; }
        html.ref-day .ref-settings-name,
        html.ref-day .ref-settings-info-val,
        html.ref-day .ref-settings-matchup-name { color: #10141c; }
        html.ref-day .ref-settings-meta { color: rgba(16,20,28,0.6); }
        html.ref-day .ref-settings-info-key,
        html.ref-day .ref-settings-code-key,
        html.ref-day .ref-settings-stat-label,
        html.ref-day .ref-settings-matchup-label { color: rgba(16,20,28,0.55); }
        html.ref-day .ref-settings-info-note { color: rgba(16,20,28,0.65); }
        html.ref-day .ref-settings-section { background: #fff; border-color: rgba(12,16,24,0.14); }
        html.ref-day .ref-settings-stat { background: #fff; border-color: rgba(12,16,24,0.12); }
        html.ref-day .ref-settings-info-row { border-bottom-color: rgba(12,16,24,0.08); }
        html.ref-day .ref-settings-profile { border-color: rgba(180,83,9,0.35); }
        html.ref-day .ref-settings-matchup-bar { background: #fff; border-color: rgba(180,83,9,0.3); }
        html.ref-day .ref-settings-game-btn--share { background: #fff; border-color: rgba(12,16,24,0.25); color: #10141c; }
        html.ref-day .ref-settings-game-btn--share:active { background: #e4e8ee; }
        html.ref-day .ref-settings-game-btn--end,
        html.ref-day .ref-settings-signout { color: #b91c1c; }
        html.ref-day .ref-settings-build { color: rgba(16,20,28,0.35); }
        html.ref-day .ref-settings-backstart { background: rgba(12,16,24,0.07); color: #10141c; }
        html.ref-day .ref-settings-backstart:active { background: rgba(12,16,24,0.15); }
        html.ref-day .rset-tab { background: rgba(12,16,24,0.05); border-color: rgba(12,16,24,0.12); color: rgba(16,20,28,0.6); }
        html.ref-day .rset-tab.active { color: #10141c; }
        html.ref-day .ref-hand-btn { background: rgba(12,16,24,0.06); color: rgba(16,20,28,0.7); }
        html.ref-day .ref-hand-btn:active { background: rgba(12,16,24,0.14); }
        html.ref-day .ref-hand-btn.active { color: #10141c; }

        /* ── 4. TURNOVER (possession flips, downs reset) ─────────────────
           Labelled INT until Sep 25 2026; the .ref-int-* class names are
           historical. "TURNOVER" is eight letters where "INT" was three, so
           the label is set in the condensed face at a size that fits the
           band's 14% slot (98px at 716x298) without wrapping. */
        .ref-int-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 1px; padding: 0 14px; min-height: 44px; align-self: stretch;
            background: linear-gradient(180deg, #a855f7 0%, #7c3aed 100%);
            border: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 8px rgba(0,0,0,0.4);
            border-radius: 12px; color: #fff; cursor: pointer;
            font-family: 'Rajdhani', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-int-btn:active { filter: brightness(1.15); }
        .ref-int-label {
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-weight: 800; font-size: 18px; letter-spacing: 0.02em; line-height: 1;
            white-space: nowrap;
        }
        @media (orientation: landscape) and (max-height: 460px) {
            .ref-int-btn { flex: 0 0 14%; width: 14%; height: 100%; padding: 0; }
            .ref-int-label { font-size: 20px; }
        }

        /* Day skin: game-rules tiles + toggle rows (caught in the Aug 14
           localhost review — white-on-white labels; enumerate EVERY settings
           sub-component, not just the ones on the first screenshot). */
        html.ref-day .rgs-tile { background: #fff; border-color: rgba(12,16,24,0.14); }
        html.ref-day .rgs-tile-label { color: rgba(16,20,28,0.6); }
        html.ref-day .rgs-tile-val { color: #b45309; }
        html.ref-day .rgs-tile-unit { color: rgba(16,20,28,0.6); }
        html.ref-day .rgs-tile-btns { border-top-color: rgba(12,16,24,0.12); }
        html.ref-day .rgs-tile-btn { color: #10141c; background: rgba(12,16,24,0.06); }
        html.ref-day .rgs-tile-btn:active { background: rgba(245,158,11,0.35); }
        html.ref-day .rgs-tile-btn:first-child { border-right-color: rgba(12,16,24,0.1); }

        /* ====================================================================
         * BAND SETTINGS — VOLT DAY (Aug 14 2026, Carlos: "fresh eye, our
         * Platform 3 volt-day language, an old ref glancing down").
         * Active ONLY when #settingsModal carries data-band-view (set on the
         * wrist layout by settings.js). Phones never get the attribute and
         * keep the rail + panes untouched. The game console stays canon —
         * volt-day speaks in the settings chrome only.
         * Control grammar: segmented controls (joined, hairline dividers,
         * active = ink fill + volt bottom edge in day / volt fill + ink text
         * at night), volt reserved for the singular primary CTA, live red
         * carries END GAME, square 4px corners, Saira Condensed display.
         * ==================================================================== */
        #settingsModal[data-band-view] { background: #0d1220; }
        html.ref-day #settingsModal[data-band-view] { background: #eef1f5; }
        #settingsModal[data-band-view] .rset-rail { display: none; }
        #settingsModal[data-band-view="menu"] #rsetContent { display: none; }
        .rset-band-menu { display: none; }
        #settingsModal[data-band-view="menu"] .rset-band-menu {
            display: grid; grid-template-columns: repeat(3, 1fr);
            grid-auto-rows: minmax(96px, 1fr); gap: 8px;
            flex: 1 1 auto; min-height: 0; overflow-y: auto;
        }
        .rset-band-back { display: none; }
        #settingsModal[data-band-view]:not([data-band-view="menu"]) .rset-band-back {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 4px; flex: 0 0 108px; position: relative; overflow: hidden;
            background: linear-gradient(180deg, #1b262c 0%, #0d1216 100%);
            border: 1px solid rgba(255,255,255,0.10); border-radius: 6px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 8px rgba(0,0,0,0.4);
            color: #fff; font-family: 'Saira Condensed', sans-serif; font-weight: 800;
            font-size: 24px; letter-spacing: 0.08em; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .rset-band-back:active { box-shadow: inset 0 2px 8px rgba(0,0,0,0.7); transform: translateY(1px); }
        .rset-band-back:active::after {
            content: ""; position: absolute; bottom: 0; left: 20%; right: 20%;
            height: 6px; background: #8fd400; box-shadow: 0 -3px 16px #8fd400, 0 0 6px rgba(143,212,0,0.8);
        }
        html.ref-day .rset-band-back { border-color: rgba(13,18,32,0.28); }

        /* Menu cards */
        .rbm-item {
            display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
            gap: 4px; padding: 0 18px; min-height: 96px; text-align: left;
            position: relative; overflow: hidden;
            background: linear-gradient(180deg, #1b262c 0%, #0d1216 100%);
            border: 1px solid rgba(255,255,255,0.10); border-radius: 6px; cursor: pointer;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 8px rgba(0,0,0,0.4);
            -webkit-tap-highlight-color: transparent;
        }
        .rbm-item:active {
            box-shadow: inset 0 2px 8px rgba(0,0,0,0.7);
            transform: translateY(1px);
        }
        .rbm-item:active::after {
            content: ""; position: absolute; bottom: 0; left: 20%; right: 20%;
            height: 6px; background: #8fd400; box-shadow: 0 -3px 16px #8fd400, 0 0 6px rgba(143,212,0,0.8);
        }
        .rbm-label {
            font-family: 'Saira Condensed', sans-serif; font-weight: 800;
            font-size: 27px; letter-spacing: 0.04em; text-transform: uppercase;
            line-height: 1; color: #fff;
        }
        .rbm-sub { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 14.5px; color: rgba(255,255,255,0.6); }
        .rbm-item--live { background: linear-gradient(135deg, #ef4444, #b91c1c); border-color: rgba(239,68,68,0.5); }
        .rbm-item--live .rbm-sub { color: rgba(255,255,255,0.8); }
        .rbm-item--live:active { border-bottom-color: #fff; }
        /* Day: the ink slab stays — dark slabs on paper IS the brand contrast
           (same slab the coach sidebar uses). Only the field behind changes. */
        html.ref-day .rbm-item { border-color: rgba(13,18,32,0.28); }

        /* Page chrome: content fills beside the BACK slab; each page's one
           section stretches to the full height with display-size controls. */
        #settingsModal[data-band-view]:not([data-band-view="menu"]) .rset-content { gap: 8px; }
        #settingsModal[data-band-view="rules"]  #rsetContent > *:not(#settingsRulesSection),
        #settingsModal[data-band-view="hand"]   #rsetContent > *:not(#settingsHandSection),
        #settingsModal[data-band-view="voice"]  #rsetContent > *:not(#settingsVoiceSection),
        #settingsModal[data-band-view="bright"] #rsetContent > *:not(#brightnessSection),
        #settingsModal[data-band-view="game"]   #rsetContent > *:not(#settingsGameSection):not(#settingsMatchupBar) { display: none !important; }

        #settingsModal[data-band-view] .ref-settings-section { background: transparent; border: none; padding: 0; }
        #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-settings-section-label {
            font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 19px;
            letter-spacing: 0.14em;
        }
        #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-hand-hint { font-size: 14px; }
        #settingsModal[data-band-view="hand"] #settingsHandSection,
        #settingsModal[data-band-view="voice"] #settingsVoiceSection,
        #settingsModal[data-band-view="bright"] #brightnessSection,
        #settingsModal[data-band-view="rules"] #settingsRulesSection {
            display: flex !important; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0;
        }

        /* Segmented controls — THE HOUSE PRESSED-SLAB LOOK (lifted from the
           coach sidebar quarter tabs, css/theme.css .tab-v2, per Carlos:
           "pushing into these buttons, a green light on the bottom"): a
           SUNKEN tray holds the cells; the ACTIVE cell is a raised ink
           gradient slab (inset top highlight + drop shadow) with a volt LED
           bar glowing under it. Same slab in day and night — the dark slab
           on the light tray IS the brand contrast. */
        #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-hand-toggle {
            display: flex; gap: 4px; flex: 1 1 auto; min-height: 0;
            background: #0a0f1a; padding: 4px; border-radius: 6px;
            box-shadow: inset 0 0 6px rgba(0,0,0,0.85);
            border: 1px solid rgba(255,255,255,0.08);
        }
        html.ref-day #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-hand-toggle {
            background: #dbe0e8; border-color: rgba(13,18,32,0.14);
            box-shadow: inset 0 1px 5px rgba(13,18,32,0.28);
        }
        #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-hand-btn {
            flex: 1 1 0; min-height: 100%; border: 0; border-radius: 4px;
            background: transparent; position: relative; overflow: hidden;
            font-family: 'Saira Condensed', sans-serif; font-weight: 800;
            font-size: 34px; letter-spacing: 0.05em; color: rgba(255,255,255,0.45);
            transition: color 0.15s ease;
        }
        html.ref-day #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-hand-btn:not(.active) { color: #5b6472; }
        #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-hand-btn.active {
            background: linear-gradient(180deg, #1b262c 0%, #0d1216 100%);
            color: #fff; text-shadow: 0 0 8px rgba(143,212,0,0.55);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 8px rgba(0,0,0,0.4);
        }
        #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-hand-btn.active::after {
            content: ""; position: absolute; bottom: 0; left: 20%; right: 20%;
            height: 6px; background: #8fd400; box-shadow: 0 -3px 16px #8fd400, 0 0 6px rgba(143,212,0,0.8);
        }

        /* Rules page: five full-height steppers, Orbitron numerals (numerals
           ONLY), giant +/- cells. */
        #settingsModal[data-band-view="rules"] .rgs-tiles { display: flex; gap: 8px; flex: 1 1 auto; min-height: 0; }
        #settingsModal[data-band-view="rules"] .rgs-tile {
            flex: 1 1 0; display: flex; flex-direction: column; min-height: 0;
            background: #131a2c; border: 1px solid rgba(255,255,255,0.14); border-radius: 4px;
        }
        #settingsModal[data-band-view="rules"] .rgs-tile-label { font-size: 14px; letter-spacing: 0.1em; padding-top: 9px; text-align: center; }
        /* The value is a dark INSTRUMENT WINDOW with bold volt digits — no
           gold (Carlos, Aug 14: "no more of the yellow, bold green"). The
           window stays dark in BOTH themes; volt digits carry the glow. */
        #settingsModal[data-band-view="rules"] .rgs-tile-center {
            flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
            background: linear-gradient(180deg, #05080d 0%, #0b1118 100%);
            border: 1px solid rgba(143,212,0,0.2); border-radius: 4px;
            margin: 8px 8px 0; box-shadow: inset 0 0 8px rgba(0,0,0,0.8);
        }
        #settingsModal[data-band-view="rules"] .rgs-tile-val {
            font-size: 52px; color: #8fd400; text-shadow: 0 0 12px rgba(143,212,0,0.5);
        }
        #settingsModal[data-band-view="rules"] .rgs-tile-unit { font-size: 12px; color: rgba(143,212,0,0.7); }
        /* +/- as raised slabs with the house press-in feel */
        #settingsModal[data-band-view="rules"] .rgs-tile-btns { flex: 0 0 auto; gap: 5px; padding: 8px; border-top: none; }
        #settingsModal[data-band-view="rules"] .rgs-tile-btn {
            height: 52px; font-size: 30px; border: 0; border-radius: 4px;
            background: linear-gradient(180deg, #232f38 0%, #121a20 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 6px rgba(0,0,0,0.4);
            color: #fff;
        }
        #settingsModal[data-band-view="rules"] .rgs-tile-btn:first-child { border-right: 0; }
        #settingsModal[data-band-view="rules"] .rgs-tile-btn:active {
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.75); transform: translateY(1px);
            color: #8fd400; text-shadow: 0 0 10px rgba(143,212,0,0.6);
        }
        /* No-gold pass for the band chrome labels */
        #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-settings-section-label { color: #e8ecf3; }
        html.ref-day #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-settings-section-label { color: #3d4653; }
        #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-hand-hint { color: rgba(255,255,255,0.5); }
        html.ref-day #settingsModal[data-band-view]:not([data-band-view="menu"]) .ref-hand-hint { color: #5b6472; }
        html.ref-day #settingsModal[data-band-view="rules"] .rgs-tile { background: #fff; border-color: rgba(13,18,32,0.16); }
        html.ref-day #settingsModal[data-band-view="rules"] .rgs-tile-val { color: #8fd400; }
        #settingsModal[data-band-view="rules"] .ref-settings-save-btn {
            flex: 0 0 auto; min-height: 54px; border-radius: 4px;
            background: #8fd400; color: #0d1220;
            font-family: 'Saira Condensed', sans-serif; font-weight: 800;
            font-size: 20px; letter-spacing: 0.08em;
        }

        /* THIS GAME page: display-size code, big rows. */
        #settingsModal[data-band-view="game"] #settingsGameSection { display: flex !important; flex-direction: column; gap: 8px; }
        #settingsModal[data-band-view="game"] .ref-settings-code-row { min-height: 72px; }
        #settingsModal[data-band-view="game"] .ref-settings-code-val {
            font-family: 'Saira Condensed', sans-serif; font-weight: 800; font-size: 34px; letter-spacing: 0.14em;
        }
        #settingsModal[data-band-view="game"] .ref-settings-game-btn { min-height: 60px; font-size: 18px; }
        #settingsModal[data-band-view="game"] .ref-settings-matchup-bar { min-height: 76px; }
        #settingsModal[data-band-view="game"] .ref-settings-swap-btn { width: 64px; height: 64px; }

        /* PROFILE / ACCOUNT pages: readable at arm's length. */
        #settingsModal[data-band-view="profile"] .ref-settings-info-key,
        #settingsModal[data-band-view="profile"] .ref-settings-info-val { font-size: 17px; }
        #settingsModal[data-band-view="profile"] .ref-settings-name { font-size: 22px; }
        #settingsModal[data-band-view="account"] .ref-settings-backstart,
        #settingsModal[data-band-view="account"] .ref-settings-cta {
            min-height: 60px; border-radius: 4px;
            font-family: 'Saira Condensed', sans-serif; font-weight: 800;
            font-size: 20px; letter-spacing: 0.06em;
        }

        /* Band mode owns the FULL width (Carlos, Aug 14 localhost review:
           "are we using the full width?" — the Q333-mini compact block above
           caps the stage at 560px; band pages are designed edge-to-edge). */
        #settingsModal[data-band-view] .ref-settings-stage { max-width: none; margin: 0; }

        /* ====================================================================
         * FIELD PICKER + GAME CAROUSEL — band language (Aug 14 2026, Carlos:
         * "do the field numbers, then a carousel of games — completed dim
         * out, auto-show the next game up"). Wrist layout only.
         * ==================================================================== */
        @media (orientation: landscape) and (max-height: 460px) {
            /* Field tiles: raised ink slabs, volt Orbitron number (numerals
               only), LED press feedback — same instrument language as the
               rules page. */
            .ref-field-pick-btn {
                border-radius: 6px; border: 1px solid rgba(255,255,255,0.10);
                background: linear-gradient(180deg, #1b262c 0%, #0d1216 100%);
                box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 4px 8px rgba(0,0,0,0.4);
                color: #8fd400; text-shadow: 0 0 12px rgba(143,212,0,0.45);
                position: relative; overflow: hidden;
            }
            .ref-field-pick-btn::before { color: rgba(255,255,255,0.6); }
            .ref-field-pick-btn:active { transform: translateY(1px); box-shadow: inset 0 2px 8px rgba(0,0,0,0.7); }
            .ref-field-pick-btn:active::after {
                content: ""; position: absolute; bottom: 0; left: 20%; right: 20%;
                height: 6px; background: #8fd400; box-shadow: 0 -3px 16px #8fd400, 0 0 6px rgba(143,212,0,0.8);
            }

            /* Game board → swipe carousel: horizontal snap, cards ~half the
               screen, completed games dimmed ghosts. The NEXT game up wears
               the volt LED + UP NEXT tag and the board auto-centers on it
               (auth-pin.js adds .gb-next + scrolls). */
            .gb-board {
                display: flex; flex-direction: row; align-items: stretch; gap: 10px;
                overflow-x: auto; overflow-y: hidden;
                scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
                padding: 4px 8% 8px;
            }
            /* Carousel card anatomy: big time up top, matchup fills the
               middle at display size, status strip at the bottom — no dead
               middles, no whisper text (Carlos, Aug 14 review). */
            .gb-card { flex: 0 0 46%; min-width: 46%; scroll-snap-align: center; position: relative; padding: 14px 16px 0; gap: 6px; border-radius: 10px; }
            .gb-card .gb-time { font-size: 30px; }
            .gb-card .gb-time .ap { font-size: 14px; }
            .gb-card .gb-match { justify-content: center; gap: 9px; }
            .gb-card .gb-tn { font-size: 22px; }
            .gb-card .gb-vs { font-size: 12px; }
            .gb-card .gb-tag { font-size: 12px; padding: 2px 7px; line-height: 1.4; }
            .gb-card .gb-foot { padding: 10px 0 12px; }
            .gb-card .gb-st { font-size: 16px; }
            .gb-card:not(.final):not(.live):not(.ready) .gb-st { font-size: 14px; }
            .gb-card .gb-score { font-size: 28px; }
            /* STATE HIERARCHY (Carlos, Aug 14: "it's obvious to the ref —
               this is the one that's next; scroll back, that one's final"):
               next-up = volt banner + biggest card + huge clock;
               upcoming = quiet; final = dimmed ghost wearing a FINAL stamp. */
            .gb-card.gb-next { flex: 0 0 52%; min-width: 52%; }
            .gb-card.gb-next .gb-time { font-size: 40px; }
            .gb-next-banner {
                margin: -14px -16px 2px; padding: 5px 0;
                background: #8fd400; color: #0d1220; text-align: center;
                font-family: 'Saira Condensed', sans-serif; font-weight: 800;
                font-size: 16px; letter-spacing: 0.18em; text-transform: uppercase;
            }
            .gb-card:not(.gb-next):not(.final) { opacity: 0.8; }
            /* ROOM FOR THE DIVISION (Sep 17 2026). The card is ~168px tall on the
               Q333. Its status line said "Upcoming" / "Ready" / "Live" under a card
               whose edge colour already says it, and cost 45px — enough to push the
               AWAY team off the bottom. It stays only where it carries a fact the
               colour cannot: a final's score. The division eyebrow never shrinks. */
            .gb-card:not(.final) .gb-foot { display: none; }
            /* No "vs" row on the wrist (Carlos, Sep 17): each team line already
               wears its HOME / AWAY tag, so the word only cost a row. */
            .gb-card .gb-vs { display: none; }
            /* A final already wears its FINAL stamp; the foot keeps only the score. */
            .gb-card.final .gb-foot { justify-content: flex-end; border-top: 0; padding: 0 0 8px; }
            .gb-card.final .gb-st { display: none; }
            .gb-next-banner.is-live { background: var(--red); color: #fff; }
            .gb-next-banner .gb-dv-sep { display: inline; }
            .gb-next-banner .gb-bn-dv { display: inline; margin: 0; color: inherit; }
            .gb-card .gb-match { gap: 6px; }
            .gb-div, .gb-next-banner, .gb-time { flex: 0 0 auto; }
            /* Finals are ghosts you can still READ — dim the chrome, keep the
               score loud, stamp the state. */
            .gb-card.final { opacity: 0.6; filter: saturate(0.55); }
            .gb-card.final .gb-score { color: #fff; font-size: 32px; }
            .gb-card.final .gb-time { font-size: 20px; color: rgba(255,255,255,0.45); }
            .gb-card.final::after {
                content: "FINAL"; position: absolute; top: 10px; right: 12px;
                font-family: 'Saira Condensed', sans-serif; font-weight: 800;
                font-size: 14px; letter-spacing: 0.14em; color: #22c55e;
                border: 2px solid rgba(34,197,94,0.55); border-radius: 3px;
                padding: 2px 9px;
            }
            .gb-card.gb-next {
                border-color: rgba(143,212,0,0.55);
                box-shadow: 0 0 14px rgba(143,212,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
            }
            .gb-card.gb-next::after {
                content: ""; position: absolute; bottom: 0; left: 20%; right: 20%;
                height: 6px; background: #8fd400; box-shadow: 0 -3px 16px #8fd400, 0 0 6px rgba(143,212,0,0.8);
            }
            /* Next-up marker rides the card's own status stripe (::before is
               the 4px left edge stripe) — volt + glow, no text needed: the
               green light IS the language. */
            .gb-card.gb-next::before {
                background: #8fd400; width: 6px;
                box-shadow: 2px 0 12px rgba(143,212,0,0.55);
            }
        }

        /* ====================================================================
         * END GAME → full-bleed band page (Aug 14 2026, Carlos: "the quit
         * game mode hasn't been redesigned — still that modal scenario").
         * Wrist layout only; phones keep the v179 sticky-action modal.
         * ==================================================================== */
        @media (orientation: landscape) and (max-height: 460px) {
            #endGameModal { padding: 0; }
            #endGameModal .ref-glow { display: none; }
            #endGameModal .ref-endgame-modal {
                width: 100%; height: 100%; max-width: none; max-height: none;
                margin: 0; border-radius: 0; border: 0;
                display: flex; flex-direction: column; overflow: hidden;
                background: #0b0e17;
            }
            #endGameModal .ref-endgame-header {
                padding: 0 0 0 16px; align-items: center; min-height: 56px;
            }
            #endGameModal .ref-endgame-title {
                font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
                font-weight: 800; font-size: 26px; letter-spacing: 0.06em;
            }
            #endGameModal .ref-endgame-close {
                width: 64px; height: 56px; border-radius: 0;
                background: rgba(255,255,255,0.05);
                border: 0; border-left: 1px solid rgba(255,255,255,0.16);
                border-bottom: 1px solid rgba(255,255,255,0.16);
                color: #fff; font-size: 32px;
            }
            #endGameModal .ref-endgame-body {
                flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
                padding: 0 16px; overflow: hidden;
            }
            /* Broadcast face-off (Carlos: "Nike and Apple had a baby"): the
               two teams PULL TO CENTER around a real FINAL mark — no dead
               middle, no whispering corners. Scores are the heroes. */
            #endGameModal .ref-endgame-label {
                font-size: 13px; letter-spacing: 0.22em; text-align: center;
                color: rgba(255,255,255,0.45); padding: 4px 0 0;
            }
            #endGameModal .ref-endgame-scoreboard {
                flex: 1 1 auto; min-height: 0;
                display: grid; grid-template-columns: 1fr auto 1fr;
                align-items: center; background: none; border: 0; padding: 0; margin: 0;
            }
            #endGameModal .ref-endgame-team {
                display: flex; flex-direction: row; align-items: center;
                justify-content: flex-end; gap: 18px; min-width: 0;
            }
            #endGameModal .ref-endgame-team.away { flex-direction: row-reverse; }
            #endGameModal .ref-endgame-team > div:not(.ref-endgame-team-logo) { text-align: right; min-width: 0; flex: 0 1 auto; }
            #endGameModal .ref-endgame-team.away > div:not(.ref-endgame-team-logo) { text-align: left; }
            /* Logo chip matches the SCORE's height; name goes display-size
               (Carlos, Aug 14). */
            #endGameModal .ref-endgame-team-logo {
                width: 86px; height: 86px; border-radius: 14px; flex: 0 0 auto;
                display: flex; align-items: center; justify-content: center;
                font-size: 40px; font-weight: 800;
            }
            #endGameModal .ref-endgame-team-name {
                font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
                font-weight: 700; font-size: 26px; letter-spacing: 0.08em;
                text-transform: uppercase; color: rgba(255,255,255,0.7);
                max-width: none;
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            }
            /* Saira for the big score — Orbitron's zero reads as a slashed
               icon at this size (established rule: big scores = Saira 800). */
            #endGameModal .ref-endgame-team-score {
                font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
                font-weight: 800; font-size: 96px; line-height: 0.9; color: #fff;
            }
            #endGameModal .ref-endgame-vs {
                font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
                font-weight: 800; font-size: 20px; letter-spacing: 0.14em;
                color: rgba(255,255,255,0.35); padding: 0 26px;
                display: flex; flex-direction: column; align-items: center; gap: 6px;
            }
            #endGameModal .ref-endgame-vs::before,
            #endGameModal .ref-endgame-vs::after {
                content: ""; width: 1px; height: 26px; background: rgba(255,255,255,0.18);
            }
            /* Warning demoted to a quiet caption — it's context, not an alarm. */
            #endGameModal .ref-endgame-warning {
                background: none; border: 0; justify-content: center;
                font-size: 13px; padding: 0 0 8px; color: rgba(255,255,255,0.5);
            }
            #endGameModal .ref-endgame-warning svg { display: none; }
            #endGameModal .ref-endgame-actions {
                display: flex; gap: 2px; margin: 0 -16px; padding: 0;
                position: static;
            }
            #endGameModal .ref-endgame-btn-cancel,
            #endGameModal .ref-endgame-btn-confirm {
                flex: 1 1 50%; min-height: 24vh; border: 0; border-radius: 0;
                font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
                font-weight: 800; font-size: 26px; letter-spacing: 0.05em;
                text-transform: uppercase;
            }
            #endGameModal .ref-endgame-btn-cancel { background: #1c2128; color: rgba(255,255,255,0.85); }
            #endGameModal .ref-endgame-btn-cancel:active { background: #2a3038; }
            #endGameModal .ref-endgame-btn-confirm { background: linear-gradient(180deg, #ef4444, #b91c1c); color: #fff; }
            #endGameModal .ref-endgame-btn-confirm:active { filter: brightness(1.12); }
            /* Day skin */
            html.ref-day #endGameModal .ref-endgame-modal { background: #eef0f4; }
            html.ref-day #endGameModal .ref-endgame-title { color: #10141c; }
            html.ref-day #endGameModal .ref-endgame-close {
                background: rgba(12,16,24,0.05); border-color: rgba(12,16,24,0.22); color: #10141c;
            }
            html.ref-day #endGameModal .ref-endgame-team-name,
            html.ref-day #endGameModal .ref-endgame-team-score { color: #10141c; }
            html.ref-day #endGameModal .ref-endgame-btn-cancel { background: #dde1e8; color: #10141c; }
            html.ref-day #endGameModal .ref-endgame-btn-cancel:active { background: #ccd2db; }
        }

        /* ====================================================================
         * CHROME PALETTE — VOLT + INK (Aug 14 2026, Carlos: "anything beyond
         * the two officiating interfaces is our brand — volt green, black").
         * Gold/amber leaves the CHROME (it clashed with volt); it remains a
         * CONSOLE SEMANTIC only (penalty flag, 30-count). Secondary accent =
         * info blue #3b82f6, used sparingly for informational touches.
         * ==================================================================== */

        /* PIN lock screen — volt keys, bigger digits, pressed-slab language */
        .pin-key {
            background: linear-gradient(180deg, #1b262c 0%, #0d1216 100%);
            border: 1px solid rgba(255,255,255,0.10); border-radius: 6px;
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 3px 6px rgba(0,0,0,0.4);
            color: #fff; font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-weight: 800; font-size: 30px; min-height: 56px;
        }
        .pin-key:active { background: #8fd400; color: #0d1220; box-shadow: inset 0 2px 6px rgba(0,0,0,0.35); }
        .pin-key.action { color: rgba(255,255,255,0.75); font-size: 20px; }
        .pin-digit {
            border: 2px solid rgba(255,255,255,0.25);
            background: rgba(255,255,255,0.05); color: transparent;
        }
        .pin-digit.filled {
            border-color: #8fd400; color: #8fd400;
            background: rgba(143,212,0,0.12);
            box-shadow: 0 0 10px rgba(143,212,0,0.35);
        }
        .pin-digit.current { border-color: rgba(143,212,0,0.7); }
        html.ref-day .pin-digit { border-color: rgba(13,18,32,0.3); background: rgba(13,18,32,0.05); }
        html.ref-day .pin-digit.filled { background: rgba(143,212,0,0.2); color: #4b7000; border-color: #4b7000; }

        /* Onboarding accents: gold → volt (night) / ink-gray (day, where volt
           text on paper is banned — volt stays a FILL in daylight) */
        .ref-onb-eyebrow, .ref-onb-pin-status, .ref-onb-footer-link strong { color: #8fd400; }
        .ref-onb-dot { background: #8fd400; }
        .ref-onb-tile svg { color: #8fd400; }
        html.ref-day .ref-onb-eyebrow, html.ref-day .ref-onb-pin-status,
        html.ref-day .ref-onb-footer-link strong { color: #3d4653; }
        html.ref-day .ref-onb-tile svg { color: #4b7000; }
        .ref-onboarding::after { background: radial-gradient(circle, rgba(143,212,0,0.10) 0%, transparent 70%); }
        .ref-onboarding-glow { background: radial-gradient(circle, rgba(143,212,0,0.14) 0%, transparent 60%) !important; }
        .ref-onboarding-grid {
            background-image:
                linear-gradient(rgba(143,212,0,0.045) 1px, transparent 1px),
                linear-gradient(90deg, rgba(143,212,0,0.045) 1px, transparent 1px);
        }

        /* SELECT GAME chrome: title white, quick-game entry in the slab
           language with volt accents (was amber outline) */
        #gameSelectModal .gc-modal-title { color: #fff; }
        .quick-game-card {
            background: linear-gradient(180deg, #1b262c 0%, #0d1216 100%);
            border: 1px solid rgba(143,212,0,0.4);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 18px rgba(143,212,0,0.08);
        }
        .quick-game-card:hover, .quick-game-card:active { border-color: #8fd400; box-shadow: 0 0 20px rgba(143,212,0,0.2); }

        /* Settings header eyebrow (menu level) follows the brand too */
        .ref-settings-eyebrow { color: #8fd400; }
        .ref-settings-eyebrow .ref-onb-dot { background: #8fd400; }
        html.ref-day .ref-settings-eyebrow { color: #3d4653; }

        /* ====================================================================
         * GAME COMPLETE summary → full-bleed band page (Aug 14 2026 round 4:
         * it was the last gold holdout — amber hero, rounded modal, tiny X,
         * stats CLIPPED below the fold on the Q333. Every ref sees this after
         * every game. Wrist layout only; phones keep the modal.)
         * ==================================================================== */
        @media (orientation: landscape) and (max-height: 460px) {
            #gameSummaryModal { padding: 0; }
            #gameSummaryModal .ref-summary-modal {
                width: 100%; height: 100%; max-width: none; max-height: none;
                margin: 0; border-radius: 0; border: 0;
                display: flex; flex-direction: column; overflow: hidden;
                background: #0b0e17;
            }
            /* Gold hero → slim ink header, volt result text */
            #gameSummaryModal .ref-summary-hero {
                background: none; padding: 0 0 0 16px; min-height: 54px;
                display: flex; align-items: center; flex: 0 0 auto;
            }
            #gameSummaryModal .ref-summary-hero-glow,
            #gameSummaryModal .ref-summary-icon { display: none; }
            #gameSummaryModal .ref-summary-hero-content {
                display: flex; flex-direction: row; align-items: baseline; gap: 14px; padding: 0;
            }
            #gameSummaryModal .ref-summary-result-text {
                font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
                font-weight: 800; font-size: 27px; letter-spacing: 0.06em;
                color: #8fd400; text-shadow: 0 0 14px rgba(143,212,0,0.35); margin: 0;
            }
            #gameSummaryModal .ref-summary-label {
                font-size: 12px; letter-spacing: 0.22em; color: rgba(255,255,255,0.45); margin: 0;
            }
            #gameSummaryModal .ref-summary-close {
                position: absolute; top: 0; right: 0; width: 64px; height: 54px;
                border-radius: 0; background: rgba(255,255,255,0.05);
                border: 0; border-left: 1px solid rgba(255,255,255,0.16);
                border-bottom: 1px solid rgba(255,255,255,0.16);
                color: #fff; font-size: 32px;
            }
            #gameSummaryModal .ref-summary-body {
                flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
                gap: 8px; padding: 0 16px; overflow: hidden;
            }
            /* Scoreboard = the same face-off grammar as END GAME */
            #gameSummaryModal .ref-summary-scoreboard {
                flex: 1 1 auto; min-height: 0;
                display: grid; grid-template-columns: 1fr auto 1fr;
                align-items: center; background: none; border: 0; padding: 0; margin: 0; gap: 0;
            }
            #gameSummaryModal .ref-summary-team-card {
                display: flex; flex-direction: row; align-items: center;
                justify-content: flex-end; gap: 16px; min-width: 0;
                background: none; border: 0; padding: 0;
            }
            #gameSummaryModal .ref-summary-team-card.away { flex-direction: row-reverse; }
            #gameSummaryModal .ref-summary-team-card > div:not(.ref-summary-logo) { text-align: right; min-width: 0; flex: 0 1 auto; }
            #gameSummaryModal .ref-summary-team-card.away > div:not(.ref-summary-logo) { text-align: left; }
            #gameSummaryModal .ref-summary-logo {
                width: 62px; height: 62px; border-radius: 10px; flex: 0 0 auto;
                display: flex; align-items: center; justify-content: center;
                font-size: 26px; font-weight: 800;
            }
            #gameSummaryModal .ref-summary-name {
                font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
                font-weight: 700; font-size: 20px; letter-spacing: 0.08em;
                text-transform: uppercase; color: rgba(255,255,255,0.7);
                max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
            }
            #gameSummaryModal .ref-summary-score {
                font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
                font-weight: 800; font-size: 64px; line-height: 0.92; color: #fff;
            }
            #gameSummaryModal .ref-summary-final-badge { padding: 0 22px; background: none; border: 0; }
            #gameSummaryModal .ref-summary-final-badge span {
                font-family: 'Saira Condensed', sans-serif; font-weight: 800;
                font-size: 15px; letter-spacing: 0.14em; color: #22c55e;
                border: 2px solid rgba(34,197,94,0.55); border-radius: 3px; padding: 3px 10px;
            }
            /* Stats = instrument tiles */
            #gameSummaryModal .ref-summary-stats {
                display: flex; gap: 6px; flex: 0 0 auto; margin: 0;
            }
            #gameSummaryModal .ref-summary-stat {
                flex: 1 1 0; background: #131a2c; border: 1px solid rgba(255,255,255,0.12);
                border-radius: 4px; padding: 7px 4px 6px; text-align: center;
            }
            #gameSummaryModal .ref-summary-stat-value {
                font-size: 24px; line-height: 1; color: #fff; font-weight: 800;
            }
            #gameSummaryModal .ref-summary-stat-label {
                font-size: 12px; letter-spacing: 0.08em; color: rgba(255,255,255,0.5);
            }
            /* Actions = giant slabs: SHARE ink, NEW GAME volt (the primary) */
            #gameSummaryModal .ref-summary-actions {
                display: flex; gap: 2px; margin: 6px -16px 0; flex: 0 0 auto;
            }
            #gameSummaryModal .ref-summary-btn-secondary,
            #gameSummaryModal .ref-summary-btn-primary {
                flex: 1 1 50%; min-height: 62px; border: 0; border-radius: 0;
                display: flex; align-items: center; justify-content: center; gap: 10px;
                font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
                font-weight: 800; font-size: 22px; letter-spacing: 0.05em; text-transform: uppercase;
            }
            #gameSummaryModal .ref-summary-btn-secondary { background: #1c2128; color: rgba(255,255,255,0.85); }
            #gameSummaryModal .ref-summary-btn-secondary:active { background: #2a3038; }
            #gameSummaryModal .ref-summary-btn-primary { background: #8fd400; color: #0d1220; }
            #gameSummaryModal .ref-summary-btn-primary:active { filter: brightness(1.1); }
            /* Day skin */
            html.ref-day #gameSummaryModal .ref-summary-modal { background: #eef0f4; }
            html.ref-day #gameSummaryModal .ref-summary-result-text { color: #4b7000; text-shadow: none; }
            html.ref-day #gameSummaryModal .ref-summary-close { background: rgba(12,16,24,0.05); border-color: rgba(12,16,24,0.22); color: #10141c; }
            html.ref-day #gameSummaryModal .ref-summary-name { color: rgba(16,20,28,0.7); }
            html.ref-day #gameSummaryModal .ref-summary-score { color: #10141c; }
            html.ref-day #gameSummaryModal .ref-summary-stat { background: #fff; border-color: rgba(12,16,24,0.14); }
            html.ref-day #gameSummaryModal .ref-summary-stat-value { color: #10141c; }
            html.ref-day #gameSummaryModal .ref-summary-stat-label { color: rgba(16,20,28,0.55); }
            html.ref-day #gameSummaryModal .ref-summary-btn-secondary { background: #dde1e8; color: #10141c; }
        }

        /* ====================================================================
         * CHROME DE-GOLD SWEEP 2 (Aug 15 morning — Carlos's screenshots:
         * profile page, THIS GAME, ACCOUNT's NEW QUICK GAME, and the entire
         * Quick Game wizard were still speaking gold). Gold now survives ONLY
         * as console semantics: penalty flag, 30-count, timeout dots.
         * ==================================================================== */

        /* Band settings — PROFILE */
        .ref-settings-avatar { background: linear-gradient(180deg, #8fd400 0%, #6fa500 100%); color: #0d1220; }
        .ref-settings-profile { background: linear-gradient(180deg, #1b262c 0%, #0d1216 100%); border-color: rgba(255,255,255,0.12); }
        .ref-settings-stat-value { color: #8fd400; text-shadow: 0 0 10px rgba(143,212,0,0.35); }

        /* Band settings — ACCOUNT: the singular primary CTA is a volt fill */
        .ref-settings-cta { background: linear-gradient(180deg, #8fd400 0%, #76b000 100%); color: #0d1220; box-shadow: 0 4px 14px rgba(143,212,0,0.25); }
        .ref-settings-cta svg { color: #0d1220; }

        /* Band settings — THIS GAME: the code is an instrument window */
        .ref-settings-code-row { background: linear-gradient(180deg, #05080d 0%, #0b1118 100%); border-color: rgba(143,212,0,0.28); }
        .ref-settings-code-row:active { background: rgba(143,212,0,0.12); }
        .ref-settings-code-val {
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            color: #8fd400; text-shadow: 0 0 10px rgba(143,212,0,0.4);
        }
        .ref-settings-code-copy { color: rgba(143,212,0,0.8); }
        .ref-settings-swap-btn { background: rgba(143,212,0,0.14); border-color: rgba(143,212,0,0.35); color: #8fd400; }
        .ref-settings-swap-btn:active { background: rgba(143,212,0,0.3); }
        .ref-settings-matchup-bar { border-color: rgba(255,255,255,0.12); }

        /* Quick Game wizard — steps, tiles, code, CTA, the modal's top edge */
        .ref-gs-step.active .ref-gs-step-dot { background: #8fd400; box-shadow: 0 0 10px rgba(143,212,0,0.5); }
        .ref-gs-step.done .ref-gs-step-dot { background: rgba(143,212,0,0.4); }
        .ref-gs-step.active .ref-gs-step-label { color: #8fd400; }
        .ref-gs-sched-arrow { color: #8fd400; }
        .ref-gs-share-btn:active { background: rgba(143,212,0,0.2); }
        /* Saira, not Orbitron: the game code is ALPHANUMERIC (numerals-only law) */
        .ref-gs-code-value {
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-weight: 800;
            color: #8fd400; text-shadow: 0 0 12px rgba(143,212,0,0.4);
        }
        .ref-gs-btn-next {
            background: linear-gradient(180deg, #8fd400, #76b000); color: #0d1220;
            box-shadow: 0 4px 15px rgba(143,212,0,0.3);
        }
        .ref-premium { border-top-color: #8fd400; }
        .ref-gs-content .rgs-tile { border-color: rgba(255,255,255,0.12); }

        /* Rule tiles everywhere (wizard + phone settings): volt digits */
        .rgs-tile-val { color: #8fd400; }
        .rgs-tile-btn:active { background: rgba(143,212,0,0.3); }

        /* Phone settings tabs + watch-hand active: volt edge, not gold */
        .rset-tab.active {
            background: linear-gradient(180deg, rgba(143,212,0,0.14), rgba(143,212,0,0.04));
            border-color: rgba(143,212,0,0.4); border-bottom-color: #8fd400; color: #fff;
        }
        .ref-hand-btn.active { background: rgba(143,212,0,0.18); border-color: rgba(143,212,0,0.6); }

        /* Decision pages: CONFIRM is the primary → volt fill with ink text
           (danger variant keeps its red — higher specificity holds it). */
        .ref-decide-btn--confirm { background: linear-gradient(180deg, #8fd400, #76b000); color: #0d1220; }

        /* Field picker label, back-to-fields, and the carousel READY state:
           volt is the 'up next / go' language now. */
        .ref-field-pick-btn::before { color: rgba(255,255,255,0.6); }
        .ref-back-fields:hover, .ref-back-fields:active { color: #fff; border-color: #8fd400; }
        .gb-card.ready::before { background: #8fd400; }
        .gb-card.ready { border-color: rgba(143,212,0,0.42); background: linear-gradient(180deg, rgba(143,212,0,0.08), transparent); }
        .gb-card.ready .gb-st { color: #8fd400; }

        /* De-gold sweep 2b: the wizard modal paints its OWN top edge
           (.ref-gs-modal, not .ref-premium — found by asking the computed
           style, not the grep). Volt, both painters. */
        .ref-gs-modal { border-top-color: #8fd400; }

        /* ====================================================================
         * QUICK GAME WIZARD → FULL-BLEED BAND PAGE (Carlos, Aug 15 morning:
         * "quick game is still not full screen — need all of the real estate
         * so the font size is bigger"). Wrist layout only; phones keep the
         * centered modal. Type runs on clamp(vh) so it AUTO-SCALES with the
         * screen — the taller the panel, the bigger the words.
         * ==================================================================== */
        @media (orientation: landscape) and (max-height: 460px) {
            #gameCreationModal { padding: 0; align-items: stretch; justify-content: stretch; }
            #gameCreationModal .ref-gs-modal {
                width: 100vw; max-width: none;
                height: 100vh; height: 100dvh; max-height: none;
                margin: 0; border-radius: 0; border-left: 0; border-right: 0;
                /* Q333 GPU + the v185 scrim law: no 40px blur on the wrist */
                backdrop-filter: none; -webkit-backdrop-filter: none;
            }
            #gameCreationModal .ref-gs-header { padding: 8px 16px; }
            #gameCreationModal .ref-gs-steps { gap: 12px; }
            #gameCreationModal .ref-gs-step-label { font-size: clamp(12px, 4.5vh, 17px); }
            #gameCreationModal .ref-gs-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
            #gameCreationModal .ref-gs-matchup-title { font-size: clamp(18px, 7vh, 28px); }
            #gameCreationModal .ref-gs-matchup-card { min-height: clamp(72px, 26vh, 120px); }
            #gameCreationModal .ref-gs-matchup-label { font-size: clamp(12px, 4vh, 15px); }
            #gameCreationModal .ref-gs-matchup-name,
            #gameCreationModal .ref-gs-matchup-info { font-size: clamp(17px, 6.5vh, 26px); }
            #gameCreationModal .rgs-tile-label { font-size: clamp(12px, 4vh, 15px); }
            #gameCreationModal .rgs-tile-val { font-size: clamp(30px, 13vh, 52px); }
            #gameCreationModal .rgs-tile-btn { height: clamp(44px, 15vh, 58px); font-size: clamp(24px, 9vh, 32px); }
            #gameCreationModal .ref-gs-code-value {
                font-size: clamp(38px, 18vh, 68px); letter-spacing: 0.14em;
            }
            #gameCreationModal .ref-gs-footer { padding: 8px 16px 10px; gap: 10px; }
            #gameCreationModal .ref-gs-btn-back {
                min-height: clamp(46px, 15vh, 60px); font-size: clamp(14px, 5vh, 18px);
            }
            #gameCreationModal .ref-gs-btn-next {
                min-height: clamp(46px, 15vh, 60px); font-size: clamp(17px, 6.5vh, 24px);
            }
        }

        /* Wizard X = the band X (Carlos, Aug 15: "bigger and all white, like
           the other screens"). The old wrist block SHRANK it to 28px. */
        .ref-gs-close { color: #fff; }
        @media (orientation: landscape) and (max-height: 460px) {
            #gameCreationModal .ref-gs-close {
                width: 56px; height: 48px; border-radius: 4px;
                font-size: 30px; color: #fff;
                background: rgba(255,255,255,0.06);
                border: 1px solid rgba(255,255,255,0.22);
            }
        }
        /* ADD YOUR OWN TEAM '+' chip: volt, not amber */
        .ref-gs-custom-icon { background: rgba(143,212,0,0.15); border-color: rgba(143,212,0,0.4); color: #8fd400; }

        /* OPPONENT STEP: LOGOS OWN THE SCREEN (Carlos, Aug 15: "I can barely
           see logos because of all that empty space"). On the wrist the
           search and custom-team rows compress to slim strips and the grid
           takes everything left, with bigger cells. */
        @media (orientation: landscape) and (max-height: 460px) {
            #gameCreationModal .ref-gs-search-box { padding: 6px 12px; margin-bottom: 6px; }
            #gameCreationModal .ref-gs-search-input { font-size: 14px; }
            #gameCreationModal .ref-gs-custom-team { padding: 6px 12px; margin-bottom: 8px; }
            #gameCreationModal .ref-gs-custom-icon { width: 26px; height: 26px; font-size: 15px; }
            #gameCreationModal .ref-gs-custom-title { font-size: 13px; }
            /* the how-to hint is teaching text — the wrist has no room for
               school; the phone keeps it */
            #gameCreationModal .ref-gs-custom-hint { display: none; }
            #gameCreationModal .ref-gs-team-grid {
                grid-template-columns: repeat(auto-fill, minmax(clamp(72px, 24vh, 96px), 1fr));
                gap: 8px;
            }
            #gameCreationModal .ref-gs-team-cell { padding: 10px 4px; }
            /* GOING LIVE: volt, one slim strip (was a fat amber bar) */
            #gameCreationModal .ref-gs-live-badge {
                border-color: rgba(143,212,0,0.4); padding: 5px 12px;
            }
            #gameCreationModal .ref-gs-live-text { color: #8fd400; font-size: 12px; }
            #gameCreationModal .ref-gs-live-dot { background: #8fd400; }
        }
        /* GOING LIVE de-gold applies at every size */
        .ref-gs-live-badge { border-color: rgba(143,212,0,0.4); background: rgba(143,212,0,0.06); }
        .ref-gs-live-text { color: #8fd400; }
        .ref-gs-live-dot { background: #8fd400; box-shadow: 0 0 8px rgba(143,212,0,0.6); }
        /* Search + ADD YOUR OWN TEAM inline on the wrist (Carlos, Aug 15):
           side by side, one slim row — the custom-team card reads bigger and
           the logo grid gains a full row of space. */
        @media (orientation: landscape) and (max-height: 460px) {
            /* The view is a COLUMN flexbox, so inline-* on children is
               ignored — the row has to come from the parent: the opponent
               view becomes a wrapping row where every child spans full
               width except these two. */
            #ref-gs-view-opponent { flex-direction: row; flex-wrap: wrap; align-content: flex-start; }
            #ref-gs-view-opponent > * { flex: 0 0 100%; min-width: 0; }
            #gameCreationModal .ref-gs-search-box {
                flex: 0 0 56%; margin-right: 2%; box-sizing: border-box;
            }
            #gameCreationModal .ref-gs-custom-team {
                flex: 0 0 42%; display: flex; align-items: center;
                box-sizing: border-box; margin-bottom: 6px;
            }
            #gameCreationModal .ref-gs-custom-title { font-size: 15px; }
        }

        /* ====================================================================
         * CONSOLE ROUND 2 (Carlos, Aug 15 mid-morning — his own canon, his
         * own rewrite): scoring +6/+1/+2, possession = a BADGE not a dimmer,
         * hold-to-adjust score, and the three adjust surfaces rebuilt at
         * band readability.
         * ==================================================================== */

        /* 1. BOTH plates full brightness — the dim trick punished the team
           without the ball with an unreadable plate in sunlight. */
        .ref-team-row:not(.has-possession) { filter: none; opacity: 1; }

        /* 2. POSSESSION IS A THICK RED FRAME (Carlos, Sep 17 2026: "the football
           icon is so hard to tell who has possession"). The whole plate is the
           marker, so it reads at arm's length on a wrist and on a phone.
           ⛔ A red frame alone VANISHES on a red team (verified against the
              Chiefs' #E31837), so a hairline of white sits inside it: on any
              team colour one of the two lines is visible.
           ⛔ Two STATIC inset rings, no blur radius, no animation, no
              will-change: it paints once when possession changes. The white
              BALL badge it replaces carried two blurred shadows and a
              promoted layer — this costs less than what it removes.
           The badge markup stays in the page (tap target + a11y label) and
           is not rendered. */
        .ref-team-football { display: none !important; }
        .ref-team-row.has-possession {
            box-shadow: inset 0 0 0 5px var(--red, #ef4444),
                        inset 0 0 0 8px #ffffff;
        }
        @media (orientation: landscape) and (max-height: 460px) {
            /* The wrist plate is smaller: the white line goes to 3px so it
               still reads on a red team at arm's length. */
            .ref-team-row.has-possession {
                box-shadow: inset 0 0 0 5px var(--red, #ef4444),
                            inset 0 0 0 8px #ffffff;
            }
        }

        /* 3. The three ADJUST surfaces at band readability (score, timeouts,
           clock) — the 64px ghost buttons and ghost DONE were unreadable. */
        #scoreModal .gc-modal, #timeoutAdjustModal .gc-modal, #gameClockEditModal .gc-modal {
            background: #0b0e17; border-radius: 10px;
        }
        .ref-adj-value {
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-weight: 800; font-size: 76px; line-height: 1; color: #fff;
            margin-bottom: 14px;
        }
        .ref-adj-btn {
            width: 96px; height: 76px; border: 0; border-radius: 6px;
            background: linear-gradient(180deg, #232f38 0%, #121a20 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 6px rgba(0,0,0,0.4);
            color: #fff; font-size: 44px; font-weight: 700; line-height: 1;
            cursor: pointer; -webkit-tap-highlight-color: transparent;
        }
        .ref-adj-btn:active {
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.75); transform: translateY(1px);
            color: #8fd400; text-shadow: 0 0 10px rgba(143,212,0,0.5);
        }
        .ref-adj-done {
            width: 100%; min-height: 58px; border: 0; border-radius: 6px;
            background: linear-gradient(180deg, #8fd400, #76b000); color: #0d1220;
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-weight: 800; font-size: 22px; letter-spacing: 0.06em;
            cursor: pointer; -webkit-tap-highlight-color: transparent;
        }
        .ref-adj-done:active { filter: brightness(1.1); }
        .ref-adj-cancel {
            flex: 1; min-height: 58px; border: 0; border-radius: 6px;
            background: #1c2128; color: rgba(255,255,255,0.85);
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            font-weight: 800; font-size: 20px; letter-spacing: 0.05em;
            cursor: pointer; -webkit-tap-highlight-color: transparent;
        }
        .ref-adj-cancel:active { background: #2a3038; }
        /* Clock editor steppers grow to slab size; value white (numerals). */
        .ref-clock-edit-btn {
            width: 58px; height: 58px; border-radius: 6px; border: 0;
            background: linear-gradient(180deg, #232f38 0%, #121a20 100%);
            box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 3px 6px rgba(0,0,0,0.4);
            font-size: 32px;
        }
        .ref-clock-edit-btn:active {
            background: linear-gradient(180deg, #232f38 0%, #121a20 100%);
            box-shadow: inset 0 2px 6px rgba(0,0,0,0.75); color: #8fd400;
        }
        /* Saira for the digits — Orbitron's zero slashes at this size. */
        .ref-clock-edit-value {
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-weight: 800;
            color: #fff; font-size: 44px; min-width: 64px;
        }

        /* Adjust rows: [-] value [+] on ONE line, matching the clock editor
           (Carlos, Aug 15). And a wrist fit pass — the modal must live
           inside 384px. */
        .ref-adj-row { align-items: center; }
        .ref-adj-row .ref-adj-value {
            margin-bottom: 0; min-width: 120px; text-align: center;
            font-variant-numeric: tabular-nums;
        }
        @media (orientation: landscape) and (max-height: 460px) {
            #scoreModal .gc-modal, #timeoutAdjustModal .gc-modal, #gameClockEditModal .gc-modal {
                max-height: 96vh; overflow-y: auto;
            }
            #scoreModal .gc-modal-body, #timeoutAdjustModal .gc-modal-body { padding-top: 10px; padding-bottom: 12px; }
            .ref-adj-row .ref-adj-value { font-size: 56px; min-width: 96px; }
            .ref-adj-btn { width: 84px; height: 62px; font-size: 38px; }
            .ref-adj-done, .ref-adj-cancel { min-height: 50px; }
            .ref-score-header { margin-bottom: 4px; }
        }

/* OPTION B role chip (Sep 26 2026) - beside the Games button, same height, so
   the floating header cluster grows sideways over the clock plate and no game
   box moves. RUNNING is quiet; MIRROR is muted gold; SILENT is red. */
.ref-role-chip {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 40px; padding: 0 12px; margin-left: 6px;
    border-radius: 9px; border: 1px solid var(--border);
    background: var(--bg-card); color: var(--text-secondary);
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 0.72rem;
    letter-spacing: 1px; white-space: nowrap; cursor: pointer;   /* the words are uppercase already; the 's' of '28s' stays small */
}
.ref-role-chip[hidden] { display: none; }
.ref-role-chip--mirror { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-dim); }
.ref-role-chip--silent { color: var(--red); border-color: var(--red); background: var(--red-dim); }
@media (orientation: landscape) and (max-height: 460px) {
    /* The wrist (verifier D2, Sep 26 2026): at the header's full 41 px the chip
       reached 19 px into the game-clock box on CONTROL and sat over the score
       strip's clock on SCORING. It is a 20 px tag on the header's top edge,
       clear of every clock / score / down box on both panes (gated by
       scripts/test-referee-mirror-layout.js for every chip text). Its TAP area
       is still ~44 px: an invisible extension below it, on a band whose own
       game-box taps are refused anyway. */
    .header-bar--gearonly .ref-role-chip {
        position: relative; align-self: flex-start;
        height: 20px; min-height: 0; padding: 0 7px; margin-left: 5px;
        font-size: 10px; letter-spacing: 0.5px; border-radius: 6px;
    }
    .header-bar--gearonly .ref-role-chip--mirror::after {
        content: ''; position: absolute; left: -6px; right: -6px; top: -4px; bottom: -22px;
    }
}

/* A refused tap on a view-only band (Sep 26 2026): a ~400 ms edge on the box
   that was tapped, and nothing else. A class added and removed by a timer, not
   an animation, so audit-referee-motion has nothing to watch. */
.ref-refused-flash { box-shadow: inset 0 0 0 3px var(--gold); }

/* Held red 0 (Sep 26 2026): with the league's hold rule set, the play clock is
   red for the whole hold, on the controller and the mirror alike. */
.play-clock-container.pc-held { background: var(--red); }
.play-clock-container.pc-held .play-clock-display { color: var(--text-primary); }
.play-clock-container.pc-held .play-clock-sublabel { color: var(--text-primary); }

/* The neutral ask (Sep 26 2026, Run / Mirror): neither answer is the default,
   so both buttons wear the same face. */
.ref-decide--neutral .ref-decide-btn--confirm,
.ref-decide--neutral .ref-decide-btn--cancel { background: var(--bg-card); color: var(--text-primary); box-shadow: inset 0 0 0 2px var(--gold); }
html.ref-day .ref-decide--neutral .ref-decide-btn--confirm,
html.ref-day .ref-decide--neutral .ref-decide-btn--cancel { background: var(--bg-card); color: var(--text-primary); }

/* The second confirm's arm delay (Sep 26 2026): dimmed until it will listen. */
.ref-decide-btn--arming { opacity: 0.55; }

/* BOOT GUARD (Oct 4 2026, v244) — the answer to a tap made before the bundle
   has run (the inline guard in referee/app.html <head> creates these; nothing
   else does). The note is centred on the 1.4" face over the placeholder game
   face, takes no taps of its own, and flashes once per tap. The fail screen is
   one full-face button: tap anywhere to reload. Referee tokens only, so
   ref-day mode follows. Gate: node scripts/test-band-taps-before-load.js */
.ref-boot-note {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: var(--gc-z-toast);
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--gc-space-2) var(--gc-space-4);
    max-width: calc(100vw - 2 * var(--gc-space-3));
    background: var(--bg-card); color: var(--text-primary);
    border: 2px solid var(--gold); border-radius: var(--gc-radius-md);
    box-shadow: 0 0 0 4px var(--gold-dim);
    font-family: var(--gc-font-body); text-align: center;
    pointer-events: none;
}
.ref-boot-note-title { font-family: var(--gc-font-display); font-size: 18px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.ref-boot-note-sub { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
.ref-boot-note.is-tapped { animation: ref-boot-note-tap 180ms ease-out 1; }
@keyframes ref-boot-note-tap { from { transform: translate(-50%, -50%) scale(1.06); } to { transform: translate(-50%, -50%) scale(1); } }

.ref-boot-fail {
    position: fixed; inset: 0;
    z-index: var(--gc-z-toast);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gc-space-2);
    width: 100%; height: 100%; margin: 0; padding: var(--gc-space-4);
    background: var(--bg-primary); color: var(--text-primary);
    border: 0; font-family: var(--gc-font-body); text-align: center;
    cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.ref-boot-fail-title { font-family: var(--gc-font-display); font-size: 22px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ref-boot-fail-sub {
    padding: var(--gc-space-2) var(--gc-space-4); min-height: 44px; display: inline-flex; align-items: center;
    background: var(--gold); color: var(--gc-text-on-accent); border-radius: var(--gc-radius-md);
    font-size: 16px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}

/* ====================================================================
   "NEW HERE? CREATE AN ACCOUNT" — phones and browsers only (Oct 7 2026).
   Carlos: the wristbands "should just be: pin code, demo game, Quick Game."
   There is no native band flag (window.Capacitor is set on the iOS phone
   wrapper AND the Q333 APK — referee/modules/native-bridge.js:57), so the
   band is told apart by the shapes this file already lays out for it:
     · the wrist layout   (orientation: landscape) and (max-height: 460px)
       — the same query as SCRef.power.isWristLayout (power.js:61);
     · the Q333 portrait pager   (max-width: 350px)  (line ~203);
     · square watch faces: portrait, near-square, ≤500px wide.
   Gate: node scripts/test-referee-landing-pad-first.js
   ==================================================================== */
.ref-onboarding .ref-onb-footer-link { min-height: 44px; }
@media (orientation: landscape) and (max-height: 460px),
       (max-width: 350px),
       (orientation: portrait) and (min-aspect-ratio: 9/10) and (max-width: 500px) {
    .ref-onboarding .ref-onb-footer-link { display: none; }
}


        /* ── OFFICIALS HONOR THE RULES (Oct 9 2026, referee/modules/officials.js) ──
           The MIDFIELD key (split downs), PRO CLOCK on the clock label, the
           one-tap STOP CLOCK prompt, and the small line over a PUNT / MERCY ask.
           Every element is hidden until a league rule turns it on. */
        .ref-mid-btn {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 1px; padding: 0 12px; min-height: 44px; align-self: stretch;
            background: var(--bg-card-hover); border: 1px solid var(--border);
            border-radius: 12px; color: var(--text-secondary); cursor: pointer;
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-mid-btn[hidden] { display: none; }
        .ref-mid-btn.is-crossed { background: var(--gold); border-color: var(--gold-dark); color: var(--bg-primary); }
        .ref-mid-btn:active { filter: brightness(1.15); }
        .ref-mid-label { font-weight: 800; font-size: 16px; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; }
        .ref-mid-state { font-weight: 700; font-size: 12px; letter-spacing: 0.06em; line-height: 1; white-space: nowrap; }
        @media (orientation: landscape) and (max-height: 460px) {
            .ref-mid-btn { flex: 0 0 14%; width: 14%; height: 100%; padding: 0; }
            .ref-mid-label { font-size: 18px; }
        }
        .clock-label.is-pro { color: var(--gold); }
        .ref-stopclock-prompt {
            position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px));
            z-index: 900; min-height: 64px;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
            background: var(--red); color: var(--text-primary); border: none; border-radius: 14px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; cursor: pointer;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-stopclock-prompt[hidden] { display: none; }
        .ref-stopclock-prompt:active { filter: brightness(1.1); }
        .ref-stopclock-kicker { font-weight: 700; font-size: 12px; letter-spacing: 0.12em; opacity: 0.85; }
        .ref-stopclock-label { font-weight: 800; font-size: 30px; letter-spacing: 0.04em; line-height: 1; }
        .ref-ofr-ask { display: block; font-size: 0.45em; letter-spacing: 0.12em; color: var(--gold); margin-bottom: 0.3em; }

        /* Section X: the official's comms switch (settings › Game), and the down
           label keeping one line when the MIDFIELD key shares the band's row
           (.has-mid is set by officials.js, not :has() — the band's WebView
           version is not known to support it). */
        .ref-comms-btn {
            display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px;
            margin: 0 0 12px; padding: 0 16px; border-radius: 12px; cursor: pointer;
            background: var(--bg-card-hover); border: 2px solid var(--red); color: var(--text-primary);
            font-family: 'Saira Condensed', 'Rajdhani', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: 0.04em;
            -webkit-tap-highlight-color: transparent;
        }
        .ref-comms-btn[hidden] { display: none; }
        .ref-comms-btn.is-off { background: var(--red); border-color: var(--red); }
        .ref-down-row.has-mid { gap: 8px; padding-left: 12px; padding-right: 12px; }
        .ref-down-row.has-mid .ref-down-label { white-space: nowrap; font-size: 22px; min-width: 0; }
        .ref-down-row.has-mid .ref-int-btn,
        .ref-down-row.has-mid .ref-mid-btn { padding: 0 10px; flex-shrink: 0; }
        @media (orientation: landscape) and (max-height: 460px) {
            .ref-down-row.has-mid .ref-down-label { font-size: 22px; }
        }
        @media (max-width: 370px) {
            .ref-down-row.has-mid .ref-down-label { font-size: 19px; }
        }