:root {
    /* Color Palette - Original Blue/Green Theme */
    --primary-color: #4169E1;
    --primary-hover: #3557C1;
    --secondary-color: #228B22;
    --home-color: #ffffff;
    --home-border: #000000;
    --home-text: #000000;
    --away-color: #666666;
    --danger-color: #C41E3A;
    --edit-color: #FFA500;
    --edit-hover: #FF8C00;
    --danger-hover: #A60000;
    --background: #f5f5f5;
    --surface: #ffffff;
    --text-primary: #1a1a1a;
    --text-secondary: #666666;
    --border: #cccccc;
    --sidebar-bg: #1e1e1e;
    --sidebar-active: #950000;
    --sidebar-width: 220px;

    /* Open dropdown menus — New Game Setup Opponent Team Name (rounded + frosted) */
    --dropdown-menu-bg: rgba(44, 44, 46, 0.78);
    --dropdown-menu-text: #f5f5f7;
    --dropdown-menu-hover: rgba(58, 58, 60, 0.88);
    --dropdown-menu-border: rgba(255, 255, 255, 0.16);
    --dropdown-menu-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    
    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    
    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-full: 9999px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    /* Prevent zoom on home screen apps */
    touch-action: pan-x pan-y;
    /* iOS safe area support */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    /* Prevent zoom on home screen apps */
    touch-action: pan-x pan-y;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Ensure body doesn't exceed viewport */
    position: relative;
    margin: 0;
    padding: 0;
}

.app-container {
    display: flex;
    min-height: 100vh;
    min-height: -webkit-fill-available; /* iOS Safari fix */
    position: relative;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    /* Ensure container respects viewport boundaries */
    box-sizing: border-box;
    /* Prevent horizontal scrolling */
    margin: 0;
    padding: 0;
}

/* Sidebar Styles */
.sidebar {
    width: var(--sidebar-width);
    background: linear-gradient(180deg, #1e1e1e 0%, #1a1a1a 100%);
    color: white;
    position: fixed;
    height: 100vh;
    height: -webkit-fill-available; /* iOS Safari fix */
    left: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 1001; /* Ensure sidebar is above main content */
    /* The drawer slides with transform. Overflow must live on a child that
       is not transformed, or iOS treats a scroll gesture as a tap. */
    overflow: visible;
}

.sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    padding: var(--space-lg) 0 var(--space-xl) 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}

.sidebar-header {
    padding: 0 var(--space-lg);
    margin-bottom: var(--space-xl);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.sidebar-header::after {
    content: '';
    position: absolute;
    bottom: -var(--space-lg);
    left: var(--space-lg);
    right: var(--space-lg);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

.sidebar-logo {
    width: 100%;
    max-width: 175px;
    height: auto;
    padding: var(--space-sm) 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    border-radius: 1.25rem;
}

.sidebar-logo:hover {
    opacity: 0.9;
    transform: scale(1.02);
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: 0 var(--space-md);
}

.sidebar-nav .nav-item span {
    white-space: nowrap;
    line-height: 1.25;
}

.sidebar-nav .nav-item span.nav-label-multiline {
    white-space: normal;
    line-height: 1.15;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-md);
    margin: 0 var(--space-xs);
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border-radius: var(--radius-md);
    position: relative;
    font-weight: 500;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
}

.nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 0;
    background: var(--sidebar-active);
    border-radius: 0 2px 2px 0;
    transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.nav-item:hover::before {
    height: 60%;
}

.nav-item.active {
    background: linear-gradient(135deg, var(--sidebar-active) 0%, #7a0000 100%);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(149, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    font-weight: 600;
}

.nav-item.active::before {
    height: 100%;
    width: 4px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.nav-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.nav-item:hover .nav-icon {
    transform: scale(1.1);
}

.nav-item.active .nav-icon {
    transform: scale(1.15);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Main Content */
.main-content {
    flex: 1;
    margin-left: var(--sidebar-width); /* Updated to match sidebar width */
    padding: var(--space-xl);
    position: relative;
    min-height: calc(100vh - 32px); /* Account for footer height */
    min-height: calc(-webkit-fill-available - 32px); /* iOS Safari fix */
    padding-bottom: calc(var(--space-xl) + 40px); /* Add space for footer */
    overflow-x: hidden;
    width: calc(100% - var(--sidebar-width)); /* Account for sidebar width */
    max-width: calc(100% - var(--sidebar-width));
    /* Ensure content doesn't exceed viewport */
    box-sizing: border-box;
    /* Prevent horizontal overflow */
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Ensure content is properly positioned */
    left: 0;
    right: 0;
}

/* Page container - ensure all pages respect viewport */
.page {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    /* Prevent horizontal scrolling */
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Ensure pages are properly positioned and centered */
    margin: 0;
    padding: 0;
    position: relative;
    /* Ensure content doesn't extend beyond viewport */
    padding-right: 0;
}

.page-header {
    margin-bottom: var(--space-xl);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding-right: 0;
}

    .page-header h2 {
        font-size: 2rem;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: var(--space-sm);
    }

    .page-header p {
        color: var(--text-secondary);
        font-size: 1rem;
    }
    
    /* Mobile typography adjustments */
    @media (max-width: 767px) {
        .page-header h2 {
            font-size: 1.5rem;
            margin-bottom: var(--space-xs);
        }
        
        .page-header p {
            font-size: 0.875rem;
        }
    }

/* Custom Report modal — matches Reports “Custom Report” card (violet) + tighter form rhythm */
#custom-report-modal .custom-report-modal-content,
#bullpen-custom-report-modal .custom-report-modal-content {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(139, 92, 246, 0.22);
    box-shadow:
        0 24px 48px rgba(91, 33, 182, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.06);
}

#custom-report-modal .custom-report-modal-header,
#bullpen-custom-report-modal .custom-report-modal-header {
    background: linear-gradient(135deg, #A78BFA 0%, #7C3AED 55%, #6D28D9 100%);
    color: #fff;
    border-bottom: none;
    padding: var(--space-md) var(--space-lg);
    align-items: center;
    gap: var(--space-md);
}

#custom-report-modal .custom-report-modal-heading,
#bullpen-custom-report-modal .custom-report-modal-heading {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
    flex: 1;
}

#custom-report-modal:not(.hidden):has(#custom-report-results:not([style*="display: none"])) .custom-report-modal-header {
    padding: var(--space-sm) var(--space-lg);
}

#custom-report-modal:not(.hidden):has(#custom-report-results:not([style*="display: none"])) .custom-report-modal-heading {
    font-size: 1.05rem;
}

#custom-report-modal .custom-report-modal-body,
#bullpen-custom-report-modal .custom-report-modal-body {
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(180deg, #f8f9fc 0%, #ffffff 45%);
}

#custom-report-modal .custom-report-modal-filters,
#bullpen-custom-report-modal .custom-report-modal-filters {
    margin-bottom: 0;
}

#custom-report-modal .custom-report-form,
#bullpen-custom-report-modal .custom-report-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

#custom-report-modal .custom-report-form-grid,
#bullpen-custom-report-modal .custom-report-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-sm) var(--space-md);
    align-items: start;
}

#custom-report-modal .custom-report-form-group-span,
#bullpen-custom-report-modal .custom-report-form-group-span {
    grid-column: 1 / -1;
}

#custom-report-modal .form-group,
#bullpen-custom-report-modal .form-group {
    margin-bottom: 0;
}

#custom-report-modal .form-label,
#bullpen-custom-report-modal .form-label {
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

#custom-report-modal .form-input,
#bullpen-custom-report-modal .form-input {
    min-height: 42px;
    padding: var(--space-sm) var(--space-md);
    border-width: 1px;
    background: var(--surface);
}

#custom-report-modal .custom-report-form-actions,
#bullpen-custom-report-modal .custom-report-form-actions {
    margin-top: 0;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    gap: var(--space-sm);
}

#custom-report-modal .custom-report-pitchers-panel,
#bullpen-custom-report-modal .custom-report-pitchers-panel {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.88);
}

#custom-report-modal .custom-report-pitchers-all-row,
#bullpen-custom-report-modal .custom-report-pitchers-all-row {
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid rgba(124, 58, 237, 0.15);
}

#custom-report-modal .custom-report-pitchers-all-label,
#bullpen-custom-report-modal .custom-report-pitchers-all-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--text-primary);
}

#custom-report-modal .custom-report-pitchers-all-label:hover,
#bullpen-custom-report-modal .custom-report-pitchers-all-label:hover {
    background: rgba(124, 58, 237, 0.08);
}

#custom-report-modal .custom-report-pitchers-list,
#bullpen-custom-report-modal .custom-report-pitchers-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#custom-report-modal .custom-report-location-radios,
#bullpen-custom-report-modal .custom-report-location-radios {
    gap: var(--space-md);
    flex-wrap: wrap;
}

#custom-report-modal .custom-report-form-section-panel,
#bullpen-custom-report-modal .custom-report-form-section-panel,
#custom-report-modal .custom-report-game-selection-panel,
#bullpen-custom-report-modal .custom-report-game-selection-panel {
    border: 2px solid rgba(124, 58, 237, 0.28);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.09) 0%, rgba(124, 58, 237, 0.04) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#custom-report-modal .custom-report-form-section-header,
#bullpen-custom-report-modal .custom-report-form-section-header,
#custom-report-modal .custom-report-game-selection-header,
#bullpen-custom-report-modal .custom-report-game-selection-header {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(124, 58, 237, 0.18);
}

#custom-report-modal .custom-report-form-section-title,
#bullpen-custom-report-modal .custom-report-form-section-title,
#custom-report-modal .custom-report-game-selection-title,
#bullpen-custom-report-modal .custom-report-game-selection-title {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #5b21b6;
    letter-spacing: -0.01em;
}

#custom-report-modal .custom-report-form-section-hint,
#bullpen-custom-report-modal .custom-report-form-section-hint,
#custom-report-modal .custom-report-game-selection-hint,
#bullpen-custom-report-modal .custom-report-game-selection-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

#custom-report-modal .custom-report-selection-mode,
#bullpen-custom-report-modal .custom-report-selection-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(124, 58, 237, 0.2);
}

#custom-report-modal .custom-report-selection-mode-option,
#bullpen-custom-report-modal .custom-report-selection-mode-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-radius: calc(var(--radius-md) - 2px);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    text-align: center;
}

#custom-report-modal .custom-report-selection-mode-option:hover,
#bullpen-custom-report-modal .custom-report-selection-mode-option:hover {
    color: #5b21b6;
    background: rgba(124, 58, 237, 0.06);
}

#custom-report-modal .custom-report-selection-mode-option input[type="radio"],
#bullpen-custom-report-modal .custom-report-selection-mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

#custom-report-modal .custom-report-selection-mode-option:has(input:checked),
#bullpen-custom-report-modal .custom-report-selection-mode-option:has(input:checked) {
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-color: rgba(91, 33, 182, 0.35);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
}

#custom-report-modal .custom-report-selection-mode-label,
#bullpen-custom-report-modal .custom-report-selection-mode-label {
    pointer-events: none;
}

#custom-report-modal .custom-report-date-filters,
#bullpen-custom-report-modal .custom-report-date-filters,
#custom-report-modal .custom-report-games-section,
#bullpen-custom-report-modal .custom-report-games-section {
    padding-top: var(--space-sm);
    border-top: 1px dashed rgba(124, 58, 237, 0.22);
}

#custom-report-modal .custom-report-date-filters-grid,
#bullpen-custom-report-modal .custom-report-date-filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

@media (min-width: 600px) {
    #custom-report-modal .custom-report-date-filters-grid,
    #bullpen-custom-report-modal .custom-report-date-filters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md) var(--space-lg);
    }

    #custom-report-modal .custom-report-form-section-panel,
    #bullpen-custom-report-modal .custom-report-form-section-panel,
    #custom-report-modal .custom-report-game-selection-panel,
    #bullpen-custom-report-modal .custom-report-game-selection-panel {
        padding: var(--space-lg);
    }

    #custom-report-modal .custom-report-selection-mode,
    #bullpen-custom-report-modal .custom-report-selection-mode {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    #custom-report-modal .custom-report-location-radios,
    #bullpen-custom-report-modal .custom-report-location-radios {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    #custom-report-modal .custom-report-location-radios .radio-option,
    #bullpen-custom-report-modal .custom-report-location-radios .radio-option {
        flex: 1;
        min-width: 72px;
        justify-content: center;
        padding: var(--space-xs) var(--space-sm);
        border: 1px solid rgba(124, 58, 237, 0.18);
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.85);
    }
}

#custom-report-modal .custom-report-date-filters,
#bullpen-custom-report-modal .custom-report-date-filters {
    margin-top: 0;
}

#custom-report-modal .custom-report-games-section,
#bullpen-custom-report-modal .custom-report-games-section {
    margin-top: 0;
}

#custom-report-modal .custom-report-games-panel,
#bullpen-custom-report-modal .custom-report-games-panel {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.88);
}

@media (min-width: 768px) {
    #custom-report-modal .custom-report-games-panel,
    #bullpen-custom-report-modal .custom-report-games-panel {
        max-height: 420px;
    }
}

@media (min-width: 1024px) {
    #custom-report-modal .custom-report-games-panel,
    #bullpen-custom-report-modal .custom-report-games-panel {
        max-height: 480px;
    }
}

#custom-report-modal .custom-report-games-all-row,
#bullpen-custom-report-modal .custom-report-games-all-row {
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid rgba(124, 58, 237, 0.15);
}

#custom-report-modal .custom-report-games-all-label,
#bullpen-custom-report-modal .custom-report-games-all-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--text-primary);
}

#custom-report-modal .custom-report-games-all-label:hover,
#bullpen-custom-report-modal .custom-report-games-all-label:hover {
    background: rgba(124, 58, 237, 0.08);
}

#custom-report-modal .custom-report-games-list,
#bullpen-custom-report-modal .custom-report-games-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

#custom-report-modal .custom-report-game-item,
#bullpen-custom-report-modal .custom-report-game-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#custom-report-modal .custom-report-game-item:hover,
#bullpen-custom-report-modal .custom-report-game-item:hover {
    border-color: rgba(124, 58, 237, 0.45);
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.1);
}

#custom-report-modal .custom-report-game-item input[type="checkbox"],
#bullpen-custom-report-modal .custom-report-game-item input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    cursor: pointer;
}

#custom-report-modal .custom-report-game-item-content,
#bullpen-custom-report-modal .custom-report-game-item-content {
    flex: 1;
    min-width: 0;
}

#custom-report-modal .custom-report-game-item-title,
#bullpen-custom-report-modal .custom-report-game-item-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.2rem;
}

#custom-report-modal .custom-report-game-item-meta,
#bullpen-custom-report-modal .custom-report-game-item-meta {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin-bottom: var(--space-xs);
}

#custom-report-modal .custom-report-game-item-stats,
#bullpen-custom-report-modal .custom-report-game-item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.8125rem;
}

#custom-report-modal .custom-report-games-placeholder,
#bullpen-custom-report-modal .custom-report-games-placeholder {
    margin: 0;
    padding: var(--space-md);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

#custom-report-modal .custom-report-modal-footer,
#bullpen-custom-report-modal .custom-report-modal-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    background: #f0f2f8;
    justify-content: center;
}

#custom-report-modal .custom-report-download-actions,
#bullpen-custom-report-modal .custom-report-download-actions {
    margin-top: 0;
    justify-content: center;
}

/* Shared dismiss control — all report modals (gradient headers); high-contrast circular hit target */
/* .report-modal-dismiss — DEPRECATED, replaced by .btn-modal-close--on-dark */

/* Lifetime / Mid-Game / Post-Game modals — same shell rhythm as Custom Report; colors match report cards */
.modal-content.report-flow-modal-content {
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.modal-header.report-flow-modal-header {
    border-bottom: none;
}

.report-flow-modal-content--lifetime {
    border: 1px solid rgba(65, 105, 225, 0.22);
    box-shadow:
        0 24px 48px rgba(65, 105, 225, 0.1),
        0 8px 20px rgba(0, 0, 0, 0.06);
}

.report-flow-modal-content--mid-game {
    border: 1px solid rgba(255, 165, 0, 0.28);
    box-shadow:
        0 24px 48px rgba(255, 140, 0, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.06);
}

.report-flow-modal-content--post-game {
    border: 1px solid rgba(107, 114, 128, 0.35);
    box-shadow:
        0 24px 48px rgba(75, 85, 99, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.06);
}

.report-flow-modal-content--pca {
    border: 1px solid rgba(30, 58, 95, 0.28);
    box-shadow:
        0 24px 48px rgba(30, 58, 95, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.06);
}

.report-flow-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    flex-shrink: 0;
}

.report-flow-modal-header--lifetime {
    background: linear-gradient(135deg, #4169E1 0%, #3557C1 55%, #2a4aa8 100%);
    color: #fff;
}

.report-flow-modal-header--mid-game {
    background: linear-gradient(135deg, #FFA500 0%, #FF8C00 55%, #E67E00 100%);
    color: #fff;
}

.report-flow-modal-header--post-game {
    background: linear-gradient(135deg, #6B7280 0%, #4B5563 55%, #374151 100%);
    color: #fff;
}

.report-flow-modal-header--pca {
    background: linear-gradient(135deg, #2d5986 0%, #1e3a5f 55%, #152a45 100%);
    color: #fff;
}

.report-flow-modal-content--season {
    border: 1px solid rgba(4, 120, 87, 0.28);
    box-shadow:
        0 24px 48px rgba(4, 120, 87, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.06);
}

.report-flow-modal-header--season {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 55%, #a7f3d0 100%);
    color: #065f46;
    border-bottom: 2px solid #047857;
}

.report-flow-modal-header--season .btn-modal-close--on-season {
    color: #065f46;
}

.report-flow-modal-header--season .btn-modal-close--on-season:hover {
    background-color: rgba(4, 120, 87, 0.14);
    color: #047857;
}

.report-flow-modal-header--season .btn-modal-close--on-season:focus-visible {
    outline-color: #047857;
}

.report-flow-modal-body--season {
    background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 45%);
}

.report-flow-modal-footer--season {
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
    border-top: 1px solid rgba(4, 120, 87, 0.2);
}

#season-stats-modal .report-flow-modal-field {
    margin-bottom: 0;
}

#season-stats-modal .report-flow-modal-body .form-label {
    margin-bottom: var(--space-xs);
}

.season-modal-period-help {
    background: rgba(4, 120, 87, 0.08);
    border: 1px solid rgba(4, 120, 87, 0.22);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin: var(--space-md) 0 0;
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-primary);
}

.season-modal-period-help strong {
    color: #065f46;
}

.season-modal-period-help p {
    margin: 0 0 var(--space-sm);
}

.season-modal-period-help p:last-child {
    margin-bottom: 0;
}

.modal-header .report-flow-modal-heading {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.02em;
    flex: 1;
}

#season-stats-modal .modal-header.report-flow-modal-header--season .report-flow-modal-heading {
    color: #065f46;
}

.report-flow-modal-body {
    padding: var(--space-md) var(--space-lg);
}

.report-flow-modal-body--lifetime {
    background: linear-gradient(180deg, #f4f7fd 0%, #ffffff 45%);
}

.report-flow-modal-body--mid-game {
    background: linear-gradient(180deg, #fff9f0 0%, #ffffff 45%);
}

.report-flow-modal-body--post-game {
    background: linear-gradient(180deg, #f3f4f6 0%, #ffffff 45%);
}

.report-flow-modal-body--pca {
    background: linear-gradient(180deg, #f0f5fa 0%, #ffffff 45%);
    padding: var(--space-md) var(--space-lg);
    max-height: min(80vh, 820px);
    overflow-y: auto;
}

#pca-report-modal .custom-report-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

#pca-report-modal .custom-report-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-sm) var(--space-md);
    align-items: start;
}

#pca-report-modal .custom-report-form-group-span {
    grid-column: 1 / -1;
}

#pca-report-modal .form-group {
    margin-bottom: 0;
}

#pca-report-modal .custom-report-form-actions {
    margin-top: 0;
    padding-top: var(--space-md);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    gap: var(--space-sm);
}

#pca-report-modal .custom-report-form-section-panel {
    border: 2px solid rgba(30, 58, 95, 0.28);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    background: linear-gradient(180deg, rgba(30, 58, 95, 0.09) 0%, rgba(45, 89, 134, 0.04) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

#pca-report-modal .custom-report-form-section-header {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(30, 58, 95, 0.18);
}

#pca-report-modal .custom-report-form-section-title {
    margin: 0 0 0.2rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e3a5f;
    letter-spacing: -0.01em;
}

#pca-report-modal .custom-report-form-section-hint {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

#pca-report-modal .custom-report-selection-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    padding: 0.25rem;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(30, 58, 95, 0.2);
}

#pca-report-modal .custom-report-selection-mode-option {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    border-radius: calc(var(--radius-md) - 2px);
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-align: center;
}

#pca-report-modal .custom-report-selection-mode-option:hover {
    color: #1e3a5f;
    background: rgba(30, 58, 95, 0.06);
}

#pca-report-modal .custom-report-selection-mode-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

#pca-report-modal .custom-report-selection-mode-option:has(input:checked) {
    color: #fff;
    background: linear-gradient(135deg, #2d5986 0%, #1e3a5f 100%);
    border-color: rgba(21, 42, 69, 0.35);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.28);
}

#pca-report-modal .custom-report-selection-mode-label {
    pointer-events: none;
}

#pca-report-modal .custom-report-date-filters,
#pca-report-modal .custom-report-games-section {
    padding-top: var(--space-sm);
    border-top: 1px dashed rgba(30, 58, 95, 0.22);
}

#pca-report-modal .custom-report-date-filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
}

@media (min-width: 600px) {
    #pca-report-modal .custom-report-date-filters-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-md) var(--space-lg);
    }

    #pca-report-modal .custom-report-form-section-panel {
        padding: var(--space-lg);
    }

    #pca-report-modal .custom-report-selection-mode {
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    #pca-report-modal .custom-report-location-radios {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    #pca-report-modal .custom-report-location-radios .radio-option {
        flex: 1;
        min-width: 72px;
        justify-content: center;
        padding: var(--space-xs) var(--space-sm);
        border: 1px solid rgba(30, 58, 95, 0.18);
        border-radius: var(--radius-sm);
        background: rgba(255, 255, 255, 0.85);
    }
}

#pca-report-modal .custom-report-games-panel {
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid rgba(30, 58, 95, 0.22);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(255, 255, 255, 0.88);
}

@media (min-width: 768px) {
    #pca-report-modal .custom-report-games-panel {
        max-height: 420px;
    }
}

@media (min-width: 1024px) {
    #pca-report-modal .custom-report-games-panel {
        max-height: 480px;
    }
}

#pca-report-modal .custom-report-games-all-row {
    margin-bottom: var(--space-xs);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid rgba(30, 58, 95, 0.15);
}

#pca-report-modal .custom-report-games-all-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--text-primary);
}

#pca-report-modal .custom-report-games-all-label:hover {
    background: rgba(30, 58, 95, 0.08);
}

#pca-report-modal .custom-report-games-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

#pca-report-modal .custom-report-game-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
}

#pca-report-modal .custom-report-game-item:hover {
    border-color: rgba(30, 58, 95, 0.45);
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.1);
}

#pca-report-modal .custom-report-game-item input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
    cursor: pointer;
}

#pca-report-modal .custom-report-game-item-content {
    flex: 1;
    min-width: 0;
}

#pca-report-modal .custom-report-game-item-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.2rem;
}

#pca-report-modal .custom-report-game-item-meta {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    margin-bottom: var(--space-xs);
}

#pca-report-modal .custom-report-game-item-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.8125rem;
}

#pca-report-modal .custom-report-games-placeholder {
    margin: 0;
    padding: var(--space-md);
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

@media (max-width: 767px) {
    #pca-report-modal .custom-report-form-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-sm) !important;
    }

    #pca-report-modal .custom-report-form-section-panel {
        padding: var(--space-sm) !important;
    }

    #pca-report-modal .custom-report-selection-mode {
        margin-bottom: var(--space-sm) !important;
    }
}

#lifetime-stats-modal .report-flow-modal-field,
#post-game-report-modal .report-flow-modal-field,
#pca-report-modal .report-flow-modal-field {
    margin-bottom: 0;
}

#lifetime-stats-modal .report-flow-modal-body .form-label,
#post-game-report-modal .report-flow-modal-body .form-label,
#pca-report-modal .report-flow-modal-body .form-label {
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
    font-weight: 600;
}

#lifetime-stats-modal .report-flow-modal-body .form-input,
#post-game-report-modal .report-flow-modal-body .form-input,
#pca-report-modal .report-flow-modal-body .form-input {
    min-height: 42px;
    padding: var(--space-sm) var(--space-md);
    border-width: 1px;
    background: var(--surface);
}

.report-flow-modal-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
}

.report-flow-modal-footer--lifetime {
    background: #eef2fb;
}

.report-flow-modal-placeholder {
    margin: 0;
    color: var(--text-secondary);
    padding: var(--space-lg);
    text-align: center;
    font-size: 0.9375rem;
}

#lifetime-stats-modal .modal-content {
    max-height: none !important;
    height: auto !important;
}

/* Home Page Styles */
#login-page, #home-page {
    position: relative;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

#login-page::before, #home-page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url('/Softball-Field-Image.jpeg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    /* background-attachment: fixed removed — the ::before pseudo-element is already
       position: fixed, so this property is redundant and causes rendering freezes
       on iOS Safari in PWA standalone mode */
    opacity: 0.2;
    z-index: 0;
    /* Ensure background covers entire viewport without gaps */
    margin: 0;
    padding: 0;
}

#login-page > *, #home-page > * {
    position: relative;
    z-index: 1;
}

.home-page-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: -webkit-fill-available;
    padding: var(--space-xl);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Ensure container is centered */
    margin: 0 auto;
    position: relative;
}

.home-logo {
    max-width: 360px;
    width: 100%;
    margin-bottom: var(--space-md);
}

.login-feature-release-note {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 2px solid #16a34a;
    border-radius: 999px;
    padding: 0.35rem 1rem 0.35rem 0.6rem;
    margin: 0 auto var(--space-lg) auto;
    box-shadow: 0 2px 12px rgba(22, 163, 74, 0.18);
    font-size: 0.9375rem;
    color: #15803d;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-align: center;
    max-width: 500px;
}

.login-feature-release-note-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #16a34a;
    flex-shrink: 0;
    animation: login-feature-release-note-pulse 2s ease-in-out infinite;
}

@keyframes login-feature-release-note-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); }
    50%       { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); }
}

.home-form-container {
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
    /* Ensure form container is centered and fits within viewport */
    margin: 0 auto;
    padding: 0;
}

.login-page-stack {
    gap: var(--space-md);
}

.login-promo-block {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

@media (max-width: 767px) {
    .login-page-stack {
        justify-content: flex-start;
        padding-top: calc(var(--space-md) + 60px);
    }

    .login-stack-logo {
        order: 1;
        margin-bottom: var(--space-sm);
    }

    .login-promo-block {
        order: 2;
        max-width: 100%;
    }

    .login-signin-block {
        order: 3;
        max-width: 100%;
    }
}

@media (min-width: 768px) {
    .login-page-stack .login-promo-block {
        margin-top: var(--space-md);
    }
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    min-height: 44px; /* Better touch target */
    min-width: 44px;
}

/* Mobile button improvements */
@media (max-width: 767px) {
    .btn {
        padding: var(--space-md) var(--space-lg);
        font-size: 1rem;
        min-height: 48px; /* Larger touch target on mobile */
    }
    
    /* Keep btn-xs and btn-sm small on mobile - must come before general .btn rule */
    .btn.btn-xs {
        padding: 3px var(--space-xs) !important;
        font-size: 0.75rem !important;
        min-height: 26px !important;
        width: auto !important;
        min-width: auto !important;
    }
    
    .btn.btn-sm {
        padding: var(--space-xs) var(--space-sm) !important;
        font-size: 0.8125rem !important;
        min-height: 32px !important;
        width: auto !important;
        min-width: auto !important;
    }
    
    /* Full width for regular buttons only */
    .btn:not(.btn-selection):not(.btn-xs):not(.btn-sm):not(.btn-compact) {
        width: 100%;
    }

    /* Game report toolbar: override full-width .btn so three actions stay on one row */
    .game-report-action-row {
        flex-wrap: nowrap !important;
        gap: 6px;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box;
    }

    .game-report-action-row .btn {
        width: auto !important;
        min-width: auto !important;
        max-width: none !important;
        flex: 0 0 auto;
        min-height: 40px !important;
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        line-height: 1.2;
        white-space: nowrap;
    }

    /* Spray chart filter rows: keep buttons compact and side-by-side on mobile */
    #spray-hand-filter .btn,
    #spray-outcome-filter .btn,
    #spray-pitch-filter .btn {
        width: auto !important;
        min-width: auto !important;
        min-height: 36px !important;
        padding: 4px 12px !important;
        font-size: 0.8125rem !important;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* Opposing Lineups I/O grid: half-width cells instead of stacked full-width buttons */
    .lineups-io-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: var(--space-sm) var(--space-md) !important;
        font-size: 0.8125rem !important;
    }
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-hover);
}

.btn-secondary {
    background-color: #228B22;
    color: white;
}

.btn-secondary:hover:not(:disabled) {
    background-color: #1a6b1a;
}

.btn-danger {
    background-color: var(--danger-color);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background-color: var(--danger-hover);
}

.btn-outline {
    background-color: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border);
}

.btn-outline:hover:not(:disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

#btn-end-at-bat.btn-outline {
    background-color: transparent;
    color: var(--danger-color);
    border-color: var(--danger-color);
}

#btn-end-at-bat.btn-outline:hover:not(:disabled) {
    background-color: transparent;
    color: var(--danger-hover);
    border-color: var(--danger-hover);
}

.btn-success {
    background-color: #28a745;
    color: white;
    border: 2px solid #28a745;
}

.btn-success:hover:not(:disabled) {
    background-color: #218838;
    border-color: #1e7e34;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

.btn-yellow {
    background-color: #FFD700;
    color: #000;
    border: 2px solid #FFD700;
}

.btn-yellow:hover:not(:disabled) {
    background-color: #e6c200;
    border-color: #d4b200;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.35);
}

.btn-share {
    background-color: white;
    color: var(--sidebar-active);
    border: 2px solid var(--sidebar-active);
}

.btn-share:hover:not(:disabled) {
    background-color: var(--sidebar-active);
    color: white;
    border-color: var(--sidebar-active);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(149, 0, 0, 0.3);
}

.btn-share-email {
    background-color: white;
    color: var(--sidebar-active);
    border: 2px solid var(--sidebar-active);
}

.btn-share-email:hover:not(:disabled) {
    background-color: var(--sidebar-active);
    color: white;
    border-color: var(--sidebar-active);
}

.btn-share-sms {
    background-color: white;
    color: var(--sidebar-active);
    border: 2px solid var(--sidebar-active);
}

.btn-share-sms:hover:not(:disabled) {
    background-color: var(--sidebar-active);
    color: white;
    border-color: var(--sidebar-active);
}

.btn-share-sms:hover:not(:disabled) {
    background-color: #138496;
    border-color: #117a8b;
}

/* Active filter button state */
.btn-filter-active {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    font-weight: 600;
}

.btn-filter-active:hover:not(:disabled) {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Manage Pitch Types: filter buttons (All / Baseball / Softball) */
.pitch-type-filter-btn.active {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    font-weight: 600;
}
.pitch-type-filter-btn.active:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

/* Small button variant */
.btn-sm {
    padding: var(--space-xs) var(--space-sm) !important;
    font-size: 0.8125rem !important;
    min-height: 32px !important;
    min-width: auto !important;
}

/* Extra small button variant */
.btn-xs {
    padding: 3px var(--space-xs) !important;
    font-size: 0.75rem !important;
    min-height: 26px !important;
    min-width: auto !important;
    width: auto !important;
    line-height: 1.2 !important;
}

/* Dashboard card body - optimized for mobile */
.dashboard-card-body {
    padding: var(--space-md) !important;
}

@media (min-width: 768px) {
    .dashboard-card-body {
        padding: var(--space-lg) !important;
    }
}

/* Add Runs Against button - sidebar active red style */
#btn-add-runs-against {
    background-color: var(--sidebar-active) !important;
    color: white !important;
}

#btn-add-runs-against:hover:not(:disabled) {
    background-color: #7a0000 !important;
    opacity: 0.9;
}

/* Card Styles */
.card {
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: all 0.2s ease;
    will-change: transform, box-shadow;
    /* Ensure cards fit within viewport */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (hover: none) {
    /* Remove hover effects on touch devices */
    .card:hover {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
}

/* Live Game in-game batting line — shrink-wrap frame around H-AB / AVG / hits */
#current-batter-details.batter-live-stats-line {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: var(--space-sm);
    padding: 0.15rem 0.7rem;
    border: 1px solid #000;
    border-radius: 0;
    color: #000;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
}

/* Pitcher Grid */
.pitcher-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--space-lg);
    margin-top: var(--space-xl);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Expand pitcher cards on tablets and desktops to prevent email icon wrapping */
@media (min-width: 768px) {
    .pitcher-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
    }
}

@media (min-width: 1024px) {
    .pitcher-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
    }
}

.pitcher-card {
    cursor: pointer;
    padding: var(--space-sm) var(--space-md);
    position: relative;
    border: 3px solid transparent;
    overflow: visible;
    min-width: 0;
}

.pitcher-card-select-wrap {
    position: absolute;
    top: var(--space-xs);
    left: var(--space-xs);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    cursor: pointer;
}

.pitcher-card-select {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.pitcher-card--selected {
    border-color: var(--primary-color);
    background-color: rgba(65, 105, 225, 0.05);
    box-shadow: 0 2px 10px rgba(65, 105, 225, 0.18);
}

.pitcher-card--selected:hover {
    box-shadow: 0 4px 14px rgba(65, 105, 225, 0.22);
}

.pitcher-bulk-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.04);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.pitcher-selection-count {
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    min-width: 140px;
}

.pitcher-card-content {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-left: 1rem;
    min-height: 28px;
    min-width: 0;
}

.pitcher-info {
    flex: 1;
    min-width: 0; /* Allow text to wrap */
}

.pitcher-contact {
    white-space: nowrap; /* Prevent email icon from wrapping to its own line */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* On larger screens, allow more space for contact info */
@media (min-width: 768px) {
    .pitcher-contact {
        white-space: normal; /* Allow wrapping if really needed, but with more space */
    }
}

.pitcher-avatar {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    overflow: hidden;
    flex-shrink: 0;
}

.pitcher-name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.2;
}

.pitcher-details {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: 2px;
}

.pitcher-number {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-sm);
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1.2;
}

.pitcher-arm {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-sm);
    background-color: var(--text-secondary);
    color: white;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.75rem;
    line-height: 1.2;
}

.pitcher-team {
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.2;
}

.pitcher-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex-shrink: 0;
    margin-left: auto;
}

.pitcher-stat-row {
    display: flex;
}

.pitcher-stat-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0;
    background-color: transparent;
    border: none;
    cursor: default;
    min-width: 60px;
}

.pitcher-stat-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1px;
    line-height: 1.2;
}

.pitcher-stat-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

/* Form Styles */
.form-container {
    max-width: 600px;
    background-color: var(--surface);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    /* Ensure form containers fit within viewport */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Desktop/laptop: Constrain form containers on account page and other pages */
@media (min-width: 1024px) {
    .form-container {
        max-width: 500px; /* Reduce from 600px for better desktop appearance */
        width: 100%;
        margin: 0 auto; /* Center the form */
    }
    
    /* Account page uses full-width layout — not the narrow form-container */
    #account-page .form-container {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }
}

.form-group {
    margin-bottom: var(--space-lg);
}

.team-name-combobox {
    position: relative;
    width: 100%;
}

.team-name-suggestions-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 1300;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--dropdown-menu-bg);
    color: var(--dropdown-menu-text);
    border: 1px solid var(--dropdown-menu-border);
    border-radius: 12px;
    box-shadow: var(--dropdown-menu-shadow);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

.team-name-suggestions-dropdown.team-name-suggestions-dropdown--portaled {
    position: fixed;
    right: auto;
    bottom: auto;
}

.team-name-suggestions-dropdown.hidden {
    display: none !important;
}

.team-name-suggestion-option {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border: 0;
    background: transparent;
    color: var(--dropdown-menu-text);
    text-align: left;
    font: inherit;
    cursor: pointer;
}

.team-name-suggestion-option:hover,
.team-name-suggestion-option.is-active {
    background: var(--dropdown-menu-hover);
    color: var(--dropdown-menu-text);
}

.team-name-suggestion-option mark {
    background: rgba(10, 132, 255, 0.35);
    color: inherit;
    font-weight: 600;
    padding: 0;
}

.pmx-select-host {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.pmx-select-host--fit {
    width: auto;
    display: inline-block;
    vertical-align: top;
    flex: 0 1 auto;
}

.pmx-select-host select.pmx-select-native {
    width: 100%;
    pointer-events: none;
    touch-action: none;
}

.pmx-select-hit {
    position: absolute;
    inset: 0;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.001);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.pmx-select-hit:disabled {
    cursor: not-allowed;
}

.pmx-select-optgroup {
    padding: 0.45rem 0.85rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(245, 245, 247, 0.62);
    pointer-events: none;
}

.lineups-filter-field .pmx-select-host {
    min-width: 12rem;
    max-width: 100%;
    flex: 1 1 12rem;
}

.form-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    font-size: 0.875rem;
}

/* Make asterisks red for required fields */
.required-asterisk {
    color: #dc3545 !important;
    font-weight: 700 !important;
    margin-left: 2px;
}

/* Date and Time picker side-by-side layout - applies to all screen sizes */
.date-time-group {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--space-xs) !important;
    align-items: stretch !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.date-time-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.date-time-label {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
    margin-bottom: var(--space-xs) !important;
    display: block !important;
}

.form-input-small {
    padding: var(--space-xs) var(--space-sm) !important;
    min-height: 40px !important;
    font-size: 0.875rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
}

.form-input {
    width: 100%;
    padding: var(--space-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all 0.2s;
    min-height: 44px; /* Better touch target */
    box-sizing: border-box;
}

/*
 * Open select menus use the same dark list as Opposing Rosters → Filter by team.
 * color-scheme: dark drives the native iOS/Safari/Chrome picker; the closed
 * field stays a light form control so it does not invert with the page.
 */
select {
    color-scheme: dark;
}

select.form-input,
select.form-control,
select.form-input-sm,
select.form-input-small {
    background-color: var(--surface);
    color: var(--text-primary);
}

select option,
select optgroup {
    background-color: var(--dropdown-menu-bg);
    color: var(--dropdown-menu-text);
}

select option:checked,
select option:hover {
    background-color: var(--dropdown-menu-hover);
    color: var(--dropdown-menu-text);
}

/* Mobile form input improvements */
@media (max-width: 767px) {
    .form-input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: var(--space-md) var(--space-lg);
        min-height: 48px;
    }
    
    select.form-input {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-md) center;
        padding-right: calc(var(--space-xl) + 12px);
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
    }
    
    /* Keep date and time inputs same as desktop on mobile */
    input[type="date"].form-input,
    input[type="time"].form-input,
    .form-input-small {
        padding: var(--space-xs) var(--space-sm) !important;
        min-height: 40px !important;
        font-size: 0.875rem !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        appearance: none !important;
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
    }
    
    .date-time-group {
        display: flex !important;
        flex-direction: row !important;
        gap: var(--space-xs) !important;
        width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    
    .date-time-item {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: calc(50% - var(--space-xs) / 2) !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    
    .date-time-label {
        font-size: 0.7rem !important;
        margin-bottom: 4px !important;
    }
    
    .date-time-item .form-input-small {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        min-width: 0 !important;
    }
    
    input[type="date"].form-input-small,
    input[type="time"].form-input-small {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }
    
    /* Modernize date/time picker appearance - same as desktop */
    input[type="date"].form-input::-webkit-calendar-picker-indicator,
    input[type="time"].form-input::-webkit-calendar-picker-indicator,
    .form-input-small::-webkit-calendar-picker-indicator {
        cursor: pointer;
        padding: 2px;
        margin-left: 2px;
        opacity: 0.7;
        width: 20px;
        height: 20px;
    }
    
    input[type="date"].form-input::-webkit-calendar-picker-indicator:hover,
    input[type="time"].form-input::-webkit-calendar-picker-indicator:hover {
        opacity: 1;
    }
    
    /* Ensure date/time inputs don't overflow - same styling as desktop */
    input[type="date"].form-input::-webkit-datetime-edit,
    input[type="time"].form-input::-webkit-datetime-edit,
    .form-input-small::-webkit-datetime-edit {
        padding: 0;
        width: auto;
        max-width: calc(100% - 30px);
        font-size: 0.875rem;
    }
    
    input[type="date"].form-input::-webkit-datetime-edit-fields-wrapper,
    input[type="time"].form-input::-webkit-datetime-edit-fields-wrapper,
    .form-input-small::-webkit-datetime-edit-fields-wrapper {
        padding: 0;
    }
}

.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}

.radio-group {
    display: flex;
    gap: var(--space-lg);
}

.radio-option {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.radio-option label {
    cursor: pointer;
    font-size: 1rem;
}

.form-actions {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-xl);
    /* Ensure form actions fit within viewport */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

/* Dashboard Styles */
.dashboard-header {
    background-color: var(--surface);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-md);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

/* Reduce spacing on mobile */
@media (max-width: 767px) {
    .dashboard-header {
        padding: var(--space-md);
        margin-bottom: var(--space-sm);
        gap: var(--space-md);
    }
}

.dashboard-profile {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    flex: 0 0 auto;
}

/* Fix dashboard stats positioning on wider screens to prevent overlap with name */
@media (min-width: 768px) {
    .dashboard-profile {
        align-items: flex-start;
    }
    
    /* Ensure stats don't overlap by adding padding to dashboard-info */
    .dashboard-info {
        padding-right: 90px; /* Space for stats on wider screens */
    }
    
    /* Position stats to align with the top of the name (h3) */
    #dashboard-stats {
        position: absolute !important;
        top: 0 !important;
        right: 0;
        z-index: 10;
    }
    
    /* On very wide screens, ensure proper spacing */
    @media (min-width: 1024px) {
        .dashboard-info {
            padding-right: 100px;
        }
    }
}

.dashboard-lifetime-stats {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 100%;
}

/* AI Game Summary Styles */
.dashboard-summary-container {
    text-align: right;
    max-width: 100%;
}

.dashboard-summary-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    display: block;
}

.dashboard-summary-content {
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: left;
    max-width: 500px;
    margin-left: auto;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.dashboard-summary-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.dashboard-summary-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    flex-wrap: wrap;
}

.dashboard-summary-meta-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex: 1;
    min-width: 0;
}

.dashboard-summary-view-report {
    flex-shrink: 0;
    margin: 0 !important;
    font-size: 0.875rem;
    padding: var(--space-xs) var(--space-md);
    white-space: nowrap;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Mobile optimizations */
@media (max-width: 767px) {
    .dashboard-summary-content {
        padding: var(--space-sm);
        max-width: 100%;
        margin-left: 0;
    }
    
    .dashboard-summary-text {
        font-size: 0.875rem;
        line-height: 1.5;
        margin-bottom: var(--space-xs);
    }
    
    .dashboard-summary-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
        padding-top: var(--space-xs);
    }
    
    .dashboard-summary-meta-info {
        width: 100%;
    }
    
    .dashboard-summary-view-report {
        width: 100%;
        font-size: 0.8125rem;
        padding: var(--space-xs) var(--space-sm);
        margin-top: var(--space-xs);
    }
    
    .dashboard-summary-title {
        font-size: 0.9375rem;
        margin-bottom: var(--space-xs);
    }
}

.dashboard-summary-date {
    font-weight: 600;
}

.dashboard-summary-opponent {
    font-style: italic;
}

/* Responsive adjustments for summary */
@media (max-width: 767px) {
    .dashboard-summary-content {
        max-width: 100%;
        margin-left: 0;
    }
    
    .dashboard-summary-container {
        text-align: left;
    }
    
    .dashboard-lifetime-stats {
        width: 100%;
    }
}

/* Modern, compact stats display */
.dashboard-stats-container {
    text-align: right;
}

.dashboard-stats-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    display: block;
}

.dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
    max-width: 100%;
}

/* 4-column layout for larger screens (laptops and up) */
@media (min-width: 1024px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-sm);
    }
}

.dashboard-stat-item {
    display: flex;
    flex-direction: column;
    padding: var(--space-xs) var(--space-sm);
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: left;
    min-width: 0;
}

.dashboard-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 2px;
    line-height: 1.2;
}

.dashboard-stat-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.dashboard-avatar {
    width: 120px;
    height: 120px;
    border-radius: var(--radius-full);
    border: 4px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    color: white;
    overflow: hidden;
}

.dashboard-info h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--space-sm);
}

@media (max-width: 767px) {
    .dashboard-info h3 {
        font-size: 1.25rem;
        margin-bottom: var(--space-xs);
    }
}

.dashboard-meta {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
}

.dashboard-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    width: 100%;
    max-width: 36rem;
    box-sizing: border-box;
    margin: 0 auto var(--space-md);
}

.action-card {
    padding: 0.7rem 0.65rem;
    text-align: center;
    cursor: pointer;
    min-height: 44px;
    min-width: 0;
    box-sizing: border-box;
}

.action-card h4 {
    font-size: 0.875rem;
    margin-bottom: 0.2rem;
    color: var(--text-primary);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.action-card h4 img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

.action-card p {
    color: var(--text-secondary);
    font-size: 0.6875rem;
    line-height: 1.35;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .dashboard-actions {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        max-width: min(100%, 80rem);
        gap: var(--space-md);
    }

    .dashboard-actions .action-card {
        grid-column: span 2;
        width: auto;
        justify-self: stretch;
        padding: 1.25rem 1rem;
        min-height: 6.5rem;
    }

    .dashboard-actions .action-card:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .dashboard-actions .action-card:nth-child(5) {
        grid-column: 4 / span 2;
    }

    .action-card h4 {
        font-size: 1.0625rem;
    }

    .action-card h4 img {
        width: 22px;
        height: 22px;
    }

    .action-card p {
        font-size: 0.8125rem;
        -webkit-line-clamp: 3;
    }
}

@media (min-width: 1280px) {
    .dashboard-actions {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        max-width: 100%;
        gap: var(--space-lg);
    }

    .dashboard-actions .action-card,
    .dashboard-actions .action-card:nth-child(4),
    .dashboard-actions .action-card:nth-child(5),
    .dashboard-actions .action-card:last-child {
        grid-column: auto;
        width: auto;
        max-width: none;
        min-height: 7.5rem;
        padding: 1.5rem 1.15rem;
    }

    .action-card h4 {
        font-size: 1.125rem;
        white-space: normal;
    }

    .action-card p {
        font-size: 0.875rem;
    }
}

@media (min-width: 1440px) {
    .dashboard-actions .action-card,
    .dashboard-actions .action-card:nth-child(4),
    .dashboard-actions .action-card:nth-child(5),
    .dashboard-actions .action-card:last-child {
        min-height: 8.25rem;
        padding: 1.75rem 1.35rem;
    }

    .action-card h4 {
        font-size: 1.1875rem;
    }

    .action-card p {
        font-size: 0.9375rem;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
    .dashboard-actions {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        max-width: 100%;
        gap: 0.4rem;
    }

    .dashboard-actions .action-card {
        grid-column: span 2;
        width: auto;
        max-width: none;
        justify-self: stretch;
        padding: 0.5rem 0.55rem;
        min-height: 48px;
    }

    .dashboard-actions .action-card:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .dashboard-actions .action-card:nth-child(5) {
        grid-column: 4 / span 2;
    }

    .action-card p {
        display: none;
    }

    .action-card h4 {
        font-size: 0.8125rem;
        margin-bottom: 0;
    }
}

/* Pitch Types */
.pitch-types-container {
    background-color: var(--surface);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; /* Prevent content from extending outside */
}

/* Constrain width on larger screens */
@media (min-width: 768px) {
    .pitch-types-container {
        max-width: 100%;
        margin: 0;
    }
}

.pitch-type-selection-container {
    margin-bottom: var(--space-lg);
}

.pitch-type-checkbox-list {
    max-height: 400px;
    overflow-y: auto;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    background-color: var(--background);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-xs);
}

/* Custom pitch types section - highly visible */
.pitch-type-custom-section {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(76, 175, 80, 0.02) 100%);
}

.pitch-type-custom-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 var(--space-xs) 0;
}

.pitch-type-custom-section-desc {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm) 0;
}

.pitch-type-custom-list {
    max-height: 200px;
    border-color: var(--primary-color);
    background-color: rgba(255, 255, 255, 0.5);
}

.pitch-type-custom-section .pitch-type-checkbox-item {
    background-color: rgba(76, 175, 80, 0.06);
    border-radius: var(--radius-sm);
}

.pitch-type-checkbox-item {
    display: flex;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.pitch-type-checkbox-item:hover:not(:has(input:disabled)) {
    background-color: rgba(0, 0, 0, 0.03);
}

.pitch-type-checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: var(--space-sm);
    cursor: pointer;
    accent-color: var(--primary-color);
}

.pitch-type-checkbox-item input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Already-added play: grayed out with a checkmark indicator */
.pitch-type-checkbox-item--added {
    opacity: 0.55;
    pointer-events: none;
}

.pitch-type-checkbox-item--added span::after {
    content: ' \2713';
    font-size: 0.8em;
    color: var(--success-color, #28a745);
    font-weight: 700;
    margin-left: 4px;
}

.pitch-type-checkbox-actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.pitch-type-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pitch-type-form select,
.pitch-type-form input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pitch-type-form .btn {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pitch-types-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.pitch-type-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--secondary-color);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 600;
}

.pitch-type-remove {
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    transition: all 0.2s;
}

.pitch-type-remove:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

/* Edit Pitch Type Item - Clickable List Item */
.edit-pitch-type-item {
    border-radius: var(--radius-md);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.edit-pitch-type-item:hover {
    background-color: rgba(0, 0, 0, 0.05) !important;
}

.edit-pitch-type-item:active {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Placeholder Pages */
.placeholder-page {
    text-align: center;
    padding: var(--space-xl) 0;
}

.placeholder-page h2 {
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.placeholder-page p {
    color: var(--text-secondary);
    font-size: 1.125rem;
}

/* Utility Classes */
.hidden {
    display: none;
}

#spray-pitch-filter .btn.hidden,
#spray-pitch-filter .btn[hidden] {
    display: none !important;
}

.mt-lg {
    margin-top: var(--space-lg);
}

.mb-md {
    margin-bottom: var(--space-md);
}

/* Game Stats Summary */
.game-stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.stat-card {
    background-color: var(--surface);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--space-xs);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
}

/* Game Stages */
.game-stage {
    background-color: var(--surface);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-xl);
}

.stage-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    text-align: center;
    color: var(--text-primary);
}

.selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Game Actions Separator */
.game-actions-separator {
    height: 2px;
    background: linear-gradient(to right, transparent, var(--border), transparent);
    margin: var(--space-lg) 0;
}

/* Game Actions Section */
.game-actions-section {
    margin-top: 0;
    padding-top: 0;
}

.game-actions-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-lg);
    text-align: center;
    color: var(--text-primary);
}

.btn-selection {
    padding: var(--space-xl);
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-selection:hover:not(:disabled) {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-selection.selected,
.btn-selection.active {
    outline: 3px solid #FFD700;
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.35);
}

.btn-selection:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

@media (hover: none) {
    /* Better touch feedback on mobile */
    .btn-selection:active:not(:disabled) {
        background-color: var(--primary-hover);
        transform: scale(0.98);
    }
}

/* Log Pitch MPH Toggle */
.toggle-switch-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.toggle-switch-wrapper .toggle-label {
    font-weight: 600;
    font-size: 0.95rem;
}

.toggle-switch-wrapper .toggle-label#log-mph-toggle-off,
.toggle-switch-wrapper .toggle-label-off {
    color: var(--text-primary);
}

.toggle-switch-wrapper .toggle-label#log-mph-toggle-on,
.toggle-switch-wrapper .toggle-label-on {
    color: var(--text-secondary);
}

.toggle-switch-wrapper:has(input:checked) .toggle-label#log-mph-toggle-on,
.toggle-switch-wrapper:has(input:checked) .toggle-label-on {
    color: var(--primary-color);
}

.toggle-switch-wrapper:has(input:checked) .toggle-label#log-mph-toggle-off,
.toggle-switch-wrapper:has(input:checked) .toggle-label-off {
    color: var(--text-secondary);
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--border);
    border-radius: 26px;
    transition: 0.3s;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--primary-color);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

/* MPH Keypad */
.mph-keypad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    max-width: 300px;
    margin: 0 auto;
}

.mph-key {
    padding: var(--space-lg);
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: white;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.mph-key:active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: scale(0.95);
}

.mph-key-delete {
    background: #f5f5f5;
}

@media (hover: hover) {
    .mph-key:hover {
        background: var(--primary-color);
        color: white;
        border-color: var(--primary-color);
    }
}

/* Pitch Log */
.pitch-log-container {
    background-color: var(--surface);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#live-bullpen-page .pitch-log-container {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.pitch-log-container h3 {
    margin-bottom: var(--space-lg);
}

.pitch-log {
    max-height: 400px;
    overflow-y: auto;
}

.pitch-log-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
}

.pitch-log-entry:last-child {
    border-bottom: none;
}

.pitch-log-entry .pitch-sequence {
    font-weight: 700;
    color: var(--primary-color);
    width: 60px;
}

.pitch-log-entry .pitch-details {
    flex: 1;
    display: flex;
    gap: var(--space-md);
}

.pitch-log-entry .pitch-type {
    font-weight: 600;
    color: var(--text-primary);
}

.pitch-log-entry .pitch-outcome {
    color: var(--text-secondary);
}

.pitch-log-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-xl);
}

/* Modal Styles */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1003; /* Higher than sidebar (1001) and hamburger (1002) */
    padding: var(--space-lg);
    box-sizing: border-box;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile modal improvements - compact and fit content */
@media (max-width: 767px) {
    .modal {
        padding: var(--space-md);
        align-items: center;
        justify-content: center;
        padding-top: env(safe-area-inset-top, 0);
    }
    
    .modal-content {
        width: 90% !important;
        max-width: 90% !important;
        max-height: none !important;
        height: auto !important;
        border-radius: var(--radius-md) !important;
        margin: auto !important;
        display: flex;
        flex-direction: column;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
    }
    
    .modal-header {
        padding: var(--space-sm) var(--space-md) !important;
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    
    .modal-header h3 {
        font-size: 1rem !important;
        flex: 1;
        min-width: 0;
    }
    
    .modal-header .btn {
        min-width: auto;
        padding: var(--space-xs) var(--space-sm) !important;
        font-size: 0.8rem !important;
    }
    
    .modal-body {
        padding: var(--space-sm) var(--space-md) !important;
        max-height: none !important;
        overflow-y: visible !important;
        flex: 0 1 auto !important;
        min-height: auto !important;
        overflow-x: hidden;
    }
    
    /* Ensure form inputs don't cause horizontal overflow */
    .modal-body .form-input {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Additional optimization for date/time in modals */
    .modal-body input[type="date"],
    .modal-body input[type="time"] {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: var(--space-sm) var(--space-md) !important;
    }
    
    /* Prevent date/time picker from causing page to float */
    .modal-body input[type="date"]::-webkit-datetime-edit,
    .modal-body input[type="time"]::-webkit-datetime-edit {
        max-width: calc(100% - 50px) !important;
        overflow: hidden;
    }
    
    .modal-content {
        display: flex;
        flex-direction: column;
    }
    
    .modal-footer {
        padding: var(--space-md);
        flex-wrap: wrap;
    }
    
    .modal-footer .btn {
        flex: 1;
        min-width: 120px;
    }
}

.modal:not(.hidden) {
    display: flex;
}

#add-live-batter-modal {
    z-index: 1006;
}

.modal-content {
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    max-width: 550px; /* Reduced from 800px for better desktop appearance */
    width: 90%;
    max-height: none; /* Auto-size to content */
    height: auto; /* Auto-size to content */
    display: flex;
    flex-direction: column;
    overflow: visible; /* Allow content to determine size */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    margin: auto;
    position: relative;
    transform: translateZ(0); /* Force hardware acceleration for better rendering */
    flex-shrink: 0; /* Prevent shrinking in flex container */
}

/* Colored/gradient modal headers & footers must clip to border-radius (overrides overflow: visible above) */
.modal-content.report-flow-modal-content,
.modal-content.custom-report-modal-content,
.modal-content:has(.report-flow-modal-header),
.modal-content:has(.custom-report-modal-header),
.modal-content:has(> .modal-header[style*="background-color"]),
#custom-alert-modal .modal-content,
#custom-confirm-modal .modal-content,
#custom-input-modal .modal-content,
#select-pitcher-modal .modal-content,
#edit-pitch-modal .modal-content,
#edit-pitch-log-modal .modal-content,
#edit-pitch-browser-modal .modal-content,
#add-batter-modal .modal-content,
#edit-batter-modal .modal-content,
#edit-placeholder-modal .modal-content,
#add-pitch-modal .modal-content,
#subscription-plan-modal .modal-content,
#pitch-breakdown-filter-modal .modal-content,
#batter-hand-modal .modal-content,
#season-stats-modal .modal-content {
    overflow: hidden;
}

.report-flow-modal-header,
#custom-report-modal .custom-report-modal-header,
#bullpen-custom-report-modal .custom-report-modal-header {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

/* Desktop/laptop: Make modals even narrower on larger screens */
@media (min-width: 1024px) {
    .modal-content {
        max-width: 400px; /* Reduced from 500px for better desktop appearance */
        width: auto;
        min-width: 350px;
    }
}

.modal-content-large {
    max-width: 550px; /* Reduced from 700px for better desktop appearance */
}

/* Desktop/laptop: Make large modals narrower on larger screens */
@media (min-width: 1024px) {
    .modal-content-large {
        max-width: 400px; /* Reduced from 500px for better desktop appearance */
        width: auto;
        min-width: 350px;
    }
}

/* Download modal specific styling */
#download-modal .modal-content {
    max-width: 550px; /* Reduced from 600px for better desktop appearance */
    width: 90%;
}

/* Desktop/laptop: Make download modal narrower on larger screens */
@media (min-width: 1024px) {
    #download-modal .modal-content {
        max-width: 400px; /* Reduced from 500px for better desktop appearance */
        width: auto;
        min-width: 350px;
    }
}

/* Custom report modal - larger on desktop, fullscreen on mobile */
.custom-report-modal-content {
    max-width: min(95vw, 900px) !important;
    width: 90% !important;
    border-radius: var(--radius-lg);
}

@media (min-width: 1024px) {
    .custom-report-modal-content {
        max-width: 800px !important;
        width: 800px !important;
        min-width: 800px !important;
    }
}

@media (max-width: 767px) {
    .custom-report-modal-content {
        max-width: 100% !important;
        width: 100% !important;
        max-height: 95vh !important;
        height: auto !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
        margin: 0 !important;
    }
    
    #custom-report-modal .custom-report-modal-body,
    #bullpen-custom-report-modal .custom-report-modal-body,
    #mid-game-report-list-modal .report-flow-modal-body,
    #post-game-report-modal .report-flow-modal-body,
    #pca-report-modal .report-flow-modal-body {
        max-height: calc(95vh - 140px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Custom report form mobile */
    #custom-report-modal .custom-report-form,
    #bullpen-custom-report-modal .custom-report-form {
        gap: var(--space-sm) !important;
    }

    #custom-report-modal .custom-report-form-grid,
    #bullpen-custom-report-modal .custom-report-form-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-sm) !important;
    }

    #custom-report-modal .custom-report-form-actions,
    #bullpen-custom-report-modal .custom-report-form-actions {
        padding-top: var(--space-sm) !important;
    }

    #custom-report-modal .custom-report-form-section-panel,
    #bullpen-custom-report-modal .custom-report-form-section-panel,
    #custom-report-modal .custom-report-game-selection-panel,
    #bullpen-custom-report-modal .custom-report-game-selection-panel {
        padding: var(--space-sm) !important;
    }

    #custom-report-modal .custom-report-form-section-hint,
    #bullpen-custom-report-modal .custom-report-form-section-hint,
    #custom-report-modal .custom-report-game-selection-hint,
    #bullpen-custom-report-modal .custom-report-game-selection-hint {
        font-size: 0.75rem;
    }

    #custom-report-modal .custom-report-selection-mode,
    #bullpen-custom-report-modal .custom-report-selection-mode {
        margin-bottom: var(--space-sm) !important;
    }
    
    #custom-report-modal .radio-group,
    #bullpen-custom-report-modal .radio-group {
        flex-direction: row;
        flex-wrap: wrap;
    }
    
    #custom-report-modal .radio-option,
    #bullpen-custom-report-modal .radio-option {
        flex: 1;
        min-width: 80px;
    }
    
    /* Custom report modal - mobile-specific adjustments */
    #custom-report-modal .report-table-wrapper {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 8px; /* Account for scrollbar */
        box-sizing: border-box;
    }
    
    #custom-report-modal .report-pitch-table {
        width: 100%;
        min-width: max-content;
        table-layout: auto;
        margin-left: 0;
    }
    
    #custom-report-modal .report-pitch-table td:first-child {
        padding-left: var(--space-xl);
        padding-right: var(--space-lg);
    }
    
    #custom-report-modal .report-pitch-table th:first-child {
        padding-left: var(--space-xl);
        padding-right: var(--space-lg);
    }
}

#download-modal .modal-body {
    text-align: center;
}

#download-modal .modal-body > div {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: stretch;
}

#download-modal .modal-body button {
    text-align: left;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: relative;
}

/* .btn-close-modal — DEPRECATED, replaced by .btn-modal-close */

.modal-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    flex: 1;
}

/* ── Standardized modal close button ── */
.btn-modal-close {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: transparent;
    border: none;
    color: var(--danger-color);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.35rem 0.65rem;
    border-radius: var(--radius-sm);
    transition: background-color 0.15s, color 0.15s, transform 0.1s;
    flex-shrink: 0;
    line-height: 1;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.btn-modal-close .close-icon {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.btn-modal-close:hover {
    background-color: rgba(196, 30, 58, 0.1);
    color: var(--danger-hover);
}

.btn-modal-close:active {
    transform: scale(0.95);
}

.btn-modal-close:focus-visible {
    outline: 2px solid var(--danger-color);
    outline-offset: 2px;
}

.btn-modal-close--on-dark {
    color: #fff;
}

.btn-modal-close--on-dark:hover {
    background-color: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.btn-modal-close--on-dark:focus-visible {
    outline-color: #fff;
}

/* ── Standardized back button ── */
.btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.6rem 1.2rem;
    border-radius: var(--radius-md);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
    min-height: 44px;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.btn-back .back-arrow {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
}

.btn-back:hover {
    background-color: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.btn-back:active {
    transform: scale(0.97);
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

.btn-back:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .btn-back {
        width: 100%;
        justify-content: center;
    }
}

.modal-body {
    padding: var(--space-md) var(--space-lg);
    overflow-y: visible; /* No scrolling - let content determine size */
    max-height: none; /* Auto-size to content */
    flex: 0 1 auto; /* Don't grow, but can shrink if needed */
}

.modal-footer {
    display: flex;
    justify-content: center;
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid var(--border);
    flex-shrink: 0; /* Always visible at bottom */
}

/* Edit Pitch and Edit Pitch Log modals - match Add Pitch modal appearance */
#edit-pitch-modal .modal-content,
#edit-pitch-log-modal .modal-content {
    max-width: 500px;
}

#edit-pitch-modal .modal-header,
#edit-pitch-log-modal .modal-header {
    background-color: var(--sidebar-active);
    color: white;
    padding: var(--space-sm) var(--space-md);
    position: relative;
    border-bottom: none;
}

#edit-pitch-modal .modal-header h3,
#edit-pitch-log-modal .modal-header h3 {
    color: white;
    margin: 0;
    font-size: 1rem;
}

/* Old .btn close positioning for edit-pitch headers — replaced by .btn-modal-close--on-dark */

#edit-pitch-modal .modal-body,
#edit-pitch-log-modal .modal-body {
    padding: var(--space-lg);
}

#edit-pitch-modal .modal-footer {
    justify-content: flex-end;
    gap: var(--space-sm);
}

/* Edit Pitch Log — grouped layout & modern polish */
#edit-pitch-log-modal .edit-pitch-log-modal-content {
    max-width: 420px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.08),
        0 2px 4px -2px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

#edit-pitch-log-modal .edit-pitch-log-modal-body {
    padding: var(--space-lg);
    background: linear-gradient(180deg, #fafbfc 0%, var(--surface) 100%);
}

#edit-pitch-log-modal #edit-log-action-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

#edit-pitch-log-modal .edit-pitch-log-section {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    padding: var(--space-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

#edit-pitch-log-modal .edit-pitch-log-section--pitches {
    border-color: rgba(65, 105, 225, 0.2);
    background: linear-gradient(180deg, #ffffff 0%, #f8f9ff 100%);
}

#edit-pitch-log-modal .edit-pitch-log-section--batters {
    border-color: rgba(34, 139, 34, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #f6faf6 100%);
}

#edit-pitch-log-modal .edit-pitch-log-section--session {
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.08);
    background: #fafafa;
}

#edit-pitch-log-modal .edit-pitch-log-section__title {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#edit-pitch-log-modal .edit-pitch-log-section__buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

#edit-pitch-log-modal .edit-pitch-log-action-btn {
    transition: filter 0.15s ease, transform 0.1s ease;
}

#edit-pitch-log-modal .edit-pitch-log-action-btn:hover {
    filter: brightness(1.05);
}

#edit-pitch-log-modal .edit-pitch-log-action-btn:active {
    transform: scale(0.99);
}

#edit-pitch-log-modal .edit-pitch-log-action-btn--neutral {
    background-color: #64748b;
    color: #ffffff;
    border: 1px solid #64748b;
}

#edit-pitch-log-modal .edit-pitch-log-action-btn--neutral:hover {
    background-color: #556278;
    border-color: #556278;
}

#edit-pitch-log-modal .edit-pitch-log-action-btn--primary {
    background-color: var(--secondary-color);
    color: #ffffff;
    border: 1px solid var(--secondary-color);
}

#edit-pitch-log-modal .edit-pitch-log-action-btn--primary:hover {
    background-color: #1a6b1a;
    border-color: #1a6b1a;
}

#edit-pitch-log-modal .edit-pitch-log-action-btn--danger {
    background-color: #b02a37;
    color: #ffffff;
    border: 1px solid #b02a37;
}

#edit-pitch-log-modal .edit-pitch-log-action-btn--danger:hover {
    background-color: #9a2430;
    border-color: #9a2430;
}

#edit-pitch-log-modal .edit-pitch-log-action-btn--outline-danger {
    background-color: transparent;
    color: #dc3545;
    border: 2px solid #dc3545;
}

#edit-pitch-log-modal .edit-pitch-log-action-btn--outline-danger:hover {
    background-color: rgba(220, 53, 69, 0.06);
}

#edit-pitch-log-modal .edit-pitch-log-action-btn--outline-success {
    background-color: transparent;
    color: #28a745;
    border: 2px solid #28a745;
}

#edit-pitch-log-modal .edit-pitch-log-action-btn--outline-success:hover {
    background-color: rgba(40, 167, 69, 0.06);
}

#edit-pitch-log-modal .edit-pitch-log-action-btn--outline-danger:hover,
#edit-pitch-log-modal .edit-pitch-log-action-btn--outline-success:hover {
    filter: none;
}

/* Edit Pitch Log uses narrower button-only layout */
#edit-pitch-log-modal .modal-content {
    max-width: 420px;
}

/* Edit Pitch Browser modal */
#edit-pitch-browser-modal .modal-content {
    max-width: 550px;
}

#edit-pitch-browser-modal .modal-header {
    background-color: var(--sidebar-active);
    color: white;
    padding: var(--space-sm) var(--space-md);
    position: relative;
    border-bottom: none;
}

#edit-pitch-browser-modal .modal-header h3 {
    color: white;
    margin: 0;
    font-size: 1rem;
}

@media (min-width: 1024px) {
    #edit-pitch-log-modal .modal-content {
        max-width: 420px;
        width: auto;
        min-width: 360px;
    }
    #edit-pitch-browser-modal .modal-content {
        max-width: 600px;
        width: auto;
        min-width: 400px;
    }
}

/* Add Batter / Edit Pitch Log child forms — notes, OR divider, viewport-safe scroll */
.add-batter-lineup-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.add-batter-or-divider {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.add-batter-or-divider::before,
.add-batter-or-divider::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: var(--border);
}

.add-batter-or-divider.hidden {
    display: none;
}

.edit-pitch-log-field-note {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: var(--space-xs) 0 0;
    line-height: 1.4;
}

#add-batter-modal .modal-content,
#edit-batter-modal .modal-content,
#edit-placeholder-modal .modal-content,
#add-pitch-modal .modal-content,
#edit-pitch-modal .modal-content,
#edit-pitch-browser-modal .modal-content {
    max-height: min(92vh, 900px);
    overflow: hidden;
}

#add-batter-modal .modal-body,
#edit-batter-modal .modal-body,
#edit-placeholder-modal .modal-body,
#add-pitch-modal .modal-body,
#edit-pitch-modal .modal-body,
#edit-pitch-browser-modal .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    min-height: 0;
}

#add-batter-modal .form-control,
#edit-batter-modal .form-control,
#edit-placeholder-modal .form-control,
#add-pitch-modal .form-control,
#edit-pitch-modal .form-control,
#edit-pitch-browser-modal .form-control,
#add-batter-modal input,
#add-batter-modal select,
#edit-batter-modal input,
#edit-batter-modal select,
#edit-placeholder-modal input,
#edit-placeholder-modal select {
    max-width: 100%;
    box-sizing: border-box;
}

#edit-pitch-batter-identity-label,
#edit-pitch-log-modal .edit-pitch-log-action-btn {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

#edit-pitch-browser-batter {
    max-width: 100%;
}

@media (max-width: 1024px) {
    #add-batter-modal .modal-content,
    #edit-batter-modal .modal-content,
    #edit-placeholder-modal .modal-content,
    #add-pitch-modal .modal-content,
    #edit-pitch-modal .modal-content,
    #edit-pitch-log-modal .modal-content,
    #edit-pitch-browser-modal .modal-content {
        width: calc(100% - 1.5rem);
        max-width: min(520px, calc(100% - 1.5rem));
        max-height: min(92dvh, 92vh);
        margin: 0.75rem auto;
    }

    #edit-pitch-log-modal .modal-content {
        max-width: min(420px, calc(100% - 1.5rem));
    }

    #add-batter-modal .modal-footer,
    #edit-batter-modal .modal-footer,
    #edit-placeholder-modal .modal-footer,
    #add-pitch-modal .modal-footer,
    #edit-pitch-modal .modal-footer {
        flex-wrap: wrap;
        justify-content: stretch;
        gap: var(--space-sm);
    }

    #add-batter-modal .modal-footer .btn,
    #edit-batter-modal .modal-footer .btn,
    #edit-placeholder-modal .modal-footer .btn,
    #add-pitch-modal .modal-footer .btn,
    #edit-pitch-modal .modal-footer .btn {
        flex: 1 1 calc(50% - var(--space-sm));
        min-width: 0;
    }

    .edit-pitch-log-item {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .edit-pitch-log-item .btn {
        min-width: 0;
    }

    #edit-pitch-browser-list {
        max-height: min(40vh, 320px);
    }

    #edit-pitch-log-modal .edit-pitch-log-action-btn {
        font-size: 0.9rem;
        line-height: 1.3;
    }
}

@media (max-width: 767px) {
    #add-batter-modal .modal-content,
    #edit-batter-modal .modal-content,
    #edit-placeholder-modal .modal-content,
    #add-pitch-modal .modal-content,
    #edit-pitch-modal .modal-content,
    #edit-pitch-log-modal .modal-content,
    #edit-pitch-browser-modal .modal-content {
        width: calc(100% - 1rem) !important;
        max-width: calc(100% - 1rem) !important;
        max-height: min(92dvh, 92vh) !important;
        height: auto !important;
        margin: 0.5rem auto !important;
    }

    #add-batter-modal .modal-body,
    #edit-batter-modal .modal-body,
    #edit-placeholder-modal .modal-body,
    #add-pitch-modal .modal-body,
    #edit-pitch-modal .modal-body,
    #edit-pitch-browser-modal .modal-body {
        overflow-y: auto !important;
        max-height: none !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        padding: var(--space-md) !important;
    }

    .edit-pitch-log-field-note {
        font-size: 0.75rem;
    }

    #add-batter-modal .modal-footer .btn,
    #edit-batter-modal .modal-footer .btn,
    #edit-placeholder-modal .modal-footer .btn,
    #add-pitch-modal .modal-footer .btn,
    #edit-pitch-modal .modal-footer .btn {
        flex: 1 1 100%;
    }
}

/* Custom alert/confirm/input modals: always above all other modals */
#custom-alert-modal,
#custom-confirm-modal,
#custom-input-modal {
    z-index: 1050 !important;
}

/* Custom alert modal styling */
#custom-alert-modal .modal-content {
    max-width: 500px;
}

/* Desktop/laptop: Make custom alert modal narrower on larger screens */
@media (min-width: 1024px) {
    #custom-alert-modal .modal-content {
        max-width: 400px; /* Reduced from 450px for better desktop appearance */
        width: auto;
        min-width: 300px;
    }
}

#custom-alert-modal .modal-header {
    background-color: var(--sidebar-active);
    color: white;
    padding: var(--space-md) var(--space-lg);
}

#custom-alert-modal .modal-header h3 {
    color: white;
    margin: 0;
    font-size: 1.125rem;
}

#custom-alert-modal .modal-body {
    text-align: left;
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    max-height: 60vh;
    overflow-y: auto;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#custom-alert-modal .modal-body p {
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
}

#custom-alert-message {
    width: 100%;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

#custom-alert-modal .modal-footer {
    padding: var(--space-sm) var(--space-md);
}

#custom-alert-modal .modal-footer button {
    min-width: 80px;
    padding: var(--space-sm) var(--space-lg);
}

/* Compact styling for all selection and alert modals */
#select-pitcher-modal .modal-content,
#custom-alert-modal .modal-content,
#custom-confirm-modal .modal-content,
#custom-input-modal .modal-content {
    max-height: none !important;
    height: auto !important;
}

#select-pitcher-modal .modal-body,
#custom-alert-modal .modal-body,
#custom-confirm-modal .modal-body,
#custom-input-modal .modal-body {
    max-height: none !important;
    overflow-y: visible !important;
    padding: var(--space-md) var(--space-lg) !important;
}

#select-pitcher-modal .modal-header {
    padding: var(--space-sm) var(--space-md) !important;
}

/* Mobile-specific styling for custom alert modal */
@media (max-width: 767px) {
    #custom-alert-modal .modal-content,
    #custom-confirm-modal .modal-content,
    #select-pitcher-modal .modal-content {
        max-width: 85% !important;
        width: 85% !important;
        margin: auto !important;
        max-height: none !important;
        height: auto !important;
        padding: 0 !important;
    }
    
    #custom-alert-modal .modal-header,
    #custom-confirm-modal .modal-header,
    #select-pitcher-modal .modal-header {
        padding: var(--space-xs) var(--space-sm) !important;
        border-bottom: 1px solid var(--border) !important;
    }
    
    #custom-alert-modal .modal-header h3,
    #custom-confirm-modal .modal-header h3,
    #select-pitcher-modal .modal-header h3 {
        font-size: 0.9rem !important;
        margin: 0 !important;
    }
    
    #custom-alert-modal .modal-body,
    #custom-confirm-modal .modal-body,
    #select-pitcher-modal .modal-body {
        padding: var(--space-sm) !important;
        max-height: none !important;
        min-height: auto !important;
        overflow-y: visible !important;
    }
    
    #custom-alert-message,
    #custom-confirm-message {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin: 0 !important;
    }
    
    #custom-alert-modal .modal-footer,
    #custom-confirm-modal .modal-footer,
    #select-pitcher-modal .modal-footer {
        padding: var(--space-xs) var(--space-sm) !important;
        border-top: 1px solid var(--border) !important;
    }
    
    #custom-alert-modal .modal-footer button,
    #custom-confirm-modal .modal-footer button,
    #select-pitcher-modal .modal-footer button {
        min-width: 50px !important;
        padding: var(--space-xs) var(--space-md) !important;
        font-size: 0.85rem !important;
        width: auto !important;
    }

    /* Lifetime Statistics modal — branded layout on small screens */
    #lifetime-stats-modal .modal-content {
        max-width: 85% !important;
        width: 85% !important;
        margin: auto !important;
        max-height: none !important;
        height: auto !important;
        padding: 0 !important;
    }

    #lifetime-stats-modal .report-flow-modal-header--lifetime {
        padding: var(--space-sm) var(--space-md) !important;
    }

    #lifetime-stats-modal .modal-header .report-flow-modal-heading {
        font-size: 1rem !important;
    }

    #lifetime-stats-modal .report-flow-modal-body--lifetime {
        padding: var(--space-sm) var(--space-md) !important;
    }

    #lifetime-stats-modal .report-flow-modal-footer--lifetime {
        padding: var(--space-xs) var(--space-sm) !important;
    }

    #lifetime-stats-modal .report-flow-modal-footer--lifetime .btn {
        min-width: 50px !important;
        padding: var(--space-xs) var(--space-md) !important;
        font-size: 0.85rem !important;
    }
}

/* Custom confirm modal styling */
#custom-confirm-modal .modal-content {
    max-width: 500px;
}

/* Desktop/laptop: Make custom confirm modal narrower on larger screens */
@media (min-width: 1024px) {
    #custom-confirm-modal .modal-content {
        max-width: 400px; /* Reduced from 450px for better desktop appearance */
        width: auto;
        min-width: 300px;
    }
}

#custom-confirm-modal .modal-header {
    background-color: var(--sidebar-active);
    color: white;
    padding: var(--space-sm) var(--space-md);
}

#custom-confirm-modal .modal-header h3 {
    color: white;
    margin: 0;
    font-size: 1.125rem;
}

#custom-confirm-modal .modal-body {
    text-align: left;
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: center;
    max-height: none;
    overflow-y: visible;
}

#custom-confirm-message {
    width: 100%;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

#custom-confirm-modal .modal-footer {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-md);
}

#custom-confirm-modal .modal-footer button {
    min-width: 80px;
    padding: var(--space-sm) var(--space-lg);
}

/* Custom input modal styling */
#custom-input-modal .modal-content {
    max-width: 500px;
}

/* Desktop/laptop: Make custom input modal narrower on larger screens */
@media (min-width: 1024px) {
    #custom-input-modal .modal-content {
        max-width: 400px; /* Reduced from 450px for better desktop appearance */
        width: auto;
        min-width: 300px;
    }
}

#custom-input-modal .modal-header {
    background-color: var(--sidebar-active);
    color: white;
    padding: var(--space-sm) var(--space-md);
}

#custom-input-modal .modal-header h3 {
    color: white;
    margin: 0;
    font-size: 1.125rem;
}

#custom-input-modal .modal-body {
    text-align: left;
    padding: var(--space-md) var(--space-lg);
    max-height: none;
    overflow-y: visible;
}

#custom-input-message {
    width: 100%;
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
}

#custom-input-modal .modal-footer {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-md);
}

#custom-input-modal .modal-footer button {
    min-width: 80px;
    padding: var(--space-sm) var(--space-lg);
}

.edit-pitch-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    transition: all 0.2s;
    cursor: pointer;
}

.edit-pitch-item:hover {
    border-color: var(--primary-color);
    background-color: rgba(220, 20, 60, 0.05);
}

.edit-pitch-info {
    flex: 1;
}

.edit-pitch-actions {
    display: flex;
    gap: var(--space-sm);
}

/* Import Status */
#import-status {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    font-weight: 600;
}

#import-status.success {
    background-color: rgba(5, 150, 105, 0.1);
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

#import-status.error {
    background-color: rgba(220, 38, 38, 0.1);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

/* Hamburger Menu */
.hamburger-menu {
    display: none;
    position: fixed;
    top: var(--space-lg);
    top: calc(var(--space-lg) + env(safe-area-inset-top, 0px)); /* Account for safe area (notch/status bar) */
    left: var(--space-lg); /* MOVED to left */
    z-index: 1002; /* Ensure it's above sidebar */
    background: linear-gradient(135deg, var(--sidebar-bg) 0%, #1a1a1a 100%);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    cursor: pointer;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* Improve touch handling on mobile */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.hamburger-menu:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}

.hamburger-menu.active {
    background: linear-gradient(135deg, var(--sidebar-active) 0%, #7a0000 100%);
    box-shadow: 0 4px 12px rgba(149, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.hamburger-menu span {
    display: block;
    width: 24px;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.hamburger-menu.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.hamburger-menu.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* Events Page Styles - Modernized */
.games-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: var(--space-lg);
    padding: var(--space-md);
}

@media (min-width: 768px) {
    .games-container {
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: var(--space-xl);
        padding: var(--space-lg);
    }
}

.game-item {
    display: flex;
    flex-direction: column;
    background-color: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    padding: var(--space-md);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid var(--border);
    position: relative;
    overflow: hidden;
}

.game-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.game-item:hover {
    background-color: var(--surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
    border-color: var(--primary-color);
}

.game-item:hover::before {
    transform: scaleY(1);
}

.game-item.active-game-item {
    border-color: var(--secondary-color);
    box-shadow: 0 4px 16px rgba(34, 139, 34, 0.15), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.game-item.active-game-item::before {
    background: linear-gradient(180deg, var(--secondary-color) 0%, #1a6b1a 100%);
    transform: scaleY(1);
}

.game-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
    gap: var(--space-sm);
    padding-right: 75px;
}

.game-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: 0;
}

.game-card-calendar {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    width: 60px;
    height: 60px;
    z-index: 1;
}

.events-instruction-note {
    margin-bottom: var(--space-lg);
}

/* Event button hover effects */
.btn-resume-game:hover {
    background-color: var(--edit-hover) !important;
}

.btn-continue-game:hover,
.btn-new-game:hover {
    background-color: #1a6b1a !important;
}

.btn-edit-event:hover {
    background-color: var(--edit-hover) !important;
}

/* Dashboard delete game button hover */
.btn-delete-game:hover {
    background-color: #6B0000 !important;
}

/* Event Detail Page Styles */
.event-detail-card {
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.event-detail-profile {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    position: relative;
}

.game-detail-avatar {
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}

.event-detail-info {
    flex: 1;
    min-width: 0;
}

.game-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-xs);
}

.game-detail-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    flex: 1;
}

.event-detail-stats {
    display: flex;
    gap: var(--space-xs);
    flex-shrink: 0;
}

.game-detail-meta {
    display: flex;
    gap: var(--space-sm);
    align-items: center;
    margin-bottom: var(--space-xs);
}

.game-detail-contact {
    margin-top: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-detail-phone,
.event-detail-email {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.game-detail-section {
    border-top: 1px solid var(--border);
    padding-top: var(--space-md);
    margin-bottom: var(--space-md);
}

.game-detail-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    color: var(--text-primary);
}

.game-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
}

.game-detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.game-detail-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.game-detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.game-detail-opponent-title {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
}

.game-detail-date {
    color: var(--primary-color);
}

.game-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.game-detail-actions .btn {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
}

/* Fixed width buttons on larger screens - aligned to left */
@media (min-width: 768px) {
    .game-detail-actions {
        grid-template-columns: repeat(2, auto);
        justify-content: flex-start;
        justify-items: flex-start;
    }
    
    .game-detail-actions .btn {
        width: auto;
        min-width: 160px;
    }
}

/* Calendar Card Styles */
.game-calendar-card {
    width: 80px;
    height: 80px;
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.calendar-month {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 2px;
    color: #dc3545;
}

.calendar-day {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--text-primary);
}

.game-detail-header-section {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
    margin-bottom: var(--space-md);
}

.game-detail-main-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.game-address-link {
    display: inline-block;
    margin-top: 4px;
}

.event-detail-opponent {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Dashboard resume/continue game button hover */
.btn-resume-game-dashboard:hover {
    background-color: var(--edit-hover) !important;
}

.btn-continue-game-dashboard:hover {
    background-color: #1a6b1a !important;
}

/* Event detail edit button hover */
.btn-detail-edit-event:hover {
    background-color: var(--edit-hover) !important;
}

.game-date {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    line-height: 1.2;
}

.game-pitcher {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.game-pitcher-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.game-pitcher-number {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    line-height: 1.2;
}

.event-number-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs) var(--space-md);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(65, 105, 225, 0.2);
}

.game-opponent {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.game-opponent::before {
    content: 'vs';
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.875rem;
    margin-right: var(--space-xs);
}

.game-location {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--space-sm);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.75rem;
    width: fit-content;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    line-height: 1.2;
}
    
.game-location.home {
    background-color: var(--home-color);
    color: var(--home-text);
    border: 2px solid var(--home-border);
}
    
.game-location.away {
    background-color: var(--away-color);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.games-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: var(--space-xl) var(--space-lg);
    color: var(--text-secondary);
    font-size: 1rem;
    background-color: var(--surface);
    border-radius: var(--radius-lg);
    border: 2px dashed var(--border);
}

/* ===================================================================
 * RESPONSIVE DESIGN - MOBILE FIRST APPROACH
 * =================================================================== */

/* Base mobile optimizations - apply to all screen sizes */
* {
    -webkit-tap-highlight-color: transparent;
}

/* Ensure all interactive elements have proper touch targets */
button, .btn, a, input, select, textarea, .nav-item, .card {
    touch-action: manipulation;
}

/* Prevent zoom on double-tap for home screen apps */
@media (display-mode: standalone) {
    html {
        /* Prevent iOS Safari from zooming on input focus */
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    body {
        /* Prevent zoom gestures in standalone mode */
        touch-action: pan-x pan-y;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Re-enable text selection for inputs and text areas */
    input, textarea, [contenteditable] {
        -webkit-user-select: auto;
        user-select: auto;
    }
    
    /* Do NOT use width: 100vw here — 100vw includes scrollbar width and
       ignores the sidebar, causing content to overflow the right edge.
       The base rules already set width: 100% + overflow-x: hidden on
       .app-container, .main-content, and .page. */
}

/* Responsive */
@media (max-width: 767px) {
    /* Improved typography scaling for mobile */
    html {
        font-size: 16px;
        /* Prevent horizontal scrolling */
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    body {
        font-size: 0.9375rem; /* 15px base */
        line-height: 1.5;
        /* Prevent horizontal scrolling */
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    /* Global fix: Ensure all direct children of main-content fit within viewport */
    .main-content > * {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-right: 0;
    }
    
    /* Ensure all containers within pages respect viewport */
    .page > * {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .hamburger-menu {
        display: flex;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
        width: 280px; /* Wider sidebar on mobile for better touch targets */
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
        /* Position below notification area and extend to bottom */
        top: env(safe-area-inset-top, 0px);
        height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }

    .sidebar.active {
        transform: translateX(0);
    }
    
    .sidebar-nav {
        gap: var(--space-xs);
        padding: 0 var(--space-md);
    }
    
    .nav-item {
        padding: var(--space-md) var(--space-md);
        min-height: 48px; /* Better touch target */
        font-size: 1rem;
        margin: 0 var(--space-xs);
        /* Enhanced touch responsiveness on mobile */
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
        /* Prevent text selection on tap */
        -webkit-user-select: none;
        user-select: none;
        /* Ensure pointer events work */
        pointer-events: auto;
        /* Remove transform on hover for mobile (causes issues) */
        transform: none;
    }
    
    .nav-item:hover,
    .nav-item:hover .nav-icon,
    .nav-item:active {
        /* A transform on touchdown stops the drawer from scrolling. */
        transform: none;
    }

    .nav-item:active {
        /* Visual feedback on touch */
        background: rgba(255, 255, 255, 0.15);
        transition: all 0.1s ease;
    }
    
    .nav-icon {
        width: 28px;
        height: 28px;
        font-size: 1.375rem;
    }

    .main-content {
        margin-left: 0 !important;
        padding: var(--space-md);
        padding-top: 70px; /* Reduced padding for more content space */
        padding-bottom: calc(var(--space-md) + 60px); /* Increased space for footer and form-actions on mobile */
        /* Ensure right padding accounts for potential scrollbars */
        padding-right: var(--space-md);
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        /* Ensure content is centered and not offset */
        position: relative;
        left: 0;
        right: 0;
    }

    #login-page, #home-page {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        width: 100vw;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .home-page-container {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        padding: var(--space-lg) var(--space-md);
        padding-top: calc(var(--space-lg) + 60px); /* Account for hamburger menu */
        padding-bottom: calc(var(--space-lg) + 40px); /* Account for footer */
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        /* Ensure container is centered and doesn't extend beyond viewport */
        position: relative;
        left: 0;
        right: 0;
    }

    .home-logo {
        max-width: 280px; /* Slightly smaller on mobile */
        margin-bottom: var(--space-md);
    }

    .login-feature-release-note {
        font-size: 0.8125rem;
        padding: 0.35rem 0.75rem 0.35rem 0.5rem;
        max-width: 90%;
    }

    .hamburger-menu {
        top: calc(var(--space-md) + env(safe-area-inset-top, 0px)); /* Account for safe area on mobile */
        left: var(--space-md); /* MOVED to left */
    }

    .pitcher-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .pitcher-card {
        padding: var(--space-lg);
    }
    
    .pitcher-card-content {
        gap: var(--space-md);
    }
    
    .pitcher-avatar {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
    }
    
    .pitcher-name {
        font-size: 1.125rem;
    }
    
    .pitcher-details {
        flex-wrap: wrap;
        gap: var(--space-xs);
    }

    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-profile {
        flex-direction: row;
        text-align: left;
        gap: var(--space-md);
        width: 100%;
        align-items: center;
    }

    .dashboard-avatar {
        margin: 0;
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        font-size: 2rem;
    }

    .dashboard-info {
        width: 100%;
        flex: 1;
        min-width: 0;
    }

    .dashboard-info h3 {
        font-size: 1.25rem;
        margin-bottom: var(--space-xs);
    }

    .dashboard-meta {
        justify-content: flex-start;
        gap: var(--space-sm);
        margin-bottom: var(--space-xs);
    }

    .dashboard-team {
        font-size: 0.875rem;
        margin: 0;
    }

    .dashboard-lifetime-stats {
        margin-top: var(--space-md);
        text-align: center;
        width: 100%;
    }

    .dashboard-header {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .dashboard-stats-container {
        text-align: center;
        width: 100%;
    }

    .dashboard-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-xs);
        justify-content: center;
    }

    .dashboard-stat-item {
        padding: var(--space-xs);
    }

    .dashboard-stat-label {
        font-size: 0.7rem;
    }

    .dashboard-stat-value {
        font-size: 0.9rem;
    }

    .dashboard-header {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .dashboard-profile {
        gap: var(--space-sm);
    }

    .dashboard-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        max-width: min(100%, 26rem);
        margin-left: auto;
        margin-right: auto;
    }

    .selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .btn-selection {
        min-height: 64px;
        font-size: 1.125rem;
        padding: var(--space-lg) var(--space-md);
        border-radius: var(--radius-lg);
    }
    
    .selection-grid {
        gap: var(--space-md);
    }
    
    .game-stage {
        padding: var(--space-lg);
    }
    
    .stage-title {
        font-size: 1.25rem;
        margin-bottom: var(--space-md);
    }
    
    .game-actions-separator {
        margin: var(--space-md) 0;
    }
    
    .game-actions-section {
        margin-top: 0;
        padding-top: 0;
    }
    
    .game-actions-title {
        font-size: 1.25rem;
        font-weight: 700;
        margin-bottom: var(--space-md);
        color: var(--text-primary);
    }

    .game-stats-summary {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
    
    .stat-card {
        padding: var(--space-md);
    }
    
    .stat-value {
        font-size: 1.75rem;
    }
    
    .stat-label {
        font-size: 0.8125rem;
    }

    /* Events page mobile optimization */
    .games-container {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        padding: var(--space-sm);
        margin: 0;
    }
    
    #games-page .page-header {
        padding: var(--space-sm) var(--space-md) var(--space-xs);
        margin-bottom: var(--space-sm);
    }
    
    #games-page .page-header h2 {
        font-size: 1.375rem;
        margin-bottom: 4px;
    }
    
    #games-page .page-header p {
        font-size: 0.8125rem;
        margin-bottom: 0;
        line-height: 1.4;
    }
    
    #btn-games-add-game {
        width: 100%;
        margin: 0 0 var(--space-md);
        padding: var(--space-sm) var(--space-md);
        font-size: 0.9375rem;
    }
    
    .game-item {
        padding: var(--space-sm);
        border-radius: var(--radius-md);
    }
    
    .game-item-header {
        margin-bottom: var(--space-xs);
        flex-wrap: wrap;
        padding-right: 60px;
    }
    
    .game-item-body {
        margin-bottom: 0;
        gap: var(--space-xs);
    }
    
    .game-card-calendar {
        top: var(--space-sm);
        right: var(--space-sm);
        width: 50px;
        height: 50px;
    }
    
    .game-card-calendar .calendar-day {
        font-size: 1.5rem !important;
    }
    
    .game-card-calendar .calendar-month {
        font-size: 0.6875rem !important;
    }
    
    .game-date {
        font-size: 0.9375rem;
        line-height: 1.2;
    }
    
    .game-pitcher-name {
        font-size: 0.9375rem;
        line-height: 1.2;
    }
    
    .game-pitcher-number {
        font-size: 0.75rem;
        line-height: 1.2;
    }
    
    .event-number-badge {
        font-size: 0.75rem;
        padding: 2px var(--space-sm);
    }
    
    .game-opponent {
        font-size: 0.875rem;
        line-height: 1.2;
    }
    
    .game-location {
        font-size: 0.6875rem;
        padding: 3px var(--space-xs);
    }
    
    .events-instruction-note {
        margin-bottom: var(--space-md);
    }
    
    .events-instruction-note > div {
        padding: var(--space-sm);
        font-size: 0.8125rem;
    }
    
    /* Event detail page mobile optimization */
    /* Event detail page mobile optimization */
    .event-detail-card {
        padding: var(--space-md) !important;
        margin-bottom: var(--space-md) !important;
    }
    
    .event-detail-profile {
        flex-direction: column !important;
        gap: var(--space-md) !important;
        margin-bottom: var(--space-md) !important;
    }
    
    .game-detail-avatar {
        width: 80px !important;
        height: 80px !important;
        align-self: flex-start;
    }
    
    .game-detail-header-section {
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--space-md) !important;
    }
    
    .game-calendar-card {
        width: 70px !important;
        height: 70px !important;
    }
    
    .calendar-day {
        font-size: 1.5rem !important;
    }
    
    .game-detail-main-info {
        width: 100%;
        text-align: center;
    }
    
    .event-detail-opponent {
        font-size: 1.125rem !important;
    }
    
    .game-detail-section {
        padding-top: var(--space-sm) !important;
        margin-bottom: var(--space-sm) !important;
    }
    
    .game-detail-section-title {
        font-size: 1rem !important;
        margin-bottom: var(--space-sm) !important;
    }
    
    .game-detail-grid {
        grid-template-columns: 1fr !important;
        gap: var(--space-sm) !important;
    }
    
    .game-detail-value {
        font-size: 0.9375rem !important;
    }
    
    .game-detail-opponent-title {
        font-size: 1.75rem !important;
        font-weight: 700 !important;
    }
    
    .game-detail-actions {
        grid-template-columns: 1fr 1fr !important;
        gap: var(--space-sm) !important;
        margin-top: var(--space-xl) !important;
        padding-top: var(--space-md) !important;
    }
    
    .game-detail-actions .btn {
        width: 100% !important;
        padding: var(--space-sm) !important;
        font-size: 0.875rem !important;
    }
    
    /* Events empty state mobile */
    .games-empty-state {
        padding: var(--space-md) var(--space-sm) !important;
        text-align: center;
        color: var(--text-secondary);
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .form-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
        margin-bottom: var(--space-lg); /* Extra margin to prevent footer overlap */
        padding-bottom: var(--space-md); /* Additional padding for mobile */
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }

    .form-actions .btn {
        width: 100%;
        max-width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
    
    /* Special case: If form-actions has more than 4 buttons, stack them in 2 columns */
    .form-actions .btn:nth-child(n+5) {
        grid-column: 1 / -1;
    }
    
    /* Ensure dashboard form-actions have extra spacing on mobile */
    #dashboard-page .form-actions {
        margin-bottom: calc(var(--space-xl) + 20px); /* Extra space for footer */
        padding-bottom: var(--space-lg);
    }
    
    /* Form container mobile improvements */
    .form-container {
        padding: var(--space-lg);
        margin: 0;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    .form-group {
        margin-bottom: var(--space-lg);
    }
    
    .form-label {
        font-size: 0.875rem;
        margin-bottom: var(--space-xs);
    }
    
    /* Radio group mobile layout */
    .radio-group {
        flex-direction: column;
        gap: var(--space-sm);
    }
    
    .radio-option {
        padding: var(--space-sm);
        border: 2px solid var(--border);
        border-radius: var(--radius-md);
        min-height: 48px;
        display: flex;
        align-items: center;
        transition: all 0.2s;
    }
    
    .radio-option:hover {
        border-color: var(--primary-color);
        background-color: rgba(65, 105, 225, 0.05);
    }
    
    .radio-option input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: var(--space-sm);
    }
    
    .radio-option label {
        flex: 1;
        font-size: 1rem;
    }
    
    /* Mobile-specific adjustments for report tables */
    .report-table-wrapper {
        /* Ensure wrapper fits within viewport without cutting off content */
        width: 100%;
        max-width: 100%;
        max-height: 400px !important; /* CRITICAL: Enable vertical scrolling on mobile */
        overflow-y: auto !important; /* CRITICAL: Ensure vertical scrolling works */
        overflow-x: auto !important; /* Ensure horizontal scrolling still works */
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        /* Add padding-right to account for scrollbar and ensure content is fully visible */
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        /* Ensure scrollbar doesn't cover content */
        padding-right: 8px;
    }
    
    .report-pitch-table {
        /* Extend table to use all available space on mobile */
        width: 100%;
        min-width: max-content;
        table-layout: auto;
        margin-left: 0;
        font-size: 0.8125rem;
    }
    
    .report-pitch-table th,
    .report-pitch-table td {
        padding: var(--space-sm) var(--space-xs);
        font-size: 0.75rem;
    }
    
    /* Mobile-specific padding adjustments for frozen first column - auto-size based on content */
    .report-pitch-table td:first-child {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        min-width: 100px;
        max-width: none; /* Allow auto-sizing based on content */
        width: auto;
        white-space: nowrap;
    }
    
    .report-pitch-table th:first-child {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
        min-width: 100px;
        max-width: none; /* Allow auto-sizing based on content */
        width: auto;
        white-space: nowrap;
    }
    
    /* Improve table readability on mobile */
    .report-pitch-table th {
        font-size: 0.6875rem;
        padding: var(--space-sm);
        white-space: nowrap;
    }
    
    .report-pitch-table .pitch-name {
        font-size: 0.875rem;
    }
    
    .report-pitch-table .pitch-count,
    .report-pitch-table .pitch-percentage {
        font-size: 0.875rem;
    }
    
    /* Mid-game report modal - mobile-specific adjustments */
    #mid-game-report-modal .report-table-wrapper {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 8px; /* Account for scrollbar */
        box-sizing: border-box;
    }
    
    #mid-game-report-modal .report-pitch-table {
        width: 100%;
        min-width: max-content;
        table-layout: auto;
        margin-left: 0;
    }
    
    #mid-game-report-modal .report-pitch-table td:first-child {
        padding-left: var(--space-lg);
        padding-right: var(--space-md);
    }
    
    #mid-game-report-modal .report-pitch-table th:first-child {
        padding-left: var(--space-lg);
        padding-right: var(--space-md);
    }
    
    /* Card improvements for mobile */
    .card {
        border-radius: var(--radius-md);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        margin-right: 0;
    }
    
    .card__body {
        padding: var(--space-md) !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Dashboard cards - even more compact on mobile */
    .dashboard-card-body {
        padding: var(--space-sm) var(--space-md) !important;
    }
    
    /* Reduce spacing in dashboard cards */
    #dashboard-page .card:not(.action-card) {
        margin-top: var(--space-md) !important;
    }
    
    #dashboard-page .card h3 {
        font-size: 0.9375rem !important;
        margin-bottom: var(--space-xs) !important;
    }
    
    /* Compact dashboard header on mobile */
    .dashboard-header {
        padding: var(--space-sm) var(--space-md) !important;
        margin-bottom: var(--space-md) !important;
    }
    
    /* Reduce spacing in upcoming events list */
    #upcoming-games-list > div {
        padding: var(--space-xs) var(--space-sm) !important;
    }
    
    /* Compact game reports list */
    #game-reports-list > div {
        padding: var(--space-sm) !important;
    }
    
    /* Reduce mt-lg spacing on mobile */
    .mt-lg {
        margin-top: var(--space-md) !important;
    }
    
    /* Home quick actions mobile */
    .home-quick-actions {
        gap: var(--space-md);
    }
    
    .home-action-btn {
        min-height: 90px;
        padding: var(--space-lg);
    }
    
    .home-action-icon {
        font-size: 1.75rem;
    }
    
    .home-action-title {
        font-size: 1rem;
    }
    
    .home-action-desc {
        font-size: 0.8125rem;
    }
    
    /* Dashboard actions mobile — 2×2 + one half-width card, not a full-width banner */
    .dashboard-actions {
        gap: 0.45rem;
        margin-bottom: var(--space-md) !important;
    }
    
    .action-card {
        padding: 0.6rem 0.5rem !important;
        min-height: 4.25rem;
    }

    .dashboard-actions .action-card:nth-child(5) {
        grid-column: 1 / -1;
        width: 100%;
        max-width: calc(50% - 0.25rem);
        justify-self: center;
    }
    
    .action-card h4 {
        font-size: 0.8125rem;
        margin-bottom: 0.15rem !important;
    }
    
    .action-card p {
        font-size: 0.625rem;
        margin: 0 !important;
    }

    @media (max-width: 379px) {
        .action-card p {
            display: none;
        }

        .action-card {
            min-height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .action-card h4 {
            margin-bottom: 0 !important;
        }

        .dashboard-actions .action-card:nth-child(5) {
            max-width: none;
            justify-self: stretch;
        }
    }
    
    /* Pitch log mobile improvements */
    .pitch-log-container {
        padding: var(--space-lg);
    }
    
    .pitch-log {
        max-height: 300px;
    }
    
    .pitch-log-entry {
        padding: var(--space-sm) var(--space-md);
        flex-wrap: wrap;
        gap: var(--space-xs);
    }
    
    .pitch-log-entry .pitch-sequence {
        width: 50px;
        font-size: 0.875rem;
    }
    
    .pitch-log-entry .pitch-details {
        flex: 1;
        min-width: 0;
        font-size: 0.8125rem;
    }
    
    /* Report cards mobile */
    .reports-button-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .report-card-btn {
        min-height: 100px;
        padding: var(--space-lg);
    }
    
    .report-card-icon {
        width: 50px;
        height: 50px;
        font-size: 1.75rem;
    }
    
    .report-card-title {
        font-size: 1.125rem;
    }
    
    .report-card-desc {
        font-size: 0.8125rem;
    }
    
    /* Game list mobile */
    .game-list-item {
        padding: var(--space-md);
    }
    
    .game-list-item-title {
        font-size: 0.9375rem;
    }
    
    .game-list-item-meta {
        font-size: 0.75rem;
    }
    
    .game-list-stat-value {
        font-size: 1.125rem;
    }
    
    .game-list-stat-label {
        font-size: 0.625rem;
    }
    
    /* Avatar customization mobile */
    #avatar-preview {
        width: 100px;
        height: 100px;
        font-size: 2.5rem;
    }
    
    .color-btn {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Pitch type form mobile */
    .pitch-type-form {
        flex-direction: column;
    }
    
    .pitch-type-form select,
    .pitch-type-form input {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        margin-bottom: var(--space-sm);
        box-sizing: border-box;
    }
    
    .pitch-type-form .btn {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Pitch type checkbox list mobile */
    .pitch-type-checkbox-list {
        grid-template-columns: 1fr;
        max-height: 300px;
    }
    
    .pitch-type-checkbox-actions {
        flex-direction: column;
    }
    
    .pitch-type-checkbox-actions .btn {
        width: 100%;
    }
    
    /* Pitch types container mobile */
    .pitch-types-container {
        padding: var(--space-md);
        max-width: 100%;
        overflow: hidden;
    }
    
    /* Pitch types table mobile */
    .pitch-types-table {
        font-size: 0.875rem;
    }
    
    .pitch-types-table th,
    .pitch-types-table td {
        padding: var(--space-xs) var(--space-sm) !important;
    }
    
    .pitch-type-name-cell {
        font-size: 0.875rem;
        word-break: break-word;
    }
    
    .pitch-type-desc-cell {
        font-size: 0.8125rem;
        word-break: break-word;
    }
    
    /* Edit pitch types button mobile */
    #btn-edit-pitch-types {
        width: 100%;
        padding: var(--space-md) !important;
        font-size: 0.9375rem !important;
    }
    
    /* Edit pitch types selection modal mobile */
    .edit-pitch-type-item {
        padding: var(--space-md) !important;
    }
    
    .edit-pitch-type-item > div:last-child {
        font-size: 1rem;
        margin-left: var(--space-xs) !important;
    }
    
    /* Account page mobile */
    .file-upload-area {
        padding: var(--space-md);
    }
    
    /* Import/Export card mobile - stack sections vertically */
    .import-export-container {
        grid-template-columns: 1fr !important;
        gap: var(--space-lg) !important;
    }
    
    .import-export-card {
        padding: var(--space-lg) !important;
    }
    
    .export-section,
    .import-section {
        padding: var(--space-md) !important;
    }
    
    /* Improve spacing for mobile */
    .mt-lg {
        margin-top: var(--space-md);
    }
    
    .mb-md {
        margin-bottom: var(--space-md);
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Tablet optimizations */
    html {
        font-size: 16px;
    }
    
    .hamburger-menu {
        display: flex;
        width: 48px;
        height: 48px;
        top: calc(var(--space-lg) + env(safe-area-inset-top, 0px)); /* Account for safe area on tablet */
    }

    .sidebar {
        width: 240px; /* Slightly wider on tablet */
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
    }

    .sidebar.active {
        transform: translateX(0);
    }
    
    .nav-item {
        min-height: 48px;
        font-size: 0.9375rem;
    }

    /* Hover translate starts on touchdown and stops the drawer from scrolling. */
    .nav-item:hover,
    .nav-item:hover .nav-icon {
        transform: none;
    }

    .main-content {
        margin-left: 0;
        padding: var(--space-lg);
        padding-top: 70px;
        padding-bottom: calc(var(--space-lg) + 40px);
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    /* Tablet form improvements */
    .form-container {
        max-width: 600px;
        margin: 0 auto;
    }
    
    /* Tablet grid improvements */
    .pitcher-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-lg);
    }
    
    .dashboard-actions {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        max-width: 44rem;
        margin-left: auto;
        margin-right: auto;
        gap: var(--space-sm);
    }

    .dashboard-actions .action-card {
        grid-column: span 2;
        width: auto;
        max-width: none;
        justify-self: stretch;
        padding: 0.75rem 0.7rem;
        min-height: 44px;
    }

    .dashboard-actions .action-card:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .dashboard-actions .action-card:nth-child(5) {
        grid-column: 4 / span 2;
        max-width: none;
        justify-self: stretch;
    }

    .action-card h4 {
        font-size: 0.875rem;
    }

    .action-card p {
        font-size: 0.75rem;
    }

    #bullpen-pa-count-card {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-sm) var(--space-md);
        align-items: center;
        text-align: left;
    }
    
    .selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .game-stats-summary {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .home-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .reports-button-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
    }

    /* When the last nav card is alone on a row (odd total count), keep it half-width and left-aligned */
    .reports-button-grid > .report-card-btn:last-child:nth-child(odd) {
        grid-column: 1 / 2;
    }

    .report-card-btn {
        min-height: 100px;
    }
    
    /* Tablet modal improvements */
    .modal-content {
        max-width: 90%;
    }
    
    .modal-body {
        padding: var(--space-lg);
    }

    #login-page, #home-page {
        margin: 0;
        padding: 0;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        position: relative;
        left: 0;
        right: 0;
    }

    .home-page-container {
        min-height: 100vh;
        min-height: -webkit-fill-available;
        padding: var(--space-lg);
        padding-top: calc(var(--space-lg) + 60px); /* Account for hamburger menu */
        padding-bottom: calc(var(--space-lg) + 40px); /* Account for footer */
        margin: 0 auto;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
        position: relative;
        left: 0;
        right: 0;
    }

    .home-logo {
        max-width: 320px; /* Medium size for tablet */
    }
    
    .hamburger-menu {
        top: var(--space-lg);
        left: var(--space-lg);
    }

    .game-item {
        grid-template-columns: 100px 1fr 120px 80px;
        gap: var(--space-md);
        padding: var(--space-md);
    }
    
    
    /* Tablet button improvements */
    .btn {
        min-height: 44px;
        padding: var(--space-md) var(--space-lg);
    }
    
    .btn-selection {
        min-height: 70px;
        font-size: 1.125rem;
    }
    
    /* Tablet card improvements */
    .card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .card__body {
        padding: var(--space-xl) !important;
    }
}

/* Portrait tablets wider than 1023px (iPad Pro 12.9/13 and large Android tablets).
   Only the nav drawer changes. Layout, type, and spacing stay on the desktop rules. */
@media (orientation: portrait) and (min-width: 1024px) and (max-width: 1366px) {
    .hamburger-menu {
        display: flex;
        width: 48px;
        height: 48px;
        min-width: 48px;
        min-height: 48px;
        top: calc(var(--space-lg) + env(safe-area-inset-top, 0px));
        left: var(--space-lg);
    }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 1001;
        width: 280px;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
        top: env(safe-area-inset-top, 0px);
        height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
        max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    }

    .sidebar.active {
        transform: translateX(0);
    }

    .nav-item:hover,
    .nav-item:hover .nav-icon {
        transform: none;
    }

    .main-content {
        margin-left: 0 !important;
        padding-top: 70px;
        width: 100%;
        max-width: 100%;
    }
}


/* ========== NEW MID-GAME REPORT STYLES ========== */

/* Filter / Spray / PCA — single horizontal row (mobile .btn width override in max-width:767px block) */
.game-report-action-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-xs);
    max-width: 100%;
    box-sizing: border-box;
}

/* Use a larger modal for the report to fit all columns */
#mid-game-report-modal .modal-content {
    max-width: min(95vw, 1000px);
    width: 90%;
    max-height: calc(100vh - 2 * var(--space-lg));
    margin: auto; /* Center both horizontally and vertically in flex container */
    position: relative;
    flex-shrink: 0; /* Prevent shrinking */
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    #mid-game-report-modal .modal-content {
        max-width: 900px;
        width: auto;
    }
}

#mid-game-report-modal .modal-body {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    flex: 1;
    min-height: 0; /* Allow flex shrinking */
}

.report-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.report-stat-card {
    background-color: var(--background);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
}

.report-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--primary-color);
}

.report-stat-value.danger {
    color: var(--danger-color);
}

.report-stat-value.secondary {
    color: var(--secondary-color);
}

.report-stat-label {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.report-pitch-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--space-lg);
    table-layout: auto; /* Auto layout allows columns to size based on content */
    min-width: 1500px; /* Increased to accommodate 3 new columns (2B, 3B, HR) plus existing columns */
    /* Prevent table from causing page overflow */
    margin-left: 0;
    margin-right: 0;
}

.report-pitch-table th,
.report-pitch-table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
    text-align: left;
    white-space: nowrap;
}

/* First column (pitch type) - auto-size based on content, with reasonable bounds */
.report-pitch-table th:first-child,
.report-pitch-table td:first-child {
    min-width: 120px;
    max-width: none; /* Allow auto-sizing based on content */
    width: auto;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}


.report-pitch-table th {
    background-color: var(--background);
    font-size: 0.875rem;
    color: var(--text-secondary);
    position: sticky !important; /* Make ALL header row sticky - use !important to override any conflicting styles */
    top: 0 !important; /* Stick to top when scrolling vertically */
    z-index: 101; /* Above body rows but below first column header */
    /* Ensure header background covers content when scrolling */
    background-color: var(--background) !important;
}

.report-pitch-table td {
    font-size: 0.9rem;
}

/* Table wrapper for horizontal and vertical scrolling */
.report-table-wrapper {
    position: relative;
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    max-height: 500px; /* Enable vertical scrolling with max height - desktop */
    /* Prevent wrapper from causing page scroll */
    margin-left: 0;
    margin-right: 0;
    /* Ensure scrollbar is visible */
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    /* Ensure wrapper takes full width */
    box-sizing: border-box;
    /* Add border for better visual separation */
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    /* Add padding-right to ensure content is fully visible when scrollbar is present */
    padding-right: 8px;
    /* Remove isolation to allow sticky positioning to work properly */
}

/* Frozen first column - applies to ALL screen sizes - auto-size based on content */
.report-pitch-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 100;
    background-color: var(--surface) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-weight: 600;
    min-width: 120px;
    max-width: none; /* Allow auto-sizing based on content */
    width: auto;
}

.report-pitch-table th:first-child {
    position: sticky !important;
    left: 0 !important;
    top: 0 !important; /* Also stick to top for vertical scrolling */
    z-index: 102 !important; /* Highest z-index: above regular headers and body cells */
    background-color: var(--background) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.2); /* Add bottom shadow for header separation */
    min-width: 120px;
    max-width: none; /* Allow auto-sizing based on content */
    width: auto;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    font-weight: 600;
}

/* Ensure proper background for sticky cells */
.report-pitch-table tbody tr:nth-child(even) td:first-child {
    background-color: var(--surface) !important;
}

.report-pitch-table tbody tr:nth-child(odd) td:first-child {
    background-color: var(--surface) !important;
}

/* Ensure the pitch-name class maintains its styling in sticky column */
.report-pitch-table td:first-child.pitch-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}

/* Ensure other header columns also stick to top */
.report-pitch-table th:not(:first-child) {
    position: sticky !important;
    top: 0 !important;
    z-index: 101; /* Above body rows, below first column header */
    background-color: var(--background) !important; /* Ensure background covers scrolling content */
    /* Add subtle shadow for better visual separation when scrolling */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Ensure other body columns don't overlap the frozen column */
.report-pitch-table td:not(:first-child) {
    position: relative;
    z-index: 1;
}

/* Responsive table adjustments - consolidated with main mobile styles above */

/* Webkit scrollbar styling */
.report-table-wrapper::-webkit-scrollbar {
    height: 8px;
    width: 8px; /* Add width for vertical scrollbar */
}

.report-table-wrapper::-webkit-scrollbar-track {
    background: var(--background);
    border-radius: var(--radius-sm);
}

.report-table-wrapper::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: var(--radius-sm);
}

.report-table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}


.report-pitch-table .pitch-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.report-pitch-table .pitch-count {
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
}

.report-pitch-table .pitch-percentage {
    font-weight: 600;
    font-size: 1.1rem;
    text-align: center;
    color: var(--primary-color);
}

/* Sortable table headers */
.report-pitch-table th[onclick] {
    position: relative;
    transition: background-color 0.2s ease;
}

.report-pitch-table th[onclick]:hover {
    background-color: rgba(65, 105, 225, 0.1);
}

.report-pitch-table th .sort-arrow {
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    transition: color 0.2s ease;
    font-weight: normal;
}

.report-pitch-table th[onclick]:hover .sort-arrow {
    color: var(--primary-color);
}

/* App Footer */
.app-footer {
    background-color: var(--surface);
    border-top: 1px solid var(--border);
    padding: var(--space-xs) var(--space-lg);
    text-align: center;
    margin-left: var(--sidebar-width); /* Match sidebar width */
    color: var(--text-secondary);
    font-size: 0.75rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: auto;
    min-height: 32px;
    width: calc(100% - var(--sidebar-width)); /* Account for sidebar width */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.app-footer p {
    margin: 0;
    line-height: 1.4;
}

/* Home Dashboard Styles */

.home-quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
}

.home-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    text-align: left;
    min-height: 80px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.home-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

@media (hover: none) {
    .home-action-btn:active {
        transform: scale(0.98);
    }
}

.home-action-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.home-action-content {
    flex: 1;
}

.home-action-title {
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.home-action-desc {
    font-size: 0.875rem;
    opacity: 0.8;
}

.home-event-item {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
    transition: background-color 0.2s;
    cursor: pointer;
}

.home-event-item:last-child {
    border-bottom: none;
}

.home-event-item:hover {
    background-color: rgba(65, 105, 225, 0.05);
}

.home-event-date {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--space-xs);
}

.home-event-details {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.home-activity-item {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.home-activity-item:last-child {
    border-bottom: none;
}

.home-activity-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.home-activity-content {
    flex: 1;
}

.home-activity-title {
    font-weight: 600;
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
}

.home-activity-time {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.home-pitchers-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-lg);
}

.home-pitcher-card {
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
}

.home-pitcher-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.home-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.home-stat-card {
    background-color: rgba(65, 105, 225, 0.05);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border-left: 4px solid var(--primary-color);
}

.home-stat-card-title {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.home-stat-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

@media (max-width: 1023px),
       (orientation: portrait) and (min-width: 1024px) and (max-width: 1366px) {
    .app-footer {
        margin-left: 0;
        left: 0;
        right: 0;
        width: auto;
    }
}

@media (max-width: 1023px) {
    .app-footer {
        padding: var(--space-xs) var(--space-md);
        font-size: 0.7rem;
        min-height: 28px;
        line-height: 1.4;
    }

    .app-footer p {
        padding: var(--space-xs) 0;
    }
}

/* Additional mobile optimizations for very small screens */
@media (max-width: 480px) {
    html {
        font-size: 15px;
    }
    
    .main-content {
        padding: var(--space-sm);
        padding-top: 65px;
    }
    
    .page-header h2 {
        font-size: 1.375rem;
    }
    
    .home-logo {
        max-width: 240px;
    }
    
    .form-container {
        padding: var(--space-md);
    }
    
    .card__body {
        padding: var(--space-md) !important;
    }
    
    .dashboard-header {
        padding: var(--space-md);
    }
    
    .dashboard-avatar {
        width: 70px;
        height: 70px;
        font-size: 1.75rem;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .btn-selection {
        min-height: 60px;
        font-size: 1rem;
        padding: var(--space-md);
    }
    
    .modal-content {
        max-height: 98vh;
    }
    
    .modal-body {
        padding: var(--space-md);
    }
    
    .report-pitch-table th,
    .report-pitch-table td {
        padding: var(--space-xs);
        font-size: 0.6875rem;
    }
    
    .report-pitch-table td:first-child,
    .report-pitch-table th:first-child {
        min-width: 100px;
        max-width: 120px;
    }
}

/* Reports Page - Modern Card Layout */
.reports-button-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.report-card-btn {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    text-align: left;
    min-height: 100px;
    transition: all 0.3s ease;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

/* .report-card-btn sets display:flex after .hidden — must win when feature-flagged off */
.report-card-btn.hidden,
.report-card-btn[hidden] {
    display: none !important;
}

.report-card-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.report-card-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.report-card-btn:hover::before {
    opacity: 1;
}

.report-card-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    transition: transform 0.3s ease;
}

.report-card-btn:hover .report-card-icon {
    transform: scale(1.1) rotate(5deg);
}

.report-card-content {
    flex: 1;
}

.report-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: var(--space-xs);
    color: white;
}

.report-card-desc {
    font-size: 0.875rem;
    opacity: 0.9;
    color: white;
    line-height: 1.4;
}

/* Handle text colors for outline buttons */
.btn-outline.report-card-btn .report-card-title,
.btn-outline.report-card-btn .report-card-desc {
    color: var(--text-primary);
}

.btn-outline.report-card-btn:hover .report-card-title,
.btn-outline.report-card-btn:hover .report-card-desc {
    color: var(--primary-color);
}

/* Adjust icon background for outline buttons */
.btn-outline.report-card-btn .report-card-icon {
    background-color: rgba(0, 0, 0, 0.05);
}

.report-card-mid-game {
    background: linear-gradient(135deg, #FFA500 0%, #FF8C00 100%);
    color: white;
    border: none;
}

.report-card-mid-game:hover {
    background: linear-gradient(135deg, #FF8C00 0%, #FF7F00 100%);
}

.report-card-post-game {
    background-color: #6B7280;
    color: white;
    border: none;
}

.report-card-post-game:hover {
    background-color: #4B5563;
}

.report-card-custom {
    background-color: #A78BFA;
    color: white;
    border: none;
}

.report-card-custom:hover {
    background-color: #8B5CF6;
}

.report-card-lineups {
    background-color: #1e1e1e;
    color: #ffffff;
    border: none;
}

.report-card-lineups:hover {
    background-color: #2a2a2a;
}

.report-card-lineups .report-card-title {
    color: #ffffff;
    font-weight: 700;
}

.report-card-lineups .report-card-desc {
    color: rgba(255, 255, 255, 0.92);
}

.report-card-lineups .report-card-icon {
    background-color: rgba(255, 255, 255, 0.2);
}

.report-card-wristband {
    background-color: #D4B896;
    color: #3B2F20;
    border: none;
}

.report-card-wristband:hover {
    background-color: #C4A882;
}

.report-card-wristband .report-card-title,
.report-card-wristband .report-card-desc {
    color: #3B2F20;
}

.report-card-whiteboard {
    background-color: #2d6a4f;
    color: #ffffff;
    border: none;
}

.report-card-whiteboard:hover {
    background-color: #1b4332;
}

.report-card-whiteboard .report-card-title,
.report-card-whiteboard .report-card-desc {
    color: #ffffff;
}

.report-card-bullpen {
    background-color: #1e3a5f;
    color: #ffffff;
    border: none;
}

.report-card-bullpen:hover {
    background-color: #16304d;
}

.report-card-bullpen .report-card-title,
.report-card-bullpen .report-card-desc {
    color: #ffffff;
}

.report-card-pca {
    background: linear-gradient(135deg, #f0f5fa 0%, #dce8f3 100%);
    color: var(--text-primary);
    border: 2px solid #1e3a5f;
    border-left-width: 5px;
    box-shadow: 0 2px 8px rgba(30, 58, 95, 0.14);
}

.report-card-pca:hover {
    background: linear-gradient(135deg, #e4edf6 0%, #cddded 100%);
    border-color: #2d5986;
    box-shadow: 0 4px 14px rgba(30, 58, 95, 0.22);
}

.report-card-pca .report-card-title {
    color: #1e3a5f;
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.25;
}

.report-card-pca .report-card-desc {
    color: #374151;
}

.report-card-pca .report-card-icon {
    background-color: rgba(30, 58, 95, 0.12);
}

.report-card-pca:hover .report-card-title {
    color: #2d5986;
}

@media (max-width: 767px) {
    .report-card-pca {
        border-left-width: 6px;
        box-shadow: 0 3px 12px rgba(30, 58, 95, 0.2);
    }
}

.report-card-season {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    color: var(--text-primary);
    border: 2px solid #047857;
    border-left-width: 5px;
    box-shadow: 0 2px 8px rgba(4, 120, 87, 0.14);
}

.report-card-season:hover {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-color: #059669;
}

.report-card-season .report-card-title {
    color: #065f46;
}

.report-card-season .report-card-desc {
    color: #047857;
}

.report-card-scouting {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: var(--text-primary);
    border: 2px solid #c2410c;
    border-left-width: 5px;
    box-shadow: 0 2px 8px rgba(194, 65, 12, 0.14);
}

.report-card-scouting:hover {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    border-color: #ea580c;
}

.report-card-scouting .report-card-title {
    color: #9a3412;
}

.report-card-scouting .report-card-desc {
    color: #c2410c;
}

.btn-scouting-report {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    color: #9a3412;
    border: 2px solid #c2410c;
    font-weight: 600;
}

.btn-scouting-report:hover {
    background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
    border-color: #ea580c;
    color: #9a3412;
}

.report-flow-modal-header--scouting {
    background: linear-gradient(135deg, #c2410c 0%, #ea580c 100%);
}

.scouting-scope-toggle {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.scouting-scope-option {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.03));
    font-size: 0.9rem;
}

.scouting-scope-option:has(input:checked) {
    border-color: #c2410c;
    background: rgba(194, 65, 12, 0.08);
    font-weight: 600;
}

.scouting-pitcher-checklist-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.scouting-pitcher-checklist-actions {
    display: flex;
    gap: var(--space-sm);
}

.scouting-pitcher-checklist-actions[hidden] {
    display: none;
}

.scouting-pitcher-checklist-actions .btn-link {
    background: none;
    border: none;
    padding: 0;
    color: #c2410c;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
}

.scouting-pitcher-checklist {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    background: var(--background, #fff);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.scouting-pitcher-check-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    font-size: 0.9rem;
}

.scouting-pitcher-check-option:hover {
    background: rgba(194, 65, 12, 0.05);
}

.scouting-pitcher-check-option:has(input:checked) {
    border-color: #c2410c;
    background: rgba(194, 65, 12, 0.08);
    font-weight: 600;
}

.scouting-pitcher-checklist-empty {
    margin: 0;
    padding: 0.35rem 0.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.scouting-report-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: flex-start;
    padding: var(--space-md);
    border-top: 1px solid var(--border);
}

.season-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--space-md);
    margin: var(--space-lg) 0;
}

.season-kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: center;
}

.season-kpi-label {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.season-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: var(--space-xs) 0;
}

.season-kpi-delta {
    font-size: 1rem;
    font-weight: 600;
}

.season-delta-positive { color: #059669; }
.season-delta-negative { color: #dc2626; }
.season-delta-neutral { color: var(--text-secondary); }

.season-kpi-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--space-lg);
}

.season-section {
    margin: var(--space-xl) 0;
}

.season-section-title {
    color: var(--sidebar-active);
    margin-bottom: var(--space-sm);
}

.season-section-desc {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--space-md);
}

.season-chart-wrap {
    position: relative;
    height: 320px;
    margin-top: var(--space-md);
}

.season-chart-metric-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
}

.season-chip {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

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

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

.season-chip--active:hover {
    color: #fff;
}

.season-kpi-spark {
    display: block;
    width: 100%;
    max-width: 120px;
    height: 30px;
    margin: 0.15rem auto 0.25rem;
    color: #64748b;
    opacity: 0.85;
}

.season-kpi-trend {
    font-size: 1rem;
}

.season-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.season-modal-date-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.season-modal-hint {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin: var(--space-md) 0 0;
}

.season-report-header h3 {
    margin: 0 0 var(--space-xs);
    color: var(--sidebar-active);
}

.season-report-subtitle {
    color: var(--text-secondary);
    margin: 0;
}

.season-empty {
    text-align: center;
    color: var(--text-secondary);
    padding: var(--space-xl);
}

.season-hand-filter-bar {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.season-hand-btn {
    font-size: 0.8125rem;
    padding: 0.35rem 0.75rem;
}

.season-hand-btn--active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

.season-section-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.season-section-toolbar .season-section-title {
    margin-bottom: 0;
}

.season-rolling-label {
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.form-input-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    max-width: 8rem;
}

.season-pitch-mode-tabs {
    display: flex;
    gap: var(--space-xs);
}

.season-pitch-mode-btn {
    font-size: 0.8125rem;
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    cursor: pointer;
}

.season-pitch-mode-btn.active {
    background: #047857;
    color: #fff;
    border-color: #047857;
}

.season-chart-wrap--pitch {
    height: 280px;
}

.season-pitch-type-controls {
    margin-top: var(--space-sm);
}

.season-comparison-section {
    margin-top: var(--space-xl);
}

.season-comparison-periods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.season-comparison-period-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface);
}

.season-comparison-period-card--primary {
    border-left: 4px solid var(--primary-color);
}

.season-comparison-period-card--compare {
    border-left: 4px solid #64748b;
}

.season-comparison-period-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.season-comparison-period-value {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
}

.season-comparison-period-def {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-secondary);
}

.season-comparison-metric {
    font-weight: 600;
    color: var(--text-primary);
}

.season-comparison-change {
    font-weight: 700;
}

#view-season-stats-page #season-stats-content {
    width: 100%;
    max-width: 100%;
}

.season-report {
    width: 100%;
}

.season-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.season-pitch-type-table,
.season-game-log-table,
.season-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.season-pitch-type-table th,
.season-pitch-type-table td,
.season-game-log-table th,
.season-game-log-table td,
.season-comparison-table th,
.season-comparison-table td {
    padding: 0.55rem 0.75rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.season-pitch-type-table th:first-child,
.season-pitch-type-table td:first-child,
.season-game-log-table th:nth-child(-n+2),
.season-game-log-table td:nth-child(-n+2),
.season-comparison-table th:first-child,
.season-comparison-table td:first-child,
.season-comparison-metric {
    text-align: left;
}

.season-pitch-type-table th:not(:first-child),
.season-pitch-type-table td:not(:first-child),
.season-game-log-table th:nth-child(n+3),
.season-game-log-table td:nth-child(n+3),
.season-comparison-table th:not(:first-child),
.season-comparison-table td:not(:first-child) {
    text-align: right;
}

.season-pitch-type-table thead,
.season-game-log-table thead,
.season-comparison-table thead {
    background: var(--bg-secondary, #f3f4f6);
}

.season-pitch-type-table th,
.season-game-log-table th,
.season-comparison-table th {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--sidebar-active);
    white-space: nowrap;
}

.season-pitch-type-table tbody tr:nth-child(even),
.season-game-log-table tbody tr:nth-child(even),
.season-comparison-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.season-comparison-table tbody tr:hover,
.season-pitch-type-table tbody tr:hover,
.season-game-log-table tbody tr:hover {
    background: rgba(65, 105, 225, 0.05);
}

.season-comparison-table th {
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.season-modal-preset-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.season-save-season-row {
    display: flex;
    gap: var(--space-md);
    align-items: flex-end;
    margin-top: var(--space-md);
}

@media (min-width: 1400px) {
    .season-chart-wrap {
        height: 380px;
    }

    .season-chart-wrap--pitch {
        height: 320px;
    }
}

@media (max-width: 1024px) {
    .season-chart-wrap {
        height: 300px;
    }

    .season-chart-wrap--pitch {
        height: 280px;
    }

    .season-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    }
}

@media (max-width: 768px) {
    .season-section-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .season-comparison-periods {
        grid-template-columns: 1fr;
    }

    .season-pitch-type-table,
    .season-game-log-table,
    .season-comparison-table {
        font-size: 0.8125rem;
    }

    .season-pitch-type-table th,
    .season-pitch-type-table td,
    .season-game-log-table th,
    .season-game-log-table td,
    .season-comparison-table th,
    .season-comparison-table td {
        padding: 0.45rem 0.5rem;
    }

    .season-game-log-table {
        min-width: 640px;
    }
}

@media (max-width: 600px) {
    .season-modal-date-grid {
        grid-template-columns: 1fr;
    }

    .season-modal-preset-row {
        grid-template-columns: 1fr;
    }

    .season-chart-wrap {
        height: 240px;
    }

    .season-chart-wrap--pitch {
        height: 230px;
    }

    .season-chart-metric-controls,
    .season-pitch-type-controls {
        gap: var(--space-xs);
    }

    .season-kpi-label {
        font-size: 0.8125rem;
    }

    .season-kpi-value {
        font-size: 1.25rem;
    }

    .season-kpi-delta,
    .season-kpi-trend {
        font-size: 0.9375rem;
    }

    .season-comparison-period-def {
        font-size: 0.75rem;
    }

    .season-pitch-mode-tabs {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .season-chart-wrap {
        height: 220px;
    }

    .season-chart-wrap--pitch {
        height: 210px;
    }

    .season-kpi-meta {
        justify-content: flex-start;
    }
}

/* Pitcher dashboard — Reports type picker (match page card layout on large screens) */
.pitching-reports-picker-modal .pitching-reports-picker-modal-content {
    width: min(92vw, 640px);
    max-width: min(92vw, 640px);
}

@media (min-width: 768px) {
    .pitching-reports-picker-modal .pitching-reports-picker-modal-content {
        width: min(92vw, 760px);
        max-width: min(92vw, 760px);
    }

    .pitching-reports-picker-modal .reports-button-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pitching-reports-picker-modal .reports-button-grid > .report-card-btn:last-child:nth-child(odd) {
        grid-column: 1 / 2;
    }
}

@media (min-width: 1024px) {
    .pitching-reports-picker-modal .pitching-reports-picker-modal-content {
        width: min(92vw, 900px);
        max-width: 900px;
        min-width: unset;
    }

    .pitching-reports-picker-modal .reports-button-grid {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .pitching-reports-picker-modal .report-card-btn {
        min-height: 100px;
        padding: var(--space-lg) var(--space-xl);
    }

    .pitching-reports-picker-modal .report-card-icon {
        width: 52px;
        height: 52px;
        font-size: 2rem;
    }

    .pitching-reports-picker-modal .report-card-title {
        font-size: 1.125rem;
    }

    .pitching-reports-picker-modal .report-card-desc {
        font-size: 0.8125rem;
    }
}

/* Game List Styles for Mid-Game and Post-Game Reports */
.game-list-container {
    margin-top: var(--space-md);
}

.game-list-item {
    background-color: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-list-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(65, 105, 225, 0.15);
    transform: translateX(4px);
}

.game-list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
}

.game-list-item-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
}

.game-list-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.game-list-item-status {
    display: inline-flex;
    align-items: center;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    margin-top: var(--space-xs);
}

.game-list-item-status.paused {
    background-color: rgba(255, 165, 0, 0.1);
    color: #FF8C00;
    border: 1px solid #FFA500;
}

.game-list-item-status.active {
    background-color: rgba(65, 105, 225, 0.1);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.game-list-item-status.completed {
    background-color: rgba(34, 139, 34, 0.1);
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
}

.game-list-item-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}

.game-list-stat {
    text-align: center;
}

.game-list-stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 2px;
}

.game-list-stat-label {
    font-size: 0.6875rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

@media (max-width: 767px) {
    .reports-button-grid {
        grid-template-columns: 1fr;
    }
    
    .report-card-btn {
        min-height: 90px;
        padding: var(--space-lg);
    }
    
    .report-card-icon {
        width: 50px;
        height: 50px;
        font-size: 2rem;
    }
    
    .report-card-title {
        font-size: 1.125rem;
    }
    
    .report-card-desc {
        font-size: 0.8125rem;
    }
}

/* ===================================================================
 * LOGIN PAGE ENHANCED STYLING
 * =================================================================== */

.login-page-enhanced .form-container {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* Ensure form container fits within viewport */
    margin: 0;
}

/* Desktop/laptop: Constrain login form container width */
@media (min-width: 1024px) {
    .home-page-container {
        max-width: 700px; /* Increased from 600px for wider login form */
        width: 100%;
        margin: 0 auto; /* Center the container */
    }
    
    .login-page-enhanced .form-container {
        max-width: 500px; /* Increased from 400px for better width */
        width: 100%;
        margin: 0 auto; /* Center the form */
    }
    
    .home-form-container {
        max-width: 500px; /* Increased from 400px to match form container */
        width: 100%;
        margin: 0 auto; /* Center the form container */
    }
}

.login-page-enhanced .form-group {
    margin-bottom: var(--space-lg);
}

.login-page-enhanced .form-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
}

.login-page-enhanced .form-input {
    width: 100%;
    padding: var(--space-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: border-color 0.2s ease;
    background: white;
}

.login-page-enhanced .form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}

.login-page-enhanced .btn-primary {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(65, 105, 225, 0.3);
}

.login-page-enhanced .btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(65, 105, 225, 0.4);
}

.login-page-enhanced .auth-links {
    text-align: center;
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
}

.login-page-enhanced .auth-links p {
    margin: var(--space-sm) 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.login-page-enhanced .auth-links a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.login-page-enhanced .auth-links a:hover {
    color: var(--primary-hover);
    text-decoration: underline;
}

.login-page-enhanced .error-message {
    background: rgba(193, 22, 52, 0.1);
    border: 1px solid rgba(193, 22, 52, 0.2);
    color: var(--danger-color);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
    font-size: 0.875rem;
}

/* Password field + show/hide toggle (login & registration) */
.password-field-wrap {
    position: relative;
    width: 100%;
}

.password-field-wrap .password-input-with-toggle {
    padding-right: 4.25rem;
    box-sizing: border-box;
}

.password-toggle-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(65, 105, 225, 0.08);
    border: 1px solid rgba(65, 105, 225, 0.25);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.password-toggle-btn:hover:not(:disabled) {
    background: rgba(65, 105, 225, 0.14);
    border-color: var(--primary-color);
}

.password-toggle-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Learn More Banner */
.learn-more-banner {
    background: linear-gradient(135deg, var(--sidebar-active) 0%, #7a0000 100%);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-md);
    margin-bottom: var(--space-lg);
    text-align: left;
    box-shadow: 0 3px 10px rgba(149, 0, 0, 0.28);
    max-width: 500px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.learn-more-banner-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
    margin-bottom: 4px;
    width: 100%;
    box-sizing: border-box;
}

.learn-more-text {
    color: white;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
    width: 100%;
}

.learn-more-prompt {
    margin: 0 0 2px 0;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
    padding: 0 2px 0 1.15rem;
}

.learn-more-steps {
    margin: 0;
    padding-left: 1.15rem;
    text-align: left;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8125rem;
    line-height: 1.35;
    list-style-position: outside;
}

.learn-more-steps li {
    margin-bottom: 2px;
    padding-left: 4px;
}

.learn-more-steps li:last-child {
    margin-bottom: 0;
}

.learn-more-inline-link {
    color: #fff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.2s ease;
}

.learn-more-inline-link:hover {
    opacity: 0.9;
}

.learn-more-button {
    display: inline-block;
    background: white;
    color: var(--sidebar-active);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    margin: 0;
}

.learn-more-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    background: rgba(255, 255, 255, 0.95);
}

/* ---- Feature release banner (login — shipped features) ---- */
.feature-release-banner {
    max-width: 500px;
    width: 100%;
    margin: 0 auto var(--space-sm) auto;
    overflow: hidden;
    border-radius: 1.1rem;
    border: 1px solid rgba(22, 163, 74, 0.28);
    box-shadow:
        0 14px 32px rgba(22, 101, 52, 0.1),
        0 4px 14px rgba(34, 139, 34, 0.12);
}

.feature-release-banner-hero {
    padding: 1.15rem 1.2rem 1.1rem;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.65), transparent 48%),
        linear-gradient(135deg, #f0fdf4 0%, #dcfce7 42%, #bbf7d0 100%);
    color: #14532d;
}

.feature-release-banner-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.feature-release-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(22, 101, 52, 0.18);
    color: #14532d;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.feature-release-version-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.24rem 0.6rem;
    border-radius: var(--radius-full);
    background: #166534;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
}

.feature-release-title {
    margin: 0 0 0.45rem;
    color: #14532d;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.feature-release-summary {
    margin: 0;
    color: #166534;
    font-size: 0.9rem;
    line-height: 1.45;
    font-weight: 500;
}

.feature-release-date {
    margin: 0.55rem 0 0;
    color: #15803d;
    font-size: 0.78rem;
    font-weight: 600;
}

/* ---- Coming Soon banner (login — under construction) ---- */
.coming-soon-banner {
    max-width: 500px;
    width: 100%;
    margin: 0 auto var(--space-xl) auto;
    background:
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 14px,
            rgba(149, 0, 0, 0.06) 14px,
            rgba(149, 0, 0, 0.06) 28px
        ),
        linear-gradient(150deg, #1c0404 0%, #2e0707 60%, #1a0303 100%);
    border-radius: var(--radius-lg);
    border: 2px solid var(--sidebar-active);
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(255, 165, 0, 0.15),
        0 6px 28px rgba(149, 0, 0, 0.55);
}

.coming-soon-banner-top-bar {
    height: 5px;
    background: linear-gradient(90deg, var(--sidebar-active) 0%, #C41E3A 50%, #FFA500 100%);
}

.coming-soon-banner-inner {
    padding: var(--space-lg);
}

.coming-soon-banner-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    flex-wrap: wrap;
}

.coming-soon-badge {
    background: #FFA500;
    color: #1a0000;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 3px 10px;
    border-radius: 99px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255, 165, 0, 0.4);
}

.coming-soon-version {
    color: rgba(255, 165, 0, 0.55);
    font-size: 0.8rem;
    font-weight: 500;
}

.coming-soon-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 var(--space-sm) 0;
    letter-spacing: 0.01em;
}

.coming-soon-features {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(149, 0, 0, 0.4);
    padding-top: var(--space-sm);
}

.coming-soon-features li {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    padding: 4px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.coming-soon-features li::before {
    content: "✓";
    color: #FFA500;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Shared release badge (release notes cards) */
.release-badge {
    background: #FFA500;
    color: #1a0000;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 3px 10px;
    border-radius: 99px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255, 165, 0, 0.4);
}

.release-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.release-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.release-features li::before {
    content: "✓";
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 1px;
}

#login-release-banner-mount {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

.app-update-banner {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: min(560px, calc(100% - 1.5rem));
    padding: 0.75rem 0.9rem;
    background: #fff;
    border: 2px solid #950000;
    border-radius: var(--radius-md);
    box-shadow: 0 8px 22px rgba(149, 0, 0, 0.16);
    color: #1a1a1a;
}

.app-update-banner-text {
    margin: 0;
    flex: 1;
    font-size: 0.92rem;
    line-height: 1.4;
    font-weight: 600;
}

.app-update-banner-actions {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}

.app-update-banner-later,
.app-update-banner-reload {
    border-radius: var(--radius-md);
    padding: 0.45rem 0.75rem;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.app-update-banner-later {
    background: #fff;
    border: 1px solid #d1d5db;
    color: #374151;
}

.app-update-banner-reload {
    background: #950000;
    border: 1px solid #950000;
    color: #fff;
}

@media (max-width: 767px) {
    .app-update-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }

    .app-update-banner-actions {
        justify-content: flex-end;
    }

    .feature-release-banner,
    .coming-soon-banner {
        max-width: 100%;
        margin-bottom: var(--space-md);
    }

    .feature-release-banner-hero,
    .coming-soon-banner-inner {
        padding: 1rem;
    }

    .feature-release-title,
    .coming-soon-title {
        font-size: 1.05rem;
    }
}

.login-feature-release-note-summary {
    font-weight: 500;
    color: #166534;
}

/* ---- App version badge (footer) ---- */
.app-version-badge {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.15rem 0.55rem;
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.app-version-badge:hover,
.app-version-badge:focus-visible {
    background: rgba(149, 0, 0, 0.08);
    border-color: var(--sidebar-active);
    color: var(--sidebar-active);
    outline: none;
}

/* ---- Support release notes ---- */
.release-notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.release-notes-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.release-notes-card--latest {
    border-color: rgba(149, 0, 0, 0.35);
    box-shadow: 0 4px 18px rgba(149, 0, 0, 0.08);
}

.release-notes-card-top-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--sidebar-active) 0%, #C41E3A 50%, #FFA500 100%);
}

.release-notes-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg) var(--space-sm);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.release-notes-card--latest .release-notes-card-header {
    background: linear-gradient(135deg, #950000 0%, #7a0000 100%);
    border-bottom: none;
}

.release-notes-card-title {
    color: var(--text-primary);
    font-size: 1rem;
    margin: 0;
}

.release-notes-card--latest .release-notes-card-title {
    color: #ffffff;
}

.release-notes-card-meta {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
}

.release-notes-card--latest .release-notes-card-meta {
    color: rgba(255, 165, 0, 0.85);
}

.release-notes-card-header-main {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.release-notes-card-body {
    padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.release-notes-card-summary {
    color: var(--text-secondary);
    margin: 0 0 var(--space-sm) 0;
    line-height: 1.5;
}

.release-notes-card-features {
    border-top: 1px solid var(--border);
    padding-top: var(--space-sm);
}

.release-notes-card-features li {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.release-notes-card-features li::before {
    color: var(--sidebar-active);
}

.release-notes-empty {
    color: var(--text-secondary);
    margin: 0;
}

/* ---- Account version info ---- */
.account-version-info {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-md);
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-align: center;
}

.account-version-link {
    background: none;
    border: none;
    color: var(--sidebar-active);
    cursor: pointer;
    font-size: inherit;
    font-weight: 600;
    padding: 0;
    text-decoration: underline;
}

.account-version-link:hover,
.account-version-link:focus-visible {
    color: #C41E3A;
    outline: none;
}

/* ---- What's New modal ---- */
#whats-new-modal.modal {
    padding: max(var(--space-md), env(safe-area-inset-top, 0px)) var(--space-md) max(var(--space-md), env(safe-area-inset-bottom, 0px));
    background-color: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
}

.whats-new-modal-content {
    max-width: 440px;
    width: min(100%, 440px);
    overflow: hidden;
    border: 1px solid rgba(22, 163, 74, 0.28);
    border-radius: 1.25rem;
    box-shadow:
        0 18px 40px rgba(22, 101, 52, 0.12),
        0 6px 18px rgba(34, 139, 34, 0.1);
    position: relative;
}

.whats-new-modal-close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(22, 101, 52, 0.18);
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.82);
    color: #14532d;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.whats-new-modal-close:hover,
.whats-new-modal-close:focus-visible {
    background: #ffffff;
    outline: none;
    transform: scale(1.04);
}

.whats-new-modal-close .close-icon {
    font-size: 1.35rem;
    line-height: 1;
}

.whats-new-modal-hero {
    padding: 1.5rem 1.5rem 1.25rem;
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.65), transparent 48%),
        linear-gradient(135deg, #f0fdf4 0%, #dcfce7 42%, #bbf7d0 100%);
    color: #14532d;
}

.whats-new-modal-hero-badge-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-right: 2.5rem;
}

.whats-new-modal-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(22, 101, 52, 0.18);
    color: #14532d;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.whats-new-modal-version-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: var(--radius-full);
    background: #166534;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.whats-new-modal-hero-tagline {
    margin: 0.85rem 0 0;
    color: #166534;
    font-size: 0.92rem;
    line-height: 1.45;
    font-weight: 500;
}

.whats-new-modal-body {
    padding: 1.25rem 1.5rem 0.5rem;
    background: linear-gradient(180deg, #f7fdf9 0%, #ffffff 100%);
}

.whats-new-modal-title {
    margin: 0 0 0.65rem;
    color: #14532d;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.whats-new-modal-summary {
    color: #166534;
    line-height: 1.55;
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 500;
}

.whats-new-modal-highlights {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.whats-new-modal-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.8rem 0.9rem;
    border-radius: 0.85rem;
    background: #f0fdf4;
    border: 1px solid rgba(22, 163, 74, 0.16);
}

.whats-new-modal-highlight-icon {
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: rgba(22, 163, 74, 0.14);
    color: #166534;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    margin-top: 0.05rem;
}

.whats-new-modal-highlight-text {
    color: #14532d;
    font-size: 0.9rem;
    line-height: 1.45;
}

.whats-new-modal-footer {
    display: flex;
    justify-content: stretch;
    padding: 1rem 1.5rem 1.25rem;
    background: #ffffff;
    border-top: 1px solid rgba(22, 163, 74, 0.12);
}

.whats-new-modal-ack-btn {
    width: 100%;
    min-height: 2.75rem;
    border-radius: 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 10px 24px rgba(65, 105, 225, 0.22);
}

.whats-new-modal-ack-btn:hover,
.whats-new-modal-ack-btn:focus-visible {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

@media (max-width: 767px) {
    #whats-new-modal.modal {
        align-items: flex-end;
        padding:
            max(var(--space-sm), env(safe-area-inset-top, 0px))
            max(var(--space-sm), env(safe-area-inset-left, 0px))
            max(var(--space-sm), env(safe-area-inset-bottom, 0px))
            max(var(--space-sm), env(safe-area-inset-right, 0px));
    }

    .whats-new-modal-content {
        width: 100% !important;
        max-width: none !important;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        max-height: min(88vh, 720px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .whats-new-modal-hero {
        padding: 1.15rem 1rem 1rem;
    }

    .whats-new-modal-body {
        padding: 1rem 1rem 0.35rem;
    }

    .whats-new-modal-title {
        font-size: 1.2rem;
    }

    .whats-new-modal-footer {
        position: sticky;
        bottom: 0;
        padding: 0.85rem 1rem max(0.85rem, env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, 0.96);
        backdrop-filter: blur(8px);
    }
}

/* ---- Book a Demo Banner ---- */
.book-demo-banner {
    max-width: 500px;
    width: 100%;
    margin: 0 auto var(--space-xl) auto;
    background: linear-gradient(150deg, #1c0404 0%, #2e0707 60%, #1a0303 100%);
    border-radius: var(--radius-lg);
    border: 2px solid var(--sidebar-active);
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(149, 0, 0, 0.35);
}

.book-demo-banner--compact {
    margin-bottom: var(--space-lg);
}

.book-demo-banner--compact .book-demo-banner-inner {
    padding: var(--space-md) var(--space-lg);
}

.book-demo-banner--compact .book-demo-btn {
    width: auto;
    max-width: none;
    margin-bottom: var(--space-sm);
    white-space: nowrap;
}

.book-demo-banner--compact .book-demo-banner-intro {
    font-size: 0.8125rem;
    line-height: 1.4;
}

.book-demo-banner-top-bar {
    height: 5px;
    background: linear-gradient(90deg, var(--sidebar-active) 0%, #C41E3A 50%, #FFA500 100%);
}

.book-demo-banner-inner {
    padding: var(--space-lg);
    text-align: center;
}

.book-demo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin-bottom: var(--space-md);
    text-decoration: none;
}

.book-demo-banner-intro {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0;
    text-align: left;
}

@media (max-width: 767px) {
    .book-demo-banner--compact {
        margin-bottom: var(--space-md);
    }

    .book-demo-banner--compact .book-demo-banner-inner {
        padding: var(--space-sm) var(--space-md);
    }

    .book-demo-banner--compact .book-demo-banner-intro {
        font-size: 0.75rem;
    }
}

/* Under Construction Page */
.under-construction-content {
    text-align: center;
    padding: var(--space-xl) 0;
}

.under-construction-content h2 {
    font-size: 2rem;
    margin-bottom: var(--space-lg);
    color: var(--text-primary);
}

.under-construction-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
}

@media (max-width: 767px) {
    .learn-more-banner {
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-md);
    }
    
    .learn-more-banner-header {
        margin-bottom: 6px;
        gap: 6px;
    }

    .learn-more-text {
        font-size: 0.9375rem;
    }

    .learn-more-prompt {
        font-size: 0.75rem;
        padding-left: 1rem;
    }

    .learn-more-steps {
        font-size: 0.75rem;
        line-height: 1.3;
        margin-bottom: var(--space-xs);
        padding-left: 1rem;
    }
    
    .learn-more-button {
        padding: 6px var(--space-sm);
        font-size: 0.8125rem;
    }
    
    .under-construction-content h2 {
        font-size: 1.5rem;
    }
    
    .under-construction-content p {
        font-size: 1rem;
    }
}

/* ===================================================================
 * EMAIL VERIFICATION & PASSWORD RESET STYLES
 * =================================================================== */

/* Verification Hub — dual email + phone layout */
.verification-hub-container {
    max-width: 720px;
    width: 100%;
}

.verification-hub-header {
    text-align: center;
    margin-bottom: var(--space-lg);
}

.verification-hub-header h2 {
    color: var(--text-primary);
    font-size: 1.75rem;
    margin-bottom: var(--space-sm);
}

.verification-hub-subtitle {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.verification-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--space-lg);
    padding: var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.verification-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    flex: 0 0 auto;
    min-width: 72px;
}

.verification-step-indicator {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--background);
    border: 2px solid var(--border);
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.95rem;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.verification-step-check {
    display: none;
    width: 20px;
    height: 20px;
}

.verification-step-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.verification-step-connector {
    flex: 1;
    height: 2px;
    min-width: 32px;
    max-width: 80px;
    background: var(--border);
    margin: 0 var(--space-sm);
    margin-bottom: 1.25rem;
}

.verification-step-active .verification-step-indicator {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(65, 105, 225, 0.2);
}

.verification-step-active .verification-step-label {
    color: var(--primary-color);
}

.verification-step-complete .verification-step-indicator {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #fff;
}

.verification-step-complete .verification-step-number {
    display: none;
}

.verification-step-complete .verification-step-check {
    display: block;
}

.verification-step-complete .verification-step-label {
    color: var(--secondary-color);
}

.verification-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    align-items: start;
}

.verification-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: left;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.verification-card-phone {
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(65, 105, 225, 0.12);
}

.verification-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.verification-card-badge {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
    background: rgba(65, 105, 225, 0.12);
    color: var(--primary-color);
}

.verification-card-email .verification-card-badge {
    background: rgba(34, 139, 34, 0.12);
    color: var(--secondary-color);
}

.verification-card-icon {
    font-size: 1.5rem;
    line-height: 1;
}

.verification-card-header h3 {
    flex: 1 1 100%;
    color: var(--text-primary);
    font-size: 1.15rem;
    margin: 0;
}

.verification-card-desc {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: var(--space-md);
}

.verification-card-desc strong {
    color: var(--text-primary);
    word-break: break-all;
}

.verification-code-group {
    margin-bottom: var(--space-md);
}

.verification-code-input {
    text-align: center;
    font-size: 1.5rem !important;
    letter-spacing: 0.4em;
    font-weight: 600;
    padding: var(--space-md) !important;
    min-height: 52px;
}

.verification-card-btn {
    width: 100%;
    margin-bottom: var(--space-sm);
    min-height: 44px;
}

.verification-card-btn-secondary {
    width: 100%;
    min-height: 44px;
}

.verification-details {
    margin-bottom: var(--space-md);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.verification-details summary {
    cursor: pointer;
    color: var(--primary-color);
    font-weight: 600;
    padding: var(--space-xs) 0;
    list-style: none;
}

.verification-details summary::-webkit-details-marker {
    display: none;
}

.verification-details summary::before {
    content: '+ ';
    font-weight: 700;
}

.verification-details[open] summary::before {
    content: '− ';
}

.verification-details ul {
    margin: var(--space-sm) 0 0 var(--space-md);
    padding: 0;
}

.verification-details li {
    margin-bottom: var(--space-xs);
}

.verification-card-complete {
    border-color: var(--secondary-color);
    opacity: 0.85;
}

.verification-card-complete .verification-card-header h3::after {
    content: ' ✓';
    color: var(--secondary-color);
}

.verification-hub-footer {
    text-align: center;
    margin-top: var(--space-lg);
}

.verification-hub-hint {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: rgba(65, 105, 225, 0.08);
    border-radius: var(--radius-md);
}

/* Phone verify trial modal */
.phone-verify-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    backdrop-filter: blur(2px);
}

.phone-verify-modal {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-lg);
    max-width: 400px;
    width: 100%;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    position: relative;
}

.phone-verify-modal-close {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
}

.phone-verify-modal h3 {
    margin: 0 0 var(--space-sm);
    font-size: 1.25rem;
    color: var(--text-primary);
}

.phone-verify-modal-desc {
    margin: 0 0 var(--space-lg);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.phone-verify-modal-code {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-md);
    font-size: 1.25rem;
    letter-spacing: 0.35em;
    text-align: center;
    font-weight: 600;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    min-height: 52px;
}

.phone-verify-modal-code:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.2);
}

.phone-verify-modal-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-sm);
}

.phone-verify-modal-link {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 0.85rem;
    cursor: pointer;
    padding: var(--space-xs);
    min-height: 44px;
}

.phone-verify-modal-link-muted {
    color: var(--text-secondary);
}

/* Legacy verification classes (used elsewhere) */
.email-verification-content {
    text-align: center;
    max-width: 500px;
    margin: 0 auto;
}

.verification-icon {
    font-size: 4rem;
    margin-bottom: var(--space-lg);
    opacity: 0.8;
}

.email-verification-content h2 {
    color: var(--text-primary);
    margin-bottom: var(--space-lg);
    font-size: 1.75rem;
}

.verification-message {
    color: var(--text-secondary);
    margin-bottom: var(--space-xl);
    line-height: 1.6;
    font-size: 1rem;
}

.verification-info {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    text-align: left;
}

.verification-info p {
    margin-bottom: var(--space-md);
    font-weight: 600;
    color: var(--text-primary);
}

.verification-info ul {
    margin-left: var(--space-lg);
}

.verification-info li {
    margin-bottom: var(--space-xs);
    color: var(--text-secondary);
}

.success-message {
    background-color: #d1fae5;
    border: 1px solid #10b981;
    color: #065f46;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.error-message {
    background-color: #fee2e2;
    border: 1px solid var(--danger-color);
    color: #991b1b;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

/* Password Requirements Checklist */
.password-requirements {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-xs);
}

.password-requirement {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.password-requirement .requirement-icon {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
    transition: color 0.2s ease, font-weight 0.2s ease;
    color: var(--text-secondary);
}

.password-requirement .requirement-text {
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.password-requirement.requirement-met .requirement-icon {
    color: var(--secondary-color);
    font-weight: bold;
}

.password-requirement.requirement-met .requirement-text {
    color: var(--secondary-color);
}

/* BAA% by Pitch Count table base sizing */
.baa-count-table {
    table-layout: auto;
    width: 100%;
}

.baa-count-table th,
.baa-count-table td {
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
}

/* PCA BAA/SLG wrapper — flex container that mirrors post-game's game-summary-cards layout.
   Responsive sizing comes from the .game-summary-table rules in the @media queries below. */
.pca-baa-slg-wrapper {
    max-width: 100%;
    box-sizing: border-box;
}

/* Hide the left-side spacer when the flex direction stacks vertically on tablets/phones,
   so the BAA table doesn't get pushed down by an empty growing item. */
@media (max-width: 1024px) {
    .pca-baa-slg-spacer {
        display: none !important;
    }
}

/* Mid-game Pitch Count Stats (desktop/laptop only): prevent clipped headers/values */
@media (min-width: 1025px) {
    #mid-game-report-modal table[id^="pitch-count-table-game-"] {
        font-size: 0.8125rem !important;
    }

    #mid-game-report-modal table[id^="pitch-count-table-game-"] th {
        font-size: 0.75rem !important;
        padding: 4px 3px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    #mid-game-report-modal table[id^="pitch-count-table-game-"] td {
        padding: 4px 3px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    #mid-game-report-modal table[id^="pitch-count-table-game-"] td span {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}

/* ===================================================================
 * RESPONSIVE DESIGN FOR AUTH PAGES
 * =================================================================== */

/* Tablet and medium screen optimizations */
@media (max-width: 1024px) and (min-width: 769px) {
    .report-table-wrapper {
        max-height: 450px; /* Tablet-optimized height */
    }

    .game-summary-cards {
        flex-direction: column !important;
    }

    .game-summary-table {
        min-width: 100% !important;
        width: 100% !important;
    }

    .baa-count-table {
        font-size: 0.75rem !important;
    }

    .baa-count-table th {
        font-size: 0.75rem !important;
        padding: 3px 2px !important;
        white-space: nowrap !important;
    }

    .baa-count-table td {
        padding: 4px 2px !important;
        font-size: 0.6875rem !important;
        white-space: nowrap !important;
    }

    .baa-count-table td span {
        font-size: 0.6875rem !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 768px) {
    .login-page-enhanced .form-container {
        padding: var(--space-lg);
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Report table wrapper for tablets */
    .report-table-wrapper {
        max-height: 400px; /* Tablet max height */
    }

    .login-page-enhanced .btn-primary {
        padding: var(--space-md);
        font-size: 1rem;
    }

    .email-verification-content {
        padding: var(--space-md);
    }

    .verification-hub-container {
        padding: var(--space-sm);
    }

    /* Pull verification layout up — avoid vertical centering dead space below nav */
    #email-verification-page .home-page-container {
        justify-content: flex-start;
        min-height: auto;
        padding-top: 0;
        padding-bottom: calc(var(--space-md) + 36px);
    }

    #email-verification-page .home-logo {
        max-width: 200px;
        margin-top: 0;
        margin-bottom: var(--space-sm);
    }

    .verification-hub-header {
        margin-bottom: var(--space-md);
    }

    .verification-hub-header h2 {
        font-size: 1.35rem;
    }

    .verification-hub-subtitle {
        font-size: 0.875rem;
    }

    .verification-steps {
        padding: var(--space-sm) var(--space-md);
    }

    .verification-step-indicator {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
    }

    .verification-step-label {
        font-size: 0.7rem;
    }

    .verification-step-connector {
        min-width: 24px;
        margin-bottom: 1.1rem;
    }

    .verification-cards {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .verification-card {
        padding: var(--space-md);
    }

    .verification-card-header h3 {
        font-size: 1.05rem;
    }

    .verification-code-input {
        font-size: 1.35rem !important;
        letter-spacing: 0.3em;
    }

    .verification-hub-hint {
        font-size: 0.8rem;
    }

    .verification-icon {
        font-size: 2.5rem;
        margin-bottom: var(--space-md);
    }

    .email-verification-content h2 {
        font-size: 1.5rem;
    }

    .verification-message {
        font-size: 0.95rem;
    }

    .verification-info {
        padding: var(--space-md);
    }

    .auth-links p {
        font-size: 0.9rem;
    }

    /* BAA% by Pitch Count table — tablet responsive */
    .baa-count-table {
        font-size: 0.6875rem !important;
    }

    .baa-count-table th {
        font-size: 0.6875rem !important;
        padding: 3px 2px !important;
        white-space: nowrap !important;
    }

    .baa-count-table td {
        padding: 4px 2px !important;
        font-size: 0.625rem !important;
        white-space: nowrap !important;
    }

    .baa-count-table td span {
        font-size: 0.625rem !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 480px) {
    .login-page-enhanced .form-container {
        padding: var(--space-md);
        margin: var(--space-sm);
    }

    #email-verification-page .home-page-container {
        padding-bottom: calc(var(--space-sm) + 32px);
    }

    #email-verification-page .home-logo {
        max-width: 180px;
        margin-bottom: var(--space-xs);
    }

    #email-verification-page .login-page-enhanced .form-container,
    #email-verification-page .verification-hub-container {
        margin: 0;
        padding: var(--space-sm);
    }

    .home-logo {
        width: 220px;
        height: auto;
        margin-bottom: var(--space-lg);
    }

    .login-page-enhanced h3 {
        font-size: 1.25rem;
    }
    
    /* Game Report Mobile Optimizations */
    .game-report-action-row {
        gap: 4px;
    }

    .game-report-action-row .btn {
        font-size: 0.6875rem !important;
        padding: 5px 6px !important;
        min-height: 36px !important;
    }

    .game-report-title {
        font-size: 0.9375rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .game-report-section-title {
        font-size: 0.875rem !important;
        margin-top: var(--space-xs) !important;
        margin-bottom: var(--space-xs) !important;
    }
    
    .game-summary-cards {
        gap: var(--space-xs) !important;
        margin-bottom: var(--space-xs) !important;
    }
    
    .game-summary-table {
        min-width: 100% !important;
        width: 100% !important;
    }
    
    .game-summary-table td {
        padding: 6px 10px !important;
        font-size: 0.75rem !important;
    }
    
    .game-summary-table td:last-child {
        font-size: 0.875rem !important;
    }
    
    /* Report table wrapper mobile - ensure vertical scrolling works */
    .report-table-wrapper {
        overflow-x: auto !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        max-height: 400px !important; /* Mobile-optimized max height for vertical scrolling - CRITICAL */
        margin: 0;
        padding: 0;
        padding-right: 8px !important; /* Account for scrollbar - ensure content is fully visible */
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        /* Ensure wrapper is scrollable container for sticky headers */
        position: relative;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Mid-game report modal table wrapper - ensure it fits within viewport */
    #mid-game-report-modal .report-table-wrapper {
        max-height: calc(100vh - 300px) !important; /* Account for header and padding */
        margin: 0 !important;
        padding: var(--space-xs) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    
    .report-pitch-table {
        font-size: 0.75rem !important;
        min-width: max-content;
    }
    
    .report-pitch-table th,
    .report-pitch-table td {
        padding: 6px 8px !important;
        white-space: nowrap;
    }
    
    .report-pitch-table th {
        font-size: 0.7rem !important;
        font-weight: 600;
    }
    
    .report-pitch-table .pitch-name {
        font-size: 0.75rem !important;
        padding-left: var(--space-xs) !important;
    }
    
    .report-pitch-table .pitch-count,
    .report-pitch-table .pitch-percentage {
        font-size: 0.75rem !important;
    }
    
    /* Metric definitions mobile */
    .metric-definitions {
        padding: var(--space-xs) !important;
        margin-top: var(--space-sm) !important;
    }
    
    .metric-definitions h4 {
        font-size: 0.8125rem !important;
        margin-bottom: var(--space-xs) !important;
    }
    
    .metric-definitions > div {
        grid-template-columns: 1fr !important;
        gap: var(--space-xs) !important;
    }
    
    .metric-definitions > div > div {
        padding: var(--space-xs) !important;
    }
    
    /* Game list items mobile */
    .game-list-item {
        padding: var(--space-xs) !important;
        margin-bottom: var(--space-xs) !important;
    }
    
    /* Mid-game report modal specific mobile fixes - full viewport for this modal only */
    /* Override modal container positioning for fullscreen display */
    #mid-game-report-modal.modal {
        align-items: stretch !important;
        padding: 0 !important;
    }
    
    #mid-game-report-modal .modal-content {
        margin: 0 !important;
        max-height: 100vh !important;
        height: 100vh !important;
        width: 100vw !important;
        max-width: 100vw !important;
        padding: var(--space-xs) !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    }
    
    #mid-game-report-modal .modal-header {
        flex-shrink: 0 !important;
        padding: var(--space-sm) !important;
        padding-top: calc(var(--space-sm) + env(safe-area-inset-top, 0px)) !important;
        min-height: auto !important;
    }
    
    #mid-game-report-modal .modal-body {
        flex: 1 !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
        padding: var(--space-xs) !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch;
    }
    
    #mid-game-report-modal #mid-game-report-content {
        padding: var(--space-xs) !important;
        margin: 0 !important;
    }
    
    /* Reduce spacing in report containers */
    #mid-game-report-content,
    #game-report-content,
    #pitching-reports-content {
        padding: var(--space-sm) !important;
    }
    
    #mid-game-report-content > *,
    #game-report-content > *,
    #pitching-reports-content > * {
        margin-bottom: var(--space-sm) !important;
    }
    
    #mid-game-report-content > *:last-child,
    #game-report-content > *:last-child,
    #pitching-reports-content > *:last-child {
        margin-bottom: 0 !important;
    }
    
    /* Pitch log mobile optimizations */
    .pitch-log-entry {
        padding: var(--space-xs) var(--space-sm) !important;
        gap: var(--space-xs) !important;
        font-size: 0.7rem !important;
    }
    
    .pitch-log-entry .pitch-sequence {
        min-width: 30px !important;
        font-size: 0.7rem !important;
    }
    
    .pitch-log-entry .pitch-details {
        font-size: 0.7rem !important;
    }
    
    .pitch-log-entry .pitch-details span {
        font-size: 0.7rem !important;
    }
    
    .batter-hand-badge {
        font-size: 0.65rem !important;
        padding: 1px 4px !important;
    }
    
    #game-report-pitch-list {
        max-height: 250px !important;
        font-size: 0.75rem !important;
    }
    
    #game-report-pitch-list .pitch-log-entry {
        padding: var(--space-xs) !important;
    }
    
    /* Edit pitch log modal mobile */
    .edit-pitch-log-item {
        padding: var(--space-xs) !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .edit-pitch-log-item > div:first-child {
        width: 100% !important;
        margin-bottom: var(--space-xs) !important;
    }
    
    .edit-pitch-log-item > div:last-child {
        width: 100% !important;
        justify-content: flex-start !important;
    }
    
    .edit-pitch-log-item .btn {
        flex: 1 !important;
        font-size: 0.75rem !important;
        padding: var(--space-xs) !important;
    }
    
    /* Edit pitch modal mobile */
    #edit-pitch-modal .modal-content {
        margin: var(--space-sm) !important;
        max-width: calc(100% - 2 * var(--space-sm)) !important;
    }
    
    #edit-pitch-modal .form-group {
        margin-bottom: var(--space-sm) !important;
    }
    
    #edit-pitch-modal .form-label {
        font-size: 0.8125rem !important;
    }
    
    #edit-pitch-modal .form-input {
        font-size: 0.875rem !important;
        padding: var(--space-xs) var(--space-sm) !important;
    }

    /* BAA% by Pitch Count table mobile — fit all values on single lines */
    .baa-count-table {
        font-size: 0.5625rem !important;
    }

    .baa-count-table th {
        font-size: 0.5625rem !important;
        padding: 2px 1px !important;
        white-space: nowrap !important;
    }

    .baa-count-table td {
        padding: 3px 1px !important;
        font-size: 0.5625rem !important;
        white-space: nowrap !important;
    }

    .baa-count-table td span {
        font-size: 0.5625rem !important;
        white-space: nowrap !important;
    }
}
/* Subscription Plan Selection Modal */
#subscription-plan-modal .modal-content {
    max-width: 550px; /* Reduced from 700px for better desktop appearance */
}

/* Desktop/laptop: Make subscription modal narrower on larger screens */
@media (min-width: 1024px) {
    #subscription-plan-modal .modal-content {
        max-width: 400px; /* Reduced from 500px for better desktop appearance */
        width: auto;
        min-width: 350px;
    }
}

#subscription-plan-modal .modal-header {
    background-color: var(--sidebar-active);
    color: white;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

#subscription-plan-modal .modal-header h3 {
    color: white;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

/* Old .btn styling for subscription modal header — replaced by .btn-modal-close--on-dark */

/* Subscription Plan Cards */
.subscription-plan-card {
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    background: var(--bg-primary);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.subscription-plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-color);
}

.subscription-plan-card.annual-plan {
    border-color: var(--secondary-color);
    background: linear-gradient(135deg, rgba(34, 139, 34, 0.03) 0%, rgba(34, 139, 34, 0.08) 100%);
}

.subscription-plan-card.annual-plan::before {
    content: 'BEST VALUE';
    position: absolute;
    top: 0;
    right: 0;
    background: var(--secondary-color);
    color: white;
    padding: var(--space-xs) var(--space-md);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: 0 var(--radius-md) 0 var(--radius-md);
    text-transform: uppercase;
}

.subscription-plan-card .plan-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    text-align: center;
}

.subscription-plan-card .plan-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: var(--space-md) 0;
    text-align: center;
    line-height: 1.2;
}

.subscription-plan-card .plan-price .price-period {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.subscription-plan-card .plan-savings {
    color: var(--text-primary);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    margin: var(--space-sm) 0;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
}

.subscription-plan-card .plan-button {
    width: 100%;
    margin-top: var(--space-lg);
    padding: var(--space-md);
    font-weight: 600;
    font-size: 1rem;
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.subscription-plan-card.annual-plan .plan-button {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.subscription-plan-card.annual-plan .plan-button:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

/* Mobile responsive for subscription plans */
@media (max-width: 768px) {
    #subscription-plan-modal .modal-content {
        max-width: 95%;
    }
    
    #subscription-plans-container {
        grid-template-columns: 1fr !important;
        gap: var(--space-md) !important;
    }
    
    .subscription-plan-card {
        padding: var(--space-lg);
    }
    
    .subscription-plan-card .plan-price {
        font-size: 2rem;
    }
}

/* ===================================================================
 * PLAY CALL CARDS GENERATOR STYLES (Mobile-Optimized)
 * =================================================================== */

/* Settings Section - Desktop */
.wristband-settings-section {
    margin-bottom: var(--space-lg);
    background: var(--surface);
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.wristband-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
}

/* Pitch Selection Grid */
.wristband-pitch-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

/* Add from pitch type row */
.pitch-type-add-row {
    display: flex;
    gap: var(--space-xs);
}

.pitch-type-add-row select {
    flex: 1;
    min-width: 0;
}

/* Destructive outline: compact on desktop, full-width on small screens */
.wristband-clear-pitch-list-btn {
    align-self: flex-start;
    width: auto;
    min-width: 9rem;
    margin-top: 0;
    padding: 0.5rem 1.25rem !important;
    min-height: 40px !important;
    font-size: 0.8125rem !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--danger-color) !important;
    background-color: rgba(196, 30, 58, 0.05);
    border: 1px solid var(--danger-color) !important;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wristband-clear-pitch-list-btn:hover:not(:disabled) {
    background-color: rgba(196, 30, 58, 0.1);
    color: var(--danger-hover) !important;
    border-color: var(--danger-hover) !important;
}

.wristband-clear-pitch-list-btn:focus-visible {
    outline: 2px solid var(--danger-color);
    outline-offset: 2px;
}

.wristband-clear-pitch-list-btn:active:not(:disabled) {
    background-color: rgba(196, 30, 58, 0.14);
}

.wristband-clear-list-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
}

.wristband-add-all-offensive-plays-btn {
    flex-shrink: 0;
    white-space: nowrap;
    font-weight: 600;
    align-self: center;
}

.btn-compact {
    padding: var(--space-xs) var(--space-sm);
    min-width: 44px;
    width: auto;
    flex-shrink: 0;
    font-size: 1.1rem;
    font-weight: bold;
    height: 44px;
}

/* Manual entry section */
.wristband-manual-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    border-top: 1px solid var(--border);
}

.manual-entry-label {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

.manual-entry-buttons {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

/* Pitch Types / Offensive: stacked custom block, clear list, row colors */
.wristband-pitch-types-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.wristband-toolbar-custom-row {
    flex-wrap: wrap;
    align-items: flex-end;
}

.wristband-toolbar-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.wristband-toolbar-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

.wristband-toolbar-help {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--text-primary);
    opacity: 0.88;
}

.wristband-toolbar-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}

/* Auto Colors: brief “done” state after assignment */
#wristband-page .btn.btn-outline.wristband-auto-colors-complete {
    border-color: var(--secondary-color) !important;
    color: #145214 !important;
    background-color: rgba(34, 139, 34, 0.14) !important;
    box-shadow: 0 0 0 2px rgba(34, 139, 34, 0.28);
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

#wristband-page .btn.btn-primary.wristband-save-config-complete {
    box-shadow: 0 0 0 3px rgba(34, 139, 34, 0.45), 0 4px 14px rgba(34, 139, 34, 0.25);
    filter: brightness(1.05);
    transition: box-shadow 0.2s ease, filter 0.2s ease;
}

.wristband-toolbar-primary-btn {
    align-self: flex-start;
}

.btn-sm {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.8rem;
}

/* Pitch Type Row - Compact Layout (remove button is position:absolute top-right) */
.pitch-type-row {
    position: relative;
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: var(--space-sm);
    padding-right: 44px;
    background: var(--background);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.pitch-type-row .form-group {
    margin-bottom: 0;
}

.pitch-type-code-group {
    flex: 0 0 88px;
}

.pitch-type-desc-group {
    flex: 2;
    min-width: 80px;
}

.pitch-type-color-group {
    flex: 0 0 110px;
}

/* Color selector — dropdown full width, preview swatch and custom picker stacked below */
.pitch-color-select {
    width: 100%;
    padding: var(--space-xs) 6px;
    font-size: 0.78rem;
}

.pitch-color-preview {
    display: block;
    width: 100%;
    height: 20px;
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

/* Custom color picker — full width below the preview swatch */
.pitch-color-custom {
    display: block;
    width: 100%;
    height: 32px;
    margin-top: 4px;
    padding: 2px;
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
}

/* Times-shown: slider + single summary line (fills remaining row width on desktop) */
.pitch-type-pct-group {
    flex: 1 1 150px;
    min-width: 120px;
    max-width: none;
}

.pitch-times-shown-label {
    margin-bottom: 4px;
}

/* Slider — full width of its container for finer control */
.pitch-pct-slider {
    display: block;
    width: 100%;
    height: 6px;
    cursor: pointer;
    accent-color: var(--primary);
}

.pitch-approx-times {
    color: #b91c1c;
    font-size: 0.75rem;
    line-height: 1.35;
    margin-top: 4px;
}

/* Remove row — upper right, red outline + red ×
   position:absolute and width:auto marked !important so global .btn rules
   (min-height, etc.) cannot override the positional intent at any breakpoint */
.pitch-type-row .pitch-row-remove-btn.remove-pitch-type-btn,
.pitch-type-row .pitch-row-remove-btn.remove-offensive-play-btn {
    position: absolute !important;
    top: 6px;
    right: 6px;
    z-index: 2;
    padding: 0 6px !important;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
    min-width: 30px !important;
    width: auto !important;
    min-height: 30px !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #b91c1c;
    border: 2px solid #dc2626 !important;
    border-radius: var(--radius-sm);
    background: var(--background);
}

.pitch-type-row .pitch-row-remove-btn.remove-pitch-type-btn:hover,
.pitch-type-row .pitch-row-remove-btn.remove-offensive-play-btn:hover {
    color: #991b1b;
    border-color: #b91c1c;
    background: rgba(220, 38, 38, 0.06);
}

.pitch-code-input {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-align: center;
    padding-left: var(--space-sm);
    padding-right: var(--space-sm);
    font-size: 1rem;
}

/* Spray Chart */
.spray-chart-interactive {
    cursor: crosshair;
    border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.spray-pitch-type-btn {
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
}

.spray-pitch-type-btn:hover {
    transform: scale(1.05);
}

.spray-pitch-type-btn.spray-pt-active {
    opacity: 1 !important;
    box-shadow: 0 0 0 2px white, 0 0 0 4px rgba(0, 0, 0, 0.2);
}

/* Wristband Grid */
.wristband-grid {
    display: grid;
    gap: 2px;
    background: #000;
    padding: 2px;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.wristband-cell {
    background-color: #ffffff;
    color: #000000;
    padding: 6px 3px;
    text-align: center;
    font-weight: bold;
    font-size: 0.7rem;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: transform 0.1s ease;
}

.wristband-cell:hover {
    transform: scale(1.05);
    z-index: 1;
    position: relative;
}

#wristband-grid-container {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
}

.wristband-settings-section,
.wristband-pitch-types-section,
.wristband-grid-section {
    margin-bottom: var(--space-lg);
}

/* Play call cards — action toolbar (quick color + generate + load + downloads) */
.wristband-actions-section {
    margin-bottom: var(--space-lg);
    padding: var(--space-sm) var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.wristband-actions-toolbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 12px;
    row-gap: 10px;
}

.wristband-actions-quick-border {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
}

.wristband-actions-quick-border .form-label {
    margin: 0;
    white-space: nowrap;
    align-self: center;
}

select.wristband-quick-color-select {
    width: auto;
    min-width: 132px;
    max-width: 180px;
    box-sizing: border-box;
}

/* Custom color picker for Quick Border Color — override form-input so the native
   color swatch fills the element instead of showing a thin sliver */
#wristband-quick-color-custom {
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 2px 4px !important;
    cursor: pointer;
    box-sizing: border-box !important;
}
#wristband-quick-color-custom::-webkit-color-swatch-wrapper {
    padding: 2px;
}
#wristband-quick-color-custom::-webkit-color-swatch {
    border: none;
    border-radius: 3px;
}

/* Match Quick Border + Load Saved selects to .wristband-action-btn height (override .form-input min-height / padding) */
#wristband-page .wristband-actions-toolbar-inner .pmx-select-host {
    width: auto;
    flex: 0 0 auto;
}

#wristband-page .wristband-actions-toolbar-inner select.form-input.wristband-quick-color-select,
#wristband-page .wristband-actions-toolbar-inner select.form-input.wristband-load-saved-inline-select {
    min-height: 40px !important;
    height: 40px !important;
    padding: 6px 36px 6px 12px !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    border-width: 1px !important;
    box-sizing: border-box !important;
}

/* Download pair — can wrap/shrink before stacking on very narrow widths */
.wristband-actions-download-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 6px 8px;
    max-width: 100%;
    box-sizing: border-box;
}

.wristband-actions-download-group .wristband-action-btn {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}

/* Tablet / narrow: denser controls, avoid horizontal bleed */
@media (max-width: 900px) {
    #wristband-page .wristband-actions-section {
        padding: 8px 10px;
        margin-bottom: var(--space-md);
    }

    #wristband-page .wristband-actions-toolbar-inner {
        gap: 6px 8px;
        row-gap: 8px;
    }

    #wristband-page .wristband-actions-section .btn.wristband-action-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        min-height: 34px !important;
    }

    #wristband-page .wristband-actions-toolbar-inner select.form-input.wristband-quick-color-select,
    #wristband-page .wristband-actions-toolbar-inner select.form-input.wristband-load-saved-inline-select {
        min-height: 34px !important;
        height: 34px !important;
        padding: 5px 28px 5px 10px !important;
        font-size: 0.8rem !important;
    }

    #wristband-page .wristband-actions-toolbar-inner select.form-input.wristband-load-saved-inline-select {
        min-width: min(12rem, 100%);
        max-width: 100%;
    }

    #wristband-page .wristband-actions-toolbar-inner select.form-input.wristband-quick-color-select {
        min-width: 120px;
        max-width: min(200px, 44vw);
    }

    #wristband-page .wristband-actions-download-group {
        flex: 1 1 100%;
        justify-content: stretch;
    }

    #wristband-page .wristband-actions-download-group .wristband-action-btn {
        flex: 1 1 calc(50% - 6px);
        min-width: min(140px, calc(50% - 6px));
    }
}

/* Phone: single column, full-width controls — no off-screen buttons */
@media (max-width: 520px) {
    #wristband-page .wristband-actions-toolbar-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    #wristband-page .wristband-actions-quick-border {
        flex: unset;
        width: 100%;
        justify-content: flex-start;
        gap: 6px;
        padding: 2px 0;
    }

    #wristband-page .wristband-actions-quick-border select.form-input.wristband-quick-color-select {
        flex: 1 1 auto;
        max-width: none;
        min-width: 0;
    }

    #wristband-page .wristband-actions-toolbar-inner > .btn.wristband-action-btn {
        min-height: 36px !important;
        padding: 6px 8px !important;
        font-size: 0.78rem !important;
    }

    #wristband-page #generate-wristband-btn {
        width: 100%;
    }

    #wristband-page .wristband-actions-toolbar-inner select.form-input.wristband-quick-color-select,
    #wristband-page .wristband-actions-toolbar-inner select.form-input.wristband-load-saved-inline-select {
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 36px !important;
        height: 36px !important;
        padding: 5px 28px 5px 10px !important;
        font-size: 16px !important;
    }

    #wristband-page .wristband-actions-download-group {
        flex-direction: column;
        width: 100%;
        gap: 6px;
    }

    #wristband-page .wristband-actions-download-group .wristband-action-btn {
        width: 100%;
        flex: none;
        min-height: 36px !important;
        padding: 6px 8px !important;
        font-size: 0.78rem !important;
    }
}

/* Saved Configs Section */
.wristband-saved-configs {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-items: flex-end;
}

.wristband-saved-configs .form-group {
    flex: 1;
    min-width: 120px;
}

.wristband-saved-configs .btn {
    padding: var(--space-xs) var(--space-sm);
}

/* Load-or-create intro (top) + save name row (above preview) */
.wristband-intro-config-section .wristband-intro-config-load-row {
    align-items: flex-end;
}

.wristband-intro-config-load-help {
    flex: 1 1 100%;
    margin: var(--space-xs) 0 0 0;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* Load Saved Cards — sizing when outside toolbar inherits .form-input; toolbar row uses rule above */
select.wristband-load-saved-inline-select {
    min-width: 12rem;
    max-width: min(100%, 18rem);
    min-height: 40px;
    padding: 6px 12px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--border, #ccc);
    background: var(--surface, #fff);
    color: var(--text-primary, #111);
    box-sizing: border-box;
}

select.wristband-load-saved-inline-select:focus {
    outline: 2px solid var(--sidebar-active, #2563eb);
    outline-offset: 2px;
}

/* ===================================================================
 * PLAY CALL CARDS - MOBILE RESPONSIVE
 * =================================================================== */

@media (max-width: 768px) {
    /* Page header compact */
    #wristband-page .page-header {
        padding: var(--space-sm);
        margin-bottom: var(--space-sm);
    }
    
    #wristband-page .page-header h2 {
        font-size: 1.3rem;
    }
    
    #wristband-page .page-header p {
        font-size: 0.85rem;
        margin-bottom: 0;
    }
    
    /* Settings section compact */
    .wristband-settings-section,
    .wristband-pitch-selection-section {
        padding: var(--space-md);
        margin-bottom: var(--space-md);
    }
    
    .wristband-settings-section h3,
    .wristband-pitch-selection-section h3 {
        font-size: 1rem;
        margin-bottom: var(--space-sm);
    }
    
    .wristband-settings-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }
    
    .wristband-pitch-selection-grid {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .wristband-pitch-selection-grid .form-input {
        min-height: 36px;
        height: 36px;
        padding: 6px 8px;
        font-size: 16px;
        box-sizing: border-box;
    }

    .pitch-type-add-row .btn-compact {
        width: auto !important;
        min-width: 44px;
        height: 36px;
        min-height: 36px !important;
        padding: 4px 10px !important;
    }

    /* Pitch type row — 2-row CSS Grid for tablet (481px – 768px)
       Row 1: [Code 84px] [Description spans 2 cols] …× absolute top-right
       Row 2: [Color 110px] [slider spans 2 cols] */
    .pitch-type-row {
        display: grid;
        grid-template-columns: 84px 110px minmax(0, 1fr);
        grid-template-areas:
            "code  desc  desc"
            "color pct   pct";
        column-gap: 6px;
        row-gap: 6px;
        padding: var(--space-xs);
        padding-right: 44px;
        /* reset flex carry-over from base styles */
        flex-wrap: unset;
        align-items: start;
        position: relative;
    }

    .pitch-type-code-group  { grid-area: code;   flex: unset; order: unset; }
    .pitch-type-desc-group  { grid-area: desc;   flex: unset; min-width: 0; order: unset; overflow: hidden; }
    .pitch-type-color-group { grid-area: color;  flex: unset; order: unset; }
    .pitch-type-pct-group   { grid-area: pct;    flex: unset; order: unset; min-width: 0; }

    .pitch-type-row .form-label {
        font-size: 0.7rem;
        margin-bottom: 2px;
    }

    .pitch-type-row .form-input,
    .pitch-type-row .form-input:not([type="range"]) {
        min-height: 36px !important;
        height: 36px;
        padding: 4px 8px !important;
        font-size: 16px !important; /* prevent iOS zoom */
        box-sizing: border-box;
    }

    .pitch-type-row .pitch-code-input {
        font-size: 16px !important;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-align: center;
        padding-left: var(--space-xs) !important;
        padding-right: var(--space-xs) !important;
    }

    .pitch-color-select {
        font-size: 0.72rem;
        padding: 4px 4px;
        min-height: 36px !important;
        height: 36px;
    }

    .pitch-color-preview {
        height: 14px;
    }

    .pitch-color-custom {
        height: 30px;
    }

    .pitch-pct-slider {
        width: 100% !important;
    }

    .pitch-approx-times {
        font-size: 0.68rem;
        text-align: left;
        white-space: normal;
    }

    /* Remove button — just confirm offsets; base rule already forces position:absolute,
       width:auto, height:30px via !important so nothing here can override it */
    .pitch-type-row .pitch-row-remove-btn.remove-pitch-type-btn,
    .pitch-type-row .pitch-row-remove-btn.remove-offensive-play-btn {
        top: 6px;
        right: 6px;
    }

    /* Pitch Types / Offensive stack: tighten spacing on tablet */
    .wristband-pitch-types-stack {
        gap: var(--space-sm);
        padding-top: var(--space-sm);
    }

    .wristband-clear-pitch-list-btn {
        width: auto;
        min-width: 9rem;
    }

    .wristband-toolbar-block {
        padding: var(--space-sm);
    }

    .wristband-toolbar-title {
        font-size: 0.875rem;
    }

    .wristband-toolbar-help {
        font-size: 0.78rem;
    }

    .wristband-toolbar-primary-btn {
        width: 100%;
        align-self: stretch;
    }

    .wristband-toolbar-buttons {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
    }

    .wristband-toolbar-buttons .btn {
        width: 100%;
    }

    /* Manual entry compact */
    .wristband-manual-entry {
        padding: var(--space-xs) 0;
        margin-bottom: var(--space-sm);
    }
    
    .manual-entry-label {
        font-size: 0.8rem;
    }

    /* 2-column grid for manage-plays buttons so they share rows */
    .manual-entry-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xs);
        width: 100%;
    }

    /* Override inline <style> width:100% so buttons fill their grid cell, not the whole row */
    .manual-entry-buttons .btn {
        width: auto !important;
        min-width: 0;
    }

    .manual-entry-buttons .btn-sm {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
    
    /* Actions toolbar compact */
    .wristband-actions-section {
        padding: var(--space-xs) var(--space-sm);
        margin-bottom: var(--space-md);
    }

    .wristband-actions-toolbar-inner {
        gap: var(--space-xs) 8px;
        row-gap: 8px;
    }

    .wristband-actions-quick-border {
        flex: 1 1 100%;
        justify-content: center;
    }

    .wristband-actions-section .btn {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.9rem;
    }
    
    /* Grid cells compact */
    .wristband-cell {
        font-size: 0.6rem;
        padding: 4px 2px;
        min-height: 22px;
    }
    
    /* Preview sections compact */
    .wristband-grid-section,
    .wristband-coach-sheet-section {
        margin-bottom: var(--space-md);
    }
    
    .wristband-grid-section h3,
    .wristband-coach-sheet-section h3 {
        font-size: 1rem;
        margin-bottom: var(--space-xs);
    }
    
    #wristband-grid-container,
    #wristband-coach-sheet-container {
        padding: var(--space-sm);
    }
}

/* Config section */
.wristband-config-section {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

/* Clear All Settings — red outline button, matches Clear Plays button sizing */
.wristband-reset-all-btn {
    align-self: flex-start;
    width: auto;
    min-width: 9rem;
    margin-top: 0;
    padding: 0.5rem 1.25rem !important;
    min-height: 40px !important;
    font-size: 0.8125rem !important;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: transparent;
    color: var(--danger-color) !important;
    border: 1px solid var(--danger-color) !important;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wristband-reset-all-btn:hover:not(:disabled),
.wristband-reset-all-btn:focus-visible {
    background-color: rgba(196, 30, 58, 0.1);
    color: var(--danger-hover) !important;
    border-color: var(--danger-hover) !important;
    outline: none;
}

.wristband-reset-all-btn:focus-visible {
    outline: 2px solid var(--danger-color);
    outline-offset: 2px;
}

.wristband-reset-all-btn:active:not(:disabled) {
    background-color: rgba(196, 30, 58, 0.14);
}

/* ===================================================================
 * WRISTBAND ACTION BUTTONS (Generate / Download)
 * Compact by default; full-width on mobile via global .btn rule
 * =================================================================== */
.wristband-action-btn {
    padding: 8px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    min-height: 40px;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .wristband-action-btn {
        padding: 7px 16px;
        font-size: 0.9rem;
        min-height: 38px;
    }
}

@media (max-width: 480px) {
    .wristband-action-btn {
        padding: 8px 14px;
        font-size: 0.875rem;
        min-height: 40px;
    }
}

/* ===================================================================
 * WRISTBAND SAVE NUDGE
 * Inline prompt that slides in after card generation.
 * One-tap save with a pre-filled configuration name.
 * =================================================================== */
.wristband-save-nudge {
    position: relative;
    overflow: hidden;
    background: var(--surface);
    border: 1.5px solid var(--sidebar-active);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 10px rgba(149, 0, 0, 0.12);
    margin-bottom: var(--space-lg);
    /* Slide-in from below */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.wristband-save-nudge--visible {
    opacity: 1;
    transform: translateY(0);
}

/* Thin accent line along the left edge */
.wristband-save-nudge::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--sidebar-active);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.wristband-save-nudge-inner {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    padding: 10px var(--space-md) 10px calc(var(--space-md) + 4px); /* 4px offset for accent line */
}

.wristband-save-nudge-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.wristband-save-nudge-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.wristband-save-nudge-input {
    flex: 1;
    min-width: 160px;
    max-width: 360px;
    height: 34px;
    min-height: 34px;
    padding: 4px 10px;
    font-size: 0.875rem;
}

.wristband-save-nudge-actions {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
    flex-shrink: 0;
}

/* Confirm button — override mobile full-width default */
.wristband-save-nudge-confirm-btn {
    white-space: nowrap;
    width: auto !important;
    min-width: auto !important;
}

/* Success overlay — sits on top of the inner content */
.wristband-save-nudge-saved-state {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: rgba(34, 197, 94, 0.12);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.wristband-save-nudge--saved .wristband-save-nudge-saved-state {
    opacity: 1;
    pointer-events: auto;
}

/* Dim the inner content when saved */
.wristband-save-nudge--saved .wristband-save-nudge-inner {
    opacity: 0.25;
    pointer-events: none;
}

.wristband-save-nudge-check {
    font-size: 1.3rem;
    font-weight: 700;
    color: #16a34a;
}

.wristband-save-nudge-saved-label {
    font-size: 1rem;
    font-weight: 700;
    color: #16a34a;
}

/* Saving state — dim and disable */
.wristband-save-nudge--saving .wristband-save-nudge-inner {
    opacity: 0.6;
    pointer-events: none;
}

/* Responsive: stack on mobile */
@media (max-width: 600px) {
    .wristband-save-nudge-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
        padding: 10px var(--space-sm) 10px calc(var(--space-sm) + 4px);
    }

    .wristband-save-nudge-input {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .wristband-save-nudge-actions {
        width: 100%;
    }

    .wristband-save-nudge-actions .btn {
        flex: 1;
    }
}

/* ===================================================================
 * PLAY CALL CARDS - PHONE (≤ 480px)
 * Two-column Card Settings grid + compact CSS Grid for pitch/play rows
 *   Row 1: [code] [description …] [× button]
 *   Row 2: [color dropdown + swatch] [% slider + value]
 * =================================================================== */
@media (max-width: 480px) {

    /* ---- Tighten section padding so rows have more horizontal room ---- */
    .wristband-settings-section,
    .wristband-pitch-selection-section {
        padding: var(--space-sm);       /* 8px instead of 16px */
        margin-bottom: var(--space-sm);
    }

    #wristband-page .wristband-settings-section > h3,
    #wristband-page .wristband-pitch-selection-section > h3 {
        font-size: 0.95rem;
        margin-bottom: var(--space-xs);
    }

    /* ---- Card Settings: 2-column grid on phones ---- */
    .wristband-settings-grid {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    /* Compact form-groups inside the settings grid */
    .wristband-settings-grid .form-group {
        margin-bottom: 0;
    }

    .wristband-settings-grid .form-label {
        font-size: 0.72rem;
        font-weight: 600;
        margin-bottom: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Override global mobile 48px min-height for settings inputs */
    .wristband-settings-grid .form-input {
        min-height: 38px !important;
        height: 38px;
        padding: 6px 8px !important;
        font-size: 16px !important; /* ≥16px prevents iOS zoom */
        box-sizing: border-box;
    }

    /* Pitch selection inputs match card settings height */
    .wristband-pitch-selection-grid .form-input {
        min-height: 38px !important;
        height: 38px;
        padding: 6px 8px !important;
        font-size: 16px !important;
        box-sizing: border-box;
    }

    /* Compact + add button — fixed height, never full-width */
    .pitch-type-add-row .btn-compact {
        width: auto !important;
        min-width: 44px;
        height: 38px;
        min-height: 38px !important;
        padding: 6px 10px !important;
        font-size: 1rem;
        flex-shrink: 0;
    }

    /* Custom size inputs inside settings grid */
    .wristband-settings-grid #wristband-custom-size-container .form-input {
        min-height: 34px !important;
        height: 34px;
        padding: 4px 6px !important;
    }

    /* ---- Saved Configurations: compact 2-row inline layout ---- */
    .wristband-config-section {
        padding-top: var(--space-xs);
    }

    .wristband-config-section h4 {
        font-size: 0.8rem;
        margin-bottom: var(--space-xs);
    }

    /* Row 1: [config name input ── flex] [Save]
       Row 2: [saved configs dropdown ── flex] [Load] [Del]         */
    .wristband-saved-configs {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 5px;
    }

    .wristband-saved-configs .form-group {
        flex: 1 1 55%;
        min-width: 0;
        width: auto;
        margin-bottom: 0;
    }

    .wristband-saved-configs .form-input {
        min-height: 38px !important;
        height: 38px;
        padding: 6px 8px !important;
        font-size: 16px !important;
        width: 100%;
        box-sizing: border-box;
    }

    .wristband-saved-configs .btn {
        flex: 0 0 auto;
        width: auto;
        min-height: 38px !important;
        height: 38px;
        padding: 0 10px !important;
        font-size: 0.82rem;
        align-self: flex-end;
    }

    /* ---- Grid layout for each pitch/play row ---- */
    /* Pixel budget (375px phone, worst case):
       form-container 16px padding → 343px inner
       section 8px padding → 327px inner, minus 2px border = 325px
       pitch-type-row 6px padding → 313px inner, minus 2px border = 311px
       → row1 code(80px) + desc spans 2 cols; row2 color(120px) + slider spans 2 cols  */
    .pitch-type-row {
        display: grid;
        grid-template-columns: 80px minmax(0, 1fr);
        grid-template-areas:
            "code  desc"
            "color pct";
        column-gap: 5px;
        row-gap: 6px;
        padding: 6px;
        padding-right: 42px;
        /* reset flex properties inherited from ≤768px */
        flex-wrap: unset;
        align-items: start;
        position: relative;
    }

    .pitch-type-code-group  { grid-area: code;   flex: unset; order: unset; }
    .pitch-type-desc-group  { grid-area: desc;   flex: unset; min-width: 0; order: unset; overflow: hidden; }
    .pitch-type-color-group { grid-area: color;  flex: unset; order: unset; }
    .pitch-type-pct-group   { grid-area: pct;    flex: unset; order: unset; min-width: 0; }

    /* Remove button: offset only — base !important rules already lock position/size */
    .pitch-type-row .pitch-row-remove-btn.remove-pitch-type-btn,
    .pitch-type-row .pitch-row-remove-btn.remove-offensive-play-btn {
        top: 4px;
        right: 4px;
    }

    /* Compact labels — all-caps micro badge style */
    .pitch-type-row .form-label {
        font-size: 0.6rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-secondary);
        margin-bottom: 2px;
        line-height: 1.2;
    }

    /* Override global mobile 48px min-height for inputs inside pitch rows */
    .pitch-type-row .form-input,
    .pitch-type-row .form-input:not([type="range"]) {
        min-height: 36px !important;
        height: 36px;
        padding: 4px 8px !important;
        font-size: 16px !important; /* ≥16px prevents iOS zoom on focus */
        box-sizing: border-box;
        line-height: 1.2;
    }

    /* Code badge — weight 700 + zero letter-spacing so 5-char codes fit in 80px column
       Available text width: 80px - 4px(border) - 4px(padding) = 72px
       "BNT4H" at 16px/700 ≈ 52px < 72px  ✓                                       */
    .pitch-type-row .pitch-code-input {
        font-size: 16px !important;
        font-weight: 700 !important;
        text-align: center;
        letter-spacing: 0 !important;
        padding-left: 3px !important;
        padding-right: 3px !important;
        height: 38px;
        min-height: 38px !important;
    }

    /* Color group — dropdown full width, preview swatch and custom picker stacked below */
    .pitch-color-select {
        min-height: 32px !important;
        height: 32px;
        padding: 3px 4px !important;
        font-size: 0.8rem !important;
    }

    .pitch-color-preview {
        height: 16px;
        width: 100%;
        flex-shrink: unset;
    }

    .pitch-color-custom {
        height: 30px;
    }

    /* Height 28px ensures the iOS thumb circle (~28px diameter) is contained
       within the element bounds and does not visually overflow into the summary below */
    .pitch-pct-slider {
        width: 100% !important;
        flex: none;
        height: 28px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        accent-color: var(--primary);
    }

    .pitch-times-shown-label {
        font-size: 0.6rem;
        margin-bottom: 2px;
    }

    .pitch-approx-times {
        font-size: 0.65rem;
        margin-top: 3px;
        text-align: left;
        line-height: 1.35;
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Splash Screen Styles */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-in;
}

/* Ensure splash screen is hidden when hidden class is present */
#splash-screen.hidden {
    display: none !important;
}

.splash-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    z-index: 2;
}

.splash-logo {
    width: 280px;
    height: auto;
    max-width: 80%;
    animation: logoZoomIn 2.5s ease-out forwards;
    filter: drop-shadow(0 4px 20px rgba(255, 255, 255, 0.3));
    transform-origin: center center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes logoZoomIn {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }
    100% {
        transform: scale(1.5);
        opacity: 1;
    }
}

/* Fade out animation for splash screen */
#splash-screen.fade-out {
    animation: fadeOut 0.5s ease-out forwards;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Fade-in animation for dashboard after splash screen */
.page.fade-in {
    animation: pageFadeIn 0.5s ease-in forwards;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .splash-logo {
        width: 200px;
    }
}

/* ===================================================================
 * ACCOUNT PAGE
 * =================================================================== */

.account-page {
    width: 100%;
    max-width: 100%;
}

/* Full-width responsive grid — uses available main-content width on desktop */
.account-page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.account-page-layout .account-card {
    margin-bottom: 0;
}

.account-card-span-full {
    grid-column: 1 / -1;
}

.account-page-footer {
    max-width: 28rem;
    scroll-margin-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
}

.account-btn-block {
    width: 100%;
}

.account-subsection-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-md);
}

.account-password-form {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border-color);
}

.account-card-password .account-password-form {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.account-password-requirements {
    margin-top: var(--space-xs);
}

.account-logout-btn {
    max-width: 20rem;
}

/* Account Cards */
.account-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-xl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.account-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.account-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.account-card:hover::before {
    opacity: 1;
}

@media (hover: none) {
    .account-card:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
        transform: none;
    }
}

/* Subscription Card */
.account-card-subscription {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.08) 0%, rgba(147, 51, 234, 0.03) 100%);
    border: 2px solid rgba(147, 51, 234, 0.2);
}

.account-card-subscription::before {
    background: linear-gradient(90deg, #9333ea, #7c3aed);
}

/* Profile Card */
.account-card-profile {
    background: linear-gradient(135deg, rgba(65, 105, 225, 0.08) 0%, rgba(65, 105, 225, 0.03) 100%);
    border: 2px solid rgba(65, 105, 225, 0.2);
}

.account-card-profile::before {
    background: linear-gradient(90deg, var(--primary-color), #5a7fd8);
}

/* Import/Export Card */
.account-card-import-export {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08) 0%, rgba(65, 105, 225, 0.08) 100%);
    border: 2px solid rgba(34, 197, 94, 0.3);
}

.account-card-import-export::before {
    background: linear-gradient(90deg, var(--success-color), var(--primary-color));
}

/* Card Header */
.account-card-header {
    margin-bottom: var(--space-lg);
}

.account-card-header-centered {
    text-align: center;
}

.account-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm);
    letter-spacing: -0.01em;
}

.account-card-description {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

/* Card Content */
.account-card-content {
    margin-bottom: var(--space-md);
}

.account-status-text {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    margin: 0;
}

/* Card Actions */
.account-card-actions {
    margin-top: var(--space-lg);
    margin-bottom: 0;
}

.account-logout-actions {
    margin-top: var(--space-xl);
    margin-bottom: 0;
}

/* Import order instructions */
.import-order-guide {
    background: linear-gradient(135deg, rgba(65, 105, 225, 0.07) 0%, rgba(65, 105, 225, 0.03) 100%);
    border: 1px solid rgba(65, 105, 225, 0.22);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
}

.import-order-guide-title {
    margin: 0 0 var(--space-xs);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
}

.import-order-guide-intro {
    margin: 0 0 var(--space-sm);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

.import-order-steps {
    margin: 0 0 var(--space-sm);
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--text-primary);
}

.import-order-steps li {
    margin-bottom: var(--space-xs);
}

.import-order-steps li:last-child {
    margin-bottom: 0;
}

.import-order-file {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(65, 105, 225, 0.08);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

.import-order-guide-note {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.import-order-steps em {
    color: var(--text-secondary);
    font-style: normal;
    font-size: 0.8125rem;
}

/* Account Form Styles */
.account-profile-form {
    width: 100%;
}

.account-form-row {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.account-form-row-split {
    grid-template-columns: 1fr 1fr;
}

.account-form-row-address {
    grid-template-columns: 2fr 1fr 1fr;
}

.account-form-group {
    display: flex;
    flex-direction: column;
}

.account-form-label {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
    letter-spacing: 0.01em;
}

.account-form-input {
    width: 100%;
    padding: var(--space-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
    background-color: var(--surface);
    color: var(--text-primary);
}

.account-form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(65, 105, 225, 0.1);
}

.account-form-input-readonly {
    background-color: var(--bg-secondary);
    cursor: not-allowed;
    opacity: 0.7;
}

.account-form-input-state {
    text-transform: uppercase;
}

/* Import/Export Section */
.import-export-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.import-export-section {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.import-export-section:hover {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.import-export-section-export {
    border-color: rgba(34, 197, 94, 0.3);
}

.import-export-section-import {
    border-color: rgba(65, 105, 225, 0.3);
}

.import-export-section-title {
    color: var(--text-primary);
    margin: 0 0 var(--space-md);
    font-size: 1.0625rem;
    font-weight: 600;
}

.import-export-section-export .import-export-section-title {
    color: var(--success-color);
}

.import-export-section-import .import-export-section-title {
    color: var(--primary-color);
}

.import-export-section-description {
    color: var(--text-secondary);
    margin-bottom: var(--space-md);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* File Upload Area */
.file-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
    background-color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--space-md);
    transition: all 0.3s ease;
    cursor: pointer;
}

.file-upload-area:hover {
    border-color: var(--primary-color);
    background-color: rgba(65, 105, 225, 0.05);
}

.file-upload-text {
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
    font-size: 0.9375rem;
}

/* Import/Export Files */
.import-export-files {
    margin-bottom: var(--space-md);
}

.import-export-files-title {
    color: var(--text-primary);
    margin-bottom: var(--space-sm);
    font-size: 0.9375rem;
    font-weight: 600;
}

.import-export-file-list {
    margin-bottom: var(--space-sm);
}

.import-export-file-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* Import/Export Status & Progress */
.import-export-status {
    margin-bottom: var(--space-md);
}

.import-export-status p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.import-export-progress {
    margin-bottom: var(--space-md);
}

.import-export-progress-bar {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-sm);
    height: 24px;
    overflow: hidden;
    margin-bottom: var(--space-sm);
    position: relative;
}

.import-export-progress-fill {
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
    border-radius: var(--radius-sm);
}

.import-export-progress-text {
    color: var(--text-secondary);
    text-align: center;
    font-size: 0.9375rem;
    margin: 0;
}

/* Import/Export Results */
.import-export-results {
    margin-top: var(--space-md);
}

.import-export-result {
    margin-bottom: var(--space-sm);
    font-size: 0.9375rem;
    font-weight: 500;
}

.import-export-result-success {
    color: var(--success-color);
}

.import-export-result-error {
    color: var(--danger-color);
}

.import-export-result-details {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
}

/* Account Message */
.account-message {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Tablet: single-column stack; import/export stays two columns inside its card */
@media (min-width: 768px) and (max-width: 1023px) {
    .account-page-layout {
        grid-template-columns: 1fr;
    }

    .account-form-row-address {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .import-export-container {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop: full-width subscription, two-column user row, full-width import/export */
@media (min-width: 1024px) {
    .account-page-layout {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-xl);
    }

    .account-card-subscription {
        padding: var(--space-md) var(--space-xl);
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: var(--space-xs) var(--space-xl);
        align-items: center;
    }

    .account-card-subscription .account-card-header {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: 0;
    }

    .account-card-subscription .account-card-content {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: 0;
    }

    .account-card-subscription .account-card-actions {
        grid-column: 2;
        grid-row: 1 / -1;
        margin-top: 0;
        align-self: center;
        min-width: 14rem;
    }

    .account-card-subscription .account-card-description {
        font-size: 0.875rem;
        line-height: 1.4;
    }

    .account-card-subscription #subscription-message {
        grid-column: 1 / -1;
    }

    .account-card {
        padding: var(--space-xl);
    }

    .account-card-title {
        font-size: 1.375rem;
    }

    .import-export-container {
        grid-template-columns: 1fr 1.35fr;
        gap: var(--space-xl);
    }

    .import-export-section {
        padding: var(--space-xl);
    }

    .account-page-footer {
        max-width: 16rem;
    }
}

/* Large monitors: wider import column */
@media (min-width: 1400px) {
    .import-export-container {
        grid-template-columns: minmax(280px, 1fr) minmax(0, 1.5fr);
    }
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    #account-page .account-page-layout {
        padding-bottom: calc(var(--space-xl) + var(--space-lg) + env(safe-area-inset-bottom, 0px));
    }

    .account-card {
        padding: var(--space-lg);
    }
    
    .account-card-title {
        font-size: 1.25rem;
    }
    
    .account-card-description {
        font-size: 0.875rem;
    }
    
    .account-form-row-split,
    .account-form-row-address {
        grid-template-columns: 1fr;
    }
    
    .import-export-container {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
    
    .import-export-section {
        padding: var(--space-md);
    }
    
    .account-form-input {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: var(--space-md) var(--space-lg);
        min-height: 48px;
    }
    
    .file-upload-area {
        padding: var(--space-md);
    }
    
    .account-card-actions,
    .account-logout-actions {
        margin-top: var(--space-md);
    }

    .account-page-footer {
        max-width: none;
        margin-bottom: calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    .account-logout-btn {
        max-width: none;
    }
}

/* Landscape phones: keep logout clear of fixed footer */
@media (max-width: 1023px) and (orientation: landscape) {
    #account-page .account-page-layout {
        padding-bottom: calc(var(--space-xl) + var(--space-lg) + env(safe-area-inset-bottom, 0px));
    }

    .account-page-footer {
        margin-bottom: calc(var(--space-lg) + env(safe-area-inset-bottom, 0px));
    }
}

/* ===================================================================
   Pitch Call Analysis — ALL / LH / RH batter filter (phone layout)
   =================================================================== */

.pca-batter-hand-row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
}

.pca-batter-hand-label {
    flex-shrink: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #950000;
    white-space: nowrap;
}

.pca-batter-hand-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.2rem;
    min-width: 0;
    flex: 1 1 0;
}

.pca-batter-hand-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.2rem 0.15rem !important;
    font-size: 0.6875rem !important;
    line-height: 1.15 !important;
    border: 2px solid #950000 !important;
    box-sizing: border-box;
}

/* Phones: give the batter row a full line so three buttons can share width */
@media (max-width: 479px) {
    .pca-pitch-call-toolbar .pca-batter-hand-row {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .pca-batter-hand-buttons {
        flex: 1 1 auto;
        gap: 0.15rem;
    }

    .pca-batter-hand-btn {
        padding: 0.18rem 0.1rem !important;
        font-size: 0.625rem !important;
    }
}

/* Larger handsets / tablets: slightly roomier tap targets, natural button width on wide toolbars */
@media (min-width: 480px) {
    .pca-batter-hand-btn {
        flex: 0 0 auto;
        min-width: auto;
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    .pca-batter-hand-buttons {
        flex: 0 1 auto;
        gap: 0.375rem;
    }
}

/* ===================================================================
 * NAV CARD HARMONIZATION — DASHBOARD / REPORTS / GAMES
 * ===================================================================
 * Keeps navigation card grids consistent in size, spacing, and layout
 * across all three landing pages on tablet, laptop, and desktop.
 * Mobile (≤767px) is intentionally unaffected.
 * =================================================================== */

/* Games page nav card wrapper — transparent on mobile, card-styled on tablet+ */
.games-nav-card {
    width: 100%;
}

@media (min-width: 768px) {
    .games-nav-card {
        /* games-container is a CSS grid; span all columns so the nav wrapper fills the full row */
        grid-column: 1 / -1;
        background-color: var(--surface);
        border-radius: var(--radius-lg);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        padding: var(--space-xl);
        margin-bottom: var(--space-lg);
    }
}

/* Desktop/laptop (1024px+): enforce 2-column layout, constrain width, tune card sizing */
@media (min-width: 1024px) {
    .reports-button-grid {
        grid-template-columns: repeat(2, 1fr);
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
    }

    /* When the last nav card is alone on a row (odd total count), keep it half-width */
    .reports-button-grid > .report-card-btn:last-child:nth-child(odd) {
        grid-column: 1 / 2;
    }

    .report-card-btn {
        min-height: 100px;
        padding: var(--space-lg) var(--space-xl);
    }

    .report-card-icon {
        width: 52px;
        height: 52px;
        font-size: 2rem;
    }

    .report-card-title {
        font-size: 1.125rem;
    }

    .report-card-desc {
        font-size: 0.8125rem;
    }
}

/**
 * Support Chat (RAG assistant)
 */

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

.support-chat-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.support-chat-panel.support-chat-disabled .support-chat-form {
    opacity: 0.55;
    pointer-events: none;
}

.support-chat-messages {
    min-height: 220px;
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-sm);
    background: var(--background, #f8fafc);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}

.support-chat-message {
    max-width: 92%;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    line-height: 1.5;
}

.support-chat-message-user {
    align-self: flex-end;
    background: rgba(65, 105, 225, 0.12);
    border: 1px solid rgba(65, 105, 225, 0.25);
}

.support-chat-message-assistant {
    align-self: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
}

.support-chat-message-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
}

.support-chat-message-body {
    color: var(--text-primary);
    font-size: 0.95rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.support-chat-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.support-chat-input {
    width: 100%;
    min-height: 72px;
    resize: vertical;
    padding: var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
}

.support-chat-input:focus {
    outline: 2px solid rgba(65, 105, 225, 0.35);
    border-color: var(--sidebar-active);
}

.support-chat-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.support-chat-typing {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-style: italic;
}

.support-chat-unavailable {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.support-chat-disclaimer {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.support-chat-disclaimer a,
.support-chat-unavailable a {
    color: var(--sidebar-active);
}

.support-chat-widget {
    position: fixed;
    right: var(--space-lg, 1.25rem);
    bottom: var(--space-lg, 1.25rem);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-md, 1rem);
    pointer-events: none;
}

.support-chat-widget.hidden {
    display: none !important;
    pointer-events: none;
}

.support-chat-widget > * {
    pointer-events: auto;
}

.support-chat-fab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    padding: var(--space-sm, 0.5rem) var(--space-lg, 1.25rem) var(--space-sm, 0.5rem) var(--space-sm, 0.5rem);
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #b81111 0%, #950000 100%);
    color: #fff;
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(149, 0, 0, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.support-chat-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(149, 0, 0, 0.45);
}

.support-chat-fab:focus-visible {
    outline: 3px solid rgba(149, 0, 0, 0.45);
    outline-offset: 2px;
}

.support-chat-fab-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    flex-shrink: 0;
    line-height: 1;
}

.support-chat-drawer {
    width: min(380px, calc(100vw - 2rem));
    max-height: min(560px, calc(100vh - 6rem));
    display: none;
    flex-direction: column;
    background: var(--surface, #fff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18);
    overflow: hidden;
}

.support-chat-drawer.is-open {
    display: flex;
}

.support-chat-drawer.hidden {
    display: none !important;
}

.support-chat-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: linear-gradient(135deg, #b81111 0%, #950000 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.support-chat-drawer-heading {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    min-width: 0;
}

.support-chat-drawer-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.support-chat-drawer-heading-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
}

.support-chat-drawer-header h3 {
    margin: 0;
    font-size: 1.05rem;
    color: #fff;
}

.support-chat-drawer-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
}

.support-chat-drawer-close {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.support-chat-drawer-close:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.support-chat-drawer-panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-height: none;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.support-chat-drawer-panel .support-chat-messages {
    min-height: 200px;
    max-height: 300px;
}

@media (max-width: 640px) {
    .support-chat-messages {
        min-height: 240px;
        max-height: 60vh;
    }

    .support-chat-drawer-panel .support-chat-messages {
        min-height: 320px;
        max-height: 60vh;
    }

    .support-chat-actions {
        flex-direction: row;
        justify-content: flex-end;
    }

    .support-chat-actions .btn:not(.btn-selection):not(.btn-xs):not(.btn-sm):not(.btn-compact) {
        flex: 0 0 auto;
        width: auto;
        min-width: 88px;
        padding-left: var(--space-md, 1rem);
        padding-right: var(--space-md, 1rem);
    }

    .support-chat-widget {
        right: var(--space-md, 1rem);
        bottom: var(--space-md, 1rem);
    }

    .support-chat-widget.support-chat-widget--lifted {
        bottom: calc(6.75rem + env(safe-area-inset-bottom, 0px));
    }

    .support-chat-fab-label {
        display: none;
    }

    .support-chat-fab {
        width: 56px;
        height: 56px;
        padding: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .support-chat-drawer {
        width: calc(100vw - 1.5rem);
        max-height: calc(100vh - 5rem);
    }
}

/* ===================================================================
   FIELD WHITEBOARD
   =================================================================== */

.whiteboard-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-md) var(--space-xl);
}

.whiteboard-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-sm);
}

.whiteboard-field-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.whiteboard-control-label {
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: var(--space-xs);
}

.whiteboard-field-btn {
    padding: var(--space-xs) var(--space-md);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.whiteboard-field-btn:hover {
    border-color: var(--primary-color);
}

.whiteboard-field-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.whiteboard-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

.whiteboard-tracer-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-right: var(--space-xs);
    cursor: pointer;
    user-select: none;
}

.whiteboard-tracer-toggle input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.whiteboard-clear-btn {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.whiteboard-hint {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 var(--space-md);
}

.whiteboard-workspace {
    display: grid;
    grid-template-columns: minmax(76px, 92px) minmax(0, 1fr) minmax(76px, 92px);
    gap: var(--space-sm);
    align-items: stretch;
}

.whiteboard-sidebar {
    padding: var(--space-sm);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    align-self: stretch;
}

.whiteboard-sidebar--left {
    justify-content: flex-start;
}

.whiteboard-sidebar--right {
    justify-content: flex-start;
}

.whiteboard-center {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.whiteboard-palette-section {
    margin-bottom: var(--space-sm);
}

.whiteboard-palette-section:last-child {
    margin-bottom: 0;
}

.whiteboard-palette-heading {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sidebar-active);
    margin: 0 0 var(--space-xs);
    text-align: center;
}

.whiteboard-palette-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.whiteboard-palette-stack--balls {
    gap: var(--space-sm);
}

.whiteboard-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    width: 100%;
    padding: var(--space-xs);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    transition: all 0.15s ease;
    touch-action: manipulation;
}

.whiteboard-tool-btn:hover {
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.whiteboard-tool-btn.active {
    border-color: var(--primary-color);
    background: rgba(30, 58, 95, 0.12);
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.2);
}

.whiteboard-tool-btn--position {
    background: linear-gradient(180deg, #e8f0fe 0%, #d2e3fc 100%);
}

.whiteboard-tool-btn--runner {
    background: linear-gradient(180deg, #fce8e8 0%, #f5c6c6 100%);
}

.whiteboard-tool-btn--batter {
    background: linear-gradient(180deg, #ede9fe 0%, #ddd6fe 100%);
}

.whiteboard-tool-num {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1;
    color: #1e3a5f;
}

.whiteboard-tool-abbr {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e3a5f;
    line-height: 1;
}

.whiteboard-tool-runner-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #950000;
    line-height: 1;
}

.whiteboard-tool-batter-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b46c1;
    line-height: 1;
}

.whiteboard-ball-emoji {
    font-size: 1.35rem;
    line-height: 1;
    flex-shrink: 0;
}

.whiteboard-ball-emoji--on-field {
    font-size: var(--wb-marker-ball, 16px);
}

.whiteboard-canvas-wrap {
    padding: var(--space-xs);
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whiteboard-canvas {
    position: relative;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 1892 / 1920;
    touch-action: none;
    user-select: none;
    cursor: crosshair;
}

.whiteboard-field-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    border-radius: var(--radius-md);
    pointer-events: none;
}

.whiteboard-tracers-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.whiteboard-markers-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}

.whiteboard-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: var(--wb-marker-border, 2px) solid transparent;
    border-radius: 50%;
    padding: 0;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    z-index: 2;
    transition: box-shadow 0.12s ease, border-color 0.12s ease;
    box-sizing: border-box;
}

.whiteboard-marker:active {
    cursor: grabbing;
}

.whiteboard-marker--position {
    width: var(--wb-marker-position, 28px);
    height: var(--wb-marker-position, 28px);
    font-size: calc(var(--wb-marker-position, 28px) * 0.26 * var(--wb-marker-font-scale, 1));
    background: linear-gradient(180deg, #4a7ab8 0%, #1e3a5f 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(30, 58, 95, 0.35);
}

.whiteboard-marker--runner {
    width: var(--wb-marker-runner, 26px);
    height: var(--wb-marker-runner, 26px);
    font-size: calc(var(--wb-marker-runner, 26px) * 0.26 * var(--wb-marker-font-scale, 1));
    background: #950000;
    color: #fff;
    box-shadow: 0 2px 6px rgba(149, 0, 0, 0.35);
}

.whiteboard-marker--batter {
    width: var(--wb-marker-batter, 26px);
    height: var(--wb-marker-batter, 26px);
    font-size: calc(var(--wb-marker-batter, 26px) * 0.26 * var(--wb-marker-font-scale, 1));
    background: linear-gradient(180deg, #9f7aea 0%, #6b46c1 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(107, 70, 193, 0.35);
}

.whiteboard-marker--ball-baseball,
.whiteboard-marker--ball-softball {
    width: var(--wb-marker-ball, 16px);
    height: var(--wb-marker-ball, 16px);
    background: transparent;
    box-shadow: none;
    border: none;
}

.whiteboard-marker--selected {
    border-color: #fff;
    box-shadow: 0 0 0 calc(var(--wb-marker-border, 2px) + 1px) var(--primary-color), 0 3px 10px rgba(0, 0, 0, 0.25);
    z-index: 4;
}

.whiteboard-marker-num {
    font-weight: 800;
    line-height: 1;
}

.whiteboard-marker-abbr {
    font-size: 1em;
    font-weight: 700;
    line-height: 1;
}

.whiteboard-marker-runner,
.whiteboard-marker-batter {
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 900px) {
    .whiteboard-workspace {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
    }

    .whiteboard-sidebar--left {
        order: 1;
    }

    .whiteboard-sidebar--right {
        order: 2;
    }

    .whiteboard-center {
        order: 3;
    }

    .whiteboard-sidebar--left,
    .whiteboard-sidebar--right {
        flex-direction: column;
        align-items: stretch;
        padding: var(--space-sm) var(--space-md);
    }

    .whiteboard-sidebar--right {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-sm);
        align-items: start;
    }

    .whiteboard-sidebar--left .whiteboard-palette-heading,
    .whiteboard-sidebar--right .whiteboard-palette-heading {
        width: 100%;
        text-align: left;
    }

    .whiteboard-sidebar--left .whiteboard-palette-stack {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: var(--space-xs);
    }

    .whiteboard-sidebar--right .whiteboard-palette-section {
        margin-bottom: 0;
        min-width: 0;
    }

    .whiteboard-sidebar--right .whiteboard-palette-stack {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: var(--space-xs);
    }

    .whiteboard-sidebar--right .whiteboard-tool-btn {
        flex: 1 1 calc(50% - var(--space-xs));
        min-width: 44px;
    }

    .whiteboard-sidebar--right #whiteboard-runners-palette .whiteboard-tool-btn {
        flex: 1 1 calc(33.333% - var(--space-xs));
    }

    .whiteboard-sidebar--right #whiteboard-batters-palette .whiteboard-tool-btn {
        flex: 1 1 100%;
    }

    .whiteboard-tool-btn {
        width: auto;
        min-width: 0;
        min-height: 44px;
    }
}

@media (max-width: 767px) {
    .whiteboard-container {
        padding: 0 var(--space-sm) var(--space-lg);
    }

    .whiteboard-controls {
        display: flex;
        flex-direction: column;
        gap: var(--space-sm);
        padding: var(--space-sm);
    }

    .whiteboard-field-toggle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xs);
        width: 100%;
        padding: var(--space-sm);
        background: var(--background);
        border-radius: var(--radius-md);
    }

    .whiteboard-control-label {
        grid-column: 1 / -1;
        margin: 0 0 var(--space-xs);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-secondary);
    }

    .whiteboard-field-btn {
        width: 100%;
        padding: var(--space-sm) var(--space-xs);
        font-size: 0.85rem;
        text-align: center;
    }

    .whiteboard-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-xs);
        width: 100%;
    }

    .whiteboard-tracer-toggle {
        grid-column: 1 / -1;
        justify-content: center;
        margin: 0;
        padding: var(--space-sm);
        font-size: 0.82rem;
        background: var(--background);
        border-radius: var(--radius-md);
    }

    .whiteboard-actions .btn {
        width: 100%;
        margin: 0;
        padding: var(--space-sm) var(--space-xs);
        font-size: 0.72rem;
        line-height: 1.2;
        min-height: 40px;
        white-space: normal;
    }

    #whiteboard-reset-layout-btn {
        grid-column: span 1;
    }

    #whiteboard-clear-btn {
        grid-column: span 2;
    }

    .whiteboard-hint {
        font-size: 0.82rem;
        margin-bottom: var(--space-sm);
        padding: 0 var(--space-xs);
    }

    .whiteboard-sidebar--left .whiteboard-palette-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ===================================================================
 * LINEUP EDITOR MODAL
 * Wider on desktop/laptop for batter Name; compact phone layout.
 * Tablet (768–1023px) keeps the default mid-size layout.
 * =================================================================== */

.lineup-editor-shell .lineup-editor-modal-content {
    width: 92%;
    max-width: 720px;
    min-width: 0;
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Match Dashboard Opposing Rosters card (#1e1e1e) */
.lineup-editor-shell .modal-header {
    background-color: #1e1e1e;
    color: #ffffff;
    border-bottom: none;
}

.lineup-editor-shell .modal-header h3 {
    color: #ffffff;
}

.lineup-editor-shell .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.lineup-editor-shell .lineup-editor-batters-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
}

.lineup-editor-shell .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-sm);
    width: 100%;
    box-sizing: border-box;
}

/* Keep Add Batter / Save Roster / Cancel identical height across variants */
.lineup-editor-shell .form-actions .btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    padding: 0 1rem;
    font-size: 0.875rem;
    line-height: 1.2;
    border-width: 2px;
    border-style: solid;
    white-space: nowrap;
    flex: 0 1 auto;
}

.lineup-editor-shell .form-actions .btn.btn-primary,
.lineup-editor-shell .form-actions .btn.btn-success {
    border-color: transparent;
}

.lineup-editor-shell .form-actions .btn.btn-primary {
    border-color: var(--primary-color);
}

.lineup-editor-shell .form-actions .btn.btn-success {
    border-color: #28a745;
}

.lineup-editor-shell .lineup-editor-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 60px 68px 108px;
    gap: var(--space-sm);
    align-items: end;
    margin-bottom: var(--space-sm);
}

/* Create Roster has no Scout button, so the action column only needs the ✕ */
.lineup-editor-shell .lineup-editor-batters--no-scout .lineup-editor-row {
    grid-template-columns: minmax(0, 1fr) 60px 68px 44px;
}

.lineup-editor-shell .lineup-editor-field {
    min-width: 0;
}

.lineup-editor-shell .lineup-editor-field--name {
    min-width: 0;
}

.lineup-editor-shell .lineup-editor-field-label {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    display: block;
}

/* Right-justify Stance so Jersey / Stance labels separate on narrow screens */
.lineup-editor-shell .lineup-editor-field--stance .lineup-editor-field-label {
    text-align: right;
}

/* Keep Name, Jersey #, and Stance the same control height */
.lineup-editor-shell .lineup-editor-row .form-input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    max-height: 44px;
    line-height: 1.25;
}

.lineup-editor-shell .lineup-order-input,
.lineup-editor-shell .lineup-jersey-input {
    padding: 0.35rem 0.3rem;
    text-align: center;
    overflow: visible;
    -moz-appearance: textfield;
    appearance: textfield;
}

.lineup-editor-shell .lineup-jersey-input::-webkit-outer-spin-button,
.lineup-editor-shell .lineup-jersey-input::-webkit-inner-spin-button,
.lineup-editor-shell .lineup-order-input::-webkit-outer-spin-button,
.lineup-editor-shell .lineup-order-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.lineup-editor-shell .lineup-editor-field--remove {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 0.35rem;
}

.lineup-editor-shell .lineup-editor-field--remove .btn {
    min-height: 36px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.lineup-editor-shell .lineup-editor-remove-btn {
    min-width: 34px;
    flex: 0 0 auto;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
}

/* Native select stays clickable; hide chevron and center LH/RH without clipping */
.lineup-editor-shell .lineup-stance-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--surface);
    background-image: none;
    /* Zero vertical padding — fixed height + padding was clipping LH/RH */
    padding-block: 0;
    padding-inline: 0.25rem;
    line-height: 40px; /* 44px height − 2px borders */
    text-align: center;
    text-align-last: center;
    overflow: hidden;
}

.lineup-editor-shell .lineup-stance-input option {
    text-align: center;
}

/* Desktop / laptop: give Name a wide readable column */
@media (min-width: 1024px) {
    .lineup-editor-shell .lineup-editor-modal-content {
        width: min(92vw, 820px) !important;
        max-width: 820px !important;
        min-width: 640px !important;
        max-height: min(90vh, 920px);
    }

    .lineup-editor-shell .lineup-editor-row {
        grid-template-columns: minmax(300px, 1fr) 66px 74px 112px;
        gap: var(--space-md);
    }

    .lineup-editor-shell .lineup-editor-batters--no-scout .lineup-editor-row {
        grid-template-columns: minmax(300px, 1fr) 66px 74px 44px;
    }

    .lineup-editor-shell .lineup-name-input {
        font-size: 1rem;
    }

    .lineup-editor-shell .form-actions .btn {
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        font-size: 0.875rem;
        padding: 0 1.1rem;
    }
}

/* Tablets: keep three equal-height footer buttons in one row when space allows */
@media (min-width: 768px) and (max-width: 1023px) {
    .lineup-editor-shell .lineup-editor-modal-content {
        width: min(94vw, 720px) !important;
        max-width: 720px !important;
        min-width: 0 !important;
        max-height: min(92vh, 860px);
    }

    .lineup-editor-shell .lineup-editor-row {
        grid-template-columns: minmax(0, 1fr) 56px 64px 100px;
        gap: var(--space-sm);
    }

    .lineup-editor-shell .lineup-editor-batters--no-scout .lineup-editor-row {
        grid-template-columns: minmax(0, 1fr) 56px 64px 44px;
    }

    .lineup-editor-shell .form-actions {
        flex-wrap: nowrap;
    }

    .lineup-editor-shell .form-actions .btn {
        flex: 1 1 0;
        min-width: 0;
        height: 44px;
        min-height: 44px;
        max-height: 44px;
        font-size: 0.85rem;
        padding: 0 0.75rem;
    }
}

/* Smartphones: prioritize Name; tighten # / Stance; equal-height footer buttons */
@media (max-width: 767px) {
    .lineup-editor-shell .lineup-editor-modal-content {
        width: 96% !important;
        max-width: 96% !important;
        min-width: 0 !important;
        max-height: min(94vh, 100%);
    }

    .lineup-editor-shell .modal-header h3 {
        font-size: 0.95rem !important;
    }

    .lineup-editor-shell .modal-body {
        padding: var(--space-sm) !important;
        font-size: 0.85rem;
    }

    .lineup-editor-shell .form-label {
        font-size: 0.75rem;
    }

    .lineup-editor-shell .form-input {
        font-size: 0.8rem;
        padding: 0.4rem 0.45rem;
    }

    .lineup-editor-shell .lineup-editor-row .form-input {
        height: 40px;
        min-height: 40px;
        max-height: 40px;
    }

    .lineup-editor-shell .lineup-editor-batters-header .form-label {
        font-size: 0.8rem;
    }

    .lineup-editor-shell .lineup-editor-row {
        grid-template-columns: minmax(0, 1fr) 40px 58px 52px;
        gap: 0.35rem;
        margin-bottom: 0.55rem;
    }

    .lineup-editor-shell .lineup-editor-batters--no-scout .lineup-editor-row {
        grid-template-columns: minmax(0, 1fr) 40px 58px 34px;
    }

    /* Narrow screens: stack Scout over Delete so Name keeps its width */
    .lineup-editor-shell .lineup-editor-field--remove {
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
    }

    .lineup-editor-shell .lineup-editor-field--remove .btn {
        width: 100%;
        min-height: 28px;
        font-size: 0.7rem;
        padding: 0.2rem 0.25rem;
    }

    .lineup-editor-shell .lineup-editor-field-label {
        font-size: 0.65rem;
        margin-bottom: 0.15rem;
    }

    .lineup-editor-shell .lineup-order-input,
    .lineup-editor-shell .lineup-jersey-input {
        padding: 0.3rem 0.2rem;
        font-size: 0.8rem;
        text-align: center;
    }

    .lineup-editor-shell .lineup-stance-input {
        padding-block: 0;
        padding-inline: 0.15rem;
        line-height: 36px; /* 40px height − 2px borders */
        font-size: 0.75rem;
        text-align: center;
        text-align-last: center;
        background-image: none;
    }

    .lineup-editor-shell .lineup-name-input {
        font-size: 0.8rem;
    }

    .lineup-editor-shell .lineup-editor-remove-btn {
        min-width: 0;
    }

    /* Override global mobile .form-actions 2-col grid so heights stay equal */
    .lineup-editor-shell .form-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
        align-items: stretch;
        margin-top: var(--space-md);
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .lineup-editor-shell .form-actions .btn {
        width: 100%;
        max-width: 100%;
        margin: 0;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        font-size: 0.85rem !important;
        padding: 0 0.65rem !important;
        line-height: 1.2;
    }

    /* Cancel spans full width under Add Batter + Save Roster */
    .lineup-editor-shell .form-actions .btn:last-child {
        grid-column: 1 / -1;
    }
}

.lineup-editor-shell {
    z-index: 1010;
}

/* ===================================================================
 * GAME LINEUP MODAL (live game)
 * View in-game batting lines by default; Edit Lineup for identity edits.
 * Wider than the default modal so Spot / Jersey / Name / Stance / Line fit.
 * =================================================================== */

#view-game-lineup-modal .game-lineup-modal-content {
    width: min(94vw, 920px);
    max-width: 920px;
    min-width: 0;
    max-height: min(92vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#view-game-lineup-modal .modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.game-lineup-modal-help {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0 0 var(--space-md);
}

.game-lineup-empty {
    color: var(--text-secondary);
    margin: 0;
}

.game-lineup-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-xs));
    padding: 0 var(--space-xs);
}

.game-lineup-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: auto;
}

.game-lineup-table th,
.game-lineup-table td {
    padding: 0.5rem 0.55rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

.game-lineup-table thead th {
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.game-lineup-cell--spot {
    white-space: nowrap;
    width: 1%;
}

.game-lineup-cell--jersey {
    width: 4.75rem;
}

.game-lineup-cell--name {
    min-width: 7rem;
}

.game-lineup-cell--stance {
    width: 5.5rem;
    min-width: 5.5rem;
}

.game-lineup-cell--line {
    min-width: 9.5rem;
}

.game-lineup-cell--empty {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.game-lineup-cell--remove {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.lineup-edit-remove-btn {
    min-width: 4.5rem;
    padding: 0.25rem 0.55rem;
    color: var(--danger-color);
    border-color: var(--danger-color);
    background: transparent;
}

.lineup-edit-remove-btn:hover:not(:disabled) {
    color: var(--danger-hover);
    border-color: var(--danger-hover);
    background: transparent;
}

.add-live-batter-hint,
#add-live-batter-manual-hint {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.4;
    margin: 0 0 var(--space-sm);
}

#add-live-batter-or-divider,
.form-or-divider {
    color: var(--text-secondary);
    font-size: 0.8125rem;
    text-align: center;
    margin: 0 0 var(--space-sm);
    text-transform: lowercase;
}

.game-lineup-table .lineup-edit-jersey,
.game-lineup-table .lineup-edit-name,
.game-lineup-table .lineup-edit-stance {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.game-lineup-table .lineup-edit-jersey {
    width: 4.5rem;
    text-align: center;
}

/* Keep LH / RH / TBD fully visible next to the select chevron */
.game-lineup-table .lineup-edit-stance {
    min-width: 5.25rem;
    padding: 0.25rem 1.7rem 0.25rem 0.45rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
    background-size: 12px 12px;
    line-height: 1.2;
    overflow: visible;
    white-space: nowrap;
    text-overflow: clip;
}

#view-game-lineup-modal.game-lineup-modal--editing .game-lineup-cell--stance {
    width: 6.5rem;
    min-width: 6.5rem;
}

#view-game-lineup-modal.game-lineup-modal--editing .game-lineup-cell--line,
#view-game-lineup-modal.game-lineup-modal--editing .game-lineup-table thead th.game-lineup-cell--line {
    display: none;
}

#view-game-lineup-modal:not(.game-lineup-modal--editing) .game-lineup-cell--remove {
    display: none;
}

.lineup-edit-row--current {
    background: rgba(65, 105, 225, 0.08);
}

.game-lineup-batting-line {
    display: inline-block;
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.12rem 0.55rem;
    border: 1px solid #000;
    border-radius: 0;
    color: #000;
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 1.35;
    white-space: nowrap;
}

.game-lineup-batting-line--empty {
    border: none;
    padding: 0;
    font-weight: 400;
    color: var(--text-secondary);
}

.game-lineup-modal-actions {
    margin-top: var(--space-md);
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

#view-game-lineup-modal .game-lineup-modal-actions .btn.hidden {
    display: none !important;
}

#view-game-lineup-modal #btn-cancel-lineup-edits {
    background-color: transparent;
    color: var(--danger-color);
    border-color: var(--danger-color);
}

#view-game-lineup-modal #btn-cancel-lineup-edits:hover:not(:disabled) {
    background-color: transparent;
    color: var(--danger-hover);
    border-color: var(--danger-hover);
}

#view-game-lineup-modal {
    z-index: 1005;
}

#add-live-batter-modal {
    z-index: 1015;
}

@media (min-width: 1024px) {
    #view-game-lineup-modal .game-lineup-modal-content {
        width: min(92vw, 920px) !important;
        max-width: 920px !important;
        min-width: 680px !important;
        max-height: min(90vh, 920px);
    }

    .game-lineup-table {
        font-size: 0.9375rem;
    }

    .game-lineup-batting-line {
        font-size: 0.9375rem;
        padding: 0.15rem 0.65rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    #view-game-lineup-modal .game-lineup-modal-content {
        width: min(94vw, 840px) !important;
        max-width: 840px !important;
        min-width: 0 !important;
        max-height: min(92vh, 860px);
    }
}

@media (max-width: 767px) {
    #view-game-lineup-modal .game-lineup-modal-content {
        width: 96% !important;
        max-width: 96% !important;
        min-width: 0 !important;
        max-height: 92vh !important;
        height: auto !important;
    }

    #view-game-lineup-modal .modal-body {
        overflow-y: auto !important;
        max-height: none !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
    }

    .game-lineup-modal-help {
        font-size: 0.8rem;
        margin-bottom: var(--space-sm);
    }

    #view-game-lineup-modal .game-lineup-modal-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
        margin-top: var(--space-sm);
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #view-game-lineup-modal .game-lineup-modal-actions .btn {
        width: 100%;
        max-width: 100%;
        margin: 0;
        min-height: 44px;
        white-space: normal;
        line-height: 1.25;
    }

    #view-game-lineup-modal #btn-cancel-lineup-edits {
        margin-left: 0;
    }
}

@media (max-width: 767px) and (orientation: portrait) {
    .game-lineup-table-scroll {
        overflow-x: visible;
        margin: 0;
        padding: 0;
    }

    #view-game-lineup-modal .game-lineup-table,
    #view-game-lineup-modal .game-lineup-table thead,
    #view-game-lineup-modal .game-lineup-table tbody,
    #view-game-lineup-modal .game-lineup-table tr {
        display: block;
        width: 100%;
    }

    #view-game-lineup-modal .game-lineup-table thead {
        display: none;
    }

    #view-game-lineup-modal .game-lineup-table tr.lineup-edit-row {
        display: grid;
        grid-template-columns: auto minmax(3.25rem, auto) minmax(0, 1fr) minmax(5.75rem, auto);
        grid-template-areas:
            "spot jersey name stance"
            "line line line line";
        gap: 0.35rem 0.5rem;
        padding: 0.65rem 0.15rem;
        border-bottom: 1px solid var(--border-color);
        box-sizing: border-box;
    }

    #view-game-lineup-modal .game-lineup-table tr.lineup-edit-row--unfilled {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "spot empty"
            "line line";
    }

    #view-game-lineup-modal .game-lineup-table th,
    #view-game-lineup-modal .game-lineup-table td {
        padding: 0;
        border-bottom: none;
        width: auto;
        min-width: 0;
    }

    #view-game-lineup-modal .game-lineup-cell--spot { grid-area: spot; font-weight: 600; }
    #view-game-lineup-modal .game-lineup-cell--jersey { grid-area: jersey; }
    #view-game-lineup-modal .game-lineup-cell--name { grid-area: name; }
    #view-game-lineup-modal .game-lineup-cell--stance { grid-area: stance; }
    #view-game-lineup-modal .game-lineup-cell--line { grid-area: line; }
    #view-game-lineup-modal .game-lineup-cell--empty { grid-area: empty; }
    #view-game-lineup-modal .game-lineup-cell--remove { grid-area: remove; text-align: right; }

    .game-lineup-batting-line {
        white-space: normal;
        font-size: 0.8125rem;
    }

    #view-game-lineup-modal.game-lineup-modal--editing .game-lineup-table tr.lineup-edit-row:not(.lineup-edit-row--unfilled) {
        grid-template-columns: auto minmax(4.25rem, auto) minmax(6.25rem, auto) auto;
        grid-template-areas:
            "spot jersey stance remove"
            "name name name name";
    }

    #view-game-lineup-modal.game-lineup-modal--editing .game-lineup-table tr.lineup-edit-row--unfilled {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas: "spot empty remove";
    }

    #view-game-lineup-modal.game-lineup-modal--editing .lineup-edit-jersey,
    #view-game-lineup-modal.game-lineup-modal--editing .lineup-edit-name,
    #view-game-lineup-modal.game-lineup-modal--editing .lineup-edit-stance {
        min-height: 40px;
        height: 40px;
        font-size: 0.875rem;
    }

    #view-game-lineup-modal.game-lineup-modal--editing .lineup-edit-jersey {
        width: 100%;
    }

    #view-game-lineup-modal.game-lineup-modal--editing .lineup-edit-stance {
        min-width: 6.25rem;
        padding-right: 1.7rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 1023px) and (orientation: landscape) {
    #view-game-lineup-modal .game-lineup-modal-content {
        width: min(96vw, 860px) !important;
        max-width: 96vw !important;
        max-height: 92vh !important;
    }

    #view-game-lineup-modal .modal-header {
        padding: 0.4rem 0.75rem !important;
    }

    .game-lineup-modal-help {
        font-size: 0.75rem;
        margin-bottom: var(--space-xs);
    }

    .game-lineup-table th,
    .game-lineup-table td {
        padding: 0.35rem 0.4rem;
    }

    .game-lineup-batting-line {
        font-size: 0.8125rem;
        padding: 0.08rem 0.45rem;
    }
}

.pitch-breakdown-lineup-batters {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
    max-height: 220px;
    overflow-y: auto;
    padding: var(--space-xs) 0;
}

.pitch-breakdown-lineup-batters .pitch-breakdown-batter-filter-btn {
    font-size: 0.8125rem;
    padding: 0.4rem 0.65rem;
    white-space: normal;
    text-align: left;
    width: 100%;
    justify-content: flex-start;
}

#pitch-breakdown-filter-modal .pitch-breakdown-filter-modal-content {
    max-width: min(92vw, 420px);
}

/* ===================================================================
 * AI SCOUTING REPORTS
 * =================================================================== */

.scouting-report-body {
    margin-bottom: var(--space-md);
}

.scouting-report-footer.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: center;
}

.scouting-pitch-breakdown {
    margin: var(--space-md) 0;
}

.scouting-batter-link,
.scouting-game-link {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    color: var(--primary-color, #4169e1);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.scouting-game-link {
    display: inline;
    text-align: left;
}

.scouting-batter-link:hover,
.scouting-batter-link:focus,
.scouting-game-link:hover,
.scouting-game-link:focus {
    color: #950000;
    outline: none;
}

.scouting-batter-link-hint {
    margin: 0 0 var(--space-xs) 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.scouting-report-meta,
.pca-report-meta {
    margin-bottom: var(--space-md);
}

.scouting-report-meta-row,
.pca-report-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-secondary);
    max-width: 100%;
}

.scouting-report-meta-row > span,
.pca-report-meta-row > span {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.scouting-report-meta-row-secondary {
    margin-top: var(--space-xs);
}

#view-scouting-report-page .page-header,
#view-pitch-call-analysis-page .page-header {
    padding-right: 0;
}

#view-scouting-report-page .page-header h2,
#view-pitch-call-analysis-page .page-header h2 {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.lineup-card-stats-table th.sortable-col,
.scouting-batter-stats-table th.sortable-col {
    cursor: pointer;
    user-select: none;
}

.lineup-card-stats-table th.sortable-col:hover,
.lineup-card-stats-table th.sort-active,
.scouting-batter-stats-table th.sortable-col:hover,
.scouting-batter-stats-table th.sort-active {
    background: rgba(0, 123, 255, 0.1);
}

.lineup-card-stats-table th .sort-indicator,
.scouting-batter-stats-table th .sort-indicator {
    margin-left: 4px;
    font-size: 0.75em;
    color: var(--primary-color, #007bff);
}

.scouting-sample-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm, 4px);
    font-size: 0.75rem;
    font-weight: 600;
}

.scouting-sample-badge--ok {
    background: rgba(80, 200, 120, 0.2);
    color: var(--text-primary);
}

.scouting-sample-badge--thin {
    background: rgba(255, 180, 50, 0.25);
    color: var(--text-primary);
}

.scouting-sample-badge--none {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
}

.scouting-cached {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

.scouting-ai-narrative {
    margin-bottom: var(--space-md);
    padding: var(--space-md);
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(80, 200, 120, 0.1) 100%);
    border-left: 4px solid var(--primary-color);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-primary);
}

.scouting-ai-narrative strong {
    font-weight: 700;
    color: var(--text-primary);
}

.scouting-team-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    align-items: start;
}

.scouting-team-context-games,
.scouting-team-context-roster {
    min-width: 0;
}

.scouting-team-context .scouting-games,
.scouting-team-context .scouting-roster {
    margin: 0;
}

.scouting-team-context h4 {
    margin-top: 0;
}

.scouting-team-context ul {
    margin-bottom: 0;
}

.scouting-team-tables {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.scouting-team-tables .scouting-batter-stats {
    margin-top: 0;
    margin-bottom: 0;
}

.scouting-team-tables .scouting-pitch-breakdown {
    margin-top: 0;
    margin-bottom: 0;
}

.scouting-batter-detail-section {
    margin-top: calc(var(--space-lg) + var(--space-sm));
}

@media (min-width: 769px) {
    .scouting-batter-detail-section {
        margin-top: calc(var(--space-xl) + var(--space-xs));
    }
}

@media (min-width: 1025px) {
    .scouting-team-tables {
        gap: var(--space-sm);
    }
}

@media print {
    .scouting-team-tables {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }
}

@media (max-width: 768px) {
    .scouting-team-context {
        grid-template-columns: 1fr;
    }
}

/* Opposing Lineups page actions */
.lineups-page-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.lineups-filters-row {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}

.lineups-filter-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
}

.lineups-filter-field .form-label {
    margin: 0;
    font-size: 0.9rem;
    flex: 0 0 auto;
}

.lineups-filter-field .form-input {
    min-width: 12rem;
    max-width: 100%;
    flex: 1 1 12rem;
}

.lineups-edit-btn {
    font-weight: 600;
    white-space: nowrap;
}

.edit-roster-picker-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    max-height: min(360px, 55vh);
    overflow-y: auto;
    padding: 2px;
}

.edit-roster-picker-group {
    margin-top: var(--space-sm);
    padding: 0.15rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.edit-roster-picker-group:first-child {
    margin-top: 0;
}

.edit-roster-picker-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-sm);
    width: 100%;
    text-align: left;
    white-space: normal;
}

.edit-roster-picker-item-name {
    font-weight: 600;
}

.edit-roster-picker-item-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex: 0 0 auto;
}

.edit-roster-picker-empty {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Legacy alias — keep older markup / refs working */
.lineups-pitcher-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.lineups-io-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
    width: 100%;
}

.lineups-io-actions .btn {
    width: 100%;
    min-height: 40px;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .lineups-page-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .lineups-create-btn,
    .lineups-edit-btn {
        width: auto;
        flex: 0 0 auto;
    }

    .lineups-filters-row {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        width: auto;
    }

    .lineups-filter-field {
        flex: 1 1 14rem;
        width: auto;
        max-width: 22rem;
    }

    .lineups-filter-field .form-input,
    .lineups-filter-field .pmx-select-host {
        max-width: 18rem;
    }

    .lineups-pitcher-filter-row {
        flex: 1 1 auto;
    }

    .lineups-pitcher-filter-row .form-input {
        max-width: 18rem;
    }

    .lineups-io-actions {
        flex: 1 1 100%;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: 52rem;
    }

    .lineups-io-actions .btn {
        font-size: 0.875rem;
        min-height: 44px;
    }
}

@media (min-width: 1024px) {
    .lineups-io-actions {
        flex: 0 1 auto;
        width: auto;
        max-width: none;
        grid-template-columns: repeat(4, auto);
    }

    .lineups-io-actions .btn {
        width: auto;
        min-width: 8.75rem;
    }
}

/* Opposing Lineup cards */
.lineup-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-md);
    background: var(--bg-secondary, var(--surface));
}

.lineup-card-header {
    display: flex;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: var(--space-sm);
}

.lineup-card-heading h3 {
    margin: 0 0 var(--space-xs) 0;
}

.lineup-sample-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    border-radius: 4px;
    background: var(--primary-color, #1E88E5);
    color: #fff;
    vertical-align: middle;
}

.lineup-card-meta {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.lineup-card-meta-note {
    color: var(--text-secondary);
    font-size: 0.75rem;
    margin-top: 0.2rem;
}

.lineup-card-actions {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.lineup-edit-roster-btn {
    background-color: #FFD700;
    color: #000;
    border: 1px solid #FFD700;
    font-weight: 600;
    white-space: nowrap;
}

.lineup-edit-roster-btn:hover,
.lineup-edit-roster-btn:focus {
    background-color: #e6c200;
    border-color: #e6c200;
    color: #000;
}

.lineup-card-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-md, 6px);
    background: var(--surface, #fff);
}

/* Large displays: full-width tables with equal post-name columns */
.lineup-card-stats-table,
.scouting-batter-stats-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 0.8125rem;
    min-width: 760px;
}

.lineup-card-stats-table th,
.lineup-card-stats-table td,
.scouting-batter-stats-table th,
.scouting-batter-stats-table td {
    padding: 0.45rem 0.4rem;
    text-align: left;
    border-bottom: 1px solid var(--border, rgba(0, 0, 0, 0.06));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lineup-card-stats-table th,
.scouting-batter-stats-table th {
    background: var(--bg-secondary, rgba(0, 0, 0, 0.04));
    font-weight: 600;
    color: var(--text-secondary);
    position: sticky;
    top: 0;
}

/* Jersey #: only as wide as the header needs */
.lineup-card-stats-table th:nth-child(1),
.lineup-card-stats-table td:nth-child(1),
.scouting-batter-stats-table th:nth-child(1),
.scouting-batter-stats-table td:nth-child(1) {
    width: 4.75rem;
    min-width: 4.75rem;
    max-width: 4.75rem;
}

/* Batter name: flexible readable width */
.lineup-card-stats-table th:nth-child(2),
.lineup-card-stats-table td:nth-child(2),
.scouting-batter-stats-table th:nth-child(2),
.scouting-batter-stats-table td:nth-child(2) {
    width: 9.5rem;
    min-width: 7rem;
}

/* All remaining stats columns share equal width */
.lineup-card-stats-table th:nth-child(n+3),
.lineup-card-stats-table td:nth-child(n+3),
.scouting-batter-stats-table th:nth-child(n+3),
.scouting-batter-stats-table td:nth-child(n+3) {
    width: 4.25rem;
    text-align: center;
}

.lineup-card-stats-table tbody tr:nth-child(even),
.scouting-batter-stats-table tbody tr:nth-child(even) {
    background: rgba(0, 0, 0, 0.02);
}

.lineup-card-stats-table tbody tr:last-child td,
.scouting-batter-stats-table tbody tr:last-child td {
    border-bottom: none;
}

.lineup-card-stats-table tbody tr.batter-stats-totals-row td,
.scouting-batter-stats-table tbody tr.batter-stats-totals-row td {
    font-weight: 700;
    border-top: 2px solid var(--border, rgba(0, 0, 0, 0.35));
    background: rgba(0, 0, 0, 0.05);
}

.scouting-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: var(--space-sm);
    margin: var(--space-sm) 0 var(--space-md);
    padding: var(--space-sm);
    background: var(--bg-secondary, rgba(0, 0, 0, 0.03));
    border-radius: var(--radius-md);
}

.scouting-stats-grid > div {
    text-align: center;
}

.scouting-stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 0.15rem;
}

.scouting-splits-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.scouting-batter-stats {
    margin: var(--space-md) 0;
}

.scouting-batter-stats-heading {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-xs);
}

.scouting-batter-stats-heading h4 {
    margin: 0;
}

.scouting-batter-stats-heading .btn.hidden {
    display: none !important;
}

.scouting-roster-dnp {
    color: var(--text-secondary);
    opacity: 0.7;
}

.scouting-batter-stats-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border: 1px solid var(--border, rgba(0, 0, 0, 0.08));
    border-radius: var(--radius-md, 6px);
}

/*
 * Phones & tablets only: freeze # + Batter, size Batter column to longest name.
 * Laptops/monitors keep the full-width tables above.
 */
@media (max-width: 1024px) {
    .lineup-card-table-scroll,
    .scouting-batter-stats-scroll {
        background: var(--surface, #fff);
    }

    .lineup-card-stats-table,
    .scouting-batter-stats-table {
        width: max-content;
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0;
    }

    .lineup-card-stats-table th,
    .lineup-card-stats-table td,
    .scouting-batter-stats-table th,
    .scouting-batter-stats-table td {
        background-color: var(--surface, #fff);
    }

    .lineup-card-stats-table th,
    .scouting-batter-stats-table th {
        background-color: var(--bg-secondary, #f3f4f6);
        z-index: 2;
    }

    .lineup-card-stats-table th:nth-child(1),
    .lineup-card-stats-table td:nth-child(1) {
        position: sticky;
        left: 0;
        width: 4.75rem;
        min-width: 4.75rem;
        max-width: 4.75rem;
        z-index: 3;
    }

    .lineup-card-stats-table th:nth-child(2),
    .lineup-card-stats-table td:nth-child(2),
    .lineup-card-stats-table .col-batter-name {
        position: sticky;
        left: 4.75rem;
        width: max-content;
        min-width: max-content;
        max-width: none;
        z-index: 3;
        box-shadow: 2px 0 6px rgba(0, 0, 0, 0.12);
    }

    .scouting-batter-stats-table th:nth-child(1),
    .scouting-batter-stats-table td:nth-child(1) {
        position: sticky;
        left: 0;
        width: 4.75rem;
        min-width: 4.75rem;
        max-width: 4.75rem;
        z-index: 3;
    }

    .scouting-batter-stats-table th:nth-child(2),
    .scouting-batter-stats-table td:nth-child(2),
    .scouting-batter-stats-table .col-batter-name {
        position: sticky;
        left: 4.75rem;
        width: max-content;
        min-width: max-content;
        max-width: none;
        z-index: 3;
        box-shadow: 2px 0 6px rgba(0, 0, 0, 0.12);
    }

    .lineup-card-stats-table th:nth-child(n+3),
    .lineup-card-stats-table td:nth-child(n+3),
    .scouting-batter-stats-table th:nth-child(n+3),
    .scouting-batter-stats-table td:nth-child(n+3) {
        width: 4.25rem;
        min-width: 4.25rem;
        text-align: center;
    }

    .lineup-card-stats-table th:nth-child(1),
    .lineup-card-stats-table th:nth-child(2),
    .scouting-batter-stats-table th:nth-child(1),
    .scouting-batter-stats-table th:nth-child(2) {
        z-index: 5;
        top: 0;
        background-color: var(--bg-secondary, #f3f4f6);
    }

    .lineup-card-stats-table th.sort-active,
    .lineup-card-stats-table th.sortable-col:hover,
    .scouting-batter-stats-table th.sort-active,
    .scouting-batter-stats-table th.sortable-col:hover {
        background-color: rgba(0, 123, 255, 0.12);
    }

    .lineup-card-stats-table tbody tr:nth-child(even) td,
    .scouting-batter-stats-table tbody tr:nth-child(even) td {
        background-color: rgba(0, 0, 0, 0.02);
    }

    .lineup-card-stats-table tbody tr:nth-child(even) td:nth-child(1),
    .lineup-card-stats-table tbody tr:nth-child(even) td:nth-child(2),
    .scouting-batter-stats-table tbody tr:nth-child(even) td:nth-child(1),
    .scouting-batter-stats-table tbody tr:nth-child(even) td:nth-child(2) {
        background-color: var(--bg-secondary, #f3f4f6);
    }

    .lineup-card-stats-table tbody tr:nth-child(odd) td:nth-child(1),
    .lineup-card-stats-table tbody tr:nth-child(odd) td:nth-child(2),
    .scouting-batter-stats-table tbody tr:nth-child(odd) td:nth-child(1),
    .scouting-batter-stats-table tbody tr:nth-child(odd) td:nth-child(2) {
        background-color: var(--surface, #fff);
    }

    .scouting-batter-stats-table tbody tr:last-child td {
        border-bottom: none;
    }

    /* Keep the frozen # + Batter cells on the totals row visually part of that row */
    .lineup-card-stats-table tbody tr.batter-stats-totals-row td,
    .lineup-card-stats-table tbody tr.batter-stats-totals-row td:nth-child(1),
    .lineup-card-stats-table tbody tr.batter-stats-totals-row td:nth-child(2),
    .scouting-batter-stats-table tbody tr.batter-stats-totals-row td,
    .scouting-batter-stats-table tbody tr.batter-stats-totals-row td:nth-child(1),
    .scouting-batter-stats-table tbody tr.batter-stats-totals-row td:nth-child(2) {
        font-weight: 700;
        background-color: var(--bg-secondary, #f3f4f6);
    }
}

@media (max-width: 768px) {
    .lineup-card-header {
        flex-direction: column;
    }

    .lineup-card-actions {
        width: 100%;
    }

    .lineup-card-actions .btn {
        flex: 1 1 auto;
        min-width: calc(50% - var(--space-sm));
    }

    .lineup-card-actions .lineup-edit-roster-btn {
        font-size: 0.75rem;
        padding: 0.375rem 0.5rem;
        min-width: calc(50% - var(--space-sm));
    }

    .lineup-card-stats-table,
    .scouting-batter-stats-table {
        font-size: 0.75rem;
    }

    .scouting-stats-grid {
        grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    }
}

@media (max-width: 600px) {
    .scouting-splits-grid {
        grid-template-columns: 1fr;
    }
}

.scouting-report-body h4,
.scouting-report-body h5 {
    margin: var(--space-md) 0 var(--space-xs);
    color: var(--text-primary);
    font-size: 0.95rem;
}

.scouting-report-body ul {
    margin: 0 0 var(--space-md);
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.45;
}

.scouting-empty-note {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-style: italic;
}

.scouting-custom-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

/* ===================================================================
 * NEW GAME / SCHEDULE — opposing batter mode picker
 * =================================================================== */

.lineup-mode-picker {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.lineup-mode-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    cursor: pointer;
    min-height: 44px;
}

.lineup-mode-card:has(input:checked) {
    border-width: 2px;
    border-color: var(--primary-color);
    background: var(--background);
}

.lineup-mode-card.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.lineup-mode-card.is-disabled input {
    pointer-events: none;
}

.lineup-mode-card input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.lineup-mode-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.lineup-mode-card-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.lineup-mode-card-sub {
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.35;
}

.lineup-mode-hint {
    min-height: 1.2em;
    margin-top: var(--space-sm);
}

.lineup-mode-hint:not(:empty) {
    margin-bottom: var(--space-xs);
}

.lineup-mode-footer {
    margin-top: var(--space-sm);
    font-size: 0.8125rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--text-secondary);
}

.lineup-roster-panel {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--background);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}

.lineup-roster-panel > .form-hint {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

.lineup-roster-hint {
    margin-top: var(--space-sm);
    margin-bottom: 0;
    max-width: 42rem;
}

.lineup-roster-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.lineup-roster-chip {
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: var(--radius-full);
    padding: 0.4rem 0.75rem;
    font-size: 0.85rem;
    min-height: 44px;
    cursor: grab;
    color: var(--text-primary);
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    touch-action: none;
}

.lineup-roster-chip:active {
    cursor: grabbing;
}

.lineup-roster-chip.is-used {
    opacity: 0.45;
}

.lineup-roster-chip.is-dragging {
    opacity: 0.35;
}

.lineup-chip-ghost {
    position: fixed;
    z-index: 11000;
    pointer-events: none;
    margin: 0;
    opacity: 0.95;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transform: translate(-50%, -50%);
    cursor: grabbing;
    touch-action: none;
}

html.is-lineup-chip-dragging,
html.is-lineup-chip-dragging body {
    overscroll-behavior: none;
}

.lineup-slot-row.is-drop-target {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius-md);
    background: var(--background);
}

.lineup-pregame-slots.is-receiving-chips .lineup-slot-row {
    transition: outline-color 0.12s ease, background-color 0.12s ease;
}

.lineup-pregame-card {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.lineup-pregame-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
}

.lineup-pregame-slots {
    min-width: 0;
}

.lineup-slot-head {
    display: none;
}

.lineup-slot-row {
    display: grid;
    grid-template-columns: 4.5rem minmax(8rem, 1fr) 4.75rem auto 2.75rem;
    grid-template-areas: "badge name jersey stance clear";
    gap: var(--space-sm);
    align-items: end;
    margin-bottom: var(--space-sm);
    min-width: 0;
}

.lineup-slot-badge { grid-area: badge; }
.lineup-slot-name-field { grid-area: name; min-width: 0; }
.lineup-slot-jersey-field { grid-area: jersey; min-width: 0; }
.lineup-slot-stance-field { grid-area: stance; min-width: 0; }
.lineup-slot-clear { grid-area: clear; }

.lineup-slot-badge {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 44px;
    padding-bottom: 0.35rem;
}

.lineup-slot-num {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--primary-color);
    line-height: 1;
}

.lineup-slot-name {
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.lineup-slot-name-field .form-input,
.lineup-name-input {
    width: 100%;
    min-width: 0;
}

.lineup-jersey-input {
    text-align: center;
    font-variant-numeric: tabular-nums;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
}

.lineup-stance-seg {
    display: flex;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface);
}

.lineup-stance-seg button {
    flex: 1 1 auto;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    border-right: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.75rem;
    padding: 0 0.45rem;
    cursor: pointer;
    touch-action: manipulation;
}

.lineup-stance-seg button:last-child {
    border-right: 0;
}

.lineup-stance-seg button.is-active {
    background: var(--background);
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: inset 0 0 0 2px var(--primary-color);
}

.lineup-stance-seg button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    z-index: 1;
}

.lineup-slot-clear {
    min-height: 44px !important;
    min-width: 44px !important;
    padding: 0 !important;
}

/* Phone and narrow tablet: stacked slot card so the name field is full width */
@media (max-width: 767px) {
    .lineup-roster-panel {
        padding: var(--space-sm) var(--space-md);
    }

    .lineup-roster-panel > .form-hint,
    .lineup-roster-hint {
        font-size: 0.8rem;
        line-height: 1.35;
        max-width: none;
    }

    .lineup-slot-row {
        grid-template-columns: 4.75rem minmax(0, 1fr) 44px;
        grid-template-areas:
            "badge badge clear"
            "name name name"
            "jersey stance stance";
        align-items: center;
        gap: var(--space-sm);
        margin-bottom: var(--space-md);
        padding: var(--space-md);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--background);
    }

    .lineup-slot-badge {
        flex-direction: row;
        align-items: baseline;
        gap: var(--space-sm);
        min-height: auto;
        padding-bottom: 0;
    }

    .lineup-slot-name {
        font-size: 0.85rem;
    }

    .lineup-slot-jersey-field {
        max-width: 4.75rem;
    }

    .lineup-stance-seg button {
        min-height: 48px;
        font-size: 0.8125rem;
    }

    .lineup-slot-clear.btn.btn-sm {
        min-height: 44px !important;
        min-width: 44px !important;
        width: 44px !important;
        padding: 0 !important;
    }
}

@media (min-width: 768px) {
    .lineup-mode-picker {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .lineup-slot-head {
        display: grid;
        grid-template-columns: 4.5rem minmax(8rem, 1fr) 4.75rem auto 2.75rem;
        gap: var(--space-sm);
        align-items: end;
        margin-bottom: var(--space-xs);
        padding: 0 0 var(--space-xs);
        border-bottom: 1px solid var(--border);
        font-size: 0.7rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }

    .lineup-slot-head-jersey,
    .lineup-slot-head-stance {
        text-align: center;
    }

    .lineup-slot-row {
        padding-bottom: var(--space-sm);
        border-bottom: 1px solid var(--border);
        margin-bottom: var(--space-sm);
    }

    .lineup-slot-row:last-child {
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

@media (min-width: 1024px) {
    .lineup-pregame-card {
        padding: var(--space-lg);
    }

    .lineup-slot-head,
    .lineup-slot-row {
        grid-template-columns: 5rem minmax(14rem, 1fr) 5rem auto 2.75rem;
        gap: var(--space-md);
    }

    .lineup-name-input {
        font-size: 1rem;
    }
}

/* Game setup is a lineup card, not a short login form — do not inherit the 500px cap */
#game-setup-page .form-container,
#bullpen-setup-page .form-container,
#game-setup-page .game-setup-form-container,
#bullpen-setup-page .game-setup-form-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.game-setup-identity {
    display: grid;
    grid-template-columns: 1fr;
}

.game-setup-identity-home .radio-group,
#game-setup-page .game-setup-inline-radios .radio-group,
#add-game-modal .game-setup-inline-radios .radio-group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-lg);
}

/* Group game-setup choices so opposing batters, Velocity, Home/Visitor, and Relief do not blend */
#game-setup-page .game-setup-section,
#bullpen-setup-page .game-setup-section,
#add-game-modal .game-setup-section,
#edit-game-modal .game-setup-section {
    margin: 0 0 var(--space-md);
    padding: var(--space-sm) var(--space-md) var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--background);
    min-width: 0;
    min-inline-size: 0;
}

#game-setup-page .game-setup-section-title,
#bullpen-setup-page .game-setup-section-title,
#add-game-modal .game-setup-section-title,
#edit-game-modal .game-setup-section-title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    padding: 0 var(--space-xs);
}

#game-setup-page .game-setup-section .form-group,
#bullpen-setup-page .game-setup-section .form-group,
#add-game-modal .game-setup-section .form-group {
    margin-bottom: 0;
}

#game-setup-page .game-setup-section-velocity .toggle-switch-wrapper,
#bullpen-setup-page .game-setup-section-velocity .toggle-switch-wrapper,
#add-game-modal .game-setup-section-velocity .toggle-switch-wrapper,
#edit-game-modal .game-setup-section-velocity .toggle-switch-wrapper {
    margin-bottom: var(--space-sm);
}

#game-setup-page .game-setup-velocity-notice,
#bullpen-setup-page .game-setup-velocity-notice,
#add-game-modal .game-setup-velocity-notice,
#edit-game-modal .game-setup-velocity-notice {
    background: #FFF3CD;
    border: 2px solid #856404;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    color: #856404;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.5;
}

#game-setup-page .game-setup-relief-count {
    margin-top: var(--space-md);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

#game-setup-page .game-setup-relief-count-hint {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: var(--space-sm);
}

#game-setup-page .game-setup-relief-count-fields {
    display: flex;
    gap: var(--space-lg);
    align-items: center;
}

#game-setup-page .game-setup-relief-count-fields > div {
    flex: 1;
    min-width: 0;
}

#game-setup-page .game-setup-relief-count-fields .form-label {
    font-size: 0.85rem;
}

#add-game-modal .modal-content.modal-content-lineup,
.modal-content-lineup {
    max-width: min(960px, 96vw);
    width: 96%;
}

@media (max-width: 767px) {
    #game-setup-page .form-container,
    #bullpen-setup-page .form-container {
        padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px));
    }

    #game-setup-page .game-setup-form-actions,
    #bullpen-setup-page .game-setup-form-actions {
        position: sticky;
        bottom: 0;
        z-index: 20;
        background: var(--surface);
        padding-top: var(--space-sm);
        padding-bottom: calc(var(--space-sm) + env(safe-area-inset-bottom, 0px));
        padding-right: calc(var(--space-sm) + 4.25rem);
        margin-top: var(--space-md);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
    }

    #game-setup-page .game-setup-form-actions .btn,
    #bullpen-setup-page .game-setup-form-actions .btn {
        min-height: 48px;
    }

    /* Keep Home/Visitor and relief radios on one row like tablet/laptop (no boxed frames) */
    #game-setup-page .game-setup-inline-radios .radio-group,
    #add-game-modal .game-setup-inline-radios .radio-group {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-lg);
    }

    #game-setup-page .game-setup-inline-radios .radio-option,
    #add-game-modal .game-setup-inline-radios .radio-option {
        padding: 0;
        border: none;
        border-radius: 0;
        min-height: 0;
        background: transparent;
    }

    #game-setup-page .game-setup-inline-radios .radio-option:hover,
    #add-game-modal .game-setup-inline-radios .radio-option:hover {
        border: none;
        background-color: transparent;
    }

    #game-setup-page .game-setup-inline-radios .radio-option input[type="radio"],
    #add-game-modal .game-setup-inline-radios .radio-option input[type="radio"] {
        width: 18px;
        height: 18px;
        margin-right: 0;
    }

    #game-setup-page .game-setup-inline-radios .radio-option label,
    #add-game-modal .game-setup-inline-radios .radio-option label {
        flex: none;
        font-size: 1rem;
    }

    .modal-content-lineup,
    #add-game-modal .modal-content.modal-content-lineup {
        width: 96% !important;
        max-width: 96% !important;
        min-width: 0;
    }
}

@media (min-width: 768px) {
    #game-setup-page .form-container,
    #bullpen-setup-page .form-container,
    #game-setup-page .game-setup-form-container,
    #bullpen-setup-page .game-setup-form-container {
        max-width: 760px;
    }

    .game-setup-identity {
        grid-template-columns: minmax(10rem, 0.7fr) minmax(12rem, 1fr);
        column-gap: var(--space-lg);
        align-items: start;
    }

    .modal-content-lineup,
    #add-game-modal .modal-content.modal-content-lineup {
        max-width: 760px;
        width: 92%;
        min-width: 0;
    }
}

@media (min-width: 1024px) {
    #game-setup-page .form-container,
    #bullpen-setup-page .form-container,
    #game-setup-page .game-setup-form-container,
    #bullpen-setup-page .game-setup-form-container {
        max-width: 880px;
    }

    .modal-content-lineup,
    #add-game-modal .modal-content.modal-content-lineup {
        max-width: 880px;
        width: 90%;
        min-width: 640px;
    }
}

@media (min-width: 1280px) {
    #game-setup-page .form-container,
    #bullpen-setup-page .form-container,
    #game-setup-page .game-setup-form-container,
    #bullpen-setup-page .game-setup-form-container {
        max-width: 960px;
    }

    .modal-content-lineup,
    #add-game-modal .modal-content.modal-content-lineup {
        max-width: 960px;
    }
}


/* ===================================================================
 * BULLPEN
 * =================================================================== */

.bullpen-setup {
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.bullpen-setup-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-md);
}

.bullpen-help-text {
    margin: var(--space-xs) 0 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
    line-height: 1.4;
}

.bullpen-landing-toolbar {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.bullpen-landing-actions {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--space-sm);
    width: 100%;
}

.bullpen-landing-actions .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    white-space: nowrap;
}

.bullpen-reports-btn {
    border: 2px solid #1e3a5f;
    background: #fff;
    color: #1e3a5f;
    font-weight: 700;
}

.bullpen-reports-btn:hover,
.bullpen-reports-btn:focus-visible {
    background: #1e3a5f;
    color: #fff;
    outline: none;
}

.bullpen-report-chooser-content {
    max-width: 440px;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(30, 58, 95, 0.22);
    box-shadow:
        0 24px 48px rgba(30, 58, 95, 0.12),
        0 8px 20px rgba(0, 0, 0, 0.06);
}

.bullpen-report-chooser-header {
    background: linear-gradient(135deg, #2d5986 0%, #1e3a5f 55%, #152a45 100%);
    color: #fff;
}

.bullpen-lifetime-map-notice-header {
    background: #950000;
    color: #fff;
}

.bullpen-report-chooser-body {
    background: linear-gradient(180deg, #f4f7fb 0%, #ffffff 48%);
}

.bullpen-report-chooser-prompt {
    margin: 0 0 var(--space-md);
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.45;
}

.bullpen-report-chooser-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.bullpen-report-choice {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    width: 100%;
    min-height: 72px;
    padding: var(--space-md);
    text-align: left;
    border-radius: var(--radius-md);
    border: 2px solid rgba(30, 58, 95, 0.16);
    background: #fff;
    color: var(--text-primary);
    cursor: pointer;
}

.bullpen-report-choice:hover,
.bullpen-report-choice:focus-visible {
    border-color: #1e3a5f;
    background: #f4f7fb;
    outline: none;
}

.bullpen-report-choice--lifetime {
    border-left: 5px solid #4169E1;
}

.bullpen-report-choice--custom {
    border-left: 5px solid #7C3AED;
}

.bullpen-report-choice-title {
    font-weight: 700;
    font-size: 1rem;
}

.bullpen-report-choice-desc {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.bullpen-pitch-type-menu {
    position: relative;
}

#bullpen-custom-report-modal .bullpen-pitch-type-field {
    grid-column: 1 / -1;
}

.bullpen-pitch-type-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    width: 100%;
    text-align: left;
    cursor: pointer;
    background: var(--surface);
    font: inherit;
    color: var(--text-primary);
}

.bullpen-pitch-type-toggle:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.bullpen-pitch-type-toggle span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bullpen-pitch-type-caret {
    flex-shrink: 0;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-2px);
}

.bullpen-pitch-type-panel {
    margin-top: var(--space-xs);
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid rgba(124, 58, 237, 0.28);
    border-radius: var(--radius-md);
    background: #fff;
    padding: var(--space-xs);
    box-shadow: 0 8px 20px rgba(91, 33, 182, 0.1);
}

.bullpen-pitch-type-panel[hidden] {
    display: none !important;
}

@media (max-width: 380px) {
    .bullpen-landing-actions .btn {
        font-size: 0.875rem;
        padding-left: 0.55rem;
        padding-right: 0.55rem;
    }
}

.bullpen-reports-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.bullpen-hand-group {
    display: flex;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.bullpen-hand-btn {
    flex: 1;
    min-width: 6.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0.65rem 0.9rem;
    border: 2px solid #8B0000;
    background: transparent;
    color: #8B0000;
    border-radius: var(--radius-md);
    font-weight: 700;
    cursor: pointer;
}

.bullpen-hand-btn.active,
.bullpen-hand-btn[aria-pressed="true"] {
    background: #8B0000;
    color: #fff;
}

.bullpen-bat-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.bullpen-bat-icon--rh {
    transform: scaleX(-1);
}

.bullpen-hand-btn.active .bullpen-bat-icon,
.bullpen-hand-btn[aria-pressed="true"] .bullpen-bat-icon {
    filter: brightness(10);
}

.bullpen-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.bullpen-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--primary-color);
    background: var(--surface);
    color: var(--primary-color);
    border-radius: var(--radius-full);
    padding: 0.45rem 0.9rem;
    font-weight: 650;
    cursor: pointer;
    min-height: 44px;
}

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

.bullpen-chip-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.bullpen-chip.active .bullpen-chip-swatch {
    border-color: rgba(255, 255, 255, 0.75);
}

.bullpen-empty-hint {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.bullpen-state-hint {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
    text-align: center;
    padding: var(--space-md) 0;
}

.bullpen-state-hint--loading::before {
    content: '';
    display: inline-block;
    width: 0.85rem;
    height: 0.85rem;
    margin-right: 0.45rem;
    border: 2px solid var(--border);
    border-top-color: var(--sidebar-active);
    border-radius: 50%;
    vertical-align: -0.1rem;
    animation: bullpen-spin 0.8s linear infinite;
}

@keyframes bullpen-spin {
    to { transform: rotate(360deg); }
}

.bullpen-state-panel {
    text-align: center;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
}

.bullpen-state-panel--error {
    border-color: rgba(193, 22, 52, 0.25);
    background: rgba(193, 22, 52, 0.06);
    color: var(--danger-color);
}

.bullpen-state-panel--error p {
    margin: 0 0 var(--space-sm);
}

.bullpen-landing-notice {
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid rgba(193, 22, 52, 0.25);
    background: rgba(193, 22, 52, 0.06);
    color: var(--danger-color);
    font-size: 0.875rem;
}

.bullpen-landing-notice.hidden {
    display: none;
}

.bullpen-setup-error {
    margin-bottom: var(--space-md);
}

.bullpen-live-loading,
.bullpen-live-error {
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--surface);
}

.bullpen-live-loading {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.bullpen-live-loading.hidden,
.bullpen-live-error.hidden {
    display: none;
}

.bullpen-live-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    border-color: rgba(193, 22, 52, 0.25);
    background: rgba(193, 22, 52, 0.06);
    color: var(--danger-color);
}

.bullpen-live-error-text {
    margin: 0;
    flex: 1 1 12rem;
    font-size: 0.875rem;
}

.bullpen-pitch-type-legend-note,
.bullpen-legend-note {
    margin: 0;
    text-align: center;
}

.bullpen-legend-filter,
.bullpen-legend span {
    max-width: 100%;
}

.bullpen-live-shell {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

#live-bullpen-info {
    margin-top: var(--space-sm);
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.bullpen-live-stats {
    width: 100%;
    max-width: none;
    padding: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-md);
    text-align: center;
}

.bullpen-live-stats-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: var(--space-xs);
}

.bullpen-live-stats-meta {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--space-sm);
}

.bullpen-live-stats-meta--split {
    display: flex;
    gap: var(--space-lg);
    justify-content: center;
    margin-top: var(--space-xs);
    margin-bottom: 0;
    font-weight: 600;
}

.bullpen-live-count-row {
    display: flex;
    gap: var(--space-xl);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.bullpen-live-count {
    font-size: 1.125rem;
    font-weight: 700;
}

.bullpen-live-count--balls {
    color: #4169E1;
}

.bullpen-live-count--strikes {
    color: var(--danger-color);
}

.bullpen-command-stats {
    margin-top: 0;
    max-width: min(100%, 28rem);
    margin-left: auto;
    margin-right: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bullpen-command-stats:has(.stat-card[hidden]) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bullpen-pitch-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-sm);
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.bullpen-pitch-context.hidden {
    display: none;
}

.bullpen-pitch-context-label {
    font-size: 0.9rem;
    color: var(--text-primary);
}

.bullpen-workspace {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    align-items: stretch;
    margin-bottom: var(--space-md);
}

.bullpen-live-flow:not(:has(.game-stage:not(.hidden))) {
    display: none;
}

.bullpen-live-flow {
    order: -1;
    min-width: 0;
}

.bullpen-pitch-type-block {
    margin: 0;
}

.bullpen-pitch-type-title {
    font-size: 1.05rem;
    margin: 0 0 var(--space-sm);
    text-align: center;
}

#bullpen-pitch-types.bullpen-chip-row {
    justify-content: center;
}

#bullpen-pitch-types .bullpen-chip {
    border: 1.5px solid #8B0000;
    color: #8B0000;
    white-space: nowrap;
    flex: 0 0 auto;
}

#bullpen-pitch-types .bullpen-chip:hover:not(.active):not(.is-active) {
    background: rgba(139, 0, 0, 0.08);
}

#bullpen-pitch-types .bullpen-chip:focus-visible {
    outline: 2px solid #8B0000;
    outline-offset: 2px;
}

#bullpen-pitch-types .bullpen-chip--all {
    border-style: dashed;
    font-weight: 750;
}

#bullpen-pitch-types .bullpen-chip--all.is-active {
    background: #8B0000;
    color: #fff;
    border-style: solid;
    font-weight: 800;
}

#bullpen-pitch-types .bullpen-chip.is-logging:not(.active) {
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #8B0000;
}

#bullpen-pitch-types .bullpen-chip.active {
    background: #8B0000;
    color: #fff;
    font-weight: 800;
    /* Ring keeps the current pitch unmistakable once chips wrap into a grid */
    box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px #8B0000;
}

#bullpen-change-pitch-btn {
    border-color: #8B0000;
    color: #8B0000;
}

#bullpen-change-pitch-btn:hover:not(:disabled) {
    background: rgba(139, 0, 0, 0.08);
}

.bullpen-location-actions {
    display: flex;
    justify-content: stretch;
    margin-top: 0;
}

.bullpen-location-actions .btn {
    width: 100%;
    min-height: 48px;
}

#bullpen-stance-modal {
    display: none !important;
}

#bullpen-stance-modal .modal-footer {
    flex-wrap: wrap;
}

#bullpen-stance-modal .bullpen-hand-btn {
    min-height: 44px;
    min-width: 6.5rem;
}

.bullpen-zone-panel,
.bullpen-side-panel .card {
    padding: var(--space-lg);
}

.bullpen-zone-panel {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.bullpen-mph-block {
    text-align: center;
    margin-bottom: var(--space-md);
}

#bullpen-mph-display {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    min-height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
    margin-bottom: var(--space-md);
}

#bullpen-stage-mph.game-stage {
    padding: var(--space-md);
    margin-bottom: 0;
}

.bullpen-section-title {
    margin: 0 0 var(--space-sm);
    color: var(--sidebar-active);
    font-size: 1.15rem;
}

.bullpen-history-hint {
    margin: -0.15rem 0 var(--space-md);
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
}

/* Inline (non-modal) step hint that stays visible after an OK prompt is dismissed */
.bullpen-prompt {
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 var(--space-md);
    min-height: 1.25rem;
    padding: 0.35rem 0.6rem;
    border-left: 3px solid var(--sidebar-active);
    border-radius: var(--radius-sm);
    background: rgba(149, 0, 0, 0.05);
    color: var(--text-primary);
}

.bullpen-zone-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    justify-content: center;
    container-type: inline-size;
}

.bullpen-zone-wrap:not(.is-ready) #bullpen-zone-mount {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.bullpen-zone-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
}

.bullpen-zone-stage .bullpen-location-actions {
    margin-top: 0.85rem;
    margin-bottom: 0.85rem;
    width: 100%;
    justify-content: stretch;
}

.bullpen-zone-stage .bullpen-location-actions .btn {
    width: 100%;
    min-width: 0;
}

/* Fallback "Log Pitch" shown only while the user is adjusting placement. */
#bullpen-stage-location.hidden,
#bullpen-stage-location[hidden] {
    display: none;
}

/* ---- Live Bullpen step prompts: viewport-centered dialog over a dimmed scrim ---- */
.bullpen-coach-prompt {
    position: fixed;
    inset: 0;
    z-index: 10050; /* above Ask Ace FAB (9999), sidebar (1001), hamburger (1002), .modal (1003) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    padding-top: max(var(--space-md), env(safe-area-inset-top, 0px));
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: bullpen-prompt-scrim-in 160ms ease-out;
}

.bullpen-coach-prompt.hidden,
.bullpen-coach-prompt[hidden] {
    display: none;
}

.bullpen-coach-prompt-card {
    width: min(100%, 22rem);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    border-top: 4px solid var(--sidebar-active);
    background: var(--surface);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    text-align: center;
    outline: none;
    animation: bullpen-prompt-card-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes bullpen-prompt-scrim-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes bullpen-prompt-card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .bullpen-coach-prompt,
    .bullpen-coach-prompt-card {
        animation: none;
    }
}

#bullpen-stage-pitch-type.is-awaiting-pitch-type {
    outline: 2px solid var(--sidebar-active);
    outline-offset: 3px;
    border-radius: var(--radius-md);
}

.bullpen-coach-prompt-title {
    margin: 0 0 var(--space-xs);
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.bullpen-coach-prompt-text {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-secondary);
}

.bullpen-coach-prompt-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

.bullpen-coach-prompt-actions:empty {
    display: none;
}

/* Pitch-type pick: same centered dialog as stance/OK, chip grid scrolls inside the card. */
.bullpen-coach-prompt.is-pitch-pick {
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(0, 0, 0, 0.5);
    padding:
        max(var(--space-md), env(safe-area-inset-top, 0px))
        max(var(--space-md), env(safe-area-inset-right, 0px))
        max(var(--space-md), env(safe-area-inset-bottom, 0px))
        max(var(--space-md), env(safe-area-inset-left, 0px));
}

.bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 22rem);
    max-height: min(80vh, calc(100vh - 2 * var(--space-md) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    max-height: min(80dvh, calc(100dvh - 2 * var(--space-md) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
    padding: 0.75rem;
    border-radius: var(--radius-lg);
    animation: bullpen-prompt-card-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-card::before {
    content: none;
}

.bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-title,
.bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-text {
    flex-shrink: 0;
}

.bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    align-content: start;
    padding-bottom: 2px;
}

.bullpen-coach-prompt.is-pitch-pick .btn-selection {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0.4rem 0.35rem;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    border-radius: var(--radius-md);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: none;
}

.bullpen-coach-prompt.is-pitch-pick .btn-selection:hover:not(:disabled) {
    transform: none;
}

.bullpen-coach-prompt.is-pitch-pick .btn-selection.selected,
.bullpen-coach-prompt.is-pitch-pick .btn-selection.active {
    outline: 3px solid #950000;
    box-shadow: 0 0 0 3px rgba(149, 0, 0, 0.35);
}

.bullpen-coach-prompt.is-pitch-pick .btn-selection:focus-visible {
    outline: 3px solid #950000;
    outline-offset: 2px;
}

@media (max-width: 430px) {
    .bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

@media (min-width: 431px) and (max-width: 767px) {
    .bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-card {
        width: min(100%, 26rem);
        padding: 0.85rem;
    }

    .bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.bullpen-plate-confirm {
    opacity: 0;
    pointer-events: none;
}

.bullpen-plate-confirm.is-ready {
    opacity: 1;
    pointer-events: all;
    cursor: pointer;
}

.bullpen-plate-confirm-bg {
    fill: #4169E1;
    stroke: #fff;
    stroke-width: 0.55;
}

.bullpen-plate-confirm.is-ready:hover .bullpen-plate-confirm-bg,
.bullpen-plate-confirm.is-ready:focus .bullpen-plate-confirm-bg {
    fill: #3557C1;
}

.bullpen-plate-confirm-label {
    fill: #fff;
    font-size: 5.3px;
    font-weight: 800;
    letter-spacing: 0.12px;
    pointer-events: none;
}

.bullpen-coach-prompt.is-choice .bullpen-coach-prompt-actions {
    flex-direction: row;
    justify-content: center;
}

.bullpen-coach-prompt.is-choice .bullpen-hand-btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
}

.bullpen-coach-prompt-actions .btn {
    min-height: 48px;
    width: 100%;
}

.bullpen-coach-prompt-actions .btn:focus-visible,
.bullpen-coach-prompt-actions .bullpen-hand-btn:focus-visible {
    outline: 2px solid var(--sidebar-active);
    outline-offset: 2px;
}

@media (min-width: 768px) {
    .bullpen-coach-prompt-card {
        max-width: 26rem;
        padding: var(--space-lg) var(--space-lg) var(--space-md);
    }

    .bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-card {
        width: min(28rem, calc(100% - 2rem));
        max-width: 28rem;
        max-height: min(72vh, calc(100vh - 3rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
        max-height: min(72dvh, calc(100dvh - 3rem - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)));
        padding: var(--space-md);
    }

    .bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bullpen-coach-prompt.is-pitch-pick .btn-selection {
        min-height: 44px;
        padding: 0.45rem 0.5rem;
        font-size: 0.875rem;
    }

    .bullpen-coach-prompt-title {
        font-size: 1.125rem;
    }

    .bullpen-coach-prompt-text {
        font-size: 0.9375rem;
    }

    /* Single OK: centered, not full width */
    .bullpen-coach-prompt.is-ack .bullpen-coach-prompt-actions .btn {
        width: auto;
        min-width: 9rem;
        margin-inline: auto;
    }

    /* Location set: primary on the right on wide screens (DOM order keeps it first for the keyboard) */
    .bullpen-coach-prompt.is-confirm .bullpen-coach-prompt-actions {
        flex-direction: row-reverse;
    }

    .bullpen-coach-prompt.is-confirm .bullpen-coach-prompt-actions .btn {
        flex: 1 1 0;
        width: auto;
    }
}

@media (min-width: 1024px) {
    .bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-card {
        width: 28rem;
        max-width: 28rem;
        max-height: min(36rem, calc(100vh - 4rem));
        max-height: min(36rem, calc(100dvh - 4rem));
        padding: var(--space-md);
    }
}

@media (max-width: 1023px) and (orientation: landscape) {
    .bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-card {
        width: min(32rem, calc(100% - 2rem));
        max-height: min(88vh, calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1rem));
        max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 1rem));
        padding: 0.55rem 0.75rem 0.45rem;
    }

    .bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-title {
        font-size: 0.95rem;
        margin-bottom: 0.15rem;
    }

    .bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.35rem;
        margin-top: 0.35rem;
    }

    .bullpen-coach-prompt.is-pitch-pick .btn-selection {
        min-height: 44px;
        padding: 0.3rem 0.35rem;
        font-size: 0.75rem;
    }
}

.bullpen-map-chrome {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 40rem;
    margin: 0.55rem auto 0;
    gap: 0.5rem;
}

.bullpen-map-chrome .bullpen-pitch-type-block,
.bullpen-map-chrome .bullpen-map-toggles,
.bullpen-map-chrome .bullpen-legend,
.bullpen-map-chrome .bullpen-legend-note,
.bullpen-map-chrome .bullpen-zone-actions,
.bullpen-map-chrome .bullpen-location-actions {
    width: 100%;
}

.bullpen-map-toggles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.4rem;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    container-type: inline-size;
    container-name: bullpen-map-toggles;
}

.bullpen-sport-toggle,
.bullpen-view-toggle,
.bullpen-stance-toggle {
    display: inline-flex;
    min-width: 0;
    padding: 2px;
    border: 1px solid rgba(201, 162, 39, 0.45);
    border-radius: var(--radius-full);
    background: #1e1e1e;
    gap: 0;
}

.bullpen-sport-toggle {
    flex: 0 1 auto;
    min-width: 5.5rem;
}

.bullpen-view-toggle {
    flex: 0 1 auto;
    min-width: 6.1rem;
}

.bullpen-stance-toggle {
    flex: 0 0 auto;
    width: 4.75rem;
    min-width: 4.75rem;
}

.bullpen-catcher-view-text {
    flex: 0 1 auto;
    font-weight: 700;
    font-size: 0.78rem;
    color: #1a1a1a;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.bullpen-view-btn {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    min-height: 32px;
    padding: 0.15rem 0.45rem;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: #e8dcc0;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    line-height: 1.05;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
}

.bullpen-view-btn::after {
    content: '';
    position: absolute;
    inset: -6px -2px;
}

.bullpen-view-btn-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.bullpen-view-btn-label-short {
    display: none;
}

.bullpen-view-btn.is-active {
    background: #c9a227;
    color: #1a1a1a;
}

.bullpen-view-btn:focus-visible {
    outline: 2px solid #c9a227;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .bullpen-view-btn {
        transition: none;
    }
}

@container bullpen-map-toggles (max-width: 28rem) {
    .bullpen-view-btn-label-full {
        display: none;
    }

    .bullpen-view-btn-label-short {
        display: inline;
    }
}

.bullpen-stance-toggle .bullpen-view-btn:disabled,
.bullpen-sport-toggle .bullpen-view-btn:disabled {
    opacity: 0.55;
    cursor: default;
}

.bullpen-zone-svg {
    aspect-ratio: 148 / 232;
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.bullpen-plot-bg {
    fill: #f3eadc;
    stroke: #9a8060;
    stroke-width: 0.8;
}

.bullpen-dirt {
    fill: #c4a574;
}

.bullpen-zone-rect {
    fill: #fffef8;
    stroke: #1a1a1a;
    stroke-width: 1.4;
}

.bullpen-grid-line {
    stroke: rgba(26, 26, 26, 0.38);
    stroke-width: 0.55;
}

.bullpen-home-plate-img {
    pointer-events: none;
}

.bullpen-home-plate {
    fill: #f3eee1;
    stroke: #2a2418;
    stroke-width: 1.35;
    stroke-linejoin: round;
}

.bullpen-home-plate-inner {
    fill: none;
    stroke: rgba(70, 62, 48, 0.42);
    stroke-width: 0.55;
    stroke-linejoin: round;
    pointer-events: none;
}

.bullpen-home-plate-sheen {
    pointer-events: none;
}

.bullpen-plate-skirt {
    fill: #8f8570;
    pointer-events: none;
}

.bullpen-plate-front {
    fill: #e7dfcc;
    stroke: #2a2418;
    stroke-width: 0.7;
    stroke-linejoin: round;
    pointer-events: none;
}

.bullpen-plate-far-lip {
    fill: none;
    stroke: #fffaf0;
    stroke-width: 0.55;
    opacity: 0.58;
    pointer-events: none;
}

.bullpen-axis-label {
    font-size: 4.2px;
    font-weight: 700;
    fill: #374151;
    letter-spacing: 0.4px;
    paint-order: stroke;
    stroke: rgba(243, 234, 220, 0.92);
    stroke-width: 1.15px;
    pointer-events: none;
}

.bullpen-catcher-label {
    font-size: 3.8px;
    font-weight: 700;
    fill: #1a1a1a;
}

.bullpen-report-view-label {
    font-size: 6.8px;
    font-weight: 800;
    letter-spacing: 0.85px;
    fill: #111827;
}

.bullpen-batter-sil {
    pointer-events: none;
}

.bullpen-batter-sil-img {
    opacity: 0.78;
}

.bullpen-batter-stance {
    font-size: 3.4px;
    font-weight: 800;
    fill: #5c4033;
    letter-spacing: 0.3px;
    pointer-events: none;
}

.bullpen-zone-hit {
    fill: transparent;
    cursor: crosshair;
}

.bullpen-mini-grid-line {
    stroke: rgba(42, 36, 24, 0.28);
    stroke-width: 0.36;
}

.bullpen-plate-grid-line {
    stroke: rgba(42, 36, 24, 0.38);
    stroke-width: 0.55;
}

.bullpen-plate-mini-grid-line {
    stroke: rgba(42, 36, 24, 0.22);
    stroke-width: 0.32;
}

.bullpen-target-cell,
.bullpen-target-zone {
    fill: rgba(29, 78, 216, 0.14);
    stroke: none;
    pointer-events: none;
}

.bullpen-zone-split {
    stroke: #1a1a1a;
    stroke-width: 0.7;
    pointer-events: none;
}

.bullpen-zone-split-outline {
    fill: none;
    stroke: #1a1a1a;
    stroke-width: 1.05;
    pointer-events: none;
}

.bullpen-target-zone.is-dragging {
    stroke-dasharray: 1.6 1.1;
}

.bullpen-zone-handle {
    fill: #ffffff;
    stroke: #1D4ED8;
    stroke-width: 0.7;
    pointer-events: none;
}

.bullpen-pitch-dot {
    stroke: #1a1a1a;
    stroke-width: 0.55;
    pointer-events: none;
}

.bullpen-ball-disk {
    fill: rgba(186, 198, 214, 0.42);
    stroke: #1f2937;
    stroke-width: 0.45;
    pointer-events: none;
}

.bullpen-target-ball {
    pointer-events: none;
}

/* Last saved zone for the selected pitch, shown while a new one is drawn */
.bullpen-target-ghost {
    fill: none;
    stroke-width: 0.6;
    stroke-dasharray: 1.6 1.2;
    opacity: 0.6;
    pointer-events: none;
}

.bullpen-target-mark circle {
    fill: none;
    stroke: #1D4ED8;
    stroke-width: 0.85;
}

.bullpen-target-mark line {
    stroke: #1D4ED8;
    stroke-width: 0.85;
}

.bullpen-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.45rem 0.65rem;
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* Live session: hide the pitch-type color key, but keep its row so the
   tool buttons stay the same distance below the view toggles. */
#live-bullpen-page #bullpen-pitch-legend {
    display: flex !important;
    visibility: hidden;
    pointer-events: none;
}

.bullpen-legend-swatch {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    margin-right: 0.3rem;
    border-radius: 50%;
    vertical-align: -1px;
}

.bullpen-legend-swatch--target {
    background: #1D4ED8;
}

.bullpen-type-with-dot {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    vertical-align: middle;
}

.bullpen-type-dot {
    margin-right: 0;
    border: 1px solid #1a1a1a;
    flex: 0 0 auto;
    box-sizing: border-box;
}

.bullpen-legend-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border, #d1d5db);
    border-radius: var(--radius-full);
    background: var(--surface, #fff);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    cursor: pointer;
    min-height: 44px;
}

.bullpen-legend-filter.is-active,
.bullpen-legend-filter[aria-pressed="true"] {
    border-color: #8B0000;
    background: #8B0000;
    color: #fff;
}

.bullpen-legend-filter.is-active .bullpen-legend-swatch {
    border-color: rgba(255, 255, 255, 0.75);
}

.bullpen-zone-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    gap: var(--space-sm);
    margin: 0 auto;
    max-width: 28rem;
}

#bullpen-new-pitch-type-zone-btn {
    display: none;
}

.bullpen-live-chrome {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
}

.bullpen-live-chrome-text {
    flex: 1 1 12rem;
    min-width: 0;
}

.bullpen-live-chrome-text h2 {
    font-size: 1.5rem;
    margin: 0 0 var(--space-xs);
}

.bullpen-live-chrome-text p {
    margin: 0;
}

.bullpen-live-chrome-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-left: auto;
    align-items: center;
}

#bullpen-live-session-actions.bullpen-live-chrome-actions {
    width: 100%;
    margin: var(--space-md) 0 0;
    margin-left: 0;
    padding-top: var(--space-md);
    border-top: 2px solid var(--border);
    justify-content: flex-start;
}

@media (max-width: 1023px) {
    #bullpen-live-session-actions.bullpen-live-chrome-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
        width: 100%;
        margin-left: 0;
        align-items: stretch;
        justify-content: stretch;
    }

    #bullpen-live-session-actions > .btn:not([hidden]),
    #bullpen-live-session-actions > .btn-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px !important;
        width: 100% !important;
        min-width: 0 !important;
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.55rem !important;
        white-space: nowrap;
        box-sizing: border-box;
    }

    #bullpen-live-session-actions .btn-label-short {
        display: none;
    }

    /* Author display:flex would otherwise override UA [hidden] and leave a grid hole. */
    #bullpen-resume-session-btn[hidden] {
        display: none !important;
    }

    /* Resume visible → Back | End, Pause | Resume, View Report on its own row. */
    #bullpen-resume-session-btn:not([hidden]) ~ #bullpen-view-report-btn {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    #bullpen-live-session-actions .btn-label-full {
        display: none;
    }

    #bullpen-live-session-actions .btn-label-short {
        display: inline;
    }
}

#bullpen-pause-session-btn,
.bullpen-pause-session-btn {
    background-color: #f5c518;
    color: #1f2937;
    border-color: #d4a017;
}

#bullpen-pause-session-btn:hover:not(:disabled),
.bullpen-pause-session-btn:hover:not(:disabled) {
    background-color: #e0b000;
    color: #1f2937;
    border-color: #b8860b;
}

#bullpen-resume-session-btn {
    background-color: var(--edit-color);
    color: #fff;
    border-color: var(--edit-color);
}

#bullpen-resume-session-btn:hover:not(:disabled) {
    background-color: var(--edit-hover);
}

.bullpen-coach-prompt-session-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    flex-shrink: 0;
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}

.bullpen-coach-prompt-session-actions[hidden] {
    display: none !important;
}

.bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-session-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
}

.bullpen-coach-prompt.is-pitch-pick .bullpen-coach-prompt-session-actions .btn {
    flex: 1 1 6.5rem;
    width: auto;
    min-width: 0;
    min-height: 44px;
    padding: 0.4rem 0.35rem;
    font-size: 0.75rem;
    line-height: 1.15;
    white-space: nowrap;
}

.btn-label-short {
    display: none;
}

#bullpen-resize-target-btn[aria-pressed="true"] {
    background: #8B0000;
    color: #fff;
    border-color: #8B0000;
}

.bullpen-report-offer {
    margin-top: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(149, 0, 0, 0.06);
}

.bullpen-report-offer[hidden] {
    display: none;
}

.bullpen-report-offer-text {
    margin: 0 0 var(--space-sm);
    font-weight: 650;
    color: var(--text-primary);
    text-align: center;
}

.bullpen-report-offer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    justify-content: center;
}

.bullpen-report-pitch-type-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-xs);
}

.bullpen-report-map-wrap {
    flex: 1 1 16rem;
    min-width: 0;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: visible;
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.bullpen-report-maps-section {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: var(--space-sm) 0 var(--space-md);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.bullpen-report-maps-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    align-items: stretch;
    padding: 0.45rem 0.55rem 0.7rem;
}

.bullpen-report-maps-row .bullpen-report-map-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 18rem;
    min-width: min(100%, 16rem);
    max-width: 36rem;
    box-shadow: none;
}

/* A second legend row must not drop one map. The artwork sits on the
   bottom edge so both plates line up when the cards share a row. */
.bullpen-report-maps-row .bullpen-report-legend {
    flex-shrink: 0;
}

.bullpen-report-maps-row .bullpen-report-map-svg {
    margin-top: auto;
    flex-shrink: 0;
}

.bullpen-report-map-svg {
    display: block;
    width: 100%;
    height: auto;
    padding: 0.35rem 0.45rem 0.55rem;
    overflow: visible;
}

.bullpen-report-map-svg.bullpen-zone-svg {
    aspect-ratio: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
}

#view-bullpen-session-report-page .bullpen-report-maps-row .bullpen-report-map-wrap {
    flex: 1 1 18rem;
    min-width: min(100%, 16rem);
    max-width: 36rem;
}

.bullpen-report-legend {
    padding: 0.55rem 0.7rem 0.25rem;
    margin: 0;
    justify-content: center;
}

.bullpen-aggregate-type-filter {
    justify-content: flex-start;
    margin: 0.15rem 0 0.85rem;
    padding: 0.15rem 0 0.35rem;
}

.bullpen-aggregate-top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
    margin-bottom: var(--space-sm);
}

.bullpen-aggregate-top .game-summary-table {
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .bullpen-aggregate-top {
        flex-direction: row;
        align-items: flex-start;
    }

    .bullpen-aggregate-top .game-summary-table {
        flex: 0 0 auto;
    }

    .bullpen-aggregate-top .bullpen-map-type-section {
        flex: 1 1 16rem;
        margin: 0;
        min-width: 0;
    }
}

.bullpen-map-type-section-body {
    padding: 0.7rem 0.85rem 0.85rem;
}

.bullpen-map-type-section .bullpen-aggregate-type-filter {
    margin: 0;
    padding: 0;
}

.bullpen-map-type-section .bullpen-map-type-prompt {
    margin: 0.65rem 0 0;
}

.bullpen-aggregate-type-filter-label {
    font-weight: 700;
    color: var(--text-primary);
    margin-right: 0.15rem;
}

.bullpen-report-legend--framed {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: fit-content;
    max-width: calc(100% - 0.9rem);
    margin: 0.4rem auto 0.2rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fafafa;
    box-sizing: border-box;
}

.bullpen-tendency-subhead {
    display: block;
    font-size: 0.7em;
    font-weight: 600;
    line-height: 1.15;
    opacity: 0.8;
}

#bullpen-report-results .bullpen-result-call,
#bullpen-report-results .bullpen-result-sep {
    color: #111827;
    font-weight: 700;
}

#bullpen-report-results .bullpen-result-command.is-on-target {
    color: #228B22;
    font-weight: 700;
}

#bullpen-report-results .bullpen-result-command.is-miss {
    color: #C41E3A;
    font-weight: 700;
}

#bullpen-report-results,
#bullpen-aggregate-report-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.bullpen-report-summary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

#bullpen-report-results .bullpen-report-summary-row > .game-summary-table {
    flex: 1 1 220px !important;
    width: auto !important;
    min-width: min(100%, 220px) !important;
    max-width: 28rem !important;
}

.bullpen-report-stance-card {
    flex: 1 1 18rem;
    min-width: min(100%, 16rem);
    max-width: 36rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

#bullpen-report-results .bullpen-report-stance-card .bullpen-report-table {
    width: 100%;
    min-width: 0;
}

.bullpen-report-pitch-type-block {
    margin-top: var(--space-lg);
    max-width: 100%;
    min-width: 0;
}

.bullpen-report-pitch-type-block .game-report-section-title {
    white-space: normal;
    line-height: 1.3;
    overflow-wrap: break-word;
}

#bullpen-report-results .bullpen-report-table-wrap,
.bullpen-report-table-wrap {
    max-height: none;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-right: 0;
}

#bullpen-report-results .bullpen-report-table,
.bullpen-report-table-wrap .bullpen-report-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
    margin-top: 0;
}

#bullpen-report-results .bullpen-report-table th,
#bullpen-report-results .bullpen-report-table td {
    width: auto;
    min-width: 3.25rem;
    max-width: none;
    white-space: nowrap;
    padding: 8px 10px;
}

#bullpen-report-results .bullpen-report-table th:has(.bullpen-tendency-subhead) {
    white-space: normal;
    min-width: 7.5rem;
}

#bullpen-report-results .bullpen-report-table th,
#bullpen-report-results .bullpen-report-table th:not(:first-child) {
    position: static !important;
    top: auto !important;
    box-shadow: none !important;
}

#bullpen-report-results .bullpen-report-table th:first-child,
#bullpen-report-results .bullpen-report-table td:first-child {
    position: static !important;
    left: auto !important;
    top: auto !important;
    z-index: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 1%;
    white-space: nowrap;
    box-shadow: none !important;
    background-color: transparent !important;
}

#bullpen-report-results .bullpen-report-table tbody tr:nth-child(even) td:first-child,
#bullpen-report-results .bullpen-report-table tbody tr:nth-child(odd) td:first-child {
    background-color: transparent !important;
}

#bullpen-report-results .bullpen-tendency-cell {
    white-space: nowrap;
}

#bullpen-report-results .bullpen-report-table th.bullpen-log-result,
#bullpen-report-results .bullpen-report-table td.bullpen-log-result {
    text-align: left;
}

/* Session-report Pitch Log: about ten rows, then scroll. The live
   Pitch-by-Pitch Log already does this. Other bullpen tables stay full height. */
#bullpen-report-results .bullpen-report-pitch-log {
    max-height: 27.75rem !important;
    overflow-x: auto;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

#bullpen-report-results .bullpen-report-pitch-log .bullpen-report-table thead th,
#bullpen-report-results .bullpen-report-pitch-log .bullpen-report-table thead th:first-child {
    position: sticky !important;
    top: 0 !important;
    z-index: 3 !important;
    background-color: var(--background, #f3f4f6) !important;
}

.bullpen-tendency {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.28rem;
    font-weight: 700;
    color: #1f2937;
}

.bullpen-tendency-arrow {
    display: inline-block;
    width: 1.05rem;
    height: 1.05rem;
    flex: 0 0 auto;
    color: #111827;
    transform-origin: 50% 50%;
    overflow: visible;
}

.bullpen-tendency-arrow--career {
    width: 0.8rem;
    height: 0.8rem;
    color: #6b7280;
}

.bullpen-tendency-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: inset 0 0 0 1px rgba(22, 163, 74, 0.35);
}

.bullpen-tendency-label {
    font-size: 0.75rem;
    font-weight: 700;
}

.bullpen-tendency-career {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    margin-left: 0.15rem;
    font-size: 0.65rem;
    font-weight: 650;
    color: #6b7280;
}

.bullpen-tendency-map-arrow {
    pointer-events: none;
}

.bullpen-tendency-map-arrow-halo {
    stroke: #fff;
    stroke-width: 3.1;
    stroke-linecap: round;
}

.bullpen-tendency-map-arrow-line {
    stroke: #111827;
    stroke-width: 1.85;
    stroke-linecap: round;
}

.bullpen-tendency-map-arrow-head {
    fill: none;
    stroke: #111827;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bullpen-tendency-map-label {
    fill: #111827;
    font-size: 4.5px;
    font-weight: 700;
    paint-order: stroke;
    stroke: #fff;
    stroke-width: 0.75px;
}

.bullpen-tendency-toggle-icon {
    display: inline-block;
    font-size: 0.72rem;
    line-height: 1;
    color: #111827;
}

.bullpen-tendency-toggle.is-active .bullpen-tendency-toggle-icon,
.bullpen-tendency-toggle[aria-pressed="true"] .bullpen-tendency-toggle-icon {
    color: #fff;
}

.bullpen-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.bullpen-session-status {
    margin: var(--space-sm) 0 0;
    font-weight: 650;
    color: var(--sidebar-active);
    font-size: 0.9rem;
}

.bullpen-recent-head,
.bullpen-recent-row {
    display: grid;
    grid-template-columns:
        1.75rem
        5.25rem
        6.6rem
        minmax(8rem, 1fr)
        4.85rem
        3.1rem;
    gap: 0.45rem;
    align-items: center;
}

.bullpen-recent-table {
    min-width: 32rem;
}

.bullpen-recent-head,
.bullpen-recent-row {
    min-width: 32rem;
}

.bullpen-recent-head {
    position: sticky;
    top: 0;
    z-index: 1;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
    padding: 0.2rem 0 0.25rem;
    background: var(--surface, #fff);
}

.bullpen-recent-sort {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    line-height: 1.2;
}

.bullpen-recent-sort:hover,
.bullpen-recent-sort.is-active {
    color: var(--text-primary);
}

.bullpen-recent-head .bullpen-recent-sort:nth-child(3) {
    text-align: center;
    width: 100%;
}

.bullpen-recent-head .bullpen-recent-sort:nth-child(5),
.bullpen-recent-head .bullpen-recent-sort:nth-child(6) {
    text-align: right;
    width: 100%;
}

.bullpen-recent-row {
    padding: 0.28rem 0;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
}

#bullpen-recent-list,
.bullpen-recent-scroll {
    max-height: 22rem;
    overflow-x: auto;
    overflow-y: auto;
    min-width: 0;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
}

.bullpen-recent-num {
    color: var(--text-secondary);
}

.bullpen-recent-stance {
    text-align: center;
    font-weight: 650;
}

.bullpen-recent-mph {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.bullpen-recent-result {
    font-variant-numeric: tabular-nums;
    min-width: 0;
    white-space: nowrap;
}

.bullpen-result-call {
    color: #111827;
    font-weight: 700;
}

.bullpen-result-sep {
    color: #111827;
    font-weight: 700;
}

.bullpen-result-command.is-on-target {
    color: #228B22;
    font-weight: 700;
}

.bullpen-result-command.is-miss {
    color: #C41E3A;
    font-weight: 700;
}

.bullpen-recent-acc {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (min-width: 768px) {
    .bullpen-recent-table,
    .bullpen-recent-head,
    .bullpen-recent-row {
        min-width: 0;
    }

    .bullpen-recent-head,
    .bullpen-recent-row {
        grid-template-columns:
            1.75rem 5.25rem 6.6rem minmax(8.5rem, 1.4fr) 4.85rem 3.25rem;
        gap: var(--space-sm);
    }

    .bullpen-recent-head {
        font-size: 0.6875rem;
    }

    .bullpen-recent-row {
        font-size: 0.8125rem;
    }
}

.bullpen-history-card {
    padding: var(--space-lg);
    min-height: 0;
}

.bullpen-pitcher-group {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    padding: var(--space-md);
}

.bullpen-pitcher-group:last-child {
    margin-bottom: 0;
}

.bullpen-pitcher-group-header {
    display: block;
    padding: 0;
    margin: 0;
    border: 0;
}

.bullpen-pitcher-group-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.bullpen-pitcher-group.is-expanded .bullpen-pitcher-group-toggle {
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border);
}

.bullpen-pitcher-group-chevron {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.1rem;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}

.bullpen-pitcher-group.is-collapsed .bullpen-pitcher-group-chevron {
    transform: rotate(-45deg);
}

.bullpen-pitcher-group-sessions[hidden] {
    display: none !important;
}

.bullpen-pitcher-group-avatar {
    flex-shrink: 0;
}

.bullpen-pitcher-group-avatar .pitcher-avatar {
    width: 40px;
    height: 40px;
    margin-bottom: 0;
    font-size: 0.95rem;
}

.bullpen-pitcher-group-identity {
    min-width: 0;
    flex: 1;
}

.bullpen-pitcher-group-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin: 0;
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}

.bullpen-pitcher-group-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bullpen-pitcher-group-meta,
.bullpen-pitcher-group-count {
    margin: 0.15rem 0 0;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    line-height: 1.35;
}

.bullpen-pitcher-group-meta {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bullpen-pitcher-group-count {
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
}

.bullpen-pitcher-group-sessions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.bullpen-pitcher-group-sessions .bullpen-session-row:last-child {
    margin-bottom: 0;
}

.bullpen-session-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
        "meta"
        "stats"
        "actions";
    gap: var(--space-sm);
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
}

.bullpen-session-meta {
    grid-area: meta;
    min-width: 0;
}

.bullpen-session-row:last-child {
    margin-bottom: 0;
}

.bullpen-session-row.is-current {
    border-color: var(--primary-color);
    background: rgba(65, 105, 225, 0.06);
}

.bullpen-session-title-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.bullpen-session-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bullpen-session-date-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.bullpen-session-stats-row {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border);
}

.bullpen-session-stats-row .game-list-stat-value,
.bullpen-session-stats-row .game-list-stat-label {
    white-space: nowrap;
}

.bullpen-session-actions {
    grid-area: actions;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xs);
    align-items: stretch;
}

.bullpen-session-actions:not(.bullpen-session-actions--has-report) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bullpen-session-actions-primary,
.bullpen-session-actions-danger {
    display: contents;
}

.bullpen-session-actions-danger {
    padding-top: 0;
    border-top: none;
}

.bullpen-session-actions .btn,
.bullpen-session-actions .btn.btn-sm {
    width: 100%;
    min-width: 0;
    min-height: 44px !important;
}

.bullpen-zone-pick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xs);
    margin: 0 0 var(--space-sm);
}

.bullpen-zone-pick-btn {
    min-height: 44px;
    padding: 0.35rem 0.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-primary);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.bullpen-zone-pick-btn:hover,
.bullpen-zone-pick-btn:focus-visible {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(65, 105, 225, 0.2);
}

.bullpen-zone-pick-btn.is-active {
    border-color: var(--primary-color);
    background: rgba(65, 105, 225, 0.12);
    color: var(--primary-color);
}

#bullpen-zone-wrap:focus-visible {
    outline: 3px solid rgba(65, 105, 225, 0.45);
    outline-offset: 2px;
}

#bullpen-pa-count-card.hidden,
#bullpen-pa-count-card[hidden] {
    display: none !important;
}

#bullpen-command-stats-card.hidden,
#bullpen-command-stats-card[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    .bullpen-pitcher-group-avatar .pitcher-avatar {
        width: 36px !important;
        height: 36px !important;
    }

    .bullpen-pitcher-group-toggle {
        gap: 0.35rem;
    }

    .bullpen-pitcher-group-count {
        font-size: 0.75rem;
    }

    #bullpen-page .page-header {
        margin-bottom: var(--space-sm);
    }

    #bullpen-page .page-header p {
        display: none;
    }

    .bullpen-history-card {
        padding: var(--space-md);
    }

    #bullpen-page .bullpen-session-actions .btn {
        min-height: 44px !important;
        width: 100% !important;
        min-width: 0;
        font-size: 0.8125rem !important;
        padding: 0.45rem 0.3rem !important;
        white-space: nowrap;
    }

    .bullpen-live-chrome-text h2 {
        font-size: 1.2rem;
    }

    .bullpen-live-chrome-actions {
        width: 100%;
        margin-left: 0;
    }

    .bullpen-zone-actions .btn-label-full {
        display: none;
    }

    .bullpen-zone-actions .btn-label-short {
        display: inline;
    }

    .bullpen-live-stats {
        padding: var(--space-sm) var(--space-md);
        margin-bottom: var(--space-sm);
    }

    .bullpen-live-stats-title {
        font-size: 1.05rem;
    }

    .bullpen-live-count {
        font-size: 1rem;
    }

    .bullpen-live-flow {
        min-width: 0;
    }

    .bullpen-pitch-context {
        margin-bottom: 0.4rem;
        padding: 0.4rem 0.55rem;
    }

    .bullpen-pitch-context .btn {
        min-height: 44px !important;
        width: auto !important;
    }

    #live-bullpen-page .game-stage {
        padding: var(--space-md);
        margin-bottom: var(--space-sm);
    }

    #live-bullpen-page .stage-title {
        font-size: 1.05rem;
        margin-bottom: var(--space-sm);
    }

    .bullpen-pitch-type-title {
        display: block;
        font-size: 0.82rem;
        margin: 0 0 0.3rem;
        text-align: center;
    }

    /* Phones: every pitch type stays visible — wrap to as many rows as needed
       instead of a single clipped, scroll-hidden row. */
    #bullpen-pitch-types.bullpen-chip-row {
        flex-wrap: wrap;
        overflow: visible;
        gap: 0.35rem;
        margin: 0 0 0.35rem;
        padding-bottom: 0;
        justify-content: center;
    }

    #bullpen-pitch-types .bullpen-chip {
        min-height: 40px;
        min-width: 44px;
        padding: 0.25rem 0.55rem;
        font-size: 0.75rem;
        gap: 0.3rem;
    }

    #bullpen-pitch-types .btn-label-full {
        display: none;
    }

    #bullpen-pitch-types .btn-label-short {
        display: inline;
    }

    #bullpen-pitch-types .bullpen-chip-swatch {
        width: 8px;
        height: 8px;
    }

    .bullpen-legend-note {
        display: none;
    }

    .bullpen-section-title {
        font-size: 1rem;
    }

    .bullpen-location-actions .btn {
        min-height: 48px;
        width: 100%;
    }

    #bullpen-stage-mph.game-stage {
        padding: 0.55rem 0.7rem 0.65rem;
        margin-bottom: 0.4rem;
    }

    #bullpen-mph-display {
        font-size: 2rem;
        min-height: 2.75rem;
    }

    .bullpen-command-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-xs);
        max-width: 100%;
    }

    .bullpen-command-stats .stat-card {
        padding: var(--space-sm) 0.35rem;
    }

    .bullpen-command-stats .stat-value {
        font-size: 1.25rem;
    }

    .bullpen-setup {
        padding: 0.6rem 0.75rem;
        margin-bottom: var(--space-sm);
    }

    .bullpen-setup-grid {
        margin-bottom: 0.45rem;
    }

    .bullpen-prompt {
        min-height: 1.1rem;
        margin-bottom: 0.35rem;
        padding: 0.3rem 0.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
    }

    .bullpen-zone-panel {
        padding: 0.55rem 0.65rem 0.7rem;
        margin-top: var(--space-sm);
    }

    .bullpen-zone-wrap {
        max-width: 100%;
    }

    .bullpen-zone-stage {
        display: flex;
        justify-content: center;
    }

    .bullpen-zone-svg {
        width: auto;
        height: min(64dvh, calc(100dvh - 18.75rem));
        max-width: min(100cqw, 100%);
        min-height: 240px;
        margin-inline: auto;
    }

    .bullpen-legend {
        margin: 0;
        gap: 0.3rem 0.4rem;
        font-size: 0.72rem;
    }

    .bullpen-legend-filter {
        min-height: 44px;
        padding: 0.15rem 0.45rem;
        font-size: 0.72rem;
    }

    .bullpen-chip {
        min-height: 40px;
        padding: 0.3rem 0.65rem;
        font-size: 0.8rem;
    }

    .bullpen-map-chrome {
        max-width: 100%;
        margin-top: 0.4rem;
        gap: 0.4rem;
    }

    .bullpen-zone-actions {
        position: static;
        padding: 0;
        background: transparent;
        margin: 0 auto;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bullpen-zone-actions .btn.btn-sm {
        min-height: 44px !important;
        width: 100% !important;
        font-size: 0.8125rem !important;
        padding: 0.5rem 0.35rem !important;
    }

    #live-bullpen-page .form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-sm);
    }

    #live-bullpen-page .form-actions .btn-primary {
        flex: 1 1 100%;
        min-height: 48px;
    }

    #live-bullpen-page .form-actions .btn-outline,
    #live-bullpen-page .form-actions .btn-back {
        flex: 1 1 calc(50% - var(--space-sm));
        min-height: 44px;
        width: auto;
    }

    #live-bullpen-page .form-actions > :only-child {
        flex: 1 1 100%;
    }

    #bullpen-report-results .game-summary-cards {
        flex-direction: column;
    }

    #bullpen-report-results .bullpen-report-map-wrap,
    #bullpen-aggregate-report-content .bullpen-report-map-wrap {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        width: 100%;
    }

    #bullpen-report-results .bullpen-report-maps-row .bullpen-report-map-wrap,
    #bullpen-aggregate-report-content .bullpen-report-maps-row .bullpen-report-map-wrap {
        min-width: 0;
        max-width: 100%;
    }

    #bullpen-report-results .game-report-section-title,
    #bullpen-aggregate-report-content .game-report-section-title {
        white-space: normal;
        line-height: 1.3;
        overflow-wrap: break-word;
    }

    #view-bullpen-session-report-page .form-actions .btn,
    #view-bullpen-aggregate-report-page .form-actions .btn {
        white-space: normal;
        line-height: 1.2;
        min-height: 44px;
    }

    .bullpen-catcher-view-text,
    .bullpen-view-btn {
        font-size: 0.62rem;
    }

    .bullpen-view-btn {
        min-height: 30px;
        padding: 0.08rem 0.28rem;
    }

    .bullpen-map-toggles {
        gap: 0.3rem;
        margin: 0 auto;
    }

    .bullpen-sport-toggle,
    .bullpen-view-toggle,
    .bullpen-stance-toggle {
        min-height: 30px;
    }

    .bullpen-stance-toggle {
        width: 4.6rem;
        min-width: 4.6rem;
    }
}

@media (max-width: 640px) {
    .bullpen-setup,
    .bullpen-zone-panel,
    .bullpen-side-panel .card,
    .bullpen-history-card {
        padding: var(--space-md);
    }

    .bullpen-zone-panel {
        padding: 0.65rem 0.7rem 0.8rem;
    }

    .bullpen-hand-btn,
    .bullpen-chip {
        min-height: 40px;
    }

    .bullpen-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bullpen-command-stats {
        gap: 0.25rem;
    }

    .bullpen-command-stats .stat-card {
        padding: 0.4rem 0.3rem;
    }

    .bullpen-command-stats .stat-value {
        font-size: 1.25rem;
    }

    .bullpen-command-stats .stat-label {
        font-size: 0.6875rem;
    }
}

@media (max-width: 767px) and (orientation: landscape) {
    .bullpen-zone-svg {
        width: auto;
        height: min(78dvh, calc(100dvh - 12rem));
        max-width: min(100cqw, 100%);
        min-height: 180px;
    }
}

@media (max-width: 400px) {
    .bullpen-zone-svg {
        width: auto;
        height: min(56dvh, calc(100dvh - 20rem));
        max-width: min(100cqw, 100%);
        min-height: 220px;
    }

    .bullpen-catcher-view-text,
    .bullpen-view-btn {
        font-size: 0.62rem;
    }

    .bullpen-view-btn-label-full {
        display: none;
    }

    .bullpen-view-btn-label-short {
        display: inline;
    }

    .bullpen-command-stats .stat-card {
        padding: 0.35rem 0.25rem;
    }

    .bullpen-command-stats .stat-value {
        font-size: 1.125rem;
    }

    .bullpen-command-stats .stat-label {
        font-size: 0.625rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .bullpen-live-stats-title {
        font-size: 1rem;
    }

    .bullpen-live-count-row {
        gap: var(--space-md);
    }
}

@media (min-width: 768px) {
    .bullpen-landing-toolbar {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--space-md);
    }

    .bullpen-landing-actions {
        width: auto;
        flex: 0 1 auto;
    }

    .bullpen-landing-actions .btn {
        flex: 0 1 auto;
        min-width: 9.5rem;
    }

    .bullpen-reports-grid {
        grid-template-columns: 1fr 1fr;
    }

    .bullpen-session-row {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        grid-template-areas:
            "meta stats"
            "actions actions";
        align-items: center;
        column-gap: var(--space-md);
        row-gap: var(--space-sm);
    }

    .bullpen-session-stats-row {
        padding-top: 0;
        border-top: none;
    }

    .bullpen-session-actions .btn.btn-sm {
        min-height: 44px;
        white-space: nowrap;
    }

    .bullpen-map-chrome {
        max-width: 40rem;
    }

    .bullpen-zone-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: center;
        max-width: 40rem;
    }

    .bullpen-zone-actions .btn {
        min-width: 0;
    }

    .bullpen-zone-actions .btn.btn-sm {
        min-height: 40px;
    }

    .bullpen-pitch-type-title {
        font-size: 0.95rem;
        margin-bottom: 0.35rem;
        text-align: center;
    }

    #bullpen-pitch-types .bullpen-chip {
        min-height: 40px;
        padding: 0.35rem 0.7rem;
        font-size: 0.8125rem;
    }

    .bullpen-zone-svg {
        width: auto;
        height: min(60dvh, calc(100dvh - 20rem));
        max-width: min(100cqw, 32rem);
        min-height: 320px;
        margin-inline: auto;
    }

    .bullpen-location-actions {
        justify-content: flex-end;
    }

    .bullpen-location-actions .btn {
        width: auto;
        min-width: 10rem;
    }

    .bullpen-zone-stage .bullpen-location-actions {
        justify-content: stretch;
    }

    .bullpen-zone-stage .bullpen-location-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .bullpen-command-stats {
        max-width: min(100%, 32rem);
        gap: var(--space-sm);
    }

    .bullpen-command-stats .stat-card {
        padding: var(--space-md) var(--space-sm);
    }

    .bullpen-command-stats .stat-value {
        font-size: 1.6rem;
    }
}

@media (min-width: 1024px) {
    #bullpen-page {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .bullpen-live-shell {
        max-width: min(100%, 1100px);
        margin-left: auto;
        margin-right: auto;
    }

    .bullpen-session-row {
        grid-template-columns: minmax(14rem, 1.4fr) minmax(12rem, 1fr) auto;
        grid-template-areas: "meta stats actions";
        align-items: center;
        gap: var(--space-md);
    }

    .bullpen-session-stats-row {
        padding-top: 0;
        border-top: none;
    }

    .bullpen-zone-panel {
        padding: var(--space-md) var(--space-lg);
    }

    .bullpen-zone-svg {
        width: auto;
        height: min(64dvh, calc(100dvh - 18rem));
        max-width: min(100cqw, 36rem);
        min-height: 340px;
        margin-inline: auto;
    }

    .bullpen-session-actions .btn.btn-sm,
    .bullpen-zone-actions .btn.btn-sm {
        min-height: 44px;
        padding: var(--space-xs) var(--space-md);
    }

    #bullpen-pa-count-card {
        display: grid;
        grid-template-columns: auto 1fr auto auto;
        align-items: center;
        gap: var(--space-lg);
        text-align: left;
    }

    .bullpen-command-stats {
        max-width: min(100%, 36rem);
        gap: var(--space-md);
    }

    .bullpen-command-stats .stat-card {
        padding: var(--space-md);
    }

    .bullpen-command-stats .stat-value {
        font-size: 1.85rem;
    }
}

@media (min-width: 1280px) {
    .bullpen-live-shell {
        max-width: min(100%, 1100px);
    }

    .bullpen-workspace {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }

    #live-bullpen-page .bullpen-zone-panel {
        padding: var(--space-md);
    }

    .bullpen-zone-svg {
        width: auto;
        height: min(68dvh, calc(100dvh - 16rem));
        max-width: min(100cqw, 40rem);
        min-height: 360px;
        margin-inline: auto;
    }
}

@media (min-width: 768px) and (orientation: landscape) and (max-height: 820px) {
    .bullpen-zone-svg {
        width: auto;
        height: min(62dvh, calc(100dvh - 14rem));
        max-width: min(100cqw, 24rem);
        min-height: 260px;
        margin-inline: auto;
    }

    #live-bullpen-page .bullpen-zone-panel {
        padding: 0.65rem 1rem 0.75rem;
    }
}

#bullpen-setup-page .game-setup-identity {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md);
}

@media (min-width: 720px) {
    #bullpen-setup-page .game-setup-identity {
        grid-template-columns: minmax(10rem, 0.7fr) minmax(12rem, 1fr);
        column-gap: var(--space-lg);
        align-items: start;
    }
}

#live-bullpen-page .bullpen-zone-wrap {
    margin: 0 auto;
}

.bullpen-pitch-acronym {
    font-size: 2.45px;
    font-weight: 400;
    fill: #ffffff;
    paint-order: stroke;
    stroke: rgba(17, 24, 39, 0.75);
    stroke-width: 0.42px;
    pointer-events: none;
}

.bullpen-pending-mark circle {
    stroke: #111827;
    stroke-width: 0.7;
    stroke-dasharray: 1.4 0.9;
}

#bullpen-command-stats-card .game-stats-summary {
    justify-content: center;
}