/* ===== Ballpark Maestro Dark Theme ===== */
:root {
    /* Surfaces */
    --bg: #16161f;
    --panel: #1e1e2e;
    --panel-2: #262636;
    --panel-3: #2f2f42;
    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    /* Text */
    --text: #ececf5;
    --text-muted: #a8a8b8;
    --text-dim: #75758a;

    /* Brand / accents */
    --accent: #ffd166;
    --accent-2: #f4a261;
    --good: #2ecc71;
    --good-deep: #1e8449;
    --info: #3498db;
    --info-deep: #1f6aa5;
    --bad: #e74c3c;
    --bad-deep: #962d22;
    --warn: #f1c40f;
    --warn-deep: #b7950b;

    /* Radii / shadows */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(0, 0, 0, 0.35);

    /* Typography */
    --font-body: 'Inter', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: 'Oswald', 'Bebas Neue', 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

html, body {
    font-family: var(--font-body);
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* iOS/iPadOS: kill the gray tap-flash and text-callout so buttons feel native. */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Let buttons/labels stay tappable without the OS long-press/selection popups,
   but keep normal text selectable in content areas. */
button,
.action-btn,
.split-main,
.split-caret,
.sidebar-toggle,
.action-bar-toggle,
label {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Touch devices (incl. iPad in the desktop layout): give interactive
   controls a comfortable minimum tap target (~44px per Apple HIG) so they
   are easy to hit with a finger, without changing the mouse/desktop look. */
@media (pointer: coarse) {
    .action-btn,
    .split-main,
    .split-caret,
    .stop-all-btn,
    .fade-out-btn,
    .vol-btn {
        min-height: 44px;
    }

    .split-dropdown-item {
        min-height: 40px;
    }
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: 0.5px;
    color: var(--text);
    margin: 0 0 8px;
}
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 600; }
h4 { font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }

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

::selection { background: var(--accent); color: #1a1a1a; }

.maestro-app {
    min-height: 100vh;
    min-height: 100dvh; /* track iPad/mobile Safari's dynamic toolbar */
}

.maestro-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 8px 16px;
}

/* Loading */
.loading {
    text-align: center;
    font-size: 24px;
    padding: 80px;
    color: #aaa;
}

/* Full-screen "Connecting…" overlay shown until the Blazor circuit is interactive,
   so early clicks aren't silently lost while the page is still prerendered. */
.app-connecting-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 14, 20, 0.82);
    backdrop-filter: blur(2px);
}

.app-connecting-card {
    text-align: center;
    color: #e8e8e8;
    padding: 28px 36px;
}

.app-connecting-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 16px;
    border: 4px solid rgba(255, 255, 255, 0.18);
    border-top-color: #1db954;
    border-radius: 50%;
    animation: app-connecting-spin 0.9s linear infinite;
}

.app-connecting-text {
    font-size: 20px;
    font-weight: 600;
}

.app-connecting-sub {
    margin-top: 6px;
    font-size: 14px;
    color: #a9b3bd;
}

@keyframes app-connecting-spin {
    to { transform: rotate(360deg); }
}

/* Sidebar Controls */

/* --- Sidebar Toggle (pure CSS checkbox) --- */
.sidebar-toggle-check {
    display: none;
}

.sidebar-toggle {
    position: fixed;
    top: 12px;
    left: 216px;
    width: 28px;
    height: 28px;
    background: #2a2a3e;
    border: 1px solid #555;
    border-radius: 4px;
    color: #ccc;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    padding: 0;
    transition: left 0.2s ease;
    user-select: none;
}

.sidebar-toggle:hover {
    background: #4a4a6a;
    color: #fff;
}

/* Arrow direction: ◀ when expanded, ▶ when collapsed */
.sidebar-toggle::after {
    content: "◀";
}

.sidebar-toggle-check:checked ~ .sidebar .sidebar-toggle::after {
    content: "▶";
}

/* When checkbox is checked = sidebar collapsed */
.sidebar-toggle-check:checked ~ .sidebar .top-row,
.sidebar-toggle-check:checked ~ .sidebar .nav-scrollable {
    display: none !important;
}

.sidebar-toggle-check:checked ~ .sidebar {
    width: 40px !important;
    min-width: 40px !important;
    overflow: hidden;
}

.sidebar-toggle-check:checked ~ .sidebar .sidebar-toggle {
    left: 6px;
}

#sidebar-toggle-check:checked ~ main .sidebar-controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.sidebar-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: #1a1a2e;
    border-top: 1px solid #3a3a4a;
    z-index: 250;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* On narrow screens the sidebar is a top bar instead of a side column.
   The hamburger (.navbar-toggler from NavMenu) lives in the top-right and
   controls the nav menu, while our collapse toggle is anchored to the
   top-LEFT so they don't overlap. Collapsing on mobile shrinks the sidebar
   to a slim ~32px bar that only shows the collapse toggle (no blank gap). */
@media (max-width: 640.98px) {
    .sidebar-controls {
        position: static;
        width: 100%;
        margin-bottom: 12px;
        border-top: none;
        border-bottom: 1px solid #3a3a4a;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }

    .sidebar-controls > * {
        width: auto;
        flex: 0 1 auto;
    }

    /* Make the sidebar a normal-flow top bar so collapsing doesn't leave
       a leftover desktop column or any blank top spacing. */
    .sidebar {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        position: relative;
    }

    /* Anchor the collapse toggle to the top-LEFT (hamburger is top-right). */
    .sidebar-toggle,
    .sidebar-toggle-check:checked ~ .sidebar .sidebar-toggle {
        position: absolute;
        top: 0.5rem;
        left: 0.5rem;
        right: auto;
        z-index: 40;
        display: flex !important;
    }

    /* When collapsed on mobile: hide the nav top-row and the menu, leaving
       only a slim strip that contains the collapse toggle so the user can
       expand it again. No oversized empty area. */
    .sidebar-toggle-check:checked ~ .sidebar {
        width: 100% !important;
        min-width: 0 !important;
        height: 32px !important;
        min-height: 32px !important;
        overflow: visible;
    }

    .sidebar-toggle-check:checked ~ .sidebar .top-row,
    .sidebar-toggle-check:checked ~ .sidebar .nav-scrollable {
        display: none !important;
    }

    /* Make room for the collapse toggle so it doesn't overlap "Ballpark Maestro". */
    .sidebar .top-row .container-fluid,
    .sidebar .navbar-brand {
        padding-left: 2.25rem;
    }

    /* When collapsed on mobile, fully remove the sidebar-controls bar from
       the layout (the desktop rule only sets visibility:hidden, which still
       reserves a tall empty strip at the top of the page). */
    #sidebar-toggle-check:checked ~ main .sidebar-controls {
        display: none !important;
    }

    /* Bottom action bar (Sound Effects / Playback / Hot Keys): on mobile,
       float it on top of the page as an overlay. The dock is expanded by
       default so the controls are visible; tap the toggle to collapse it
       down to a small peek strip. The dock stacks groups vertically and
       scrolls vertically — no horizontal off-screen content. */
    .action-bar {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        bottom: 0;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        padding: 4px 6px;
        gap: 6px;
        /* Collapsed (default == not .expanded): tall enough to show the
           first group's header and its first row of buttons. */
        height: 104px;
        padding-top: 22px; /* room for the absolute-positioned expand toggle */
        /* Float above the page with a clear visual separation. */
        box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.5);
        border-top: 1px solid #3a3a4a;
        z-index: 200;
    }

    .action-bar.expanded {
        /* Size to the content (capped at 75vh) so there is no large empty
           area at the bottom of the panel when the visible groups are
           short. */
        height: auto;
        max-height: 75vh;
        padding-top: 22px; /* room for the absolute-positioned expand toggle */
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    /* When a split-action dropdown is open, allow the dropdown to escape
       the action-bar's clipping box so it isn't cut off at the top. */
    .action-bar:has(.split-dropdown) {
        overflow: visible;
    }

    /* Stop scroll chaining at the document level so touches that start on the
       fixed dock can't pan the page behind it. Also clip any horizontal
       overflow caused by wide content so the fixed bottom dock stays aligned
       with the visible viewport (otherwise the dock can render shifted to
       the right of the screen on devices like the S24 Ultra). */
    html {
        overscroll-behavior: none;
    }
    body {
        overscroll-behavior: none;
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Stacked layout: each group spans the full dock width. The dock as a
       whole scrolls vertically. */
    .action-bar .action-group {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        max-height: none;
        min-width: 0;
        overflow: visible;
        touch-action: inherit;
    }

    /* The dock container owns vertical panning (touch-action: pan-y), but the
       interactive controls inside must NOT inherit pan-y: with an Apple Pencil
       a tap on a pan-y region is treated strictly as the start of a pan, so
       the synthesized click never fires (a finger tap is more lenient). Give
       every button/link its own touch-action so stylus taps always register
       as clicks. */
    .action-bar button,
    .action-bar a,
    .action-bar .action-btn,
    .action-bar .split-main,
    .action-bar .split-caret,
    .action-bar .stop-all-btn,
    .action-bar .fade-out-btn,
    .action-bar .action-bar-toggle {
        touch-action: manipulation;
    }

    .action-group h4 {
        font-size: 10px;
        margin: 0 0 2px 0;
        letter-spacing: 0.5px;
    }

    .action-bar .action-btn,
    .action-bar .split-main,
    .action-bar .split-caret {
        padding: 3px 6px;
        font-size: 11px;
        margin: 1px;
    }

    .action-bar .split-caret {
        font-size: 0;
    }

    /* Match Stop All / Fade Out to the size of the other Playback buttons. */
    .action-bar .stop-all-btn,
    .action-bar .fade-out-btn {
        padding: 3px 6px;
        font-size: 11px;
        font-weight: normal;
        letter-spacing: 0;
        border-width: 1px;
        width: auto;
        margin: 1px;
        display: inline-block;
    }

    .action-bar-status {
        flex: 0 0 100%;
        padding: 4px 8px;
        font-size: 11px;
    }
}

/* Expand/collapse toggle for the bottom dock. Hidden on desktop, shown on mobile. */
/* Expand/collapse toggle for the floating bottom dock. Visible on all sizes.
   Anchored to the top-right of the dock so it stays put whether the dock
   is in its collapsed peek state or fully expanded. */
.action-bar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 6px;
    right: 12px;
    width: 36px;
    height: 24px;
    background: #1a1a2e;
    border: 1px solid #555;
    color: #ccc;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    z-index: 250;
}
@media (max-width: 640.98px) {
    .action-bar-toggle {
        /* Center the expand toggle on mobile so it can't be clipped by the
           viewport edge, safe-area insets, or any horizontal scroll. A wider
           hit area makes it easier to tap with a thumb. */
        left: 50%;
        right: auto;
        top: 4px;
        transform: translateX(-50%);
        width: 56px;
        height: 20px;
        font-size: 11px;
    }
}

    .scoreboard {
        gap: 6px;
    }

    .team-card {
        padding: 8px 6px;
        border-radius: 10px;
        min-width: 0;
    }

    .team-name {
        font-size: 16px;
        margin-bottom: 4px;
        word-break: break-word;
        overflow-wrap: anywhere;
        line-height: 1.1;
    }

    .score-row {
        gap: 6px;
    }

    .score {
        font-size: 32px;
        min-width: 0;
    }

    .score-btn {
        font-size: 22px;
        padding: 2px 6px;
    }

    .inning-card {
        padding: 4px 8px;
        min-width: 0;
        border-radius: 8px;
    }

    .inning-display { gap: 2px; }
    .inning-half { font-size: 14px; }
    .inning-number { font-size: 22px; }
    .inning-btn { font-size: 12px; padding: 0 4px; }

    /* On phones, cap the roster height so the full lineup stays visible
       and only the bench/roster list scrolls. */
    .lineup-panel {
        max-height: none;
        overflow: visible;
    }

    .bench-section {
        max-height: 50vh;
        overflow-y: auto;
        font-size: 15px;
        color: #e0e0e0;
    }
}

.menu-btn {
    background: #3a3a5a;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 13px;
    width: 100%;
    text-align: left;
}
.menu-btn:hover { background: #4a4a6a; }

.stop-all-btn {
    background: #b71c1c;
    color: white;
    border: 1px solid #ef5350;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    width: auto;
}
.stop-all-btn:hover { background: #d32f2f; }

.fade-out-btn {
    background: #f9a825;
    color: #1e1e2e;
    border: 1px solid #ffd740;
    border-radius: 6px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    width: auto;
}
.fade-out-btn:hover { background: #fdd835; }

.spotify-status {
    font-size: 12px;
    color: #aaa;
    text-align: center;
}

.spotify-status.clickable {
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.2s;
    /* Make it obviously tappable: subtle button chrome + accent color so users
       (especially on mobile, where there's no hover) can tell it opens a menu. */
    color: #1db954;
    font-weight: 600;
    border: 1px solid #2a2a3a;
    background: #1e1e2a;
    user-select: none;
    -webkit-tap-highlight-color: rgba(29, 185, 84, 0.25);
    min-height: 40px;
}

.spotify-status-caret {
    font-size: 9px;
    color: #1db954;
    line-height: 1;
}

.spotify-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #1db954;
    flex-shrink: 0;
}

.spotify-profile-name {
    font-size: 13px;
    font-weight: 600;
    color: #1db954;
    text-align: center;
    padding: 4px 6px 6px;
    border-bottom: 1px solid #2a2a3a;
    margin-bottom: 4px;
}
.spotify-status.clickable:hover {
    background: #2a2a3a;
    color: #e0e0e0;
}
.spotify-status.clickable:active {
    background: #34343f;
    border-color: #1db954;
}

.spotify-menu {
    position: relative;
}

.spotify-dropdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
}

.device-list-label {
    font-size: 11px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 0 2px 0;
    border-top: 1px solid #3a3a4a;
    margin-top: 4px;
}

.device-active {
    border-color: #4caf50 !important;
    color: #4caf50 !important;
}

.account-menu {
    position: relative;
    margin-top: 4px;
    border-top: 1px solid #3a3a4a;
    padding-top: 6px;
}

.account-status.clickable {
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: block;
    font-size: 12px;
    color: #aaa;
    transition: background 0.2s;
}

.account-status.clickable:hover {
    background: #2a2a3a;
    color: #e0e0e0;
}

.account-dropdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
}

.api-key-label {
    font-size: 10px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-top: 6px;
    border-top: 1px solid #3a3a4a;
    margin-top: 4px;
}

.api-key-value {
    font-size: 11px;
    color: #4fc3f7;
    background: #1a1a2e;
    padding: 4px 6px;
    border-radius: 4px;
    word-break: break-all;
    user-select: all;
}

.subscription-expiration {
    font-size: 11px;
    color: #aaa;
    padding: 2px 0;
}

.subscription-expiration.expired-text {
    color: #ef5350;
}

.game-panel {
    position: relative;
}

.game-panel.subscription-expired,
.subscription-expired {
    pointer-events: none !important;
    opacity: 0.3;
    filter: grayscale(100%);
    user-select: none;
    position: relative;
}

.subscription-expired * {
    pointer-events: none !important;
}

fieldset.game-panel,
fieldset.subscription-expired {
    border: none;
    padding: 0;
    margin: 0;
}

.expired-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.expired-message {
    background: #4a1c1c;
    color: #ef5350;
    padding: 16px 32px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}

.subscription-badge {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 4px;
    vertical-align: middle;
}

.subscription-badge.active {
    background: #1b5e20;
    color: #66bb6a;
}

.subscription-badge.expired {
    background: #4a1c1c;
    color: #ef5350;
}

/* Help Page */
.help-link {
    text-decoration: none;
    font-size: 12px;
}

.help-page {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    color: #e0e0e0;
}

.help-section {
    margin-bottom: 24px;
    padding: 16px;
    background: #1e1e2e;
    border-radius: 8px;
}

.help-section h3 {
    margin-top: 0;
    color: #4fc3f7;
}

.help-section ol, .help-section ul {
    padding-left: 20px;
}

.help-section li {
    margin-bottom: 6px;
}

.help-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.help-table th, .help-table td {
    padding: 8px 12px;
    text-align: left;
    border-bottom: 1px solid #3a3a4a;
}

.help-table th {
    color: #4fc3f7;
}

.help-table code {
    color: #81c784;
}

.help-code-block {
    display: block;
    background: #1a1a2e;
    padding: 10px 14px;
    border-radius: 6px;
    margin-top: 8px;
    color: #81c784;
    word-break: break-all;
    user-select: all;
}

/* Scoreboard */
.scoreboard {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: stretch;
    margin-bottom: 12px;
}

.team-card {
    flex: 1;
    border-radius: var(--radius-lg);
    padding: 10px 14px;
    text-align: center;
    background: linear-gradient(180deg, var(--panel-2), var(--panel));
    border: 1px solid var(--border);
    box-shadow: var(--shadow-md), var(--shadow-inset);
    position: relative;
    overflow: hidden;
}
.team-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), transparent 35%);
}
.team-card.has-logo {
    padding-left: 76px;
    padding-right: 76px;
}
.card-logo {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: auto;
    right: auto;
    height: calc(100% - 12px) !important;
    width: auto !important;
    max-width: 64px !important;
    margin: 0 !important;
    object-fit: contain;
    z-index: 1;
}
.card-logo-left { left: 8px; }
.card-logo-right { right: 8px; }
.team-card-inner { width: 100%; position: relative; z-index: 1; }

.away-card { border-top: 3px solid var(--accent-2); }
.home-card { border-top: 3px solid var(--good); }

.team-name {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    margin-bottom: 4px;
    line-height: 1.1;
}

.score-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.score {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 700;
    color: var(--text);
    min-width: 48px;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.score-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.score-btn:hover { color: var(--accent); border-color: var(--accent); background: rgba(255,209,102,0.1); }

/* Inning */
.inning-card {
    background: linear-gradient(180deg, var(--panel-3), var(--panel-2));
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    min-width: 70px;
}

.inning-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    line-height: 1;
    transition: color 0.15s ease;
}
.inning-btn:hover { color: var(--accent); }

.inning-display {
    display: flex;
    align-items: center;
    gap: 4px;
}

.inning-half {
    font-size: 16px;
    color: #ffd740;
    line-height: 1;
}

.inning-number {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    color: white;
}

/* Hits & Runs */
.hits-runs-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding: 8px;
    background: #2a2a3a;
    border-radius: 8px;
    margin-bottom: 12px;
}

.hits-runs-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    color: #ccc;
}

.small-btn {
    background: var(--panel-3);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.small-btn:hover { background: rgba(255,209,102,0.12); border-color: var(--accent); color: var(--accent); }
.small-btn:active { transform: translateY(1px); }
.small-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Main Content */
.main-content {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
    align-items: stretch;
}

/* Condensed layout: show only batting team's lineup + fielding team's diamond.
   In bottom-inning the source order places field first (col 1) and lineup second (col 2),
   so we use 1fr 1.4fr there. In top-inning the order is reversed (lineup, field), so
   flip the ratio to keep the lineup at 1.4fr and the field at 1fr in both halves. */
.main-content.condensed {
    grid-template-columns: 1fr 1.4fr;
}

.main-content.condensed.top-inning {
    grid-template-columns: 1.4fr 1fr;
}

.main-content.condensed.top-inning .home-lineup,
.main-content.condensed.top-inning .away-field-section,
.main-content.condensed.bottom-inning .away-lineup,
.main-content.condensed.bottom-inning .home-field-section {
    display: none;
}

/* Bigger field diamond when condensed mode is active - fills available width */
.main-content.condensed .field-panel,
.main-content.condensed .field-section {
    align-self: stretch;
    align-items: stretch;
    width: 100%;
}

.main-content.condensed .field-diamond {
    width: 100%;
    max-width: 900px;
    height: auto;
    aspect-ratio: 560 / 620;
    margin: 0 auto;
}

.main-content.condensed .field-position select {
    font-size: 14px;
    padding: 4px 6px;
    max-width: 220px;
}

.main-content.condensed .field-label {
    font-size: 20px;
}

@media (max-width: 1200px) {
    .main-content {
        grid-template-columns: 1fr;
    }

    .main-content .away-lineup {
        order: 1;
    }

    .main-content .field-panel {
        order: 2;
    }

    .main-content .home-lineup {
        order: 3;
    }

    /* Condensed mode: also stack vertically when narrow */
    .main-content.condensed,
    .main-content.condensed.top-inning,
    .main-content.condensed.bottom-inning {
        grid-template-columns: 1fr;
    }
}

/* Lineup Panels */
.lineup-panel {
    background: #2a2a3a;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: calc(400px * 2 + 24px * 2 + 16px);
}

.lineup-panel h3 {
    font-size: 18px;
    margin: 0 0 8px 0;
    color: #ffd740;
}

.quick-edit {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
}

.quick-edit input {
    flex: 1;
    background: #1e1e2e;
    border: 1px solid #555;
    border-radius: 4px;
    color: #e0e0e0;
    padding: 4px 8px;
    font-size: 13px;
}

.quick-edit button {
    background: #3a3a5a;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 13px;
}

.lineup-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    margin-bottom: 3px;
    background: #3a3a4a;
    transition: background 0.2s;
}

.lineup-row .player-info {
    flex: 0 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.lineup-row.clickable {
    cursor: pointer;
}

.lineup-row.clickable:hover:not(.current-batter) {
    background: #44445a;
}

.lineup-row.current-batter {
    background: linear-gradient(to right, #2e7d32, #1b5e20);
    box-shadow: 0 0 8px rgba(46, 125, 50, 0.5);
}

.lineup-pos {
    font-weight: bold;
    font-size: 24px;
    min-width: 30px;
    cursor: pointer;
    color: #ffd740;
}

.player-info {
    font-size: 22px;
    cursor: pointer;
}

.position-label {
    opacity: 1;
    font-size: 18px;
    font-weight: bold;
    color: #ffd740;
    min-width: 1.8em;
    text-align: center;
    display: inline-block;
}

.position-label.clickable {
    cursor: pointer;
}

.position-label.clickable:hover {
    opacity: 1;
    color: #4fc3f7;
}

.position-select {
    font-size: 16px;
    padding: 2px 6px;
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #4fc3f7;
    border-radius: 4px;
}

.swap-select {
    font-size: 14px;
    padding: 4px 8px;
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #4fc3f7;
    border-radius: 4px;
    margin-top: 4px;
    margin-bottom: 4px;
    width: 100%;
    max-width: 100%;
}

.lineup-row .position-label + .icon-btn,
.lineup-row .position-select + .icon-btn,
.lineup-row .note-icon + .icon-btn {
    margin-left: auto;
}

/* Always push the swap (and any trailing) button to the right edge of the row. */
.lineup-row > .icon-btn:last-child {
    margin-left: auto;
}

.roster-tag.clickable {
    cursor: pointer;
    text-decoration: underline dotted;
}

.roster-tag.clickable:hover {
    color: #4fc3f7;
}

.icon-btn {
    background: transparent;
    border: 1px solid #555;
    color: #ccc;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    font-size: 12px;
}
.icon-btn:hover { background: #4a4a6a; color: white; }

.play-btn { color: #4caf50; border-color: #4caf50; }
.play-btn:hover { background: #2e7d32; color: white; }

.bench-section {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #444;
    font-size: 13px;
    color: #ccc;
    flex: 0 1 auto;
    min-height: 0;
    /* Cap roster scroll area in wide/desktop mode to ~5 player rows. */
    max-height: 150px;
    overflow-y: auto;
}

@media (max-width: 640.98px) {
    .lineup-panel {
        max-height: none;
        overflow: visible;
    }
    .bench-section {
        max-height: 50vh;
        min-height: 120px;
        overflow-y: auto;
        font-size: 15px;
        color: #e0e0e0;
    }
}

.bench-player {
    padding: 3px 6px;
    border-radius: 4px;
    margin-bottom: 1px;
}

.roster-active {
    color: #e0e0e0;
    background: rgba(46, 125, 50, 0.25);
    border-left: 3px solid #4caf50;
    padding-left: 6px;
}

.roster-partial {
    color: #e0e0e0;
    background: rgba(255, 193, 7, 0.2);
    border-left: 3px solid #ffc107;
    padding-left: 6px;
}

.note-icon {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    cursor: help;
    opacity: 0.85;
}

.note-icon:hover {
    opacity: 1;
}

.player-notes-cell {
    color: #bbb;
    font-style: italic;
    font-size: 12px;
    max-width: 240px;
}

.roster-tag {
    display: inline-block;
    background: rgba(255, 215, 64, 0.2);
    color: #ffd740;
    font-size: 10px;
    font-weight: bold;
    padding: 0 4px;
    border-radius: 3px;
    margin-left: 4px;
}

.roster-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 11px;
    padding: 0 3px;
    opacity: 0.4;
    transition: opacity 0.2s;
}
.bench-player:hover .roster-edit-btn {
    opacity: 1;
}

.roster-add-btn, .roster-remove-btn {
    margin-left: auto;
    font-size: 10px;
    padding: 1px 5px;
    opacity: 0.5;
}
.bench-player:hover .roster-add-btn,
.bench-player:hover .roster-remove-btn {
    opacity: 1;
}

.swap-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
    background: #2a2a3a;
    border-radius: 6px;
    margin-top: 4px;
    margin-bottom: 4px;
}

.swap-option {
    padding: 4px 10px;
    border: 1px solid #555;
    border-radius: 4px;
    background: #3a3a4a;
    color: #fff;
    cursor: pointer;
    font-size: 0.8rem;
}

.swap-option:hover {
    background: #4a4a6a;
}

.swap-option.cancel {
    background: #5a2a2a;
    border-color: #833;
}

.swap-option.cancel:hover {
    background: #7a3a3a;
}

.roster-edit-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 4px;
    background: #1e1e2e;
    border-radius: 4px;
    margin-bottom: 2px;
    flex-wrap: wrap;
}

.roster-edit-input {
    background: #2a2a3a;
    border: 1px solid #555;
    border-radius: 4px;
    color: #e0e0e0;
    padding: 3px 6px;
    font-size: 12px;
    flex: 1;
    min-width: 0;
}

.roster-edit-input.num-input {
    width: 42px;
    flex: 0 0 42px;
}

.roster-quick-add {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 4px;
    border-top: 1px solid #444;
    margin-top: 4px;
}

.roster-edit-select {
    background: #2a2a3a;
    border: 1px solid #555;
    border-radius: 4px;
    color: #e0e0e0;
    padding: 3px 4px;
    font-size: 12px;
    flex: 0 0 auto;
}

.pitcher-btn {
    margin-top: 8px;
    width: 100%;
}

.pitcher-label {
    margin-top: 8px;
    padding: 6px 12px;
    background: #3a3a4a;
    border-radius: 6px;
    font-size: 13px;
    color: #ccc;
    text-align: center;
}

/* Field Panel */
.field-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.field-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.field-label {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    text-align: center;
}

.away-label {
    color: #d4a843;
}

.home-label {
    color: #66bb6a;
}

.field-diamond {
    position: relative;
    width: 360px;
    height: 400px;
    background: url('images/baseball-diamond.png') center/cover no-repeat;
    border-radius: 12px;
}

.field-position {
    position: absolute;
    text-align: center;
}

.field-position .field-play-btn {
    display: block;
    margin: 0 auto 3px auto;
    background: rgba(0, 0, 0, 0.6);
    color: #4caf50;
    border: 1px solid #666;
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.field-position .field-play-btn:hover {
    background: rgba(76, 175, 80, 0.25);
}

.field-position select {
    background: rgba(0,0,0,0.6);
    color: #e0e0e0;
    border: 1px solid #666;
    border-radius: 4px;
    font-size: 13px;
    padding: 3px 4px;
    max-width: 180px;
}

.pos-label {
    font-size: 14px;
    font-weight: bold;
    color: #e0e0e0;
    margin-bottom: 2px;
}

/* Field position placements */
.pos-pitcher   { left: 50%; top: 50%; transform: translateX(-50%); }
.pos-catcher   { left: 50%; top: 75%; transform: translateX(-50%); }
.pos-third     { left: 12.5%; top: 42%; transform: translateX(-50%); }
.pos-short     { left: 22%;   top: 32%; transform: translateX(-50%); }
.pos-second    { left: 78%;   top: 32%; transform: translateX(-50%); }
.pos-first     { left: 87.5%; top: 42%; transform: translateX(-50%); }
.pos-left      { left: 16.67%; top: 15%; transform: translateX(-50%); }
.pos-center    { left: 50%;    top: 6%;  transform: translateX(-50%); }
.pos-right     { left: 83.33%; top: 15%; transform: translateX(-50%); }

/* Action Bar — floats over the page as a fixed overlay anchored to the
   bottom of the viewport. Collapsed by default, showing a peek with the
   first row of buttons; tap the toggle to expand it for the full panel. */
.action-bar {
    display: flex;
    gap: 12px;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 28px 12px 8px 12px; /* top room for the absolute expand toggle */
    background: #2a2a3a;
    border-radius: 12px 12px 0 0;
    margin-bottom: 0;
    position: fixed;
    left: 250px;
    right: 0;
    bottom: 0;
    z-index: 200;
    /* The dock is the only scroll container — long lists scroll inside the
       dock as a whole, not per-section. */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior: contain;
    /* Collapsed (default == not .expanded): tall enough to show the section
       headers and the first row of buttons of each section. */
    height: 116px;
    box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.5);
    border-top: 1px solid #3a3a4a;
}

.action-bar.expanded {
    /* Size to the content rather than a fixed viewport fraction so there's
       no large empty area when the visible groups are short. The dock will
       only grow as tall as it needs to up to the cap. */
    height: auto;
    max-height: 75vh;
    overflow-y: auto;
}

/* When a split-action dropdown is open, allow the dropdown to escape the
   action-bar's clipping box so it isn't cut off at the top of the panel. */
.action-bar:has(.split-dropdown) {
    overflow: visible;
}

/* When the sidebar is collapsed (40px wide), let the dock claim the
   freed-up horizontal space so it spans the full width below the slim
   sidebar rail. */
#sidebar-toggle-check:checked ~ main .action-bar {
    left: 40px;
}

/* Groups themselves never scroll — the dock as a whole is the scroll
   container. This keeps a single, consistent scrollbar/scroll affordance
   instead of one per section. */
.action-bar .action-group {
    max-height: none;
    overflow: visible;
}

/* Visual order inside the dock: Playback first, then Sound Effects, then Hot Keys.
   (DOM order kept the same to minimize markup churn.) */
.action-bar .action-group-playback { order: 1; }
.action-bar .action-group-effects  { order: 2; }
.action-bar .action-group-hotkeys  { order: 3; }

/* Floating "now playing" / status toast — pops up from the bottom of the
   screen, sits above the dock, and fades out after a few seconds. */
.status-toast {
    position: fixed;
    left: 50%;
    bottom: calc(28vh + 12px); /* sit just above the collapsed dock */
    transform: translateX(-50%) translateY(20px);
    background: rgba(26, 26, 46, 0.95);
    color: #ffd740;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    border: 1px solid #555;
    max-width: min(90vw, 520px);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 300;
}
.status-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
@media (max-width: 640.98px) {
    .status-toast {
        bottom: calc(22vh + 12px);
        font-size: 13px;
        padding: 8px 14px;
    }
}

.action-group {
    flex: 1;
    min-width: 200px;
}

.action-group h4 {
    margin: 0 0 6px 0;
    font-size: 14px;
    color: #ffd740;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.action-btn {
    display: inline-block;
    background: #3a3a5a;
    color: #e0e0e0;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 6px 12px;
    margin: 2px;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.2s;
}
.action-btn:hover { background: #4a4a6a; }

.action-btn.pulsing {
    animation: pulse 1s ease-in-out infinite;
    border-color: #4fc3f7;
    box-shadow: 0 0 8px rgba(79, 195, 247, 0.4);
}

/* Split action button (main + caret dropdown) */
.split-action-btn {
    position: relative;
    display: inline-flex;
    vertical-align: middle; /* align neighbors by box, not by inner baseline
                               (emoji icon vs album-art image have different
                               baselines, which pushed folder buttons lower) */
    margin: 2px;
    border: 1px solid #555;
    border-radius: 6px;
    background: #3a3a5a;
    overflow: visible;
    transition: background 0.2s;
}

.split-action-btn:hover {
    background: #4a4a6a;
}

.split-action-btn.pulsing {
    animation: pulse 1s ease-in-out infinite;
    border-color: #4fc3f7;
    box-shadow: 0 0 8px rgba(79, 195, 247, 0.4);
}

.split-main, .split-caret {
    background: transparent;
    color: #e0e0e0;
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 13px;
}

.split-main {
    border-right: 1px solid #555;
}

.split-caret {
    padding: 6px 8px;
    font-size: 0; /* hide any text content */
    position: relative;
    min-width: 24px;
}
.split-caret::after {
    content: "";
    display: inline-block;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    vertical-align: middle;
}

.split-main:hover, .split-caret:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* Up/Down reorder buttons in hot-key rows. Slimmer than the edit caret and
   visually grouped with a left divider. Disabled state dims the arrow so
   it's obvious you're already at an end of the list. */
.hotkey-reorder-btn {
    padding: 6px 6px;
    font-size: 11px;
    border: none;
    border-left: 1px solid #555;
    background: transparent;
    color: #e0e0e0;
    cursor: pointer;
    border-radius: 4px;
}
.hotkey-reorder-btn:disabled {
    opacity: 0.35;
    cursor: default;
    background: transparent;
}

/* Hot Keys section header with a small edit toggle on the right. The toggle
   shows the gear/check inline with the heading text without disturbing the
   existing h4 typography. */
.hotkeys-heading {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
}
.hotkeys-edit-toggle {
    background: transparent;
    color: inherit;
    border: 1px solid #555;
    border-radius: 4px;
    padding: 1px 6px;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    text-transform: none;
    letter-spacing: 0;
}
.hotkeys-edit-toggle:hover {
    background: rgba(255, 255, 255, 0.08);
}

.split-dropdown-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    z-index: 199; /* just below the action-bar (200) so it sits behind the dock but above everything else */
}

.split-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: auto;
    margin-bottom: 4px;
    background: #2a2a3a;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 4px;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    max-width: min(320px, calc(100vw - 16px));
    max-height: 320px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    z-index: 300;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
}

.split-dropdown-item {
    background: transparent;
    color: #e0e0e0;
    border: none;
    padding: 6px 10px;
    text-align: left;
    cursor: pointer;
    font-size: 12px;
    border-radius: 4px;
}

.split-dropdown-item:hover {
    background: #4a4a6a;
}

/* Song rows (Random Song picker) show album art + label aligned in a row. */
.split-dropdown-item.with-art {
    display: flex;
    align-items: center;
    gap: 0;
}

.split-dropdown-item.played {
    color: #888;
    font-style: italic;
}

/* Clip excluded from random auto-play (via Settings). Still clickable to play
   manually, but visually de-emphasized with a strikethrough + muted color and
   a small "no auto-play" marker. */
.split-dropdown-item.excluded {
    color: #9a6a6a;
    text-decoration: line-through;
    opacity: 0.75;
}
.split-dropdown-item.excluded::after {
    content: " 🚫";
    text-decoration: none;
    font-size: 10px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.vol-btn {
    min-width: 50px;
    text-align: center;
}

/* Status Bar */
.status-bar {
    background: #3a3a5a;
    color: #ffd740;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    margin-top: 8px;
}

/* Blazor error UI */
#blazor-error-ui {
    background: #b32121;
    color: white;
    padding: 0.5rem 1rem;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    display: none;
}

#blazor-error-ui .reload, #blazor-error-ui .dismiss {
    color: #ffd740;
    margin-left: 12px;
}

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
    border-radius: 8px;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* ===== Page Title ===== */
.page-title {
    color: #ffd740;
    margin: 0 0 16px 0;
    font-size: 24px;
}

/* ===== Management Pages ===== */
.mgmt-section {
    background: #2a2a3a;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.mgmt-section h3 {
    color: #ffd740;
    margin: 0 0 12px 0;
    font-size: 18px;
}

.inline-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.mgmt-input {
    background: #1e1e2e;
    border: 1px solid #555;
    border-radius: 6px;
    color: #e0e0e0;
    padding: 6px 10px;
    font-size: 14px;
}

.mgmt-input:focus {
    border-color: #ffd740;
    outline: none;
}

.num-input {
    width: 60px;
}

.mgmt-select {
    background: #1e1e2e;
    border: 1px solid #555;
    border-radius: 6px;
    color: #e0e0e0;
    padding: 6px 10px;
    font-size: 14px;
}

/* Team Block */
.team-block {
    background: #2a2a3a;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.team-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.team-block-name {
    color: #ffd740;
    margin: 0;
    font-size: 20px;
    flex: 1;
}

.delete-btn {
    color: #ef5350 !important;
    border-color: #ef5350 !important;
}
.delete-btn:hover {
    background: #b71c1c !important;
    color: white !important;
}

/* Player Table */
.player-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 12px;
    font-size: 14px;
}

.player-table th {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #444;
    color: #aaa;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.player-table td {
    padding: 5px 8px;
    border-bottom: 1px solid #333;
    color: #e0e0e0;
}

.player-table tr:hover td {
    background: #3a3a4a;
}

.add-player-form {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 8px;
    border-top: 1px solid #444;
}

/* ===== Game Setup Page ===== */
.setup-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
}

.setup-card {
    flex: 1;
    min-width: 250px;
    background: #1e1e2e;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.setup-card h3 {
    margin: 0 0 12px 0;
}

.away-setup {
    border: 2px solid #8b7d3c;
}

.away-setup h3 {
    color: #d4a843;
}

.home-setup {
    border: 2px solid #2e7d32;
}

.home-setup h3 {
    color: #66bb6a;
}

.setup-vs {
    font-size: 32px;
    font-weight: bold;
    color: #666;
    align-self: center;
    padding: 20px 8px;
}

.team-select {
    width: 100%;
    padding: 8px 12px;
    font-size: 15px;
    margin-bottom: 12px;
}

.team-preview {
    text-align: left;
    background: #2a2a3a;
    border-radius: 8px;
    padding: 10px;
    margin-top: 8px;
    font-size: 13px;
}

.team-preview strong {
    color: #ffd740;
    font-size: 15px;
}

.team-preview ul {
    margin: 6px 0 0 0;
    padding-left: 18px;
    color: #ccc;
}

.team-preview li {
    padding: 2px 0;
}

.setup-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
}

.start-btn {
    background: #2e7d32 !important;
    color: white !important;
    font-size: 16px !important;
    padding: 10px 24px !important;
}
.start-btn:hover {
    background: #1b5e20 !important;
}
.start-btn:disabled {
    background: #3a3a5a !important;
    color: #666 !important;
    cursor: not-allowed;
}

.settings-container {
    max-width: 720px;
    padding: 24px;
    color: #e0e0e0;
}
.settings-container h2 {
    color: #4fc3f7;
    margin-bottom: 18px;
}
.settings-section {
    margin-bottom: 18px;
}
.settings-section label {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
    color: #ffd740;
}
.settings-checkbox-row {
    display: flex !important;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.settings-checkbox-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #4fc3f7;
    cursor: pointer;
}
.settings-input {
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    background: #2a2a2a;
    color: #fff;
    border: 1px solid #4fc3f7;
    border-radius: 6px;
}
.settings-help {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.7;
}
.settings-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.settings-status {
    color: #66bb6a;
    font-size: 13px;
}

/* Sound-effect auto-play deselection UI (Settings). Each category lists its
   clips with an include/exclude checkbox in a compact, scrollable grid. */
.sfx-category {
    margin-top: 12px;
}
.sfx-category-title {
    font-size: 13px;
    font-weight: 600;
    color: #ffd740;
    margin-bottom: 4px;
}
.sfx-clip-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2px 16px;
    max-height: 180px;
    overflow-y: auto;
    padding: 4px 6px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid #3a3a4a;
    border-radius: 6px;
}
.sfx-clip-row {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: normal;
    color: inherit;
    margin-bottom: 0;
    padding: 2px 0;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
}
.sfx-clip-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.sfx-clip-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sfx-clip-row input[type="radio"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* Uploaded custom-clip row: radio + label on the left, delete button on the right. */
.uploaded-clip-row {
    justify-content: space-between;
    max-width: 360px;
    padding: 3px 0;
}
.uploaded-clip-row .settings-checkbox-row {
    flex: 1 1 auto;
    min-width: 0;
}

/* Per-category upload control row under each category's clip list. */
.sfx-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    font-size: 12px;
}
.sfx-upload-row input[type="file"] {
    font-size: 12px;
    max-width: 240px;
}

.script-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.script-panel {
    background: #1e1e2e;
    border-radius: 12px;
    padding: 24px;
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.script-panel h3 { margin: 0; color: #fff; }
.script-panel textarea {
    flex: 1;
    background: #2a2a3a;
    color: #eee;
    border: 1px solid #444;
    border-radius: 6px;
    padding: 12px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
}
.script-actions { display: flex; gap: 8px; justify-content: flex-end; }

.script-panel-wide { max-width: 1100px; }
.script-body {
    display: flex;
    gap: 16px;
    flex: 1;
    min-height: 0;
}
.script-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}
.script-hotkeys {
    flex: 0 0 320px;
    background: #2a2a3a;
    border-radius: 8px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    max-height: 70vh;
}
.script-hotkeys h4 { margin: 0; color: #ffd166; font-size: 16px; }
.script-hotkeys-empty { font-size: 13px; color: #cfd2d8; }
.script-hotkeys-empty .shke-title { font-weight: 700; margin-bottom: 6px; color: #fff; }
.script-hotkeys-empty .shke-hint ul { margin: 6px 0 6px 18px; padding: 0; }
.script-hotkeys-empty .shke-hint li { margin: 2px 0; }
.script-hotkey-list { display: flex; flex-direction: column; gap: 6px; }
.script-hotkey-btn { text-align: left; }
.script-hotkey-row { display: flex; width: 100%; margin: 2px 0; }
.script-hotkey-row .split-main { flex: 1 1 auto; text-align: left; }
.script-hotkey-row .split-caret { flex: 0 0 auto; }
.script-hotkey-form-actions { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 900px) {
    .script-body { flex-direction: column; }
    .script-hotkeys { flex: 0 0 auto; max-height: none; }
}

.third-out-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1100;
    animation: thirdOutFadeIn 0.15s ease-out;
}
@keyframes thirdOutFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.third-out-panel {
    background: linear-gradient(160deg, #1f2940 0%, #141a2b 100%);
    border: 2px solid #4a90e2;
    border-radius: 16px;
    padding: 32px 36px;
    width: 92%;
    max-width: 560px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(74,144,226,0.25);
    color: #fff;
    text-align: center;
    animation: thirdOutPop 0.2s ease-out;
}
@keyframes thirdOutPop {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.third-out-header {
    font-size: 28px;
    font-weight: 700;
    color: #ffd166;
    margin-bottom: 18px;
    letter-spacing: 0.5px;
}
.third-out-score {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 22px;
    color: #e5e7eb;
}
.third-out-score .tos-team { font-weight: 600; opacity: 0.85; }
.third-out-score .tos-num { font-size: 32px; font-weight: 800; color: #ffd166; }
.third-out-score .tos-sep { opacity: 0.6; }
.third-out-summary {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 14px;
    color: #fff;
}
.third-out-errors {
    font-size: 20px;
    color: #ff8a8a;
    margin-bottom: 14px;
    font-weight: 500;
}
.third-out-question {
    font-size: 22px;
    color: #b8c5d6;
    margin: 18px 0 24px;
}
.third-out-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}
.third-out-btn {
    font-size: 20px;
    font-weight: 600;
    padding: 14px 24px;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.1s ease;
    min-width: 200px;
}
.third-out-btn:hover { transform: translateY(-1px); filter: brightness(1.1); }
.third-out-btn:active { transform: translateY(0); }
.third-out-confirm {
    background: linear-gradient(180deg, #2ecc71, #27a35a);
    color: #fff;
    box-shadow: 0 4px 12px rgba(46,204,113,0.4);
}
.third-out-cancel {
    background: linear-gradient(180deg, #555, #3a3a3a);
    color: #eee;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
.third-out-undo {
    background: linear-gradient(180deg, #e67e22, #b8651a);
    color: #fff;
    box-shadow: 0 4px 12px rgba(230,126,34,0.4);
}
.third-out-undo:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

.ab-wrap { position: relative; display: inline-block; }
.popover-backdrop {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: transparent;
    z-index: 40;
}
.runs-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2940;
    border: 1.5px solid #4a90e2;
    border-radius: 8px;
    padding: 8px 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.55);
    z-index: 50;
    white-space: nowrap;
    animation: runsMenuPop 0.12s ease-out;
}
.runs-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: #4a90e2;
}
@keyframes runsMenuPop {
    from { opacity: 0; transform: translate(-50%, 4px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
.runs-menu-title {
    font-size: 12px;
    color: #b8c5d6;
    margin-bottom: 6px;
    text-align: center;
}
.runs-menu-options { display: flex; gap: 6px; }
.runs-menu-btn {
    min-width: 34px;
    padding: 6px 10px;
    border-radius: 6px;
    border: none;
    background: linear-gradient(180deg, #2ecc71, #27a35a);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: filter 0.1s ease, transform 0.1s ease;
}
.runs-menu-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.runs-menu-btn.outs-menu-btn {
    background: linear-gradient(180deg, #e74c3c, #b03020);
}

.bases-mini {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    margin: 0 12px;
    vertical-align: middle;
}
.bases-mini .base-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    transform: rotate(45deg);
    background: #2a2a3a;
    border: 1.5px solid #6a6a7a;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.bases-mini .base-2 { top: 0; left: 50%; margin-left: -8px; }
.bases-mini .base-3 { top: 50%; left: 0; margin-top: -8px; }
.bases-mini .base-1 { top: 50%; right: 0; margin-top: -8px; }
.bases-mini .base-home {
    bottom: 0;
    left: 50%;
    margin-left: -8px;
    background: #1a1a24;
    border-color: #888;
    cursor: default;
}
.bases-mini .base-dot.on {
    background: #ffd166;
    border-color: #c9a23f;
    box-shadow: 0 0 8px rgba(255,209,102,0.85), 0 0 14px rgba(255,209,102,0.5);
}
.bases-mini::before {
    /* Infield diamond outline connecting the bases */
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 1px dashed rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.03);
    pointer-events: none;
}

.song-edit-row > td { background: #1e1e2e; }
.song-editor { display: flex; flex-direction: column; gap: 16px; padding: 12px; }
.song-editor-section { background: #2a2a3a; padding: 12px; border-radius: 8px; }
.song-editor-section h4 { margin: 0 0 8px 0; color: #fff; }
.song-current { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; color: #ddd; }
.song-search { display: flex; gap: 8px; margin-bottom: 8px; }
.song-search .mgmt-input { flex: 1; }
.song-results { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; }
.song-result-btn { background: #3a3a4a; color: #eee; border: 1px solid #555; border-radius: 4px; padding: 6px 10px; text-align: left; cursor: pointer; }
.song-result-btn.with-art { display: flex; align-items: center; gap: 8px; }
.song-result-btn.with-art img { width: 32px; height: 32px; border-radius: 3px; flex-shrink: 0; }
.song-result-btn:hover { background: #4a4a5a; }
.song-warning { color: #ffb74d; font-size: 13px; }
.start-ms-input { width: 110px; min-width: 8ch; }

/* Spotify search popup */
.spotify-search-panel { max-width: 600px; width: 95%; }
.spotify-search-bar { display: flex; gap: 8px; align-items: center; }
.spotify-search-input {
    flex: 1;
    background: #2a2a3a;
    color: #eee;
    border: 1px solid #555;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
}
.spotify-search-input:focus { outline: none; border-color: #4a90e2; }
.spotify-search-results {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 60vh;
    overflow-y: auto;
    margin-top: 8px;
    -webkit-overflow-scrolling: touch;
}
.spotify-search-empty { color: #999; padding: 12px; text-align: center; }

/* Premium prompt popup */
.premium-prompt-panel { max-width: 440px; width: 90%; text-align: center; }
.premium-prompt-panel p { color: #ccc; font-size: 15px; line-height: 1.5; margin: 8px 0; }
.home-run-call-panel { max-width: 520px; width: 90%; text-align: center; }
.home-run-call-player { color: #ffd54a; font-size: 18px; font-weight: 700; margin: 6px 0; }
.home-run-call-text { color: #fff; font-size: 22px; line-height: 1.4; margin: 12px 0; font-weight: 600; }
.home-run-call-empty { color: #999; font-size: 15px; font-weight: 400; font-style: italic; }
.home-run-call-nav { display: flex; gap: 10px; justify-content: space-between; margin: 14px 0; }
.hrc-nav-btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; flex: 1; min-width: 0; gap: 2px; }
.hrc-nav-btn:last-child { align-items: flex-end; text-align: right; }
.hrc-nav-name { font-weight: 600; }
.hrc-nav-preview { font-size: 12px; color: #ccc; font-weight: 400; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coaches-section { background: #2a2a3a; padding: 12px; border-radius: 8px; margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.coaches-list { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: #ddd; }
.coach-tag { background: #3a3a4a; color: #eee; border: 1px solid #555; border-radius: 12px; padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; }
.import-team-form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px; background: #2a2a3a; border-radius: 8px; }
.import-textarea { width: 100%; font-family: monospace; }


.song-indicator {
    display: inline-block;
    margin-right: 6px;
    font-size: 16px;
    opacity: 0.25;
    filter: grayscale(1);
}
.song-indicator.assigned {
    opacity: 1;
    filter: none;
}

.impersonation-banner {
    background: #ff9800;
    color: #1a1a2e;
    padding: 8px 16px;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid #f57c00;
}

.impersonation-link {
    margin-left: 12px;
    color: #1a1a2e;
    text-decoration: underline;
}

.admin-section {
    border: 1px solid #ff9800;
    border-radius: 6px;
    padding: 12px;
    margin-top: 16px;
    background: rgba(255, 152, 0, 0.08);
}

.admin-section h3 {
    margin-top: 0;
    color: #ff9800;
}

/* Line Score */
.line-score {
    margin: 8px 0 12px 0;
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.line-score table {
    border-collapse: collapse;
    width: 100%;
    background: var(--panel);
    overflow: hidden;
    font-family: var(--font-mono);
}
.line-score th,
.line-score td {
    padding: 7px 12px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 14px;
}
.line-score tbody tr:last-child th,
.line-score tbody tr:last-child td { border-bottom: none; }
.line-score tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
.line-score thead th {
    background: var(--panel-2);
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.line-score .ls-team {
    text-align: left;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--text);
    min-width: 110px;
}
.line-score .ls-total {
    background: var(--panel-2);
    font-weight: 700;
    color: var(--text);
    border-left: 1px solid var(--border-strong);
}
.line-score thead .ls-total { border-left: 1px solid var(--border-strong); }
.line-score .ls-current {
    background: rgba(255, 209, 102, 0.12);
    color: var(--accent);
    font-weight: 700;
}

/* Highlight the current half-inning's score on the old-school spectator board. */
.line-score.old-school .ls-current {
    background: transparent;
}
.line-score.old-school .ls-current .flip-tile {
    background: #1a2a10;
    border-color: #f5d04a;
    color: #ffd84a;
    text-shadow: 0 0 8px rgba(255,216,74,0.85), 0 0 2px rgba(255,216,74,1);
    box-shadow:
        inset 0 -8px 14px rgba(0,0,0,0.65),
        inset 0 8px 14px rgba(255,255,255,0.04),
        0 0 8px rgba(255,216,74,0.55);
}

.situation-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 10px 0 12px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
}
.situation-diamond {
    position: relative;
    width: 90px;
    height: 90px;
}
.situation-diamond .sd-base {
    position: absolute;
    width: 22px;
    height: 22px;
    transform: rotate(45deg);
    background: #2a2a3a;
    border: 2px solid #6a6a7a;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.situation-diamond .sd-2 { top: 0; left: 50%; margin-left: -11px; }
.situation-diamond .sd-3 { top: 50%; left: 0; margin-top: -11px; }
.situation-diamond .sd-1 { top: 50%; right: 0; margin-top: -11px; }
.situation-diamond .sd-home {
    bottom: 0;
    left: 50%;
    margin-left: -11px;
    background: #1a1a24;
    border-color: #888;
}
.situation-diamond .sd-base.on {
    background: #ffd166;
    border-color: #c9a23f;
    box-shadow: 0 0 10px rgba(255,209,102,0.85), 0 0 18px rgba(255,209,102,0.55);
}
.situation-diamond::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    transform: translate(-50%, -50%) rotate(45deg);
    border: 1px dashed rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
    pointer-events: none;
}
.situation-outs {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.situation-outs .so-label {
    font-size: 13px;
    color: #b8c5d6;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.situation-outs .so-dots { display: flex; gap: 8px; }
.situation-outs .so-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #2a2a3a;
    border: 2px solid #6a6a7a;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.situation-outs .so-dot.on {
    background: #e74c3c;
    border-color: #b03020;
    box-shadow: 0 0 8px rgba(231,76,60,0.7);
}

/* Inline variant for the at-bat header (operator dashboard). */
.situation-outs.inline {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    margin: 0 8px;
}
.situation-outs.inline .so-label {
    font-size: 12px;
}
.situation-outs.inline .so-dots {
    gap: 4px;
}
.situation-outs.inline .so-dot {
    width: 12px;
    height: 12px;
    border-width: 1.5px;
}

/* Now-Batting Banner */
.now-batting-banner {
    margin: 8px 0 12px 0;
    padding: 14px 18px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    color: white;
    animation: nb-fadein 0.25s ease-out;
}
.now-batting-banner.away {
    background: linear-gradient(90deg, #4a4a5a, var(--team-color, #8b7d3c));
}
.now-batting-banner.home {
    background: linear-gradient(90deg, #4a4a5a, var(--team-color, #2e7d32));
}
.now-batting-banner .nb-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.85;
}
.now-batting-banner .nb-name {
    font-size: 28px;
    font-weight: 700;
    margin: 4px 0;
}
.now-batting-banner .nb-meta {
    font-size: 14px;
    opacity: 0.95;
}
.now-batting-banner.pitching {
    padding: 8px 14px;
    margin-top: -4px;
}
.now-batting-banner.pitching .nb-name {
    font-size: 20px;
}

/* Compact pitcher chip inside the situation row */
.situation-pitcher {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(90deg, #4a4a5a, var(--team-color, #2e7d32));
    min-width: 0;
    max-width: 260px;
}
.situation-pitcher .sp-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    opacity: 0.85;
    line-height: 1;
}
.situation-pitcher .sp-name {
    font-size: 14px;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 600px) {
    .situation-pitcher { padding: 4px 8px; max-width: 160px; }
    .situation-pitcher .sp-label { font-size: 9px; letter-spacing: 1px; }
    .situation-pitcher .sp-name { font-size: 12px; }
    /* Hide the team logos on the home-page scoreboard cards in mobile mode and
       reclaim the side padding that was reserved for them. */
    .team-card .card-logo { display: none !important; }
    .team-card.has-logo { padding-left: 12px; padding-right: 12px; }
}
.due-up {
    margin: 8px 0 12px 0;
    padding: 10px 16px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    color: white;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
}
.due-up .nb-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.75;
    margin-bottom: 4px;
}
.due-up .nb-name {
    font-size: 18px;
    font-weight: 600;
    margin: 2px 0;
    opacity: 0.9;
}
@keyframes nb-fadein {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Lineup drag-and-drop */
.lineup-row[draggable="true"] {
    cursor: grab;
}
.lineup-row.drag-over {
    outline: 2px dashed #ffd740;
    outline-offset: -2px;
    background: rgba(255, 215, 64, 0.12);
}

/* Undo button */
.undo-btn {
    background: #4a4a6a;
}
.undo-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.last-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(79,195,247,0.12);
    border: 1px solid rgba(79,195,247,0.4);
    border-radius: 14px;
    color: #cfe9f7;
    font-size: 13px;
    max-width: 320px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.last-action-label {
    font-weight: 600;
    color: #4fc3f7;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
}
.last-action-text {
    overflow: hidden;
    text-overflow: ellipsis;
}
.spectator-count {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(46,204,113,0.15);
    border: 1px solid rgba(46,204,113,0.45);
    border-radius: 14px;
    color: #cdeed7;
    font-size: 13px;
    font-weight: 600;
}
@media (max-width: 600px) {
    .last-action { max-width: 180px; font-size: 11px; padding: 2px 6px; }
    .last-action-label { font-size: 9px; }
}

/* Spectator page */
.spectator-page {
    max-width: 900px;
    margin: 16px auto;
    padding: 0 12px;
    color: #e0e0e0;
}
.spectator-footer {
    text-align: center;
    color: #888;
    font-size: 12px;
    margin-top: 12px;
}

.fan-message-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    background: #2a2a3a;
    border: 1px solid #3a3a4a;
    border-radius: 8px;
    padding: 8px 12px;
    margin: 8px 0;
}
.fan-message-label { font-weight: bold; color: #ffd54f; }
.fan-message-input {
    flex: 1 1 240px;
    min-width: 180px;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #555;
    background: #1a1a2e;
    color: #e0e0e0;
}
.fan-message-current {
    color: #aaa;
    font-style: italic;
    font-size: 13px;
}
.fan-message-banner {
    background: linear-gradient(90deg, #ffb300, #ff7043);
    color: #1a1a2e;
    font-weight: bold;
    text-align: center;
    padding: 10px 14px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

.team-logo {
    height: 1.4em;
    width: auto;
    max-width: 2.2em;
    vertical-align: middle;
    margin-right: 6px;
    object-fit: contain;
}
.team-logo-preview {
    height: 48px;
    width: auto;
    max-width: 96px;
    border-radius: 6px;
    background: #1a1a2e;
    padding: 4px;
    object-fit: contain;
}
.team-logo-row { gap: 8px; align-items: center; }

/* Spectator scoreboard logos flank the score tile at the same height. */
.scoreboard.old-school .score-row { gap: 10px; }
.team-logo.score-side-logo {
    height: 84px !important;
    width: auto !important;
    max-width: 84px !important;
    margin: 0 !important;
    object-fit: contain;
    flex: 0 0 auto;
}
@media (max-width: 600px) {
    .team-logo.score-side-logo { height: 32px !important; max-width: 32px !important; }
}

/* Old-School scoreboard for spectator view - classic green board, white digits */
.scoreboard.old-school {
    background:
        radial-gradient(ellipse at top, rgba(255,255,255,0.06), transparent 60%),
        linear-gradient(180deg, #1f4d2a 0%, #0f2a17 100%);
    border: 6px solid #0a0a0a;
    border-radius: 16px;
    padding: 16px 18px;
    box-shadow:
        inset 0 0 40px rgba(0,0,0,0.75),
        inset 0 0 0 2px rgba(255,255,255,0.04),
        0 8px 24px rgba(0,0,0,0.6);
    flex-wrap: nowrap;
    position: relative;
}
.scoreboard.old-school::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,0.025) 0px,
        rgba(255,255,255,0.025) 1px,
        transparent 1px,
        transparent 3px
    );
    mix-blend-mode: overlay;
}
.scoreboard.old-school .team-card {
    background: transparent !important;
    box-shadow: none;
    /* When a team color is set, show it as a colored bar on top of the card. */
    border-top: 4px solid var(--team-color, transparent);
    border-radius: 8px 8px 4px 4px;
    min-width: 0; /* allow flex children to shrink so team names fit */
}
.scoreboard.old-school .team-name {
    font-family: 'Courier New', monospace;
    color: #ffffff;
    text-shadow: 0 0 6px rgba(255,255,255,0.35);
    letter-spacing: 2px;
    text-transform: uppercase;
    /* Cap height and let autoshrink.js shrink the font to fit width. */
    max-height: 1.4em;
    line-height: 1.2;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    width: 100%;
    text-align: center;
}
.scoreboard.old-school .inning-display {
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #ffffff;
}

.line-score.old-school table {
    background: linear-gradient(180deg, #1f4d2a, #0f2a17);
    border: 3px solid #1a1a1a;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.6);
    border-collapse: separate;
    border-spacing: 4px;
}
.line-score.old-school th,
.line-score.old-school td {
    color: #ffffff;
    font-family: 'Courier New', monospace;
    background: transparent;
    border: none;
    padding: 4px 6px;
}
.line-score.old-school .ls-team {
    color: #ffffff;
    text-shadow: 0 0 4px rgba(255,255,255,0.35);
}

/* Flip tile (split-flap) */
.flip-tile {
    display: inline-block;
    position: relative;
    background: #0f2a17;
    color: #ffffff;
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-weight: 700;
    text-align: center;
    border-radius: 6px;
    border: 1.5px solid #2a2a2a;
    box-shadow:
        inset 0 -8px 14px rgba(0,0,0,0.65),
        inset 0 8px 14px rgba(255,255,255,0.04),
        0 2px 4px rgba(0,0,0,0.6);
    line-height: 1;
    overflow: hidden;
    perspective: 200px;
    text-shadow: 0 0 6px rgba(255,255,255,0.45), 0 0 1px rgba(255,255,255,0.7);
}
.flip-tile.big {
    min-width: 64px;
    height: 84px;
    font-size: 64px;
}
.flip-tile.small {
    min-width: 36px;
    height: 36px;
    font-size: 22px;
}
.flip-tile.tiny {
    min-width: 26px;
    height: 30px;
    font-size: 20px;
}
.flip-tile::before {
    /* Center seam removed per request - keep rule empty so any cached overrides do nothing */
    content: none;
}
.flip-digit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform-origin: center;
    animation: flipIn 0.45s ease-out;
    backface-visibility: hidden;
}
@keyframes flipIn {
    0%   { transform: rotateX(-90deg); opacity: 0; }
    55%  { transform: rotateX(15deg);  opacity: 1; }
    80%  { transform: rotateX(-6deg); }
    100% { transform: rotateX(0deg); }
}

/* Spectator scoreboard mobile sizing */
@media (max-width: 640.98px) {
    .spectator-page { padding: 0 6px; margin: 6px auto; }
    .scoreboard.old-school {
        padding: 6px 6px;
        gap: 6px;
    }
    .scoreboard.old-school .team-name {
        font-size: 11px;
        letter-spacing: 0.5px;
    }
    .scoreboard.old-school .team-card { padding: 4px 4px; min-width: 0; flex: 1 1 0; }
    .scoreboard.old-school .inning-display { gap: 2px; padding: 0 2px; flex: 0 0 auto; }
    .flip-tile.big {
        min-width: 28px;
        height: 32px;
        font-size: 22px;
    }
    .flip-tile.small {
        min-width: 18px;
        height: 18px;
        font-size: 12px;
    }
    .flip-tile.tiny {
        min-width: 16px;
        height: 18px;
        font-size: 12px;
    }
    .line-score.old-school table { border-spacing: 1px; }
    .line-score.old-school th,
    .line-score.old-school td { padding: 1px 2px; font-size: 11px; }

    /* Situation row (diamond + outs) */
    .situation-row { gap: 16px; padding: 6px 8px; margin: 6px 0; }
    .situation-diamond { width: 64px; height: 64px; }
    .situation-diamond .sd-base { width: 16px; height: 16px; border-width: 1.5px; }
    .situation-diamond .sd-2 { margin-left: -8px; }
    .situation-diamond .sd-3 { margin-top: -8px; }
    .situation-diamond .sd-1 { margin-top: -8px; }
    .situation-diamond .sd-home { margin-left: -8px; }
    .situation-diamond::before { width: 38px; height: 38px; }
    .situation-outs .so-label { font-size: 11px; letter-spacing: 0.5px; }
    .situation-outs .so-dot { width: 13px; height: 13px; border-width: 1.5px; }
    .situation-outs .so-dots { gap: 5px; }

    /* Now batting + due up + inning summary */
    .now-batting-banner { margin: 6px 0 8px; padding: 8px 10px; border-radius: 8px; }
    .now-batting-banner .nb-label { font-size: 10px; letter-spacing: 1px; }
    .now-batting-banner .nb-name { font-size: 18px; margin: 2px 0; }
    .now-batting-banner .nb-meta { font-size: 12px; }
    .due-up { margin: 6px 0 8px; padding: 6px 10px; border-radius: 8px; }
    .due-up .nb-label { font-size: 10px; margin-bottom: 2px; }
    .due-up .nb-name { font-size: 13px; margin: 1px 0; }
    .inning-summary { padding: 6px 8px; }
    .inning-summary .nb-label { font-size: 10px; }
    .inning-summary-head { font-size: 12px; }
    .inning-summary-row { font-size: 12px; gap: 6px; padding: 2px 0; }
    .inning-summary-row .isr-outcome { font-size: 11px; padding: 1px 6px; }
    .spectator-footer { font-size: 10px; margin-top: 8px; }
}

/* At-Bat Outcome Bar */
.at-bat-bar {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 10px 12px;
    margin: 8px 0 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.at-bat-current {
    color: #ddd;
    font-size: 14px;
}
.at-bat-current .at-bat-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.75;
    margin-right: 8px;
    font-size: 12px;
}
.at-bat-current .at-bat-name {
    font-weight: 700;
    font-size: 16px;
}
.at-bat-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.at-bat-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.at-bat-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px 14px 12px;
    margin: 0;
    background: var(--panel);
    box-shadow: var(--shadow-sm);
}
.at-bat-group > legend {
    padding: 0 8px;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-muted);
}
.ab-btn {
    min-width: 44px;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    background: var(--panel-3);
    box-shadow: var(--shadow-sm);
    transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.ab-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ab-btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.ab-btn.ab-hit { background: var(--good-deep); border-color: var(--good); }
.ab-btn.ab-walk { background: var(--info-deep); border-color: var(--info); }
.ab-btn.ab-out { background: var(--bad-deep); border-color: var(--bad); }
.ab-btn.ab-err { background: var(--warn-deep); border-color: var(--warn); color: #1a1a1a; }
.at-bat-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    color: var(--text);
    font-size: 14px;
    padding: 8px 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.at-bat-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.at-bat-meta .at-bat-totals {
    opacity: 0.9;
    margin-left: 6px;
    padding-left: 12px;
    border-left: 1px solid var(--border-strong);
    color: var(--text-muted);
    font-size: 13px;
}

/* Player at-bat history shown in lineup row */
.player-history {
    margin-left: 8px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    vertical-align: middle;
}
.player-history .ph-chip {
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    line-height: 1.4;
    color: #fff;
    background: rgba(255,255,255,0.1);
    cursor: help;
}
.player-history .ph-chip.ab-hit { background: #2e7d32; }
.player-history .ph-chip.ab-walk { background: #1565c0; }
.player-history .ph-chip.ab-out { background: #6a1b1b; }
.player-history .ph-chip.ab-err { background: #b8860b; color: #111; }

/* Compact at-bat count indicator next to player name */
.player-history-indicator {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.12);
    color: #ddd;
    cursor: help;
}

/* Spectator inning summary */
.summary-and-pitchers {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 8px 0 12px 0;
}
.summary-and-pitchers > .inning-summary,
.summary-and-pitchers > .spectator-pitcher-stats {
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
}
.spectator-pitcher-stats {
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #ddd;
}
.spectator-pitcher-stats .sps-team-label {
    margin: 8px 0 4px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fbbf24;
    border-bottom: 1px solid rgba(251,191,36,0.3);
    padding-bottom: 2px;
}
.spectator-pitcher-stats .sps-team-label:first-child { margin-top: 0; }
.spectator-pitcher-stats .sps-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.spectator-pitcher-stats .sps-table th,
.spectator-pitcher-stats .sps-table td {
    padding: 4px 6px;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.spectator-pitcher-stats .sps-table th {
    color: #b8c5d6;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.spectator-pitcher-stats .sps-table td.sps-name {
    text-align: left;
    white-space: nowrap;
}
.spectator-pitcher-stats .sps-table tr.current {
    background: rgba(46,125,50,0.25);
    font-weight: 700;
}
.inning-summary {
    margin: 8px 0 12px 0;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: #ddd;
}
.inning-summary-group { margin-top: 8px; }
.inning-summary-group:first-of-type { margin-top: 4px; }
.inning-summary-head {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: 0.85;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 2px;
}
.inning-summary-row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 2px 0;
    font-size: 14px;
}
.inning-summary-row .isr-outcome {
    display: inline-block;
    min-width: 36px;
    text-align: center;
    background: rgba(255,255,255,0.08);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
}
.inning-summary-row .isr-outcome.ab-hit { background: #2e7d32; color: #fff; }
.inning-summary-row .isr-outcome.ab-walk { background: #1565c0; color: #fff; }
.inning-summary-row .isr-outcome.ab-out { background: #6a1b1b; color: #fff; }
.inning-summary-row .isr-outcome.ab-err { background: #b8860b; color: #111; }
.inning-summary-row .isr-name { opacity: 0.95; }
.inning-summary-row .isr-runs {
    margin-left: auto;
    background: #2e7d32;
    color: #fff;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 12px;
}


/* Final / game-over badge */
.final-badge {
    display: inline-block;
    font-family: 'Courier New', monospace;
    font-weight: 900;
    color: #ff5252;
    background: #1a0606;
    border: 2px solid #ff5252;
    border-radius: 6px;
    padding: 4px 10px;
    letter-spacing: 3px;
    text-shadow: 0 0 8px rgba(255,82,82,0.85);
    box-shadow: 0 0 10px rgba(255,82,82,0.4);
    font-size: 20px;
}
.spectator-final {
    font-size: 32px;
    padding: 8px 14px;
    letter-spacing: 6px;
}
@media (max-width: 640.98px) {
    .spectator-final { font-size: 18px; padding: 4px 8px; letter-spacing: 3px; }
    .final-badge { font-size: 14px; padding: 2px 6px; letter-spacing: 2px; }
}

.lineup-pos-abbrev {
    display: inline-block;
    min-width: 1.6em;
    text-align: center;
    font-weight: 700;
    color: #ffd740;
    margin-right: 4px;
}

/* Pitch tracking UI */
.pitch-count-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 6px 0; }
.pitch-btn { padding: 6px 14px; border: none; border-radius: 6px; font-weight: 700; color: #fff; cursor: pointer; }
.pitch-btn.pitch-ball { background: #2563eb; }
.pitch-btn.pitch-strike { background: #dc2626; }
.pitch-btn.pitch-foul { background: #f59e0b; color: #1f2937; }
.pitch-btn:hover { filter: brightness(1.1); }

/* Ball/Strike count light board (similar to outs) */
.situation-count {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.situation-count .sc-row { display: flex; align-items: center; gap: 6px; }
.situation-count .sc-label {
    font-size: 12px;
    color: #b8c5d6;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 12px;
    text-align: right;
}
.situation-count .sc-dots { display: flex; gap: 6px; }
.situation-count .sc-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #2a2a3a;
    border: 2px solid #6a6a7a;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.situation-count .sc-dot.ball.on {
    background: #2ecc71;
    border-color: #1e8449;
    box-shadow: 0 0 8px rgba(46,204,113,0.7);
}
.situation-count .sc-dot.strike.on {
    background: #f1c40f;
    border-color: #b9950c;
    box-shadow: 0 0 8px rgba(241,196,15,0.7);
}

/* Inline (operator at-bat header) variant */
.situation-count.inline {
    margin: 0 8px;
}
.situation-count.inline .sc-label { font-size: 11px; }
.situation-count.inline .sc-dots { gap: 4px; }
.situation-count.inline .sc-dot { width: 11px; height: 11px; border-width: 1.5px; }

/* Pitch count line on the pitcher chip */
.situation-pitcher .sp-pitches {
    font-size: 11px;
    opacity: 0.9;
    margin-top: 2px;
}
.situation-pitcher.inline {
    margin-left: auto;
    max-width: 320px;
}

@media (max-width: 600px) {
    .situation-count .sc-dot { width: 12px; height: 12px; border-width: 1.5px; }
    .situation-count .sc-dots { gap: 4px; }
}



/* Third-out modal extra stats */
.third-out-stats { display: flex; gap: 18px; justify-content: center; margin: 8px 0; font-size: 16px; color: #b8c5d6; }
.third-out-stats .tos-stat strong { color: #f9fafb; font-size: 20px; }
.third-out-outcomes { margin: 10px auto 4px; max-width: 520px; text-align: left; }
.third-out-outcomes .too-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #b8c5d6; margin-bottom: 6px; }
.third-out-outcomes .too-list { list-style: decimal inside; margin: 0; padding: 0; max-height: 220px; overflow-y: auto; }
.third-out-outcomes .too-list li { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 8px; }
.third-out-outcomes .too-list li:last-child { border-bottom: none; }
.third-out-outcomes .too-label { display: inline-block; min-width: 48px; padding: 2px 6px; border-radius: 4px; background: #2a2a3a; color: #f9fafb; font-weight: 700; text-align: center; font-size: 12px; }
.third-out-outcomes .too-name { color: #e5e7eb; }


/* Batter + Pitcher side-by-side row on operator dashboard */
.batter-pitcher-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 6px 0 4px 0; }
.batter-pitcher-row .now-batting-banner { flex: 1 1 300px; margin: 0; padding: 6px 12px; border-radius: 8px; }
.batter-pitcher-row .now-batting-banner .nb-label { font-size: 10px; letter-spacing: 1px; opacity: 0.8; }
.batter-pitcher-row .now-batting-banner .nb-name { font-size: 18px; margin: 1px 0; line-height: 1.15; }
.batter-pitcher-row .now-batting-banner .nb-meta { font-size: 11px; line-height: 1.2; }
.batter-pitcher-row .situation-pitcher.inline { margin-left: 0; align-self: stretch; flex: 0 1 260px; padding: 4px 10px; }
.batter-pitcher-row .situation-pitcher .sp-label { font-size: 9px; letter-spacing: 1px; }
.batter-pitcher-row .situation-pitcher .sp-name { font-size: 13px; }
.batter-pitcher-row .situation-pitcher .sp-pitches { font-size: 10px; }

.batter-pitcher-row .inning-summary-cell {
    flex: 1 1 220px;
    align-self: stretch;
    background: #2a2a3a;
    border-radius: 8px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.batter-pitcher-row .inning-summary-cell .isc-label {
    font-size: 10px;
    letter-spacing: 1px;
    opacity: 0.8;
    text-transform: uppercase;
}
.batter-pitcher-row .inning-summary-cell .isc-text {
    font-size: 14px;
    line-height: 1.25;
    margin-top: 2px;
}


/* Pitcher stats popover */
.situation-pitcher.clickable { cursor: pointer; position: relative; }
.situation-pitcher.clickable:hover { filter: brightness(1.08); }
.pitcher-stats-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 9000; display: flex; align-items: flex-start; justify-content: center; padding: 60px 16px 16px; }
.pitcher-stats-popover { position: relative; z-index: 9001; background: #1f2937; color: #f9fafb; border: 1px solid #374151; border-radius: 8px; box-shadow: 0 12px 36px rgba(0,0,0,0.6); padding: 20px 24px; min-width: 520px; max-width: min(840px, 96vw); max-height: 88vh; overflow-y: auto; cursor: default; }
.pitcher-stats-popover .psp-header { display: flex; justify-content: space-between; align-items: center; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; color: #b8c5d6; }
.pitcher-stats-popover .psp-close { background: transparent; color: #f9fafb; border: none; cursor: pointer; font-size: 22px; padding: 4px 10px; }
.pitcher-stats-popover .psp-close:hover { color: #f87171; }
.pitcher-stats-popover .psp-empty { padding: 12px 4px; font-size: 16px; color: #9ca3af; }
.pitcher-stats-popover .psp-table { width: 100%; border-collapse: collapse; font-size: 18px; }
.pitcher-stats-popover .psp-table th, .pitcher-stats-popover .psp-table td { padding: 8px 10px; text-align: center; border-bottom: 1px solid rgba(255,255,255,0.08); }
.pitcher-stats-popover .psp-table th { color: #b8c5d6; font-weight: 600; font-size: 14px; }
.pitcher-stats-popover .psp-table td.psp-name { text-align: left; white-space: nowrap; }
.pitcher-stats-popover .psp-table tr.current { background: rgba(46,125,50,0.25); font-weight: 700; }
@media (max-width: 600px) {
  .pitcher-stats-popover { left: 0; right: auto; min-width: 0; width: 92vw; }
}


.pitcher-stats-popover .psp-team-label { margin: 14px 0 6px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #fbbf24; border-bottom: 1px solid rgba(251,191,36,0.3); padding-bottom: 4px; }
.pitcher-stats-popover .psp-team-label:first-child { margin-top: 0; }


/* Hot key groups */
.hotkey-add-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.hotkey-group-panel { max-width: 600px; gap: 14px; }
.hotkey-group-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hotkey-group-header h3 { margin: 0; color: #ffd166; }
.hotkey-group-header-actions { display: flex; gap: 6px; }
.hotkey-group-title-input { flex: 1; background: #2a2a3a; color: #eee; border: 1px solid #444; border-radius: 6px; padding: 8px 10px; font-size: 16px; }
.hotkey-group-songs { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.hotkey-group-empty { color: #cfd2d8; font-size: 14px; padding: 8px 0; }
.hotkey-group-edit-actions { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 12px; }


.hotkey-group-song-row { display: flex; gap: 6px; align-items: stretch; }
.hotkey-group-song-btn { flex: 1 1 auto; text-align: left; }


.hotkey-art { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; vertical-align: middle; margin-right: 8px; flex: 0 0 auto; }
/* Emoji icons (folder / music-note fallback) share the same fixed 28x28 box
   as album art so their labels line up in the same left column and the icon
   is a consistent size. */
.hotkey-icon { width: 28px; height: 28px; margin-right: 8px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; }
.split-main { display: inline-flex; align-items: center; gap: 0; }
.hotkey-group-song-btn { display: inline-flex; align-items: center; gap: 0; }
.hotkey-label { vertical-align: middle; }


/* ---- Keyboard shortcut help overlay ---- */
.shortcut-help-overlay {
    position: fixed; inset: 0; z-index: 4000;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    padding: 20px; backdrop-filter: blur(2px);
}
.shortcut-help-card {
    background: #1e1e2e; color: #e6e6f0;
    border: 1px solid #3a3a55; border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    width: min(520px, 96vw); max-height: 90vh; overflow: auto;
    padding: 18px 20px;
}
.shortcut-help-header {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 1.15rem; font-weight: 700; margin-bottom: 14px;
}
.shortcut-help-close {
    background: transparent; border: none; color: #b8b8d0;
    font-size: 1.1rem; cursor: pointer; padding: 4px 8px; border-radius: 6px;
}
.shortcut-help-close:hover { background: #2c2c44; color: #fff; }
.shortcut-help-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
}
.shortcut-help-grid > div {
    display: flex; align-items: center; gap: 10px;
}
.shortcut-help-grid kbd {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; padding: 3px 8px;
    background: #2c2c44; border: 1px solid #4a4a6a; border-bottom-width: 3px;
    border-radius: 6px; font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem; font-weight: 700; color: #fff;
}
.shortcut-help-grid span { font-size: 0.92rem; }
.shortcut-help-foot {
    margin-top: 14px; font-size: 0.8rem; color: #9a9ab5;
    border-top: 1px solid #33334d; padding-top: 10px;
}
@media (max-width: 520px) {
    .shortcut-help-grid { grid-template-columns: 1fr; }
}

/* ---- Now Playing bar ---- */
.now-playing-bar {
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: 12px; z-index: 3500;
    display: flex; align-items: center; gap: 10px;
    max-width: min(560px, 94vw);
    padding: 8px 12px 8px 14px;
    background: rgba(24,24,38,0.96); color: #e6e6f0;
    border: 1px solid #3a3a55; border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
    backdrop-filter: blur(4px);
}
.now-playing-label {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: #9a9ab5; font-weight: 700; flex: 0 0 auto;
}
.now-playing-track {
    font-size: 0.9rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 1 1 auto; min-width: 0;
}
.now-playing-stop {
    flex: 0 0 auto; border: none; cursor: pointer;
    background: #b3384a; color: #fff; font-weight: 700;
    padding: 5px 12px; border-radius: 999px; font-size: 0.82rem;
}
.now-playing-stop:hover { background: #c9435a; }
.now-playing-eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; flex: 0 0 auto; }
.now-playing-eq i {
    width: 3px; background: #4ade80; border-radius: 1px;
    animation: npEq 0.9s ease-in-out infinite;
}
.now-playing-eq i:nth-child(1) { height: 6px; animation-delay: 0s; }
.now-playing-eq i:nth-child(2) { height: 14px; animation-delay: 0.15s; }
.now-playing-eq i:nth-child(3) { height: 9px; animation-delay: 0.3s; }
@keyframes npEq {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(1); }
}

/* ---- Search / filter inputs (Settings + Teams) ---- */
.sfx-filter-row, .roster-filter-row {
    display: flex; align-items: center; gap: 8px; margin: 10px 0 14px;
}
.sfx-filter-input, .roster-filter-input {
    flex: 1 1 auto; max-width: 340px;
    padding: 7px 12px; border-radius: 8px;
    border: 1px solid #3a3a55; background: #1a1a28; color: #e6e6f0;
    font-size: 0.9rem;
}
.sfx-filter-input:focus, .roster-filter-input:focus {
    outline: none; border-color: #6a6aff;
}
.sfx-filter-clear, .roster-filter-clear {
    border: none; background: #2c2c44; color: #b8b8d0;
    border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 0.85rem;
}
.sfx-filter-clear:hover, .roster-filter-clear:hover { background: #3a3a55; color: #fff; }

/* ---- Playlist validation feedback ---- */
.playlist-check-row {
    display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap;
}
.playlist-check-ok { color: #4ade80; font-weight: 600; font-size: 0.9rem; }
.playlist-check-bad { color: #f87171; font-weight: 600; font-size: 0.9rem; }
.playlist-check-warn { color: #fbbf24; font-weight: 600; font-size: 0.9rem; }

/* ---- Mobile / touch polish for new UI ---- */
@media (pointer: coarse) {
    /* Keyboard shortcuts need a physical keyboard; hide the entry point on touch. */
    .shortcut-menu-btn { display: none; }
    .now-playing-stop { min-height: 40px; padding: 8px 16px; }
    .sfx-filter-input, .roster-filter-input,
    .sfx-filter-clear, .roster-filter-clear { min-height: 44px; }
}
@media (max-width: 600px) {
    .now-playing-bar {
        left: 8px; right: 8px; transform: none;
        max-width: none; border-radius: 12px;
    }
    .now-playing-label { display: none; }
    .sfx-filter-input, .roster-filter-input { max-width: none; }
}

/* ---- Now Playing progress bar ---- */
.now-playing-main { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.now-playing-line { display: flex; align-items: center; gap: 8px; min-width: 0; }
.now-playing-progress {
    height: 4px; border-radius: 999px; overflow: hidden;
    background: rgba(255,255,255,0.15); width: 100%;
}
.now-playing-progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(90deg, #4ade80, #22d3ee);
    border-radius: 999px;
}