/* ═══════════════════════════════════════════════════════════════
   DIAMOND CORE — Stadium Experience Design System
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── DARK MODE (Stadium Lights) — default ─── */
    --dark-bg-deep: #06080C;
    --dark-bg-surface: #0D1117;
    --dark-bg-elevated: #161B22;
    --dark-bg-card: #1C2128;
    --dark-bg-input: #21262D;
    --dark-text-primary: #F0F6FC;
    --dark-text-secondary: #8B949E;
    --dark-text-muted: #9CA3AF;
    --dark-text-disabled: #6B7280;
    --dark-border-subtle: rgba(255, 255, 255, 0.04);
    --dark-border-default: rgba(255, 255, 255, 0.08);
    --dark-border-strong: rgba(255, 255, 255, 0.16);
    --dark-accent-gold: #FFB800;
    --dark-accent-gold-hover: #FFCC33;
    --dark-accent-gold-muted: rgba(255, 184, 0, 0.15);
    --dark-accent-live: #00FF87;
    --dark-accent-live-muted: rgba(0, 255, 135, 0.15);
    --dark-accent-danger: #FF3B5C;
    --dark-accent-danger-muted: rgba(255, 59, 92, 0.15);
    --dark-accent-fc: #A855F7;
    --dark-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --dark-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --dark-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --dark-shadow-gold: 0 0 30px rgba(255, 184, 0, 0.3);

    /* ─── LIGHT MODE (Sunlit Field) ─── */
    --light-bg-deep: #F8F6F1;
    --light-bg-surface: #FFFFFF;
    --light-bg-elevated: #FFFFFF;
    --light-bg-card: #FFFFFF;
    --light-bg-input: #F8F6F1;
    --light-text-primary: #1A1A1A;
    --light-text-secondary: #5C5C5C;
    /* 🔴 Darkened from #8C8C8C, which measured 3.36:1 against white —
       below the 4.5:1 minimum for readable text. #757575 measures
       4.61:1 and passes. Found by the contrast test once it was able
       to switch between the two looks properly. */
    --light-text-muted: #757575;
    --light-text-disabled: #BEBEBE;
    --light-border-subtle: rgba(0, 0, 0, 0.06);
    --light-border-default: rgba(0, 0, 0, 0.1);
    --light-border-strong: rgba(0, 0, 0, 0.16);
    --light-accent-gold: #D49600;
    --light-accent-gold-hover: #B37F00;
    --light-accent-gold-muted: rgba(212, 150, 0, 0.12);
    --light-accent-live: #00A859;
    --light-accent-live-muted: rgba(0, 168, 89, 0.12);
    --light-accent-danger: #DC2626;
    --light-accent-danger-muted: rgba(220, 38, 38, 0.1);
    --light-accent-fc: #7C3AED;
    --light-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --light-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --light-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.12);
    --light-shadow-gold: 0 4px 20px rgba(212, 150, 0, 0.25);

    /* ─── SHARED ─── */
    --team-home: #1E40AF;
    --team-home-muted: rgba(30, 64, 175, 0.15);
    --team-away: #B91C1C;
    --team-away-muted: rgba(185, 28, 28, 0.15);
    --font-display: 'Bebas Neue', Impact, sans-serif;
    --font-body: 'DM Sans', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --touch-min: 44px;
    --max: 2400px;
    --gutter-mobile: .75rem;
    --gutter-tablet: 1.5rem;
    --gutter-desktop: 2rem;
    --space-1: .5rem;
    --space-2: .75rem;
    --space-3: 1rem;
    --space-4: 1.25rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    /* ─── ACTIVE THEME (default: dark) ─── */
    --bg-deep: var(--dark-bg-deep);
    --bg-surface: var(--dark-bg-surface);
    --bg-elevated: var(--dark-bg-elevated);
    --bg-card: var(--dark-bg-card);
    --bg-input: var(--dark-bg-input);
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-muted: var(--dark-text-muted);
    --text-disabled: var(--dark-text-disabled);
    --border-subtle: var(--dark-border-subtle);
    --border-default: var(--dark-border-default);
    --border-strong: var(--dark-border-strong);
    --accent-gold: var(--dark-accent-gold);
    --accent-gold-hover: var(--dark-accent-gold-hover);
    --accent-gold-muted: var(--dark-accent-gold-muted);
    --accent-live: var(--dark-accent-live);
    --accent-live-muted: var(--dark-accent-live-muted);
    --accent-danger: var(--dark-accent-danger);
    --accent-danger-muted: var(--dark-accent-danger-muted);
    --accent-fc: var(--dark-accent-fc);
    --accent-warn: #f97316;
    --shadow-card: var(--dark-shadow-md);
    --shadow-elevated: var(--dark-shadow-lg);
    --shadow-sm: var(--dark-shadow-sm);
    --shadow-md: var(--dark-shadow-md);
    --shadow-lg: var(--dark-shadow-lg);
    --shadow-gold: var(--dark-shadow-gold);

    /* ─── SHORTHAND ALIASES ─── */
    --radius-1: var(--radius-sm);
    --radius-2: var(--radius-lg);
    --shadow-1: var(--shadow-sm);
    --shadow-2: var(--shadow-lg);
    --border: 1px solid var(--border-default);
    --border-soft: 1px solid var(--border-subtle);
    --border-muted: var(--border-subtle);
    --focus: 0 0 0 3px var(--accent-gold-muted);
    --font-sans: var(--font-body);
    --scoring-out-color: #dc2626;
    --scoring-sub-color: #3b82f6;
}

/* Light mode override (applied to html for flash prevention, body for runtime) */
.light-mode-html,
.light-mode {
    --bg-deep: var(--light-bg-deep);
    --bg-surface: var(--light-bg-surface);
    --bg-elevated: var(--light-bg-elevated);
    --bg-card: var(--light-bg-card);
    --bg-input: var(--light-bg-input);
    --text-primary: var(--light-text-primary);
    --text-secondary: var(--light-text-secondary);
    --text-muted: var(--light-text-muted);
    --text-disabled: var(--light-text-disabled);
    --border-subtle: var(--light-border-subtle);
    --border-default: var(--light-border-default);
    --border-strong: var(--light-border-strong);
    --accent-gold: var(--light-accent-gold);
    --accent-gold-hover: var(--light-accent-gold-hover);
    --accent-gold-muted: var(--light-accent-gold-muted);
    --accent-live: var(--light-accent-live);
    --accent-live-muted: var(--light-accent-live-muted);
    --accent-danger: var(--light-accent-danger);
    --accent-danger-muted: var(--light-accent-danger-muted);
    --accent-fc: var(--light-accent-fc);
    --accent-warn: #ea580c;
    --shadow-card: var(--light-shadow-md);
    --shadow-elevated: var(--light-shadow-lg);
    --shadow-sm: var(--light-shadow-sm);
    --shadow-md: var(--light-shadow-md);
    --shadow-lg: var(--light-shadow-lg);
    --shadow-gold: var(--light-shadow-gold);
}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; background: var(--bg-deep); }

@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.15s; }
::view-transition-new(root) { animation-duration: 0.15s; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--text-primary);
    background: var(--bg-deep);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
}

a { color: var(--accent-gold); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--accent-gold-hover); }

/* ═══════════════════════════════════════════════════════════════
   SKIP LINK
   ═══════════════════════════════════════════════════════════════ */

.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--accent-gold);
    color: var(--bg-deep);
    padding: 8px 16px;
    z-index: 10000;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { top: 0; }

/* ═══════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════ */

.top-bar {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 60px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--gutter-mobile);
    box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
    .top-bar { padding: 0 var(--gutter-tablet); }
}
@media (min-width: 1280px) {
    .top-bar { padding: 0 var(--gutter-desktop); }
}

.top-bar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo-icon {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--accent-gold), #CC9300);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #06080C;
    font-size: 18px;
}
/* Per-deployment federation logo (replaces the gold diamond box when BRAND set) */
.brand-logo-img {
    height: 36px;
    width: auto;
    object-fit: contain;
    display: block;
}
.logo-text {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
    color: var(--text-primary);
}
.logo-subtitle {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Mobile menu toggle */
.menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.2rem;
}
.menu-toggle:hover { background: var(--bg-card); }
.menu-toggle:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-gold-muted); }
@media (min-width: 1024px) {
    .menu-toggle { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   THEME TOGGLE (Pill)
   ═══════════════════════════════════════════════════════════════ */

.theme-toggle {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-elevated);
    padding: 4px;
    border-radius: 30px;
    border: 1px solid var(--border-default);
}
.theme-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: 20px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    background: transparent;
    color: var(--text-muted);
}
.theme-btn.active {
    background: var(--accent-gold);
    color: #06080C;
    box-shadow: var(--shadow-gold);
}
.theme-btn i { width: 16px; height: 16px; }

/* ═══════════════════════════════════════════════════════════════
   USER MENU
   ═══════════════════════════════════════════════════════════════ */

.user-menu { position: relative; }

.user-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px 6px 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-body);
    color: var(--text-primary);
}
.user-trigger:hover { border-color: var(--accent-gold); }
.user-trigger:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px var(--accent-gold-muted);
}
.user-trigger:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bg-deep);
    font-weight: 600;
    font-size: 13px;
}
.user-info { text-align: left; }
.user-name { font-size: 13px; font-weight: 600; }
.user-role {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 240px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    z-index: 1001;
}
.user-dropdown[aria-hidden="true"] { display: none; }
.user-dropdown[aria-hidden="false"] {
    display: block;
    animation: dropdownSlide 0.15s ease-out;
}

@keyframes dropdownSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.user-dropdown-header {
    padding: 16px;
    border-bottom: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    gap: 12px;
}
.user-dropdown-header .user-avatar {
    width: 48px;
    height: 48px;
    font-size: 18px;
}
.user-dropdown-info .user-name { font-size: 15px; }
.user-dropdown-info .user-email {
    font-size: 12px;
    color: var(--text-secondary);
}

.user-dropdown-menu { padding: 8px; }

.user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: all 0.15s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--font-body);
}
.user-dropdown-item:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
}
.user-dropdown-item:focus {
    outline: none;
    background: var(--bg-elevated);
    color: var(--text-primary);
}
.user-dropdown-item:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: -2px;
}
.user-dropdown-item.danger { color: var(--accent-danger); }
.user-dropdown-item.danger:hover,
.user-dropdown-item.danger:focus {
    background: var(--accent-danger-muted);
    color: var(--accent-danger);
}
.user-dropdown-item i { width: 18px; height: 18px; }

.user-dropdown-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 8px 0;
}

/* Tenant selector in user menu */
.tenant-selector {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: var(--font-body);
    cursor: pointer;
    padding: 0;
    outline: none;
}
.tenant-selector:focus {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
    border-radius: 4px;
}
.tenant-selector option {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.sidebar {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 0;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: fixed;
    top: 0;
    left: -280px;
    width: 260px;
    height: 100vh;
    z-index: 100;
    transition: left 0.3s ease;
    display: flex;
    flex-direction: column;
}
.sidebar--open { left: 0; }

@media (min-width: 1024px) {
    .sidebar {
        position: sticky;
        top: 80px;
        left: auto;
        width: auto;
        height: auto;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        align-self: start;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
    }
    .sidebar--open { left: auto; }
}

/* Drawer footer: holds the theme toggle + language switcher on phones/tablets.
   Pinned to the bottom (the .nav above is flex:1). Hidden on desktop, where
   those controls live in the top bar. */
.sidebar__footer {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    flex-wrap: wrap;
    padding: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
}
@media (min-width: 1024px) {
    .sidebar__footer { display: none; }
}

/* When the drawer is open on mobile, lift it (and its dimming overlay) above
   the fixed cookie banner (z 9999) so the relocated theme/language controls in
   the drawer footer stay usable on first visit. Desktop never sets --open. */
@media (max-width: 1023px) {
    .sidebar--open { z-index: 10001; }
    .sidebar-overlay--visible { z-index: 10000; }
}

.sidebar__head {
    display: flex; align-items: center;
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    background: var(--bg-elevated);
}
.sidebar__head strong {
    display: block;
    font-weight: 800;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.nav {
    display: flex;
    flex-direction: column;
    padding: 8px;
    flex: 1;
    overflow-y: auto;
}

.nav-section-label {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-muted);
    padding: 16px 12px 8px;
    text-transform: uppercase;
}

.nav a, .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 14px;
    text-decoration: none;
    margin-bottom: 2px;
    transition: all 0.15s;
}
.nav a i, .nav-item i { width: 20px; height: 20px; }
.nav a:hover, .nav-item:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
    text-decoration: none;
}
.nav a[aria-current="page"], .nav-item.active {
    background: var(--accent-gold-muted);
    color: var(--accent-gold);
}

.nav__divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 4px 12px;
}

.nav-logout-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--accent-danger);
    font-weight: 500;
    font-size: 14px;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-body);
    transition: all 0.15s;
}
.nav-logout-btn:hover {
    background: var(--accent-danger-muted);
    text-decoration: none;
}
.nav-logout-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-gold-muted); }

/* Sidebar overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.sidebar-overlay--visible { display: block; opacity: 1; }
@media (min-width: 1024px) {
    .sidebar-overlay { display: none !important; }
}

/* Sidebar collapse toggle button */
/* Sidebar toggle button (inside sidebar header) */
.sidebar__toggle {
    display: none;
}
@media (min-width: 1024px) {
    .sidebar__toggle {
        display: flex; align-items: center; justify-content: center;
        width: 28px; height: 28px; border: none; background: transparent;
        color: var(--text-secondary); cursor: pointer; border-radius: 6px;
        transition: all 0.15s ease; flex-shrink: 0; margin-left: auto;
    }
    .sidebar__toggle:hover { background: var(--bg-card); color: var(--text-primary); }
}

/* Header sidebar toggle (stays visible when sidebar is collapsed) */
.header-sidebar-toggle {
    display: none;
}
@media (min-width: 1024px) {
    .header-sidebar-toggle {
        display: flex; align-items: center; justify-content: center;
        width: 36px; height: 36px; border: none; background: transparent;
        color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-sm);
        transition: color 0.15s, background 0.15s; flex-shrink: 0;
    }
    .header-sidebar-toggle:hover {
        color: var(--accent-gold); background: var(--bg-elevated);
    }
    /* Show collapse icon by default, expand icon when collapsed */
    .header-sidebar-toggle .sidebar-icon-expand { display: none; }
    .header-sidebar-toggle .sidebar-icon-collapse { display: block; }
    body.sidebar-is-collapsed .header-sidebar-toggle .sidebar-icon-expand { display: block; }
    body.sidebar-is-collapsed .header-sidebar-toggle .sidebar-icon-collapse { display: none; }
}

/* Collapsed sidebar: fully hidden (desktop only) */
@media (min-width: 1024px) {
    .sidebar--collapsed {
        width: 0; min-width: 0; overflow: hidden;
        border: none; box-shadow: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT SHELL
   ═══════════════════════════════════════════════════════════════ */

.shell {
    max-width: var(--max);
    margin: 0 auto;
    padding: var(--space-3) var(--gutter-mobile) var(--space-6);
    display: block;
    position: relative;
    width: 100%;
    flex: 1 0 auto;
}
@media (min-width: 768px) {
    .shell {
        padding-left: var(--gutter-tablet);
        padding-right: var(--gutter-tablet);
    }
}
@media (min-width: 1024px) {
    .shell {
        display: grid;
        grid-template-columns: 260px 1fr;
        gap: var(--space-4);
    }
    .shell--sidebar-collapsed {
        grid-template-columns: 0 1fr;
        column-gap: 0;
    }
}
@media (min-width: 1280px) {
    .shell {
        padding-left: var(--gutter-desktop);
        padding-right: var(--gutter-desktop);
    }
}

.main {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */

.site-footer {
    margin-top: auto;
    text-align: center;
    padding: var(--space-3);
    color: var(--text-muted);
    font-size: .85rem;
    font-family: var(--font-mono);
    background: var(--bg-surface);
    border-top: 1px solid var(--border-subtle);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER & BREADCRUMB
   ═══════════════════════════════════════════════════════════════ */

.pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
/* The page-head action row (share / compare / bracket buttons) is an inline
   flex row on several pages; let it wrap so it never forces a horizontal page
   scroll on phones (e.g. Standings was ~32px too wide at 390/430). */
.pagehead > div {
    flex-wrap: wrap;
}
.breadcrumb {
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent-gold); }
.breadcrumb-item { color: var(--text-secondary); text-decoration: none; }
.breadcrumb-item:hover { color: var(--accent-gold); }
.breadcrumb-item.current { color: var(--text-primary); font-weight: 500; }
.breadcrumb-separator { color: var(--text-muted); }

.h1 {
    font-family: var(--font-display);
    font-size: 36px;
    letter-spacing: 3px;
    margin: .35rem 0 0;
}
.subline {
    margin: .35rem 0 0;
    color: var(--text-secondary);
}
.page-title {
    font-family: var(--font-display);
    font-size: 36px;
    letter-spacing: 3px;
    margin-bottom: 8px;
}
.page-description {
    color: var(--text-secondary);
    font-size: 15px;
    max-width: 700px;
}

.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    min-height: var(--touch-min);
    color: var(--text-primary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
}
.btn:hover { filter: brightness(0.95); }
.btn:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-gold-muted); }

.btn--primary, .btn-primary {
    background: linear-gradient(135deg, var(--accent-gold), #CC9300);
    color: #06080C;
    border: none;
    box-shadow: var(--shadow-gold);
}
.btn--primary:hover, .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(255, 184, 0, 0.4);
}

.btn-secondary, .btn--ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-strong);
}
.btn-secondary:hover, .btn--ghost:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.btn-success {
    background: linear-gradient(135deg, var(--accent-live), #00CC6A);
    color: #06080C;
    border: none;
}

.btn--danger, .btn-danger {
    background: var(--accent-danger);
    color: #fff;
    border: 2px solid var(--accent-danger);
}
.btn--danger:hover, .btn-danger:hover {
    background: var(--accent-danger-hover, #c52020);
    border-color: var(--accent-danger-hover, #c52020);
    color: #fff;
}
.btn--danger:focus-visible, .btn-danger:focus-visible {
    outline: 2px solid var(--accent-danger);
    outline-offset: 2px;
}

.btn-sm { padding: 8px 14px; font-size: 12px; min-height: 36px; }
.btn-lg { padding: 16px 28px; font-size: 16px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; }

/* Icon button */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s;
}
.icon-btn:hover { background: var(--bg-card); color: var(--text-primary); }
.icon-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-gold-muted); }

/* ═══════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════ */

.card {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.card__body { padding: 24px; }
.card__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-weight: 800;
    letter-spacing: .2px;
}
.card__meta {
    color: var(--text-secondary);
    font-size: .92rem;
    margin-top: .35rem;
}
.card-title {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════
   KPI GRID
   ═══════════════════════════════════════════════════════════════ */

.grid-kpis {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-3);
}
.kpi-card { grid-column: span 4; }
.kpi {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.kpi__value {
    font-family: var(--font-mono);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -.02em;
    color: var(--accent-gold);
}
.kpi__label {
    color: var(--text-secondary);
    font-weight: 700;
    margin-top: .25rem;
}

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
.badge-gold, .badge--good {
    background: var(--accent-gold-muted);
    color: var(--accent-gold);
}
.badge-live {
    background: var(--accent-live-muted);
    color: var(--accent-live);
}
.badge-danger, .badge--danger {
    background: var(--accent-danger-muted);
    color: var(--accent-danger);
}
.badge-default {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
.badge--warn {
    background: rgba(249, 115, 22, 0.14);
    color: #f97316;
}

/* Player / Staff — the two kinds of person on the roster and directory
   pages. Two quiet colours, not an alarm: neither of them is a warning. */
.badge--player {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
.badge--staff {
    background: rgba(168, 85, 247, 0.16);
    color: var(--accent-fc);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.status-dot.live {
    background: var(--accent-live);
    animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .65rem;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 700;
}
.status-active {
    background: var(--accent-live-muted);
    color: var(--accent-live);
}
.status-inactive {
    background: var(--bg-elevated);
    color: var(--text-muted);
}
.status-protest {
    background: rgba(220,38,38,.14);
    color: var(--accent-danger);
    font-size: .75rem;
    font-weight: 600;
    padding: .15rem .45rem;
}

/* ═══════════════════════════════════════════════════════════════
   CHIP
   ═══════════════════════════════════════════════════════════════ */

.chip {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .6rem;
    border-radius: 999px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    font-size: .88rem;
}
.chip strong { font-weight: 750; }

/* ═══════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════ */

.form-group { margin-bottom: 16px; }
.form-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.form-input {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-input);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    min-height: var(--touch-min);
    transition: all 0.2s;
}
.form-input::placeholder { color: var(--text-muted); }
.form-input:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px var(--accent-gold-muted);
}
.form-input.error {
    border-color: var(--accent-danger);
    background: var(--accent-danger-muted);
}
.form-input:disabled { opacity: 0.6; cursor: not-allowed; }
.form-hint { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: 12px; color: var(--accent-danger); margin-top: 4px; }

/* Setup guide description boxes — gold-accent left border, elevated background */
.setup-guide {
    font-size: .88rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 1.5rem 0;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}
.setup-guide strong { color: var(--text-primary); }

/* Wizard error message — danger-accent left border */
.wizard-error {
    font-size: .92rem;
    line-height: 1.6;
    color: var(--text-primary);
    padding: 12px 16px;
    background: var(--accent-danger-muted, rgba(255,59,92,.08));
    border-left: 3px solid var(--accent-danger);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
    margin-bottom: var(--space-3, 1rem);
}

/* Expandable inline help — "Learn more" toggle + content */
.field-help-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-muted);
    cursor: pointer;
    margin-top: 4px;
    transition: color .2s;
    -webkit-user-select: none;
    user-select: none;
}
.field-help-toggle:hover { color: var(--accent-gold); }
.field-help-toggle__icon {
    width: 14px; height: 14px;
    transition: transform .2s ease;
}
.field-help-toggle.expanded .field-help-toggle__icon { transform: rotate(90deg); }
.field-help-content {
    display: none;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    padding: 8px 12px;
    margin-top: 6px;
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}
.field-help-content.expanded { display: block; }

/* Tooltip icon for form labels */
.label-tip {
    display: inline-block;
    width: 15px; height: 15px;
    line-height: 15px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default, var(--border));
    border-radius: 50%;
    cursor: help;
    margin-left: 4px;
    vertical-align: middle;
}

.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238B949E'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 40px;
}

/* Design-system form layout */
.dc-form { max-width: 640px; }
.dc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dc-form-grid--full { grid-column: 1 / -1; }
@media (max-width: 600px) { .dc-form-grid { grid-template-columns: 1fr; } }

.dc-form-section { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-subtle); }
.dc-form-section:last-of-type { border-bottom: none; margin-bottom: 0; }
.dc-form-section__title {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.dc-form-readonly {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 14px;
    min-height: var(--touch-min);
}
.dc-form-readonly svg { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }

.dc-file-upload {
    display: block;
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    text-align: center;
    background: var(--bg-input);
    cursor: pointer;
    transition: all 0.2s;
}
.dc-file-upload:hover,
.dc-file-upload.dragover { border-color: var(--accent-gold); background: var(--accent-gold-muted); }
.dc-file-upload__preview img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    object-fit: cover;
    margin-bottom: 0.5rem;
}
.dc-file-upload input[type="file"] { display: none; }

.dc-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
}

/* ═══════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════ */

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.table-container {
    overflow-x: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-subtle);
}

.table, .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.table th, .table td,
.data-table th, .data-table td {
    padding: 14px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.table th, .data-table th {
    background: var(--bg-elevated);
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    text-transform: uppercase;
    font-weight: 600;
    position: sticky;
    top: 0;
    z-index: 1;
}
.data-table th.sortable { cursor: pointer; }
.data-table th.sortable:hover { color: var(--accent-gold); }

.table tr:hover td, .data-table tbody tr:hover { background: var(--bg-elevated); }
.data-table tbody tr { transition: background 0.15s; }
.data-table tbody tr:last-child td { border-bottom: none; }

.table-actions { display: flex; gap: 8px; }
.table-action-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-muted);
    cursor: pointer; transition: all 0.2s;
}
.table-action-btn:hover {
    background: var(--accent-gold-muted);
    color: var(--accent-gold);
}
.table-action-btn.danger:hover {
    background: var(--accent-danger-muted);
    color: var(--accent-danger);
}

/* Sortable table headers */
.sortable {
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.sortable:hover { background: var(--accent-gold-muted); }
.sortable::after { content: ' ⇅'; color: var(--text-muted); font-size: .85rem; }
.sortable.sorted-asc,
.sortable.sorted-desc { font-weight: 700; color: var(--accent-gold); }
.sortable.sorted-asc::after { content: ' ▲'; color: var(--accent-gold); font-size: .85rem; }
.sortable.sorted-desc::after { content: ' ▼'; color: var(--accent-gold); font-size: .85rem; }

/* Sort hint */
.sort-hint {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--text-muted);
    font-style: italic;
}
.sort-hint__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    font-size: .65rem;
    font-style: normal;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}
@media print { .sort-hint { display: none !important; } }

/* Responsive column hiding */
@media (max-width: 768px) {
    .table-responsive th[data-col-priority="secondary"],
    .table-responsive td[data-col-priority="secondary"],
    .dc-table th[data-col-priority="secondary"],
    .dc-table td[data-col-priority="secondary"] { display: none; }
}
@media print {
    .table-responsive th[data-col-priority="secondary"],
    .table-responsive td[data-col-priority="secondary"],
    .dc-table th[data-col-priority="secondary"],
    .dc-table td[data-col-priority="secondary"] { display: table-cell !important; }
}

/* Team name link (standings, statistics) */
.standings-team-link { color: inherit; text-decoration: none; }
.standings-team-link:hover { color: var(--accent-gold); text-decoration: underline; }

/* Rankings — tenant cards */
.tenant-rank-card {
    background: var(--bg-surface);
    border: var(--border-soft);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--space-4);
}
.tenant-rank-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
}
.tenant-rank-card__title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.tenant-rank-card__count {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    padding: .2rem .55rem;
    border-radius: var(--radius-pill);
}
.tenant-rank-card__body { padding: 0; }
.tenant-rank-card__empty {
    padding: var(--space-5) var(--space-4);
    text-align: center;
    color: var(--text-muted);
    font-size: .9rem;
}
.tenant-rank-card__empty i {
    display: block;
    margin: 0 auto var(--space-2);
    width: 28px; height: 28px;
    opacity: .4;
}

/* Rankings — scope tabs */
.scope-tabs-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    flex-wrap: wrap;
}
.scope-tabs-row .phase-tabs { margin-bottom: 0; }
.scope-tip-icon {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    cursor: help;
}
.scope-tip-icon i { width: 14px; height: 14px; }

/* Rankings — medal styling for top 3 */
.rank-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    font-weight: 800;
    font-size: .78rem;
}
.rank-1 { background: #ffd700; color: #5a4800; }
.rank-2 { background: #c0c0c0; color: #444; }
.rank-3 { background: #cd7f32; color: #fff; }

/* Rankings — change column */
.chg-up { color: var(--accent-live); }
.chg-down { color: var(--accent-danger); }
.chg-neutral { color: var(--text-muted); }
.chg-new {
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Mobile scroll hint */
.table-scroll-hint { display: none; color: var(--text-muted); font-size: .8rem; font-style: italic; padding: var(--space-2) 0; }
@media (max-width: 768px) { .table-scroll-hint { display: block; } }
@media print { .table-scroll-hint { display: none !important; } }

/* ───────────────────────────────────────────────────────────────
   .dc-table — Reusable styled data table component
   Apply to any <table> for consistent styling across the app.
   Wrap in .dc-table-container for the card treatment.
   Use .dc-table--compact for stat-heavy / dense tables.

   Sorting:     Add .sortable + data-field="..." to <th> for
                clickable column sorting with ⇅/▲/▼ indicators.
                Use .dc-table-sort-hint below table for hint text.
   Pagination:  Use .dc-table-footer for the pagination bar.
                Contains .dc-table-counter, .dc-table-controls,
                .dc-table-pagesize, .dc-table-nav, .dc-table-nav__info.
   ─────────────────────────────────────────────────────────────── */

/* Card wrapper — rounded, bordered, shadow */
.dc-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Base table */
.dc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

/* Header cells */
.dc-table thead th {
    padding: 12px 16px;
    background: var(--bg-elevated);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-primary);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--border-default);
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Data cells */
.dc-table tbody td {
    padding: 12px 16px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.dc-table tbody tr:last-child td {
    border-bottom: none;
}

/* Row hover */
.dc-table tbody tr {
    transition: background 0.15s;
}
.dc-table tbody tr:hover {
    background: var(--bg-elevated);
}
.dc-table tbody tr.clickable-row { cursor: pointer; }

/* Numeric-center utility: add .dc-num to <th>/<td> for center-aligned numbers */
th.dc-num,
td.dc-num,
thead th.dc-num {
    text-align: center;
}

/* Text-left (default, but explicit for overrides) */
.dc-text {
    text-align: left;
}

/* Emphasis cell — gold accent for key stats (pts, totals) */
.dc-em {
    font-weight: 700;
    color: var(--accent-gold);
}

/* Positive / negative value coloring */
.dc-pos { color: var(--accent-live); }
.dc-neg { color: var(--accent-danger); }

/* ── Dense variant (game lists with many columns) ── */
.dc-table--dense {
    font-size: 0.9rem;
}
.dc-table--dense thead th {
    padding: 0.5rem 0.6rem;
}
.dc-table--dense tbody td {
    padding: 0.5rem 0.6rem;
}

/* ── Compact cell utility ── */
.dc-table th.compact,
.dc-table td.compact {
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.dc-table td.tournament-cell {
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dc-table td.venue-cell {
    max-width: 240px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Compact variant ── */
.dc-table--compact thead th {
    padding: 8px 10px;
    font-size: 10px;
}
.dc-table--compact tbody td {
    padding: 6px 10px;
    font-size: 0.82rem;
}

/* ── Career / summary row ── */
.dc-table tr.dc-table-career td {
    font-weight: 700;
    background: var(--bg-elevated);
    border-top: 2px solid var(--border-default);
}

/* ── Section divider row (e.g. counting stats → rate stats) ── */
.dc-table tr.dc-table-section-divider td {
    border-top: 2px solid var(--border-default);
}

/* ── Side-by-side comparison grid (Compare Teams page) ── */
.compare-team-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    gap: var(--space-2);
    align-items: end;
    margin-bottom: var(--space-3);
}
.compare-team-btn {
    align-self: end;
    margin-bottom: 1px;
}
@media (max-width: 768px) {
    .compare-team-row { grid-template-columns: 1fr; }
}
.dc-table tbody td.compare-better { color: var(--accent-live, #16a34a); font-weight: 600; }
.dc-table tbody td.compare-worse { color: var(--accent-danger, #dc2626); font-weight: 600; }
span.compare-better { color: var(--accent-live, #16a34a); }
span.compare-worse { color: var(--accent-danger, #dc2626); }
.compare-delta-col {
    font-weight: 700;
    border-left: 2px solid var(--border-default);
    border-right: 2px solid var(--border-default);
    background: var(--bg-elevated, rgba(255,255,255,0.03));
    white-space: nowrap;
}

.compare-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.compare-stats-row > .card {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}
.compare-stats-row > .card > .card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.compare-stats-row > .card > .card__body > .dc-table-container {
    flex: 1;
}
.compare-stats-row > .card > .card__body > .dc-table-footer {
    margin-top: auto;
}
@media (max-width: 768px) {
    .compare-stats-row { grid-template-columns: 1fr; }
}

/* ── Game status badge colors ── */
.status-scheduled   { background: rgba(255,184,0,.14); color: var(--accent-gold); }
.status-live,
.status-in_progress { background: rgba(5,150,105,.14); color: var(--accent-live); }
.status-final       { background: var(--accent-gold-muted); color: var(--text-secondary); }
.status-canceled    { background: rgba(220,38,38,.14); color: var(--accent-danger); }
.status-postponed   { background: rgba(220,38,38,.14); color: var(--accent-danger); }
.status-stale       { background: rgba(220,38,38,.14); color: var(--accent-danger); }

/* ── Striped variant (optional) ── */
.dc-table--striped tbody tr:nth-child(even) {
    background: var(--bg-elevated);
}
.dc-table--striped tbody tr:nth-child(even):hover {
    background: var(--border-subtle);
}

/* ── Stats variant (center-aligned numerics, first 3 cols left-aligned) ── */
.dc-table--stats thead th,
.dc-table--stats td { text-align: center; }
.dc-table--stats thead th:first-child,
.dc-table--stats thead th:nth-child(2),
.dc-table--stats thead th:nth-child(3) { text-align: left; }
.dc-table--stats td:first-child { text-align: center; color: var(--text-muted); }
.dc-table--stats td:nth-child(2) { text-align: left; font-weight: 600; }
.dc-table--stats td:nth-child(3) { text-align: left; }

/* ── Standings variant (center-aligned, compact padding) ── */
.dc-table--standings thead th,
.dc-table--standings td {
    text-align: center;
    padding: 0.45rem 0.6rem;
}
.dc-table--standings th {
    font-size: 0.82rem;
    letter-spacing: 0.03em;
}
.dc-table--standings td:nth-child(1) {
    font-weight: 700;
    color: var(--text-muted);
    width: 2rem;
}
.dc-table--standings thead th:nth-child(2) {
    text-align: left;
}
.dc-table--standings td:nth-child(2) {
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 140px;
}
.dc-table--standings .col-pts { font-weight: 700; color: var(--accent-gold); }
.dc-table--standings .col-chg { font-weight: 600; font-size: .82rem; }
@media (max-width: 600px) {
    .dc-table--standings { font-size: 0.82rem; }
    .dc-table--standings th,
    .dc-table--standings td { padding: 0.35rem 0.4rem; }
}

/* ── Sticky first two columns (for horizontal scrolling) ── */
.dc-table--sticky td:first-child,
.dc-table--sticky th:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg-surface); }
.dc-table--sticky td:nth-child(2),
.dc-table--sticky th:nth-child(2) { position: sticky; left: 40px; z-index: 2; background: var(--bg-surface); }
.dc-table--sticky thead th:first-child,
.dc-table--sticky thead th:nth-child(2) { z-index: 3; background: var(--bg-elevated); }
@media print {
    .dc-table--sticky td, .dc-table--sticky th { position: static !important; left: auto !important; }
}

/* ── Card-stack variant: <table> → labeled cards on phones (≤600px) ─────────
   For read tables with ≤~8 data columns and a title column (standings, games,
   rankings, players). Each <td> needs data-label="…"; the team/player cell
   gets class="dc-card-title". The <thead> is visually hidden (sr-only clip,
   NOT display:none) so table semantics + headers stay in the a11y tree.
   Above 600px the table renders normally — desktop/tablet are untouched.
   Pick this OR .dc-table--sticky, never both (see STYLE-GUIDE). */
@media (max-width: 600px) {
    .dc-table--cards { display: block; width: 100%; font-size: 0.9rem; }
    .dc-table--cards thead {
        position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .dc-table--cards tbody { display: block; }
    .dc-table--cards tbody tr {
        display: block;
        border: 1px solid var(--border-subtle);
        border-radius: var(--radius-md);
        background: var(--bg-surface);
        padding: var(--space-2);
        margin-bottom: var(--space-2);
    }
    /* Neutralize full-width row hover in card mode */
    .dc-table--cards tbody tr:hover { background: var(--bg-surface); }
    .dc-table--cards tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-3);
        padding: 4px 2px;
        border: none;
        white-space: normal;
        text-align: right;
    }
    .dc-table--cards tbody td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text-muted);
        text-align: left;
        margin-right: auto;
    }
    /* Title cell (team/player): full-width card heading, no label */
    .dc-table--cards tbody td.dc-card-title {
        display: block;
        width: auto;            /* escape per-column width clamps (e.g. a rank column's fixed width) */
        min-width: 0;
        text-align: left;
        font-weight: 700;
        font-size: 1rem;
        padding-bottom: var(--space-2);
        margin-bottom: var(--space-2);
        border-bottom: 1px solid var(--border-subtle);
    }
    .dc-table--cards tbody td.dc-card-title::before { content: none; }
    /* A cell with empty data-label renders value-only (no label row) */
    .dc-table--cards tbody td[data-label=""]::before { content: none; }
    /* Keep fixed-size inline badges (e.g. rank medals) circular in card rows —
       the flex row must not crush their width. */
    .dc-table--cards tbody td .rank-medal { flex-shrink: 0; }
    /* In card mode the desktop truncation clamp (max-width + nowrap + ellipsis)
       would shrink the whole card row and cut off tournament/venue names.
       Let them use the full card width and wrap so mobile shows the complete name. */
    .dc-table--cards td.tournament-cell,
    .dc-table--cards td.venue-cell {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
    /* Card tables don't scroll sideways — suppress the scroll hint that
       precedes them (the hint still shows for genuinely-wide sticky tables). */
    .table-scroll-hint:has(+ .table-wrap .dc-table--cards) { display: none; }

    /* ── Fit variant: keep a dense table within the phone width (no h-scroll) ──
       Better than cards for stats grids (Standings) where you compare many rows.
       Fixed layout: the marked name column (.dc-fit-name) wraps; every other
       column gets a narrow fixed width. Pair with data-col-priority="secondary"
       to drop non-essential columns on phones so the key stats always fit. */
    .dc-table--fit { table-layout: fixed; width: 100%; font-size: 0.82rem; }
    .dc-table--fit th,
    .dc-table--fit td { padding: 9px 3px; }
    .dc-table--fit th:first-child,
    .dc-table--fit td:first-child { padding-left: 8px; width: 1.7rem; }
    /* Numeric columns: fixed width wide enough for a 3-decimal value like
       "0,875" (comma-decimal locales, bold), with tight padding and slightly
       smaller digits so the value never overflows its cell. An overflow pushed
       the last column (PCT) past its highlighted background and forced an
       unwanted horizontal scroll on a table that is meant to always fit. */
    .dc-table--fit thead th:not(:first-child):not(.dc-fit-name),
    .dc-table--fit tbody td:not(:first-child):not(.dc-fit-name) {
        width: 3.1rem;
        padding-left: 2px;
        padding-right: 2px;
        font-size: 0.8rem;
    }
    .dc-table--fit .dc-fit-name {
        width: auto; text-align: left; line-height: 1.2;
        white-space: normal; word-break: break-word;
    }
}

/* Sticky tables: pin ONLY the first (rank) column so a wide stat table has
   room to scroll, instead of the team-name column eating the whole width. */
.dc-table--sticky.dc-table--rank-only td:nth-child(2),
.dc-table--sticky.dc-table--rank-only th:nth-child(2) {
    position: static; left: auto; z-index: auto;
}
/* The stat-explainer ::after dot needs a positioned cell. The rule above forces
   the 2nd column to position:static, which removed the gold dot from the first
   player column and orphaned the stacked dots to the page bottom. Restore
   relative positioning for explainable cells (does NOT re-pin the column). */
.dc-table--sticky.dc-table--rank-only td.stat-explainable:nth-child(2) {
    position: relative;
}
/* On phones, when that single pinned column is a wide label (a tournament or
   player name), cap and ellipsize it so the stats still get room to scroll. */
@media (max-width: 600px) {
    .dc-table--sticky.dc-table--rank-only td:first-child,
    .dc-table--sticky.dc-table--rank-only th:first-child {
        max-width: 7.5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

/* ── Sortable headers ── */
.dc-table th.sortable {
    cursor: pointer;
    user-select: none;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}
.dc-table th.sortable:hover { background: var(--accent-gold-muted); }
.dc-table th.sortable::after { content: ' ⇅'; color: var(--text-muted); font-size: .85rem; }
.dc-table th.sortable.sorted-asc,
.dc-table th.sortable.sorted-desc { font-weight: 700; color: var(--accent-gold); }
.dc-table th.sortable.sorted-asc::after { content: ' ▲'; color: var(--accent-gold); font-size: .85rem; }
.dc-table th.sortable.sorted-desc::after { content: ' ▼'; color: var(--accent-gold); font-size: .85rem; }
.sort-order-badge {
    display: inline-block;
    font-size: .6rem;
    vertical-align: super;
    margin-left: 2px;
    color: var(--accent-gold);
    font-weight: 700;
    line-height: 1;
}

/* Sort hint (below table) */
.dc-table-sort-hint {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: var(--space-3);
    font-size: .8rem;
    color: var(--text-muted);
    font-style: italic;
}
.dc-table-sort-hint__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    font-size: .65rem;
    font-style: normal;
    font-weight: 700;
    color: var(--text-muted);
    flex-shrink: 0;
}

/* ── Table footer: pagination bar ── */
.dc-table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-top: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Row counter ("Showing 1-25 of 100 items") */
.dc-table-counter {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Controls wrapper (page-size + navigation) */
.dc-table-controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Per-page selector */
.dc-table-pagesize {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.dc-table-pagesize label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}
.dc-table-pagesize select {
    padding: 0.4rem 1.8rem 0.4rem 0.6rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.85rem;
    min-width: 5rem;
    appearance: auto;
}

/* Page navigation */
.dc-table-nav {
    display: flex;
    gap: var(--space-1);
}
.dc-table-nav .btn { padding: 0.4rem 0.6rem; }
.dc-table-nav__info {
    padding: 0.4rem 0.8rem;
    color: var(--text-primary);
    font-size: 0.9rem;
}

/* ── Responsive column hiding (reuses existing pattern) ── */
@media (max-width: 768px) {
    .dc-table th[data-col-priority="secondary"],
    .dc-table td[data-col-priority="secondary"] { display: none; }
}
@media print {
    .dc-table th[data-col-priority="secondary"],
    .dc-table td[data-col-priority="secondary"] { display: table-cell !important; }
    .dc-table-container { box-shadow: none; border: 1px solid #ccc; }
    .dc-table-footer { display: none !important; }
    .dc-table-sort-hint { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   FILTERS
   ═══════════════════════════════════════════════════════════════ */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    border: 1px solid var(--border-subtle);
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.filter-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
}
.filter-select {
    padding: 8px 32px 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    min-width: 140px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238B949E'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px;
}
.filter-select:focus {
    outline: none;
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px var(--accent-gold-muted);
}

/* Filter panel (roster, etc.) */
.filter-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}
.filter-panel h2 {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: var(--space-3);
    text-transform: uppercase;
}
.filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
@media (min-width: 600px) {
    .filter-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .filter-grid { grid-template-columns: repeat(3, 1fr); }
}

.filter-group label {
    font-size: .88rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.filter-group select,
.filter-group input[type="checkbox"] {
    padding: .6rem .75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: .92rem;
}
.filter-group select:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-gold-muted);
    border-color: var(--accent-gold);
}
.filter-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

/* Checkbox wrapper */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
}
.checkbox-wrapper input[type="checkbox"] { width: auto; padding: 0; }
.checkbox-wrapper label {
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-primary);
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   GRID LAYOUTS
   ═══════════════════════════════════════════════════════════════ */

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }

@media (max-width: 900px) {
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.split {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE TILES
   ═══════════════════════════════════════════════════════════════ */

.module-icon {
    width: 48px;
    height: 48px;
    background: var(--accent-gold-muted);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold);
    margin-bottom: var(--space-3);
}
.module-icon i { width: 24px; height: 24px; }

.module-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.module-link:hover { text-decoration: none; }
.module-link .card__body { transition: background-color 0.15s ease; }
.module-link:hover .card__body { background: var(--bg-elevated); }
.module-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-gold-muted);
    border-radius: var(--radius-xl);
}

.module-disabled { opacity: 0.6; cursor: not-allowed; }
.module-disabled .card__body { background: var(--bg-elevated); }

/* ═══════════════════════════════════════════════════════════════
   MESSAGES
   ═══════════════════════════════════════════════════════════════ */

.messages .card { margin-bottom: var(--space-3); }

/* ═══════════════════════════════════════════════════════════════
   MISC UTILITY
   ═══════════════════════════════════════════════════════════════ */

.small { font-size: .9rem; color: var(--text-secondary); }
.pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.pill {
    padding: .28rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    font-size: .86rem;
    color: var(--text-secondary);
    font-weight: 700;
}
.footer-note {
    margin-top: var(--space-3);
    color: var(--text-secondary);
    font-size: .9rem;
}
.help-text {
    font-size: .88rem;
    color: var(--text-secondary);
    margin-top: var(--space-3);
    font-style: italic;
}
.empty-state {
    text-align: center;
    padding: var(--space-6);
    color: var(--text-secondary);
    font-style: italic;
}

/* User info section (home page) */
.user-info-section {
    margin-top: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.user-info-section p { margin: 0; color: var(--text-primary); }
.user-info-section strong { color: var(--accent-gold); }

/* Login prompt */
.login-prompt {
    text-align: center;
    padding: var(--space-6);
}
.login-prompt h2 { color: var(--text-primary); margin: 0 0 var(--space-3); }
.login-prompt p { color: var(--text-secondary); margin: 0 0 var(--space-4); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 390px) {
    .h1 { font-size: 24px; }
    .logo-text { font-size: 14px; }
    .pagehead { gap: var(--space-2); }
}

@media (min-width: 768px) {
    .h1 { font-size: 36px; }
    .split { grid-template-columns: 1fr; }
    .kpi-card { grid-column: span 6; }
}

@media (min-width: 1024px) {
    .split { grid-template-columns: 1.2fr .8fr; }
    .kpi-card { grid-column: span 4; }
}

/* ── Header: condense to an icon bar below desktop (≤1023px) ──────────────
   Root cause of the historical sitewide horizontal scroll on phones was the
   top bar's right cluster (theme pills + language + search + user identity)
   never collapsing. Below 1024px we hide the logo text, relocate the theme
   toggle and language switcher into the drawer footer, collapse the user menu
   to an avatar, and enforce 44px touch targets. Every rule is gated below
   1024px, so the desktop header is unchanged. */
@media (max-width: 1023px) {
    .top-bar-right { gap: 8px; }
    .top-bar-logo .logo-text,
    .top-bar-logo .logo-subtitle { display: none; }
    .top-bar .theme-toggle,
    .top-bar .lang-switcher { display: none; }
    .user-info,
    .user-trigger .user-chevron { display: none; }
    .user-trigger {
        padding: 0;
        width: var(--touch-min);
        height: var(--touch-min);
        justify-content: center;
    }
    /* 44px touch targets for the remaining header controls */
    .menu-toggle,
    .global-search-trigger,
    #notificationBell,
    #msgBell {
        width: var(--touch-min);
        height: var(--touch-min);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Landing page (homepage) has no sidebar drawer to hold the theme/language
   controls, so on mobile keep them in the bar but compact: theme icon-only,
   language flag-only. Overrides the relocation rules above. */
@media (max-width: 1023px) {
    body.page-landing .top-bar .theme-toggle { display: flex; }
    body.page-landing .top-bar .lang-switcher { display: flex; }
    body.page-landing .theme-btn { padding: 6px 8px; }
    body.page-landing .theme-btn__label { display: none; }
    body.page-landing .lang-trigger .lang-code,
    body.page-landing .lang-trigger .lang-chevron { display: none; }
    body.page-landing .top-bar-right { gap: 6px; }
}

/* Ensure clickable elements show pointer */
a, button, .nav a, .nav button, .icon-btn, .btn,
.module-link, .module-link *,
[role="link"], [role="button"],
a *, button * {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   ADDITIONAL COMPONENT STYLES (ported from legacy)
   ═══════════════════════════════════════════════════════════════ */

/* Table scroll shadow indicators */
.table-wrap {
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    background:
        linear-gradient(to right, var(--bg-surface) 30%, transparent),
        linear-gradient(to left, var(--bg-surface) 30%, transparent),
        linear-gradient(to right, rgba(0,0,0,.1), transparent 10px),
        linear-gradient(to left, rgba(0,0,0,.1), transparent 10px);
    background-repeat: no-repeat;
    background-size: 30px 100%, 30px 100%, 10px 100%, 10px 100%;
    background-position: left, right, left, right;
    background-attachment: local, local, scroll, scroll;
}

/* Scoreboard / Linescore */
.scoreboard { display: flex; flex-direction: column; gap: var(--space-3); }
.linescore { border-radius: var(--radius-2); overflow: hidden; border: var(--border-soft); }
.linescore__head {
    padding: var(--space-3) var(--space-4);
    display: flex; flex-wrap: wrap;
    align-items: center; justify-content: space-between;
    gap: var(--space-2);
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-surface));
}
.linescore__title { font-weight: 900; letter-spacing: -.01em; }
.small { font-size: .9rem; color: var(--text-muted); }
.pills { display: flex; gap: .5rem; flex-wrap: wrap; }
.pill {
    padding: .28rem .55rem;
    border-radius: 999px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    font-size: .86rem;
    color: var(--text-secondary);
    font-weight: 700;
}
.footer-note { margin-top: var(--space-3); color: var(--text-muted); font-size: .9rem; }
.split { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-3); }

/* ════════════════════════════════════════════════════════════
   GAME DETAIL PAGE
   ════════════════════════════════════════════════════════════ */

.page--game-detail { display: flex; flex-direction: column; gap: var(--space-4); }
.page--box-score { display: flex; flex-direction: column; gap: var(--space-4); }
.page--game-detail .inline-form { display: inline; }

/* Matchup */
.page--game-detail .matchup {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: var(--space-4); text-align: center;
}
.page--game-detail .matchup__team-name {
    font-size: 1.4rem; font-weight: 800; color: var(--text-primary); margin-bottom: var(--space-2);
}
.page--game-detail .matchup__team-label {
    font-size: .88rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-1);
}
.page--game-detail .matchup__score {
    font-size: 3rem; font-weight: 900; color: var(--accent-gold); line-height: 1;
}
.page--game-detail .matchup__vs { font-size: 1.2rem; font-weight: 700; color: var(--text-muted); }
.page--game-detail .matchup__center {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}

/* Game Timer */
.game-timer {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-3); padding: var(--space-3); margin-top: var(--space-2);
}
.game-timer.timer-hidden { display: none; }
.game-timer__controls {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3);
}
.game-timer__enable {
    display: flex; align-items: center; gap: var(--space-2);
    cursor: pointer; font-size: 0.9rem; color: var(--text-primary); font-weight: 600;
}
.game-timer__enable input[type="checkbox"] { width: 1.2rem; height: 1.2rem; accent-color: var(--accent-gold); }
.game-timer__inputs { display: flex; align-items: center; gap: var(--space-1); }
.game-timer__input {
    width: 88px; padding: 0.5rem; border: 2px solid var(--border-default);
    border-radius: var(--radius-1); background: var(--bg-elevated);
    color: var(--text-primary); font-size: 1rem; font-weight: 700; text-align: center;
}
.game-timer__input:focus { outline: none; border-color: var(--accent-gold); }
.game-timer__input:disabled { opacity: 0.5; cursor: not-allowed; }
.game-timer__colon { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
.game-timer__buttons { display: flex; gap: var(--space-2); }

/* Timer buttons */
.btn--timer-start {
    background: var(--accent-live); color: white; border: none;
    padding: 0.5rem 1rem; border-radius: var(--radius-1);
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
}
.btn--timer-start:hover { filter: brightness(1.1); }
.btn--timer-break {
    background: var(--accent-warn); color: white; border: none;
    padding: 0.5rem 1rem; border-radius: var(--radius-1);
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
}
.btn--timer-break:hover { filter: brightness(1.1); }
.btn--timer-resume {
    background: var(--accent-live); color: white; border: none;
    padding: 0.5rem 1rem; border-radius: var(--radius-1);
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
}
.btn--timer-resume:hover { filter: brightness(1.1); }
.btn--timer-reset {
    background: #f97316; color: white; border: none;
    padding: 0.5rem 1rem; border-radius: var(--radius-1);
    font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem;
}
.btn--timer-reset:hover { filter: brightness(1.1); }

/* Timer display */
.game-timer__display {
    display: flex; align-items: center; justify-content: center;
    min-width: 200px; padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-2); background: #0f172a;
    border: 3px solid var(--border-default); box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.game-timer__display #timer-value {
    font-family: var(--font-mono); font-size: 3.5rem; font-weight: 700; letter-spacing: 0.05em;
}
.game-timer__display.timer-neutral { border-color: #475569; }
.game-timer__display.timer-neutral #timer-value { color: #94a3b8; }
.game-timer__display.timer-green { border-color: #22c55e; box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); }
.game-timer__display.timer-green #timer-value { color: #22c55e; }
.game-timer__display.timer-yellow { border-color: #eab308; box-shadow: 0 0 20px rgba(234, 179, 8, 0.3); }
.game-timer__display.timer-yellow #timer-value { color: #eab308; }
.game-timer__display.timer-red {
    border-color: #ef4444; box-shadow: 0 0 20px rgba(239, 68, 68, 0.4);
    animation: timer-pulse 1s ease-in-out infinite;
}
.game-timer__display.timer-red #timer-value { color: #ef4444; }
@keyframes timer-pulse {
    0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.6); }
}
@media (max-width: 768px) {
    .game-timer__controls { flex-direction: column; }
    .game-timer__display { min-width: 160px; padding: var(--space-3) var(--space-4); }
    .game-timer__display #timer-value { font-size: 2.5rem; }
}

/* Scoring Sheet Controls — 3-column layout */
.scoring-sheet-controls {
    display: flex; align-items: center; gap: var(--space-4);
    margin-top: var(--space-3); flex-wrap: wrap;
}
.scoring-sheet-controls__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.scoring-sheet-controls__scorer { display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; white-space: nowrap; }
.scoring-sheet-controls__scorer-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.scoring-sheet-controls__scorer-name { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }

/* Compact timer (horizontal layout) */
.scoring-sheet-timer { display: flex; align-items: center; gap: var(--space-3); }
.scoring-sheet-timer__controls { display: flex; align-items: center; gap: var(--space-2); }
.scoring-sheet-timer__inputs { display: flex; align-items: center; gap: 2px; }
.scoring-sheet-timer__input {
    width: 88px; padding: 0.3rem; border: 2px solid var(--border-default);
    border-radius: var(--radius-1); background: var(--bg-elevated);
    color: var(--text-primary); font-size: 0.85rem; font-weight: 700; text-align: center;
}
.scoring-sheet-timer__input:focus { outline: none; border-color: var(--accent-gold); }
.scoring-sheet-timer__input:disabled { opacity: 0.5; cursor: not-allowed; }
.scoring-sheet-timer__colon { font-size: 1rem; font-weight: 700; color: var(--text-primary); }
.scoring-sheet-timer__buttons { display: flex; gap: var(--space-1); }

/* Compact timer display */
.scoring-sheet-timer__display {
    display: flex; align-items: center; justify-content: center;
    min-width: 120px; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-1); background: #0f172a;
    border: 2px solid var(--border-default); box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.scoring-sheet-timer__display #scoring-timer-value {
    font-family: var(--font-mono); font-size: 2rem; font-weight: 700; letter-spacing: 0.05em;
}

/* Timer color states (scoring page) */
.scoring-sheet-timer__display.timer-neutral { border-color: #475569; }
.scoring-sheet-timer__display.timer-neutral #scoring-timer-value { color: #94a3b8; }
.scoring-sheet-timer__display.timer-green { border-color: #22c55e; box-shadow: 0 0 12px rgba(34,197,94,0.25); }
.scoring-sheet-timer__display.timer-green #scoring-timer-value { color: #22c55e; }
.scoring-sheet-timer__display.timer-yellow { border-color: #eab308; box-shadow: 0 0 12px rgba(234,179,8,0.25); }
.scoring-sheet-timer__display.timer-yellow #scoring-timer-value { color: #eab308; }
.scoring-sheet-timer__display.timer-red { border-color: #ef4444; box-shadow: 0 0 12px rgba(239,68,68,0.35); animation: timer-pulse 1s ease-in-out infinite; }
.scoring-sheet-timer__display.timer-red #scoring-timer-value { color: #ef4444; }

/* Scoring sheet timer responsive */
@media (max-width: 768px) {
    .scoring-sheet-controls { flex-direction: column; align-items: stretch; }
    .scoring-sheet-controls__scorer { align-items: flex-start; margin-left: 0; }
    .scoring-sheet-timer { flex-wrap: wrap; justify-content: center; }
    .scoring-sheet-timer__display { min-width: 100px; padding: var(--space-2); }
    .scoring-sheet-timer__display #scoring-timer-value { font-size: 1.75rem; }
}
@media (max-width: 480px) {
    .scoring-sheet-timer { flex-direction: column; align-items: center; }
    .scoring-sheet-timer__controls { flex-direction: column; align-items: center; }
    .scoring-sheet-timer__display { min-width: 90px; }
    .scoring-sheet-timer__display #scoring-timer-value { font-size: 1.5rem; }
    .scoring-sheet-timer__input { width: 76px; font-size: 0.8rem; }
}

/* Auto-save status indicator */
.save-status {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    white-space: nowrap;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-1);
    transition: opacity 0.2s;
}
.save-status__icon { display: flex; align-items: center; }
.save-status__icon svg { width: 14px; height: 14px; }
.save-status--saving { color: var(--text-muted); }
.save-status--saving .save-status__spinner {
    animation: save-spin 1s linear infinite;
}
.save-status--saved { color: var(--accent-live, #22c55e); }
.save-status--error { color: var(--accent-danger, #ef4444); }

@keyframes save-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes dc-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Lineup Grid (game detail) */
.page--game-detail .lineup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.page--game-detail .lineup-table { width: 100%; border-collapse: collapse; }
.page--game-detail .lineup-table th {
    font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--text-muted); background: var(--bg-elevated);
    padding: .65rem .7rem; border-bottom: 1px solid var(--border-subtle); text-align: left;
}
.page--game-detail .lineup-table td {
    padding: .65rem .7rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-primary);
}
.page--game-detail .lineup-table tr:hover td { background: var(--bg-card); }
.page--game-detail .lineup-table-wrap { margin-top: var(--space-3); }
.page--game-detail .batting-order { font-weight: 700; color: var(--accent-gold); }
.page--game-detail .position-badge {
    display: inline-block; padding: .2rem .5rem; background: var(--accent-gold-muted);
    color: var(--accent-gold); border-radius: .3rem; font-size: .82rem; font-weight: 700;
}

/* Line Score Table (game detail + box score) */
.page--game-detail .line-score-table,
.page--box-score .line-score-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-3); }
.page--game-detail .line-score-table th,
.page--box-score .line-score-table th {
    text-align: center; font-family: var(--font-body); font-size: 12px; font-weight: 600;
    letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--text-primary); padding: .5rem .4rem; border-bottom: 2px solid var(--border-subtle);
}
.page--game-detail .line-score-table th:first-child,
.page--box-score .line-score-table th:first-child { text-align: left; }
.page--game-detail .line-score-table td,
.page--box-score .line-score-table td {
    text-align: center; padding: .65rem .4rem;
    border-bottom: 1px solid var(--border-subtle); color: var(--text-primary);
}
.page--game-detail .line-score-table td:first-child,
.page--box-score .line-score-table td:first-child { text-align: left; font-weight: 700; color: var(--accent-gold); }
.page--game-detail .line-score-table td.total,
.page--box-score .line-score-table td.total { font-weight: 700; color: var(--accent-gold); border-left: 2px solid var(--border-subtle); }
.page--game-detail .line-score-table input[type="number"],
.page--box-score .line-score-table input[type="number"] {
    width: 60px; padding: .3rem; border: var(--border); border-radius: .3rem;
    text-align: center; font-size: .92rem; background: var(--bg-surface); color: var(--text-primary);
    display: block; margin: 0 auto;
}
.page--game-detail .line-score-table input[type="number"]:focus,
.page--box-score .line-score-table input[type="number"]:focus { outline: none; box-shadow: var(--focus); }

/* Pitcher Decision Badges */
.pitch-decision { font-size: .8rem; font-weight: 700; margin-left: .25rem; }
.pitch-decision--w { color: var(--green-600, #16a34a); }
.pitch-decision--l { color: var(--red-600, #dc2626); }
.pitch-decision--s { color: var(--blue-600, #2563eb); }
.pitch-decision--h { color: var(--amber-600, #d97706); }
.pitch-decision--bs { color: var(--purple-600, #9333ea); }

/* Line Score Form */
.page--game-detail .line-score-form,
.page--box-score .line-score-form { margin-top: var(--space-3); }
.page--game-detail .line-score-readonly,
.page--box-score .line-score-readonly { margin-top: var(--space-3); }
.page--game-detail .line-score-actions,
.page--box-score .line-score-actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.page--game-detail .add-inning-form,
.page--box-score .add-inning-form { margin-top: var(--space-2); }
/* Not-played inning cells */
.line-score-table td.not-played,
.line-score-compact td.not-played { color: var(--text-disabled); font-style: italic; opacity: 0.6; }

/* Notice Boxes */
.page--game-detail .notice-box,
.page--box-score .notice-box {
    background: var(--bg-elevated); padding: var(--space-3);
    border-radius: var(--radius-1); font-size: .92rem;
    color: var(--text-secondary); margin-top: var(--space-3);
}
.page--game-detail .notice-box.warning,
.page--box-score .notice-box.warning { background: rgba(249,115,22,.14); color: var(--accent-warn); }

/* Venue Info */
.page--game-detail .venue-info {
    margin-top: var(--space-3); margin-bottom: var(--space-3);
    padding: var(--space-3); background: var(--bg-elevated); border-radius: var(--radius-1);
}
.page--game-detail .venue-info p { margin: .3rem 0; font-size: .92rem; color: var(--text-primary); }
.page--game-detail .venue-info strong { color: var(--accent-gold); }
.page--game-detail #map { height: 600px; border-radius: var(--radius-1); border: var(--border); }

/* Empty State */
.page--game-detail .empty-state,
.page--box-score .empty-state { text-align: center; padding: var(--space-6); color: var(--text-muted); font-style: italic; }
.empty-state { text-align: center; padding: var(--space-6); color: var(--text-muted); font-style: italic; }

/* Responsive game detail */
@media (max-width: 768px) {
    .page--game-detail .matchup { grid-template-columns: 1fr; gap: var(--space-2); }
    .page--game-detail .matchup__vs { transform: rotate(90deg); }
    .page--game-detail .lineup-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   FILTER PANEL & ROSTER STYLES
   ════════════════════════════════════════════════════════════ */

.filter-panel {
    background: var(--bg-surface); border: var(--border-soft);
    border-radius: var(--radius-2); box-shadow: var(--shadow-1);
    padding: var(--space-4); margin-bottom: var(--space-4);
    overflow: hidden;
}
.filter-panel h2 { font-size: 1.2rem; font-weight: 800; color: var(--text-primary); margin-bottom: var(--space-3); }
.filter-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-bottom: var(--space-3); }
@media (min-width: 600px) { .filter-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .filter-grid { grid-template-columns: repeat(3, 1fr); } }
.filter-group { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.filter-group label {
    font-size: .88rem; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .05em;
}
.filter-group select,
.filter-group input[type="text"],
.filter-group input[type="checkbox"] {
    padding: .6rem .75rem; border: var(--border); border-radius: var(--radius-1);
    background: var(--bg-surface); color: var(--text-primary); font-size: .92rem;
    width: 100%; box-sizing: border-box;
}
.filter-group select:focus { outline: none; box-shadow: var(--focus); }
.checkbox-wrapper { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.checkbox-wrapper input[type="checkbox"] { width: auto; padding: 0; }
.checkbox-wrapper label {
    font-weight: normal; text-transform: none; letter-spacing: normal;
    color: var(--text-primary); cursor: pointer;
}
.filter-panel__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0; }
.filter-panel__title { display: flex; align-items: center; gap: var(--space-2); }
.filter-panel__title h2 { margin: 0; }
.filter-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4rem; height: 1.4rem; padding: 0 .4rem;
    border-radius: 999px; background: var(--accent-gold); color: #fff;
    font-size: .75rem; font-weight: 700;
}
.filter-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
.filter-actions .btn { display: inline-flex; align-items: center; justify-content: center; }
.help-text { font-size: .88rem; color: var(--text-muted); margin-top: var(--space-3); font-style: italic; }

/* Active Filter Pills */
.dc-filter-pills {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    border-top: 1px solid var(--border-subtle); padding-top: var(--space-3);
    margin-top: var(--space-2);
}
.dc-filter-pill {
    display: inline-flex; align-items: center; gap: .35rem;
    background: var(--bg-elevated); border: var(--border-soft);
    border-radius: 999px; padding: .25rem .75rem; font-size: .82rem;
    line-height: 1.3; max-width: 280px;
}
.dc-filter-pill__label {
    font-weight: 700; text-transform: uppercase; font-size: .72rem;
    letter-spacing: .04em; color: var(--text-secondary); white-space: nowrap;
}
.dc-filter-pill__value {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 140px; color: var(--text-primary);
}
.dc-filter-pill__remove {
    background: none; border: none; cursor: pointer; padding: 0 0 0 .2rem;
    color: var(--text-muted); font-size: .9rem; line-height: 1;
    transition: color .15s ease;
}
.dc-filter-pill__remove:hover { color: var(--accent-danger); }
.dc-filter-pills__clear {
    font-size: .82rem; color: var(--accent-gold); text-decoration: none;
    white-space: nowrap; margin-left: var(--space-1);
}
.dc-filter-pills__clear:hover { text-decoration: underline; }

/* Status checkbox group (used by unified filter panel) */
.status-checkboxes {
    display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: .5rem;
}
.status-checkboxes label {
    display: flex; align-items: center; gap: .5rem;
    font-weight: normal; cursor: pointer; color: var(--text-primary);
    text-transform: none; letter-spacing: normal; font-size: .92rem;
}

/* 🔴 A CHECKBOX IS NEVER FULL WIDTH, AND NEVER PADDED.
   `.filter-group select, input[type="text"], input[type="checkbox"]` above
   hands every control `width: 100%`, a border and a text-input's padding. A
   select and a text box want all three; a checkbox wants none of them.
   Desktop Chrome quietly ignores width and padding on a checkbox, so nothing
   ever showed there. Safari on iOS does not ignore them — Tony, iPhone 13,
   2026-08-31: giant rounded squares sitting on top of their own words on
   /games/, /lineup/, /scoring/ and /game-scores/.
   Reset here, after the rule that did it, so both copies of it are covered.
   NOT REPRODUCED on this machine: the browser here would not give a real
   phone-sized viewport and there is no iPhone to test on. What is certain is
   that a checkbox has no business carrying a text box's width and padding. */
.filter-group input[type="checkbox"],
.status-checkboxes input[type="checkbox"] {
    width: auto;
    padding: 0;
    flex: none;
}

/* Inherited Filter Pills */
.filter-inherited {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
    background: var(--bg-elevated); border-left: 4px solid var(--accent-gold);
    border-radius: var(--radius-1); padding: .65rem 1rem; margin-bottom: var(--space-3);
    font-size: .85rem; color: var(--text-primary);
}
.filter-inherited__label { font-weight: 700; white-space: nowrap; }
.filter-inherited__pill {
    display: inline-flex; align-items: center; gap: .25rem;
    background: var(--bg-surface); border: var(--border-soft); border-radius: 999px;
    padding: .2rem .7rem; font-size: .82rem;
}
.filter-inherited__pill em { font-style: italic; color: var(--text-muted); }
.filter-inherited__clear {
    font-size: .82rem; color: var(--accent-gold); text-decoration: none;
    margin-left: auto; white-space: nowrap;
}
.filter-inherited__clear:hover { text-decoration: underline; }

/* Unified filter: date + number inputs share select styling */
.filter-group input[type="date"],
.filter-group input[type="number"] {
    padding: .6rem .75rem; border: var(--border); border-radius: var(--radius-1);
    background: var(--bg-surface); color: var(--text-primary); font-size: .92rem;
    width: 100%; box-sizing: border-box;
}
.filter-group input[type="date"]:focus,
.filter-group input[type="number"]:focus { outline: none; box-shadow: var(--focus); }

/* Tom Select height-no-grow: prevent the control from growing taller than
   a standard single-line select.  The wrapper itself must not stretch
   the grid row. */
.filter-group .ts-wrapper { min-height: 0; }
.filter-group .ts-wrapper .ts-control { min-height: 2.6rem; max-height: 2.6rem; overflow: hidden; }

/* Filter Toast */
.dc-toast {
    position: fixed; top: 1rem; left: 50%; transform: translateX(-50%) translateY(-120%);
    z-index: 9999; background: var(--bg-elevated); border: var(--border-soft);
    border-left: 4px solid var(--accent-gold); border-radius: var(--radius-1);
    padding: .65rem 1.25rem; font-size: .88rem; color: var(--text-primary);
    box-shadow: var(--shadow-lg, 0 4px 12px rgba(0,0,0,.15));
    opacity: 0; transition: transform .3s ease, opacity .3s ease;
    pointer-events: none;
}
.dc-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.dc-toast--hiding { opacity: 0; transform: translateX(-50%) translateY(-120%); }

@media print { .dc-filter-pills, .dc-toast { display: none !important; } }

/* ════════════════════════════════════════════════════════════
   LINEUP MANAGEMENT v2
   ════════════════════════════════════════════════════════════ */

.page--lineup-manage { display: flex; flex-direction: column; gap: var(--space-4); }

/* Mobile Tab Navigation */
.lineup-tabs {
    display: flex; gap: 0; background: var(--bg-surface);
    border-radius: var(--radius-1); padding: 4px; border: var(--border-soft);
}
.lineup-tab {
    flex: 1; padding: .75rem 1rem; text-align: center;
    font-weight: 700; font-size: .92rem; border: none;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    border-radius: calc(var(--radius-1) - 2px); transition: all 0.15s ease;
}
.lineup-tab:hover { color: var(--text-primary); background: var(--bg-elevated); }
.lineup-tab.active { background: var(--accent-gold); color: #fff; }
@media (min-width: 900px) { .lineup-tabs { display: none; } }

/* Side-by-side columns (desktop) */
.lineup-columns { display: flex; flex-direction: column; gap: var(--space-4); }
@media (min-width: 900px) { .lineup-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } }

/* Team Panel */
.lineup-panel {
    background: var(--bg-surface); border: var(--border-soft);
    border-radius: var(--radius-2); box-shadow: var(--shadow-1); overflow: hidden;
}
.lineup-panel.hidden-mobile { display: none; }
@media (min-width: 900px) { .lineup-panel.hidden-mobile { display: block; } }

/* Team Header v2 */
.lineup-team-header-v2 {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(180deg, var(--bg-elevated), var(--bg-surface));
    border-bottom: var(--border-soft);
}
.lineup-team-title { display: flex; align-items: center; gap: var(--space-2); }
.lineup-team-title__flag { font-size: 1.4rem; line-height: 1; }
.lineup-team-title__name { font-weight: 800; font-size: 1.1rem; color: var(--text-primary); }
.lineup-team-title__label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; padding: .2rem .5rem; border-radius: 4px; margin-left: var(--space-1);
}
.lineup-team-title__label--away { background: var(--text-secondary); color: var(--bg-surface); }
.lineup-team-title__label--home { background: var(--accent-live); color: #fff; }

/* Validation Badge */
.lineup-validation-badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 700;
}
.lineup-validation-badge--valid { background: rgba(5, 150, 105, .14); color: var(--accent-live); }
.lineup-validation-badge--invalid { background: rgba(220, 38, 38, .14); color: var(--accent-danger); }

/* Batting Order Table v2 */
.lineup-table-v2 { width: 100%; border-collapse: collapse; font-size: .88rem; }
.lineup-table-v2 th,
.lineup-table-v2 td { padding: .65rem .75rem; text-align: left; border-bottom: 1px solid var(--border-subtle); }
.lineup-table-v2 th {
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted); background: var(--bg-elevated);
}
.lineup-table-v2 tbody tr { cursor: default; transition: background 0.1s ease; }
@media (min-width: 900px) {
    .lineup-table-v2 tbody tr.lineup-row-clickable { cursor: pointer; }
    .lineup-table-v2 tbody tr.lineup-row-clickable:hover { background: var(--bg-card); }
}
.lineup-row--inactive { opacity: 0.55; }
.lineup-row--inactive .lineup-player-name { text-decoration: line-through; }
.lineup-row--replaced { background: transparent; }
.lineup-row--replaced td { padding-top: 0; padding-bottom: var(--space-1); border-top: none; }
.lineup-player-name--replaced { color: var(--text-secondary); text-decoration: line-through; font-size: 0.85em; }
.substitution-inning { font-size: 0.75em; color: var(--text-secondary); margin-left: var(--space-1); font-weight: 500; }
.position-badge-v2--muted { background: var(--bg-elevated); color: var(--text-secondary); }
.lineup-cell--batting-order { vertical-align: top; }

/* Batting order badge */
.batting-order-badge-v2 {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; background: var(--accent-gold-muted);
    border-radius: 6px; font-weight: 800; font-size: .88rem; color: var(--accent-gold);
}
.lineup-player-name { font-weight: 600; color: var(--text-primary); }
.lineup-player-number { color: var(--text-muted); font-size: .82rem; margin-left: .35rem; }

/* Position badge v2 */
.position-badge-v2 {
    display: inline-block; padding: .2rem .45rem; background: var(--accent-gold);
    color: #fff; border-radius: 4px; font-weight: 700; font-size: .75rem; text-transform: uppercase;
}

/* Status badge v2 */
.status-badge-v2 { display: inline-block; padding: .18rem .45rem; border-radius: 4px; font-size: .72rem; font-weight: 600; }
.status-badge-v2--active { background: rgba(5, 150, 105, .15); color: var(--accent-live); }
.status-badge-v2--out { background: rgba(220, 38, 38, .15); color: var(--accent-danger); }

/* Pitcher Section */
.pitcher-section {
    margin: var(--space-3); padding: var(--space-3);
    background: var(--bg-elevated); border-left: 4px solid var(--accent-gold);
    border-radius: 0 var(--radius-1) var(--radius-1) 0;
}
.pitcher-section__label {
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--space-1);
}
.pitcher-section__content { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.pitcher-section__name { font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.pitcher-section__number { color: var(--text-secondary); font-size: .9rem; }

/* Team staff in the dugout — same shape as the pitcher block beside it, in a
   quieter colour, because it is a record of who was there rather than a
   control the scorer uses every half-inning. */
.staff-section {
    margin: var(--space-3); padding: var(--space-3);
    background: var(--bg-elevated); border-left: 4px solid var(--accent-fc);
    border-radius: 0 var(--radius-1) var(--radius-1) 0;
}
.staff-section__label {
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--space-1);
}
.staff-section__list { display: flex; flex-direction: column; gap: 2px; }
.staff-section__entry {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 2px 0; font-size: .85rem;
}
.staff-section__name { font-weight: 600; color: var(--text-primary); }
.staff-section__number { color: var(--text-muted); font-size: .8rem; }
.staff-section__role {
    font-size: .65rem; text-transform: uppercase; padding: 1px 6px;
    border-radius: var(--radius-1); background: rgba(168, 85, 247, .16);
    color: var(--accent-fc); font-weight: 700;
}
.staff-section__remove { margin-left: auto; }
.staff-section__empty { color: var(--text-muted); font-size: .85rem; margin: 0; }
.staff-section__actions {
    display: flex; gap: var(--space-2); margin-top: var(--space-2);
    flex-wrap: wrap;
}

/* Somebody thrown out of the game. Red down the side, because it is the one
   block on this page that records a punishment. */
.expulsion-section {
    margin: var(--space-3); padding: var(--space-3);
    background: var(--bg-elevated); border-left: 4px solid var(--accent-danger);
    border-radius: 0 var(--radius-1) var(--radius-1) 0;
}
.expulsion-section__label {
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--accent-danger); margin-bottom: var(--space-1);
}
.expulsion-section__list { display: flex; flex-direction: column; gap: 2px; }
.expulsion-section__entry {
    display: flex; align-items: center; gap: var(--space-2);
    padding: 2px 0; font-size: .85rem; flex-wrap: wrap;
}
.expulsion-section__name { font-weight: 700; color: var(--text-primary); }
.expulsion-section__inning { color: var(--text-muted); font-size: .8rem; }
.expulsion-section__reason { color: var(--text-secondary); font-size: .82rem; }
.expulsion-section__undo { margin-left: auto; }
.expulsion-section__empty { color: var(--text-muted); font-size: .85rem; margin: 0; }
.expulsion-section__actions {
    display: flex; gap: var(--space-2); margin-top: var(--space-2);
    flex-wrap: wrap;
}

/* Pitcher History */
.pitcher-history { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--border-subtle); }
.pitcher-history__label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: var(--space-1); }
.pitcher-history__entry { display: flex; align-items: center; gap: var(--space-2); padding: 2px 0; font-size: 0.85rem; }
.pitcher-history__entry--starter .pitcher-history__name { font-weight: 700; }
.pitcher-history__number { color: var(--text-muted); font-size: 0.8rem; }
.pitcher-history__badge { font-size: 0.65rem; text-transform: uppercase; padding: 1px 6px; border-radius: var(--radius-1); background: var(--accent-gold); color: #fff; font-weight: 700; }

/* Export Dropdown */
.export-dropdown { position: relative; }
.export-dropdown__menu {
    position: absolute; top: 100%; right: 0; z-index: 1001;
    min-width: 180px; padding: var(--space-1) 0;
    background: var(--bg-card); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-2); box-shadow: var(--shadow-lg);
}
.export-dropdown__menu[aria-hidden="true"] { display: none; }
.export-dropdown__menu[aria-hidden="false"] { display: block; }
.export-dropdown__item {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); color: var(--text-primary);
    text-decoration: none; font-size: 0.85rem; transition: background 0.1s ease;
}
.export-dropdown__item:hover { background: var(--bg-elevated); color: var(--accent-gold); }

/* Slide-out Panel */
.slideout-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; transition: opacity 0.2s ease;
}
.slideout-overlay.active { display: block; opacity: 1; }
.slideout-panel {
    position: fixed; top: 0; right: -100%; width: 100%; max-width: 400px;
    height: 100vh; background: var(--bg-surface); box-shadow: var(--shadow-elevated);
    z-index: 1001; transition: right 0.3s ease; display: flex; flex-direction: column;
}
.slideout-overlay.active .slideout-panel { right: 0; }
.slideout-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4); border-bottom: var(--border-soft); background: var(--bg-elevated);
}
.slideout-header__title { font-weight: 800; font-size: 1.1rem; color: var(--text-primary); }
.slideout-close {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: none; background: var(--bg-surface); border-radius: var(--radius-1);
    cursor: pointer; color: var(--text-secondary); font-size: 1.2rem;
}
.slideout-close:hover { background: var(--bg-card); color: var(--text-primary); }
.slideout-body { flex: 1; overflow-y: auto; padding: var(--space-4); }

/* Current player being replaced */
.slideout-current-player {
    padding: var(--space-3); background: var(--bg-elevated);
    border-radius: var(--radius-1); margin-bottom: var(--space-4);
}
.slideout-current-player__label {
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--space-1);
}
.slideout-current-player__name { font-weight: 700; font-size: 1rem; color: var(--text-primary); }

/* Bench player list */
.bench-player-list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.bench-player-list__title { font-size: .85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: var(--space-1); }
.bench-player-item {
    display: flex; align-items: center; padding: var(--space-3);
    background: var(--bg-elevated); border: 2px solid transparent;
    border-radius: var(--radius-1); cursor: pointer; transition: all 0.15s ease;
}
.bench-player-item:hover { background: var(--bg-card); border-color: var(--border-subtle); }
.bench-player-item.selected { border-color: var(--accent-gold); background: var(--accent-gold-muted); }
.bench-player-item__number { font-weight: 700; color: var(--text-secondary); min-width: 40px; }
.bench-player-item__name { font-weight: 600; color: var(--text-primary); }

/* Position select in slideout */
.slideout-position-select { margin-bottom: var(--space-4); }
.slideout-position-select__label { font-size: .85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: var(--space-2); display: block; }
.slideout-position-select select {
    width: 100%; padding: .65rem .75rem; border: var(--border);
    border-radius: var(--radius-1); background: var(--bg-surface); color: var(--text-primary); font-size: .95rem;
}
.slideout-position-select select:focus { outline: none; box-shadow: var(--focus); }
.slideout-actions { padding: var(--space-4); border-top: var(--border-soft); background: var(--bg-elevated); display: flex; gap: var(--space-2); }
.slideout-actions .btn { flex: 1; }

/* Mobile Swipe Actions */
.swipe-row-container { position: relative; overflow: hidden; }
.swipe-row-content { position: relative; z-index: 1; background: var(--bg-surface); transition: transform 0.2s ease; }
.swipe-row-actions { position: absolute; top: 0; right: 0; height: 100%; display: flex; align-items: stretch; z-index: 0; }
.swipe-action-btn {
    display: flex; align-items: center; justify-content: center;
    padding: 0 1.25rem; border: none; font-weight: 700; font-size: .8rem; cursor: pointer; color: #fff;
}
.swipe-action-btn--sub { background: var(--accent-gold); }
.swipe-action-btn--pos { background: var(--text-secondary); }
@media (min-width: 900px) { .swipe-row-actions { display: none; } }

/* Empty State Slots */
.lineup-empty-slots { padding: var(--space-3); }
.lineup-empty-slot {
    display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
    border: 2px dashed var(--border-subtle); border-radius: var(--radius-1); margin-bottom: var(--space-2);
    background: var(--bg-elevated);
}
.lineup-empty-slot__order {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; background: var(--accent-gold-muted);
    border-radius: 6px; font-weight: 800; font-size: .88rem; color: var(--text-secondary);
}
.lineup-empty-slot__prompt { color: var(--text-muted); font-size: .9rem; font-style: italic; }
.lineup-empty-state-actions { padding: var(--space-3); text-align: center; }

/* History Toggle v2 */
.history-toggle-v2 {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; padding: var(--space-3); margin: 0; border: none; background: transparent;
    border-top: 1px dashed var(--border-subtle); font-size: .85rem; font-weight: 600;
    color: var(--text-secondary); cursor: pointer; text-align: left;
}
.history-toggle-v2:hover { color: var(--accent-gold); }
.history-toggle-v2__icon { width: 18px; height: 18px; transition: transform 0.2s ease; }
.history-toggle-v2.expanded .history-toggle-v2__icon { transform: rotate(90deg); }
.history-content-v2 { display: none; padding: 0 var(--space-3) var(--space-3); }
.history-content-v2.expanded { display: block; }
.history-event-v2 {
    padding: var(--space-2) var(--space-3); background: var(--bg-elevated);
    border-left: 3px solid var(--accent-gold); border-radius: 0 var(--radius-1) var(--radius-1) 0;
    margin-bottom: var(--space-2); font-size: .85rem;
}
.history-event-v2__type { font-weight: 700; text-transform: uppercase; font-size: .72rem; color: var(--accent-gold); }
.history-event-v2__details { color: var(--text-primary); margin-top: .25rem; }

/* Read-only Mode */
.page--lineup-manage.read-only .lineup-row-clickable { cursor: default; }
.page--lineup-manage.read-only .lineup-row-clickable:hover { background: transparent; }
.page--lineup-manage.read-only .swipe-row-actions,
.page--lineup-manage.read-only .pitcher-section .btn,
.page--lineup-manage.read-only .staff-section__actions,
.page--lineup-manage.read-only .expulsion-section__actions,
.page--lineup-manage.read-only .expulsion-section__undo,
.page--lineup-manage.read-only .staff-section__remove,
.page--lineup-manage.read-only .lineup-empty-state-actions,
.page--lineup-manage.read-only .pagehead__actions .btn--primary { display: none; }
.read-only-notice-v2 {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); background: var(--accent-gold-muted);
    border-left: 4px solid var(--accent-gold); border-radius: 0 var(--radius-1) var(--radius-1) 0;
    font-size: .9rem; color: var(--text-primary);
}
.read-only-notice-v2__icon { font-size: 1.1rem; }
.read-only-notice-v2__link {
    color: var(--accent-gold); text-decoration: underline;
    font-weight: 600; margin-left: var(--space-1);
}
.read-only-notice-v2__link:hover { color: var(--text-primary); }
@media (max-width: 500px) {
    .lineup-table-v2 th, .lineup-table-v2 td { padding: .5rem .4rem; }
    .lineup-team-header-v2 { padding: var(--space-2) var(--space-3); }
    .lineup-team-title__name { font-size: 1rem; }
}

/* ════════════════════════════════════════════════════════════
   VISUAL SCORING GRID
   ════════════════════════════════════════════════════════════ */

.page--scoring-grid { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; overflow-x: hidden; }

/* Team Tabs */
.scoring-team-tabs {
    display: flex; gap: 0; background: var(--bg-surface);
    border-radius: var(--radius-1); padding: 4px; border: var(--border-soft);
}
.scoring-team-tab {
    flex: 1; padding: .75rem 1rem; text-align: center;
    font-weight: 700; font-size: .92rem; border: none;
    background: transparent; color: var(--text-secondary); cursor: pointer;
    border-radius: calc(var(--radius-1) - 2px); transition: all 0.15s ease; text-decoration: none;
}
.scoring-team-tab:hover { color: var(--text-primary); background: var(--bg-elevated); text-decoration: none; }
.scoring-team-tab.active { background: var(--accent-gold); color: #fff; }

/* Line score (scoring sheet) */
.scoring-line-score { margin-bottom: var(--space-3); overflow-x: auto; display: flex; justify-content: center; }
.scoring-line-score__table {
    width: auto; border-collapse: collapse; font-size: 0.875rem;
    background: var(--bg-surface); border-radius: var(--radius-1); border: var(--border-soft);
}
.scoring-line-score__table th,
.scoring-line-score__table td { padding: var(--space-1) var(--space-2); text-align: center; border: 1px solid var(--border-subtle); }
.scoring-line-score__table th { background: var(--bg-elevated); font-weight: 600; }
.scoring-line-score__team-col { text-align: left !important; padding-left: var(--space-3) !important; min-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.scoring-line-score__total { font-weight: 700; background: var(--bg-card); }
.scoring-line-score--active { background: var(--accent-gold-muted); }

/* Inning Complete Notice */
.scoring-inning-complete-notice {
    display: flex; align-items: center; gap: var(--space-2);
    padding: .5rem .75rem; margin-bottom: var(--space-2);
    background: rgba(255, 184, 0, 0.08); border: 1px solid rgba(255, 184, 0, 0.2);
    border-radius: var(--radius-1); font-size: .85rem; color: var(--accent-gold);
}
.scoring-inning-complete-notice__text { flex: 1; }
/* Grid Container */
.scoring-grid-container {
    position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: var(--bg-surface); border-radius: var(--radius-2);
    border: var(--border-soft); box-shadow: var(--shadow-1);
}

/* Double Play Connector Overlay */
.scoring-grid__dp-overlay { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 5; }
.scoring-grid__dp-line { stroke: var(--accent-danger); stroke-width: 2px; fill: none; }
.scoring-grid__fc-line { stroke: var(--accent-fc); stroke-width: 2px; fill: none; }

/* Scoring Grid Table */
.scoring-grid { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 600px; }
.scoring-grid thead { position: sticky; top: 0; z-index: 15; }
.scoring-grid th {
    padding: .65rem .5rem; font-size: .75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); background: var(--bg-elevated);
    border-bottom: 2px solid var(--text-disabled); text-align: center; white-space: nowrap;
}
.scoring-grid th:first-child { text-align: center; }

/* SE360 Player Columns — BO | # | Name | Pos. (all sticky) */
.scoring-grid__bo-cell,
.scoring-grid__bo-header {
    position: sticky; left: 0; z-index: 10; background: var(--bg-surface);
    width: 36px; min-width: 36px; max-width: 36px; text-align: center;
    padding: 0; vertical-align: middle;
    border-right: 1px solid var(--text-disabled);
}
.scoring-grid thead .scoring-grid__bo-header { background: var(--bg-elevated); z-index: 16; }

.scoring-grid__uniform-cell,
.scoring-grid__uniform-header {
    position: sticky; left: 36px; z-index: 10; background: var(--bg-surface);
    width: 40px; min-width: 40px; max-width: 40px; text-align: center;
    padding: .25rem .25rem; font-size: .8rem; font-weight: 600;
    color: var(--text-secondary); vertical-align: middle;
    border-right: 1px solid var(--text-disabled);
}
.scoring-grid thead .scoring-grid__uniform-header { background: var(--bg-elevated); z-index: 16; }

.scoring-grid__name-cell,
.scoring-grid__name-header {
    position: sticky; left: 76px; z-index: 10; background: var(--bg-surface);
    min-width: 100px; max-width: 140px; text-align: left;
    padding: .25rem var(--space-2); vertical-align: middle;
    border-right: 1px solid var(--text-disabled);
}
.scoring-grid thead .scoring-grid__name-header {
    background: var(--bg-elevated); z-index: 16;
    font-size: .85rem; font-weight: 700; color: var(--text-primary);
    text-transform: none; letter-spacing: normal;
}

.scoring-grid__pos-cell,
.scoring-grid__pos-header {
    position: sticky; left: 176px; z-index: 10; background: var(--bg-surface);
    width: 44px; min-width: 44px; max-width: 44px; text-align: center;
    padding: .25rem .25rem; font-size: .7rem; font-weight: 700;
    color: var(--text-secondary); text-transform: uppercase; vertical-align: middle;
    border-right: 2px solid var(--text-disabled);
}
.scoring-grid thead .scoring-grid__pos-header { background: var(--bg-elevated); z-index: 16; }

/* Wider name column when nav sidebar is collapsed */
@media (min-width: 1024px) {
    .shell--sidebar-collapsed .scoring-grid__name-cell,
    .shell--sidebar-collapsed .scoring-grid__name-header {
        min-width: 200px; max-width: 240px;
    }
    .shell--sidebar-collapsed .scoring-grid__pos-cell,
    .shell--sidebar-collapsed .scoring-grid__pos-header {
        left: 276px;
    }
}

/* Batting order badge */
.scoring-grid__batting-order {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; background: var(--accent-gold-muted);
    border-radius: 6px; font-weight: 800; font-size: .85rem; color: var(--accent-gold);
}

/* Player name */
.scoring-grid__player-name {
    font-weight: 600; color: var(--text-primary); font-size: .85rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: block;
}

/* Inning header */
.scoring-grid__inning-header { width: 112px; min-width: 112px; }
.scoring-grid__inning-header--continuation { color: var(--accent-gold); }

/* At-bat cells */
.scoring-grid td { padding: 0; border-bottom: 1px solid var(--text-disabled); vertical-align: middle; }
.scoring-grid__cell {
    width: 112px; min-width: 112px; height: 112px; padding: .5rem;
    cursor: pointer; transition: all 0.1s ease; position: relative;
    text-align: center; border-left: 1px solid var(--text-disabled); box-sizing: border-box;
}
.scoring-grid__cell:hover { background: var(--bg-card); }
.scoring-grid__cell--filled { cursor: default; background: var(--bg-elevated); }
.scoring-grid__cell--filled:hover { background: var(--bg-elevated); }

/* End-of-inning marker */
.scoring-grid__cell--end-of-inning::after {
    content: ''; position: absolute; width: 28%; height: 2px;
    bottom: -1px; right: -14%; background: var(--scoring-out-color, #dc2626);
    transform: rotate(-45deg); pointer-events: none; z-index: 2;
}

/* Pitcher change marker (red horizontal line at bottom of cell) */
.scoring-grid__cell--pitcher-change::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background: var(--scoring-out-color, #dc2626);
    pointer-events: none;
    z-index: 2;
}

/* Current cell */
.scoring-grid__cell--current {
    background: rgba(255, 184, 0, 0.12); border: 2px solid var(--accent-gold); cursor: pointer;
}
.scoring-grid__cell--current:hover { background: rgba(255, 184, 0, 0.18); }

/* Gap cells (voided-event slots needing re-fill) */
.scoring-grid__cell--gap {
    background: rgba(245, 158, 11, 0.08);
    border: 2px dashed var(--accent-gold, #f59e0b);
    cursor: pointer;
    animation: gap-pulse 2s ease-in-out infinite;
}
.scoring-grid__cell--gap:hover {
    background: rgba(245, 158, 11, 0.15);
}
@keyframes gap-pulse {
    0%, 100% { border-color: var(--accent-gold, #f59e0b); }
    50% { border-color: rgba(245, 158, 11, 0.4); }
}

/* Locked cells (inning sequence enforcement) */
.scoring-grid__cell--locked {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Wrong-team banner (inning sequence enforcement) */
.scoring-sequence-banner {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    margin-bottom: 1rem;
    background: var(--accent-warn-muted, rgba(249, 115, 22, 0.1));
    border: 1px solid var(--accent-warn, #f97316);
    border-radius: var(--radius-2, .5rem);
    color: var(--text-primary);
    font-size: .9rem;
}
.scoring-sequence-banner__link {
    margin-left: auto;
    font-weight: 600;
    color: var(--accent-warn, #f97316);
    white-space: nowrap;
}

/* Cell content */
.scoring-grid__cell-content {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; height: 100%; gap: 2px;
}
.scoring-grid__event-code { font-size: 1.3rem; font-weight: 800; line-height: 1; }
.scoring-grid__event-code--hit { color: var(--accent-live); }
.scoring-grid__event-code--out { color: var(--accent-danger); }
.scoring-grid__event-code--walk { color: var(--accent-gold); }
.scoring-grid__event-code--other { color: var(--accent-warn); }
.scoring-grid__rbi {
    font-size: .65rem; font-weight: 700; color: var(--accent-live);
    background: rgba(5, 150, 105, 0.15); padding: .1rem .3rem; border-radius: 3px;
}
.scoring-grid__outs { font-size: .65rem; font-weight: 700; color: var(--accent-danger); }
.scoring-grid__cell-empty { color: var(--text-muted); font-size: 1.2rem; opacity: 0.3; }

/* ═══ SE360 SCORING BOX LAYOUT ═══ */
.scoring-box { display: flex; width: 100%; height: 100%; background: var(--bg-surface); }
.scoring-box__left { flex: 1; display: flex; flex-direction: column; border-right: 1px dotted var(--text-disabled); }
.scoring-box__event-area { flex: 1; display: flex; align-items: center; justify-content: center; border-bottom: 1px dotted var(--text-disabled); }
.scoring-box__event { font-size: 1.35rem; font-weight: 700; color: var(--text-primary); }
.scoring-box__event--hit { color: var(--accent-live); }
.scoring-box__event--out { color: var(--accent-danger); }
.scoring-box__event--walk { color: var(--accent-gold); }
.scoring-box__event--other { color: var(--accent-warn); }
.scoring-box__event--circled {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2em; height: 2em; border: 2px solid var(--accent-danger); border-radius: 50%; font-size: 1.05rem;
}
.scoring-box__event--runner-out {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2em; height: 2em; border: 2px solid var(--accent-danger); border-radius: 50%;
}
.scoring-box__event--mirrored { transform: scaleX(-1); display: inline-block; }
.scoring-box__rbi {
    height: 22px; min-height: 22px; display: flex; align-items: center;
    padding: 0 4px; font-size: .65rem; gap: 3px;
}
.scoring-box__rbi-label { color: var(--text-secondary); }
.scoring-box__rbi-value { font-weight: 700; font-style: italic; color: var(--text-primary); letter-spacing: 2px; }
.scoring-box__right { width: 28px; min-width: 28px; display: flex; flex-direction: column; }
.scoring-box__run { width: 100%; aspect-ratio: 1; background: var(--bg-surface); border-bottom: 1px dotted var(--text-disabled); }
.scoring-box__run--scored { background: var(--accent-live); animation: run-scored-glow 1.5s ease-in-out infinite; }
@keyframes run-scored-glow {
    0%, 100% { background: var(--accent-live); box-shadow: 0 0 8px 2px rgba(5, 150, 105, 0.6); }
    50% { background: #10b981; box-shadow: 0 0 12px 4px rgba(16, 185, 129, 0.8); }
}
.scoring-box__cr-label {
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-size: .6rem; font-weight: 600; color: var(--text-secondary); border-bottom: 1px dotted var(--text-disabled);
}
.scoring-box__cr-number {
    height: 22px; min-height: 22px; display: flex; align-items: center; justify-content: center;
    font-size: .7rem; font-weight: 700; font-style: italic; color: var(--text-primary);
}
/* Darker scoring cell dividers in light mode */
.light-mode .scoring-box__left { border-right-color: #999; }
.light-mode .scoring-box__event-area { border-bottom-color: #999; }
.light-mode .scoring-box__run { border-bottom-color: #999; }
.light-mode .scoring-box__cr-label { border-bottom-color: #999; }
@media (max-width: 1200px) {
    .scoring-box__right { width: 24px; min-width: 24px; }
    .scoring-box__event { font-size: 1.125rem; }
    .scoring-box__rbi, .scoring-box__cr-number { height: 18px; min-height: 18px; }
    .scoring-box__rbi { font-size: .6rem; }
    .scoring-box__cr-label { font-size: .55rem; }
    .scoring-box__cr-number { font-size: .6rem; }
}
@media (max-width: 768px) {
    .scoring-box__right { width: 20px; min-width: 20px; }
    .scoring-box__event { font-size: 0.9rem; }
    .scoring-box__rbi, .scoring-box__cr-number { height: 16px; min-height: 16px; }
    .scoring-box__cr-label { font-size: .5rem; }
    .scoring-box__cr-number { font-size: .55rem; }
    .scoring-box__rbi { font-size: .55rem; }
}

/* Totals row */
.scoring-grid__totals-row td {
    background: var(--bg-elevated); border-top: 2px solid var(--text-disabled);
    border-left: 1px solid var(--text-disabled);
    font-weight: 700; padding: .35rem .25rem; text-align: center; vertical-align: middle;
}
/* Remove left border from fixed player columns (they have their own positioning) */
.scoring-grid__totals-row .scoring-grid__bo-cell { border-left: none; }
.scoring-grid__totals-row .scoring-grid__uniform-cell { border-left: none; }
.scoring-grid__totals-row .scoring-grid__name-cell { border-left: none; }
.scoring-grid__totals-row .scoring-grid__pos-cell { border-left: none; }
.scoring-grid__totals-row .scoring-grid__name-cell { font-weight: 800; color: var(--text-primary); }

/* Inning stats mini-grid (footer) — R/H/BB top, E/LOB bottom */
.scoring-grid__inning-stats { display: flex; flex-direction: column; gap: 1px; }
.scoring-grid__inning-stats-top { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; }
.scoring-grid__inning-stats-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; }
.scoring-grid__inning-stats span {
    font-size: 0.7rem; font-weight: 700; text-align: center;
    padding: 1px 2px; border: 1px solid var(--border-default);
}
.scoring-grid__inning-stat--r { color: var(--accent-live); }
.scoring-grid__inning-stat--h { color: var(--accent-gold); }
.scoring-grid__inning-stat--bb { color: var(--text-primary); }
.scoring-grid__inning-stat--e { color: var(--accent-danger); }
.scoring-grid__inning-stat--lob { color: var(--text-secondary); }

/* Label mini-grid in name column — same size as inning cell, right-justified */
.scoring-grid__totals-row .scoring-grid__name-cell {
    text-align: right;
}
.scoring-grid__inning-stats--labels {
    width: 112px; margin-left: auto;
}
.scoring-grid__inning-stats--labels .scoring-grid__inning-stats-top span:nth-child(1) { color: var(--accent-live); }
.scoring-grid__inning-stats--labels .scoring-grid__inning-stats-top span:nth-child(2) { color: var(--accent-gold); }
.scoring-grid__inning-stats--labels .scoring-grid__inning-stats-bottom span:nth-child(1) { color: var(--accent-danger); }
.scoring-grid__inning-stats--labels .scoring-grid__inning-stats-bottom span:nth-child(2) { color: var(--text-secondary); }

/* Stat column totals */
.scoring-grid__stat-cell--total { font-weight: 700; color: var(--accent-gold); }
.scoring-grid__inning-complete { background: var(--bg-card); opacity: 0.7; }

/* Batting stat columns (SE360 summary stats to the right of inning columns) */
.scoring-grid__stat-header {
    width: 37px; min-width: 37px; max-width: 37px;
    text-align: center; font-size: .6rem; padding: .25rem 0;
    border-left: 1px solid var(--text-disabled);
}
.scoring-grid__stat-header--first { border-left: 2px solid var(--text-disabled); }

.scoring-grid__stat-cell {
    width: 37px; min-width: 37px; max-width: 37px;
    text-align: center; font-size: .75rem; font-weight: 600;
    color: var(--text-primary); padding: .1rem 0; vertical-align: middle;
    border-left: 1px solid var(--text-disabled);
}
.scoring-grid__stat-cell--first { border-left: 2px solid var(--text-disabled); }

/* ════════════════════════════════════════════════════════════
   PITCHER STATS SECTION (scoring sheet — uses dc-table)
   ════════════════════════════════════════════════════════════ */
.pitcher-stats-section { margin-top: var(--space-4); }
.pitcher-stats-section__title {
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-display);
    font-size: 11px; font-weight: normal;
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-muted);
}

/* ════════════════════════════════════════════════════════════
   PITCHER DISPLAY (Gate Enforcement)
   ════════════════════════════════════════════════════════════ */

.pitcher-display {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); background: var(--bg-surface);
    border: var(--border-soft); border-radius: var(--radius-2); margin-bottom: var(--space-4);
}
.pitcher-display__label { font-size: .85rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; }
.pitcher-display__info { display: flex; align-items: center; gap: var(--space-3); flex: 1; }
.pitcher-display__name { font-weight: 700; color: var(--text-primary); font-size: 1rem; }
.pitcher-display__ip { font-size: 0.8rem; color: var(--text-secondary); margin-left: 0.5rem; }
.toggle-icon { font-size: 0.8rem; margin-left: 0.5rem; display: inline-block; transition: transform 0.2s; }
.pitcher-display__warning { display: flex; align-items: center; gap: var(--space-3); flex: 1; }

/* Event History Pagination */
.eh-pagination { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3); border-top: var(--border-soft); font-size: 0.85rem; }
.eh-pagination__counter { color: var(--text-secondary); }
.eh-pagination__controls { display: flex; align-items: center; gap: var(--space-2); }
.eh-pagination__label { color: var(--text-secondary); }
.eh-pagination__select { padding: 0.3rem; border: var(--border); border-radius: var(--radius-1); background: var(--bg-surface); color: var(--text-primary); font-size: 0.85rem; }
.eh-pagination__indicator { padding: 0 var(--space-2); color: var(--text-primary); }
.eh-pagination__btn { padding: 0.3rem 0.6rem; font-size: 0.85rem; }
.eh-pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Pitcher Change Panel */
.pitcher-change-current { padding: var(--space-3); background: var(--bg-elevated); border-radius: var(--radius-1); margin-bottom: var(--space-4); }
.pitcher-change-current__label { font-size: .75rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .03em; margin-bottom: .25rem; }
.pitcher-change-current__name { font-weight: 700; color: var(--text-primary); }
.pitcher-change-select__label { display: block; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-2); }
.pitcher-change-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 300px; overflow-y: auto; }
.pitcher-change-option {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); border: var(--border-soft);
    border-radius: var(--radius-1); cursor: pointer; transition: all 0.15s ease;
}
.pitcher-change-option:hover { background: var(--bg-elevated); border-color: var(--accent-gold); }
.pitcher-change-option input[type="radio"] { margin: 0; }
.pitcher-change-option input[type="radio"]:checked + .pitcher-change-option__info { color: var(--accent-gold); }
.pitcher-change-option__info { display: flex; align-items: center; gap: var(--space-2); flex: 1; }
.pitcher-change-option__order {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; background: var(--accent-gold-muted);
    border-radius: 6px; font-weight: 800; font-size: .82rem; color: var(--accent-gold);
}
.pitcher-change-option__name { font-weight: 600; flex: 1; }
.pitcher-change-option__pos {
    padding: .1rem .35rem; background: var(--bg-card); color: var(--text-secondary);
    border-radius: 3px; font-weight: 700; font-size: .65rem; text-transform: uppercase;
}
.pitcher-change-section { margin-bottom: var(--space-3); }
.pitcher-change-section__header {
    font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-secondary); margin-bottom: var(--space-1); padding-left: var(--space-1);
}
.pitcher-change-option__pos--bench { background: var(--accent-gold-muted); color: var(--accent-gold); }
.pitcher-change-tracking { margin-top: var(--space-3); padding-top: var(--space-2); border-top: var(--border-soft); }

/* ════════════════════════════════════════════════════════════
   FC (Fielder's Choice) STYLES
   ════════════════════════════════════════════════════════════ */

.scoring-grid__cell--fc-pending {
    background: rgba(249, 115, 22, 0.15) !important; border: 2px dashed var(--accent-warn) !important;
    cursor: pointer !important; animation: fc-pulse 1.5s ease-in-out infinite;
}
.scoring-grid__cell--fc-pending:hover { background: rgba(249, 115, 22, 0.25) !important; }
@keyframes fc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.scoring-grid__cell--undo-highlight {
    animation: undo-highlight 2s ease-out forwards;
}
@keyframes undo-highlight {
    0% { background: rgba(255, 184, 0, 0.4) !important; box-shadow: 0 0 12px 4px rgba(255, 184, 0, 0.5); }
    100% { background: transparent; box-shadow: none; }
}
.scoring-grid__cell--editable { cursor: pointer; }
.scoring-grid__cell--editable:hover { background: rgba(220, 38, 38, 0.1) !important; border: 1px solid var(--accent-danger); }
.scoring-grid__cr-badge {
    position: absolute; top: 2px; right: 2px; padding: .1rem .25rem;
    background: var(--accent-gold); color: #fff; border-radius: 3px;
    font-weight: 700; font-size: .55rem; text-transform: uppercase;
}
.scoring-grid__run-badge {
    position: absolute; bottom: 2px; left: 2px; width: 16px; height: 16px;
    background: var(--accent-live); color: #fff; border-radius: 50%;
    font-weight: 800; font-size: .6rem; display: flex; align-items: center; justify-content: center;
}
.scoring-grid__cell--run { background: rgba(5, 150, 105, 0.08) !important; }

/* Player Substitution Display */
.scoring-grid__row--inactive .scoring-grid__player-name { color: var(--text-secondary); }
.scoring-grid__player-name--strikethrough { text-decoration: line-through; }
.scoring-grid__player-name--reentry {
    border: 2px solid var(--text-primary); border-radius: 50%;
    padding: 0 var(--space-1); display: inline-block;
}
.scoring-grid__cell--sub-marker { border-left: 3px solid var(--scoring-sub-color, #3b82f6) !important; }
.scoring-grid__cell--other-player { background: var(--bg-card); opacity: 0.5; }

/* Does Not Bat (DH rule) */
.scoring-grid__row--does-not-bat { opacity: 0.6; }
.scoring-grid__row--does-not-bat .scoring-grid__player-name--dnb {
    font-style: italic; color: var(--text-secondary);
}
.scoring-grid__batting-order--dnb {
    font-size: 0.6rem; letter-spacing: 0.02em; color: var(--text-secondary);
    background: var(--bg-surface);
}
.scoring-grid__dnb-cell {
    text-align: center; vertical-align: middle;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 5px,
        rgba(128, 128, 128, 0.05) 5px,
        rgba(128, 128, 128, 0.05) 10px
    );
}
.scoring-grid__dnb-label {
    font-size: 0.75rem; font-style: italic; color: var(--text-secondary);
    letter-spacing: 0.02em;
}

/* 3-Row Batting Order Groups (SE360 convention) */
.scoring-grid__row--first td { border-top: 2px solid var(--text-disabled); }
.scoring-grid__row--first .scoring-grid__bo-cell { border-top: 2px solid var(--text-disabled); }
/* Prevent doubled border at group boundaries (border-collapse: separate) */
.scoring-grid__row--last td { border-bottom: none; }
.scoring-grid tbody tr:first-child td { border-top: none; }

/* Equal-height sub-rows for player columns */
.scoring-grid__uniform-cell,
.scoring-grid__name-cell,
.scoring-grid__pos-cell {
    height: 30px;
}

/* Totals row overrides for player columns */
.scoring-grid__totals-row .scoring-grid__bo-cell,
.scoring-grid__totals-row .scoring-grid__uniform-cell,
.scoring-grid__totals-row .scoring-grid__name-cell,
.scoring-grid__totals-row .scoring-grid__pos-cell {
    background: var(--bg-elevated); border-top: 2px solid var(--border-subtle);
}

/* Sub panel */
.sub-panel__section { margin-bottom: var(--space-4); }
.sub-panel__label {
    display: block; font-weight: 700; font-size: .75rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-secondary); margin-bottom: var(--space-2);
}

/* FC Runner Out Panel */
.fc-runner-info { padding: var(--space-3); background: var(--bg-elevated); border-radius: var(--radius-1); margin-bottom: var(--space-4); }
.fc-runner-info p { margin: 0; }
.fc-runner-info p + p { margin-top: var(--space-1); }
.fc-runner-select__label { display: block; font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-2); }
.fc-runner-list { display: flex; flex-direction: column; gap: var(--space-2); max-height: 250px; overflow-y: auto; margin-bottom: var(--space-4); }
.fc-runner-option {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); border: var(--border-soft);
    border-radius: var(--radius-1); cursor: pointer; transition: all 0.15s ease;
}
.fc-runner-option:hover { background: var(--bg-elevated); border-color: var(--accent-gold); }
.fc-runner-option input[type="radio"] { margin: 0; }
.fc-runner-option__info { display: flex; align-items: center; gap: var(--space-2); flex: 1; }
.fc-runner-option__order {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; background: var(--accent-gold-muted);
    border-radius: 6px; font-weight: 800; font-size: .82rem; color: var(--accent-gold);
}
.fc-runner-option__name { font-weight: 600; }
.fc-runner-base { margin-bottom: var(--space-3); }
.fc-base-options { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fc-base-option {
    display: flex; align-items: center; gap: var(--space-1);
    padding: var(--space-2) var(--space-3); border: var(--border-soft);
    border-radius: var(--radius-1); cursor: pointer; transition: all 0.15s ease;
}
.fc-base-option:hover { background: var(--bg-elevated); border-color: var(--accent-gold); }
.fc-base-option input[type="radio"] { margin: 0; }
.fc-base-option span { font-weight: 600; font-size: .85rem; }

/* ════════════════════════════════════════════════════════════
   EVENT ACTIONS PANEL
   ════════════════════════════════════════════════════════════ */

.event-actions-info {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3); background: var(--bg-elevated);
    border-radius: var(--radius-1); margin-bottom: var(--space-4);
}
.event-actions-info__badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 var(--space-2);
    border-radius: 8px; font-weight: 800; font-size: 1.2rem; flex-shrink: 0;
}
.event-actions-info__badge--hit { background: rgba(5, 150, 105, 0.15); color: var(--accent-live); }
.event-actions-info__badge--out { background: rgba(220, 38, 38, 0.15); color: var(--accent-danger); }
.event-actions-info__badge--walk { background: rgba(255, 184, 0, 0.15); color: var(--accent-gold); }
.event-actions-info__badge--other { background: rgba(249, 115, 22, 0.15); color: var(--accent-warn); }
.event-actions-info__details { flex: 1; min-width: 0; }
.event-actions-info__label { font-weight: 700; color: var(--text-primary); font-size: .95rem; }
.event-actions-info__player { font-size: .85rem; color: var(--text-secondary); margin-top: 2px; }
.event-actions-buttons { display: flex; flex-direction: column; gap: var(--space-2); }
.event-actions-btn {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: var(--space-3); border: var(--border-soft); border-radius: var(--radius-1);
    background: var(--bg-surface); cursor: pointer; transition: all 0.15s ease;
    text-align: left; width: 100%;
}
.event-actions-btn:hover { background: var(--bg-elevated); }
.event-actions-btn__label { font-weight: 700; font-size: .9rem; }
.event-actions-btn__desc { font-size: .78rem; color: var(--text-secondary); margin-top: 2px; }
.event-actions-btn--warn { border-left: 3px solid var(--accent-warn); }
.event-actions-btn--warn:hover { border-color: var(--accent-warn); }
.event-actions-btn--warn .event-actions-btn__label { color: var(--accent-warn); }
.event-actions-btn--danger { border-left: 3px solid var(--accent-danger); }
.event-actions-btn--danger:hover { border-color: var(--accent-danger); }
.event-actions-btn--danger .event-actions-btn__label { color: var(--accent-danger); }
.event-actions-btn--brand { border-left: 3px solid var(--accent-gold); }
.event-actions-btn--brand:hover { border-color: var(--accent-gold); }
.event-actions-btn--brand .event-actions-btn__label { color: var(--accent-gold); }

/* Void section */
.event-actions-void-section {
    padding: var(--space-3); background: rgba(220, 38, 38, 0.05);
    border: 1px solid rgba(220, 38, 38, 0.2); border-radius: var(--radius-1);
}
.event-actions-void-section__label { font-weight: 600; font-size: .85rem; color: var(--text-primary); margin-bottom: var(--space-2); }
.event-actions-void-section__textarea {
    width: 100%; padding: var(--space-2); border: var(--border-soft);
    border-radius: 6px; font-family: var(--font-body); font-size: .85rem;
    resize: vertical; background: var(--bg-surface); color: var(--text-primary);
}
.event-actions-void-section__textarea:focus { outline: none; box-shadow: var(--focus); }
.event-actions-void-section__actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }

/* Undo FC section */
.event-actions-undo-fc-section { padding: var(--space-3); background: var(--bg-elevated); border: var(--border-soft); border-radius: var(--radius-1); }
.event-actions-undo-fc-section__label { font-weight: 600; font-size: .85rem; color: var(--text-primary); margin-bottom: var(--space-2); }
.event-actions-undo-fc-section__list { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.event-actions-undo-fc-option {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3); border: var(--border-soft);
    border-radius: var(--radius-1); cursor: pointer; transition: all 0.15s ease;
}
.event-actions-undo-fc-option:hover { background: var(--bg-card); border-color: var(--accent-gold); }
.event-actions-undo-fc-option input[type="radio"] { margin: 0; }
.event-actions-undo-fc-option span { font-weight: 600; font-size: .85rem; }
.event-actions-undo-fc-section__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* ════════════════════════════════════════════════════════════
   EVENT ENTRY PANEL (Slide-out)
   ════════════════════════════════════════════════════════════ */

.event-entry-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); z-index: 1000; opacity: 0; transition: opacity 0.2s ease;
}
.event-entry-overlay.active { display: block; opacity: 1; }
.event-entry-panel {
    position: fixed; top: 0; right: -100%; width: 100%; max-width: 420px;
    height: 100vh; background: var(--bg-surface); box-shadow: var(--shadow-elevated);
    z-index: 1001; transition: right 0.3s ease; display: flex; flex-direction: column;
}
.event-entry-overlay.active .event-entry-panel { right: 0; }
.event-entry-panel form { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.event-entry-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4); border-bottom: var(--border-soft);
    background: var(--bg-elevated); flex-shrink: 0;
}
.event-entry-header__title { font-weight: 800; font-size: 1.1rem; color: var(--text-primary); }
.event-entry-header__subtitle { font-size: .85rem; color: var(--text-secondary); margin-top: .25rem; }
.event-entry-close {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border: none; background: var(--bg-surface); border-radius: var(--radius-1);
    cursor: pointer; color: var(--text-secondary); font-size: 1.2rem;
}
.event-entry-close:hover { background: var(--bg-card); color: var(--text-primary); }
.event-entry-body { flex: 1; overflow-y: auto; padding: var(--space-4); min-height: 0; }

/* Batter info card */
.event-entry-batter {
    padding: var(--space-3); background: var(--bg-elevated);
    border-radius: var(--radius-1); margin-bottom: var(--space-4);
    border-left: 4px solid var(--accent-gold);
}
.event-entry-batter__label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--space-1);
}
.event-entry-batter__name { font-weight: 700; font-size: 1.1rem; color: var(--text-primary); }
.event-entry-batter__details { font-size: .85rem; color: var(--text-secondary); margin-top: .25rem; }

/* Event type buttons */
.event-entry-category { margin-bottom: var(--space-4); }
.event-entry-category__label {
    font-size: .75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--text-muted); margin-bottom: var(--space-2);
}
.event-entry-category__buttons { display: flex; flex-wrap: wrap; gap: .5rem; }
.event-entry-btn {
    min-width: 54px; height: 54px; padding: .25rem; border-radius: 10px;
    border: 2px solid transparent; background: var(--bg-elevated);
    color: var(--text-primary); cursor: pointer; font-weight: 700; font-size: 1rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.event-entry-btn:hover { background: var(--accent-gold-muted); border-color: var(--accent-gold); }
.event-entry-btn:focus { outline: none; box-shadow: var(--focus); border-color: var(--accent-gold); }
.event-entry-btn.selected { background: var(--accent-gold); color: #fff; border-color: var(--accent-gold-hover); }
.event-entry-btn__code { font-size: 1.15rem; line-height: 1; }
.event-entry-btn__code--mirrored { display: inline-block; transform: scaleX(-1); }
.event-entry-btn__label { font-size: .55rem; font-weight: 500; opacity: 0.8; line-height: 1; margin-top: 2px; }
.event-entry-btn--hit { background: rgba(5, 150, 105, 0.1); }
.event-entry-btn--hit:hover { background: rgba(5, 150, 105, 0.2); }
.event-entry-btn--hit.selected { background: var(--accent-live); }
.event-entry-btn--out { background: rgba(220, 38, 38, 0.1); }
.event-entry-btn--out:hover { background: rgba(220, 38, 38, 0.2); }
.event-entry-btn--out.selected { background: var(--accent-danger); }
.event-entry-btn--walk { background: rgba(255, 184, 0, 0.1); }
.event-entry-btn--walk:hover { background: rgba(255, 184, 0, 0.2); }
.event-entry-btn--walk.selected { background: var(--accent-gold); }
.event-entry-btn--other { background: rgba(249, 115, 22, 0.1); }
.event-entry-btn--other:hover { background: rgba(249, 115, 22, 0.2); }
.event-entry-btn--other.selected { background: var(--accent-gold); color: var(--text-primary); }

/* RBI/Outs inputs */
.event-entry-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.event-entry-input-group { display: flex; flex-direction: column; gap: .5rem; }
.event-entry-input-group label { font-size: .82rem; font-weight: 700; color: var(--text-secondary); }
.event-entry-input-group input {
    padding: .65rem .75rem; border: var(--border); border-radius: var(--radius-1);
    background: var(--bg-surface); color: var(--text-primary);
    font-size: 1rem; font-weight: 600; text-align: center;
}
.event-entry-input-group input:focus { outline: none; box-shadow: var(--focus); border-color: var(--accent-gold); }

/* Courtesy Runner Checkbox */
.event-entry-checkbox { margin-bottom: var(--space-4); padding: var(--space-3); background: var(--bg-elevated); border-radius: var(--radius-1); }
.event-entry-checkbox__label {
    display: flex; align-items: center; gap: var(--space-2);
    cursor: pointer; font-weight: 600; color: var(--text-primary);
}
.event-entry-checkbox__label input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; }
.event-entry-checkbox small { display: block; margin-top: var(--space-1); margin-left: 26px; font-size: .78rem; }
.event-entry-cr-limit { margin-top: var(--space-2); margin-left: 26px; font-size: .78rem; color: var(--accent-warning, #f59e0b); }

/* Runners Scored Selection */
.event-entry-runners {
    margin-bottom: var(--space-4); padding: var(--space-3);
    background: rgba(5, 150, 105, 0.1); border: 1px solid rgba(5, 150, 105, 0.3);
    border-radius: var(--radius-1);
}
.event-entry-runners__label { font-weight: 700; color: var(--accent-live); margin-bottom: var(--space-1); }
.event-entry-runners__hint { font-size: .78rem; color: var(--text-secondary); margin-bottom: var(--space-2); }
.event-entry-runners__list { display: flex; flex-direction: column; gap: var(--space-1); max-height: 180px; overflow-y: auto; }
.event-entry-runners__divider {
    font-size: 0.7rem; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 0.05em;
    padding: var(--space-1) 0; margin-top: var(--space-1); border-top: 1px solid var(--border-subtle);
}
.event-entry-cr-option--bench .event-entry-runner-option__order { background: var(--text-secondary); }
.event-entry-runner-option {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-1);
    cursor: pointer; transition: background 0.15s ease;
}
.event-entry-runner-option:hover { background: rgba(5, 150, 105, 0.1); }
.event-entry-runner-option input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.event-entry-runner-option__order {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; background: var(--accent-gold-muted);
    border-radius: 4px; font-weight: 800; font-size: .75rem; color: var(--accent-gold);
}
.event-entry-runner-option__name { font-weight: 500; font-size: .85rem; }
.event-entry-runner-option--batter {
    background: rgba(255, 184, 0, 0.1); border-left: 3px solid var(--accent-gold);
    padding-left: calc(var(--space-2) - 3px);
}
.event-entry-runner-option--batter::after {
    content: '(batter)'; font-size: .7rem; color: var(--accent-gold); margin-left: auto; font-weight: 500;
}

/* Runners Out on Play */
.event-entry-runners-out { background: rgba(220, 38, 38, 0.08); border-color: rgba(220, 38, 38, 0.3); }
.event-entry-runners-out .event-entry-runners__label { color: var(--accent-danger); }
.event-entry-runners-out .event-entry-runner-option:hover { background: rgba(220, 38, 38, 0.1); }

/* Keyboard hints */
.event-entry-keyboard-hints {
    font-size: .78rem; color: var(--text-secondary); padding: var(--space-3);
    background: var(--bg-elevated); border-radius: var(--radius-1); margin-bottom: var(--space-4);
}
.event-entry-keyboard-hints kbd {
    background: var(--bg-surface); padding: .1rem .35rem; border-radius: 4px;
    border: 1px solid var(--border-subtle); font-family: monospace; font-size: .72rem;
}

/* Bases-full validation warning */
.event-entry-bases-warning {
    display: flex; align-items: center; gap: .5rem;
    padding: .5rem .75rem;
    margin: 0 var(--space-4) var(--space-2);
    background: rgba(249, 115, 22, 0.14);
    border: 1px solid var(--accent-warn);
    border-radius: var(--radius-1);
    font-size: .85rem; color: var(--accent-warn);
    animation: bases-warning-in 0.3s ease;
}
.event-entry-bases-warning svg { flex-shrink: 0; stroke: var(--accent-warn); }
@keyframes bases-warning-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.event-entry-runners--attention {
    border-color: var(--accent-warn) !important;
    box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.3);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.fc-inline-base-select { margin-left: auto; }
.fc-inline-base-dropdown {
    padding: var(--space-1) var(--space-2);
    border: var(--border-soft);
    border-radius: var(--radius-1);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: .8rem;
    min-width: 4.5rem;
    cursor: pointer;
}

/* Panel actions */
.event-entry-actions {
    padding: var(--space-4); border-top: var(--border-soft); background: var(--bg-elevated);
    display: flex; gap: var(--space-2); flex-shrink: 0;
}
.event-entry-actions .btn { flex: 1; }

/* Undo lineup section (pitcher change / substitution panels) */
.undo-lineup-section { padding: var(--space-3) var(--space-4); }
.undo-lineup-section__divider { border-top: 1px dashed var(--border-color); margin-bottom: var(--space-3); }
.undo-lineup-section__info { margin-bottom: var(--space-2); }
.undo-lineup-section__btn { width: 100%; justify-content: center; color: var(--text-warning); border-color: var(--text-warning); }
.undo-lineup-section__btn:hover { background: var(--text-warning); color: var(--bg-primary); }

/* ════════════════════════════════════════════════════════════
   CENTERED MODAL (Player Detail, etc.)
   ════════════════════════════════════════════════════════════ */

.modal-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6);
    z-index: 1000; display: none; overflow-y: auto;
}
.modal-overlay.active {
    display: flex; justify-content: center; align-items: flex-start;
    padding: 2rem 1rem;
}
.modal-panel {
    background: var(--bg-surface); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg); width: 100%; max-width: 960px;
    max-height: 90vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-4); border-bottom: var(--border-soft);
    background: var(--bg-elevated); flex-shrink: 0;
}
.modal-header__title { font-weight: 800; font-size: 1.1rem; }
.modal-body { padding: var(--space-3); overflow-y: auto; flex: 1 1 auto; }

/* Modal field layout */
.modal-field { display: flex; flex-direction: column; gap: 1px; padding: 2px 0; }
.modal-field__label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
}
.modal-field__value { font-size: .9rem; color: var(--text-primary); }

/* ── Player Detail Modal — tabs & sections ── */
.modal-tabs {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 4px; margin-bottom: var(--space-2);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 10px;
}
.modal-tab {
    display: inline-flex; align-items: center;
    padding: .45rem 1rem; font-size: .85rem; font-weight: 600;
    border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: var(--text-secondary);
    cursor: pointer; text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.modal-tab:hover {
    background: var(--bg-card);
    color: var(--text-primary);
}
.modal-tab--active {
    background: var(--accent-gold-muted);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}
.modal-tab-panel { padding-top: var(--space-2); }
.modal-section-header {
    font-weight: 700; font-size: 0.95rem;
    color: var(--text-primary); margin-bottom: var(--space-2);
}
/* Sort indicators for modal-sortable, modal-sortable-pitching, modal-sortable-gl */
.modal-sortable,
.modal-sortable-pitching,
.modal-sortable-gl {
    cursor: pointer; user-select: none;
}
.modal-sortable::after,
.modal-sortable-pitching::after,
.modal-sortable-gl::after {
    content: ' ⇅'; color: var(--text-muted); font-size: .85rem;
}
.modal-sortable.sorted-asc::after,
.modal-sortable-pitching.sorted-asc::after,
.modal-sortable-gl.sorted-asc::after {
    content: ' ▲'; color: var(--accent-gold); font-size: .85rem;
}
.modal-sortable.sorted-desc::after,
.modal-sortable-pitching.sorted-desc::after,
.modal-sortable-gl.sorted-desc::after {
    content: ' ▼'; color: var(--accent-gold); font-size: .85rem;
}
.modal-sortable.sorted-asc,
.modal-sortable.sorted-desc,
.modal-sortable-pitching.sorted-asc,
.modal-sortable-pitching.sorted-desc,
.modal-sortable-gl.sorted-asc,
.modal-sortable-gl.sorted-desc {
    font-weight: 700; color: var(--accent-gold);
}
/* Player profile page sort indicators (reuses modal patterns) */
.pp-sortable { cursor: pointer; user-select: none; }
.pp-sortable::after { content: ' ⇅'; color: var(--text-muted); font-size: .85rem; }
.pp-sortable.sorted-asc::after { content: ' ▲'; color: var(--accent-gold); font-size: .85rem; }
.pp-sortable.sorted-desc::after { content: ' ▼'; color: var(--accent-gold); font-size: .85rem; }
.pp-sortable.sorted-asc, .pp-sortable.sorted-desc { font-weight: 700; color: var(--accent-gold); }
/* Game log clickable rows */
.modal-gl-row { cursor: pointer; }
.modal-gl-row:hover { background: var(--bg-elevated); }
/* Biography panel */
.modal-bio-card {
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent-gold);
    border-radius: 0 var(--radius-1) var(--radius-1) 0;
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}
.modal-bio-card__header {
    display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: var(--space-2);
}
.modal-bio-card__icon {
    width: 18px; height: 18px; color: var(--accent-gold); flex-shrink: 0;
}
.modal-bio-card__label {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--accent-gold);
}
.modal-bio-card__text {
    white-space: pre-wrap; line-height: 1.6;
    font-size: 0.9375rem; color: var(--text-primary);
}
.modal-bio-card--notes {
    border-left-color: var(--text-muted);
}
.modal-bio-card--notes .modal-bio-card__icon { color: var(--text-muted); }
.modal-bio-card--notes .modal-bio-card__label { color: var(--text-muted); }
.modal-bio-card--notes .modal-bio-card__text {
    color: var(--text-secondary); font-size: 0.875rem;
}
.modal-bio-links-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: var(--space-2);
}
.modal-bio-link-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-1);
    transition: background 0.15s ease;
}
.modal-bio-link-item:hover { background: var(--bg-surface); }
.modal-bio-link-item__icon {
    width: 16px; height: 16px; color: var(--accent-gold); flex-shrink: 0;
}
.modal-bio-link-item a {
    color: var(--accent-gold); word-break: break-all;
    text-decoration: none; font-size: 0.875rem;
}
.modal-bio-link-item a:hover { text-decoration: underline; }
.modal-bio-empty-state {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: var(--space-2);
    padding: var(--space-6) var(--space-3);
    color: var(--text-muted); text-align: center;
}
.modal-bio-empty-state__icon {
    width: 32px; height: 32px; color: var(--text-muted); opacity: 0.5;
}
.modal-bio-empty-state__text {
    font-size: 0.875rem;
}
/* Sanction reason truncation */
.modal-sanction-reason {
    max-width: 250px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}

/* ── Delete Confirmation Modal ── */
.delete-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1100;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.delete-modal-overlay.active {
    display: flex;
}
.delete-modal {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
}
.delete-modal__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-default);
    background: var(--accent-danger-muted);
}
.delete-modal__header-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--accent-danger);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.delete-modal__header-icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #fff;
}
.delete-modal__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}
.delete-modal__body {
    padding: 1.5rem;
}
.delete-modal__name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}
.delete-modal__warning {
    font-size: 0.9rem;
    color: var(--accent-danger);
    margin-bottom: 0.75rem;
}
.delete-modal__deps {
    background: var(--accent-danger-muted);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}
.delete-modal__deps-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-danger);
    margin-bottom: 0.5rem;
}
.delete-modal__deps-list {
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding-left: 1.25rem;
    margin: 0;
}
.delete-modal__deps-list li {
    margin-bottom: 0.25rem;
}
.delete-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-default);
    background: var(--bg-elevated);
}

/* ── DC Modal (global confirm / alert) ── */
.dc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1200;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.dc-modal-overlay.active {
    display: flex;
}
dialog.dc-modal {
    color: var(--text-primary);
    border: none;
    padding: 0;
}
dialog.dc-modal::backdrop {
    background: rgba(0, 0, 0, 0.6);
}
.dc-modal {
    background: var(--bg-surface);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    overflow: hidden;
    animation: dcModalIn 0.15s ease-out;
}
@keyframes dcModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dc-modal__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-default);
}
.dc-modal__header--danger  { background: var(--accent-danger-muted); }
.dc-modal__header--warning { background: rgba(249, 115, 22, 0.12); }
.dc-modal__header--info    { background: var(--accent-gold-muted); }
.dc-modal__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.dc-modal__icon svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #fff;
}
.dc-modal__icon--danger  { background: var(--accent-danger); }
.dc-modal__icon--warning { background: var(--accent-warn); }
.dc-modal__icon--info    { background: var(--accent-gold); }
.dc-modal__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}
.dc-modal__body {
    padding: 1.5rem;
}
.dc-modal__message {
    font-size: 0.95rem;
    color: var(--text-secondary);
    margin: 0;
}
.dc-modal__detail {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.75rem;
    white-space: pre-line;
}
.dc-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-default);
    background: var(--bg-elevated);
}

/* A modal holding a form rather than a question: wider, and its body scrolls
   so a phone can always reach the Save button. */
.dc-modal--form { max-width: 640px; }
.dc-modal__body--scroll {
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@media (max-width: 600px) {
    .dc-modal--form { max-height: 92vh; }
    .dc-modal__body--scroll { max-height: 60vh; }
}

/* A player who is suspended, or not allowed to play, wherever a lineup is
   entered.

   🔴 A native <option> CANNOT be coloured on macOS — Chrome hands the list to
   the operating system, which ignores CSS. Every select on the page goes
   through Tom Select (dc_typeahead.js), which renders real elements, so the
   red and the badge live on the rendered row. The option rule below is kept
   for the browsers that do honour it. */
.dc-option--blocked,
option.dc-option--blocked {
    color: var(--accent-danger);
    font-weight: 600;
}
.ts-mark-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.ts-mark-row--blocked,
.ts-mark-row--blocked > span:first-child {
    color: var(--accent-danger);
    font-weight: 600;
}
.ts-mark-row--blocked .badge { flex-shrink: 0; }
/* An option the federation has barred is unselectable; Tom Select drops
   data-selectable from it. */
.ts-dropdown .option:not([data-selectable]) .ts-mark-row--blocked > span:first-child {
    opacity: 0.85;
}

/* A control with a button beside it (a picker plus "Add ..."). Stacks on a
   phone so neither half is squeezed. */
.dc-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.dc-input-row > .form-input { flex: 1 1 auto; min-width: 0; }
.dc-input-row > .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) {
    .dc-input-row { flex-direction: column; align-items: stretch; }
}

/* Player avatar (profile page) */
.player-avatar__img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
}
.player-avatar__initials {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    color: white;
}

/* Player link (clickable player names) */
.player-link {
    color: var(--accent-gold);
    text-decoration: none;
    cursor: pointer;
    cursor: pointer;
    transition: color 0.15s;
}
.player-link:hover {
    text-decoration: underline;
}
.player-link::after {
    content: '';
    display: inline-block;
    width: 0; height: 0;
    margin-left: 0;
    opacity: 0;
    transition: width 0.15s, opacity 0.15s, margin-left 0.15s;
    vertical-align: middle;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23D4A843' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'%3E%3C/path%3E%3Ccircle cx='12' cy='7' r='4'%3E%3C/circle%3E%3C/svg%3E") no-repeat center/contain;
}
.player-link:hover::after {
    width: 12px; height: 12px;
    margin-left: 4px;
    opacity: .7;
}

/* ── Global Search (Cmd+K) ── */
.global-search-trigger {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-md);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    background: transparent; color: var(--text-muted);
    cursor: pointer; transition: all 0.15s;
}
.global-search-trigger:hover {
    background: var(--bg-elevated); color: var(--text-primary);
}

/* ── Language Switcher (custom dropdown for Twemoji compat) ── */
.lang-switcher {
    display: flex;
    align-items: center;
}
.lang-dropdown {
    position: relative;
}
.lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-body);
    cursor: pointer;
    padding: 6px 8px;
    height: 36px;
    line-height: 1;
    transition: all 0.15s;
}
.lang-trigger:hover {
    background-color: var(--bg-elevated);
    color: var(--text-primary);
}
.lang-chevron {
    opacity: 0.5;
    transition: transform 0.15s;
}
.lang-trigger[aria-expanded="true"] .lang-chevron {
    transform: rotate(180deg);
}
.lang-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    list-style: none;
    margin: 0;
    padding: 4px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    z-index: 200;
    min-width: 80px;
    /* Never let the list run off-screen (e.g. inside the mobile sidebar
       footer, whose container clips with overflow:hidden). */
    max-height: 60vh;
    overflow-y: auto;
}
/* Open upward when there isn't enough room below the trigger (set by JS).
   Used by the language switcher inside the mobile sidebar footer, which
   sits at the very bottom of the drawer. */
.lang-menu--up {
    top: auto;
    bottom: calc(100% + 4px);
}
.lang-menu--open {
    display: block;
}
.lang-option {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.1s;
}
.lang-option:hover {
    background: var(--bg-surface);
    color: var(--text-primary);
}
.lang-option--active {
    color: var(--text-primary);
    font-weight: 600;
}
.lang-flag img.emoji {
    width: 1.15em;
    height: 1.15em;
}
.lang-flag svg.lang-svg {
    width: 1.15em;
    height: 1.15em;
    vertical-align: -0.15em;
    border-radius: 2px;
}
@media (max-width: 480px) {
    .lang-trigger { font-size: 12px; padding: 4px 6px; height: 32px; }
}

/* ── Tap-to-show tooltip bubble (touch devices) ──────────────────────────
   Driven by static/js/dc_tooltip.js. Shows the text of any `title` attribute
   on tap, since touch devices have no hover to reveal native tooltips. */
.dc-tip {
    position: fixed;
    z-index: 10000;
    max-width: 280px;
    padding: 8px 11px;
    background: var(--bg-elevated, #1f2430);
    color: var(--text-primary, #f5f5f5);
    border: 1px solid var(--border-default, rgba(255,255,255,0.12));
    border-radius: var(--radius-md, 8px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.45);
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.45;
    text-align: left;
    /* pre-line, not normal: a title written on three lines is meant to READ as
       three lines. Ordinary wrapping is unaffected. */
    white-space: pre-line;
    pointer-events: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
}
.dc-tip--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.global-search-panel {
    background: var(--bg-surface); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg); width: 100%; max-width: 640px;
    max-height: 480px; display: flex; flex-direction: column;
    overflow: hidden;
}
.global-search-header {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-bottom: var(--border-soft);
}

/* ── Spotlight behaviour: compact single line until the user types ── */
/* Until the panel is .is-expanded (2+ characters typed) it is just the search
   line — the results body, the keyboard-hint footer and the header divider are
   hidden. The `:not(.is-expanded)` panel scope gives these higher specificity
   than the plain .global-search-body / -footer rules below, so it wins
   regardless of source order. */
.global-search-panel:not(.is-expanded) .global-search-body,
.global-search-panel:not(.is-expanded) .global-search-footer { display: none; }
.global-search-panel:not(.is-expanded) .global-search-header { border-bottom-color: transparent; }
.global-search-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 1rem; color: var(--text-primary);
    font-family: inherit;
}
.global-search-input::placeholder { color: var(--text-muted); }
.global-search-kbd {
    font-family: 'JetBrains Mono', monospace; font-size: .7rem;
    padding: 2px 6px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    color: var(--text-muted); background: var(--bg-elevated);
    line-height: 1.4;
}
/* Close control — looks like the "ESC" chip on desktop, tappable ✕ on touch. */
.global-search-close {
    font-family: 'JetBrains Mono', monospace; font-size: .7rem;
    padding: 2px 6px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    color: var(--text-muted); background: var(--bg-elevated);
    line-height: 1.4; cursor: pointer; flex-shrink: 0;
}
.global-search-close:hover { color: var(--text-primary); }
.global-search-close__x { display: none; }
/* Touch devices (phones + tablets): there are no Esc / arrow / Enter keys, so
   swap the "ESC" chip for a large tappable ✕ and hide the keyboard-hint footer.
   `.global-search-panel .global-search-footer` (specificity 0,2,0) wins over the
   plain `.global-search-footer { display:flex }` so the footer stays hidden even
   when the panel is expanded. Results are opened by tapping them. */
@media (pointer: coarse) {
    .global-search-close {
        font-family: inherit; font-size: 1.6rem; line-height: 1;
        border: none; background: transparent; color: var(--text-muted);
        padding: 0; min-width: 40px; min-height: 40px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .global-search-close__esc { display: none; }
    .global-search-close__x { display: inline; }
    .global-search-panel .global-search-footer { display: none; }
}
.global-search-body {
    flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4);
}
.global-search-empty,
.global-search-no-results {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: var(--space-2);
    padding: var(--space-6) 0; color: var(--text-muted);
    font-size: .9rem;
}
.global-search-loading { padding: var(--space-4) 0; }
.global-search-category {
    display: flex; align-items: center; gap: 6px;
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--text-muted);
    padding: var(--space-2) 0 var(--space-1);
}
.global-search-category:not(:first-child) {
    margin-top: var(--space-2);
    border-top: var(--border-soft);
    padding-top: var(--space-3);
}
.global-search-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    border-radius: var(--radius-md); cursor: pointer;
    text-decoration: none; color: var(--text-primary);
    transition: background 0.1s;
}
.global-search-item:hover,
.global-search-item.active {
    background: var(--bg-elevated);
}
.global-search-item__display {
    font-size: .9rem; font-weight: 600;
}
.global-search-item__subtitle {
    font-size: .78rem; color: var(--text-muted);
    margin-left: auto; white-space: nowrap;
}
.global-search-footer {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    border-top: var(--border-soft); font-size: .72rem;
    color: var(--text-muted);
}
.global-search-footer kbd {
    font-family: 'JetBrains Mono', monospace; font-size: .65rem;
    padding: 1px 4px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    background: var(--bg-elevated); margin-right: 2px;
}
@media (max-width: 640px) {
    .global-search-panel {
        max-width: 100%; max-height: 90vh;
        border-radius: var(--radius-md);
    }
}

/* ── Player Avatar (Modal) ── */
.player-avatar-container {
    position: relative;
    display: inline-block;
}
.player-avatar__initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    user-select: none;
    color: #fff;
    font-weight: 700;
    font-size: 2rem;
    letter-spacing: 0.05em;
    border-radius: var(--radius-xl);
}
.player-avatar__flag {
    position: absolute;
    bottom: -2px;
    right: -2px;
    font-size: 1.25rem;
    line-height: 1;
    background: var(--bg-card);
    border-radius: 50%;
    padding: 2px;
    border: 2px solid var(--bg-card);
    z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   SCORING GRID RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .scoring-grid__bo-cell,
    .scoring-grid__bo-header { width: 30px; min-width: 30px; max-width: 30px; }
    .scoring-grid__uniform-cell,
    .scoring-grid__uniform-header { left: 30px; width: 34px; min-width: 34px; max-width: 34px; font-size: .75rem; }
    .scoring-grid__name-cell,
    .scoring-grid__name-header { left: 64px; min-width: 80px; max-width: 110px; }
    .scoring-grid__pos-cell,
    .scoring-grid__pos-header { left: 144px; width: 36px; min-width: 36px; max-width: 36px; font-size: .65rem; }
    .scoring-grid__player-name { font-size: .78rem; }
    .scoring-grid__batting-order { width: 22px; height: 22px; font-size: .75rem; }
    .scoring-grid__cell { width: 98px; min-width: 98px; height: 98px; }
    .scoring-grid__inning-header { width: 98px; min-width: 98px; }
    .scoring-grid__event-code { font-size: 1.1rem; }
    .event-entry-panel { max-width: 100%; }
    .scoring-grid__stat-header,
    .scoring-grid__stat-cell { width: 32px; min-width: 32px; max-width: 32px; font-size: .55rem; }
    .scoring-grid__inning-stats--labels { width: 98px; }
}
@media (max-width: 480px) {
    .scoring-grid__bo-cell,
    .scoring-grid__bo-header { width: 26px; min-width: 26px; max-width: 26px; }
    .scoring-grid__uniform-cell,
    .scoring-grid__uniform-header { left: 26px; width: 30px; min-width: 30px; max-width: 30px; }
    .scoring-grid__name-cell,
    .scoring-grid__name-header { left: 56px; min-width: 60px; max-width: 80px; }
    .scoring-grid__pos-cell,
    .scoring-grid__pos-header { display: none; }
    .scoring-grid__batting-order { width: 20px; height: 20px; font-size: .7rem; }
    .scoring-grid__cell { width: 84px; min-width: 84px; height: 84px; }
    .scoring-grid__inning-header { width: 84px; min-width: 84px; }
    .scoring-grid__stat-header,
    .scoring-grid__stat-cell { width: 28px; min-width: 28px; max-width: 28px; font-size: .5rem; }
    .scoring-grid__inning-stats--labels { width: 84px; }
}

/* ════════════════════════════════════════════════════════════
   STATISTICS EXPLORER
   ════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════
   STATISTICS EXPLORER
   ════════════════════════════════════════════════════════════ */

/* Level 1: Batting/Pitching compact toggle switch */
.stats-type-selector {
    display: inline-flex; gap: 2px; margin-bottom: var(--space-3);
    background: var(--bg-inset, var(--bg-elevated));
    border-radius: var(--radius-2); padding: 3px;
    border: 1px solid var(--border-default);
}
.stats-type-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: .35rem .85rem; font-size: .78rem; font-weight: 700;
    border: none; border-radius: calc(var(--radius-2) - 2px);
    background: transparent; color: var(--text-secondary);
    cursor: pointer; text-decoration: none; transition: all .15s ease;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.stats-type-btn:hover { color: var(--text-primary); }
.stats-type-btn--active {
    background: var(--bg-surface); color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,.15); font-weight: 800;
}

/* Level 2: Player/Team/Tournament segmented control */
.stats-level-selector {
    display: inline-flex; gap: 0; margin-bottom: var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-2); padding: 4px; flex-wrap: wrap;
}
.stats-level-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: .5rem 1.1rem; font-size: .92rem; font-weight: 700;
    border: none; border-radius: calc(var(--radius-2) - 3px);
    background: transparent; color: var(--text-secondary);
    cursor: pointer; text-decoration: none; transition: all .15s ease;
}
.stats-level-btn:hover { color: var(--text-primary); background: var(--bg-surface); }
.stats-level-btn--active {
    background: var(--accent-gold); color: #06080C;
    font-weight: 800; box-shadow: 0 1px 2px rgba(0,0,0,.1);
}

/* Statistics "Rounds" selector (WBSC-style) — shared by batting/pitching/
   fielding/leaderboard. Sits under the level selector. */
.stats-round-selector {
    display: inline-flex; align-items: center; gap: 8px;
    margin-bottom: var(--space-4);
}
.stats-round-selector__label {
    font-size: .82rem; font-weight: 700; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: .03em;
}
.stats-round-selector select { min-width: 180px; }
.stats-round-selector__hint {
    margin: .35rem 0 var(--space-4); font-size: .82rem;
    color: var(--text-secondary); max-width: 60ch;
}

/* Phase tabs — shared pill style for Standings, Rankings, Statistics */
.phase-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
}
.phase-tab {
    display: inline-flex;
    align-items: center;
    padding: .45rem .9rem;
    font-size: .88rem;
    font-weight: 600;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}
.phase-tab:hover {
    border-color: var(--accent-gold);
    color: var(--text-primary);
}
.phase-tab.active {
    background: var(--accent-gold-muted);
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}
/* Hierarchical scope dropdown */
.scope-dropdown { position: relative; display: inline-block; }
.scope-dropdown__trigger {
    display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
}
.scope-dropdown__chevron { width: 14px; height: 14px; transition: transform .15s; }
.scope-dropdown[open] .scope-dropdown__chevron,
.scope-dropdown.open .scope-dropdown__chevron { transform: rotate(180deg); }
.scope-dropdown__menu {
    display: none; position: absolute; top: calc(100% + 4px); left: 0;
    z-index: 50; min-width: 220px; max-height: 360px; overflow-y: auto;
    background: var(--bg-elevated); border: 1px solid var(--border-default);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.25));
    padding: .35rem 0; list-style: none; margin: 0;
}
.scope-dropdown.open .scope-dropdown__menu { display: block; }
.scope-dropdown__header {
    padding: .4rem .75rem; font-size: .75rem; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em;
    cursor: default; user-select: none;
}
.scope-dropdown__header:not(:first-child) {
    margin-top: .25rem; border-top: 1px solid var(--border-subtle); padding-top: .5rem;
}
.scope-dropdown__item a {
    display: block; padding: .35rem .75rem; font-size: .85rem; font-weight: 500;
    color: var(--text-primary); text-decoration: none; border-radius: var(--radius-sm);
    margin: 0 .25rem;
}
.scope-dropdown__item a:hover { background: var(--bg-hover); color: var(--accent-gold); }
.scope-dropdown__item.active a {
    background: var(--accent-gold); color: var(--bg-base); font-weight: 700;
}

.stats-tabs {
    display: flex; gap: 0; border-bottom: 2px solid var(--border-subtle);
    margin-bottom: var(--space-4);
}
.stats-tab {
    padding: .6rem 1.2rem; font-size: .88rem; font-weight: 700;
    color: var(--text-secondary); text-decoration: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    transition: all .15s ease;
}
.stats-tab:hover { color: var(--text-primary); }
.stats-tab--active {
    color: var(--accent-gold); border-bottom-color: var(--accent-gold);
}

.stats-meta {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3);
    font-size: .82rem; color: var(--text-muted);
}

.stats-per-page {
    display: inline-flex; align-items: center; gap: var(--space-1);
}
.stats-per-page a {
    padding: 2px 8px; border-radius: 4px; text-decoration: none;
    color: var(--text-secondary); font-size: .82rem;
}
.stats-per-page a:hover { background: var(--bg-elevated); }
.stats-per-page a.active { background: var(--accent-gold); color: #06080C; font-weight: 700; }

/* ═══ CHARTS DASHBOARD ═══ */
.charts-section { margin-top: var(--space-5); }
.charts-section__header { margin-bottom: var(--space-4); }
.charts-section__header h2 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 1px; }

.chart-grid { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.chart-grid--2 { grid-template-columns: 1fr 1fr; }
.chart-grid--3 { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 1024px) { .chart-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .chart-grid--2, .chart-grid--3 { grid-template-columns: 1fr; } }

.chart-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); position: relative; }
.chart-card__header .chart-card__title { margin-bottom: 0; }
.chart-card__title { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary); margin-bottom: var(--space-2); }

.chart-help-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-subtle);
    background: var(--bg-elevated); color: var(--text-muted); cursor: pointer;
    padding: 0; flex-shrink: 0; transition: color 0.15s, border-color 0.15s;
}
.chart-help-btn:hover { color: var(--text-primary); border-color: var(--border-default); }

.chart-help-popover {
    display: none; position: absolute; top: 100%; right: 0; z-index: 20;
    margin-top: var(--space-1); padding: var(--space-3);
    background: var(--bg-elevated); border: 1px solid var(--border-default);
    border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.15);
    max-width: 340px; font-size: 0.82rem; line-height: 1.5; color: var(--text-primary);
}
.chart-help-popover.active { display: block; }
@media (hover: hover) {
    .chart-help-btn:hover + .chart-help-popover,
    .chart-help-popover:hover { display: block; }
}

/* KPI / stat cards: anchor the help "?" in the top-right corner. */
.kpi-card, .stat-card { position: relative; }
.kpi-card > .chart-help-btn,
.stat-card > .chart-help-btn {
    position: absolute; top: var(--space-2); right: var(--space-2);
    width: 20px; height: 20px;
}
.kpi-card > .chart-help-btn .icon-sm,
.stat-card > .chart-help-btn .icon-sm { width: 13px; height: 13px; }
.kpi-card > .chart-help-popover,
.stat-card > .chart-help-popover { max-width: 280px; text-align: left; }
.kpi-card__label, .stat-card__label { padding-right: 22px; }

/* ─── CLUB CELL: "N Teams" trigger + team-list popover ─── */
/* Used in the Tournament Stats Club column (full profile + player modal) when a
   player appeared for multiple clubs in one edition. Purely visual — no stats
   are aggregated; the popover just lists each team with its country flag. */
.dc-teams { position: relative; display: inline-block; }
.dc-teams__trigger {
    background: none; border: none; padding: 0; cursor: pointer;
    font: inherit; color: var(--accent, var(--text-primary));
    text-decoration: underline; text-underline-offset: 2px;
}
.dc-teams__trigger:hover { color: var(--text-primary); }
/* The popover is a floating element on <body> (position:fixed) so the stats
   tables' overflow:auto / card overflow:hidden containers cannot clip it. Sits
   above the player-detail modal overlay. */
.dc-teams__pop {
    display: none; padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated); border: 1px solid var(--border-default);
    border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.15);
    max-width: 320px; font-size: 0.82rem; line-height: 1.6;
    color: var(--text-primary); white-space: nowrap; text-align: left;
}
.dc-teams__pop--float { position: fixed; z-index: 1100; }
.dc-teams__pop.active { display: block; }
.dc-teams__item { display: block; }

.chart-container { width: 100%; height: 380px; }
.chart-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted); font-size: 0.9rem; }

/* ─── EMPTY STATE COMPONENT ─── */
.dc-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-6) var(--space-4);
    gap: var(--space-3);
}
.dc-empty-state__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-gold-muted);
    color: var(--accent-gold);
    flex-shrink: 0;
}
.dc-empty-state__icon svg {
    width: 28px;
    height: 28px;
}
.dc-empty-state__message {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
}
.dc-empty-state__hint {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
    max-width: 360px;
}
.dc-empty-state__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    flex-wrap: wrap;
    justify-content: center;
}
/* Inline variant for table cells */
.dc-empty-state--inline {
    padding: var(--space-4) var(--space-3);
    gap: var(--space-2);
}
.dc-empty-state--inline .dc-empty-state__icon { display: none; }
.dc-empty-state--inline .dc-empty-state__message {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-muted);
    font-style: italic;
}

/* ─── LOADING STATES & SKELETON LOADERS ─── */

/* Top progress bar — shown during page navigation */
.dc-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-gold-hover), var(--accent-gold));
    z-index: 2000;
    opacity: 0;
    transition: opacity .15s;
    pointer-events: none;
}
.dc-progress-bar--active {
    opacity: 1;
    width: 85%;
    transition: opacity .15s, width 8s cubic-bezier(.1, .5, .3, 1);
}
.dc-progress-bar--done {
    width: 100% !important;
    opacity: 0;
    transition: width .15s, opacity .3s .15s;
}

/* Skeleton shimmer animation */
@keyframes dc-skeleton-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
.dc-skeleton {
    background: var(--bg-elevated);
    background-image: linear-gradient(90deg, var(--bg-elevated) 0, var(--bg-card) 40%, var(--bg-elevated) 80%);
    background-size: 400px 100%;
    animation: dc-skeleton-shimmer 1.4s ease infinite;
    border-radius: var(--radius-sm);
}
.dc-skeleton--text {
    height: .85rem;
    width: 60%;
    margin-bottom: .5rem;
    border-radius: 4px;
}
.dc-skeleton--text-short {
    height: .85rem;
    width: 35%;
    margin-bottom: .5rem;
    border-radius: 4px;
}
.dc-skeleton--chart {
    width: 100%;
    height: 380px;
    border-radius: var(--radius-sm);
}
.dc-skeleton--table-row {
    height: 1.8rem;
    width: 100%;
    margin-bottom: .4rem;
    border-radius: 4px;
}
.dc-skeleton--badge {
    height: 1.4rem;
    width: 4rem;
    border-radius: 999px;
}
.dc-skeleton--avatar {
    width: 100px;
    height: 100px;
    border-radius: var(--radius-xl);
    flex-shrink: 0;
}

/* Button loading state */
.btn--loading {
    position: relative;
    pointer-events: none;
    opacity: .75;
}
.btn--loading .btn__text {
    visibility: hidden;
}
.btn--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: save-spin .6s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   DATA-RETRIEVAL LOADER (reusable — window.dcLoader)
   A small spinner + label. Global centred overlay for page navigations
   and generic async waits; inline variant for a panel/modal body.
   ═══════════════════════════════════════════════════════════════ */
.dc-loader-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--border-default);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    animation: dc-spin .7s linear infinite;
    flex-shrink: 0;
}
.dc-loader-label {
    font-weight: 600;
    font-size: .95rem;
    color: var(--text-primary);
}

/* Global centred overlay */
.dc-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000; /* above modals (1000) and the mobile sidebar (10001) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}
.dc-loader-overlay.dc-loader-overlay--active {
    opacity: 1;
    pointer-events: auto;
}
.dc-loader-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: calc(100vw - 2 * var(--space-4));
}

/* Inline variant — centred inside a container (e.g. a modal body) */
.dc-loader-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-4);
    color: var(--text-secondary);
}
.dc-loader-inline .dc-loader-label {
    color: var(--text-secondary);
}

/* Respect reduced-motion: keep a gentle rotation (still signals activity)
   rather than a fast spin. */
@media (prefers-reduced-motion: reduce) {
    .dc-loader-spinner {
        animation-duration: 1.8s;
    }
}

/* ═══════════════════════════════════════════════════════════════
   "STATISTICS UPDATING…" BANNER (stats pages, during MV refresh)
   ═══════════════════════════════════════════════════════════════ */
.stats-updating-banner {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 8px var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--accent-gold-muted);
    border: 1px solid var(--accent-gold);
    border-radius: var(--radius-md, 10px);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
}
.stats-updating-banner__spinner {
    width: 15px;
    height: 15px;
    border: 2px solid var(--accent-gold-muted);
    border-top-color: var(--accent-gold);
    border-radius: 50%;
    animation: dc-spin .7s linear infinite;
    flex-shrink: 0;
}
.stats-updating-banner__text { flex: 1; min-width: 0; }
.stats-updating-banner__reload {
    flex-shrink: 0;
    padding: 3px 10px;
    border: 1px solid var(--accent-gold);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.8rem;
    cursor: pointer;
}
.stats-updating-banner__reload:hover { background: var(--accent-gold-muted); }
/* Refresh finished — shift to a calm success look. */
.stats-updating-banner--done {
    background: var(--accent-live-muted);
    border-color: var(--accent-live);
}
@media (prefers-reduced-motion: reduce) {
    .stats-updating-banner__spinner { animation-duration: 1.8s; }
}

/* ─── TODAY'S GAMES WIDGET ─── */
.todays-games {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    margin-bottom: var(--space-4);
    overflow: visible;
}
.todays-games__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.todays-games__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.04em;
    color: var(--text-primary);
}
.todays-games__date {
    font-size: 0.8rem;
    color: var(--text-muted);
}
/* Date navigation controls */
.date-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    position: relative;
}
.date-nav__btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.date-nav__btn:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.date-nav__btn:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}
.date-nav__btn svg {
    width: 14px;
    height: 14px;
}
.date-nav__picker-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.date-nav__picker-btn:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.date-nav__picker-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}
.date-nav__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Custom calendar dropdown */
.dc-cal {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    padding: 12px;
    min-width: 260px;
    margin-top: 4px;
}
.dc-cal--open { display: block; }
.dc-cal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dc-cal__month {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-family: inherit;
}
.dc-cal__month:hover { color: var(--accent-gold); background: var(--bg-hover); }
.dc-cal__ym-picker {
    padding: 4px 0;
}
.dc-cal__ym-year-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.dc-cal__ym-year {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.dc-cal__ym-year--clickable { cursor: pointer; }
.dc-cal__ym-year--clickable:hover { color: var(--accent-gold); }
.dc-cal__ym-input {
    width: 52px;
    font-weight: 700;
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-hover);
    border: 1.5px solid var(--accent-gold);
    border-radius: var(--radius-sm);
    text-align: center;
    padding: 1px 2px;
    outline: none;
    -moz-appearance: textfield;
}
.dc-cal__ym-input::-webkit-outer-spin-button,
.dc-cal__ym-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.dc-cal__ym-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}
.dc-cal__ym-btn {
    padding: 6px 4px;
    font-size: 0.7rem;
    font-weight: 500;
    border: none;
    background: none;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-family: inherit;
}
.dc-cal__ym-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.dc-cal__ym-btn--current {
    color: var(--accent-gold);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--accent-gold);
}
.dc-cal__nav {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    line-height: 1;
}
.dc-cal__nav:hover { color: var(--accent-gold); background: var(--bg-hover); }
.dc-cal__days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: 4px;
    letter-spacing: 0.03em;
}
.dc-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.dc-cal__day {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin: 0 auto;
    font-size: 0.75rem;
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-secondary);
    border: none;
    background: none;
    transition: background 0.15s, color 0.15s;
}
.dc-cal__day:hover { background: var(--bg-hover); color: var(--text-primary); }
.dc-cal__day--other { opacity: 0.3; }
.dc-cal__day--today {
    color: var(--accent-gold);
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--accent-gold);
}
.dc-cal__day--selected {
    background: var(--accent-gold) !important;
    color: #06080C !important;
    font-weight: 700;
}
.dc-cal__day--has-game::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-live);
}
.dc-cal__day--selected.dc-cal__day--has-game::after {
    background: #06080C;
}
.dc-cal__footer {
    margin-top: 8px;
    text-align: center;
    border-top: 1px solid var(--border-subtle);
    padding-top: 8px;
}
.dc-cal__link {
    background: none;
    border: none;
    color: var(--accent-gold);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}
.dc-cal__link:hover { text-decoration: underline; }

/* ── Mode toggle (Date / Period) ── */
.mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.mode-toggle__btn {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--bg-elevated);
    color: var(--text-muted);
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    line-height: 1.4;
}
.mode-toggle__btn:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.mode-toggle__btn:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}
.mode-toggle__btn.active {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}
.mode-toggle__btn svg { width: 12px; height: 12px; }

/* ── Period date-range navigation ── */
.period-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    position: relative;
}
.period-nav__field {
    display: flex;
    align-items: center;
    gap: 3px;
    position: relative;
}
.period-nav__label {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.period-nav__separator {
    color: var(--text-muted);
    font-size: 0.7rem;
    margin: 0 1px;
}

/* ── Scorebug date header (period mode) ── */
.scorebug__date-header {
    font-size: 0.55rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.02em;
    margin-bottom: 1px;
    opacity: 0.7;
}

@media (max-width: 480px) {
    .period-nav {
        flex-wrap: wrap;
        gap: 4px;
    }
}

.todays-games__section {
    margin-bottom: var(--space-3);
}
.todays-games__section:last-child {
    margin-bottom: 0;
}
.todays-games__section-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}
.todays-games__section-label--live {
    color: var(--accent-live);
}
.todays-games__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-2);
}
@media (max-width: 480px) {
    .todays-games__cards {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}
.todays-games__empty {
    text-align: center;
    padding: var(--space-4) var(--space-2);
    color: var(--text-muted);
}
.todays-games__next {
    margin-top: var(--space-2);
    color: var(--accent-gold);
    font-size: 0.85rem;
}

/* Scorebug — mini game card */
.scorebug {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    color: var(--text-primary);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.scorebug:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    border-color: var(--border-strong);
}
.scorebug--live {
    border-color: var(--accent-live);
    border-width: 2px;
}
.scorebug--final {
    background: var(--bg-elevated);
    border-left: 3px solid var(--accent-gold);
}
.scorebug--final .scorebug__badge {
    color: var(--accent-gold);
}
.scorebug__team {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 0.85rem;
    line-height: 1.4;
}
.scorebug__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.scorebug__team--winner .scorebug__name,
.scorebug__team--winner .scorebug__score {
    font-weight: 800;
}

/* Games list — the team that won (and its score) in gold + bold. Mirrors the
   app's winner convention (scorebug bold, box-score gold score). */
.game-team--won,
.score-val--won {
    font-weight: 800;
    color: var(--accent-gold);
}
.scorebug__score {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 1.5em;
    text-align: right;
    flex-shrink: 0;
}
.scorebug__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.scorebug__badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}
.scorebug__badge--live {
    color: var(--accent-live);
}
.scorebug__timer {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    background: #0f172a;
    color: #94a3b8;
    min-width: 38px;
    text-align: center;
    display: inline-block;
}
.scorebug__timer.timer-green { color: #22c55e; }
.scorebug__timer.timer-yellow { color: #eab308; }
.scorebug__timer.timer-red { color: #ef4444; animation: live-pulse 1.5s ease-in-out infinite; }
.scorebug__outs {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.out-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
    animation: live-pulse 1.5s ease-in-out infinite;
}
.scorebug__time {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-1) 0;
}

/* Recap popover on final game scorebugs */
.scorebug__recap-wrap {
    position: relative;
}
.scorebug__recap-wrap .scorebug {
    /* Ensure scorebug fills the wrapper for grid sizing */
    height: 100%;
}
/* ── Broadcast icon (scorebug cards) ── */
.scorebug__broadcast-wrap {
    position: relative;
}
.scorebug__broadcast-wrap .scorebug {
    height: 100%;
}
.scorebug__broadcast-btn {
    position: absolute;
    bottom: 6px;
    left: 6px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: var(--bg-elevated);
    padding: 0;
    color: var(--accent-gold);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: color 0.15s, background 0.15s;
}
.scorebug__broadcast-btn:hover {
    color: var(--text-primary);
    background: var(--accent-gold-muted);
}
.scorebug__broadcast-btn svg {
    width: 14px;
    height: 14px;
}
/* Final cards: shift broadcast icon to bottom-right (left of recap btn) */
.scorebug__broadcast-btn--final {
    left: auto;
    right: 32px;
}
/* ── Broadcast icon (list views + page headers) ── */
.broadcast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-gold);
    margin-left: 6px;
    text-decoration: none;
    vertical-align: middle;
    transition: color 0.15s;
}
.broadcast-icon:hover {
    color: var(--text-primary);
}
.broadcast-icon svg {
    width: 16px;
    height: 16px;
}

.scorebug__recap-btn {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: var(--bg-elevated);
    padding: 0;
    cursor: pointer;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}
.scorebug__recap-btn:hover {
    color: var(--accent-gold);
    background: var(--accent-gold-muted);
}
.scorebug__recap-btn svg {
    width: 14px;
    height: 14px;
}
.scorebug__recap-popover {
    display: none;
    position: fixed;
    z-index: 10000;
    width: 280px;
    max-height: 200px;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--accent-gold);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--text-primary);
    text-align: left;
    font-weight: 400;
    letter-spacing: normal;
}
.scorebug__recap-popover.is-open {
    display: block;
}

/* Pulsing live dot */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent-live);
    animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ─── CAROUSEL (Today's Games) ─── */
.carousel {
    position: relative;
}
.carousel__viewport {
    overflow-x: clip;
    overflow-y: visible;
}
.carousel__track {
    display: flex;
    gap: var(--space-2);
    will-change: transform;
}
.carousel__track--animating {
    transition: transform 0.4s ease;
}

/* Inline section dividers */
.carousel__divider {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 60px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    writing-mode: horizontal-tb;
}
.carousel__divider--live {
    color: var(--accent-live);
}
.carousel__divider--final {
    color: var(--accent-gold);
}

/* Slides */
.carousel__slide {
    flex-shrink: 0;
}

/* Controls */
.carousel__controls {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.carousel__btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border-default);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.carousel__btn:hover {
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.carousel__btn:focus-visible {
    outline: none;
    box-shadow: var(--focus);
}
.carousel__btn svg {
    width: 14px;
    height: 14px;
}

/* Mini scorebug for carousel cards */
.scorebug--mini {
    width: 160px;
    padding: var(--space-1) var(--space-2);
}
.scorebug__tournament {
    font-size: 0.55rem;
    color: var(--text-muted);
    display: flex;
    white-space: nowrap;
    letter-spacing: 0.02em;
    margin-bottom: 1px;
    opacity: 0.7;
    min-width: 0;
}
.scorebug__tournament-id {
    flex-shrink: 0;
    font-weight: 600;
}
.scorebug__sep {
    flex-shrink: 0;
    opacity: 0.5;
}
.scorebug__edition-id {
    overflow: hidden;
    text-overflow: ellipsis;
}
.scorebug--mini .scorebug__team {
    font-size: 0.78rem;
}
.scorebug--mini .scorebug__score {
    font-size: 0.95rem;
}
.scorebug--mini .scorebug__meta,
.scorebug--mini .scorebug__time {
    font-size: 0.65rem;
}

/* Empty state — thin bar */
.carousel__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 36px;
    background: var(--bg-surface);
    border-radius: var(--radius);
    font-size: 0.8rem;
    color: var(--text-muted);
}
.carousel__empty-next {
    color: var(--accent-gold);
    font-weight: 600;
}

/* Responsive carousel */
@media (max-width: 480px) {
    .scorebug--mini {
        width: 140px;
    }
    .carousel__divider {
        min-width: 50px;
        font-size: 0.55rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .carousel__track {
        transition: none !important;
    }
}

/* ─── GLOBAL LIVE BANNER ─── */
.dc-live-banner {
    background: var(--accent-live-muted);
    color: var(--accent-live);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 6px var(--space-3);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.dc-live-banner a {
    color: var(--accent-live);
    text-decoration: underline;
    font-weight: 700;
}
.dc-live-banner a:hover {
    opacity: 0.8;
}

/* ─── BACK TO TOP ─── */
.dc-back-to-top {
    position: fixed;
    bottom: var(--space-4);
    right: var(--space-4);
    z-index: 900;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--accent-gold);
    color: #000;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.dc-back-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.dc-back-to-top:hover {
    background: var(--accent-gold-hover);
}
.dc-back-to-top:focus-visible {
    outline: none;
    box-shadow: var(--focus), 0 2px 8px rgba(0, 0, 0, 0.25);
}
@media print {
    .dc-back-to-top { display: none !important; }
}

/* ─── PRINT STYLES ─── */
@page {
    size: landscape;
    margin: 0.5cm;
}
@media print {
    :root {
        --bg-deep: var(--light-bg-deep);
        --bg-surface: var(--light-bg-surface);
        --bg-elevated: var(--light-bg-elevated);
        --bg-card: var(--light-bg-card);
        --bg-input: var(--light-bg-input);
        --text-primary: var(--light-text-primary);
        --text-secondary: var(--light-text-secondary);
        --text-muted: var(--light-text-muted);
        --text-disabled: var(--light-text-disabled);
        --border-subtle: var(--light-border-subtle);
        --border-default: var(--light-border-default);
        --border-strong: var(--light-border-strong);
        --accent-gold: var(--light-accent-gold);
        --accent-gold-hover: var(--light-accent-gold-hover);
        --accent-gold-muted: var(--light-accent-gold-muted);
        --accent-live: var(--light-accent-live);
        --accent-live-muted: var(--light-accent-live-muted);
        --accent-danger: var(--light-accent-danger);
        --accent-danger-muted: var(--light-accent-danger-muted);
        --accent-fc: var(--light-accent-fc);
        --shadow-card: none;
        --shadow-elevated: none;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
        --shadow-gold: none;
    }

    /* Hide non-print elements */
    .no-print,
    .top-bar,
    .sidebar,
    .sidebar-overlay,
    .skip-link,
    .dc-progress-bar { display: none !important; }

    /* Grid container: allow overflow to be visible for print */
    .scoring-grid-container {
        overflow: visible !important;
        box-shadow: none !important;
        position: relative;
    }

    /* CRITICAL: Remove sticky positioning on frozen columns for print.
       Sticky corrupts getBoundingClientRect() used by DP/FC connector SVGs,
       and is unnecessary since the grid doesn't scroll in print. */
    .scoring-grid__bo-cell,
    .scoring-grid__bo-header,
    .scoring-grid__uniform-cell,
    .scoring-grid__uniform-header,
    .scoring-grid__name-cell,
    .scoring-grid__name-header,
    .scoring-grid__pos-cell,
    .scoring-grid__pos-header,
    .scoring-grid thead {
        position: static !important;
        left: auto !important;
        z-index: auto !important;
    }

    /* Constrain player name column width to match screen proportions */
    .scoring-grid__name-cell,
    .scoring-grid__name-header {
        min-width: 100px !important;
        max-width: 140px !important;
    }

    /* Grid sizing: match screen proportions (not too small) */
    .scoring-grid__cell { width: 110px; min-width: 110px; height: 110px; }
    .scoring-grid__inning-header { width: 110px; min-width: 110px; }
    .scoring-grid__stat-header,
    .scoring-grid__stat-cell { width: 30px; min-width: 30px; max-width: 30px; font-size: .65rem; }

    /* Page break control */
    .print-page-break { page-break-before: always; }
    .scoring-grid-container { page-break-inside: auto; }

    /* SVG overlay: hidden in print — DP/FC shown via CSS badges instead */
    .scoring-grid__dp-overlay {
        display: none !important;
        visibility: hidden !important;
    }

    /* Event history */
    .eh-pagination { display: none !important; }

    /* Pitcher stats in print */
    .pitcher-stats-section { margin-top: 0.5rem; page-break-inside: avoid; }

    /* Remove backgrounds/shadows that waste ink */
    body { background: white !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    .badge { border: 1px solid #999 !important; }

    /* Hide cookie banner in print */
    .dc-cookie-banner { display: none !important; }
}


/* =============================================================================
   Cookie Consent Banner
   ============================================================================= */

.dc-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
    padding: var(--space-3) var(--space-4);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.dc-cookie-banner--hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
}

.dc-cookie-banner__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.dc-cookie-banner__text {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--text-default);
    line-height: 1.5;
    margin: 0;
}

.dc-cookie-banner__text a {
    color: var(--accent-gold);
    text-decoration: underline;
}

.dc-cookie-banner__actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .dc-cookie-banner__inner {
        flex-direction: column;
        text-align: center;
    }
    .dc-cookie-banner__actions {
        width: 100%;
        justify-content: center;
    }
}


/* Legal content styling (privacy/cookie policy pages) */

.legal-content h2 {
    font-size: var(--text-lg);
    font-weight: 600;
    margin-top: var(--space-5);
    margin-bottom: var(--space-2);
    color: var(--text-default);
}

.legal-content h3 {
    font-size: var(--text-base);
    font-weight: 600;
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    color: var(--text-default);
}

.legal-content p {
    margin-bottom: var(--space-3);
    line-height: 1.7;
    color: var(--text-muted);
}

.legal-content ul, .legal-content ol {
    margin-bottom: var(--space-3);
    padding-left: var(--space-5);
    color: var(--text-muted);
}

.legal-content li {
    margin-bottom: var(--space-1);
    line-height: 1.6;
}

.legal-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--space-4);
}

.legal-content th,
.legal-content td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    text-align: left;
    font-size: var(--text-sm);
}

.legal-content th {
    background: var(--bg-surface);
    font-weight: 600;
    color: var(--text-default);
}

/* ==========================================================================
   MESSAGING SYSTEM
   ========================================================================== */

/* Unread badge on mail icon */
.msg-unread-badge {
    display: none;
    position: absolute;
    top: -4px; right: -4px;
    background: var(--accent-danger);
    color: #fff;
    font-size: 0.625rem;
    width: 16px; height: 16px;
    border-radius: 50%;
    align-items: center; justify-content: center;
    font-weight: bold;
    line-height: 1;
}
.msg-unread-badge.visible { display: flex; }

/* Inbox panel (dropdown) */
.msg-inbox-panel {
    display: none;
    position: fixed;
    width: 400px; max-height: 500px;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
}
.msg-inbox-panel.open { display: block; }

.msg-inbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-default);
    position: sticky; top: 0;
    background: var(--bg-surface);
    z-index: 1;
}
.msg-inbox-header__title { font-weight: 700; font-size: 0.95rem; }

.msg-inbox-list { padding: 0.25rem; }

/* Message row in inbox */
.msg-inbox-item {
    display: block;
    padding: 0.625rem 0.75rem;
    border-radius: 6px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-bottom: 1px solid var(--border-default);
    transition: background 0.15s;
}
.msg-inbox-item:last-child { border-bottom: none; }
.msg-inbox-item:hover { background: var(--bg-elevated); }

.msg-inbox-item--unread {
    font-weight: 600;
    background: var(--bg-elevated);
}
.msg-inbox-item--unread:hover {
    filter: brightness(0.95);
}

.msg-inbox-item__header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 2px;
}
.msg-inbox-item__sender { font-size: 0.8rem; font-weight: 600; }
.msg-inbox-item__time { font-size: 0.7rem; color: var(--text-muted); }
.msg-inbox-item__subject { font-size: 0.85rem; margin-bottom: 2px; }
.msg-inbox-item__preview {
    font-size: 0.78rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-inbox-item__attach-icon { margin-left: 4px; opacity: 0.5; }

/* Online/Offline status dots */
.msg-online-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}
.msg-online-dot--online {
    background: #22c55e;
    animation: msg-pulse-green 2s ease-in-out infinite;
}
.msg-online-dot--offline {
    background: #ef4444;
    animation: msg-pulse-red 2s ease-in-out infinite;
}

@keyframes msg-pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(34,197,94,0); }
}
@keyframes msg-pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* Recipient picker (autocomplete) */
.msg-recipient-container { position: relative; }

.msg-recipient-chips {
    display: flex; flex-wrap: wrap; gap: 4px;
    padding: 4px;
    border: 1px solid var(--border-default);
    border-radius: 6px;
    background: var(--bg-base);
    min-height: 38px;
    align-items: center;
}

.msg-recipient-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: 4px;
    font-size: 0.8rem;
}
.msg-recipient-chip__remove {
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.6;
    background: none; border: none; color: inherit;
    padding: 0 2px;
}
.msg-recipient-chip__remove:hover { opacity: 1; }

.msg-recipient-input {
    flex: 1;
    min-width: 100px;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    padding: 4px;
    color: var(--text-default);
}

.msg-recipient-dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    max-height: 200px;
    overflow-y: auto;
    z-index: 1010;
}
.msg-recipient-dropdown.open { display: block; }

.msg-recipient-option {
    display: flex; align-items: center; gap: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.1s;
}
.msg-recipient-option:hover { background: var(--bg-elevated); }

/* Drop zone for attachments */
.msg-drop-zone {
    border: 2px dashed var(--border-default);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.msg-drop-zone:hover,
.msg-drop-zone.dragover {
    border-color: var(--accent-gold);
    background: var(--bg-elevated);
}

/* Attached file items */
.msg-attachment-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    background: var(--bg-elevated);
    border-radius: 4px;
    font-size: 0.8rem;
    margin-top: 4px;
}
.msg-attachment-item__info { display: flex; align-items: center; gap: 6px; }
.msg-attachment-item__size { color: var(--text-muted); font-size: 0.75rem; }
.msg-attachment-item__remove {
    background: none; border: none;
    color: var(--accent-danger); cursor: pointer;
    font-size: 0.9rem; padding: 0 4px;
}

/* Message view detail */
.msg-view-meta {
    display: flex; flex-wrap: wrap; gap: 8px;
    font-size: 0.82rem; color: var(--text-muted);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-default);
    margin-bottom: 0.75rem;
}
.msg-view-body {
    white-space: pre-wrap;
    font-size: 0.9rem;
    line-height: 1.6;
    padding-bottom: 0.75rem;
}
.msg-view-attachments {
    border-top: 1px solid var(--border-default);
    padding-top: 0.75rem;
}
.msg-view-attachments__title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.msg-view-attach-link {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.85rem;
    color: var(--accent-gold);
    text-decoration: none;
    padding: 4px 0;
}
.msg-view-attach-link:hover { text-decoration: underline; }

/* Mobile responsive */
@media (max-width: 600px) {
    .msg-inbox-panel { width: 100%; right: -8px; }
}

/* ─── Twemoji: cross-platform flag emoji rendering ─── */
img.emoji {
    width: 1em;
    height: 1em;
    vertical-align: -0.1em;
    display: inline-block;
}

/* Admin delete confirmation: cancel link must match submit button */
a.button.cancel-link,
.submit-row a.cancel-link,
a.cancel-link,
.cancel-link {
    display: inline-block !important;
    padding: 10px 15px !important;
    line-height: 1.4 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    background: var(--button-bg, #417690) !important;
    color: var(--button-fg, #fff) !important;
    text-decoration: none !important;
    border-radius: 4px !important;
    border: none !important;
    font-size: 0.8125rem !important;
    height: auto !important;
    overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════════
   STAT EXPLAINER MODAL
   ═══════════════════════════════════════════════════════════════ */

.stat-explainable {
    cursor: pointer;
    position: relative;
    transition: background 0.15s ease;
}
.stat-explainable:hover {
    background: var(--bg-elevated, rgba(255,255,255,0.06));
}
.stat-explainable::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent-gold, #FFB800);
    opacity: 0.4;
    transition: opacity 0.15s ease;
}
.stat-explainable:hover::after {
    opacity: 0.9;
}

.stat-explainer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1300;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.stat-explainer-overlay.active {
    display: flex;
}

.stat-explainer-panel {
    background: var(--bg-surface, #0D1117);
    border: 1px solid var(--border-default, rgba(255,255,255,0.08));
    border-radius: var(--radius-lg, 16px);
    max-width: 640px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.5));
    animation: seSlideUp 0.2s ease-out;
}

@keyframes seSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-explainer__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
    border-left: 4px solid var(--accent-gold, #FFB800);
}

.stat-explainer__stat-name {
    font-family: var(--font-display, 'Bebas Neue', Impact, sans-serif);
    font-size: 1.75rem;
    letter-spacing: 0.05em;
    color: var(--accent-gold, #FFB800);
    margin: 0;
    line-height: 1.2;
}

.stat-explainer__player {
    color: var(--text-primary, #F0F6FC);
    font-size: 1rem;
    margin: 0.25rem 0 0;
    font-weight: 500;
}

.stat-explainer__edition {
    color: var(--text-muted, #9CA3AF);
    font-size: 0.85rem;
    margin: 0.15rem 0 0;
}

.stat-explainer__close {
    background: none;
    border: none;
    color: var(--text-secondary, #8B949E);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius-sm, 8px);
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.stat-explainer__close:hover {
    background: var(--bg-elevated, rgba(255,255,255,0.06));
    color: var(--text-primary, #F0F6FC);
}

.stat-explainer__body {
    padding: 1.25rem 1.5rem 1.5rem;
}

.stat-explainer__description {
    color: var(--text-secondary, #8B949E);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.stat-explainer__formula {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.9rem;
    color: var(--text-primary, #F0F6FC);
    background: var(--bg-elevated, #161B22);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm, 8px);
    margin-bottom: 1.25rem;
    line-height: 1.6;
    overflow-x: auto;
}
.stat-explainer__formula small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-muted, #9CA3AF);
    font-size: 0.8rem;
}

.se-formula__label {
    color: var(--text-muted, #9CA3AF);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-right: 0.5rem;
}

.stat-explainer__cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.se-card {
    flex: 1 1 72px;
    min-width: 72px;
    max-width: 120px;
    background: var(--bg-elevated, #161B22);
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.04));
    border-top: 3px solid #6b7280;
    border-radius: var(--radius-sm, 8px);
    padding: 0.5rem 0.625rem;
    text-align: center;
}

/* Stat acronym (e.g. wRC+, K/9, pWAR) — case is meaningful, so never
   transform it. Shown above the full name in the composite explainer cards. */
.se-card__abbr {
    display: block;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: var(--accent-gold, #FFB800);
    margin-bottom: 0.15rem;
}

.se-card__label {
    display: block;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, #9CA3AF);
    margin-bottom: 0.25rem;
}

.se-card__value {
    display: block;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary, #F0F6FC);
}

.se-card__sub {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted, #9CA3AF);
    margin-top: 0.15rem;
}

.stat-explainer__steps {
    margin-bottom: 1.25rem;
}

.se-steps__label {
    color: var(--text-muted, #9CA3AF);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.se-step {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.85rem;
    color: var(--text-secondary, #8B949E);
    padding: 0.25rem 0.75rem;
    border-left: 2px solid var(--border-default, rgba(255,255,255,0.08));
    margin-bottom: 0.25rem;
    line-height: 1.5;
}

.se-step--result {
    color: var(--accent-gold, #FFB800);
    font-weight: 600;
    font-size: 0.95rem;
    border-left-color: var(--accent-gold, #FFB800);
}

.se-context {
    background: var(--bg-elevated, #161B22);
    border-radius: var(--radius-sm, 8px);
    padding: 0.75rem 1rem;
    margin-top: 0.5rem;
}

.se-context__label {
    font-size: 0.8rem;
    color: var(--text-muted, #9CA3AF);
    margin-bottom: 0.625rem;
}

.se-context__bar {
    position: relative;
    height: 8px;
    background: var(--bg-card, #1C2128);
    border-radius: 4px;
    margin: 0.5rem 0 1.75rem;
}

.se-context__marker {
    position: absolute;
    top: -4px;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    transform: translateX(-50%);
}

.se-context__marker--lg {
    background: var(--text-muted, #9CA3AF);
    opacity: 0.5;
}

.se-context__marker--player {
    background: var(--accent-gold, #FFB800);
}

.se-context__val {
    position: absolute;
    top: 14px;
    transform: translateX(-50%);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent-gold, #FFB800);
    white-space: nowrap;
}

.se-context__verdict {
    font-size: 0.8rem;
    color: var(--text-secondary, #8B949E);
    text-align: right;
    margin-top: 0.25rem;
}

.se-context--good .se-context__verdict { color: var(--accent-live, #00FF87); }
.se-context--bad .se-context__verdict { color: var(--accent-danger, #FF3B5C); }

.stat-explainer__coaching {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--accent-gold, #FFB800) 8%, transparent);
    border-left: 3px solid var(--accent-gold, #FFB800);
    border-radius: 0 var(--radius-1, 4px) var(--radius-1, 4px) 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-primary);
}
.stat-explainer__coaching:empty { display: none; }
.stat-explainer__coaching-label {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-gold, #FFB800);
    margin-bottom: 0.25rem;
}

/* Ranking Explainer — per-event blocks (one date may carry several events) */
.re-event { margin-bottom: 0.5rem; }
.re-event + .re-event {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border-default, rgba(255,255,255,0.08));
}
.re-event__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #F0F6FC);
    margin: 0 0 0.5rem;
}
.re-event__delta {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-muted, #9CA3AF);
}
.re-event__delta--up { color: var(--accent-live, #00FF87); }
.re-event__delta--down { color: var(--accent-danger, #FF3B5C); }
.re-event__matchup {
    color: var(--text-primary, #F0F6FC);
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0 0 0.15rem;
}
.re-event__edition {
    color: var(--text-muted, #9CA3AF);
    font-size: 0.82rem;
    margin: 0 0 0.75rem;
}

/* Clickable ranking deltas that open the Ranking Explainer */
.re-clickable { cursor: pointer; }
.re-clickable:hover { text-decoration: underline; }

/* Edition picker modal list */
.edition-picker__list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.edition-picker__item {
    width: 100%;
    justify-content: flex-start;
    text-align: left;
}

/* ── Umbrella badge + editions modal ───────────────────────────────────── */
/* Clickable "combined ranking" marker. Sized in em so it scales to whatever
   text it sits beside (a card heading or a small subline). */
.umbrella-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.12em;
    padding: 0;
    margin: 0 0.1em;
    border: none;
    background: transparent;
    color: var(--accent-gold);
    cursor: pointer;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.12s ease, transform 0.12s ease;
}
.umbrella-badge:hover { color: var(--accent-gold-hover); transform: scale(1.08); }
.umbrella-badge:focus-visible { outline: none; box-shadow: var(--focus); }
.umbrella-badge i,
.umbrella-badge svg {
    width: 1em;
    height: 1em;
}

.umbrella-edition-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.umbrella-edition {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.6rem 0.75rem;
    border: var(--border-soft);
    border-radius: var(--radius-md, 10px);
    background: var(--bg-surface, transparent);
}
.umbrella-edition__name {
    font-weight: 600;
    color: var(--text-primary);
}
.umbrella-edition__dates {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.umbrella-edition--status {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 0.5rem 0;
}

@media (max-width: 640px) {
    .stat-explainer-panel {
        max-height: 95vh;
        border-radius: var(--radius-md, 12px);
        margin: 0.5rem;
    }
    .stat-explainer__header {
        padding: 1rem 1.25rem;
    }
    .stat-explainer__body {
        padding: 1rem 1.25rem 1.25rem;
    }
    .stat-explainer__stat-name {
        font-size: 1.4rem;
    }
    .stat-explainer__cards {
        gap: 0.5rem;
    }
    .se-card {
        flex: 1 1 60px;
        min-width: 60px;
        max-width: none;
    }
    .se-step {
        font-size: 0.78rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   PLAYER INTELLIGENCE — percentile bars + radar chart
   ═══════════════════════════════════════════════════════════════ */

.player-intel {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-4, 1rem);
    margin-top: var(--space-4, 1rem);
    align-items: start;
}
.player-intel__bars { min-width: 0; }
.player-intel__radar { min-width: 0; }
.player-intel:empty { display: none; }

.modal-panel .player-intel {
    grid-template-columns: 1fr 300px;
}

@media (max-width: 768px) {
    .player-intel { grid-template-columns: 1fr; }
    .modal-panel .player-intel { grid-template-columns: 1fr; }
}

/* Tournament filter above the percentile rankings (left-aligned with the bars).
   Constrained to a compact width so the Tom Select control doesn't stretch
   across the whole intelligence panel. */
.pct-edition-filter {
    margin-top: var(--space-4, 1rem);
    margin-bottom: calc(-1 * var(--space-2, 0.5rem));
    max-width: 320px;
}
.pct-edition-filter .ts-wrapper,
.pct-edition-filter__select {
    width: 100%;
    min-width: 200px;
}
@media (max-width: 480px) {
    .pct-edition-filter { max-width: 100%; }
}

/* ── KPI headline cards (above the percentile rankings) ──────────────────────
   Single-metric cards with an edition-over-edition comparison. Mobile-first:
   stacked (one column) on phones, wrapping on tablets, one equal-width row on
   desktop so every card fits. Colours reuse the percentile green/red family. */
.player-kpi-row:empty { display: none; }
.player-kpi { margin-top: var(--space-4, 1.25rem); }
.player-kpi__controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 1rem);
    margin-bottom: var(--space-2, .75rem);
}
.player-kpi__radio {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    color: var(--text-secondary);
    cursor: pointer;
}
.player-kpi__radio input { accent-color: var(--accent-gold); margin: 0; }
.player-kpi__cards {
    display: grid;
    grid-template-columns: 1fr;           /* phones: stacked column */
    gap: var(--space-2, .75rem);
}
@media (min-width: 481px) {
    .player-kpi__cards { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
}
@media (min-width: 769px) {
    .player-kpi__cards {                  /* desktop: one equal-width row */
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
        grid-template-columns: none;
    }
}

.player-kpi-card {
    background: var(--bg-surface);
    border: var(--border-soft);
    border-radius: var(--radius-2, .5rem);
    padding: var(--space-2, .75rem) var(--space-3, 1rem);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.player-kpi-card__label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.player-kpi-card__value {
    font-family: var(--font-mono, monospace);
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1.15;
    color: var(--text-primary);
}
.player-kpi-card__prev { font-size: .7rem; color: var(--text-muted); }
.player-kpi-card__chip {
    align-self: flex-start;
    margin-top: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
}
.player-kpi-card__chip--up   { color: #15803d; background: rgba(34, 197, 94, .15); }
.player-kpi-card__chip--down { color: #b91c1c; background: rgba(239, 68, 68, .15); }
.player-kpi-card__chip--flat { color: var(--text-muted); background: rgba(148, 163, 184, .18); }

/* Compare Players selector: mobile-first. One column on phones; the four
   players line up in one row on wider screens, each with its Tournament
   edition dropdown directly underneath, aligned. `minmax(0, 1fr)` + min-width:0
   keep the Tom Select controls inside the card (no horizontal blow-out). */
.compare-selector {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3, 0.75rem);
    align-items: start;
}
.compare-selector__slot {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}
.compare-selector__label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.compare-selector__slot .ts-wrapper,
.compare-selector__slot select,
.compare-selector__slot .compare-edition-wrap {
    width: 100%;
    min-width: 0;
}
.compare-selector__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}
@media (min-width: 640px) {
    .compare-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .compare-selector { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Player Profile Comparison: mobile-first. On phones the radar comes first and
   spans the full width (so its axis labels render) with the two text guides
   stacked below; the original 3-column layout returns on desktop. */
.compare-profile-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    align-items: start;
}
.compare-profile-grid > .compare-profile-grid__radar { order: -1; }
@media (min-width: 1024px) {
    .compare-profile-grid { grid-template-columns: 200px 1fr 240px; }
    .compare-profile-grid > .compare-profile-grid__radar { order: 0; }
}

/* Radar legend: 2×2 grid on phones, centered flex row on desktop. */
.compare-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
}
.compare-legend > div { min-width: 0; }
@media (min-width: 1024px) {
    .compare-legend {
        display: flex;
        justify-content: center;
        gap: var(--space-4);
        flex-wrap: wrap;
    }
}

/* Suggested Batting Order: left-aligned vertical list on phones, wrapped row
   on tablet/desktop. */
.compare-lineup-rec {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.compare-lineup-rec__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius-2, 8px);
}
.compare-lineup-rec__badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.1rem;
    color: #fff;
    flex-shrink: 0;
}
/* A benched bat: muted hollow badge, dimmed card — clearly not in the order. */
.compare-lineup-rec__badge--bench {
    background: var(--bg-surface);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
    font-size: 1.3rem;
}
.compare-lineup-rec__item--bench { opacity: 0.8; }
.compare-lineup-rec__bench-heading {
    margin-top: var(--space-3);
    margin-bottom: var(--space-2);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}
@media (min-width: 768px) {
    .compare-lineup-rec { flex-direction: row; flex-wrap: wrap; }
    .compare-lineup-rec__item { min-width: 200px; }
}

/* Pitcher role-decision "Why?" affordance + modal sections. */
.pitch-role-why {
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent-gold, #f5a623);
    cursor: pointer;
}
.pitch-role-why:hover { text-decoration: underline; }
.pr-section { margin-top: var(--space-4, 1rem); }
.pr-section__title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-2, 0.5rem);
}

.pct-bars {
    margin-top: var(--space-4, 1rem);
}
.pct-bars__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-3, 0.75rem);
    gap: var(--space-2, 0.5rem);
}
.pct-bars__title {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}
.pct-bars__edition {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.pct-bars__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-4, 1rem);
}
@media (max-width: 640px) {
    .pct-bars__grid { grid-template-columns: 1fr; }
}
.pct-bar {
    display: grid;
    grid-template-columns: 46px 1fr 28px 56px;
    align-items: center;
    gap: 6px;
    margin-bottom: 5px;
}
.pct-bar__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
}
.pct-bar__track {
    position: relative;
    height: 14px;
    background: var(--bg-elevated, #1a1a2e);
    border-radius: 7px;
    overflow: hidden;
}
.pct-bar__fill {
    height: 100%;
    border-radius: 7px;
    transition: width 0.4s ease-out;
}
.pct-bar__avg-marker {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--text-muted, #666);
    opacity: 0.5;
}
.pct-bar__value {
    font-size: 0.75rem;
    font-weight: 700;
    text-align: right;
    min-width: 24px;
}
.pct-bar__tag {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Player profile summary */
.player-profile-summary {
    margin-top: var(--space-3, 0.75rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    background: var(--bg-elevated, #1a1a2e);
    border-radius: var(--radius-2, 8px);
    font-size: 0.85rem;
    line-height: 1.5;
}
.player-profile-summary__overall {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: var(--space-2, 0.5rem);
    color: var(--text-primary);
}
.player-profile-summary__section {
    margin-bottom: var(--space-1, 0.25rem);
    color: var(--text-secondary);
}
.player-profile-summary__label {
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.player-profile-summary__label--good { color: var(--pct-good, #22c55e); }
.player-profile-summary__label--bad { color: var(--pct-poor, #ef4444); }
.player-profile-summary__label--accent { color: var(--accent-gold, #FFB800); }

/* Game log colouring — PER BLOCK, not per row. The batting columns wear that
   game's wOBA tier and the pitching columns its FIP tier; both palettes come
   from JS (DCPercentiles.WOBA_TIERS / FIP_TIERS, the same the Season Calendar
   uses) through the --gl-cell-color custom property, so the colours live in
   one place. :hover darkens the same colour.

   🔴 The whole row used to take the wOBA tint — batting, and batting only —
   so the pitching figures beside it wore a colour that said nothing about
   them, and a game a player only pitched came out blank. A bad day with the
   bat and a good one on the mound now read as two different colours, which is
   what they are. The legend is unchanged: both scales use the same six tiers
   and the same six colours, and it reuses the calendar's .dc-scal__legend
   styles (player_calendar.css). */
.gl-cell--tinted { background: color-mix(in srgb, var(--gl-cell-color) 11%, transparent); }
tr:hover .gl-cell--tinted { background: color-mix(in srgb, var(--gl-cell-color) 20%, transparent); }
/* Kept: older markup and any cached page still carrying the row class. */
.gl-row--tinted { background: color-mix(in srgb, var(--gl-row-color) 11%, transparent); }
.gl-row--tinted:hover { background: color-mix(in srgb, var(--gl-row-color) 20%, transparent); }
/* Game log legend sits at the bottom of the table, matching the calendar. */
.gl-legend { padding-top: var(--space-2); }
.gl-legend__note { padding-top: var(--space-2); font-size: .82rem;
    color: var(--text-secondary); font-style: italic; margin: 0; }

/* Splits groups */
/* Matchup advantage coloring */
.dc-matchup-advantage { color: var(--pct-good, #22c55e); font-weight: 700; }
.dc-matchup-disadvantage { color: var(--pct-poor, #ef4444); font-weight: 700; }

.splits-group { padding: var(--space-3, 0.75rem) var(--space-4, 1rem); }
.splits-group + .splits-group { border-top: 1px solid var(--border-default); }
.splits-group__title {
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: var(--space-2, 0.5rem);
}
.dc-table--compact th,
.dc-table--compact td {
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
}
/* Insights banner */
.insights-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    margin-bottom: var(--space-3, 0.75rem);
    background: color-mix(in srgb, var(--accent-gold, #FFB800) 6%, transparent);
    border-left: 3px solid var(--accent-gold, #FFB800);
    border-radius: 0 var(--radius-1, 4px) var(--radius-1, 4px) 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
.insights-banner__text {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}
.insights-banner__item::after {
    content: ' · ';
    color: var(--text-muted);
}
.insights-banner__item:last-child::after {
    content: '';
}

.splits-fatigue-warning {
    margin-top: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: color-mix(in srgb, var(--accent-danger, #ef4444) 10%, transparent);
    border-left: 3px solid var(--accent-danger, #ef4444);
    border-radius: 0 var(--radius-1, 4px) var(--radius-1, 4px) 0;
    font-size: 0.82rem;
    color: var(--accent-danger, #ef4444);
    font-weight: 600;
}

@media (max-width: 640px) {
    .pct-bar {
        grid-template-columns: 42px 1fr 28px;
        gap: 6px;
    }
    .pct-bar__label { font-size: 0.7rem; }
    .pct-bar__track { height: 12px; }
    .pct-bar__value { font-size: 0.7rem; }
}

/* ═══════════════════════════════════════════════════════════════
   GAME LIST SHARED — live timer, score
   ═══════════════════════════════════════════════════════════════ */
.live-timer {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    background: #0f172a;
    color: #94a3b8;
    border: 1px solid #475569;
    display: inline-block;
    min-width: 50px;
    text-align: center;
}
.live-timer.timer-green  { color: #22c55e; border-color: #22c55e; }
.live-timer.timer-yellow { color: #eab308; border-color: #eab308; }
.live-timer.timer-red    { color: #ef4444; border-color: #ef4444; animation: list-timer-blink 1s ease-in-out infinite; }
@keyframes list-timer-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }

.score { font-weight: 700; color: var(--accent-gold); }

/* ═══════════════════════════════════════════════════════════════
   GAME LIST — timer notification banner
   ═══════════════════════════════════════════════════════════════ */
.timer-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    background: #0f172a;
    border: 2px solid #ef4444;
    border-radius: var(--radius-2);
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
    animation: notification-slide-in 0.3s ease-out;
}
@keyframes notification-slide-in {
    from { transform: translateX(100%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.timer-notification__content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
}
.timer-notification__icon { font-size: 1.5rem; }
.timer-notification__text { color: #ef4444; font-weight: 700; font-size: 1rem; }
.timer-notification__link {
    background: var(--accent-gold);
    color: white;
    padding: 0.4rem 0.8rem;
    border-radius: var(--radius-1);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.timer-notification__link:hover { filter: brightness(1.1); }
.timer-notification__close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 0.5rem;
    line-height: 1;
}
.timer-notification__close:hover { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════════════════
   SCORING GAME LIST — sheet indicator
   ═══════════════════════════════════════════════════════════════ */
.sheet-ok      { color: #22c55e; font-weight: 700; }
.sheet-missing { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   LINEUP GAME LIST — score, lineup indicator
   ═══════════════════════════════════════════════════════════════ */
.lineup-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.82rem;
    font-weight: 700;
}
.lineup-indicator .lineup-ok      { color: var(--accent-live, #22c55e); }
.lineup-indicator .lineup-missing { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════════
   GAME SCORES (RESULTS) — score cards, line score, box score
   ═══════════════════════════════════════════════════════════════ */
.game-score-card {
    background: var(--bg-surface);
    border: var(--border-soft);
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--space-4);
    overflow: hidden;
}
.game-score-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-default);
    flex-wrap: wrap;
    gap: var(--space-2);
}
.game-score-card__teams {
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}
.game-score-card__meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.game-score-card__body { padding: var(--space-3) var(--space-4); }
.game-score-card__tournament {
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0 var(--space-4) var(--space-2);
}
.game-score-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4) var(--space-3);
    flex-wrap: wrap;
}

.line-score-compact {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
    font-variant-numeric: tabular-nums;
}
.line-score-compact th,
.line-score-compact td {
    padding: 0.3rem 0.5rem;
    text-align: center;
    border: 1px solid var(--border-default);
}
.line-score-compact th {
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    font-size: 0.82rem;
}
.line-score-compact td:first-child,
.line-score-compact th:first-child {
    text-align: left;
    white-space: nowrap;
    min-width: 120px;
}
.line-score-compact .total { font-weight: 700; background: var(--bg-elevated); }
.line-score-compact .winning-score { color: var(--accent-gold); }

.btn-link-box {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.4rem 0.8rem;
    font-size: 0.88rem;
    color: var(--accent-gold);
    text-decoration: none;
    font-weight: 600;
}
.btn-link-box:hover { text-decoration: underline; }


.box-section-title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    color: var(--text-primary);
    margin-top: var(--space-3);
    margin-bottom: var(--space-2);
}
.box-section-title:first-child { margin-top: 0; }

/* ═══ Utility Classes ═══ */
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-nowrap { white-space: nowrap; }
.fw-600 { font-weight: 600; }
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 14px; height: 14px; }

/* "Copy link" confirmation toast (share_link.js) */
.dc-share-toast {
    position: fixed;
    z-index: 3000;
    background: var(--bg-elevated, #1a1a2e);
    color: var(--text-primary, #fff);
    border: 1px solid var(--border-default, #333);
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    white-space: nowrap;
}
.dc-share-toast--show { opacity: 1; transform: translateY(0); }

/* ── Tournament format display (Setup) + "Saber más" modal ── */
.format-badge { cursor: pointer; }
.format-subtitle { font-size: 0.78rem; color: var(--text-muted); margin-top: 2px; }
.format-summary-list { display: flex; flex-direction: column; gap: 0.6rem; }
.format-summary-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.format-explainer-overlay {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
    display: none; align-items: center; justify-content: center;
    z-index: 1000; padding: 1rem;
}
.format-explainer-overlay.active { display: flex; }
.format-explainer {
    background: var(--bg-elevated); border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 12px); max-width: 460px; width: 100%;
    padding: 1.5rem; position: relative; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}
.format-explainer__close {
    position: absolute; top: 0.6rem; right: 0.85rem; background: none;
    border: none; font-size: 1.6rem; line-height: 1; color: var(--text-muted);
    cursor: pointer;
}
.format-explainer__name { margin: 0 0 0.25rem; }
.format-explainer__subtitle { color: var(--text-secondary); margin: 0 0 1rem; font-size: 0.9rem; }
.format-explainer__diagram { margin: 0 0 1rem; text-align: center; }
.format-explainer__long { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin: 0; }

/* ── Playoff format builder (Setup) ── */
.format-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.format-card { border: 1px solid var(--border-subtle); border-radius: var(--radius-md, 8px); padding: 1rem; background: var(--bg-elevated); }
.format-card__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.35rem; }

/* ── Scoring v2 entry panel (Phase 5b) ─────────────────────────────────────
   Reuses the existing .scoring-grid / .scoring-box vocabulary above; only the
   entry controls are new, so both sheets keep one visual language. */
.sv2-entry__due { margin: 0 0 0.75rem; color: var(--text-secondary); }
.sv2-entry__due strong { color: var(--text-primary); }
.sv2-entry__buttons {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.sv2-entry__btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 44px;                 /* touch target — scorers use tablets */
}
.sv2-entry__btn kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem; line-height: 1;
    padding: 0.15rem 0.35rem;
    border: 1px solid var(--border-subtle, rgba(255,255,255,0.25));
    border-radius: 4px;
    background: var(--bg-elevated, rgba(255,255,255,0.06));
}
.sv2-entry__hint {
    margin: 0.75rem 0 0; font-size: 0.85rem; color: var(--text-secondary);
}
@media (max-width: 640px) {
    .sv2-entry__buttons { gap: 0.4rem; }
    .sv2-entry__btn { flex: 1 1 calc(50% - 0.4rem); justify-content: center; }
}

/* ── Scoring v2: runner + fielder controls (Phase 5c) ─────────────────────── */
.sv2-runners { margin: 0.9rem 0 0.6rem; }
.sv2-runners__title {
    font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--text-secondary); margin: 0 0 0.4rem;
}
.sv2-runner {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.3rem 0; flex-wrap: wrap;
}
.sv2-runner__name { min-width: 12rem; color: var(--text-primary); }
.sv2-runner__to { min-height: 40px; }
.sv2-fielders {
    display: flex; align-items: center; gap: 0.6rem;
    margin: 0.6rem 0 0.9rem; flex-wrap: wrap;
}
.sv2-fielders__input {
    width: 9rem; min-height: 40px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.sv2-fielders__help { font-size: 0.8rem; color: var(--text-secondary); }
.sv2-entry__buttons--runner { margin-top: 0.5rem; }
@media (max-width: 640px) {
    .sv2-runner__name { min-width: 100%; }
    .sv2-runner__to { flex: 1 1 100%; }
    .sv2-fielders__input { flex: 1 1 100%; width: auto; }
}
.sv2-entry__error {
    margin: 0.6rem 0 0; padding: 0.6rem 0.8rem;
    border-left: 4px solid var(--accent-danger, #c0392b);
    background: var(--bg-elevated, rgba(192, 57, 43, 0.08));
    color: var(--text-primary); font-size: 0.9rem;
}
.sv2-entry__actions {
    display: flex; align-items: center; gap: 0.8rem;
    margin: 0.9rem 0 0.2rem; flex-wrap: wrap;
}
.sv2-entry__actions-hint { font-size: 0.8rem; color: var(--text-secondary); }

/* ── Scoring v2: substitution panel (Phase 5d) ───────────────────────────── */
.sv2-sub__row {
    display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.sv2-sub__row label {
    font-family: var(--font-mono, ui-monospace); font-size: 0.62rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--text-secondary);
}
.sv2-sub__row select,
.sv2-sub__row input { min-height: 40px; }
.sv2-sub__hint {
    margin: 0.7rem 0 0; font-size: 0.82rem; color: var(--text-secondary);
}
@media (max-width: 640px) {
    .sv2-sub__row { gap: 0.4rem; }
    .sv2-sub__row select,
    .sv2-sub__row input,
    .sv2-sub__row button { flex: 1 1 100%; }
}

/* ── Officiality badge ───────────────────────────────────────────────────────
   Drawn only by templates/core/_officiality_badge.html, via the
   {% game_officiality_badge %} tag. Governed by
   docs/architecture/DIAMOND-CORE-GAME-OFFICIALITY-SPECIFICATION.md

   Deliberately tiny: it appears on every row of dense tables, so by default it
   is a single glyph in a coloured pill and the words live in the tooltip. The
   --md modifier shows the word too, for detail pages where there is room. */
.officiality-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.4px;
    vertical-align: middle;
    cursor: help;
    border: 1px solid transparent;
}
.officiality-badge:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}
/* The word is hidden at the default size — the tooltip carries it. Kept in the
   DOM rather than removed so screen readers and search-in-page still find it. */
.officiality-badge__text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.officiality-badge--md {
    height: 20px;
    padding: 0 8px;
    font-size: 10px;
}
.officiality-badge--md .officiality-badge__text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: nowrap;
}

/* Official — the same green the platform already uses for "live/good". */
.badge--official {
    background: var(--accent-live-muted);
    color: var(--accent-live);
    border-color: var(--accent-live-muted);
}
/* Unofficial — amber. Not an error: the game still counts in full. */
.badge--unofficial {
    background: rgba(249, 115, 22, 0.14);
    color: #f97316;
    border-color: rgba(249, 115, 22, 0.30);
}
/* Provisional — quiet grey, it is a stand-in and should not shout. */
.badge--provisional {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border-color: var(--border-subtle, rgba(128, 128, 128, 0.25));
}
/* There is deliberately no style for "officiality not recorded": that state
   draws no badge at all. A question mark on a public page does not read as
   "this fact was not captured", it reads as "this system is broken" — and on
   the WBSC showcase that would have been ~35,000 of them. Silence is honest. */

/* ═══════════════════════════════════════════════════════════════
   ALERT BANNERS  (.dc-alert)
   ───────────────────────────────────────────────────────────────
   🔴 These class names were in use on the Scoring Station page and
   existed in NO stylesheet, so the one banner that tells a scorer
   "do not close this laptop yet" rendered as ordinary black text on
   a white page. A warning nobody can see is the silent failure this
   project refuses to ship. Written once, here, so any page can use
   a loud banner without inventing its own.
   ═══════════════════════════════════════════════════════════════ */

.dc-alert {
    border: 1px solid var(--border-default);
    border-left-width: 5px;
    border-radius: var(--radius-md);
    background: var(--bg-card);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
}
.dc-alert__title {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 1px;
    margin: 0 0 6px;
    color: var(--text-primary);
}
.dc-alert__body { margin: 0; color: var(--text-secondary); font-size: 14px; }

.dc-alert--error {
    border-color: var(--accent-danger);
    background: var(--accent-danger-muted);
}
.dc-alert--error .dc-alert__title { color: var(--accent-danger); }

.dc-alert--warning {
    border-color: var(--accent-warn);
    background: rgba(249, 115, 22, 0.14);
}
.dc-alert--warning .dc-alert__title { color: var(--accent-warn); }

.dc-alert--success {
    border-color: var(--accent-live);
    background: var(--accent-live-muted);
}
.dc-alert--success .dc-alert__title { color: var(--accent-live); }

.dc-alert--info {
    border-color: var(--accent-gold);
    background: var(--accent-gold-muted);
}
.dc-alert--info .dc-alert__title { color: var(--accent-gold); }

/* An error banner must be impossible to walk past. Respects the
   reader who has asked the system to stop moving things. */
@media (prefers-reduced-motion: no-preference) {
    .dc-alert--error { animation: dc-alert-breathe 2s ease-in-out infinite; }
}
@keyframes dc-alert-breathe {
    0%, 100% { box-shadow: 0 0 0 0 var(--accent-danger-muted); }
    50%      { box-shadow: 0 0 0 6px transparent; }
}

/* ── name/value list, for "this Station" style facts ── */
.dc-deflist {
    display: grid;
    grid-template-columns: minmax(140px, max-content) 1fr;
    gap: 6px var(--space-4);
    margin: 0;
}
.dc-deflist dt {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: center;
}
.dc-deflist dd { margin: 0; color: var(--text-primary); font-size: 14px; }

@media (max-width: 480px) {
    .dc-deflist { grid-template-columns: 1fr; gap: 2px; }
    .dc-deflist dd { margin-bottom: var(--space-2); }
}

/* ── "Report a problem" ──────────────────────────────────────────────────────────
   🔴 Miguel cannot make a screenshot and cannot tell the three sites apart,
   so he is never asked to. One button, and the page sends everything.
   Floating on the Console and the Line-up — the two screens he is looking at
   during a game — and in the user menu everywhere else. */
.dc-report-problem--float {
    position: fixed;
    right: 1rem;
    bottom: 5.5rem;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .9rem;
    border: 1px solid var(--border-default);
    border-radius: 999px;
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28);
    transition: color .15s, border-color .15s, transform .15s;
}
.dc-report-problem--float:hover {
    color: var(--text-primary);
    border-color: var(--accent-gold);
    transform: translateY(-1px);
}
.dc-report-problem--sent,
.dc-report-problem--sent:hover {
    color: var(--accent-success, #16a34a);
    border-color: var(--accent-success, #16a34a);
    cursor: default;
    transform: none;
}
.dc-report-problem[disabled] { opacity: .7; cursor: default; }

@media print { .dc-report-problem--float { display: none; } }

/* 🔴 `display: inline-flex` beats the browser's own `[hidden] { display: none }`,
   so without this the button stood in the corner exactly as before, hidden
   attribute and all. Caught by the browser test, not by reading the code. */
.dc-report-problem--float[hidden] { display: none; }

/* 🔴 Saved but NOT delivered. Never the same green as "sent": a green tick
   over a message nobody received is exactly the silent failure this project
   exists to remove. */
.dc-report-problem--saved,
.dc-report-problem--saved:hover {
    color: var(--accent-warning, #d97706);
    border-color: var(--accent-warning, #d97706);
    cursor: default;
    transform: none;
}

/* Armed: he asked for it from the menu and it is waiting where he scrolls. */
.dc-report-problem--armed {
    border-color: var(--accent-gold);
    color: var(--text-primary);
    animation: dc-report-appear .18s ease-out;
}
@keyframes dc-report-appear {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}