/* ═══════════════════════════════════════════════════════════════
   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;
    --light-text-muted: #8C8C8C;
    --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; }

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;
}
.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; }
}

.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);
}
.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;
}

.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); }

/* 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-display);
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: normal;
    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"] { display: none; }
}
@media print {
    .table-responsive th[data-col-priority="secondary"],
    .table-responsive td[data-col-priority="secondary"] { display: table-cell !important; }
}

/* Sticky first columns for statistics tables */
.stats-table--sticky td:first-child,
.stats-table--sticky th:first-child { position: sticky; left: 0; z-index: 2; background: var(--bg-surface); }
.stats-table--sticky td:nth-child(2),
.stats-table--sticky th:nth-child(2) { position: sticky; left: 40px; z-index: 2; background: var(--bg-surface); }
.stats-table--sticky thead th:first-child,
.stats-table--sticky thead th:nth-child(2) { z-index: 3; background: var(--bg-elevated); }
@media print {
    .stats-table--sticky td, .stats-table--sticky th { position: static !important; left: auto !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; }

/* 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-display);
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    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 */
.dc-table .dc-num {
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.84rem;
}

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

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

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

/* ── 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-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 (for dc-table contexts) ── */
.dc-table .status-scheduled { background: rgba(255,184,0,.14); color: var(--accent-gold); }
.dc-table .status-live      { background: rgba(5,150,105,.14); color: var(--accent-live); }
.dc-table .status-final     { background: var(--accent-gold-muted); color: var(--text-secondary); }
.dc-table .status-canceled  { background: rgba(220,38,38,.14); color: var(--accent-danger); }
.dc-table .status-postponed { 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);
}

/* ── 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 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;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-primary);
    font-size: 0.85rem;
}

/* 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; }
}

@media (max-width: 620px) {
    .logo-subtitle { display: none; }
    .user-info { display: none; }
    .user-trigger .user-chevron { display: none; }
}

/* 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-size: .8rem; font-weight: 700;
    color: var(--text-muted); 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); }

/* 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; }

/* 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; } }

/* Sortable Table Headers */
.sortable { cursor: pointer; user-select: none; }
.sortable::after { content: ' ⇅'; color: var(--text-muted); font-size: .75rem; }
.sortable.sorted-asc::after { content: ' ▲'; color: var(--accent-gold); }
.sortable.sorted-desc::after { content: ' ▼'; color: var(--accent-gold); }

/* ════════════════════════════════════════════════════════════
   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; }

/* 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 .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; overflow-y: auto;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-4); border-bottom: var(--border-soft);
    background: var(--bg-elevated); position: sticky; top: 0; z-index: 1;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.modal-header__title { font-weight: 800; font-size: 1.1rem; }
.modal-body { padding: var(--space-4); }

/* Modal field layout */
.modal-field { display: flex; flex-direction: column; gap: 2px; padding: var(--space-1) 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-4);
    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;
}
.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);
}

/* 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;
    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: 100;
    min-width: 80px;
}
.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;
}
@media (max-width: 480px) {
    .lang-trigger { font-size: 12px; padding: 4px 6px; height: 32px; }
}

.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);
}
.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;
}
.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);
}

/* Phase tabs — shared pill style for Standings, Rankings, Statistics */
.phase-tabs {
    display: flex;
    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);
}

.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-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.stats-table th, .stats-table td {
    padding: 14px 16px; text-align: right; white-space: nowrap;
    border-bottom: 1px solid var(--border-subtle);
}
.stats-table th {
    background: var(--bg-elevated); font-family: var(--font-display);
    font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
    color: var(--text-muted); font-weight: normal;
    position: sticky; top: 0; z-index: 1;
}
.stats-table th:first-child,
.stats-table th:nth-child(2),
.stats-table th:nth-child(3) { text-align: left; }
.stats-table td:first-child { text-align: center; color: var(--text-muted); }
.stats-table td:nth-child(2) { text-align: left; font-weight: 600; }
.stats-table td:nth-child(3) { text-align: left; }
.stats-table tbody tr:hover { background: var(--bg-elevated); }

.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; }
}

.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;
}

/* ─── 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: hidden;
}
.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: var(--radius);
    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;
}
.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__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;
}
.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);
}

/* 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--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;
}