/* @import must stay before every other rule; browsers ignore it anywhere else. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700&display=swap');

/* Court Command styles, in cascade order. At equal specificity a rule in a later file wins over one
   in an earlier file, so this order is part of how the app looks: do not reorder these imports.
   The build joins them into a single stylesheet. See docs/CODING_RULES.md for the CSS rules. */
/* Desktop dashboard additions must never overflow while a viewport transition is pending. */
@media (max-width: 767px) {
    .dash-kpi-grid,
    .dash-brand-mark,
    .dash-game-opponent-mark,
    .dash-chart-legend-modern { display: none; }
}

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

:root {
    /* Shared theme tokens. Components should use semantic values instead of
       introducing another page-specific colour or surface. */
    --cc-bg: #0a0a0a;
    --cc-surface: #151515;
    --cc-surface-raised: #1d1d1d;
    --cc-input: #0f0f0f;
    --cc-control: #202020;
    --cc-control-hover: #2d2d2d;
    --cc-border: #383838;
    --cc-border-strong: #3a4048;
    --cc-border-soft: rgba(255, 255, 255, 0.08);
    --cc-border-soft-strong: rgba(255, 255, 255, 0.12);
    --cc-text: #f7f7f7;
    --cc-text-subtle: #c5cbd2;
    --cc-text-muted: #9c9c9c;
    --cc-text-on-dark: rgba(255, 255, 255, 0.92);
    --cc-text-on-dark-muted: rgba(255, 255, 255, 0.56);
    --cc-accent: #ff9f0a;
    --cc-accent-hover: #ffb238;
    --cc-success: #31d07c;
    --cc-warning: #ffb341;
    --cc-danger: #ff7e87;
    --cc-focus: #ff9f0a;
    --cc-on-accent: #121518;
    --cc-scrim: rgba(7, 7, 7, 0.76);
    /* Dashboard values retained as separate semantic aliases so this cleanup
       does not change the current dark appearance. */
    --cc-dashboard-surface: #181818;
    --cc-dashboard-surface-2: #111111;
    --cc-dashboard-border: rgba(255, 255, 255, 0.085);
    --cc-dashboard-border-strong: rgba(255, 255, 255, 0.14);
    --cc-dashboard-muted: #8e949d;
    --cc-dashboard-accent: #ff9f0a;
    --cc-dashboard-danger: #ff4d5a;
    /* Wordmark colours (brand/*.svg); light values in 19-brand.css. */
    --cc-brand-text: #ffffff;
    --cc-brand-accent: #f47a2a;
    --cc-brand-muted: #b9c0cf;
    /* The icon's navy tile; the same in both themes. */
    --cc-brand-ink: #111a2e;

    --primary: #FF6B35;
    --primary-dark: #E85A2A;
    --secondary: #424242;
    --secondary-dark: #313131;
    --bg: #0f0f0f;
    --surface: #202020;
    --surface-light: #2c2c2c;
    --text: #FFFFFF;
    --text-dim: #a8a8a8;
    --success: #00D084;
    --warning: #FFB020;
    --danger: #FF4757;
    --border: #2D3555;
    --live-surface: #191919;
    --live-surface-soft: #242424;
    --live-border: #3b4b79;
    --live-shadow: 0 14px 34px rgba(2, 6, 18, 0.48);
    --court-zone-hot: #dc3a32;
    --court-zone-neutral: #8b5bb5;
    --court-zone-cold: #2069d3;
    --court-zone-no-sample: #6f7b8b;
}

body {
    font-family: 'Inter', sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
}

/* Setup Screen */
.setup-screen {
    min-height: 100vh;
    padding: 2.5rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background-color: var(--cc-light-surface, #121212);
    background-image:
        var(--cc-light-decoration, radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 1.5px),
        radial-gradient(70% 60% at 50% 45%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.86) 70%),
        radial-gradient(40% 70% at 0% 50%, rgba(255, 152, 0, 0.10), transparent 70%),
        radial-gradient(40% 70% at 100% 50%, rgba(255, 152, 0, 0.08), transparent 70%),
        radial-gradient(65% 55% at 78% 20%, rgba(255, 183, 77, 0.06), transparent 72%));
    background-size: 22px 22px, cover, cover, cover, cover;
    background-position: 0 0, center, center, center, center;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.quick-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1.5px;
    font-size: 2.2rem;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.quick-subtitle {
    color: var(--text-dim);
    margin-bottom: 1.4rem;
    font-size: 0.95rem;
}

.form-section.compact {
    margin-bottom: 1rem;
}

.manual-roster-note {
    margin-bottom: 0.55rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.52));
    font-size: 0.78rem;
    line-height: 1.35;
}

.manual-roster-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.18));
}

.manual-roster-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 360px;
}

.manual-roster-table th,
.manual-roster-table td {
    padding: 0.45rem;
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.06));
}

.manual-roster-table th {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.54));
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-align: left;
    text-transform: uppercase;
}

.manual-roster-table td:nth-child(3),
.manual-roster-table th:nth-child(3) {
    width: 130px;
}

.manual-roster-table tbody tr:last-child td {
    border-bottom: none;
}

.manual-roster-table input {
    width: 100%;
    min-height: 36px;
    padding: 0.45rem 0.55rem;
    border-radius: 8px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, rgba(8, 8, 8, 0.72));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
    font: inherit;
}

.manual-roster-table input:focus {
    outline: none;
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.5));
    box-shadow: var(--cc-light-shadow, 0 0 0 2px rgba(255, 152, 0, 0.12));
}

.roster-mode-btn {
    margin-top: 0.75rem;
    width: 100%;
    justify-content: center;
}

.onboarding-screen .paste-info,
#teamManagerScreen .paste-info,
#replaceRosterModal .paste-info {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(13, 13, 13, 0.96) 0%, rgba(3, 3, 3, 0.98) 100%));
    border: 1px dashed var(--cc-light-border, rgba(255, 255, 255, 0.16));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.72));
}

.history-list {
    display: grid;
    gap: 0.75rem;
}

.history-item {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.history-item span {
    color: var(--text-dim);
    font-size: 0.85rem;
}

.past-game-meta {
    color: var(--text-dim);
    margin-bottom: 1rem;
}

#pastGameDetailModal .past-game-meta {
    margin-bottom: 1.2rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.58));
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.past-game-team-heading {
    margin-bottom: 0.65rem;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.9rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#pastGameDetailModal .past-game-team-heading.home {
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.96));
}

#pastGameDetailModal .past-game-team-heading.away {
    margin-top: 1.8rem;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
}

.history-empty {
    color: var(--text-dim);
}

.manager-actions {
    display: flex;
    gap: 0.8rem;
    margin-top: 0.8rem;
}

.manager-actions input,
.manager-actions select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--cc-light-surface, #161616);
    color: var(--text);
    padding: 0.65rem 0.75rem;
}

.manager-note {
    margin-top: 0.7rem;
    color: var(--text-dim);
    font-size: 0.82rem;
}

.manager-item {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
}

.manager-item-meta {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.manager-item-meta span {
    color: var(--text-dim);
    font-size: 0.82rem;
}

.manager-item-actions {
    display: flex;
    gap: 0.5rem;
}

.team-warning-pill {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--cc-light-accent-border, #8f6b2e);
    border-radius: 999px;
    background: rgba(255, 176, 32, 0.12);
    color: var(--cc-light-accent, #ffd691);
    font-size: 0.74rem;
    font-weight: 600;
}

.player-manager-warnings {
    margin-top: 0.7rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.player-table-wrap {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow-x: auto;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.02));
}

.player-manager-table {
    min-width: 680px;
}

.player-card-list {
    display: none;
    margin-top: 0.75rem;
    gap: 0.65rem;
}

.player-card-item {
    width: 100%;
}

.mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    border: 1px solid var(--cc-light-border, #4a5267);
    border-radius: 9px;
    background: var(--cc-light-control, linear-gradient(180deg, #1c1c1c 0%, #101010 100%));
    color: var(--cc-light-text, #f6f8fd);
    padding: 0.46rem 0.72rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.2px;
    cursor: pointer;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 10px rgba(0, 0, 0, 0.3));
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}

.mini-btn:hover {
    border-color: var(--cc-light-accent-border, #f0a25f);
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(240, 162, 95, 0.24));
    transform: translateY(-1px);
}

.mini-btn:active {
    transform: translateY(0);
    box-shadow: var(--cc-light-shadow, inset 0 2px 7px rgba(0, 0, 0, 0.4));
}

.mini-btn:focus-visible {
    outline: none;
    border-color: var(--cc-light-accent-border, #ffb26d);
    box-shadow: var(--cc-light-shadow, 0 0 0 2px rgba(255, 178, 109, 0.28));
}

.mini-btn.danger {
    border-color: var(--cc-light-danger-border, #a7434e);
    color: var(--cc-light-text, #ffe4e8);
    background: var(--cc-light-danger-soft, linear-gradient(180deg, #5a2027 0%, #3f151b 100%));
}

.mini-btn.danger:hover {
    border-color: var(--cc-light-danger-border, #d86472);
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 6px 14px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(216, 100, 114, 0.24));
}

.edit-league-teams-list {
    display: grid;
    gap: 0.45rem;
}

.edit-league-team-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.02));
}

.edit-league-team-name {
    font-weight: 600;
    color: var(--text);
}

.edit-league-team-count {
    color: var(--text-dim);
    font-size: 0.8rem;
}

.stat-cell-edit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.stat-adjust-btn {
    border: 1px solid var(--cc-light-border, #3b4150);
    border-radius: 6px;
    background: var(--cc-light-control, #121212);
    color: var(--cc-light-text, #f2f5f9);
    width: 22px;
    height: 22px;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.stat-adjust-btn:hover {
    border-color: var(--primary);
}

.start-game-screen {
    width: 100%;
    max-width: none;
    height: fit-content;
    margin: 0 auto;
    border: 1px solid var(--cc-light-border, #2d3038);
    border-radius: 18px;
    box-shadow: var(--cc-light-shadow, 0 14px 45px rgba(0, 0, 0, 0.42));
    padding: clamp(1.7rem, 1.2rem + 1.2vw, 2.35rem) clamp(1.35rem, 1.05rem + 1vw, 2.2rem);
    align-self: center;
    position: relative;
    overflow: hidden;
    background:
        var(--cc-light-surface, radial-gradient(78% 64% at 50% 26%, rgba(255, 112, 40, 0.14), transparent 72%),
        radial-gradient(54% 48% at 50% 96%, rgba(68, 68, 68, 0.16), transparent 78%),
        linear-gradient(180deg, rgba(29, 29, 29, 0.97), rgba(14, 14, 14, 0.98)));
    border-color: var(--cc-light-border, #2f364a);
}

.start-game-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 22% 40%, rgba(255, 168, 96, 0.16) 0 1px, transparent 1px),
        radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.16) 0 1px, transparent 1px);
    background-size: 180px 180px, 220px 220px;
    opacity: 0.36;
}

.start-game-screen > * {
    position: relative;
    z-index: 1;
}

.start-game-screen .quick-title {
    color: var(--cc-light-text, #f2f4f8);
}

.start-game-screen .quick-subtitle,
.start-game-screen label {
    color: var(--cc-light-subtle, #aeb7cb);
}

.start-game-screen .form-section.compact {
    margin-bottom: 0.9rem;
    display: grid;
    gap: 0.7rem;
}

.start-game-screen .form-group {
    gap: 0.15rem;
}

.start-game-screen .btn,
.start-game-screen select {
    min-height: 48px;
}

.start-game-screen input[type="text"],
.start-game-screen input[type="number"],
.start-game-screen select,
.start-game-screen textarea {
    background: var(--cc-light-surface, linear-gradient(180deg, #2e2e2e 0%, #292929 100%));
    border-color: var(--cc-light-blue-border, #3a4363);
    color: var(--cc-light-text, #f2f5f9);
    font-weight: 600;
}

.start-game-screen textarea {
    min-height: 150px;
}

.start-game-screen select:focus,
.start-game-screen input[type="text"]:focus,
.start-game-screen input[type="number"]:focus,
.start-game-screen textarea:focus {
    background: var(--cc-light-surface, linear-gradient(180deg, #292929 0%, #212121 100%));
    border-color: var(--primary);
}

.start-game-screen select option {
    background: #f5f5f5;
    color: #121722;
}

.start-game-screen select option[value=""] {
    color: var(--cc-light-muted, #4f5a70);
}

.start-game-screen .league-rules-note {
    border-color: var(--cc-light-border, #343d59);
    background: var(--cc-light-surface, rgba(18, 18, 18, 0.9));
    color: var(--cc-light-text, #d7deef);
    margin-bottom: 0.95rem;
}

.start-game-screen .btn.btn-full {
    margin-top: 0.35rem;
}

.start-game-block-hint {
    margin-top: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--cc-light-accent-border, #8f6b2e);
    border-radius: 10px;
    background: rgba(255, 176, 32, 0.12);
    color: var(--cc-light-accent, #ffd691);
    font-size: 0.85rem;
    line-height: 1.35;
}

.start-game-opponent-warning {
    margin: 0 0 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.start-game-opponent-warning .dash-link {
    flex: 0 0 auto;
}

.start-game-screen .screen-bottom-bar {
    margin-top: 1rem;
}

.start-game-screen .btn-secondary {
    background: var(--cc-light-control, linear-gradient(180deg, #232323 0%, #171717 100%));
    border: 1px solid var(--cc-light-border, #3a3f4b);
    color: var(--cc-light-text, #f2f5f9);
}

.start-game-screen .btn-secondary:hover {
    border-color: var(--primary);
    background: var(--cc-light-control-hover, linear-gradient(180deg, #2c2c2c 0%, #1b1b1b 100%));
}

.start-game-screen h3 {
    color: var(--cc-light-text, #f2f4f8);
}

/* Team Manager (dash layout) */
#teamManagerScreen {
    background: none;
    border: none;
    box-shadow: none;
}

/* League Hub (dash layout) */
#leagueHubScreen {
    background: none;
    border: none;
    box-shadow: none;
}

#leagueHubScreen .lh-panel-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.9rem;
}

#leagueHubScreen .lh-action-btn {
    min-height: 44px;
    padding: 0.7rem 1.15rem;
    border-radius: 10px;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.22));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(34, 34, 34, 0.92) 0%, rgba(10, 10, 10, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: none;
}

#leagueHubScreen .lh-action-btn:hover {
    transform: translateY(-1px);
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.45));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(46, 46, 46, 0.94) 0%, rgba(12, 12, 12, 0.99) 100%));
    box-shadow: none;
}

#leagueHubScreen .lh-league-list {
    display: grid;
    gap: 0.8rem;
}

#leagueHubScreen .lh-league-card {
    border-radius: 18px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(90deg, rgba(34, 34, 34, 0.86), rgba(18, 18, 18, 0.86)));
    padding: 1rem 1.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

#leagueHubScreen .lh-league-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

#leagueHubScreen .lh-league-badge {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.10));
    background: rgba(255, 152, 0, 0.12);
    display: grid;
    place-items: center;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
    flex: 0 0 auto;
}

#leagueHubScreen .lh-league-meta {
    min-width: 0;
}

#leagueHubScreen .lh-league-name {
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.95));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#leagueHubScreen .lh-league-rules {
    margin-top: 0.25rem;
    font-size: 0.82rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
    line-height: 1.25;
}

#leagueHubScreen .lh-league-count {
    margin-top: 0.35rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cc-light-accent, rgba(255, 152, 0, 0.9));
    font-weight: 900;
}

#leagueHubScreen .lh-league-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
}

#leagueHubScreen .lh-league-actions .mini-btn {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.14));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(32, 32, 32, 0.92) 0%, rgba(10, 10, 10, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
    min-height: 42px;
    min-width: 88px;
}

#leagueHubScreen .lh-league-actions .mini-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
}

#leagueHubScreen .lh-league-actions .mini-btn.danger {
    border-color: var(--cc-light-danger-border, rgba(255, 112, 112, 0.35));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(90, 25, 32, 0.92) 0%, rgba(35, 10, 14, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 228, 232, 0.96));
}

.tm-hero {
    position: relative;
    padding: 0.25rem 0;
}

.tm-module {
    margin-top: 0.65rem;
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.6));
}

.tm-hero-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.tm-season {
    text-align: right;
    padding-top: 0.35rem;
}

.tm-season-label {
    font-size: 0.7rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.4));
}

.tm-season-value {
    margin-top: 0.2rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
}

.tm-title-row {
    margin-top: 0.75rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.tm-title-wrap {
    position: relative;
    display: grid;
    align-items: end;
}

.tm-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1.6px;
    font-size: clamp(2.8rem, 2.1rem + 2.4vw, 4.2rem);
    text-transform: uppercase;
    line-height: 1;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96));
}

.tm-ghost {
    position: absolute;
    left: 100%;
    top: 52%;
    transform: translate(-6%, -50%) skewX(-10deg);
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2.4px;
    font-size: clamp(2.6rem, 2rem + 2.6vw, 4.4rem);
    opacity: 0.12;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.95));
    white-space: nowrap;
    pointer-events: none;
}

.tm-portal {
    font-size: 0.7rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.38));
    padding-bottom: 0.55rem;
}

.tm-panel {
    margin-top: 1.25rem;
    border-radius: 18px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(26, 26, 26, 0.74), rgba(16, 16, 16, 0.72)));
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.45));
    padding: 1.15rem 1.2rem;
}

.tm-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.95rem;
}

.tm-panel-title {
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

.tm-form-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.2fr;
    gap: 1.1rem;
}

.tm-list {
    margin-top: 1.35rem;
}

.tm-teams-panel .tm-list {
    margin-top: 0;
}

.tm-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.tm-list-title {
    font-size: 1.35rem;
    letter-spacing: 0.02em;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

.tm-pool {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.10));
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.22));
}

.tm-pool-label {
    font-size: 0.66rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.42));
}

.tm-pool-value {
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cc-light-accent, rgba(255, 152, 0, 0.95));
}

.tm-team-list {
    display: grid;
    gap: 0.8rem;
}

.tm-team-card {
    border-radius: 18px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(90deg, rgba(34, 34, 34, 0.86), rgba(18, 18, 18, 0.86)));
    padding: 1rem 1.05rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.tm-team-left {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-width: 0;
}

.tm-team-badge {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.10));
    background: rgba(255, 152, 0, 0.12);
    display: grid;
    place-items: center;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
    flex: 0 0 auto;
}

.tm-team-meta {
    min-width: 0;
}

.tm-team-name {
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.95));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-team-sub {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.5));
}

.tm-team-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex: 0 0 auto;
}

/* Square icon button; the icon follows the button's text colour. */
.tm-icon-btn {
    display: inline-grid;
    place-items: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    line-height: 1;
}

.tm-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#teamManagerScreen .tm-actions {
    justify-content: flex-end;
    margin-top: 0.9rem;
}

#teamManagerScreen .tm-action-btn {
    min-height: 44px;
    padding: 0.7rem 1.15rem;
    border-radius: 10px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.12));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(34, 34, 34, 0.92) 0%, rgba(10, 10, 10, 0.98) 100%));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.76));
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.45));
}

#teamManagerScreen .tm-action-btn:hover {
    transform: translateY(-1px);
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(46, 46, 46, 0.94) 0%, rgba(12, 12, 12, 0.99) 100%));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.16));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.86));
}

#teamManagerScreen .tm-action-btn:active {
    transform: translateY(0);
}

#teamManagerScreen .tm-action-primary {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.14));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
}

body:not(.live-game-active) #teamManagerScreen .tm-action-primary {
    background: var(--page-accent);
    border-color: var(--page-accent);
    color: var(--page-surface);
}

body:not(.live-game-active) #teamManagerScreen .tm-action-primary:hover:not(:disabled) {
    background: var(--page-accent-hover);
    border-color: var(--page-accent-hover);
    color: var(--page-surface);
}

#playerManagementScreen .tm-action-btn {
    min-height: 44px;
    padding: 0.7rem 1.15rem;
    border-radius: 10px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.12));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(34, 34, 34, 0.92) 0%, rgba(10, 10, 10, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.45));
}

#playerManagementScreen .tm-action-btn:hover {
    transform: translateY(-1px);
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(46, 46, 46, 0.94) 0%, rgba(12, 12, 12, 0.99) 100%));
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.45));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#playerManagementScreen .tm-action-primary {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.22));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.94));
}

.pm-toolbar-grid {
    display: grid;
    gap: 0.9rem;
}

.pm-toolbar-actions,
.pm-toolbar-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
}

.pm-toolbar-filters [data-action="togglePlayerManagerArchived"][hidden] {
    display: none;
}

#playerManagementScreen input[type="text"],
#playerManagementScreen input[type="number"],
#playerManagementScreen select,
#playerManagementScreen textarea {
    border-radius: 11px;
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.1));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(20, 20, 20, 0.92) 0%, rgba(7, 7, 7, 0.96) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
}

#playerManagementScreen input[type="text"]:focus,
#playerManagementScreen input[type="number"]:focus,
#playerManagementScreen select:focus,
#playerManagementScreen textarea:focus {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.62));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(24, 24, 24, 0.94) 0%, rgba(8, 8, 8, 0.98) 100%));
}

#playerManagementScreen .player-table-wrap {
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(18, 18, 18, 0.96), rgba(8, 8, 8, 0.98)));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.04));
}

#playerManagementScreen .player-manager-table {
    min-width: 680px;
}

#playerManagementScreen .player-manager-table thead th {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
}

#playerManagementScreen .player-manager-table tbody tr {
    background: transparent;
}

#playerManagementScreen .player-manager-table td {
    border-bottom-color: var(--cc-light-border, rgba(255, 255, 255, 0.07));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
}

#playerManagementScreen .player-manager-table tbody tr:hover {
    background: rgba(255, 152, 0, 0.06);
}

#playerManagementScreen .player-card-list {
    margin-top: 0.9rem;
}

#playerManagementScreen .player-card-item {
    border-radius: 14px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(90deg, rgba(34, 34, 34, 0.86), rgba(18, 18, 18, 0.86)));
}

#playerManagementScreen input::placeholder {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.34));
    opacity: 1;
}

#playerManagementScreen select option {
    background: var(--cc-light-control, #101010);
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#playerManagementScreen .manager-item-actions {
    gap: 0.55rem;
}

#playerManagementScreen .manager-item-actions .mini-btn {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.14));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(32, 32, 32, 0.92) 0%, rgba(10, 10, 10, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#playerManagementScreen .manager-item-actions .mini-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 14px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 152, 0, 0.16));
}

#playerManagementScreen .manager-item-actions .mini-btn.danger {
    border-color: var(--cc-light-danger-border, rgba(255, 112, 112, 0.35));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(90, 25, 32, 0.92) 0%, rgba(35, 10, 14, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 228, 232, 0.96));
}

#playerManagementScreen .player-manager-warnings {
    margin-top: 0.9rem;
}

#playerManagementScreen .pm-bottom-bar {
    border-top-color: var(--cc-light-border, rgba(255, 255, 255, 0.08));
    padding-top: 0.95rem;
}

#playerManagementScreen .icon-nav-btn {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.12));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(30, 30, 30, 0.96) 0%, rgba(12, 12, 12, 0.98) 100%));
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.96));
}

#playerManagementScreen .icon-nav-label {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.84));
}

.pg-panel {
    padding-bottom: 1.2rem;
}

.pg-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

#pastGamesScreen .tm-action-btn {
    min-height: 44px;
    padding: 0.7rem 1.1rem;
    border-radius: 10px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.12));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(34, 34, 34, 0.92) 0%, rgba(10, 10, 10, 0.98) 100%));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.78));
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.45));
}

#pastGamesScreen .tm-action-btn:hover {
    transform: translateY(-1px);
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(46, 46, 46, 0.94) 0%, rgba(12, 12, 12, 0.99) 100%));
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.45));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.88));
}

#pastGamesScreen .pg-clear-btn {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.22));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(34, 34, 34, 0.92), rgba(10, 10, 10, 0.98)));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
    box-shadow: none;
}

#pastGamesScreen .pg-clear-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.45));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(46, 46, 46, 0.94), rgba(12, 12, 12, 0.99)));
    box-shadow: none;
}

#pastGamesScreen .btn.btn-secondary,
#pastGameInfoModal .btn.btn-secondary,
#pastGameDetailModal .btn.btn-secondary {
    background: var(--cc-light-control, linear-gradient(180deg, rgba(30, 30, 30, 0.96) 0%, rgba(12, 12, 12, 0.98) 100%));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.14));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#pastGamesScreen .btn.btn-secondary:hover,
#pastGameInfoModal .btn.btn-secondary:hover,
#pastGameDetailModal .btn.btn-secondary:hover {
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(40, 40, 40, 0.98) 0%, rgba(14, 14, 14, 0.99) 100%));
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
    color: var(--cc-light-text, rgba(255, 248, 238, 0.96));
}

#pastGamesScreen .btn.btn-danger,
#pastGameInfoModal .btn.btn-danger {
    border-color: var(--cc-light-danger-border, rgba(255, 112, 112, 0.35));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(90, 25, 32, 0.92) 0%, rgba(35, 10, 14, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 228, 232, 0.96));
}

#pastGameDetailModal .modal-actions.wide-spacing {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0.7rem;
}

#pastGameDetailModal .modal-actions.wide-spacing .btn {
    width: 100%;
    min-height: 44px;
    justify-content: center;
    white-space: normal;
    text-align: center;
    line-height: 1.2;
}

#pastGameDetailModal .past-game-export-btn {
    border-color: var(--cc-light-accent-border, rgba(255, 171, 71, 0.22));
    background: linear-gradient(180deg, #f59b33 0%, #ea6a0a 100%);
    color: #1a1108;
    box-shadow: var(--cc-light-shadow, 0 5px 14px rgba(0, 0, 0, 0.3));
}

#pastGameDetailModal .past-game-export-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 189, 102, 0.42));
    background: linear-gradient(180deg, #ffad45 0%, #f27c18 100%);
}

#pastGamesScreen .btn.btn-danger:hover,
#pastGameInfoModal .btn.btn-danger:hover {
    border-color: var(--cc-light-danger-border, rgba(255, 132, 132, 0.5));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(112, 31, 40, 0.95) 0%, rgba(44, 12, 17, 0.99) 100%));
    color: var(--cc-light-text, #ffffff);
}

.pg-list {
    display: grid;
    gap: 0.9rem;
}

.pg-card {
    border-radius: 18px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(135deg, rgba(30, 30, 30, 0.92), rgba(14, 14, 14, 0.9)));
    box-shadow: var(--cc-light-shadow, 0 18px 42px rgba(0, 0, 0, 0.4));
    padding: 1rem 1.05rem;
    display: grid;
    gap: 0.95rem;
}

.pg-card.compact {
    border-radius: 14px;
    padding: 0.95rem;
}

.pg-card-top {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.pg-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.1));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.74));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.pg-pill.accent {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.22));
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.92));
}

.pg-pill.neutral {
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.72));
}

.pg-pill.win {
    border-color: var(--cc-light-success-border, rgba(46, 204, 113, 0.3));
    background: rgba(46, 204, 113, 0.1);
    color: var(--cc-light-success, rgba(159, 255, 197, 0.94));
}

.pg-pill.loss {
    border-color: var(--cc-light-danger-border, rgba(255, 82, 82, 0.3));
    background: rgba(255, 82, 82, 0.1);
    color: var(--cc-light-danger, rgba(255, 176, 176, 0.94));
}

.pg-matchup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
}

.pg-team-name {
    min-width: 0;
    font-size: 1.05rem;
    font-weight: 900;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.94));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-matchup .pg-team-name:last-child {
    text-align: right;
}

.pg-scoreline {
    min-width: 112px;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.8rem, 1.45rem + 0.8vw, 2.35rem);
    letter-spacing: 0.05em;
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.96));
}

.pg-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.pg-card-meta {
    font-size: 0.82rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.46));
}

.pg-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.pg-actions .btn {
    min-height: 40px;
}

.pg-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.pg-pagination-status {
    min-width: 100px;
    text-align: center;
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.7));
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.pg-info-scoreboard {
    margin-top: 0.8rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(28, 28, 28, 0.85), rgba(14, 14, 14, 0.92)));
}

.pg-info-team {
    min-width: 0;
}

.pg-info-team-away {
    text-align: right;
}

.pg-info-team-label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.42));
}

.pg-info-team strong {
    display: block;
    margin-top: 0.32rem;
    font-size: 1.08rem;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.94));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-info-score {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 1.8rem + 1vw, 3rem);
    letter-spacing: 0.06em;
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.98));
}

.pg-info-grid {
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.pg-info-card {
    border-radius: 16px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.03));
    padding: 0.95rem 1rem;
}

.pg-info-card-label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.44));
}

.pg-info-card-value {
    display: block;
    margin-top: 0.38rem;
    font-size: 1.02rem;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

@media (max-width: 860px) {
    .tm-form-grid {
        grid-template-columns: 1fr;
    }

    .tm-list-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .tm-title-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .tm-ghost {
        display: none;
    }

    .pg-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .pg-actions {
        justify-content: flex-start;
    }

    .pg-matchup,
    .pg-info-scoreboard {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .pg-matchup .pg-team-name:last-child,
    .pg-info-team-away {
        text-align: left;
    }

    .pg-scoreline,
    .pg-info-score {
        text-align: left;
    }

    .pg-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Professional setup UI polish (non-home, non-live-game) */
#startGameScreen,
#playerManagementScreen,
#leagueHubScreen {
    border-color: var(--cc-light-border, #313a52);
    box-shadow: var(--cc-light-shadow, 0 18px 50px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.04));
}

#startGameScreen .quick-title,
#teamManagerScreen .quick-title,
#playerManagementScreen .quick-title,
#leagueHubScreen .quick-title {
    color: var(--cc-light-text, #f3f6ff);
    letter-spacing: 1.2px;
    margin-bottom: 0.1rem;
}

#startGameScreen .quick-subtitle,
#teamManagerScreen .quick-subtitle,
#playerManagementScreen .quick-subtitle,
#leagueHubScreen .quick-subtitle {
    color: var(--cc-light-text, #c8d2e6);
    margin-bottom: 1rem;
}

#startGameScreen .form-section.compact,
#playerManagementScreen .form-section.compact,
#leagueHubScreen .form-section.compact {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(31, 31, 31, 0.95), rgba(18, 18, 18, 0.94)));
    border: 1px solid var(--cc-light-blue-border, #445176);
    border-radius: 14px;
    padding: 0.92rem 0.95rem;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.05));
}

#startGameScreen .form-section.compact h3,
#playerManagementScreen .form-section.compact h3,
#leagueHubScreen .form-section.compact h3 {
    font-size: 1.1rem;
    letter-spacing: 0.02em;
    color: var(--cc-light-accent, #ffab67);
    margin-bottom: 0.75rem;
}

#startGameScreen .form-group,
#playerManagementScreen .form-group,
#leagueHubScreen .form-group,
#teamManagerScreen .form-group {
    gap: 0.2rem;
}

#startGameScreen label,
#teamManagerScreen label,
#playerManagementScreen label,
#leagueHubScreen label {
    color: var(--cc-light-text, #dbe3f4);
    font-weight: 600;
}

#startGameScreen input[type="text"],
#startGameScreen input[type="number"],
#startGameScreen select,
#startGameScreen textarea,
#teamManagerScreen input[type="text"],
#teamManagerScreen input[type="number"],
#teamManagerScreen select,
#teamManagerScreen textarea,
#leagueHubScreen input[type="text"],
#leagueHubScreen input[type="number"],
#leagueHubScreen select,
#leagueHubScreen textarea {
    border-radius: 11px;
    border-color: var(--cc-light-blue-border, #4d5d89);
    background: var(--cc-light-surface, linear-gradient(180deg, #303030 0%, #252525 100%));
    color: var(--cc-light-text, #f4f7ff);
}

#teamManagerScreen input[type="text"],
#teamManagerScreen input[type="number"],
#teamManagerScreen select,
#teamManagerScreen textarea {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.10));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(20, 20, 20, 0.92) 0%, rgba(7, 7, 7, 0.96) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.86));
}

#teamManagerScreen select option {
    background: var(--cc-light-control, #0b0b0b);
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
}

#teamManagerScreen input::placeholder,
#teamManagerScreen textarea::placeholder {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.34));
    opacity: 1;
}

#startGameScreen input[type="text"]:focus,
#startGameScreen input[type="number"]:focus,
#startGameScreen select:focus,
#startGameScreen textarea:focus,
#teamManagerScreen input[type="text"]:focus,
#teamManagerScreen input[type="number"]:focus,
#teamManagerScreen select:focus,
#teamManagerScreen textarea:focus,
#leagueHubScreen input[type="text"]:focus,
#leagueHubScreen input[type="number"]:focus,
#leagueHubScreen select:focus,
#leagueHubScreen textarea:focus {
    border-color: var(--cc-light-accent-border, #ff9a4b);
    background: var(--cc-light-surface, linear-gradient(180deg, #303030 0%, #252525 100%));
}

#teamManagerScreen input[type="text"]:focus,
#teamManagerScreen input[type="number"]:focus,
#teamManagerScreen select:focus,
#teamManagerScreen textarea:focus {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.62));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(24, 24, 24, 0.94) 0%, rgba(8, 8, 8, 0.98) 100%));
}

#teamManagerScreen .paste-info {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.10));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(14, 14, 14, 0.84) 0%, rgba(7, 7, 7, 0.9) 100%));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.66));
}

#teamManagerScreen .paste-info a,
#teamManagerScreen .paste-info strong {
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.8));
}

#playerManagementScreen .btn.btn-secondary,
#teamManagerScreen .btn.btn-secondary {
    background: var(--cc-light-control, linear-gradient(180deg, rgba(30, 30, 30, 0.96) 0%, rgba(12, 12, 12, 0.98) 100%));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.14));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#playerManagementScreen .btn.btn-secondary:hover,
#teamManagerScreen .btn.btn-secondary:hover {
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(40, 40, 40, 0.98) 0%, rgba(14, 14, 14, 0.99) 100%));
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
    color: var(--cc-light-text, rgba(255, 248, 238, 0.96));
}

#teamManagerScreen .tm-team-actions .mini-btn {
    min-height: 40px;
    padding: 0;
    border-radius: 11px;
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.1));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(36, 36, 36, 0.94) 0%, rgba(14, 14, 14, 0.99) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.06));
}

#teamManagerScreen .tm-team-actions .mini-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(48, 48, 48, 0.96) 0%, rgba(18, 18, 18, 1) 100%));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 1px rgba(255, 152, 0, 0.14));
}

#teamManagerScreen .tm-team-actions .mini-btn.danger {
    border-color: var(--cc-light-danger-border, rgba(255, 112, 112, 0.35));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(96, 28, 36, 0.94) 0%, rgba(44, 14, 18, 0.99) 100%));
    color: var(--cc-light-text, rgba(255, 228, 232, 0.96));
}

#startGameScreen #startGameBtn,
#teamManagerScreen .btn.btn-full,
#playerManagementScreen .btn.btn-full,
#leagueHubScreen .btn.btn-full {
    border-radius: 12px;
    letter-spacing: 0.9px;
    box-shadow: var(--cc-light-shadow, 0 8px 18px rgba(0, 0, 0, 0.32));
}

#startGameScreen .league-rules-note {
    border-color: var(--cc-light-blue-border, #55628a);
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(24, 24, 24, 0.94), rgba(17, 17, 17, 0.96)));
    color: var(--cc-light-text, #e4eaf9);
}

#startGameScreen .screen-bottom-bar,
#playerManagementScreen .screen-bottom-bar,
#leagueHubScreen .screen-bottom-bar {
    border-top-color: var(--cc-light-border, #36405d);
    padding-top: 0.82rem;
}

#startGameScreen .icon-nav-btn,
#playerManagementScreen .icon-nav-btn,
#leagueHubScreen .icon-nav-btn {
    width: 46px;
    height: 38px;
    border-radius: 10px;
    border-color: var(--cc-light-blue-border, #445070);
    background: var(--cc-light-control, linear-gradient(180deg, #242424 0%, #181818 100%));
    color: var(--cc-light-accent, #ffb069);
}

#startGameScreen .icon-nav-label,
#playerManagementScreen .icon-nav-label,
#leagueHubScreen .icon-nav-label {
    color: var(--cc-light-text, #e3e9f8);
    letter-spacing: 0.5px;
    text-transform: none;
    font-size: 0.78rem;
}

#leagueHubScreen .manager-item,
#teamManagerScreen .manager-item,
#playerManagementScreen .manager-item,
#pastGamesModal .history-item,
#changelogModal .history-item {
    border-radius: 12px;
    border-color: var(--cc-light-blue-border, #586692);
    background: var(--cc-light-surface, linear-gradient(90deg, rgba(56, 56, 56, 0.9), rgba(34, 34, 34, 0.95)));
}

#leagueHubScreen .manager-item-meta strong,
#teamManagerScreen .manager-item-meta strong,
#playerManagementScreen .manager-item-meta strong,
#pastGamesModal .history-item strong,
#changelogModal .history-item strong {
    color: var(--cc-light-text, #f4f7ff);
}

#leagueHubScreen .manager-item-meta span,
#teamManagerScreen .manager-item-meta span,
#playerManagementScreen .manager-item-meta span,
#pastGamesModal .history-item span,
#changelogModal .history-item span {
    color: var(--cc-light-text, #cfd8ee);
}

#leagueHubScreen .manager-item-actions .mini-btn,
#teamManagerScreen .manager-item-actions .mini-btn {
    border-radius: 10px;
    border-color: var(--cc-light-blue-border, #4f5d86);
    background: var(--cc-light-control, linear-gradient(180deg, #232323 0%, #181818 100%));
}

#leagueHubScreen .manager-item-actions .mini-btn:hover,
#teamManagerScreen .manager-item-actions .mini-btn:hover {
    border-color: var(--cc-light-accent-border, #ff9e56);
}

#pastGamesModal .modal-content.setup-surface,
#pastGameInfoModal .modal-content.setup-surface,
#pastGameDetailModal .modal-content.setup-surface,
#pastGameShotChartModal .modal-content.setup-surface,
#legalModal .modal-content.setup-surface,
#backupModal .modal-content.setup-surface,
#storageRiskConfirmModal .modal-content.setup-surface,
#createLeagueModal .modal-content.setup-surface,
#playerEditorModal .modal-content.setup-surface,
#replaceRosterModal .modal-content.setup-surface,
#gameRecapModal .modal-content.setup-surface, #gameReportModal .modal-content.setup-surface, #playerReportModal .modal-content.setup-surface,
#playByPlayModal.past-mode .modal-content.setup-surface {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(23, 23, 23, 0.98), rgba(10, 10, 10, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.08));
    box-shadow:
        var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 20px 56px rgba(0, 0, 0, 0.58));
}

#changelogModal .modal-content {
    background:
        var(--cc-light-surface, radial-gradient(72% 58% at 50% 16%, rgba(255, 122, 52, 0.1), transparent 70%),
        linear-gradient(180deg, rgba(29, 29, 29, 0.98), rgba(15, 15, 15, 0.98)));
    border: 1px solid var(--cc-light-blue-border, #33405e);
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(182, 201, 255, 0.12), 0 20px 56px rgba(0, 0, 0, 0.58));
}

#pastGamesModal .modal-header,
#pastGameInfoModal .modal-header,
#pastGameDetailModal .modal-header,
#pastGameShotChartModal .modal-header,
#legalModal .modal-header,
#backupModal .modal-header,
#storageRiskConfirmModal .modal-header,
#createLeagueModal .modal-header,
#changelogModal .modal-header,
#playerEditorModal .modal-header,
#replaceRosterModal .modal-header,
#gameRecapModal .modal-header, #gameReportModal .modal-header, #playerReportModal .modal-header,
#playByPlayModal.past-mode .modal-header {
    color: var(--cc-light-accent, #ffac67);
    letter-spacing: 1.1px;
    margin-bottom: 1rem;
}

#pastGamesCountLabel {
    margin-top: -0.3rem;
    margin-bottom: 0.9rem;
    color: var(--cc-light-text, #d2dbef);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

#pastGameExportBtn.past-game-export-btn,
#pastGameInfoExportBtn.past-game-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    border-color: var(--cc-light-accent-border, #ffad64);
    color: #201106;
    background: linear-gradient(180deg, #ffa447 0%, #f28126 100%);
    box-shadow: var(--cc-light-shadow, 0 5px 14px rgba(0, 0, 0, 0.3));
}

#pastGameExportBtn.past-game-export-btn::before,
#pastGameInfoExportBtn.past-game-export-btn::before {
    content: '\2193';
    font-size: 0.84rem;
    line-height: 1;
    font-weight: 700;
}

#pastGameExportBtn.past-game-export-btn:hover,
#pastGameInfoExportBtn.past-game-export-btn:hover {
    border-color: var(--cc-light-accent-border, #ffc186);
    background: linear-gradient(180deg, #ffb25d 0%, #fa9137 100%);
}

#pastGameExportBtn.past-game-export-btn.is-exporting,
#pastGameInfoExportBtn.past-game-export-btn.is-exporting,
#pastGameExportBtn.past-game-export-btn:disabled,
#pastGameInfoExportBtn.past-game-export-btn:disabled {
    cursor: wait;
    border-color: var(--cc-light-accent-border, #e8b381);
    background: linear-gradient(180deg, #f4b26e 0%, #dc8d43 100%);
    box-shadow: var(--cc-light-shadow, 0 3px 9px rgba(0, 0, 0, 0.24));
}

#pastGamesModal .modal-close,
#pastGameInfoModal .modal-close,
#pastGameDetailModal .modal-close,
#pastGameShotChartModal .modal-close,
#legalModal .modal-close,
#backupModal .modal-close,
#storageRiskConfirmModal .modal-close,
#createLeagueModal .modal-close,
#changelogModal .modal-close,
#playerEditorModal .modal-close,
#replaceRosterModal .modal-close,
#gameRecapModal .modal-close, #gameReportModal .modal-close, #playerReportModal .modal-close,
#playByPlayModal.past-mode .modal-close {
    color: var(--cc-light-blue, #9fb0d7);
}

#pastGamesModal .modal-close:hover,
#pastGameInfoModal .modal-close:hover,
#pastGameDetailModal .modal-close:hover,
#pastGameShotChartModal .modal-close:hover,
#legalModal .modal-close:hover,
#backupModal .modal-close:hover,
#storageRiskConfirmModal .modal-close:hover,
#createLeagueModal .modal-close:hover,
#changelogModal .modal-close:hover,
#playerEditorModal .modal-close:hover,
#replaceRosterModal .modal-close:hover,
#gameRecapModal .modal-close:hover, #gameReportModal .modal-close:hover, #playerReportModal .modal-close:hover,
#playByPlayModal.past-mode .modal-close:hover {
    color: var(--cc-light-accent, #ffb06c);
}

#createLeagueModal input[type="text"],
#createLeagueModal input[type="number"],
#createLeagueModal select,
#playerEditorModal input[type="text"],
#playerEditorModal input[type="number"],
#playerEditorModal select,
#replaceRosterModal textarea {
    border-radius: 10px;
    border-color: var(--cc-light-blue-border, #4d5d89);
    background: var(--cc-light-surface, linear-gradient(180deg, #303030 0%, #252525 100%));
    color: var(--cc-light-text, #f4f7ff);
}

#createLeagueModal input[type="text"]:focus,
#createLeagueModal input[type="number"]:focus,
#createLeagueModal select:focus,
#playerEditorModal input[type="text"]:focus,
#playerEditorModal input[type="number"]:focus,
#playerEditorModal select:focus,
#replaceRosterModal textarea:focus {
    border-color: var(--cc-light-accent-border, #ff9a4b);
    background: var(--cc-light-surface, linear-gradient(180deg, #303030 0%, #252525 100%));
}

.season-toolbar {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 0.8rem;
}

.season-module-screen {
    background: none;
    border: none;
    box-shadow: none;
    max-width: 1220px;
    padding: 0.25rem 0;
}

.season-module-screen::before {
    display: none;
}

#seasonPlayerDetailsScreen .quick-title {
    color: var(--dash-text);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.6rem, 2.1rem + 1.8vw, 4rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

#seasonPlayerDetailsScreen .quick-subtitle {
    color: var(--dash-text-dim);
    max-width: 52rem;
}

#seasonStatsScreen label,
#seasonAnalyticsScreen label,
#objectivesScreen label,
#seasonPlayerDetailsScreen label {
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.72));
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#seasonStatsScreen select,
#seasonAnalyticsScreen select,
#objectivesScreen select,
#seasonPlayerDetailsScreen select {
    min-height: 48px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.98)));
    border: 1px solid var(--dash-border-strong);
    border-radius: 14px;
    color: var(--dash-text);
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.03));
}

#seasonStatsScreen select option,
#seasonAnalyticsScreen select option,
#objectivesScreen select option,
#seasonPlayerDetailsScreen select option {
    background: var(--cc-light-control, #101010);
    color: var(--dash-text);
}

#seasonStatsScreen select:focus,
#seasonAnalyticsScreen select:focus,
#objectivesScreen select:focus,
#seasonPlayerDetailsScreen select:focus {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.8));
    box-shadow: var(--cc-light-shadow, 0 0 0 3px rgba(255, 152, 0, 0.12));
}

#seasonStatsScreen .season-toolbar,
#seasonAnalyticsScreen .season-toolbar {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid var(--dash-border);
    background: var(--dash-surface);
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.55));
    backdrop-filter: blur(10px);
    margin-bottom: 0;
}

#seasonAnalyticsScreen .season-toolbar {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

#seasonAnalyticsScreen .season-analytics-filter-panel,
#seasonAnalyticsScreen .season-analytics-view-controls {
    padding: 1rem 1.05rem;
    border-radius: 18px;
    border: 1px solid var(--dash-border);
    background: var(--dash-surface);
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.55));
    backdrop-filter: blur(10px);
}

#seasonAnalyticsScreen .season-analytics-filter-panel {
    display: grid;
    gap: 0.75rem;
}

#seasonAnalyticsScreen .season-toolbar-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#seasonAnalyticsScreen .season-toolbar-filters {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.8rem;
}

#seasonAnalyticsScreen .season-toolbar-section-label {
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.72));
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

#seasonAnalyticsScreen .season-analytics-view-controls {
    display: grid;
    gap: 0;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: #8d693c #191919;
    scroll-padding-inline: 0.5rem;
    padding: 0.5rem;
    border-radius: 18px;
}

.season-filter-meta {
    color: var(--cc-light-text, #b8c1d6);
    font-size: 0.85rem;
    margin-bottom: 0.85rem;
}

#seasonStatsScreen .season-filter-meta,
#seasonAnalyticsScreen .season-filter-meta {
    margin-bottom: 0;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    border: 1px solid var(--dash-border);
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.03));
    color: var(--dash-text-dim);
    letter-spacing: 0.04em;
}

.season-empty-state {
    border: 1px solid var(--cc-light-blue-border, #3a4569);
    border-radius: 12px;
    background: var(--cc-light-surface, rgba(16, 16, 16, 0.86));
    color: var(--cc-light-text, #d2daec);
    padding: 0.95rem 1rem;
    line-height: 1.45;
}

#seasonStatsScreen .season-empty-state,
#seasonAnalyticsScreen .season-empty-state,
#objectivesScreen .season-empty-state,
#seasonPlayerDetailsScreen .season-empty-state {
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--dash-surface);
    color: var(--dash-text-dim);
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.55));
}

.season-metrics-grid {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-bottom: 0.75rem;
}

.season-metric-card {
    border: 1px solid var(--cc-light-blue-border, #3b4668);
    border-radius: 12px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(31, 31, 31, 0.94), rgba(17, 17, 17, 0.96)));
    padding: 0.6rem 0.7rem;
    display: grid;
    gap: 0.28rem;
}

#seasonStatsScreen .season-metric-card {
    --metric-accent: var(--cc-light-accent, #f5ad51);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(28, 28, 28, 0.92), rgba(14, 14, 14, 0.94)));
    box-shadow: var(--cc-light-shadow, 0 14px 34px rgba(0, 0, 0, 0.34));
    padding: 1rem;
    gap: 0.5rem;
    border-top: 2px solid var(--metric-accent);
}

#seasonStatsScreen .season-metric-card:nth-child(2) { --metric-accent: var(--cc-light-blue, #ababab); }
#seasonStatsScreen .season-metric-card:nth-child(3) { --metric-accent: var(--cc-light-success, #63dfb0); }
#seasonStatsScreen .season-metric-card:nth-child(4) { --metric-accent: var(--cc-light-blue, #b0b0b0); }
#seasonStatsScreen .season-metric-card:nth-child(5) { --metric-accent: var(--cc-light-accent, #f5ad51); }

.season-stat-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    vertical-align: middle;
}

#seasonStatsScreen .season-metric-card > .season-stat-icon {
    color: var(--metric-accent);
    box-sizing: content-box;
    padding: 0.55rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--metric-accent) 12%, transparent);
    margin-bottom: 0.3rem;
}

#seasonStatsScreen .season-metric-card .season-metric-value {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    letter-spacing: -0.035em;
}

#seasonStatsScreen .season-secondary-item {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.65rem;
    align-items: center;
}

#seasonStatsScreen .season-secondary-item > .season-stat-icon {
    grid-row: span 2;
    color: var(--cc-light-accent, #eab76f);
}

#seasonStatsScreen .season-secondary-value {
    font-variant-numeric: tabular-nums;
}

.season-metric-label {
    font-size: 0.72rem;
    color: var(--cc-light-subtle, #a6b2cb);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
}

.season-metric-value {
    font-size: 1.05rem;
    color: var(--cc-light-text, #f7f9fe);
    letter-spacing: 0.01em;
}

#seasonStatsScreen .season-metric-label,
#seasonStatsScreen .season-secondary-label {
    color: var(--dash-text-dim);
    letter-spacing: 0.12em;
}

#seasonStatsScreen .season-metric-value,
#seasonStatsScreen .season-secondary-value,
#seasonPlayerDetailsScreen .season-secondary-value {
    color: var(--dash-text);
}

.season-secondary-metrics {
    border: 1px solid var(--cc-light-blue-border, #36425f);
    border-radius: 11px;
    background: var(--cc-light-surface, rgba(14, 14, 14, 0.9));
    display: grid;
    gap: 0.55rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.75rem;
}

#seasonStatsScreen .season-secondary-metrics,
#seasonPlayerDetailsScreen .season-secondary-metrics,
#seasonPlayerSummary {
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--dash-surface);
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.55));
    backdrop-filter: blur(10px);
    padding: 0.9rem 1rem;
    margin-bottom: 0;
}

.season-secondary-item {
    display: grid;
    gap: 0.12rem;
}

.season-secondary-label {
    color: var(--cc-light-blue, #9eacc9);
    font-size: 0.71rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.season-secondary-value {
    color: var(--cc-light-text, #f4f7ff);
    font-size: 0.98rem;
    font-weight: 700;
}

.season-table-wrap {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow-x: hidden;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.02));
}

#seasonStatsScreen .season-table-wrap,
#seasonPlayerDetailsScreen .season-table-wrap {
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--dash-surface);
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.55));
    backdrop-filter: blur(10px);
    overflow-x: auto;
}

#seasonStatsScreen .season-table-wrap {
    margin-top: 0.7rem;
}

.season-view-tabs {
    display: inline-flex;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
    padding: 0.32rem;
    border: 1px solid var(--dash-border);
    border-radius: 14px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.035));
}

#seasonAnalyticsScreen .season-view-tabs {
    display: flex;
    align-items: stretch;
    width: max-content;
    min-width: 100%;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.season-view-tab {
    --tab-accent: var(--cc-light-accent, #f5ad51);
    display: inline-flex;
    flex: 1 0 auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.8rem;
    min-width: 9.4rem;
    min-height: 112px;
    border: 1px solid var(--dash-border);
    border-top: 2px solid color-mix(in srgb, var(--tab-accent) 55%, transparent);
    border-radius: 14px;
    background: var(--cc-light-surface, linear-gradient(180deg, #202020, #121212));
    color: var(--cc-light-subtle, #c5c5c5);
    padding: 0.9rem 1rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
}

.season-view-tab[data-analytics-view="lineups"] { --tab-accent: var(--cc-light-blue, #ababab); }
.season-view-tab[data-analytics-view="onOff"] { --tab-accent: var(--cc-light-success, #63dfb0); }
.season-view-tab[data-analytics-view="combinations"] { --tab-accent: var(--cc-light-blue, #b0b0b0); }
.season-view-tab[data-analytics-view="margin"] { --tab-accent: var(--cc-light-success, #63dfb0); }
.season-view-tab[data-analytics-view="gameByGame"] { --tab-accent: var(--cc-light-blue, #b0b0b0); }

.season-view-tab:hover {
    background: var(--cc-light-control-hover, #262626);
    color: var(--cc-light-text, #fff);
}

.season-view-tab.active {
    border-color: var(--tab-accent);
    background: linear-gradient(160deg, color-mix(in srgb, var(--tab-accent) 14%, #191919), #151515);
    color: var(--cc-light-text, #fff);
    box-shadow: inset 0 -2px 0 var(--tab-accent);
}

.season-view-tab:focus-visible {
    outline: 2px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.82));
    outline-offset: -2px;
}

.season-view-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    color: var(--tab-accent);
    background: color-mix(in srgb, var(--tab-accent) 13%, transparent);
}

.season-view-tab-icon svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.season-view-tab-label {
    white-space: nowrap;
}

#seasonAnalyticsScreen #seasonAnalyticsViewLabel {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.season-analytics-panel {
    display: grid;
    gap: 0.75rem;
    container: analytics-panel / inline-size;
}

.season-view-tab[data-analytics-view="hotZones"] { --tab-accent: var(--cc-light-danger, #ef6464); }

.season-combination-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
    margin: 0 0 0.7rem;
}

.season-combination-summary-card {
    --combo-accent: var(--cc-light-accent, #ff9800);
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    padding: 0.8rem 0.85rem;
    border: 1px solid var(--dash-border);
    border-top: 2px solid color-mix(in srgb, var(--combo-accent) 72%, transparent);
    border-radius: 14px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(27, 27, 27, 0.96), rgba(13, 13, 13, 0.98)));
}

.season-combination-summary-card.best { --combo-accent: var(--cc-light-success, #63e99a); }
.season-combination-summary-card.used { --combo-accent: var(--cc-light-accent, #ffad42); }
.season-combination-summary-card.worst { --combo-accent: var(--cc-light-danger, #ff747d); }

.season-combination-summary-label {
    color: var(--dash-text-dim);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

/* One player per line, never truncated: the names are what a coach reads first. */
.season-combination-summary-players {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    color: var(--dash-text);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.3;
}

.season-combination-summary-player {
    overflow-wrap: anywhere;
}

.season-combination-summary-player strong {
    color: var(--cc-light-accent, #f5ad51);
    font-weight: 800;
}

.season-combination-summary-meta {
    color: var(--dash-text);
    font-size: 1.1rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.season-combination-summary-meta.positive {
    color: var(--cc-light-success, #63e99a);
}

.season-combination-summary-meta.negative {
    color: var(--cc-light-danger, #f06464);
}

.season-combination-summary-sample,
.season-combination-summary-empty {
    color: var(--dash-text-dim);
    font-size: 0.78rem;
}

.season-combination-context,
.season-combination-empty {
    margin: 0 0 0.62rem;
    color: var(--dash-text-dim);
    font-size: 0.78rem;
}

.season-combination-pagination {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: 0.7rem;
}

.season-combination-page-btn {
    min-height: 34px;
    padding: 0.38rem 0.72rem;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.26));
    border-radius: 9px;
    background: rgba(255, 152, 0, 0.08);
    color: var(--cc-light-accent, #ffd29a);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.season-combination-page-btn:hover:not(:disabled) {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
    background: rgba(255, 152, 0, 0.14);
    color: var(--cc-light-text, #fff);
}

.season-combination-page-btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.season-combination-page-status {
    color: var(--dash-text-dim);
    font-size: 0.72rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .season-combination-summary {
        grid-template-columns: 1fr;
    }

    .season-combination-pagination {
        justify-content: space-between;
    }
}

.season-hot-zones-section {
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--dash-surface);
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.45));
    padding: 1rem;
    margin: 0.75rem 0;
}

#seasonAnalyticsPanel .season-hot-zones-section {
    margin: 0;
}

.season-hot-zones-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.season-hot-zones-heading h3 {
    margin: 0;
    color: var(--dash-text);
    font-size: 1rem;
    letter-spacing: 0.01em;
}

.season-hot-zones-heading p {
    margin: 0.28rem 0 0;
    color: var(--dash-text-dim);
    font-size: 0.82rem;
    line-height: 1.4;
}

.season-hot-zones-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.42rem 0.75rem;
    color: var(--dash-text-dim);
    font-size: 0.73rem;
    font-weight: 700;
}

.season-hot-zones-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    white-space: nowrap;
}

.season-hot-zones-legend i {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 3px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.28));
}

.season-hot-zones-legend i.hot { background: var(--court-zone-hot); }
.season-hot-zones-legend i.neutral { background: var(--court-zone-neutral); }
.season-hot-zones-legend i.cold { background: var(--court-zone-cold); }
.season-hot-zones-legend i.no-sample { background: var(--court-zone-no-sample); }

.season-hot-zones-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(210px, 0.72fr);
    gap: 0.9rem;
    align-items: start;
}

.season-hot-zones-court-card {
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.09));
    border-radius: 14px;
    padding: 0.55rem;
    background: var(--cc-light-surface, rgba(9, 9, 9, 0.7));
    min-width: 0;
}

.season-hot-zones-court {
    max-width: 760px;
    margin: 0 auto;
    border-radius: 10px;
}

.season-hot-zones-summary {
    display: grid;
    gap: 0.75rem;
    border: 1px solid var(--dash-border);
    border-radius: 14px;
    padding: 0.8rem;
    background: var(--cc-light-surface, rgba(15, 15, 15, 0.8));
}

.season-hot-zones-overall {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.season-hot-zones-overall > div {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.58rem;
    border-radius: 10px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.035));
}

.season-hot-zones-overall span {
    color: var(--dash-text-dim);
    font-size: 0.63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.season-hot-zones-overall strong {
    color: var(--dash-text);
    font-size: 1.12rem;
    font-variant-numeric: tabular-nums;
}

.season-hot-zones-zone-list {
    display: grid;
    gap: 0.38rem;
}

.season-hot-zones-zone-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding-bottom: 0.38rem;
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.06));
    color: var(--dash-text-dim);
    font-size: 0.75rem;
}

.season-hot-zones-zone-list > div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.season-hot-zones-zone-list strong {
    color: var(--dash-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.season-hot-zones-note,
.season-hot-zones-empty {
    margin: 0;
    color: var(--dash-text-dim);
    font-size: 0.74rem;
    line-height: 1.4;
}

.season-hot-zones-empty {
    margin-top: 0.7rem;
    padding: 0.58rem 0.7rem;
    border-radius: 9px;
    border: 1px solid var(--cc-light-danger-border, rgba(239, 100, 100, 0.22));
    background: rgba(239, 100, 100, 0.06);
}

@media (max-width: 960px) {
    .season-hot-zones-layout {
        grid-template-columns: 1fr;
    }

    .season-hot-zones-summary {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 620px) {
    .season-hot-zones-heading {
        flex-direction: column;
    }

    .season-hot-zones-legend {
        justify-content: flex-start;
    }

    .season-hot-zones-section {
        padding: 0.72rem;
    }

    .season-hot-zones-court-card {
        padding: 0.35rem;
    }

    .cc-court-zone-label {
        font-size: 9px;
    }

    .cc-court-zone-stat {
        font-size: 8px;
    }
}

.season-analytics-card,
.season-analytics-section {
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--dash-surface);
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.42));
}

.season-analytics-card {
    display: grid;
    gap: 0.22rem;
    padding: 0.85rem 0.95rem;
}

.season-analytics-label,
.season-analytics-heading,
.season-analytics-subtext {
    color: var(--dash-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 900;
}

.season-analytics-label {
    font-size: 0.68rem;
}

.season-analytics-value {
    color: var(--dash-text);
    font-size: 1.16rem;
    line-height: 1.1;
}

.season-analytics-subtext {
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

.season-analytics-section {
    padding: 0.95rem;
}

.season-analytics-heading {
    margin: 0 0 0.75rem;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.84));
    font-size: 0.78rem;
}

.season-analytics-margin-section {
    padding: 1rem;
    display: grid;
    gap: 0.85rem;
}

.season-margin-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.season-overview {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.season-overview > .season-analytics-heading {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.65rem;
    margin-bottom: 0;
}

.season-overview-columns {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.season-overview-columns > section {
    min-width: 0;
    padding: 0.75rem;
    border-radius: 10px;
    box-shadow: none;
}

.season-overview-chart {
    display: block;
    width: 100%;
    height: auto;
}

.season-overview-chart-target {
    cursor: pointer;
    outline: none;
}

.season-overview-chart-target:focus-visible {
    stroke: var(--cc-light-subtle, rgba(255, 255, 255, 0.95));
    stroke-width: 2;
}

.season-overview-chart-tooltip.hidden {
    opacity: 0;
    pointer-events: none;
}

.season-overview-chart-tooltip {
    pointer-events: none;
}

.season-overview-chart-tooltip-bg {
    fill: var(--cc-light-surface, rgba(12, 12, 12, 0.95));
    stroke: var(--cc-light-accent, rgba(255, 183, 77, 0.62));
    stroke-width: 1;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.42));
}

.season-overview-chart-tooltip-label {
    fill: var(--cc-light-text, rgba(255, 255, 255, 0.94));
    font-size: 10px;
    font-weight: 800;
}

.season-overview-legend {
    font-size: 0.65rem;
    color: var(--dash-text-dim);
    margin-bottom: 0.5rem;
}

.season-overview-leaders .season-table-wrap {
    overflow-x: auto;
}

.season-overview-leaders .stats-table th,
.season-overview-leaders .stats-table td {
    padding: 0.45rem 0.35rem;
    font-size: 0.72rem;
    white-space: nowrap;
}

#seasonAnalyticsScreen .stats-table {
    margin: 0;
    color: var(--dash-text);
    font-size: 0.74rem;
}

#seasonAnalyticsScreen .stats-table th {
    background: var(--cc-light-control, linear-gradient(180deg, rgba(43, 43, 43, 0.98), rgba(29, 29, 29, 0.98)));
    border-bottom: 1px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.38));
    color: var(--dash-text-dim);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 0.5rem 0.38rem;
}

#seasonAnalyticsScreen .stats-table td {
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.075));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.84));
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    padding: 0.48rem 0.38rem;
}

#seasonAnalyticsScreen .stats-table tbody tr:nth-child(even) {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.025));
}

#seasonAnalyticsScreen .stats-table tbody tr:hover {
    background: rgba(255, 152, 0, 0.09);
}

#seasonAnalyticsScreen .stats-table td:nth-child(3) {
    color: var(--dash-text);
    font-weight: 700;
    text-align: left;
}

.season-overview-leaders .stats-table td:nth-child(3) {
    text-align: left;
}

@media (max-width: 1000px) {
    .season-overview-columns {
        grid-template-columns: 1fr;
    }
}

.season-onoff-section .season-table-wrap {
    overflow-x: auto;
}

.season-onoff-section .stats-table {
    min-width: 620px;
}

/* ID-level selectors: #seasonAnalyticsScreen .stats-table td otherwise overrides the value colors. */
#seasonAnalyticsScreen .season-onoff-section td.positive,
#seasonAnalyticsScreen .season-onoff-summary .season-analytics-value.positive {
    color: var(--cc-light-success, #63e99a);
    font-weight: 700;
}

#seasonAnalyticsScreen .season-onoff-section td.negative,
#seasonAnalyticsScreen .season-onoff-summary .season-analytics-value.negative {
    color: var(--cc-light-danger, #f06464);
    font-weight: 700;
}

/* The player name is the point of each On/Off card, so it reads as text rather than a caption. */
#seasonAnalyticsScreen .season-onoff-summary .season-analytics-subtext {
    color: var(--dash-text);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    text-transform: none;
    overflow-wrap: anywhere;
}

#seasonAnalyticsScreen .season-onoff-section tr.season-onoff-small td {
    color: var(--cc-text-muted, #9c9c9c);
    font-weight: 400;
}

#seasonAnalyticsScreen .season-onoff-section td.season-onoff-player {
    text-align: left;
    white-space: nowrap;
}

#seasonAnalyticsScreen .season-onoff-player strong {
    color: var(--cc-light-accent, #f5ad51);
    font-weight: 700;
}

#seasonAnalyticsScreen .season-onoff-section tr.season-onoff-small .season-onoff-player strong {
    color: inherit;
}

#seasonAnalyticsScreen .season-onoff-description {
    padding: 0 16px 10px;
    max-width: 72ch;
}

.season-onoff-guidance {
    display: grid;
    gap: 0.25rem;
    margin: 0 0 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 181, 46, 0.35);
    border-left: 4px solid var(--cc-light-accent, #ffb52e);
    border-radius: 12px;
    background: rgba(255, 181, 46, 0.1);
    color: var(--dash-text);
    line-height: 1.35;
}

.season-onoff-guidance strong {
    font-size: 1rem;
    font-weight: 800;
}

.season-onoff-guidance span {
    color: var(--dash-text-dim);
    font-size: 0.88rem;
}

/* Two strength cards share the row instead of leaving half of a four-card grid empty. */
.season-margin-summary.season-onoff-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.season-onoff-summary .season-onoff-sample {
    grid-column: 2;
    color: var(--dash-text-dim);
    font-size: 0.74rem;
}

.season-lineup-differential {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
    font-weight: 800;
    color: var(--dash-text-dim);
}

.season-lineup-differential.positive {
    color: var(--cc-light-success, #63e99a);
}

.season-lineup-differential.negative {
    color: var(--cc-light-danger, #f06464);
}

.season-lineup-differential svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.season-margin-summary .season-analytics-card {
    grid-template-columns: 36px minmax(0, 1fr);
    align-content: center;
    column-gap: 0.75rem;
}

.season-margin-summary .season-analytics-value {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.65rem;
}

.season-margin-summary .season-analytics-label,
.season-margin-summary .season-analytics-subtext {
    grid-column: 2;
}

.season-margin-summary .season-analytics-value.positive {
    color: var(--cc-light-success, #63e99a);
}

.season-margin-summary .season-analytics-value.negative {
    color: var(--cc-light-danger, #f06464);
}

.season-margin-summary-icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    align-self: center;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: var(--cc-light-blue, #3985ff);
    background: rgba(126, 126, 126, 0.08);
}

.season-margin-summary-icon.metric-1 {
    color: var(--cc-light-success, #63e99a);
    background: rgba(99, 233, 154, 0.08);
}

.season-margin-summary-icon.metric-2 {
    color: var(--cc-light-danger, #f06464);
    background: rgba(240, 100, 100, 0.08);
}

.season-margin-summary-icon.metric-3 {
    color: var(--cc-light-accent, #ffb52e);
    background: rgba(255, 181, 46, 0.12);
}

.season-margin-summary-icon svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.season-margin-game-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
}

.season-margin-game-header strong {
    margin-right: auto;
}

.season-margin-game-header span {
    color: var(--dash-text-dim);
    font-size: 0.72rem;
}

.season-margin-game-header .season-margin-positive {
    color: var(--cc-light-success, #63e99a);
}

.season-margin-game-header .season-margin-negative {
    color: var(--cc-light-danger, #f06464);
}

.season-margin-game-header .season-margin-neutral {
    color: var(--dash-text-dim);
}

.season-margin-nav {
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--dash-border);
    border-radius: 7px;
    color: var(--dash-text);
    background: var(--dash-surface);
    cursor: pointer;
}

.season-margin-nav:disabled {
    opacity: 0.4;
    cursor: default;
}

.season-margin-games-table tr.active {
    background: rgba(255, 152, 0, 0.12);
}

/* The whole row selects its game. */
.season-margin-games-table tr.season-margin-game-row {
    cursor: pointer;
}

.season-margin-games-table tr.season-margin-game-row:hover {
    background: rgba(255, 152, 0, 0.06);
}

/* Period margins and the halftime record share one framed panel under the season cards. */
.season-margin-periods {
    display: grid;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid var(--dash-border);
    border-radius: 14px;
    background: var(--dash-surface-2, var(--dash-surface));
}

.season-margin-periods-title {
    color: var(--dash-text);
    font-size: 0.9rem;
    font-weight: 800;
}

.season-margin-period-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.season-margin-period {
    display: grid;
    justify-items: center;
    gap: 0.1rem;
    min-width: 4.25rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--dash-border);
    border-radius: 12px;
    background: var(--dash-surface);
}

.season-margin-period strong {
    color: var(--dash-text-dim);
    font-size: 0.72rem;
    font-weight: 800;
}

.season-margin-period-value {
    color: var(--dash-text);
    font-size: 1.05rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.season-margin-period.positive .season-margin-period-value {
    color: var(--cc-light-success, #63e99a);
}

.season-margin-period.negative .season-margin-period-value {
    color: var(--cc-light-danger, #f06464);
}

.season-margin-halftime {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--dash-border);
    color: var(--dash-text-dim);
    font-size: 0.85rem;
}

.season-margin-halftime strong {
    color: var(--dash-text);
    font-variant-numeric: tabular-nums;
}

/* Game stats as even tiles: five margin stats in one row, the two runs in the next. */
.season-margin-game-facts {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0 0 0.5rem;
}

.season-margin-game-facts.runs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 0.75rem;
}

.season-margin-fact {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--dash-border);
    border-radius: 10px;
    background: var(--dash-surface-2, var(--dash-surface));
}

.season-margin-fact-label {
    color: var(--dash-text-dim);
    font-size: 0.72rem;
    font-weight: 700;
}

.season-margin-fact-value {
    color: var(--dash-text);
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.season-margin-fact-value.positive {
    color: var(--cc-light-success, #63e99a);
}

.season-margin-fact-value.negative {
    color: var(--cc-light-danger, #f06464);
}

.season-margin-line-score-wrap {
    margin-top: 0.75rem;
    overflow-x: auto;
}

/* Compact box-score line: numbers stay next to the team names instead of spreading across the card. */
.season-margin-line-score {
    width: auto;
    min-width: 0;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}

.season-margin-line-score th:not(:first-child),
.season-margin-line-score td:not(:first-child) {
    min-width: 2.75rem;
}

.season-margin-line-score th,
.season-margin-line-score td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--dash-border);
    text-align: center;
}

.season-margin-line-score th {
    color: var(--dash-text-dim);
    font-size: 0.72rem;
    font-weight: 800;
}

.season-margin-line-score td {
    color: var(--dash-text);
}

.season-margin-line-score .season-margin-line-score-team {
    max-width: 10rem;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.season-margin-line-score .season-margin-line-score-total {
    font-weight: 900;
}

.season-margin-run {
    pointer-events: none;
}

.season-margin-run.team {
    fill: rgba(99, 233, 154, 0.1);
}

.season-margin-run.opponent {
    fill: rgba(240, 100, 100, 0.1);
}

.season-margin-run-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.5rem;
    color: var(--dash-text-dim);
    font-size: 0.8rem;
    font-weight: 700;
}

.season-margin-run-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.season-margin-run-swatch {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 3px;
}

.season-margin-run-legend-item.team .season-margin-run-swatch {
    background: rgba(99, 233, 154, 0.35);
}

.season-margin-run-legend-item.opponent .season-margin-run-swatch {
    background: rgba(240, 100, 100, 0.35);
}

/* The games table gets its own frame, separate from the selected game's card above it. */
.season-margin-games-wrap {
    margin-top: 0.85rem;
    border: 1px solid var(--dash-border);
    border-radius: 14px;
    overflow: hidden;
    overflow-x: auto;
}

.season-margin-marker.deficit,
.season-margin-marker-label.deficit {
    fill: var(--cc-light-danger, #f06464);
}

@media (max-width: 760px) {
    .season-margin-game-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Final margin leads the card, so five stats fill a 2-column grid without an orphan. */
    .season-margin-game-facts:not(.runs) .season-margin-fact:first-child {
        grid-column: 1 / -1;
    }
}

/* Phones keep the columns that tell the story; lead changes and ties stay in the game card. */
@media (max-width: 640px) {
    .season-margin-games-table th:nth-child(7),
    .season-margin-games-table td:nth-child(7),
    .season-margin-games-table th:nth-child(8),
    .season-margin-games-table td:nth-child(8) {
        display: none;
    }
}

.season-margin-result {
    display: inline-grid;
    min-width: 1.65rem;
    padding: 0.18rem 0.35rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
}

.season-margin-result.win {
    color: var(--cc-light-success, #63e99a);
    background: rgba(47, 196, 116, 0.14);
}

.season-margin-result.loss {
    color: var(--cc-light-danger, #ff8585);
    background: rgba(240, 100, 100, 0.14);
}

.season-margin-result.neutral {
    color: var(--dash-text-dim);
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.07));
}

.season-margin-result-score {
    color: var(--dash-text);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 760px) {
    .season-margin-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.season-margin-game-card {
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.22));
    padding: 0.85rem;
}

.season-margin-chart {
    display: block;
    width: 100%;
    min-height: 240px;
    border-radius: 12px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(8, 8, 8, 0.58), rgba(3, 3, 3, 0.38)));
    touch-action: none;
}

.season-margin-axis-text {
    font-weight: 800;
    fill: var(--cc-light-muted, rgba(255, 255, 255, 0.46));
    font-size: 11px;
}

.season-margin-grid-line {
    stroke: var(--cc-light-border, rgba(255, 255, 255, 0.08));
    stroke-width: 1;
}

.season-margin-grid-line.vertical {
    stroke: var(--cc-light-border, rgba(255, 255, 255, 0.05));
}

.season-margin-zero-line,
.season-margin-axis-line {
    stroke: var(--cc-light-subtle, rgba(255, 255, 255, 0.34));
    stroke-width: 1;
}

.season-margin-line {
    fill: none;
    stroke: var(--cc-light-blue, #438bff);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(79, 107, 255, 0.35));
}

.season-margin-line.deficit {
    stroke: var(--cc-light-danger, #f06464);
    filter: none;
}

.season-margin-marker,
.season-margin-marker-label {
    fill: var(--cc-light-blue, #438bff);
}

.season-margin-marker-label {
    font-size: 11px;
    font-weight: 800;
}

.season-margin-hover-group.hidden {
    opacity: 0;
}

.season-margin-hover-line {
    stroke: var(--cc-light-accent, rgba(255, 183, 77, 0.88));
    stroke-width: 1.4;
    stroke-dasharray: 4 4;
}

.season-margin-hover-point {
    fill: var(--cc-light-accent, #ffb74d);
    stroke: var(--cc-light-subtle, rgba(0, 0, 0, 0.7));
    stroke-width: 2;
    filter: drop-shadow(0 0 6px rgba(255, 183, 77, 0.45));
}

.season-margin-hover-label-bg {
    fill: var(--cc-light-surface, rgba(12, 12, 12, 0.92));
    stroke: var(--cc-light-accent, rgba(255, 183, 77, 0.5));
    stroke-width: 1;
}

.season-margin-hover-label {
    fill: var(--cc-light-text, rgba(255, 255, 255, 0.9));
    font-size: 12px;
    font-weight: 900;
}

.season-margin-hover-overlay {
    cursor: crosshair;
    fill: transparent;
    pointer-events: all;
}

.season-shooting-page {
    display: grid;
    gap: 0.85rem;
    min-width: 0;
}

.season-shooting-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background:
        var(--cc-light-surface, radial-gradient(circle at 92% 18%, rgba(255, 152, 0, 0.10), transparent 30%),
        linear-gradient(180deg, rgba(26, 26, 26, 0.98), rgba(15, 15, 15, 0.98)));
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.42));
}

.season-shooting-hero-main,
.season-shooting-table-title-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 0.7rem;
}

.season-shooting-hero-icon,
.season-shooting-section-icon,
.season-shooting-summary-icon,
.season-shooting-note-icon {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--cc-light-accent, #ffad42);
    background: rgba(255, 152, 0, 0.10);
    border: 1px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.18));
}

.season-shooting-hero-icon {
    width: 42px;
    height: 42px;
    border-radius: 13px;
}

.season-shooting-hero-icon svg {
    width: 23px;
    height: 23px;
}

.season-shooting-title {
    margin: 0;
    color: var(--dash-text);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.65rem;
    letter-spacing: 0.02em;
    line-height: 1;
}

.season-shooting-subtitle {
    margin: 0.18rem 0 0;
    color: var(--dash-text-dim);
    font-size: 0.78rem;
    line-height: 1.35;
}

.season-shooting-context,
.season-shooting-qualified-count {
    flex: 0 0 auto;
    padding: 0.38rem 0.58rem;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.09));
    border-radius: 999px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.035));
    color: var(--dash-text-dim);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* Eight cards fill two rows of four; without opponent shots, six fill two rows of three. */
.season-shooting-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem;
}

.season-shooting-summary-grid.count-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.season-shooting-summary-card {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 0.7rem;
    align-items: center;
    min-width: 0;
    padding: 0.75rem 0.8rem;
    border: 1px solid var(--dash-border);
    border-radius: 16px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(25, 25, 25, 0.98), rgba(14, 14, 14, 0.98)));
    box-shadow: var(--cc-light-shadow, 0 12px 34px rgba(0, 0, 0, 0.34));
}

.season-shooting-summary-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
}

.season-shooting-summary-icon svg,
.season-shooting-section-icon svg,
.season-shooting-note-icon svg {
    width: 20px;
    height: 20px;
}

.season-shooting-hero-icon svg,
.season-shooting-summary-icon svg,
.season-shooting-section-icon svg,
.season-shooting-note-icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.season-shooting-summary-card.tone-three .season-shooting-summary-icon {
    color: var(--cc-light-blue, #438bff);
    border-color: var(--cc-light-blue-border, rgba(67, 139, 255, 0.18));
    background: rgba(132, 132, 132, 0.10);
}

.season-shooting-summary-card.tone-ft .season-shooting-summary-icon {
    color: var(--cc-light-purple, #b185ff);
    border-color: var(--cc-light-purple-border, rgba(177, 133, 255, 0.18));
    background: rgba(151, 151, 151, 0.10);
}

.season-shooting-summary-card.tone-volume .season-shooting-summary-icon {
    color: var(--cc-light-success, #63e99a);
    border-color: var(--cc-light-success-border, rgba(99, 233, 154, 0.16));
    background: rgba(99, 233, 154, 0.08);
}

.season-shooting-summary-card.tone-defense .season-shooting-summary-icon {
    color: var(--cc-light-danger, #f06464);
    border-color: rgba(240, 100, 100, 0.2);
    background: rgba(240, 100, 100, 0.08);
}

.season-shooting-summary-copy {
    display: grid;
    gap: 0.08rem;
    min-width: 0;
}

.season-shooting-summary-value {
    color: var(--dash-text);
    font-size: 1.25rem;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.season-shooting-summary-label {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.season-shooting-summary-detail {
    overflow: hidden;
    color: var(--dash-text-dim);
    font-size: 0.62rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.season-shooting-insights-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.82fr) minmax(0, 1.35fr);
    gap: 0.75rem;
    align-items: stretch;
}

.season-shooting-insight-card {
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.season-shooting-insight-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 64px;
    padding: 0.76rem 0.9rem;
    border-bottom: 1px solid var(--dash-border);
    background: var(--cc-light-control, linear-gradient(180deg, rgba(30, 30, 30, 0.96), rgba(20, 20, 20, 0.96)));
}

.season-shooting-section-icon.trend {
    color: var(--cc-light-success, #63e99a);
    border-color: var(--cc-light-success-border, rgba(99, 233, 154, 0.16));
    background: rgba(99, 233, 154, 0.08);
}

/* The zone table needs the card's full width, so the donut sits above it by default and only moves
   beside it when the card itself is wide enough. Browsers without container queries keep the stack. */
.season-shooting-distribution-card {
    container-type: inline-size;
}

.season-shooting-distribution-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    padding: 1rem;
}

@container (min-width: 600px) {
    .season-shooting-distribution-layout {
        grid-template-columns: 180px minmax(0, 1fr);
    }
}

.season-shooting-donut {
    position: relative;
    width: min(190px, 100%);
    aspect-ratio: 1;
    margin: 0 auto;
    border-radius: 50%;
    box-shadow: var(--cc-light-shadow, inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 12px 34px rgba(0, 0, 0, 0.28));
}

.season-shooting-donut::after {
    content: '';
    position: absolute;
    inset: 24%;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    border-radius: 50%;
    background: var(--cc-light-surface, rgba(14, 14, 14, 0.98));
    box-shadow: var(--cc-light-shadow, inset 0 0 22px rgba(0, 0, 0, 0.55));
}

.season-shooting-donut-center {
    position: absolute;
    z-index: 1;
    inset: 28%;
    display: grid;
    place-content: center;
    text-align: center;
}

.season-shooting-donut-center strong {
    color: var(--dash-text);
    font-size: 1.55rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.season-shooting-donut-center span {
    margin-top: 0.24rem;
    color: var(--dash-text-dim);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Zone table: share of shots beside FG% and points per shot. */
.season-shooting-distribution-legend {
    width: 100%;
    min-width: 0;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.season-shooting-distribution-legend th {
    padding: 0 0.35rem 0.4rem;
    color: var(--dash-text-dim);
    font-size: 0.68rem;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

.season-shooting-distribution-legend th:first-child {
    text-align: left;
}

.season-shooting-distribution-row td {
    padding: 0.5rem 0.35rem;
    border-top: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.06));
    color: var(--dash-text-dim);
}

.season-shooting-distribution-row td.numeric {
    color: var(--dash-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.season-shooting-distribution-label {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
}

.season-shooting-distribution-row strong {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.season-shooting-distribution-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: var(--cc-light-shadow, 0 0 10px rgba(255, 152, 0, 0.18));
}

.season-shooting-distribution-dot.tone-under {
    background: #ffb52e;
}

.season-shooting-distribution-dot.tone-close {
    background: #ff8f2d;
}

.season-shooting-distribution-dot.tone-mid {
    background: #9b6a23;
}

.season-shooting-distribution-dot.tone-three {
    background: var(--cc-light-blue, #438bff);
    box-shadow: var(--cc-light-shadow, 0 0 10px rgba(67, 139, 255, 0.18));
}

/* Sits under the title, where it explains why the donut total can be below total FGA. */
.season-shooting-insight-note {
    margin: 0;
    padding: 0.5rem 1rem 0;
    color: var(--cc-light-accent, #ffb52e);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.35;
}

.season-shooting-trend-legend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.65rem;
    color: var(--dash-text-dim);
    font-size: 0.62rem;
    font-weight: 800;
}

.season-shooting-trend-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.season-shooting-trend-legend i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.season-shooting-trend-legend .tone-fg {
    background: var(--cc-light-accent, #ffb52e);
}

.season-shooting-trend-legend .tone-three {
    background: var(--cc-light-blue, #438bff);
}

.season-shooting-trend-legend .tone-ft {
    background: var(--cc-light-purple, #b185ff);
}

.season-shooting-trend-chart {
    padding: 0.85rem 0.9rem 0.5rem;
}

.season-shooting-trend-svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 220px;
}

.season-shooting-trend-grid {
    stroke: var(--cc-light-border, rgba(255, 255, 255, 0.07));
    stroke-width: 1;
}

.season-shooting-trend-axis {
    fill: var(--cc-light-muted, rgba(255, 255, 255, 0.48));
    font-size: 10px;
    font-weight: 700;
}

.season-shooting-trend-line {
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.season-shooting-trend-line.fg {
    stroke: var(--cc-light-accent, #ffb52e);
    filter: drop-shadow(0 0 4px rgba(255, 181, 46, 0.18));
}

.season-shooting-trend-line.three {
    stroke: var(--cc-light-blue, #438bff);
    filter: drop-shadow(0 0 4px rgba(67, 139, 255, 0.16));
}

.season-shooting-trend-line.ft {
    stroke: var(--cc-light-purple, #b185ff);
    filter: drop-shadow(0 0 4px rgba(177, 133, 255, 0.16));
}

.season-shooting-trend-point {
    stroke: var(--cc-light-subtle, rgba(10, 10, 10, 0.95));
    stroke-width: 1.8;
}

.season-shooting-trend-point.fg {
    fill: var(--cc-light-accent, #ffb52e);
}

.season-shooting-trend-point.three {
    fill: var(--cc-light-blue, #438bff);
}

.season-shooting-trend-point.ft {
    fill: var(--cc-light-purple, #b185ff);
}

/* Single games are faded dots; the rolling-average line carries the trend. */
.season-shooting-trend-point.game {
    stroke: none;
    opacity: 0.45;
}

.season-shooting-trend-marker {
    stroke: var(--dash-text-dim);
    stroke-width: 1;
    stroke-dasharray: 3 4;
}

.season-shooting-trend-hit {
    fill: transparent;
    cursor: pointer;
}

.season-shooting-trend-hit:focus {
    outline: none;
}

.season-shooting-trend-hit:focus-visible {
    fill: rgba(255, 181, 46, 0.08);
}

.season-shooting-trend-detail {
    margin: 0;
    padding: 0 1rem 0.9rem;
    color: var(--dash-text);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
}

@media (max-width: 1180px) {
    .season-shooting-insights-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 620px) {
    .season-shooting-insight-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .season-shooting-trend-legend {
        justify-content: flex-start;
    }

    .season-shooting-distribution-layout {
        grid-template-columns: 1fr;
    }

    .season-shooting-donut {
        width: min(170px, 72vw);
    }
}

/* FG has five columns, so it gets the full row; 3PT and FT share the row below. */
.season-analytics-shooting-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    align-items: start;
}

.season-analytics-shooting-grid > .shooting-fg {
    grid-column: 1 / -1;
}

.season-analytics-shooting-section {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
}

.season-shooting-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 68px;
    padding: 0.78rem 0.9rem;
    border-bottom: 1px solid var(--dash-border);
    background: var(--cc-light-control, linear-gradient(180deg, rgba(30, 30, 30, 0.96), rgba(20, 20, 20, 0.96)));
}

.season-shooting-section-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
}

.season-analytics-shooting-section.shooting-three .season-shooting-section-icon {
    color: var(--cc-light-blue, #438bff);
    border-color: var(--cc-light-blue-border, rgba(67, 139, 255, 0.18));
    background: rgba(132, 132, 132, 0.10);
}

.season-shooting-table-title {
    margin: 0;
    color: var(--dash-text);
    font-size: 0.88rem;
    font-weight: 900;
    letter-spacing: 0.01em;
}

.season-shooting-table-subtitle {
    margin: 0.12rem 0 0;
    color: var(--dash-text-dim);
    font-size: 0.62rem;
    line-height: 1.25;
}

.season-analytics-shooting-table-wrap {
    overflow-x: auto;
}

.season-analytics-shooting-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    color: var(--dash-text);
    font-size: 0.76rem;
}

.season-analytics-shooting-table th,
.season-analytics-shooting-table td {
    padding: 0.48rem 0.62rem;
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.065));
    text-align: left;
}

.season-analytics-shooting-table thead th {
    background: var(--cc-light-control, rgba(33, 33, 33, 0.72));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.68));
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.season-analytics-shooting-table tbody tr:nth-child(even) {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.022));
}

.season-analytics-shooting-table tbody tr:hover {
    background: rgba(255, 152, 0, 0.07);
}

/* Under the attempt minimum: listed last and dimmed, never hidden. */
.season-analytics-shooting-table tbody tr.season-shooting-player-row.season-shooting-small td {
    color: var(--cc-text-muted, #9c9c9c);
}

.season-analytics-shooting-table tbody tr.season-shooting-player-row.season-shooting-small .season-shooting-percentage-value {
    color: var(--cc-text-muted, #9c9c9c);
    font-weight: 600;
}

.season-analytics-shooting-table tbody tr.season-shooting-player-row.season-shooting-small .season-shooting-percentage-fill {
    background: var(--cc-text-muted, #9c9c9c);
    opacity: 0.5;
}

.season-analytics-shooting-table tbody tr.season-shooting-player-row {
    cursor: pointer;
    transition: background 140ms ease, box-shadow 140ms ease;
}

.season-analytics-shooting-table tbody tr.season-shooting-player-row:hover,
.season-analytics-shooting-table tbody tr.season-shooting-player-row.selected {
    background: rgba(255, 152, 0, 0.14);
    box-shadow: var(--cc-light-shadow, inset 3px 0 0 rgba(255, 183, 77, 0.9));
}

.season-analytics-shooting-section.shooting-three .season-analytics-shooting-table tbody tr:hover {
    background: rgba(132, 132, 132, 0.07);
}

.season-analytics-shooting-section.shooting-three .season-analytics-shooting-table tbody tr.season-shooting-player-row:hover,
.season-analytics-shooting-section.shooting-three .season-analytics-shooting-table tbody tr.season-shooting-player-row.selected {
    background: rgba(132, 132, 132, 0.14);
    box-shadow: var(--cc-light-shadow, inset 3px 0 0 rgba(84, 160, 255, 0.9));
}

.season-analytics-sort-btn {
    appearance: none;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    font: inherit;
    font-weight: 900;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
}

.season-analytics-game-table .season-analytics-sort-btn[title] {
    text-decoration: underline dotted rgba(255, 183, 77, 0.45);
    text-underline-offset: 0.18rem;
}

.season-analytics-sort-btn:hover,
.season-analytics-sort-btn:focus-visible {
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.98));
    outline: none;
}

.season-analytics-shooting-table .numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.season-analytics-shooting-table .jersey {
    width: 8%;
    color: var(--dash-text-dim);
}

.season-analytics-shooting-table .player {
    width: 31%;
    min-width: 0;
}

/* Names wrap rather than shrinking to an ellipsis; they are the reason to read the table. */
.season-shooting-player-name {
    display: block;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.season-analytics-shooting-table .percentage,
.season-analytics-shooting-table .percentage-cell {
    width: 39%;
}

/* Five FG columns: jersey 8, player 32, FG% 30, eFG% 12, made/att 18. */
.shooting-fg .season-analytics-shooting-table .player {
    width: 32%;
}

.shooting-fg .season-analytics-shooting-table .percentage,
.shooting-fg .season-analytics-shooting-table .percentage-cell {
    width: 30%;
}

.shooting-fg .season-analytics-shooting-table .efg {
    width: 12%;
}

.shooting-fg .season-analytics-shooting-table .volume {
    width: 18%;
}

.season-analytics-sort-btn.sorted-desc::after {
    content: ' ↓';
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.95));
}

.season-analytics-sort-btn.sorted-asc::after {
    content: ' ↑';
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.95));
}

.season-shooting-percentage-wrap {
    display: grid;
    grid-template-columns: minmax(44px, auto) minmax(0, 1fr);
    gap: 0.48rem;
    align-items: center;
}

.season-shooting-percentage-value {
    color: var(--cc-light-accent, #ffb52e);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.shooting-three .season-shooting-percentage-value {
    color: var(--cc-light-blue, #54a0ff);
}

.season-shooting-percentage-track {
    position: relative;
    display: block;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.075));
}

.season-shooting-percentage-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ff9800, #ffc15a);
    box-shadow: var(--cc-light-shadow, 0 0 10px rgba(255, 152, 0, 0.18));
}

.shooting-three .season-shooting-percentage-fill {
    background: linear-gradient(90deg, #747474, #979797);
    box-shadow: var(--cc-light-shadow, 0 0 10px rgba(67, 139, 255, 0.18));
}

.season-analytics-shooting-table .volume {
    width: 22%;
    color: var(--dash-text-dim);
    white-space: nowrap;
}

.season-shooting-empty {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 88px;
    padding: 0.85rem 0.9rem;
    color: var(--dash-text-dim);
}

.season-shooting-empty svg {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: var(--cc-light-accent, #ffad42);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.season-shooting-empty p {
    margin: 0;
    font-size: 0.72rem;
}

.season-shooting-note {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.16));
    border-radius: 14px;
    background: rgba(255, 152, 0, 0.045);
    color: var(--dash-text-dim);
}

.season-shooting-note-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.season-shooting-note p {
    margin: 0;
    font-size: 0.67rem;
    line-height: 1.35;
}

@media (max-width: 1180px) {
    .season-analytics-shooting-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .season-shooting-hero {
        align-items: flex-start;
    }

    .season-shooting-summary-grid,
    .season-shooting-summary-grid.count-6 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .season-shooting-hero {
        flex-direction: column;
    }

    .season-shooting-summary-grid,
    .season-shooting-summary-grid.count-6 {
        grid-template-columns: 1fr;
    }

    .season-shooting-table-header {
        align-items: flex-start;
    }

    .season-shooting-qualified-count {
        display: none;
    }
}

.season-analytics-game-section {
    padding: 0;
    overflow: hidden;
}

.season-analytics-game-section .season-analytics-heading {
    margin: 0;
    padding: 1rem 1.1rem 0.85rem;
    border-bottom: 1px solid var(--dash-border);
    color: var(--dash-text);
    font-size: 0.95rem;
    letter-spacing: 0.03em;
    text-transform: none;
}

.season-analytics-game-controls {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--dash-border);
}

.season-analytics-game-player-filter {
    display: grid;
    max-width: 360px;
    gap: 0.35rem;
}

.season-analytics-game-player-filter span {
    color: var(--dash-text-dim);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.season-analytics-game-player-filter select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.12));
    border-radius: 12px;
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.36));
    color: var(--dash-text);
    padding: 0.55rem 0.75rem;
    font: inherit;
    font-weight: 800;
    outline: none;
}

.season-analytics-game-player-filter select:focus {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.48));
    box-shadow: var(--cc-light-shadow, 0 0 0 3px rgba(255, 152, 0, 0.12));
}

.season-analytics-game-table-wrap {
    overflow-x: auto;
}

.season-analytics-game-table {
    width: 100%;
    min-width: 1920px;
    border-collapse: collapse;
    color: var(--dash-text);
    font-size: 0.78rem;
}

.season-analytics-game-table th,
.season-analytics-game-table td {
    padding: 0.48rem 0.55rem;
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    text-align: left;
    white-space: nowrap;
}

.season-analytics-game-table th {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.season-analytics-game-table .numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.season-analytics-game-table tbody tr:nth-child(even) {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.035));
}

.season-analytics-game-total-row {
    background: rgba(255, 152, 0, 0.12) !important;
    font-weight: 900;
}

.season-analytics-note {
    margin: 0;
    color: var(--dash-text-dim);
    font-size: 0.82rem;
}

.season-stats-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
}

.season-player-games-table {
    width: 100%;
    min-width: 1080px;
    table-layout: auto;
}

/* Modern player profile */
#seasonPlayerDetailsScreen {
    max-width: 1120px;
}

#seasonPlayerDetailsScreen #seasonPlayerDetailsContent.hidden {
    display: none;
}

.season-player-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.2rem;
    margin-bottom: 0.85rem;
    padding: 1.15rem 1.25rem 1.05rem;
    overflow: hidden;
    border: 1px solid var(--dash-border);
    border-radius: 20px;
    background:
        var(--cc-light-surface, radial-gradient(circle at 86% 12%, rgba(255, 152, 0, 0.12), transparent 30%),
        linear-gradient(150deg, rgba(25, 25, 25, 0.98), rgba(10, 10, 10, 0.98)));
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.5));
}

.season-player-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.16;
    background-image: var(--cc-light-decoration, radial-gradient(rgba(255, 255, 255, 0.24) 0.7px, transparent 0.7px));
    background-size: 13px 13px;
}

.season-player-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.season-player-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.45rem;
    color: var(--cc-light-accent, #ffad42);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.season-player-eyebrow::before {
    content: '';
    width: 1.7rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff9800, #ffd08a);
}

.season-player-hero .quick-title {
    margin: 0;
    text-shadow: var(--cc-light-text-shadow, 0 0 28px rgba(255, 152, 0, 0.06));
}

.season-player-hero .quick-subtitle {
    margin: 0.35rem 0 0;
}

.season-player-overview-card {
    display: grid;
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(24, 24, 24, 0.96), rgba(12, 12, 12, 0.97)));
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.45));
}

.season-player-panel-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    color: var(--cc-light-accent, #ffad42);
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.18));
}

.season-player-panel-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#seasonPlayerDetailsScreen #seasonPlayerSummary {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

#seasonPlayerDetailsScreen #seasonPlayerSummary .season-secondary-item {
    position: relative;
    min-width: 0;
    padding: 0.68rem 0.76rem;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.055));
    border-radius: 12px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.025));
}

#seasonPlayerDetailsScreen #seasonPlayerSummary .season-secondary-value {
    font-size: 1.06rem;
    font-variant-numeric: tabular-nums;
}

.season-player-detail-panel {
    display: grid;
    gap: 0.85rem;
    padding: 0.95rem 1rem 1rem;
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(11, 11, 11, 0.97)));
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.45));
}

.season-player-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.season-player-panel-heading {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.season-player-panel-heading h3 {
    margin: 0;
    color: var(--dash-text);
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.35rem;
    line-height: 1;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.season-player-panel-heading p {
    margin: 0.22rem 0 0;
    color: var(--dash-text-dim);
    font-size: 0.76rem;
    line-height: 1.35;
}

.season-player-panel-icon.trend {
    color: var(--cc-light-accent, #ff9800);
}

.season-player-panel-control {
    display: flex;
    align-items: center;
    gap: 0.48rem;
    flex: 0 0 auto;
}

#seasonPlayerDetailsScreen .season-player-panel-control > span {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.58));
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: none;
}

#seasonPlayerDetailsScreen .season-player-panel-control select {
    min-height: 38px;
    width: auto;
    min-width: 116px;
    padding: 0.38rem 2rem 0.38rem 0.65rem;
    border-radius: 10px;
    font-size: 0.76rem;
    font-weight: 800;
}

#seasonPlayerDetailsScreen .season-player-game-log-table-wrap {
    margin: 0;
    border-radius: 12px;
    box-shadow: none;
    background: var(--cc-light-surface, rgba(7, 7, 7, 0.48));
}

#seasonPlayerDetailsScreen .season-player-games-table th,
#seasonPlayerDetailsScreen .season-player-games-table td {
    padding: 0.62rem 0.58rem;
    white-space: nowrap;
    vertical-align: middle;
}

#seasonPlayerDetailsScreen .season-player-games-table th:first-child,
#seasonPlayerDetailsScreen .season-player-games-table td:first-child {
    width: 7.2rem;
}

#seasonPlayerDetailsScreen .season-player-games-table th:nth-child(2),
#seasonPlayerDetailsScreen .season-player-games-table td:nth-child(2) {
    width: 11.5rem;
}

#seasonPlayerDetailsScreen .season-player-games-table th:nth-child(3),
#seasonPlayerDetailsScreen .season-player-games-table td:nth-child(3) {
    width: 8.2rem;
    text-align: left;
}

.season-player-result {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.season-player-result strong {
    font-weight: 950;
}

.season-player-result-w {
    color: var(--cc-light-success, #63e99a);
}

.season-player-result-l {
    color: var(--cc-light-danger, #ff747d);
}

.season-player-result-t {
    color: var(--cc-light-subtle, #a9b2c0);
}

.season-player-result span {
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.78));
    font-weight: 800;
}

.season-player-log-plus-minus {
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.season-player-log-plus-minus.positive { color: var(--cc-light-success, #63e99a); }
.season-player-log-plus-minus.negative { color: var(--cc-light-danger, #ff747d); }
.season-player-log-plus-minus.neutral { color: var(--cc-light-subtle, #a9b2c0); }

.season-player-trend-chart {
    min-height: 250px;
    padding: 0.25rem 0.2rem 0;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.045));
    border-radius: 12px;
    background:
        var(--cc-light-surface, linear-gradient(180deg, rgba(8, 8, 8, 0.66), rgba(9, 9, 9, 0.3)),
        radial-gradient(circle at 50% 0%, rgba(255, 152, 0, 0.06), transparent 55%));
    overflow: hidden;
}

.season-player-trend-svg {
    display: block;
    width: 100%;
    min-width: 540px;
    height: auto;
}

.season-player-trend-grid {
    stroke: var(--cc-light-blue, rgba(145, 167, 188, 0.15));
    stroke-width: 1;
}

.season-player-trend-area {
    fill: var(--cc-light-accent, rgba(255, 152, 0, 0.06));
}

.season-player-trend-line {
    fill: none;
    stroke: var(--cc-light-accent, #ff9800);
    stroke-width: 2.35;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.season-player-trend-point {
    fill: var(--cc-light-accent, #ff9800);
    stroke: var(--cc-light-subtle, #211204);
    stroke-width: 1.8;
}

.season-player-trend-axis {
    fill: var(--cc-light-muted, rgba(196, 207, 219, 0.66));
    font-size: 10px;
    font-weight: 700;
}

.season-player-trend-value {
    fill: var(--cc-light-text, #f7f9fb);
    font-size: 10px;
    font-weight: 900;
}

.season-player-trend-x-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.season-player-trend-empty {
    margin: 0;
    padding: 0.7rem;
    border-radius: 10px;
    color: var(--dash-text-dim);
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.025));
}

@media (max-width: 800px) {
    .season-player-panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .season-player-panel-control {
        justify-content: flex-end;
    }

    .season-player-trend-chart {
        overflow-x: auto;
    }
}

@media (max-width: 560px) {
    .season-player-hero {
        align-items: flex-start;
        padding: 0.95rem;
    }

    .season-player-panel-control {
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;
    }

    #seasonPlayerDetailsScreen .season-player-panel-control select {
        width: 100%;
    }
}

#seasonStatsScreen {
    max-width: 1220px;
}

#seasonAnalyticsScreen,
#objectivesScreen {
    max-width: 1220px;
}

#seasonStatsScreen .season-stats-table th,
#seasonStatsScreen .season-stats-table td,
#seasonPlayerDetailsScreen .season-player-games-table th,
#seasonPlayerDetailsScreen .season-player-games-table td {
    padding: 0.62rem 0.5rem;
    font-size: 0.84rem;
}

#seasonStatsScreen .season-stats-table thead th,
#seasonPlayerDetailsScreen .season-player-games-table thead th {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    color: var(--dash-text-dim);
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.09));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

#seasonPlayerDetailsScreen .season-player-games-table th {
    text-align: center;
}

#seasonPlayerDetailsScreen .season-player-games-table th:first-child,
#seasonPlayerDetailsScreen .season-player-games-table td:first-child {
    width: 7rem;
    text-align: left;
}

#seasonPlayerDetailsScreen .season-player-games-table th:nth-child(2),
#seasonPlayerDetailsScreen .season-player-games-table td:nth-child(2) {
    width: 10.5rem;
    text-align: left;
}

#seasonPlayerDetailsScreen .season-player-games-table th:nth-child(3),
#seasonPlayerDetailsScreen .season-player-games-table td:nth-child(3) {
    width: 7rem;
}

#seasonPlayerDetailsScreen .season-player-games-table th:nth-child(n + 4),
#seasonPlayerDetailsScreen .season-player-games-table td:nth-child(n + 4) {
    min-width: 4.2rem;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

#seasonPlayerDetailsScreen .season-player-games-table tbody td {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
    font-weight: 600;
}

#seasonPlayerDetailsScreen .season-player-games-table .season-game-date {
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.66));
    font-size: 0.78rem;
    font-weight: 800;
}

#seasonPlayerDetailsScreen .season-player-games-table .season-game-matchup {
    color: var(--dash-text);
    font-weight: 800;
}

#seasonPlayerDetailsScreen .season-player-games-table .season-margin-result {
    vertical-align: middle;
}

#seasonStatsScreen .season-stats-table td,
#seasonPlayerDetailsScreen .season-player-games-table td {
    color: var(--dash-text);
    border-bottom-color: var(--cc-light-border, rgba(255, 255, 255, 0.07));
}

#seasonStatsScreen .season-stats-table tbody tr:nth-child(odd),
#seasonPlayerDetailsScreen .season-player-games-table tbody tr:nth-child(odd) {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.015));
}

#seasonStatsScreen .season-stats-table tbody tr:nth-child(even),
#seasonPlayerDetailsScreen .season-player-games-table tbody tr:nth-child(even) {
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.18));
}

#seasonStatsScreen .season-stats-table tr:hover,
#seasonPlayerDetailsScreen .season-player-games-table tr:hover {
    background: rgba(255, 152, 0, 0.08);
}

#seasonStatsScreen .season-stats-table tbody tr.season-player-row {
    cursor: pointer;
    transition: background 140ms ease, box-shadow 140ms ease;
}

#seasonStatsScreen .season-stats-table tbody tr.season-player-row:hover,
#seasonStatsScreen .season-stats-table tbody tr.season-player-row.selected {
    background: rgba(255, 152, 0, 0.14);
    box-shadow: var(--cc-light-shadow, inset 3px 0 0 rgba(255, 183, 77, 0.9));
}

#seasonStatsScreen .season-stats-table th:first-child,
#seasonStatsScreen .season-stats-table td:first-child {
    width: 4.2rem;
    text-align: center;
}

#seasonStatsScreen .season-stats-table th:nth-child(2),
#seasonStatsScreen .season-stats-table td:nth-child(2) {
    width: 27%;
    text-align: left;
}

#seasonStatsScreen .season-stats-table th:not(:first-child),
#seasonStatsScreen .season-stats-table td:not(:first-child) {
    text-align: center;
}

#seasonStatsScreen .season-player-name-btn {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#seasonStatsScreen .season-player-number-col {
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.72));
    font-variant-numeric: tabular-nums;
    font-weight: 800;
}

#seasonStatsScreen .season-stats-table {
    min-width: 0;
    font-variant-numeric: tabular-nums;
}

#seasonStatsScreen .season-stats-table th:nth-child(2),
#seasonStatsScreen .season-stats-table td:nth-child(2) {
    width: 21%;
    text-align: left;
}

#seasonStatsScreen .season-stats-table tbody tr:focus-within {
    background: rgba(255, 152, 0, 0.08);
}

#seasonStatsScreen .season-sort-btn.active {
    color: var(--cc-light-accent, #f5ad51);
}

#seasonStatsScreen .season-player-name-btn:focus-visible,
#seasonStatsScreen .season-sort-btn:focus-visible {
    outline: 2px solid var(--cc-light-accent-border, #f5ad51);
    outline-offset: 3px;
    border-radius: 3px;
}

/* +/- reads as coloured text: green above zero, red below, muted at zero. No pill behind it. */
.season-plus-minus {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 700;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.season-plus-minus .season-stat-icon {
    width: 0.85rem;
    height: 0.85rem;
}

.season-plus-minus.positive {
    color: var(--cc-light-success, #70e2b3);
}

.season-plus-minus.negative {
    color: var(--cc-light-danger, #ff919b);
}

.season-plus-minus.neutral {
    color: var(--cc-light-muted, #a6a6ae);
}

/* Zero / no-attempt stat cells recede so non-zero numbers stand out. */
table td.stat-muted {
    /* Utility override: table cell colors are set by many high-specificity themed rules. */
    color: var(--cc-text-muted, #9c9c9c) !important;
    font-weight: 400 !important;
}

#seasonStatsScreen .season-leader-badge .season-stat-icon {
    width: 0.7rem;
    height: 0.7rem;
}

.season-sort-btn {
    border: none;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    width: 100%;
    text-align: inherit;
}

.season-sort-btn[title] {
    text-decoration: underline dotted rgba(255, 183, 77, 0.45);
    text-underline-offset: 0.18rem;
}

#boxScoreModal .stats-table th[title],
#pastGameDetailModal .stats-table th[title] {
    text-decoration: underline dotted rgba(255, 183, 77, 0.45);
    text-underline-offset: 0.18rem;
}

#seasonStatsScreen .season-sort-btn,
#seasonPlayerDetailsScreen .season-sort-btn {
    color: inherit;
}

.season-sort-btn.active {
    color: var(--cc-light-accent, #ffbf84);
}

.season-sort-btn.active::after {
    content: ' \2193';
    font-size: 0.8em;
}

.season-sort-btn.active.asc::after {
    content: ' \2191';
}

.box-score-sort-btn:focus-visible {
    outline: 2px solid var(--cc-light-accent-border, #f5ad51);
    outline-offset: 2px;
    border-radius: 3px;
}

.season-player-name-btn {
    border: none;
    background: transparent;
    color: var(--cc-light-text, #f4f8ff);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    text-align: left;
    padding: 0;
}

.season-player-name-btn:hover {
    color: var(--cc-light-accent, #ffca96);
}

#seasonStatsScreen .season-player-name-btn,
#seasonPlayerDetailsScreen .season-player-name-btn {
    color: var(--dash-text);
    font-weight: 700;
}

#seasonStatsScreen .screen-bottom-bar,
#seasonPlayerDetailsScreen .screen-bottom-bar {
    border-top-color: var(--dash-border);
    padding-top: 1rem;
}

#seasonStatsScreen .icon-nav-btn,
#seasonPlayerDetailsScreen .icon-nav-btn {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.12));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(30, 30, 30, 0.96) 0%, rgba(12, 12, 12, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#seasonStatsScreen .icon-nav-btn:hover,
#seasonPlayerDetailsScreen .icon-nav-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.45));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(40, 40, 40, 0.98) 0%, rgba(14, 14, 14, 0.99) 100%));
}

#seasonStatsScreen .icon-nav-label,
#seasonPlayerDetailsScreen .icon-nav-label {
    color: var(--dash-text-dim);
}

.season-leader-badges {
    display: inline-flex;
    gap: 0.22rem;
    margin-left: 0.35rem;
}

.season-leader-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    border-radius: 999px;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 190, 110, 0.5));
    background: rgba(255, 170, 76, 0.14);
    color: var(--cc-light-accent, #ffc88f);
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1;
}

@media (min-width: 1025px) {
    .setup-screen {
        padding: 3rem 1.5rem;
        align-items: center;
    }

    .start-game-screen {
        max-width: none;
    }

    #startGameScreen {
        min-height: min(860px, calc(100vh - 5rem));
        grid-template-rows: auto minmax(0, 1fr);
    }

    #startGameScreen .sg-panel,
    #startGameScreen .sg-grid {
        min-height: 0;
    }

    #startGameScreen .sg-grid {
        height: 100%;
        align-items: stretch;
    }

    #startGameScreen .sg-column {
        grid-template-rows: repeat(4, minmax(0, 1fr)) auto;
        align-content: stretch;
    }
}

@media (max-width: 1024px) {
    .season-toolbar {
        grid-template-columns: 1fr;
    }

    .season-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .season-secondary-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .season-analytics-shooting-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .season-analytics-shooting-grid {
        grid-template-columns: 1fr;
    }

    #seasonStatsScreen .season-stats-table th:nth-child(9),
    #seasonStatsScreen .season-stats-table td:nth-child(9),
    #seasonStatsScreen .season-stats-table th:nth-child(10),
    #seasonStatsScreen .season-stats-table td:nth-child(10),
    #seasonStatsScreen .season-stats-table th:nth-child(12),
    #seasonStatsScreen .season-stats-table td:nth-child(12),
    #seasonStatsScreen .season-stats-table th:nth-child(13),
    #seasonStatsScreen .season-stats-table td:nth-child(13),
    #seasonStatsScreen .season-stats-table th:nth-child(15),
    #seasonStatsScreen .season-stats-table td:nth-child(15),
    #seasonStatsScreen .season-stats-table th:nth-child(16),
    #seasonStatsScreen .season-stats-table td:nth-child(16) {
        display: none;
    }
}

@media (max-width: 700px) {
    .season-analytics-shooting-grid {
        grid-template-columns: 1fr;
    }
}

/* Auth Landing */
body.auth-locked {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: none;
    background-color: var(--cc-light-surface, #121212);
    background-image:
        var(--cc-light-decoration, radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.045) 1px, transparent 1.45px),
        radial-gradient(62% 56% at 50% 50%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.84) 72%),
        radial-gradient(36% 68% at 0% 48%, rgba(255, 152, 0, 0.16), transparent 70%),
        radial-gradient(36% 68% at 100% 48%, rgba(255, 152, 0, 0.10), transparent 70%),
        radial-gradient(52% 48% at 74% 18%, rgba(255, 183, 77, 0.10), transparent 72%),
        radial-gradient(70% 62% at 50% 115%, rgba(48, 48, 48, 0.36), transparent 72%));
    background-size: 22px 22px, cover, cover, cover, cover, cover;
    background-position: 0 0, center, center, center, center, center;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

/* Do not leave the dashboard in the document flow behind the login screen. */
body.auth-locked .setup-screen {
    display: none !important;
}

.auth-screen {
    --auth-primary: #FF9800;
    --auth-secondary: #263238;
    --auth-tertiary: #FFB74D;
    --auth-neutral: #121212;
    --auth-surface: rgba(26, 26, 26, 0.88);
    --auth-border: rgba(255, 255, 255, 0.08);
    --auth-border-strong: rgba(255, 255, 255, 0.12);
    --auth-text: rgba(255, 255, 255, 0.92);
    --auth-text-dim: rgba(255, 255, 255, 0.62);

    position: relative;
    min-height: 100dvh;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.2rem 1.2rem;
    overflow: visible;
    overscroll-behavior: none;
}

body.auth-locked #legalModal {
    z-index: 6000;
}

.auth-bg {
    position: absolute;
    inset: 0;
    background-color: var(--auth-neutral);
    background-image:
        var(--cc-light-decoration, radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.045) 1px, transparent 1.45px),
        radial-gradient(62% 56% at 50% 50%, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.84) 72%),
        radial-gradient(36% 68% at 0% 48%, rgba(255, 152, 0, 0.16), transparent 70%),
        radial-gradient(36% 68% at 100% 48%, rgba(255, 152, 0, 0.10), transparent 70%),
        radial-gradient(52% 48% at 74% 18%, rgba(255, 183, 77, 0.10), transparent 72%),
        radial-gradient(70% 62% at 50% 115%, rgba(48, 48, 48, 0.36), transparent 72%));
    background-size: 22px 22px, cover, cover, cover, cover, cover;
    background-position: 0 0, center, center, center, center, center;
    background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
}

.auth-shell {
    position: relative;
    width: 100%;
    max-width: 480px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 1.2rem;
    margin: auto;
    min-height: calc(100dvh - 4.4rem);
}

.auth-brand {
    text-align: center;
}

.auth-logo-img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.55));
}

.auth-logo-standalone {
    width: 164px;
    height: 164px;
    margin: 0 auto 1.25rem;
}

.auth-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2.2px;
    font-size: clamp(2.7rem, 2.2rem + 2vw, 3.35rem);
    line-height: 1;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96));
    text-transform: uppercase;
    text-shadow: var(--cc-light-text-shadow, 0 14px 44px rgba(0, 0, 0, 0.65));
}

.auth-tagline {
    margin-top: 0.35rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.55));
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.auth-card {
    position: relative;
    width: 100%;
    background: var(--auth-surface);
    border: 1px solid var(--auth-border);
    border-radius: 18px;
    box-shadow:
        var(--cc-light-shadow, 0 22px 64px rgba(0, 0, 0, 0.62),
        inset 0 1px 0 rgba(255, 255, 255, 0.04));
    padding: 1.35rem 1.25rem 1.15rem;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.auth-accent {
    position: absolute;
    left: 0;
    top: 14px;
    bottom: 14px;
    width: 3px;
    pointer-events: none;
    background: var(--auth-primary);
    border-radius: 3px;
    box-shadow: var(--cc-light-shadow, 0 0 0 1px rgba(0, 0, 0, 0.35), 0 0 26px rgba(255, 152, 0, 0.18));
    opacity: 0.95;
}

.auth-message {
    position: relative;
    z-index: 1;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.24));
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.35));
    color: var(--cc-light-text, rgba(255, 230, 204, 0.92));
    font-size: 0.9rem;
    line-height: 1.3;
    margin-bottom: 0.75rem;
}

#authError.hidden,
#authStatus.hidden {
    display: none;
}

.auth-field {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.35rem;
    margin-bottom: 0.85rem;
}

.auth-signup-guide {
    position: relative;
    z-index: 1;
    margin: 1rem 0;
    padding: 0.7rem 0.8rem;
    border-left: 2px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.72));
    background: rgba(255, 152, 0, 0.06);
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.64));
    font-size: 0.78rem;
    line-height: 1.45;
}

.auth-signup-guide-title {
    display: block;
    margin-bottom: 0.2rem;
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.94));
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.auth-field-hint {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.46));
    font-size: 0.72rem;
    line-height: 1.3;
}

.auth-label {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.6));
    font-weight: 800;
}

.auth-input-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem;
    align-items: center;
}

.auth-input {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--auth-border);
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.62));
    color: var(--auth-text);
    padding: 0.95rem 0.95rem;
    font-weight: 700;
    outline: none;
    box-shadow: var(--cc-light-shadow, inset 0 0 0 1px rgba(0, 0, 0, 0.22));
}

.auth-input::placeholder {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.28));
    font-weight: 600;
}

.auth-input:focus {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.9));
    box-shadow: var(--cc-light-shadow, 0 0 0 3px rgba(255, 152, 0, 0.14));
}

.auth-icon-btn {
    border: 1px solid var(--auth-border);
    background: var(--cc-light-control, rgba(0, 0, 0, 0.62));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
    border-radius: 12px;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 120ms ease, border-color 120ms ease;
}

.auth-icon-btn:hover {
    border-color: var(--auth-border-strong);
    transform: translateY(-1px);
}

.auth-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0.2rem 0 1rem;
}

.auth-check {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
    font-size: 0.9rem;
}

.auth-check input[type="checkbox"] {
    accent-color: var(--auth-primary);
}

.auth-legal-check {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0.2rem 0 1rem;
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.68));
    font-size: 0.78rem;
    line-height: 1.45;
}

.auth-legal-check input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: var(--auth-primary);
}

.auth-legal-link {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--auth-primary);
    cursor: pointer;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.auth-link {
    border: none;
    background: none;
    color: var(--cc-light-accent, rgba(255, 152, 0, 0.92));
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.75rem;
    cursor: pointer;
    transition: color 120ms ease;
}

.auth-link:hover {
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.98));
}

body #authScreen #authCreateAccountBtn,
body #authScreen #authSignInForm .auth-link,
body #authScreen [data-auth-view="forgot"] .auth-footer .auth-link,
body #authScreen [data-auth-view="signup"] .auth-footer .auth-link {
    color: var(--auth-primary);
}

body #authScreen #authCreateAccountBtn:hover,
body #authScreen #authSignInForm .auth-link:hover,
body #authScreen [data-auth-view="forgot"] .auth-footer .auth-link:hover,
body #authScreen [data-auth-view="signup"] .auth-footer .auth-link:hover {
    color: var(--auth-tertiary);
}

.auth-secondary-link {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.58));
    font-size: 0.7rem;
    letter-spacing: 0.04em;
}

.auth-secondary-link:hover {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.86));
}

.auth-signin-request-state {
    position: relative;
    z-index: 1;
    margin: 0.85rem 0 0.15rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: center;
}

.auth-signin-request-progress,
.auth-signin-request-recovery p {
    margin: 0;
}

.auth-signin-request-progress {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.84));
    font-weight: 800;
}

.auth-signin-request-recovery {
    display: grid;
    gap: 0.15rem;
    margin-top: 0.35rem;
}

.auth-request-actions {
    margin-top: 0.45rem;
}

.auth-primary {
    position: relative;
    z-index: 1;
    width: 100%;
    border: 1px solid var(--cc-light-border, rgba(0, 0, 0, 0.6));
    border-radius: 14px;
    background: var(--auth-primary);
    color: rgba(0, 0, 0, 0.84);
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 1.05rem 1rem;
    cursor: pointer;
    box-shadow: var(--cc-light-shadow, 0 14px 38px rgba(0, 0, 0, 0.4));
    transition: transform 140ms ease, filter 140ms ease;
}

.auth-primary:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.auth-primary:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.auth-divider {
    position: relative;
    z-index: 1;
    margin: 1rem 0 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.42));
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    height: 1px;
    flex: 1;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.12));
}

.auth-provider {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 0.65rem;
    border-radius: 12px;
    border: 1px solid var(--auth-border);
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.62));
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
    padding: 0.95rem 1rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: not-allowed;
}

.auth-provider-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.78));
    flex: 0 0 auto;
}

.auth-provider-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

.auth-provider-label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.45rem;
}

.auth-provider-soon {
    letter-spacing: 0.02em;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.38));
    font-weight: 800;
}

.auth-footer {
    position: relative;
    z-index: 1;
    margin-top: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.auth-card-title {
    position: relative;
    z-index: 1;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1.4px;
    font-size: 1.85rem;
    text-transform: uppercase;
    margin-bottom: 0.2rem;
}

.auth-card-sub {
    position: relative;
    z-index: 1;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.auth-verify {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.25rem 0.2rem;
    text-align: center;
}

.auth-spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.22));
    border-top-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.96));
    animation: auth-spin 0.9s linear infinite;
}

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

.auth-verify-title {
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.auth-verify-sub {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
    font-size: 0.9rem;
    line-height: 1.35;
}

@media (max-width: 640px) {
    .auth-screen {
        padding: 1.5rem 1rem;
    }

    .auth-shell {
        min-height: calc(100dvh - 3rem);
        gap: 0.9rem;
    }

    .auth-logo-standalone {
        width: 132px;
        height: 132px;
        margin-bottom: 0.85rem;
    }

    .auth-tagline {
        font-size: 0.72rem;
        letter-spacing: 0.16em;
    }

    .auth-card {
        padding: 1.15rem 1rem 1rem;
    }
}

@media (max-height: 820px) {
    .auth-screen {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }

    .auth-shell {
        min-height: calc(100dvh - 2.5rem);
        gap: 0.85rem;
    }

    .auth-logo-standalone {
        width: 120px;
        height: 120px;
        margin-bottom: 0.75rem;
    }

    .auth-tagline {
        margin-top: 0.25rem;
    }
}

@media (orientation: landscape) and (max-height: 560px) {
    .auth-screen {
        padding: 0.85rem 1rem;
    }

    .auth-shell {
        min-height: calc(100dvh - 1.7rem);
        gap: 0.7rem;
    }

    .auth-brand {
        display: grid;
        justify-items: center;
        gap: 0.25rem;
    }

    .auth-logo-standalone {
        width: 84px;
        height: 84px;
        margin-bottom: 0.35rem;
    }

    .auth-title {
        font-size: clamp(2rem, 1.6rem + 1.6vw, 2.45rem);
    }

    .auth-tagline {
        font-size: 0.66rem;
        letter-spacing: 0.12em;
    }

    .auth-card {
        padding: 1rem 0.95rem 0.9rem;
    }
}

@media (max-width: 760px) {
    #seasonStatsScreen .season-stats-table {
        min-width: 680px;
    }

    #seasonAnalyticsScreen .season-toolbar-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #seasonAnalyticsScreen .season-view-tabs {
        width: max-content;
    }

    #seasonAnalyticsScreen .season-view-tab {
        min-width: 8.5rem;
        min-height: 104px;
        padding: 0.8rem;
    }

    #seasonStatsScreen .season-stats-table th,
    #seasonStatsScreen .season-stats-table td,
    #seasonPlayerDetailsScreen .season-player-games-table th,
    #seasonPlayerDetailsScreen .season-player-games-table td {
        padding: 0.5rem 0.32rem;
        font-size: 0.78rem;
    }

    #seasonStatsScreen .season-stats-table th:nth-child(2),
    #seasonStatsScreen .season-stats-table td:nth-child(2) {
        width: 40%;
    }

    #seasonStatsScreen .season-stats-table th:nth-child(8),
    #seasonStatsScreen .season-stats-table td:nth-child(8),
    #seasonStatsScreen .season-stats-table th:nth-child(14),
    #seasonStatsScreen .season-stats-table td:nth-child(14),
    #seasonStatsScreen .season-stats-table th:nth-child(17),
    #seasonStatsScreen .season-stats-table td:nth-child(17) {
        display: none;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .start-game-screen {
        max-width: 620px;
        padding: 2.1rem 1.9rem;
    }

    #seasonStatsScreen,
    #seasonAnalyticsScreen,
    #seasonPlayerDetailsScreen,
    #objectivesScreen {
        max-width: none;
        padding: 0.25rem 0;
    }
}

.league-rules-note {
    border: 1px solid var(--cc-light-border, #394153);
    border-radius: 8px;
    background: var(--cc-light-surface, rgba(10, 10, 10, 0.7));
    color: var(--cc-light-text, #d5d9e3);
    padding: 0.65rem 0.75rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.league-rules-preview {
    padding: 0.5rem 0.65rem;
    font-size: 0.8rem;
    line-height: 1.4;
    margin-bottom: 0;
}

.screen-bottom-bar {
    margin-top: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 1px solid var(--cc-light-border, #292d36);
    padding-top: 0.9rem;
}

.icon-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.icon-nav-btn {
    width: 40px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--cc-light-border, #3b4150);
    background: var(--cc-light-control, #121212);
    color: var(--cc-light-accent, #ff9a3d);
    font-size: 1.1rem;
    cursor: pointer;
}

.icon-nav-label {
    color: var(--cc-light-text, #c7d0e5);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    text-shadow: var(--cc-light-text-shadow, 0 1px 0 rgba(0, 0, 0, 0.35));
}

.form-section {
    margin-bottom: 2rem;
}

.form-section h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    color: var(--primary);
    font-weight: 600;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

label {
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-dim);
    font-weight: 500;
}

input[type="text"]:not(.auth-input),
input[type="number"]:not(.auth-input),
select {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--text);
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    transition: all 0.2s;
}

input:not(.auth-input):focus,
select:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg);
}

textarea {
    background: var(--surface-light);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    color: var(--text);
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    min-height: 120px;
    resize: vertical;
    transition: all 0.2s;
}

textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg);
}

textarea::placeholder {
    color: var(--text-dim);
    opacity: 0.6;
}

.btn {
    background: linear-gradient(180deg, #ff9a3d 0%, #ff7e20 45%, #e45a14 100%);
    color: #17110b;
    border: 1px solid var(--cc-light-accent-border, #ff9a3d);
    border-radius: 12px;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn:hover {
    background: linear-gradient(180deg, #ffad57 0%, #ff8b2f 45%, #ec6c23 100%);
    border-color: var(--cc-light-accent-border, #ffb267);
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--secondary);
    color: var(--cc-light-text, #f2f5f9);
    border: 1px solid var(--cc-light-blue-border, #1f6fa8);
}

.btn-secondary:hover {
    background: var(--secondary-dark);
    color: var(--cc-light-text, #ffffff);
    border-color: var(--cc-light-blue-border, #2f7db4);
}

.btn-danger {
    background: var(--cc-light-danger-soft, #5a2228);
    border: 1px solid var(--cc-light-danger-border, #8e323b);
    color: var(--cc-light-text, #ffe2e6);
}

.btn-danger:hover {
    background: var(--cc-light-danger-soft, #79303a);
    color: var(--cc-light-text, #ffffff);
}

.btn-full {
    width: 100%;
}

.paste-info {
    background: var(--bg);
    border: 1px dashed var(--border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: var(--text-dim);
}

/* Game Screen */
.game-screen {
    display: none;
    min-height: 100vh;
    padding-top: calc(var(--scoreboard-height, 190px) + 6px);
    padding-bottom: 100px;
    background:
        var(--cc-light-surface, radial-gradient(86% 58% at 50% -4%, rgba(255, 130, 68, 0.12), transparent 68%),
        radial-gradient(95% 62% at 48% 108%, rgba(81, 81, 81, 0.14), transparent 75%),
        linear-gradient(180deg, #0d0d0d 0%, #121212 58%, #101010 100%));
}

.game-screen.active {
    display: block;
}

/* Top Bar */
.top-bar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.9rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.scoreboard-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    max-width: 1600px;
    margin: 0 auto;
    z-index: 220;
    border-top: 1px solid var(--cc-light-accent-border, rgba(255, 188, 136, 0.78));
    border-bottom: 1px solid var(--cc-light-accent-border, rgba(255, 188, 136, 0.56));
    padding: 0.86rem 1.15rem 0.78rem;
    flex-direction: column;
    align-items: stretch;
    background:
        var(--cc-light-surface, linear-gradient(90deg, rgba(255, 132, 75, 0.2) 0%, rgba(255, 132, 75, 0.05) 42%, rgba(122, 122, 122, 0.05) 58%, rgba(122, 122, 122, 0.18) 100%),
        linear-gradient(180deg, rgba(26, 26, 26, 0.985), rgba(15, 15, 15, 0.985)));
    box-shadow: var(--cc-light-shadow, 0 14px 30px rgba(0, 0, 0, 0.38));
    backdrop-filter: blur(7px);
}

@media (max-width: 900px) {
    .game-screen {
        padding-top: calc(var(--scoreboard-height, 190px) + 6px);
    }
}

@media (max-width: 640px) {
    .game-screen {
        padding-top: calc(var(--scoreboard-height, 190px) + 6px);
    }
}

.score-display {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
    align-items: center;
    gap: 1rem;
    font-family: 'Bebas Neue', sans-serif;
    width: 100%;
}

.team-score {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(30, 30, 30, 0.96), rgba(16, 16, 16, 0.94)));
    border: 1px solid var(--cc-light-blue-border, #496097);
    border-radius: 15px;
    padding: 0.74rem 1rem;
    min-height: 104px;
    overflow: hidden;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(223, 236, 255, 0.11), 0 12px 26px rgba(3, 8, 20, 0.46));
}

.team-score::before {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    top: 0;
    height: 24px;
    background: var(--cc-light-raised, linear-gradient(180deg, rgba(241, 241, 241, 0.12), rgba(241, 241, 241, 0)));
    pointer-events: none;
}

.team-score::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    opacity: 0.72;
    border-radius: 999px;
}

.score-foul-label {
    color: var(--cc-light-blue, #9fb2d8);
    text-transform: uppercase;
    font-weight: 800;
}

.score-foul-value {
    color: var(--cc-light-text, #f2f7ff);
    font-weight: 800;
    min-width: 1ch;
    text-align: center;
}

.team-score.home {
    color: var(--primary);
    border-color: var(--cc-light-accent-border, rgba(255, 165, 112, 0.66));
    grid-template-columns: 5px minmax(0, 280px) auto;
    gap: 1.15rem;
    justify-self: end;
}

.team-score.home::after {
    background: linear-gradient(90deg, rgba(255, 180, 133, 0), rgba(255, 165, 112, 0.9), rgba(255, 180, 133, 0));
}

.team-score.away {
    color: var(--secondary);
    border-color: var(--cc-light-blue-border, rgba(133, 191, 255, 0.66));
}

.team-score.away::after {
    background: linear-gradient(90deg, rgba(199, 199, 199, 0), rgba(175, 175, 175, 0.92), rgba(199, 199, 199, 0));
}

#homeTeamNameDisplay,
#awayTeamNameDisplay {
    font-size: 1rem;
    letter-spacing: 1.3px;
    color: var(--cc-light-blue, #b8caea);
    text-transform: uppercase;
    opacity: 0.92;
}

.lineup-mini-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: 26px;
    padding: 0.16rem 0.55rem;
    border-radius: 999px;
    border: 1px solid var(--cc-light-blue-border, #6582ba);
    background: var(--cc-light-control, linear-gradient(180deg, #464646 0%, #373737 100%));
    color: var(--cc-light-text, #eff5ff);
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(240, 246, 255, 0.14), 0 6px 13px rgba(0, 0, 0, 0.25));
    transition: all 0.16s ease;
}

.lineup-mini-btn:focus-visible {
    outline: 2px solid var(--cc-light-blue-border, rgba(149, 191, 255, 0.95));
    outline-offset: 1px;
}

@media (max-width: 900px) {
    .lineup-mini-btn {
        min-height: 24px;
        padding: 0.14rem 0.45rem;
        font-size: 0.61rem;
    }

}

#homeScore,
#awayScore {
    font-size: 5.2rem;
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 1.6px;
    text-shadow: var(--cc-light-text-shadow, 0 0 18px rgba(255, 255, 255, 0.14));
}

.overtime-badge {
    margin: 0.18rem auto 0.2rem;
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff983f, #e6731d);
    color: var(--cc-light-text, #fff6ed);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.55px;
    text-transform: uppercase;
    box-shadow: var(--cc-light-shadow, 0 0 16px rgba(255, 126, 31, 0.35));
}

.clock {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.9rem;
    letter-spacing: 1.5px;
    line-height: 0.92;
    text-shadow: var(--cc-light-text-shadow, 0 0 16px rgba(120, 168, 255, 0.22), 0 3px 8px rgba(0, 0, 0, 0.26));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.98));
}

.clock.running {
    color: var(--success);
}

.clock.danger {
    color: var(--danger);
}

.clock.urgent {
    animation: clock-pulse 1s ease-in-out infinite;
}

#homeScore.score-pop,
#awayScore.score-pop {
    animation: score-pop 0.35s ease-out;
}

.team-score.flash {
    animation: team-flash 0.45s ease-out;
}

@keyframes score-pop {
    0% { transform: scale(1); }
    45% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

@keyframes team-flash {
    0% { box-shadow: var(--cc-light-shadow, 0 0 0 rgba(255, 255, 255, 0)); }
    40% { box-shadow: var(--cc-light-shadow, 0 0 28px rgba(255, 255, 255, 0.22)); }
    100% { box-shadow: var(--cc-light-shadow, 0 0 0 rgba(255, 255, 255, 0)); }
}

@keyframes clock-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.action-btn:focus-visible {
    outline: 2px solid var(--cc-light-blue-border, rgba(144, 191, 255, 0.96));
    outline-offset: 1px;
}

@keyframes sub-card-blink {
    0%,
    100% {
        box-shadow: var(--cc-light-shadow, 0 0 0 1px rgba(255, 176, 32, 0.45));
        border-color: var(--warning);
    }
    50% {
        box-shadow: var(--cc-light-shadow, 0 0 0 2px rgba(255, 176, 32, 0.72), 0 0 18px rgba(255, 176, 32, 0.34));
        border-color: var(--cc-light-accent-border, #ffd27a);
    }
}

.timeout-dots {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.timeout-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-dim);
    opacity: 0.3;
}

.timeout-dot.used {
    background: var(--primary);
    opacity: 1;
}

.timeout-modal-content {
    max-width: 560px;
}

.timeout-modal-subtitle {
    color: var(--text-dim);
    margin-top: -0.45rem;
    margin-bottom: 0.9rem;
}

.timeout-modal-grid {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: 1fr;
}

.timeout-choice-card {
    width: 100%;
    border: 1px solid var(--cc-light-blue-border, #2a3355);
    border-radius: 12px;
    background: var(--cc-light-surface, rgba(18, 18, 18, 0.9));
    color: var(--text);
    padding: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.timeout-choice-card:hover {
    border-color: var(--cc-light-blue-border, #55a6e8);
    transform: translateY(-1px);
}

.timeout-choice-team {
    font-weight: 700;
    letter-spacing: 0.35px;
}

.timeout-choice-count {
    color: var(--text-dim);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.timeout-modal-dots {
    margin-top: 0.48rem;
}

.timeout-modal-note {
    margin-top: 0.75rem;
    min-height: 1.1rem;
    color: var(--cc-light-accent, #f6b777);
    font-size: 0.85rem;
}

@media (min-width: 760px) {
    .timeout-modal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bonus-indicator {
    color: var(--warning);
    font-size: 0.9rem;
    margin-left: 0.5rem;
}

.score-foul-row .bonus-indicator {
    font-size: 0.72rem;
    margin-left: 0;
    letter-spacing: 0.4px;
}

/* Main Court Area */

#homeOnCourt {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 0.15rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(122, 152, 214, 0.64) rgba(12, 18, 35, 0.68);
}

#homeOnCourt .player-card {
    margin-bottom: 0;
    padding: 0.7rem;
}

#homeOnCourt .player-actions {
    gap: 0.3rem;
}

#homeOnCourt .action-btn {
    padding: 0.56rem 0.42rem;
    font-size: 0.82rem;
}

#homeOnCourt .action-btn.primary {
    padding: 0.62rem 0.42rem;
}

#homeOnCourt .player-name {
    font-size: 1rem;
}

#homeOnCourt .player-number {
    font-size: 1.38rem;
    padding: 0.36rem 0.68rem;
}

#homeOnCourt .player-meta {
    margin-bottom: 0.45rem;
    font-size: 0.78rem;
}

.player-card {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(44, 44, 44, 0.95), rgba(28, 28, 28, 0.95)));
    border: 1px solid var(--cc-light-blue-border, #4d6297);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(232, 241, 255, 0.1), 0 8px 18px rgba(2, 7, 19, 0.4));
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

.player-card.action-feedback {
    box-shadow: var(--cc-light-shadow, 0 0 0 2px rgba(255, 137, 61, 0.35), 0 0 24px rgba(255, 137, 61, 0.28));
}

@media (hover: hover) and (pointer: fine) {
    .player-card:hover {
        border-color: var(--cc-light-accent-border, rgba(255, 180, 132, 0.88));
        box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 242, 231, 0.15), 0 10px 22px rgba(1, 8, 24, 0.45), 0 0 0 1px rgba(255, 157, 102, 0.22));
        transform: translateY(-1px);
    }
}

@media (hover: none), (pointer: coarse) {
    .player-card {
        transition: none;
    }
}

.player-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.player-name {
    font-weight: 600;
    font-size: 1.1rem;
}

.player-number {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(16, 16, 16, 0.92), rgba(11, 11, 11, 0.96)));
    border: 1px solid var(--cc-light-blue-border, rgba(109, 137, 193, 0.5));
    padding: 0.52rem 1.08rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.82rem;
    line-height: 1;
    color: var(--primary);
}

.player-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
    margin-bottom: 0.75rem;
}

.player-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.action-btn {
    background: var(--cc-light-control, linear-gradient(180deg, rgba(25, 25, 25, 0.98), rgba(16, 16, 16, 0.98)));
    border: 1px solid var(--cc-light-blue-border, #445a8f);
    color: var(--cc-light-text, #f0f5ff);
    padding: 0.6rem 0.5rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(226, 238, 255, 0.1), 0 4px 12px rgba(2, 9, 24, 0.34));
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-btn:hover {
    background: linear-gradient(180deg, #ff8f45 0%, #e76f22 100%);
    border-color: var(--cc-light-accent-border, #ffad73);
    color: #1b1108;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 243, 230, 0.28), 0 8px 16px rgba(0, 0, 0, 0.34));
    transform: translateY(-1px);
}

.action-btn.miss-shot:hover {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    border-color: var(--cc-light-danger-border, #f87171);
}

.action-btn.rebound-action:hover {
    background: var(--cc-light-control-hover, #363636);
    border-color: var(--cc-light-blue-border, #1b3a63);
}

.action-btn[data-action="turnovers-1"]:hover {
    background: var(--cc-light-control-hover, #292929);
    border-color: var(--cc-light-blue-border, #172b49);
}

.action-btn:active {
    transform: translateY(0);
}

.action-btn.feedback-hit {
    animation: action-hit 0.34s ease-out;
}

.action-btn.primary {
    background: var(--cc-light-accent-soft, linear-gradient(180deg, #35c46b 0%, #15803d 100%));
    border-color: var(--cc-light-success-border, #4ade80);
    font-size: 0.85rem;
    padding: 0.7rem 0.5rem;
    color: var(--cc-light-text, #f8fff9);
}

.action-btn.primary:hover {
    background: linear-gradient(180deg, #4ade80 0%, #16a34a 100%);
    border-color: var(--cc-light-success-border, #86efac);
    color: var(--cc-light-success, #052e16);
}

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

.action-btn.danger:hover {
    opacity: 0.9;
}

@media (hover: none), (pointer: coarse) {

    .action-btn:hover {
        background: var(--bg);
        border-color: var(--border);
        transform: none;
    }

    .action-btn.primary:hover {
        background: var(--cc-light-accent-soft, linear-gradient(180deg, #35c46b 0%, #15803d 100%));
        border-color: var(--cc-light-success-border, #4ade80);
        color: var(--cc-light-text, #f8fff9);
    }

    .action-btn.miss-shot:hover {
        background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
        border-color: var(--cc-light-danger-border, #f87171);
    }

    .action-btn.rebound-action:hover {
        background: var(--cc-light-control-hover, #2c2c2c);
        border-color: var(--cc-light-blue-border, #142f52);
    }

    .action-btn[data-action="turnovers-1"]:hover {
        background: var(--cc-light-control-hover, #1d1d1d);
        border-color: var(--cc-light-blue-border, #0f1f38);
    }

    .action-btn.danger:hover {
        background: var(--danger);
        border-color: var(--danger);
        opacity: 1;
    }

    .action-btn:active {
        transform: none;
    }
}

@keyframes action-hit {
    0% {
        transform: scale(1);
        box-shadow: var(--cc-light-shadow, 0 0 0 0 rgba(255, 173, 100, 0));
    }
    35% {
        transform: scale(1.08);
        box-shadow: var(--cc-light-shadow, 0 0 0 8px rgba(255, 173, 100, 0.22));
    }
    100% {
        transform: scale(1);
        box-shadow: var(--cc-light-shadow, 0 0 0 0 rgba(255, 173, 100, 0));
    }
}

/* Bottom Actions */

#homeOnCourt::-webkit-scrollbar {
    width: 9px;
}

#homeOnCourt::-webkit-scrollbar-track {
    background: var(--cc-light-surface, rgba(18, 18, 18, 0.68));
    border-radius: 999px;
}

#homeOnCourt::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(162, 162, 162, 0.86), rgba(125, 125, 125, 0.82));
    border-radius: 999px;
}

.settings-note {
    color: var(--text-dim);
    font-size: 0.86rem;
    margin-bottom: 1rem;
}

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--cc-light-scrim, rgba(15, 15, 15, 0.95));
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.modal.active {
    display: flex;
}

.league-edit-screen {
    width: 100%;
}

#leagueEditFormHost .league-editor-page {
    display: block;
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    backdrop-filter: none;
}

#leagueEditFormHost .league-editor-page .modal-content.setup-surface {
    width: 100%;
    max-width: none;
    max-height: none;
    overflow: visible;
}

#leagueEditFormHost .league-editor-page .modal-close,
#leagueEditFormHost .league-editor-page .modal-header {
    display: none;
}

.legal-modal-content {
    max-width: 760px;
    width: min(92vw, 760px);
    max-height: min(84vh, 800px);
}

.legal-modal-tabs {
    display: flex;
    gap: 0.6rem;
    margin: 0 2.5rem 1.25rem 0;
}

.legal-tab.active {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.72));
    color: var(--cc-light-accent, #ffd19b);
    background: var(--cc-light-accent-soft, linear-gradient(180deg, rgba(62, 40, 20, 0.98), rgba(26, 17, 10, 0.99)));
}

.legal-document h3 {
    margin: 1.2rem 0 0.35rem;
    color: var(--cc-light-accent, rgba(255, 209, 155, 0.96));
    font-size: 0.95rem;
}

.legal-document p {
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.7));
    font-size: 0.9rem;
    line-height: 1.55;
}

#legalModal .settings-note {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.52));
}

#legalModal .btn.btn-secondary {
    background: var(--cc-light-control, linear-gradient(180deg, rgba(31, 31, 31, 0.98), rgba(12, 12, 12, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.12));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.86));
}

#legalModal .btn.btn-secondary:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
    color: var(--cc-light-text, #fff7ec);
}

@media (max-width: 560px) {
    .legal-modal-tabs {
        margin-right: 2rem;
        flex-wrap: wrap;
    }
}

#confirmModal {
    background: var(--cc-light-surface, rgba(6, 6, 6, 0.92));
}

#confirmModal .modal-content.setup-surface {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(23, 23, 23, 0.98), rgba(10, 10, 10, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.08));
    box-shadow: var(--cc-light-shadow, 0 30px 64px rgba(0, 0, 0, 0.6));
}

#confirmModal .modal-header {
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.98));
}

#confirmModal .settings-note {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.84));
}

#confirmModal .btn-secondary {
    background: var(--cc-light-control, linear-gradient(180deg, rgba(31, 31, 31, 0.98), rgba(12, 12, 12, 0.99)));
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.1));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
}

#confirmModal .btn-secondary:hover {
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(44, 44, 44, 0.98), rgba(18, 18, 18, 0.99)));
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.34));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96));
}

#playByPlayModal {
    z-index: 1100;
}

#pastGamesModal,
#pastGameInfoModal,
#pastGameDetailModal,
#pastGameShotChartModal,
#legalModal,
#backupModal,
#storageRiskConfirmModal,
#createLeagueModal,
#changelogModal,
#playerEditorModal,
#replaceRosterModal,
#gameRecapModal,
#playByPlayModal.past-mode {
    background: var(--cc-light-surface, rgba(6, 6, 6, 0.94));
    backdrop-filter: none;
}

#teamManagerModal {
    background: var(--cc-light-surface, rgba(4, 4, 4, 0.94));
    backdrop-filter: none;
}

#pastGameDetailModal {
    background:
        var(--cc-light-surface, radial-gradient(80% 68% at 50% 14%, rgba(255, 152, 0, 0.08), transparent 70%),
        linear-gradient(180deg, rgba(4, 4, 4, 0.96), rgba(8, 8, 8, 0.98)));
}

#pastGameInfoModal,
#pastGameShotChartModal {
    background: var(--cc-light-surface, rgba(6, 6, 6, 0.94));
}

#gameRecapModal {
    z-index: 1100;
}

.modal-content {
    background: var(--surface);
    border-radius: 16px;
    padding: 2rem;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    border: 1px solid var(--border);
    position: relative;
}

.modal-content.setup-surface {
    background:
        var(--cc-light-surface, radial-gradient(72% 58% at 50% 18%, rgba(255, 118, 44, 0.12), transparent 72%),
        linear-gradient(180deg, rgba(29, 29, 29, 0.97), rgba(14, 14, 14, 0.97)));
    border: 1px solid var(--cc-light-border, #2f3853);
    border-radius: 18px;
    box-shadow:
        var(--cc-light-shadow, inset 0 1px 0 rgba(176, 198, 255, 0.12),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        0 14px 45px rgba(0, 0, 0, 0.42));
}

#teamManagerModal .team-manager-modal {
    width: min(92vw, 780px);
    max-width: 780px;
    max-height: min(88vh, 900px);
    background:
        var(--cc-light-surface, radial-gradient(88% 70% at 100% 0%, rgba(255, 152, 0, 0.1), transparent 58%),
        linear-gradient(180deg, rgba(22, 22, 22, 0.99), rgba(9, 9, 9, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.1));
}

#teamManagerModal .team-manager-modal-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.15rem;
}

#teamManagerModal .team-manager-modal-roster {
    grid-column: 1 / -1;
}

#teamManagerModal input[type="text"],
#teamManagerModal input[type="number"],
#teamManagerModal select,
#teamManagerModal textarea {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(31, 31, 31, 0.98), rgba(12, 12, 12, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.1));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#teamManagerModal input[type="text"]:focus,
#teamManagerModal input[type="number"]:focus,
#teamManagerModal select:focus,
#teamManagerModal textarea:focus {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
}

#teamManagerModal .paste-info {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.1));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(14, 14, 14, 0.84), rgba(7, 7, 7, 0.9)));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.66));
}

#teamManagerModal textarea {
    min-height: 132px;
    resize: vertical;
}

#teamManagerModal .tm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1.2rem;
}

#teamManagerModal .tm-action-btn {
    min-height: 44px;
    padding: 0.7rem 1.15rem;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.12));
    border-radius: 10px;
    background: var(--cc-light-control, linear-gradient(180deg, rgba(34, 34, 34, 0.92), rgba(10, 10, 10, 0.98)));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#teamManagerModal .tm-action-primary {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.7));
    background: linear-gradient(180deg, #ff9d45, #ef6618);
    color: #141414;
}

#pastGameDetailModal .modal-content.setup-surface {
    background:
        var(--cc-light-surface, radial-gradient(110% 82% at 50% 0%, rgba(255, 152, 0, 0.08), transparent 52%),
        linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(8, 8, 8, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.08));
    box-shadow:
        var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 18px 58px rgba(0, 0, 0, 0.55));
}

#pastGameInfoModal .modal-content.setup-surface,
#pastGameShotChartModal .modal-content.setup-surface {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(23, 23, 23, 0.98), rgba(10, 10, 10, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.08));
    box-shadow:
        var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 20px 56px rgba(0, 0, 0, 0.58));
}

#pastGameDetailModal .modal-close {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.64));
}

#pastGameDetailModal .modal-close:hover {
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.96));
}

#backupModal .modal-content.setup-surface,
#storageRiskConfirmModal .modal-content.setup-surface,
#createLeagueModal .modal-content.setup-surface {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(23, 23, 23, 0.98), rgba(10, 10, 10, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.08));
    box-shadow:
        var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 18px 55px rgba(0, 0, 0, 0.55));
}

.modal-actions {
    margin-top: 1rem;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.modal-actions.wide-spacing {
    margin-top: 2rem;
}

.btn-compact {
    width: auto;
    min-width: 144px;
    min-height: 42px;
    padding: 0.62rem 1rem;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.45px;
}

#createLeagueModal .form-grid {
    gap: 0.8rem;
}

#createLeagueModal input[type="text"],
#createLeagueModal input[type="number"],
#createLeagueModal select {
    font-weight: 600;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(31, 31, 31, 0.98), rgba(12, 12, 12, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.1));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#playerEditorModal input[type="text"],
#playerEditorModal input[type="number"],
#playerEditorModal select {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(31, 31, 31, 0.98), rgba(12, 12, 12, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.1));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#createLeagueModal select option {
    background: var(--cc-light-control, #101010);
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#playerEditorModal select option {
    background: var(--cc-light-control, #101010);
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#createLeagueModal input[type="text"]:focus,
#createLeagueModal input[type="number"]:focus,
#createLeagueModal select:focus {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(37, 37, 37, 0.98), rgba(18, 18, 18, 0.99)));
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.34));
}

#playerEditorModal input[type="text"]:focus,
#playerEditorModal input[type="number"]:focus,
#playerEditorModal select:focus {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(37, 37, 37, 0.98), rgba(18, 18, 18, 0.99)));
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.34));
}

#playerEditorModal .pm-action-btn {
    min-height: 44px;
    padding: 0.7rem 1.15rem;
    border-radius: 10px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.12));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(34, 34, 34, 0.92) 0%, rgba(10, 10, 10, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 26px rgba(0, 0, 0, 0.45));
}

#playerEditorModal .pm-action-btn:hover {
    transform: translateY(-1px);
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(46, 46, 46, 0.94) 0%, rgba(12, 12, 12, 0.99) 100%));
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.45));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#playerEditorModal .pm-action-btn.pm-action-btn-primary,
#playerEditorModal .pm-action-btn:not(.btn-secondary) {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.22));
    background: linear-gradient(180deg, #f59b33 0%, #ea6a0a 100%);
    color: #1a1108;
}

#playerEditorModal .pm-action-btn.pm-action-btn-primary:hover,
#playerEditorModal .pm-action-btn:not(.btn-secondary):hover {
    border-color: var(--cc-light-accent-border, rgba(255, 189, 102, 0.42));
    background: linear-gradient(180deg, #ffad45 0%, #f27c18 100%);
    color: #1a1108;
}

@media (max-width: 640px) {
    .modal-actions .btn,
    .btn-compact {
        flex: 1;
        width: 100%;
    }
}

.modal-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
    letter-spacing: 1px;
}

.modal-close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-close:hover {
    color: var(--danger);
}

.modal .btn-secondary {
    background: var(--cc-light-control, linear-gradient(180deg, #525252 0%, #444444 100%));
    border: 1px solid var(--cc-light-blue-border, #2f7db4);
    color: var(--cc-light-text, #f4f8ff);
}

.modal .btn-secondary:hover {
    background: linear-gradient(180deg, #626262 0%, #515151 100%);
    border-color: var(--cc-light-blue-border, #4f98c8);
    color: var(--cc-light-text, #ffffff);
}

.setup-screen button,
.game-screen button,
.modal button {
    font-weight: 700;
    -webkit-tap-highlight-color: rgba(255, 107, 53, 0.18);
    touch-action: manipulation;
    transition: transform 140ms ease, filter 140ms ease, box-shadow 140ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

#backupModal .btn-secondary,
#storageRiskConfirmModal .btn-secondary,
#createLeagueModal .btn-secondary {
    background: var(--cc-light-control, linear-gradient(180deg, #2f2f2f 0%, #1f1f1f 100%));
    border: 1px solid var(--cc-light-accent-border, #5f472f);
    color: var(--cc-light-accent, #f7d4aa);
}

#backupModal .btn-secondary:hover,
#storageRiskConfirmModal .btn-secondary:hover,
#createLeagueModal .btn-secondary:hover {
    background: var(--cc-light-control-hover, linear-gradient(180deg, #3e3e3e 0%, #282828 100%));
    border-color: var(--cc-light-accent-border, #b3773a);
    color: var(--cc-light-accent, #ffdcb1);
}

.backup-protection-modal {
    max-width: 560px;
}
.backup-protection-summary {
    display: grid;
    gap: 0.35rem;
    margin: 1rem 0 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    background: var(--cc-surface-raised);
}
.backup-protection-summary span {
    color: var(--cc-text-muted);
    font-size: 0.75rem;
}
.backup-protection-summary strong {
    color: var(--cc-text);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}
.backup-recovery-field select {
    width: 100%;
    min-height: 44px;
}
@media (max-width: 480px) {
    .backup-protection-modal {
        width: min(100% - 1.5rem, 560px);
        padding: 1.1rem;
    }
    #restoreCloudBackupSnapshotBtn {
        width: 100%;
    }
}

.setup-screen button:not(:disabled):active,
.game-screen button:not(:disabled):active,
.modal button:not(:disabled):active {
    transform: scale(0.97);
    filter: brightness(0.92);
    box-shadow: var(--cc-light-shadow, inset 0 2px 8px rgba(0, 0, 0, 0.35));
}

@media (prefers-reduced-motion: reduce) {
    .setup-screen button,
    .game-screen button,
    .modal button {
        transition: none;
    }
}

.ft-attempts {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

body.live-game-active #freeThrowModal .modal-content {
    max-width: 480px;
    border: 1px solid var(--cc-light-blue-border, #4f6397);
    border-radius: 16px;
    box-shadow: var(--cc-light-shadow, 0 26px 54px rgba(0, 0, 0, 0.56));
    background:
        var(--cc-light-surface, radial-gradient(72% 52% at 50% 14%, rgba(255, 143, 78, 0.16), transparent 72%),
        linear-gradient(180deg, rgba(29, 29, 29, 0.98), rgba(17, 17, 17, 0.98)));
}

body.live-game-active #freeThrowModal .modal-header {
    margin-bottom: 0.95rem;
}

.ft-player-score {
    color: var(--text-dim);
    font-weight: 600;
    margin-bottom: 0.5rem;
}

body.live-game-active #freeThrowModal .ft-player-score {
    color: var(--cc-light-blue, #c1d1ee);
    font-size: 0.92rem;
    letter-spacing: 0.25px;
}

.ft-player-name {
    margin-bottom: 1rem;
    color: var(--text);
    font-size: 1.8rem;
    line-height: 1.15;
}

body.live-game-active #freeThrowModal .ft-player-name {
    color: var(--cc-light-text, #f2f7ff);
    text-shadow: var(--cc-light-text-shadow, 0 6px 16px rgba(0, 0, 0, 0.36));
}

.ft-action-btn {
    flex: 1;
}

body.live-game-active #freeThrowModal .ft-attempts {
    margin-top: 1.2rem;
    gap: 12px;
}

body.live-game-active #freeThrowModal .ft-action-btn {
    min-height: 48px;
    border-radius: 10px;
    font-size: 0.95rem;
    letter-spacing: 0.7px;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(247, 250, 255, 0.18), 0 9px 20px rgba(0, 0, 0, 0.34));
}

body.live-game-active #freeThrowModal .ft-action-btn.btn {
    border-color: var(--cc-light-accent-border, #ffb070);
    background: linear-gradient(180deg, #ff9b4f 0%, #ed7729 100%);
    color: #25160c;
}

body.live-game-active #freeThrowModal .ft-action-btn.btn:hover {
    border-color: var(--cc-light-accent-border, #ffc28e);
    background: linear-gradient(180deg, #ffad68 0%, #f5883c 100%);
}

body.live-game-active #freeThrowModal .ft-action-btn.btn-danger {
    border-color: var(--cc-light-danger-border, #d67282);
    background: var(--cc-light-danger-soft, linear-gradient(180deg, #8e3442 0%, #642530 100%));
    color: var(--cc-light-text, #ffe3e8);
}

body.live-game-active #freeThrowModal .ft-action-btn.btn-danger:hover {
    border-color: var(--cc-light-danger-border, #e99aa6);
    background: var(--cc-light-danger-soft, linear-gradient(180deg, #a04453 0%, #78303c 100%));
}

/* Box Score */
.box-score {
    overflow-x: auto;
}

.play-by-play-modal-content {
    max-width: 920px;
}

.game-recap-modal-content {
    max-width: 1080px;
}

.shot-location-modal-content {
    width: min(92vw, 520px);
    max-width: 520px;
    max-height: min(84vh, 720px);
    overflow: hidden;
}

.shot-location-subtitle {
    margin-top: -0.2rem;
    margin-bottom: 0.75rem;
    color: var(--cc-light-text, #ced8ed);
    text-align: center;
}

.shot-location-validation-message {
    display: none;
    margin: -0.2rem auto 0.7rem;
    width: fit-content;
    max-width: 96%;
    padding: 0.34rem 0.62rem;
    border-radius: 999px;
    border: 1px solid var(--cc-light-danger-border, rgba(235, 120, 131, 0.56));
    background: var(--cc-light-surface, rgba(101, 28, 41, 0.34));
    color: var(--cc-light-text, #ffd8de);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
}

.shot-location-validation-message.active {
    display: block;
}

.shot-location-court-wrap {
    width: min(100%, 400px);
    margin: 0 auto;
    border: 1px solid var(--cc-light-border, #2f3a52);
    border-radius: 12px;
    background: var(--cc-light-surface, rgba(12, 12, 12, 0.8));
    overflow: hidden;
}

.cc-court-host {
    position: relative;
    width: 100%;
    aspect-ratio: 50 / 47;
    overflow: hidden;
    border-radius: inherit;
    background: #c9935e;
}

.cc-court-host.cc-court-interactive {
    cursor: crosshair;
    touch-action: manipulation;
}

.cc-court-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cc-court-lines {
    fill: none;
    stroke: rgba(255, 255, 255, 0.96);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.cc-court-lines .cc-court-dashed-line,
.cc-court-lines .cc-court-half-circle {
    stroke-dasharray: 7 7;
    opacity: 0.82;
}

.cc-court-lines .cc-court-backboard {
    stroke-width: 4;
}

.cc-court-lines .cc-court-rim {
    fill: none;
    stroke: #f35c3d;
    stroke-width: 3;
}

.cc-court-lines .cc-court-restricted {
    stroke-width: 2;
}

.cc-court-zone {
    stroke: rgba(255, 255, 255, 0.9);
    stroke-width: 1.9;
    vector-effect: non-scaling-stroke;
}

.cc-court-zone-hot {
    fill: var(--court-zone-hot);
}

.cc-court-zone-neutral {
    fill: var(--court-zone-neutral);
}

.cc-court-zone-cold {
    fill: var(--court-zone-cold);
}

.cc-court-zone-no-sample {
    fill: var(--court-zone-no-sample);
}

.cc-court-zone-label {
    fill: #fff;
    paint-order: stroke;
    stroke: rgba(7, 13, 23, 0.78);
    stroke-width: 3px;
    stroke-linejoin: round;
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
}

.cc-court-zone-label-compact {
    font-size: 9px;
}

.cc-court-zone-label-narrow {
    font-size: 7.5px;
}

.cc-court-zone-label-narrow .cc-court-zone-stat {
    font-size: 7px;
}

.cc-court-zone-stat {
    font-size: 10px;
    font-weight: 700;
}

.cc-court-shot {
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.cc-court-shot.make {
    fill: #56dd79;
    stroke: #0d6a2b;
    stroke-width: 1.5;
}

.cc-court-shot.miss {
    fill: none;
    stroke: #f35252;
    stroke-width: 3;
    stroke-linecap: round;
}

.shot-location-court-wrap .cc-court-host {
    min-height: 0;
}

.past-shot-chart-modal-content {
    width: min(92vw, 760px);
    max-width: 760px;
    max-height: min(84vh, 760px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(23, 23, 23, 0.98), rgba(10, 10, 10, 0.99)));
    box-shadow: var(--cc-light-shadow, 0 26px 48px rgba(0, 0, 0, 0.56));
}

.past-shot-chart-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    margin-bottom: 0.95rem;
}

.past-shot-chart-controls .form-group {
    margin-bottom: 0;
}

.past-shot-chart-court-wrap {
    position: relative;
    width: min(100%, 420px);
    margin: 0 auto;
    border: 1px solid var(--cc-light-border, #2f3a52);
    border-radius: 12px;
    background: var(--cc-light-surface, rgba(12, 12, 12, 0.78));
    overflow: hidden;
}

.past-shot-chart-layer {
    position: absolute;
    inset: 0;
    pointer-events: auto;
}

/* Each marker is a 28px tap target (comfortable on iPad) around a small drawn mark. */
.shot-marker {
    position: absolute;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: transform 0.14s ease, filter 0.14s ease;
    -webkit-tap-highlight-color: transparent;
}

.shot-marker::before,
.shot-marker::after {
    content: '';
    grid-area: 1 / 1;
}

.shot-marker:hover,
.shot-marker:focus-visible,
.shot-marker.is-active {
    transform: translate(-50%, -50%) scale(1.12);
    filter: drop-shadow(0 0 5px rgba(255, 210, 160, 0.6));
}

.shot-marker:focus-visible {
    outline: 2px solid var(--cc-light-accent-border, rgba(255, 196, 124, 0.88));
    outline-offset: 1px;
}

.shot-marker.make::before {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 1px solid var(--cc-light-success-border, #58c66a);
    background: rgba(65, 182, 88, 0.35);
    box-shadow: var(--cc-light-shadow, 0 0 0 1px rgba(8, 18, 9, 0.5));
}

/* A miss is two drawn strokes, so its size never depends on the font. */
.shot-marker.miss::before,
.shot-marker.miss::after {
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background: var(--cc-light-danger, #ef5454);
    transform: rotate(45deg);
}

.shot-marker.miss::after {
    transform: rotate(-45deg);
}

/* Shots on top of each other become one numbered badge; tapping it lists every shot in it. */
.shot-marker.cluster {
    width: 24px;
    height: 24px;
    border: 2px solid var(--cc-light-surface, #111);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.shot-marker.cluster::before,
.shot-marker.cluster::after {
    content: none;
}

.shot-marker.cluster.make {
    background: #2f9e57;
}

.shot-marker.cluster.miss {
    background: #c94545;
}

.shot-marker.cluster.mixed {
    background: #c9851f;
}

.past-shot-chart-empty {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0.5rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 167, 92, 0.5));
    background: var(--cc-light-surface, rgba(19, 12, 8, 0.82));
    color: var(--cc-light-accent, #ffc690);
    font-size: 0.85rem;
}

.past-shot-chart-footer {
    margin-top: 0.8rem;
    color: var(--cc-light-text, #f4f8ff);
    font-weight: 700;
    text-align: center;
    flex-shrink: 0;
}

.past-shot-chart-marker-info {
    display: none;
    margin-top: 0.62rem;
    padding: 0.4rem 0.62rem;
    border: 1px solid var(--cc-light-blue-border, rgba(130, 157, 214, 0.42));
    border-radius: 999px;
    background: var(--cc-light-surface, rgba(33, 33, 33, 0.72));
    color: var(--cc-light-text, #d7e2fb);
    font-size: 0.84rem;
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
}

.past-shot-chart-marker-info.active {
    display: block;
}

@media (max-width: 760px) {
    .past-shot-chart-controls {
        grid-template-columns: 1fr;
    }
}

.game-recap-quarter-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
    gap: 0.45rem;
    margin-bottom: 0.95rem;
}

.game-recap-tab {
    min-height: 38px;
    border-radius: 8px;
    background: var(--cc-light-surface, linear-gradient(180deg, #212121, #161616));
    border: 1px solid var(--cc-light-border, #2d3545);
    color: var(--cc-light-text, #dbe3f4);
    font-size: 0.85rem;
    font-weight: 700;
}

.game-recap-tab.active {
    background: linear-gradient(180deg, #ff8a32, #e16f1f);
    border-color: var(--cc-light-accent-border, #ff9f55);
    color: var(--cc-light-text, #fff8ef);
}

.game-recap-tools {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: 0.95rem;
}

.game-recap-sort-label {
    color: var(--cc-light-text, #e4ebfb);
    font-weight: 700;
    font-size: 0.85rem;
}

.game-recap-sort-toggle {
    width: 56px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid var(--cc-light-border, #4a566f);
    background: var(--cc-light-control, linear-gradient(180deg, #313131, #222222));
    position: relative;
    padding: 0;
}

.game-recap-sort-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f9f9f9;
    transition: transform 0.18s ease;
}

.game-recap-sort-toggle.latest-first {
    background: linear-gradient(180deg, #f5b74f, #d5921f);
    border-color: var(--cc-light-accent-border, #f0c77a);
}

.game-recap-sort-toggle.latest-first::after {
    transform: translateX(26px);
}

.game-recap-list {
    border: 1px solid var(--cc-light-border, #2f3747);
    border-radius: 12px;
    max-height: 54vh;
    overflow-y: auto;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(12, 12, 12, 0.9), rgba(19, 19, 19, 0.95)));
    padding: 0.7rem;
}

.game-recap-sides {
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    gap: 0.7rem;
    align-items: center;
    margin-bottom: 0.55rem;
    padding: 0 0.2rem;
}

.game-recap-side-label {
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.25px;
    color: var(--cc-light-blue, #98a6c2);
}

.game-recap-side-label.home {
    text-align: right;
    color: var(--cc-light-accent, #ffd7b2);
}

.game-recap-side-label.center {
    text-align: center;
}

.game-recap-side-label.away {
    text-align: left;
    color: var(--cc-light-text, #c5e8ff);
}

.game-recap-team-code {
    font-size: 0.86rem;
    font-weight: 800;
    opacity: 0.95;
}

.game-recap-team-name {
    font-size: 1.05rem;
    font-weight: 900;
    color: inherit;
}

.game-recap-side-label.home .game-recap-team-name {
    color: var(--cc-light-accent, #ffd7b2);
}

.game-recap-side-label.away .game-recap-team-name {
    color: var(--cc-light-text, #c5e8ff);
}

.game-recap-team-side {
    font-size: 0.78rem;
    font-weight: 700;
    opacity: 0.86;
}

.game-recap-period-heading {
    text-align: center;
    margin: 0.5rem 0;
    color: var(--cc-light-accent, #ffcf97);
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.game-recap-row {
    display: grid;
    grid-template-columns: 1fr 90px 1fr;
    gap: 0.7rem;
    align-items: center;
    padding: 0.38rem 0.2rem;
}

.game-recap-row + .game-recap-row {
    border-top: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.05));
}

.game-recap-side {
    min-height: 20px;
    font-size: 0.92rem;
    line-height: 1.2;
}

.game-recap-side.home {
    text-align: right;
    color: var(--cc-light-text, #f4f7ff);
}

.game-recap-side.away {
    text-align: left;
    color: var(--cc-light-text, #e4edff);
}

.game-recap-player {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
}

.game-recap-action {
    margin-top: 0.12rem;
    color: var(--cc-light-subtle, #a5aec2);
    font-size: 0.86rem;
    line-height: 1.25;
}

.game-recap-row.scoring .game-recap-action {
    color: var(--cc-light-accent, #ffcf97);
    font-weight: 600;
}

.game-recap-row.scoring .game-recap-score {
    color: var(--cc-light-accent, #ffcf97);
    font-size: 0.92rem;
}

.game-recap-center {
    text-align: center;
}

.game-recap-time {
    color: var(--cc-light-subtle, #a5aec2);
    font-size: 0.8rem;
    font-weight: 700;
}

.game-recap-score {
    color: var(--cc-light-text, #d7deef);
    font-size: 0.82rem;
    font-weight: 700;
}

.game-recap-empty {
    text-align: center;
    color: var(--text-dim);
    padding: 1rem;
}

.play-by-play-controls {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.play-by-play-controls label {
    color: var(--text-dim);
    font-size: 0.86rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.45px;
}

.play-by-play-controls select {
    width: auto;
    min-width: 180px;
}

.play-by-play-sort-btn {
    width: auto;
    min-width: 44px;
    min-height: 40px;
    padding: 0.4rem 0.55rem;
    border-radius: 10px;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
}

.play-by-play-list {
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    max-height: 56vh;
    overflow-y: auto;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(26, 26, 26, 0.88), rgba(14, 14, 14, 0.96)));
}

.play-by-play-group {
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
}

.play-by-play-group:last-child {
    border-bottom: none;
}

.play-by-play-group-title {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(90deg, rgba(255, 126, 31, 0.18), rgba(255, 126, 31, 0.06));
    color: var(--cc-light-accent, #ffdcb8);
    font-size: 0.84rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.action-btn.miss-shot {
    background: linear-gradient(180deg, #ef4444 0%, #b91c1c 100%);
    border-color: var(--cc-light-danger-border, #f87171);
    color: var(--cc-light-text, #fff1f1);
}

.action-btn.rebound-action {
    background: var(--cc-light-control, #2c2c2c);
    border-color: var(--cc-light-blue-border, #142f52);
}

.action-btn[data-action="turnovers-1"] {
    background: var(--cc-light-control, #1d1d1d);
    border-color: var(--cc-light-blue-border, #0f1f38);
}

.play-row {
    display: grid;
    grid-template-columns: 72px 1fr auto;
    gap: 0.6rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    border-top: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.06));
}

.play-row:first-child {
    border-top: none;
}

.play-row-time {
    color: var(--cc-light-muted, #9aa3b7);
    font-size: 0.82rem;
    font-weight: 700;
}

.play-row-text {
    font-size: 0.92rem;
    color: var(--cc-light-text, #f3f6fb);
}

.play-row-score {
    min-width: 0;
}

.play-row-scoreboard {
    display: grid;
    gap: 0.1rem;
    justify-items: stretch;
}

.play-row-score-head,
.play-row-score-values {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    justify-items: center;
}

.play-row-score-head span,
.play-row-score-values span {
    min-width: 2ch;
    text-align: center;
}

.play-row-score-values {
    font-variant-numeric: tabular-nums;
    color: var(--cc-light-text, #d9deea);
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.play-row-score-head {
    color: var(--cc-light-muted, #8f99b0);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.45px;
}

.play-row-badge {
    display: inline-block;
    margin-left: 0.45rem;
    padding: 0.1rem 0.36rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: var(--cc-light-surface, #404040);
    color: var(--cc-light-text, #dce6ff);
}

.play-row-badge.home {
    background: rgba(255, 126, 31, 0.24);
    color: var(--cc-light-accent, #ffd7b2);
}

.play-row-badge.away {
    background: rgba(157, 157, 157, 0.24);
    color: var(--cc-light-text, #c5e8ff);
}

.play-by-play-empty {
    padding: 1.1rem;
    color: var(--text-dim);
    font-size: 0.9rem;
}

body.live-game-active #boxScoreModal .modal-content.setup-surface {
    border: 1px solid var(--cc-light-blue-border, #4f6397);
    box-shadow: var(--cc-light-shadow, 0 28px 58px rgba(0, 0, 0, 0.56));
    background:
        var(--cc-light-surface, radial-gradient(75% 58% at 50% 14%, rgba(255, 143, 78, 0.16), transparent 72%),
        linear-gradient(180deg, rgba(31, 31, 31, 0.98), rgba(17, 17, 17, 0.98)));
}

body.live-game-active #boxScoreModal .modal-header {
    margin-bottom: 1.05rem;
}

.box-score-team-heading {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1.1px;
    font-size: 1.42rem;
    margin-bottom: 0.56rem;
    text-transform: uppercase;
}

.box-score-team-heading.home {
    color: var(--cc-light-accent, #ffc798);
}

.box-score-team-heading.away {
    color: var(--cc-light-blue, #b8deff);
    margin-top: 1.3rem;
}

#boxScoreModal .box-score {
    border: 1px solid var(--cc-light-blue-border, #435b8f);
    border-radius: 12px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(24, 24, 24, 0.92), rgba(14, 14, 14, 0.94)));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(223, 236, 255, 0.09), 0 11px 26px rgba(1, 8, 21, 0.4));
}

#boxScoreModal .stats-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--cc-light-control, linear-gradient(180deg, #3b3b3b, #2b2b2b));
    border-bottom: 1px solid var(--cc-light-blue-border, #5f7db8);
    color: var(--cc-light-text, #dbe8ff);
    font-weight: 800;
}

#boxScoreModal .stats-table tbody tr:nth-child(odd) {
    background: var(--cc-light-surface, rgba(27, 27, 27, 0.62));
}

#boxScoreModal .stats-table tbody tr:nth-child(even) {
    background: var(--cc-light-surface, rgba(19, 19, 19, 0.58));
}

#boxScoreModal .stats-table tr:hover {
    background: rgba(80, 80, 80, 0.36);
}

#boxScoreModal .stats-table td {
    border-bottom-color: var(--cc-light-blue-border, rgba(122, 143, 192, 0.26));
}

#boxScoreModal .stats-table .player-name-col {
    font-weight: 700;
    color: var(--cc-light-text, #f3f7ff);
}

.box-score-actions {
    margin-top: 1.2rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.72rem;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-modal-content {
    border: 1px solid var(--cc-light-blue-border, #4f6397);
    box-shadow: var(--cc-light-shadow, 0 28px 58px rgba(0, 0, 0, 0.56));
    background:
        var(--cc-light-surface, radial-gradient(75% 58% at 50% 14%, rgba(255, 143, 78, 0.16), transparent 72%),
        linear-gradient(180deg, rgba(31, 31, 31, 0.98), rgba(17, 17, 17, 0.98)));
}

body.live-game-active #playByPlayModal:not(.past-mode) .past-game-meta {
    margin-top: -0.55rem;
    margin-bottom: 0.78rem;
    color: var(--cc-light-blue, #bdcbea);
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-controls {
    padding: 0.62rem;
    border: 1px solid var(--cc-light-blue-border, #455b8d);
    border-radius: 11px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(30, 30, 30, 0.92), rgba(21, 21, 21, 0.92)));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(221, 235, 255, 0.08));
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-controls label {
    color: var(--cc-light-text, #d0def8);
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-controls select {
    background: var(--cc-light-surface, linear-gradient(180deg, #3e3e3e 0%, #2d2d2d 100%));
    border-color: var(--cc-light-blue-border, #6888c7);
    color: var(--cc-light-text, #f1f6ff);
    font-weight: 700;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-sort-btn {
    min-width: 48px;
    border: 1px solid var(--cc-light-blue-border, #7aa1de);
    background: var(--cc-light-control, linear-gradient(180deg, #4e4e4e, #3c3c3c));
    color: var(--cc-light-text, #edf5ff);
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(239, 246, 255, 0.14), 0 7px 14px rgba(0, 0, 0, 0.3));
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-list {
    border: 1px solid var(--cc-light-blue-border, #485f93);
    border-radius: 13px;
    max-height: 58vh;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(22, 22, 22, 0.94), rgba(15, 15, 15, 0.96)));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(222, 235, 255, 0.08), 0 12px 28px rgba(1, 7, 19, 0.42));
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-group-title {
    padding: 0.58rem 0.85rem;
    background: linear-gradient(90deg, rgba(255, 150, 89, 0.36), rgba(255, 150, 89, 0.16));
    color: var(--cc-light-text, #fff0dd);
    border-bottom: 1px solid var(--cc-light-accent-border, rgba(255, 190, 142, 0.44));
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row {
    grid-template-columns: 74px 1fr auto;
    gap: 0.7rem;
    padding: 0.7rem 0.88rem;
    border-top-color: var(--cc-light-blue-border, rgba(122, 143, 192, 0.28));
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-time {
    color: var(--cc-light-blue, #bbcae7);
    font-size: 0.8rem;
    letter-spacing: 0.2px;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-text {
    color: var(--cc-light-text, #f3f8ff);
    line-height: 1.32;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-score {
    min-width: 0;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-scoreboard {
    padding: 0.2rem 0.45rem;
    border: 1px solid var(--cc-light-blue-border, rgba(105, 130, 186, 0.52));
    border-radius: 8px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(44, 44, 44, 0.86), rgba(28, 28, 28, 0.88)));
    justify-items: start;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-score-head {
    color: var(--cc-light-blue, #a9bddf);
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-score-values {
    color: var(--cc-light-text, #f4f8ff);
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-badge {
    border: 1px solid var(--cc-light-blue-border, rgba(153, 175, 220, 0.52));
    background: var(--cc-light-surface, rgba(65, 65, 65, 0.65));
    color: var(--cc-light-text, #e1ebff);
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-badge.home {
    border-color: var(--cc-light-accent-border, rgba(255, 177, 129, 0.64));
    background: rgba(255, 144, 72, 0.24);
    color: var(--cc-light-accent, #ffd8b5);
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-badge.away {
    border-color: var(--cc-light-blue-border, rgba(144, 196, 255, 0.64));
    background: rgba(152, 152, 152, 0.24);
    color: var(--cc-light-text, #d3ecff);
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-empty {
    color: var(--cc-light-blue, #c4d2ef);
}

body.live-game-active #timeoutModal .timeout-modal-content {
    border: 1px solid var(--cc-light-blue-border, #4f6397);
    box-shadow: var(--cc-light-shadow, 0 26px 54px rgba(0, 0, 0, 0.56));
    background:
        var(--cc-light-surface, radial-gradient(72% 52% at 50% 14%, rgba(255, 143, 78, 0.16), transparent 72%),
        linear-gradient(180deg, rgba(29, 29, 29, 0.98), rgba(17, 17, 17, 0.98)));
}

body.live-game-active #timeoutModal .timeout-modal-subtitle {
    color: var(--cc-light-blue, #bfd0ee);
}

body.live-game-active #timeoutModal .timeout-choice-card {
    border: 1px solid var(--cc-light-blue-border, #4a5f91);
    border-radius: 12px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(42, 42, 42, 0.94), rgba(25, 25, 25, 0.95)));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(225, 237, 255, 0.08), 0 9px 20px rgba(1, 8, 21, 0.34));
}

body.live-game-active #timeoutModal .timeout-choice-card:hover {
    border-color: var(--cc-light-blue-border, #87a8e6);
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(56, 56, 56, 0.96), rgba(36, 36, 36, 0.96)));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(237, 245, 255, 0.12), 0 12px 24px rgba(1, 8, 21, 0.38));
}

body.live-game-active #timeoutModal .timeout-choice-team {
    color: var(--cc-light-text, #f3f7ff);
}

body.live-game-active #timeoutModal .timeout-choice-count {
    color: var(--cc-light-blue, #b8c9e8);
}

body.live-game-active #timeoutModal .timeout-dot {
    background: rgba(175, 175, 175, 0.36);
}

body.live-game-active #timeoutModal .timeout-dot.used {
    background: linear-gradient(180deg, #ff9b55, #f0711d);
}

body.live-game-active #timeoutModal .timeout-modal-note {
    color: var(--cc-light-accent, #ffcc9a);
}

body.live-game-active #boxScoreModal .box-score,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(122, 152, 214, 0.72) rgba(12, 18, 35, 0.7);
}

body.live-game-active #boxScoreModal .box-score::-webkit-scrollbar,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-list::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

body.live-game-active #boxScoreModal .box-score::-webkit-scrollbar-track,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-list::-webkit-scrollbar-track {
    background: var(--cc-light-surface, rgba(18, 18, 18, 0.7));
    border-radius: 999px;
}

body.live-game-active #boxScoreModal .box-score::-webkit-scrollbar-thumb,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(162, 162, 162, 0.9), rgba(125, 125, 125, 0.86));
    border-radius: 999px;
}

@media (max-width: 640px) {
    .play-row {
        grid-template-columns: 62px 1fr;
    }

    .play-row-score {
        grid-column: 1 / -1;
        margin-left: 0;
    }

    .play-row-scoreboard {
        justify-items: start;
    }

    .play-row-score-head,
    .play-row-score-values {
        justify-items: start;
    }

    .play-by-play-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .play-by-play-controls select {
        width: 100%;
    }

    .box-score-actions {
        grid-template-columns: 1fr;
    }

    .game-recap-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        padding: 0.6rem 0.2rem;
    }

    .game-recap-side.home,
    .game-recap-side.away,
    .game-recap-center {
        text-align: left;
    }

    /* Stacked layout: drop the empty side and mark away plays with an accent bar */
    .game-recap-row.home .game-recap-side.away,
    .game-recap-row.away .game-recap-side.home {
        display: none;
    }

    .game-recap-row.away {
        border-left: 3px solid var(--cc-light-border, rgba(255, 255, 255, 0.2));
        padding-left: 0.6rem;
    }

    .game-recap-center {
        display: flex;
        gap: 0.6rem;
        order: -1;
    }

    .game-recap-quarter-tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .game-recap-sides {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .game-recap-side-label.home,
    .game-recap-side-label.away,
    .game-recap-side-label.center {
        text-align: left;
    }
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.stats-table th {
    background: var(--surface-light);
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dim);
    font-weight: 600;
    border-bottom: 2px solid var(--border);
}

.stats-table th[title],
.season-analytics-shooting-table th[title] {
    text-decoration: underline dotted rgba(255, 183, 77, 0.45);
    text-underline-offset: 0.18rem;
}

.stats-table td {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.9rem;
}

.stats-table tr:hover {
    background: var(--surface-light);
}

.stats-table .player-name-col {
    font-weight: 600;
}

/* Team totals: always the last row of a box score, whatever the sort. */
.stats-table .box-score-total-row td {
    font-weight: 700;
    border-top: 2px solid var(--border);
}

#pastGameDetailModal .stats-table {
    min-width: 72rem;
    table-layout: fixed;
}

#pastGameDetailModal .past-game-box-score-wrap {
    margin-bottom: 0;
    padding: 0.9rem 1rem 1rem;
    border-radius: 18px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(22, 22, 22, 0.92), rgba(10, 10, 10, 0.96)));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 16px 34px rgba(0, 0, 0, 0.34));
}

#pastGameDetailModal .past-game-box-score-wrap::-webkit-scrollbar {
    height: 10px;
}

#pastGameDetailModal .past-game-box-score-wrap::-webkit-scrollbar-track {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.05));
    border-radius: 999px;
}

#pastGameDetailModal .past-game-box-score-wrap::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 152, 0, 0.7), rgba(214, 106, 17, 0.78));
    border-radius: 999px;
}

#pastGameDetailModal .stats-table thead th {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.56));
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.09));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
}

#pastGameDetailModal .stats-table td {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
    border-bottom-color: var(--cc-light-border, rgba(255, 255, 255, 0.07));
}

#pastGameDetailModal .stats-table tbody tr:nth-child(odd) {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.015));
}

#pastGameDetailModal .stats-table tbody tr:nth-child(even) {
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.18));
}

#pastGameDetailModal .stats-table tr:hover {
    background: rgba(255, 152, 0, 0.08);
}

#pastGameDetailModal .stats-table .player-name-col,
#pastGameDetailModal .stats-table td:first-child {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96));
    font-weight: 700;
}

#pastGameDetailModal .stats-table .player-name-col {
    overflow: hidden;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#boxScoreModal .stats-table {
    table-layout: fixed;
    margin-bottom: 0;
}

#pastGameDetailModal .stats-table th,
#pastGameDetailModal .stats-table td {
    text-align: center;
}

#boxScoreModal .stats-table th,
#boxScoreModal .stats-table td {
    text-align: center;
}

#pastGameDetailModal .stats-table th:first-child,
#pastGameDetailModal .stats-table td:first-child {
    width: 4.5rem;
    text-align: center;
}

#pastGameDetailModal .stats-table th:nth-child(2),
#pastGameDetailModal .stats-table td:nth-child(2) {
    width: 15rem;
    text-align: left;
}

#boxScoreModal .stats-table th:first-child,
#boxScoreModal .stats-table td:first-child {
    width: 37%;
    text-align: left;
}

#pastGameDetailModal .stats-table th:not(:first-child),
#pastGameDetailModal .stats-table td:not(:first-child) {
    width: 4.4rem;
}

#pastGameDetailModal .stats-table th:nth-child(2),
#pastGameDetailModal .stats-table td:nth-child(2) {
    width: 15rem;
}

#boxScoreModal .stats-table th:not(:first-child),
#boxScoreModal .stats-table td:not(:first-child) {
    width: 7%;
}

#boxScoreModal.editing .stats-table,
#pastGameDetailModal.editing .stats-table {
    table-layout: auto;
}

#boxScoreModal.editing .stats-table th:first-child,
#boxScoreModal.editing .stats-table td:first-child,
#pastGameDetailModal.editing .stats-table th:first-child,
#pastGameDetailModal.editing .stats-table td:first-child {
    width: 3rem;
    min-width: 0;
    padding-left: 8px;
    padding-right: 8px;
    white-space: nowrap;
    text-align: center;
}

#boxScoreModal.editing .stats-table th:not(:first-child),
#boxScoreModal.editing .stats-table td:not(:first-child),
#pastGameDetailModal.editing .stats-table th:not(:first-child),
#pastGameDetailModal.editing .stats-table td:not(:first-child) {
    width: auto;
    min-width: 78px;
}

.substitution-modal-content {
    max-width: 1080px;
    width: min(96vw, 1080px);
    max-height: 88vh;
    overflow-x: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cc-light-blue-border, #4a5d8f);
    box-shadow: var(--cc-light-shadow, 0 24px 56px rgba(0, 0, 0, 0.55));
}

.sub-modal-team {
    color: var(--cc-light-blue, #c3d2ef);
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-top: -0.8rem;
    margin-bottom: 1rem;
}

.substitution-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.95rem;
    min-height: 0;
    align-items: start;
}

.sub-column {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(34, 34, 34, 0.94), rgba(21, 21, 21, 0.96)));
    border: 1px solid var(--cc-light-blue-border, #435888);
    border-radius: 14px;
    padding: 0.75rem;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(224, 236, 255, 0.09), 0 12px 24px rgba(1, 8, 21, 0.34));
}

.out-column {
    border-top: 2px solid var(--cc-light-danger-border, rgba(229, 90, 101, 0.88));
}

.in-column {
    border-top: 2px solid var(--cc-light-success-border, rgba(46, 208, 151, 0.92));
}

.sub-column-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    color: var(--cc-light-text, #f5f8ff);
    margin-bottom: 0.6rem;
    font-size: 1.28rem;
    line-height: 1;
}

.sub-player-list {
    display: grid;
    gap: 0.45rem;
}

.out-column .sub-player-list {
    max-height: min(58vh, 540px);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.in-column .sub-player-list {
    max-height: min(58vh, 540px);
    overflow-y: auto;
    padding-right: 0.25rem;
}

.sub-player-btn {
    border: 1px solid var(--cc-light-blue-border, #4b6197);
    border-radius: 10px;
    background: var(--cc-light-control, linear-gradient(180deg, rgba(45, 45, 45, 0.96), rgba(29, 29, 29, 0.96)));
    color: var(--cc-light-text, #f1f5ff);
    text-align: left;
    padding: 0.68rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    cursor: pointer;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(228, 239, 255, 0.08), 0 5px 12px rgba(2, 8, 21, 0.3));
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.sub-player-btn:hover {
    border-color: var(--cc-light-accent-border, #ffb882);
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(58, 58, 58, 0.98), rgba(36, 36, 36, 0.98)));
    transform: translateY(-1px);
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(241, 247, 255, 0.1), 0 8px 16px rgba(1, 8, 22, 0.34));
}

.sub-player-number {
    min-width: 2.9rem;
    border-radius: 6px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(14, 14, 14, 0.95), rgba(10, 10, 10, 0.98)));
    border: 1px solid var(--cc-light-blue-border, rgba(102, 129, 183, 0.54));
    color: var(--primary);
    font-weight: 800;
    font-size: 1.02rem;
    text-align: center;
    padding: 0.3rem 0.35rem;
}

.sub-player-name {
    font-weight: 700;
    line-height: 1.2;
}

.sub-player-btn.selected-out {
    border-color: var(--cc-light-danger-border, #f08a94);
    background: var(--cc-light-accent-soft, linear-gradient(180deg, rgba(139, 48, 64, 0.54), rgba(98, 35, 49, 0.58)));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 215, 219, 0.18), 0 0 0 1px rgba(236, 131, 142, 0.34), 0 10px 20px rgba(0, 0, 0, 0.28));
}

.sub-player-btn.selected-in {
    border-color: var(--cc-light-success-border, #5de0b0);
    background: var(--cc-light-accent-soft, linear-gradient(180deg, rgba(27, 124, 89, 0.5), rgba(18, 89, 63, 0.56)));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(208, 255, 235, 0.16), 0 0 0 1px rgba(93, 224, 176, 0.3), 0 10px 20px rgba(0, 0, 0, 0.28));
}

.sub-pairings {
    margin-top: 0.85rem;
    border: 1px solid var(--cc-light-blue-border, #4a5f95);
    border-radius: 10px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(20, 20, 20, 0.78), rgba(14, 14, 14, 0.78)));
    padding: 0.6rem 0.7rem;
    min-height: 44px;
}

.sub-pairing-row {
    font-size: 0.84rem;
    color: var(--cc-light-text, #dee7fb);
    line-height: 1.35;
}

.sub-modal-helper {
    margin-top: 0.75rem;
    color: var(--cc-light-blue, #bac9e6);
    font-size: 0.84rem;
    line-height: 1.35;
}

.substitution-modal-content .modal-actions {
    margin-top: 0.85rem;
    padding-top: 0.82rem;
    border-top: 1px solid var(--cc-light-blue-border, #445983);
    position: sticky;
    bottom: 0;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(22, 22, 22, 0.08), rgba(21, 21, 21, 0.98) 42%));
}

.sub-player-btn:focus-visible {
    outline: 2px solid var(--cc-light-blue-border, rgba(144, 191, 255, 0.96));
    outline-offset: 1px;
}

.period-lineup-reminder-content {
    max-width: 480px;
    border: 1px solid var(--cc-light-blue-border, #4f6397);
    box-shadow: var(--cc-light-shadow, 0 24px 52px rgba(0, 0, 0, 0.5));
    background:
        var(--cc-light-surface, radial-gradient(68% 46% at 50% 12%, rgba(255, 143, 78, 0.15), transparent 72%),
        linear-gradient(180deg, rgba(29, 29, 29, 0.98), rgba(17, 17, 17, 0.98)));
}

.period-lineup-reminder-subtitle {
    margin-top: -0.2rem;
    margin-bottom: 0.85rem;
    color: var(--cc-light-blue, #c8d7f2);
    line-height: 1.35;
}

.lineup-modal-content {
    max-width: 620px;
    border: 1px solid var(--cc-light-blue-border, #4f6397);
    box-shadow: var(--cc-light-shadow, 0 24px 52px rgba(0, 0, 0, 0.5));
    background:
        var(--cc-light-surface, radial-gradient(68% 46% at 50% 12%, rgba(255, 143, 78, 0.15), transparent 72%),
        linear-gradient(180deg, rgba(29, 29, 29, 0.98), rgba(17, 17, 17, 0.98)));
}

.lineup-modal-subtitle {
    margin-top: -0.25rem;
    margin-bottom: 0.55rem;
    color: var(--cc-light-blue, #c8d7f2);
}

.lineup-count-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    margin-bottom: 0.65rem;
    padding: 0.2rem 0.52rem;
    border-radius: 999px;
    border: 1px solid var(--cc-light-blue-border, #5f79b2);
    background: var(--cc-light-surface, rgba(36, 36, 36, 0.88));
    color: var(--cc-light-text, #e6efff);
    font-size: 0.78rem;
    font-weight: 800;
}

.lineup-player-list {
    display: grid;
    gap: 0.45rem;
    max-height: min(68vh, 560px);
    overflow-y: auto;
    padding-right: 0.25rem;
}

@media (min-width: 700px) {
    .lineup-modal-content {
        max-width: 760px;
    }

    .lineup-player-list {
        display: block;
        column-count: 2;
        column-gap: 0.75rem;
    }

    .lineup-player-btn {
        break-inside: avoid;
        margin-bottom: 0.5rem;
    }
}

.lineup-player-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.62rem;
    padding: 0.62rem 0.78rem;
    border-radius: 10px;
    border: 1px solid var(--cc-light-blue-border, #4b6197);
    background: var(--cc-light-control, linear-gradient(180deg, rgba(45, 45, 45, 0.96), rgba(29, 29, 29, 0.96)));
    color: var(--cc-light-text, #f1f5ff);
    text-align: left;
    cursor: pointer;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(228, 239, 255, 0.08), 0 5px 12px rgba(2, 8, 21, 0.3));
    transition: all 0.15s ease;
}

.lineup-player-btn:hover {
    border-color: var(--cc-light-blue-border, #8db1f0);
    transform: translateY(-1px);
}

.lineup-player-btn.selected {
    border-color: var(--cc-light-success-border, #5de0b0);
    background: var(--cc-light-accent-soft, linear-gradient(180deg, rgba(27, 124, 89, 0.5), rgba(18, 89, 63, 0.56)));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(208, 255, 235, 0.16), 0 0 0 1px rgba(93, 224, 176, 0.3), 0 10px 20px rgba(0, 0, 0, 0.28));
}

.lineup-player-btn:focus-visible {
    outline: 2px solid var(--cc-light-blue-border, rgba(144, 191, 255, 0.96));
    outline-offset: 1px;
}

.lineup-player-number {
    min-width: 2.75rem;
    border-radius: 7px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(14, 14, 14, 0.95), rgba(10, 10, 10, 0.98)));
    border: 1px solid var(--cc-light-blue-border, rgba(102, 129, 183, 0.54));
    color: var(--primary);
    font-weight: 800;
    text-align: center;
    padding: 0.24rem 0.32rem;
}

.lineup-player-name {
    font-weight: 700;
}

.out-column .sub-player-list,
.in-column .sub-player-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(122, 152, 214, 0.64) rgba(12, 18, 35, 0.68);
}

.out-column .sub-player-list::-webkit-scrollbar,
.in-column .sub-player-list::-webkit-scrollbar {
    width: 9px;
}

.out-column .sub-player-list::-webkit-scrollbar-track,
.in-column .sub-player-list::-webkit-scrollbar-track {
    background: var(--cc-light-surface, rgba(18, 18, 18, 0.68));
    border-radius: 999px;
}

.out-column .sub-player-list::-webkit-scrollbar-thumb,
.in-column .sub-player-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(162, 162, 162, 0.86), rgba(125, 125, 125, 0.82));
    border-radius: 999px;
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .substitution-modal-content {
        width: min(96vw, 760px);
        max-height: 92vh;
        padding: 1.4rem;
    }

    .sub-column {
        padding: 0.72rem;
    }

    .out-column .sub-player-list,
    .in-column .sub-player-list {
        max-height: min(54vh, 420px);
        overflow-y: auto;
        padding-right: 0.2rem;
    }

    .sub-player-btn {
        padding: 0.78rem 0.9rem;
    }

    .sub-player-number {
        min-width: 3.1rem;
    }

    .sub-player-name {
        font-size: 0.93rem;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .substitution-modal-content {
        width: min(96vw, 990px);
        max-height: 90vh;
        padding: 1.5rem;
    }

    .out-column .sub-player-list,
    .in-column .sub-player-list {
        max-height: min(52vh, 400px);
        overflow-y: auto;
        padding-right: 0.2rem;
    }

    .sub-player-btn {
        padding: 0.74rem 0.9rem;
    }
}

/* Responsive */
@media (min-width: 768px) and (max-width: 1024px) {
    .game-screen {
        padding-top: calc(var(--scoreboard-height, 190px) + 6px);
        padding-bottom: 84px;
    }

    #homeOnCourt {
        gap: 0.35rem;
    }

    #homeOnCourt .player-card {
        padding: 0.62rem;
    }

    #homeOnCourt .player-info {
        margin-bottom: 0.45rem;
    }

    #homeOnCourt .player-name {
        font-size: 0.95rem;
    }

    #homeOnCourt .player-number {
        font-size: 1.24rem;
        padding: 0.3rem 0.56rem;
    }

    #homeOnCourt .player-meta {
        margin-bottom: 0.35rem;
        font-size: 0.74rem;
    }

    #homeOnCourt .action-btn {
        padding: 0.58rem 0.4rem;
        font-size: 0.78rem;
        letter-spacing: 0.25px;
    }

    #homeOnCourt .action-btn.primary {
        padding: 0.62rem 0.4rem;
    }

}

@media (max-width: 1024px) {

    .save-status-wrap {
        flex-shrink: 0;
    }

    .game-screen {
        padding-top: calc(var(--scoreboard-height, 190px) + 6px);
    }

    .scoreboard-bar {
        padding: 0.8rem 0.9rem 0.7rem;
    }

    #homeOnCourt {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    .score-display {
        grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
        gap: 0.9rem;
    }

    #homeScore,
    #awayScore {
        font-size: 4.6rem;
    }
    
    .clock {
        font-size: 2.4rem;
    }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (min-width: 1025px) and (max-width: 1366px) {
    .game-screen {
        padding-top: calc(var(--scoreboard-height, 190px) + 6px);
        padding-bottom: 84px;
    }

    .scoreboard-bar {
        padding: 0.8rem 0.9rem 0.7rem;
    }

    .score-display {
        grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr);
        gap: 1rem;
    }

    #homeScore,
    #awayScore {
        font-size: 4.8rem;
    }

    .clock {
        font-size: 2.5rem;
    }
}

@media (max-width: 767px) {

    .start-game-screen {
        max-width: 100%;
        align-self: flex-start;
    }

    .start-game-screen .form-section.compact {
        gap: 0.6rem;
        margin-bottom: 0.8rem;
    }

    .setup-screen {
        padding: 1rem;
    }

    .top-bar {
        flex-direction: column;
    }

    #homeOnCourt {
        grid-template-columns: 1fr;
    }

    .scoreboard-bar {
        padding: 0.75rem 0.8rem 0.65rem;
    }

    .score-display {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .team-score {
        width: 100%;
        min-height: 88px;
    }

    #homeScore,
    #awayScore {
        font-size: 4rem;
    }

    .period-clock {
        width: 100%;
    }

    .clock {
        font-size: 2.2rem;
    }
    
    .manager-actions,
    .manager-item {
        flex-direction: column;
        align-items: stretch;
    }

    #startGameScreen .form-section.compact,
    #playerManagementScreen .form-section.compact,
    #leagueHubScreen .form-section.compact {
        padding: 0.8rem 0.78rem;
    }

    .pm-toolbar-actions,
    .pm-toolbar-filters {
        grid-template-columns: 1fr;
    }

    #startGameScreen .icon-nav-btn,
    #playerManagementScreen .icon-nav-btn,
    #leagueHubScreen .icon-nav-btn {
        width: 42px;
        height: 35px;
    }

    #pastGamesModal .modal-content.setup-surface,
    #pastGameInfoModal .modal-content.setup-surface,
    #pastGameDetailModal .modal-content.setup-surface,
    #pastGameShotChartModal .modal-content.setup-surface,
    #backupModal .modal-content.setup-surface,
    #storageRiskConfirmModal .modal-content.setup-surface,
    #createLeagueModal .modal-content.setup-surface,
    #playerEditorModal .modal-content.setup-surface,
    #replaceRosterModal .modal-content.setup-surface,
    #gameRecapModal .modal-content.setup-surface, #gameReportModal .modal-content.setup-surface, #playerReportModal .modal-content.setup-surface,
    #playByPlayModal.past-mode .modal-content.setup-surface,
    #changelogModal .modal-content {
        width: 94%;
        padding: 1.15rem 1rem;
    }

    #pastGamesModal .modal-header,
    #pastGameInfoModal .modal-header,
    #pastGameDetailModal .modal-header,
    #pastGameShotChartModal .modal-header,
    #backupModal .modal-header,
    #storageRiskConfirmModal .modal-header,
    #createLeagueModal .modal-header,
    #changelogModal .modal-header,
    #playerEditorModal .modal-header,
    #replaceRosterModal .modal-header,
    #gameRecapModal .modal-header, #gameReportModal .modal-header, #playerReportModal .modal-header,
    #playByPlayModal.past-mode .modal-header {
        font-size: 1.6rem;
        margin-bottom: 0.8rem;
    }

    #teamManagerScreen .quick-title {
        font-size: 2rem;
    }

    #teamManagerScreen .manager-actions {
        grid-template-columns: 1fr;
    }

    #teamManagerScreen .manager-item-actions {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

}

@media (max-width: 767px) {
    .substitution-modal-content {
        max-height: 90vh;
    }

    .substitution-layout {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .out-column .sub-player-list,
    .in-column .sub-player-list {
        max-height: min(34vh, 280px);
        overflow-y: auto;
        padding-right: 0.2rem;
    }
}

@media (max-width: 1024px) {
    .player-table-wrap {
        display: none;
    }

    .player-card-list {
        display: grid;
    }
}

.hidden {
    display: none !important;
}

.storage-warning-banner {
    position: sticky;
    top: 0;
    z-index: 2000;
    width: 100%;
    padding: 0.75rem 2.75rem;
    background: var(--cc-light-surface, #7f1d1d);
    color: var(--cc-light-text, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.2));
}

.storage-warning-message {
    text-align: center;
}

.storage-warning-dismiss {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--cc-light-text, #fff);
    cursor: pointer;
    font-size: 1.45rem;
    line-height: 1;
    transform: translateY(-50%);
}

.storage-warning-dismiss:hover,
.storage-warning-dismiss:focus-visible {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.14));
    outline: none;
}

body.live-game-active .storage-warning-banner {
    display: none !important;
}

.risk-confirm-checkbox-row {
    margin-top: 0.8rem;
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.65rem 0.75rem;
    border-radius: 10px;
    border: 1px solid var(--cc-light-accent-border, #8f6b2e);
    background: rgba(255, 176, 32, 0.12);
    color: var(--cc-light-accent, #ffd691);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1.35;
}

.risk-confirm-checkbox-row input[type="checkbox"] {
    margin-top: 0.1rem;
    accent-color: #ff9a3d;
}

.save-status-chip {
    align-self: center;
    border-width: 1px;
    border-style: solid;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    appearance: none;
    -webkit-appearance: none;
    min-height: 30px;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.2));
    background: rgba(255, 152, 0, 0.1);
    color: var(--cc-light-accent, rgba(255, 215, 171, 0.96));
    font-size: 0.68rem;
    box-shadow: none;
}

/* Activity dot: always takes its space, so the chip keeps one width while it fades in and out. */
.save-status-chip::after {
    content: '';
    display: inline-block;
    width: 0.4rem;
    height: 0.4rem;
    margin-left: 0.35rem;
    border-radius: 50%;
    background: currentColor;
    vertical-align: 0.08em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.save-status-chip.busy::after {
    opacity: 0.55;
    transition-duration: 0.15s;
}

.save-status-chip.error,
.save-status-chip.risk {
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(168, 67, 38, 0.45), rgba(110, 41, 23, 0.42)));
    color: var(--cc-light-text, #ffebdc);
    border-color: var(--cc-light-accent-border, rgba(255, 150, 108, 0.72));
}

.save-status-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.save-status-chip.risk {
    cursor: pointer;
}

.save-status-chip.risk::before {
    content: '\26A0';
    margin-right: 0.22rem;
    font-size: 0.7rem;
}

.save-status-chip.risk:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 193, 143, 0.9));
    color: var(--cc-light-text, #fff1e4);
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 230, 209, 0.24), 0 8px 16px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 188, 136, 0.25));
}

.save-status-popover {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    width: min(340px, 72vw);
    padding: 0.65rem 0.7rem;
    border-radius: 10px;
    border: 1px solid var(--cc-light-accent-border, #8f6b2e);
    font-size: 0.8rem;
    line-height: 1.3;
    box-shadow: var(--cc-light-shadow, 0 10px 24px rgba(0, 0, 0, 0.45));
    z-index: 20;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(28, 28, 28, 0.98), rgba(12, 12, 12, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.09));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
}

/* Dashboard shell / shared side nav */
.dash-app-shell {
    /* Legacy dashboard names map to the shared token layer. */
    --dash-primary: #FF9800;
    --dash-secondary: #263238;
    --dash-tertiary: #FFB74D;
    --dash-neutral: #121212;
    --dash-surface: rgba(26, 26, 26, 0.88);
    --dash-surface-2: rgba(32, 32, 32, 0.78);
    --dash-border: var(--cc-border-soft);
    --dash-border-strong: var(--cc-border-soft-strong);
    --dash-text: var(--cc-text-on-dark);
    --dash-text-dim: var(--cc-text-on-dark-muted);

    width: 100%;
    max-width: 1400px;
}

.dash-content {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    min-width: 0;
}

.dash-shell.onboarding-active {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1120px;
}

.dash-shell.onboarding-active.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
}

.dash-shell.onboarding-active .dash-sidebar,
.dash-shell.onboarding-active .dash-sidebar-reopen {
    display: none !important;
}

.dash-shell.onboarding-active .dash-content,
.dash-shell.onboarding-active .dash-main,
.dash-shell.onboarding-active .onboarding-shell,
.dash-shell.onboarding-active .onboarding-card,
.dash-shell.onboarding-active .onboarding-hero,
.dash-shell.onboarding-active .onboarding-progress {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.onboarding-screen {
    width: 100%;
}

.onboarding-shell {
    display: grid;
    gap: 1rem;
}

.onboarding-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.35rem 1.4rem;
    border-radius: 20px;
    border: 1px solid var(--dash-border);
    background:
        linear-gradient(135deg, rgba(255, 152, 0, 0.14), rgba(255, 152, 0, 0.02) 42%),
        var(--dash-surface);
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.45));
}

.onboarding-kicker,
.onboarding-step-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.84));
    font-weight: 800;
}

.onboarding-title {
    margin: 0.45rem 0 0;
    font-size: clamp(1.9rem, 4vw, 3rem);
    line-height: 0.98;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

.onboarding-subtitle {
    margin: 0.7rem 0 0;
    max-width: 680px;
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.72));
    font-size: 1rem;
}

.onboarding-badge {
    border-radius: 999px;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.24));
    background: rgba(255, 183, 77, 0.1);
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.92));
    padding: 0.7rem 0.95rem;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 900;
    white-space: nowrap;
}

.onboarding-progress {
    display: grid;
    grid-template-columns: auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto minmax(24px, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.9rem 1.1rem;
    border-radius: 18px;
    border: 1px solid var(--dash-border);
    background: var(--cc-light-surface, rgba(10, 10, 10, 0.68));
}

.onboarding-progress-step {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.54));
    min-width: 0;
}

.onboarding-progress-step.is-active {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

.onboarding-progress-step.is-complete {
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.92));
}

.onboarding-progress-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.12));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.92rem;
    font-weight: 900;
    flex: 0 0 auto;
    transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}

.onboarding-progress-step.is-active .onboarding-progress-icon,
.onboarding-progress-step.is-complete .onboarding-progress-icon {
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.34));
    background: rgba(255, 152, 0, 0.14);
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.98));
    transform: translateY(-1px);
}

.onboarding-progress-label {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 800;
    white-space: nowrap;
}

.onboarding-progress-line {
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 183, 77, 0.16), rgba(255, 255, 255, 0.08));
}

.onboarding-card {
    position: relative;
    overflow: hidden;
    min-height: 520px;
    padding: 1.45rem;
    border-radius: 22px;
    border: 1px solid var(--dash-border-strong);
    background:
        var(--cc-light-surface, radial-gradient(circle at top right, rgba(255, 152, 0, 0.12), transparent 26%),
        rgba(18, 18, 18, 0.94));
    box-shadow: var(--cc-light-shadow, 0 24px 70px rgba(0, 0, 0, 0.5));
}

.onboarding-step {
    display: none;
    gap: 1.25rem;
    align-content: start;
}

.onboarding-step.is-active {
    display: grid;
    animation: onboardingStepForward 230ms ease;
}

.onboarding-card.is-transition-back .onboarding-step.is-active {
    animation-name: onboardingStepBackward;
}

.onboarding-card.is-transition-complete .onboarding-step.is-active {
    animation-duration: 520ms;
    animation-name: onboardingStepComplete;
}

.onboarding-step-copy {
    display: grid;
    gap: 0.55rem;
    max-width: 760px;
}

.onboarding-step-copy-centered {
    justify-items: center;
    text-align: center;
    margin: 0 auto;
}

.onboarding-step-title {
    margin: 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: -0.03em;
}

.onboarding-step-text {
    margin: 0;
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.72));
    font-size: 0.98rem;
    line-height: 1.55;
}

.onboarding-context {
    display: grid;
    gap: 0.3rem;
    max-width: 760px;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.18));
    border-left: 3px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.76));
    border-radius: 0 12px 12px 0;
    background: rgba(255, 152, 0, 0.055);
}

.onboarding-context strong {
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.96));
    font-size: 0.7rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.onboarding-context p,
.onboarding-field-hint {
    margin: 0;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
    font-size: 0.78rem;
    line-height: 1.45;
}

.onboarding-field-hint {
    display: block;
    margin-top: 0.35rem;
}

.onboarding-highlight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
}

.onboarding-highlight {
    display: grid;
    gap: 0.35rem;
    padding: 1rem;
    border-radius: 16px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.03));
}

.onboarding-highlight strong {
    font-size: 0.86rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.94));
}

.onboarding-highlight span {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
    line-height: 1.45;
}

.league-builder {
    display: grid;
    gap: 0.8rem;
}

.league-builder-group {
    display: grid;
    gap: 0.55rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translate3d(0, -6px, 0);
    transition: max-height 220ms ease, opacity 200ms ease, transform 220ms ease;
}

.league-builder-group.is-visible {
    max-height: 720px;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 0, 0);
}

.league-builder-group-title {
    font-size: 0.84rem;
    font-weight: 800;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

.league-builder-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.6rem;
}

.league-builder-option {
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.1));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.03));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.78));
    padding: 0.7rem 0.95rem;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, transform 140ms ease;
}

.league-builder-option:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.28));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.94));
    transform: translateY(-1px);
}

.league-builder-option.active {
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.46));
    background: rgba(255, 152, 0, 0.14);
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.98));
    box-shadow: var(--cc-light-shadow, inset 0 0 0 1px rgba(255, 183, 77, 0.08));
}

.league-builder-preview-group input[readonly] {
    letter-spacing: 0.02em;
    text-overflow: ellipsis;
}

.onboarding-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.onboarding-team-grid {
    align-items: start;
}

.onboarding-rules-grid {
    margin-top: 0.15rem;
}

.onboarding-roster-field {
    grid-column: 1 / -1;
}

.onboarding-paste-info {
    margin-bottom: 0.7rem;
}

.onboarding-screen input[type="text"],
.onboarding-screen input[type="number"],
.onboarding-screen textarea,
.onboarding-screen select {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(31, 31, 31, 0.98), rgba(12, 12, 12, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.1));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
    font-weight: 600;
}

.onboarding-screen input[type="text"]:focus,
.onboarding-screen input[type="number"]:focus,
.onboarding-screen textarea:focus,
.onboarding-screen select:focus {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(31, 31, 31, 0.98), rgba(12, 12, 12, 0.99)));
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.45));
}

.onboarding-screen select option {
    background: var(--cc-light-control, #101010);
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

.onboarding-screen .league-builder-option {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.03));
}

#createLeagueModal .league-builder-option {
    background: var(--cc-light-control, linear-gradient(180deg, rgba(31, 31, 31, 0.98), rgba(12, 12, 12, 0.99)));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.1));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.86));
}

#createLeagueModal .league-builder-option.active {
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.42));
    background: rgba(255, 152, 0, 0.12);
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.98));
}

#createLeagueModal .modal-content.setup-surface {
    width: min(92vw, 760px);
    max-height: min(88vh, 920px);
    overflow-y: auto;
}

#saveLeagueBtn:disabled,
#onboardingSaveLeagueBtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.12);
}

.onboarding-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    justify-content: flex-end;
    margin-top: auto;
}

.onboarding-actions-centered {
    justify-content: center;
}

.onboarding-message {
    border-radius: 14px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    padding: 0.8rem 0.9rem;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.86));
    line-height: 1.45;
}

.onboarding-message.error {
    border-color: var(--cc-light-danger-border, rgba(255, 98, 98, 0.24));
    background: rgba(255, 98, 98, 0.08);
    color: var(--cc-light-text, #ffd4d4);
}

.onboarding-message.success {
    border-color: var(--cc-light-success-border, rgba(88, 214, 141, 0.24));
    background: rgba(88, 214, 141, 0.08);
    color: var(--cc-light-text, #d6ffe4);
}

.onboarding-complete-mark {
    width: 5.25rem;
    height: 5.25rem;
    margin: 1rem auto 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--cc-light-success-border, rgba(88, 214, 141, 0.3));
    background: radial-gradient(circle at 30% 30%, rgba(88, 214, 141, 0.26), rgba(88, 214, 141, 0.08));
    color: var(--cc-light-success, #8dffb8);
    font-size: 2.25rem;
    font-weight: 900;
    box-shadow: var(--cc-light-shadow, 0 18px 48px rgba(0, 0, 0, 0.32));
}

@keyframes onboardingStepForward {
    from {
        opacity: 0;
        transform: translate3d(14px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes onboardingStepBackward {
    from {
        opacity: 0;
        transform: translate3d(-14px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes onboardingStepComplete {
    0% {
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.98);
    }
    45% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1.01);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@media (max-width: 1100px) {
    .onboarding-highlight-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .dash-shell.onboarding-active,
    .dash-shell.onboarding-active.sidebar-collapsed {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }

    .onboarding-hero {
        padding: 1.15rem;
    }

    .onboarding-card {
        min-height: 0;
        padding: 1.15rem;
    }

    .onboarding-form-grid,
    .onboarding-highlight-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .league-builder-options,
    .onboarding-rules-grid,
    #createLeagueModal .form-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media (max-width: 720px) {
    .dash-shell.onboarding-active,
    .dash-shell.onboarding-active.sidebar-collapsed {
        max-width: none;
    }

    .onboarding-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0.85rem;
    }

    .onboarding-progress-line {
        display: none;
    }

    .onboarding-progress-label {
        white-space: normal;
        line-height: 1.3;
    }

    #createLeagueModal .modal-content.setup-surface {
        width: 94vw;
        max-height: calc(100vh - 1rem);
        padding: 1.05rem 0.95rem;
    }

    .league-builder-options,
    .onboarding-rules-grid,
    #createLeagueModal .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .league-builder-option {
        text-align: left;
    }
}

@media (max-width: 560px) {
    .onboarding-hero {
        flex-direction: column;
    }

    .league-builder-options {
        grid-template-columns: minmax(0, 1fr);
    }

    .league-builder-option {
        text-align: left;
    }

    .onboarding-actions {
        justify-content: stretch;
    }

    .onboarding-actions .btn {
        width: 100%;
    }

    .onboarding-progress-step {
        align-items: flex-start;
    }
}

@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
    .dash-shell.onboarding-active,
    .dash-shell.onboarding-active.sidebar-collapsed {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        min-height: calc(100dvh - 2rem);
    }

    .dash-shell.onboarding-active .dash-sidebar,
    .dash-shell.onboarding-active .dash-sidebar-reopen,
    .dash-shell.onboarding-active.sidebar-collapsed .dash-sidebar-reopen {
        display: none !important;
    }

    .dash-shell.onboarding-active .onboarding-hero {
        flex-direction: column;
    }

    .dash-shell.onboarding-active .onboarding-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 0.85rem;
    }

    .dash-shell.onboarding-active .onboarding-progress-line {
        display: none;
    }

    .dash-shell.onboarding-active .onboarding-progress-label {
        white-space: normal;
        line-height: 1.3;
    }

    .dash-shell.onboarding-active .onboarding-card {
        padding: 1.15rem;
        min-height: 0;
    }

    .dash-shell.onboarding-active .onboarding-title {
        font-size: clamp(2rem, 5vw, 2.8rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .onboarding-step.is-active,
    .onboarding-card.is-transition-back .onboarding-step.is-active,
    .onboarding-card.is-transition-complete .onboarding-step.is-active {
        animation: none;
    }

    .onboarding-progress-icon {
        transition: none;
    }
}

.dash-current-team {
    position: relative;
    border-radius: 14px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.28));
    padding: 0.85rem 0.85rem;
}

.dash-current-trigger {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    padding: 0;
    text-align: left;
    cursor: pointer;
}

.dash-current-trigger:focus-visible {
    outline: 2px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.8));
    outline-offset: 4px;
    border-radius: 8px;
}

.dash-current-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.66rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.72));
}

.dash-current-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.dash-current-static-value {
    justify-content: flex-start;
}

.dash-current-value {
    margin-top: 0.3rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
    line-height: 1.15;
}

.dash-current-chevron {
    margin-top: 0.3rem;
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.76));
    font-size: 0.78rem;
}

.dash-current-team-list {
    position: absolute;
    z-index: 60;
    top: calc(100% + 0.42rem);
    left: 0;
    right: 0;
    display: grid;
    gap: 0.25rem;
    max-height: 260px;
    overflow-y: auto;
    padding: 0.4rem;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.24));
    border-radius: 14px;
    background: var(--cc-light-surface, rgba(12, 12, 12, 0.98));
    box-shadow: var(--cc-light-shadow, 0 18px 44px rgba(0, 0, 0, 0.48));
}

.dash-current-team-option {
    width: 100%;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
    padding: 0.58rem 0.65rem;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
}

.dash-current-team-option:hover,
.dash-current-team-option:focus-visible,
.dash-current-team-option.active {
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.26));
    background: rgba(255, 152, 0, 0.12);
    color: var(--cc-light-text, rgba(255, 255, 255, 0.95));
    outline: none;
}

.dash-current-team-empty {
    padding: 0.58rem 0.65rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.58));
    font-size: 0.78rem;
    font-weight: 800;
}

.dash-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 1.25rem;
    width: 100%;
    min-height: min(860px, calc(100vh - 5rem));
    transition: grid-template-columns 180ms ease, gap 180ms ease;
}

.dash-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.35rem 1.2rem;
    border-radius: 18px;
    border: 1px solid var(--dash-border);
    background: var(--dash-surface);
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.55));
    backdrop-filter: blur(10px);
    min-width: 0;
    overflow: hidden;
    transition: width 180ms ease, padding 180ms ease, opacity 160ms ease, transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.dash-sidebar-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
}

.dash-sidebar-toggle,
.dash-sidebar-reopen {
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.86));
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.dash-sidebar-toggle:hover,
.dash-sidebar-reopen:hover {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.08));
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.24));
    transform: translateY(-1px);
}

.dash-sidebar-toggle {
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
}

.dash-sidebar-toggle svg,
.dash-sidebar-reopen svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-sidebar-reopen {
    display: none;
    align-self: flex-start;
    padding: 0.65rem 0.9rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.dash-brand-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2.1px;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96));
}

.dash-nav {
    display: grid;
    gap: 0.45rem;
}

.dash-nav-item {
    position: relative;
    border: 1px solid transparent;
    background: transparent;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
    border-radius: 12px;
    padding: 0.75rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-align: left;
    cursor: pointer;
    transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.dash-nav-item:hover {
    transform: translateY(-1px);
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.06));
}

.dash-nav-item.active {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.08));
    color: var(--cc-light-accent, rgba(255, 152, 0, 0.95));
}

.dash-nav-item.active::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 4px;
    background: rgba(255, 152, 0, 0.95);
    box-shadow: var(--cc-light-shadow, 0 0 0 1px rgba(255, 152, 0, 0.18));
}

.dash-nav-icon {
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.45));
    flex: 0 0 auto;
}

.dash-nav-icon svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-nav-item.active .dash-nav-icon {
    color: var(--cc-light-accent, rgba(255, 152, 0, 0.95));
}

.dash-nav-label {
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.74rem;
}

.dash-coach {
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    display: grid;
    gap: 0.9rem;
}

.dash-coach-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dash-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 152, 0, 0.18);
    border: 1px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.22));
    color: var(--cc-light-accent, rgba(255, 214, 153, 0.9));
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dash-coach-name {
    font-weight: 900;
    letter-spacing: 0.02em;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
    line-height: 1.1;
}

.dash-coach-name-row {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.dash-plan-badge {
    border-radius: 999px;
    padding: 0.18rem 0.42rem;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    line-height: 1;
    text-transform: uppercase;
}

.dash-plan-badge.free {
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.14));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.08));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.72));
}

.dash-plan-badge.pro {
    border: 1px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.36));
    background: rgba(255, 152, 0, 0.18);
    color: var(--cc-light-accent, rgba(255, 190, 100, 0.98));
}

.dash-coach-email {
    font-size: 0.85rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.55));
    line-height: 1.2;
}

.dash-start {
    width: 100%;
    border-radius: 12px;
    border: 1px solid var(--cc-light-border, rgba(0, 0, 0, 0.6));
    background: var(--dash-primary);
    color: rgba(0, 0, 0, 0.84);
    padding: 0.95rem 1rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--cc-light-shadow, 0 14px 38px rgba(0, 0, 0, 0.4));
    transition: transform 140ms ease, filter 140ms ease;
}

.dash-start:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

.dash-main {
    padding: 0.25rem 0;
    display: grid;
    gap: 1.15rem;
    min-width: 0;
}

.dash-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.dash-title {
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1.4px;
    font-size: clamp(2.4rem, 1.8rem + 2vw, 3.3rem);
    line-height: 1;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96));
}

.dash-subtitle {
    margin-top: 0.35rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.52));
    font-size: 0.95rem;
}

.dash-header-right {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
}

.dash-help-button {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.36));
    border-radius: 50%;
    background: rgba(255, 152, 0, 0.12);
    color: var(--cc-light-accent, rgba(255, 202, 126, 0.98));
    font-size: 1.05rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.dash-help-button:hover,
.dash-help-button:focus-visible {
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.82));
    background: rgba(255, 152, 0, 0.24);
    transform: translateY(-1px);
    outline: none;
}

.dash-page-help {
    margin-top: 0.15rem;
}

.dash-sync-control {
    position: relative;
    flex: 0 0 auto;
}

.dash-sync-message {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 40;
    min-width: max-content;
    max-width: min(280px, calc(100vw - 2rem));
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.12));
    border-radius: 9px;
    background: var(--cc-light-surface, rgba(17, 17, 17, 0.96));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.88));
    box-shadow: var(--cc-light-shadow, 0 10px 30px rgba(0, 0, 0, 0.38));
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
    white-space: nowrap;
    pointer-events: none;
}

.dash-sync-message.success {
    border-color: var(--cc-light-success-border, rgba(99, 233, 154, 0.35));
    color: var(--cc-light-success, #63e99a);
}

.dash-sync-message.pending {
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.35));
    color: var(--cc-light-accent, rgba(255, 202, 126, 0.98));
}

.dash-sync-message.error {
    border-color: var(--cc-light-danger-border, rgba(255, 116, 125, 0.4));
    color: var(--cc-light-danger, #ff747d);
}

.dash-sync-button {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.15rem;
    padding: 0;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.14));
    border-radius: 50%;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.055));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.76));
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 120ms ease;
}

.dash-sync-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dash-sync-button:hover,
.dash-sync-button:focus-visible {
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.62));
    background: rgba(255, 152, 0, 0.12);
    color: var(--cc-light-accent, rgba(255, 202, 126, 0.98));
    transform: translateY(-1px);
    outline: none;
}

.dash-sync-button:disabled {
    cursor: default;
    opacity: 0.75;
    transform: none;
}

.dash-sync-button.is-syncing svg {
    animation: dash-sync-spin 900ms linear infinite;
}

.dash-sync-button.is-waiting svg {
    animation: dash-sync-wait 1.6s ease-in-out infinite;
}

@keyframes dash-sync-wait {
    50% { opacity: 0.4; }
}

.dash-sync-button.is-success {
    border-color: var(--cc-light-success-border, rgba(99, 233, 154, 0.52));
    background: rgba(99, 233, 154, 0.1);
    color: var(--cc-light-success, #63e99a);
}

.dash-sync-button.is-pending {
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.5));
    background: rgba(255, 152, 0, 0.1);
    color: var(--cc-light-accent, rgba(255, 202, 126, 0.98));
}

.dash-sync-button.is-error {
    border-color: var(--cc-light-danger-border, rgba(255, 116, 125, 0.55));
    background: rgba(255, 116, 125, 0.1);
    color: var(--cc-light-danger, #ff747d);
}

@keyframes dash-sync-spin {
    to { transform: rotate(360deg); }
}

.tm-hero-tools {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.dash-tour {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.dash-tour.hidden {
    display: none;
}

.dash-tour-backdrop {
    position: absolute;
    inset: 0;
    background: var(--cc-light-scrim, rgba(0, 0, 0, 0.7));
}

.dash-tour-target {
    position: relative;
    z-index: 10001;
    pointer-events: none;
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.86)) !important;
    background: rgba(255, 152, 0, 0.18) !important;
    box-shadow: var(--cc-light-shadow, 0 0 0 4px rgba(255, 152, 0, 0.22), 0 0 28px rgba(255, 152, 0, 0.38));
}

.dash-tour-tooltip {
    position: fixed;
    z-index: 10002;
    width: min(340px, calc(100vw - 2rem));
    padding: 1rem;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.48));
    border-radius: 16px;
    background: var(--cc-light-surface, #171717);
    box-shadow: var(--cc-light-shadow, 0 22px 60px rgba(0, 0, 0, 0.62));
}

.dash-tour-tooltip:focus {
    outline: none;
}

.dash-tour-tooltip-head,
.dash-tour-actions,
.dash-tour-navigation {
    display: flex;
    align-items: center;
}

.dash-tour-tooltip-head,
.dash-tour-actions {
    justify-content: space-between;
    gap: 0.75rem;
}

.dash-tour-progress {
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.88));
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dash-tour-close {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

.dash-tour-tooltip h2 {
    margin: 0.75rem 0 0;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96));
    font-size: 1.2rem;
}

.dash-tour-tooltip p {
    margin: 0.45rem 0 1rem;
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.7));
    font-size: 0.88rem;
    line-height: 1.5;
}

.dash-tour-navigation {
    gap: 0.5rem;
}

.dash-tour-skip,
.dash-tour-back,
.dash-tour-next {
    border-radius: 9px;
    padding: 0.55rem 0.7rem;
    font-size: 0.74rem;
    font-weight: 900;
    cursor: pointer;
}

.dash-tour-skip,
.dash-tour-back {
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.13));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.05));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.76));
}

.dash-tour-next {
    border: 1px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.72));
    background: rgba(255, 152, 0, 0.92);
    color: #17120b;
}

.dash-tour-close:hover,
.dash-tour-close:focus-visible,
.dash-tour-skip:hover,
.dash-tour-skip:focus-visible,
.dash-tour-back:hover:not(:disabled),
.dash-tour-back:focus-visible:not(:disabled) {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.11));
    outline: none;
}

.dash-tour-next:hover,
.dash-tour-next:focus-visible {
    background: rgba(255, 183, 77, 0.98);
    outline: none;
}

.dash-tour-back:disabled {
    cursor: default;
    opacity: 0.4;
}

@media (max-width: 767px) {
    .dash-tour-tooltip {
        top: auto !important;
        right: 1rem;
        bottom: 1rem;
        left: 1rem !important;
        width: auto;
    }

    .dash-tour-target {
        scroll-margin-block: 1rem;
    }
}

.dash-metric-label {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.72));
    text-align: right;
}

.dash-metric-value {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.95));
    text-align: right;
}

.dash-panel {
    border-radius: 18px;
    border: 1px solid var(--dash-border);
    background: var(--dash-surface);
    box-shadow: var(--cc-light-shadow, 0 18px 58px rgba(0, 0, 0, 0.55));
    padding: 1.15rem 1.15rem;
    backdrop-filter: blur(10px);
}

.dash-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.dash-panel-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.93));
}

.dash-panel-sub {
    margin-top: 0.15rem;
    font-size: 0.88rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.46));
}

.dash-legend {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.58));
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dash-panel-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.dash-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.dash-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    display: inline-block;
}

.dash-dot.win {
    background: var(--cc-light-success, var(--cc-dash-success, var(--cc-success)));
}

.dash-dot.loss {
    background: var(--cc-light-danger, var(--cc-dash-danger, var(--cc-dashboard-danger)));
}

.dash-recent-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.dash-game {
    border-radius: 14px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.06));
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.42));
    padding: 0.85rem 0.85rem;
    position: relative;
    overflow: hidden;
}

.dash-game::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: rgba(46, 204, 113, 0.9);
    opacity: 0.85;
}

.dash-game.loss::before {
    background: rgba(255, 82, 82, 0.9);
}

.dash-game-meta {
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.48));
    font-weight: 800;
}

.dash-game-scores {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.75rem;
    margin-top: 0.75rem;
    align-items: center;
}

.dash-score {
    font-size: 1.35rem;
    font-weight: 950;
    letter-spacing: 0.02em;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.95));
}

.dash-game-pill {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    display: grid;
    place-items: center;
    font-weight: 900;
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.7));
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dash-game:not(.loss) .dash-game-pill {
    border-color: var(--cc-light-success-border, rgba(46, 204, 113, 0.28));
    background: rgba(46, 204, 113, 0.11);
    color: var(--cc-light-success, rgba(159, 255, 197, 0.92));
}

.dash-game.loss .dash-game-pill {
    border-color: var(--cc-light-danger-border, rgba(255, 82, 82, 0.28));
    background: rgba(255, 82, 82, 0.11);
    color: var(--cc-light-danger, rgba(255, 176, 176, 0.92));
}

.dash-game-teams {
    margin-top: 0.65rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.48));
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 800;
}

.dash-game-btn {
    margin-top: 0.75rem;
    width: 100%;
    border-radius: 10px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.06));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.66));
    padding: 0.6rem 0.65rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
}

.dash-game-btn:hover {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.1));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.86));
}

.dash-lower {
    display: grid;
    grid-template-columns: 2.1fr 1fr;
    gap: 1.15rem;
    align-items: stretch;
}

.dash-chips {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    flex-wrap: wrap;
}

.dash-chip {
    border-radius: 999px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.03));
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.55));
}

.dash-chip strong {
    margin-left: 0.25rem;
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.92));
    font-weight: 950;
}

.dash-chart-wrap {
    --dash-chart-label-gap: 0.35rem;
    --dash-chart-label-height: 0.8rem;
    height: 270px;
    border-radius: 14px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.06));
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.38));
    padding: 0.9rem 0.85rem;
    display: grid;
    grid-template-columns: 70px 1fr;
    grid-template-rows: 1fr auto;
    column-gap: 0.75rem;
    row-gap: 0.6rem;
}

.dash-yaxis {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0.5rem;
    box-sizing: border-box;
    padding-bottom: calc(var(--dash-chart-label-gap) + var(--dash-chart-label-height));
}

.dash-yaxis-title {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.44));
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 900;
}

.dash-yaxis-ticks {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.4));
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 800;
    text-align: right;
}

.dash-bars {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    gap: 0.55rem;
    align-items: stretch;
    position: relative;
}

.dash-bar-col {
    display: grid;
    grid-template-rows: minmax(0, 1fr) var(--dash-chart-label-height);
    gap: var(--dash-chart-label-gap);
    height: 100%;
}

.dash-bar-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.18rem;
    height: 100%;
}

.dash-bars::before {
    content: '';
    position: absolute;
    inset: 0 0 calc(var(--dash-chart-label-gap) + var(--dash-chart-label-height)) 0;
    background:
        var(--cc-light-raised, linear-gradient(to top, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.0) 40%),
        repeating-linear-gradient(to top, rgba(255, 255, 255, 0.07) 0 1px, transparent 1px 54px));
    opacity: 0.35;
    pointer-events: none;
}

.dash-bar {
    border-radius: 10px 10px 6px 6px;
    background: transparent;
    border: 0;
    position: relative;
    overflow: visible;
    height: 100%;
    min-height: 120px;
    cursor: pointer;
}

.dash-bar:focus-visible {
    outline: 2px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.82));
    outline-offset: 3px;
}

.dash-bar-fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    border-top: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.12));
    transition: height 180ms ease;
}

.dash-bar-fill.fg {
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(118, 118, 118, 0.82), rgba(70, 70, 70, 0.88)));
    border-top-color: var(--cc-light-border, rgba(210, 210, 210, 0.55));
    box-shadow: var(--cc-light-shadow, inset 0 0 0 1px rgba(0, 0, 0, 0.12));
}

.dash-bar-fill.three {
    background: linear-gradient(180deg, rgba(255, 193, 77, 0.98), rgba(233, 148, 24, 0.98));
    border-top-color: var(--cc-light-accent-border, rgba(255, 214, 143, 0.78));
    box-shadow: var(--cc-light-shadow, inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 10px rgba(255, 152, 0, 0.16));
}

.dash-bar-value-label {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: var(--dash-bar-value-bottom, calc(100% + 0.34rem));
    transform: translateX(-50%);
    display: none;
    width: max-content;
    max-width: 7.4rem;
    padding: 0.24rem 0.38rem;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.42));
    border-radius: 999px;
    background: var(--cc-light-surface, rgba(12, 12, 12, 0.94));
    box-shadow: var(--cc-light-shadow, 0 10px 26px rgba(0, 0, 0, 0.46));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1.1;
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
}

.dash-bar.active .dash-bar-value-label {
    display: block;
}

.dash-bar-label {
    font-size: 0.64rem;
    line-height: var(--dash-chart-label-height);
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.52));
    letter-spacing: 0.04em;
    font-weight: 900;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-xaxis-title {
    grid-column: 2;
    grid-row: 2;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.48));
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: center;
    font-weight: 900;
}

.dash-performer-list {
    display: grid;
    gap: 0.65rem;
}

.dash-performer {
    appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.7rem 0.65rem;
    font: inherit;
    text-align: left;
    border-radius: 14px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.06));
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.38));
    color: inherit;
    cursor: pointer;
}

.dash-performer:hover,
.dash-performer:focus-visible {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.48));
    background: rgba(255, 152, 0, 0.08);
}

.dash-performer:focus-visible {
    outline: 2px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.82));
    outline-offset: 2px;
}

.dash-performer-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.2));
    background: rgba(255, 152, 0, 0.12);
    display: grid;
    place-items: center;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.86));
    font-weight: 950;
    letter-spacing: 0.06em;
}

.dash-performer-name {
    font-weight: 950;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
    line-height: 1.1;
}

.dash-performer-sub {
    margin-top: 0.15rem;
    font-size: 0.8rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.5));
}

.dash-performer-metrics {
    text-align: right;
    font-weight: 900;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
}

.dash-performer-metrics span {
    display: block;
    font-size: 0.72rem;
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.75));
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 0.12rem;
}

.dash-link {
    border: none;
    background: none;
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.88));
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.75rem;
    cursor: pointer;
}

.dash-link:hover {
    color: var(--cc-light-accent, rgba(255, 152, 0, 0.98));
}

.dash-empty {
    margin-top: 0.75rem;
    padding: 0.8rem 0.85rem;
    border-radius: 12px;
    border: 1px dashed var(--cc-light-border, rgba(255, 255, 255, 0.14));
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.55));
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.28));
}

@media (min-width: 768px) {
    .dash-shell.sidebar-collapsed {
        grid-template-columns: 0 1fr;
        gap: 0.9rem;
    }

    .dash-shell.sidebar-collapsed .dash-sidebar {
        width: 0;
        padding: 0;
        border-color: transparent;
        box-shadow: none;
        opacity: 0;
        transform: translateX(-20px);
        pointer-events: none;
    }

    .dash-shell.sidebar-collapsed .dash-sidebar-reopen {
        display: inline-flex;
    }
}

@media (max-width: 1024px) and (min-width: 768px) {
    .dash-app-shell {
        max-width: 1100px;
    }

    .dash-shell {
        grid-template-columns: 260px 1fr;
        gap: 1rem;
    }

    .dash-sidebar {
        gap: 0.9rem;
        padding: 1.1rem 1rem;
    }

    .dash-nav-label {
        letter-spacing: 0.14em;
        font-size: 0.7rem;
    }

    .dash-current-team {
        padding: 0.75rem 0.8rem;
    }

    .dash-header-right {
        gap: 1rem;
    }

}

@media (max-width: 1024px) and (min-width: 768px) and (orientation: portrait) {
    .setup-screen {
        padding: 1rem 0.8rem 1.2rem;
        align-items: flex-start;
    }

    .dash-app-shell {
        max-width: none;
    }

    .dash-shell {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 0.85rem;
        min-height: calc(100dvh - 2rem);
    }

    .dash-sidebar {
        gap: 0.85rem;
        padding: 1rem 0.85rem;
    }

    .dash-sidebar-head {
        gap: 0.55rem;
    }

    .dash-sidebar-toggle {
        width: 36px;
        height: 36px;
    }

    .dash-brand-title {
        font-size: 1.48rem;
        letter-spacing: 1.5px;
    }

    .dash-current-team {
        padding: 0.72rem 0.75rem;
    }

    .dash-current-label {
        font-size: 0.6rem;
        letter-spacing: 0.22em;
    }

    .dash-nav {
        gap: 0.38rem;
    }

    .dash-nav-item {
        gap: 0.6rem;
        padding: 0.68rem 0.72rem;
    }

    .dash-nav-label {
        font-size: 0.68rem;
        letter-spacing: 0.12em;
    }

    .dash-coach {
        gap: 0.75rem;
    }

    .dash-coach-row {
        gap: 0.6rem;
    }

    .dash-coach-email {
        font-size: 0.74rem;
    }

    .dash-start {
        padding: 0.82rem 0.9rem;
        font-size: 0.76rem;
    }

    .dash-main {
        gap: 0.9rem;
    }

    .dash-header {
        align-items: flex-start;
        gap: 0.8rem;
    }

    .dash-title {
        font-size: clamp(2.15rem, 1.7rem + 1.1vw, 2.75rem);
    }

    .dash-subtitle {
        font-size: 0.88rem;
    }

    .dash-header-right {
        margin-left: auto;
        gap: 0.9rem;
    }

    .dash-metric-label {
        font-size: 0.64rem;
        letter-spacing: 0.18em;
    }

    .dash-metric-value {
        font-size: 1.5rem;
    }

    .dash-panel {
        padding: 1rem 0.95rem;
    }

    .dash-panel-header {
        gap: 0.75rem;
    }

    .dash-panel-controls {
        gap: 0.7rem;
    }

    .dash-panel-title {
        font-size: 1.02rem;
    }

    .dash-panel-sub {
        font-size: 0.82rem;
    }

    .dash-legend {
        gap: 0.6rem;
        font-size: 0.72rem;
    }

    .dash-recent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.72rem;
    }

    .dash-game {
        padding: 0.78rem 0.78rem;
    }

    .dash-game-scores {
        gap: 0.55rem;
        margin-top: 0.6rem;
    }

    .dash-score {
        font-size: 1.2rem;
    }

    .dash-game-teams {
        font-size: 0.64rem;
        letter-spacing: 0.14em;
    }

    .dash-game-btn {
        padding: 0.54rem 0.58rem;
        font-size: 0.74rem;
    }

    .dash-lower {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }

    .dash-performers {
        order: 1;
    }

    .dash-chart {
        order: 2;
    }

    .dash-chip {
        font-size: 0.66rem;
        letter-spacing: 0.08em;
    }

    .dash-chart-wrap {
        height: 238px;
        grid-template-columns: 58px 1fr;
        padding: 0.8rem 0.75rem;
        column-gap: 0.6rem;
    }

    .dash-yaxis-title,
    .dash-yaxis-ticks,
    .dash-bar-label,
    .dash-xaxis-title {
        font-size: 0.62rem;
    }

    .dash-performer-list {
        gap: 0.55rem;
    }

    .dash-performer {
        grid-template-columns: 34px 1fr auto;
        gap: 0.55rem;
        padding: 0.62rem 0.58rem;
    }

    .dash-performer-avatar {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 0.78rem;
    }

    .dash-performer-name {
        font-size: 0.92rem;
    }
}

@media (max-width: 767px) {
    .dash-app-shell {
        max-width: 1100px;
    }

    .dash-shell {
        grid-template-columns: 1fr;
    }

    .dash-sidebar-toggle {
        display: inline-flex;
    }

    .dash-sidebar-reopen {
        display: none;
    }

    .dash-shell.sidebar-collapsed .dash-sidebar {
        display: none;
    }

    .dash-shell.sidebar-collapsed .dash-sidebar-reopen {
        display: inline-flex;
    }

    .dash-sidebar {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.7rem;
        padding: 0.85rem 0.75rem;
    }

    .dash-sidebar-head {
        align-items: flex-start;
    }

    .dash-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: auto;
        flex: none;
        max-height: min(46vh, 320px);
        overflow-x: hidden;
        overflow-y: auto;
        gap: 0.42rem;
        -webkit-overflow-scrolling: touch;
    }

    .dash-nav-item {
        min-height: 46px;
        padding: 0.62rem 0.6rem;
        gap: 0.55rem;
        white-space: normal;
    }

    .dash-coach {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.55rem;
    }

    .dash-coach-row {
        display: none;
    }

    .dash-current-team {
        display: none;
    }

    .dash-start {
        width: 100%;
        padding: 0.74rem 0.82rem;
        font-size: 0.72rem;
    }

    .dash-recent-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-lower {
        grid-template-columns: 1fr;
    }

    .dash-performers {
        order: 1;
    }

    .dash-chart {
        order: 2;
    }
}

@media (max-width: 560px) {
    .dash-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .dash-header-right {
        width: 100%;
        justify-content: space-between;
    }

    .dash-recent-grid {
        grid-template-columns: 1fr;
    }

    .dash-chart-wrap {
        grid-template-columns: 58px 1fr;
        height: 240px;
    }

    .pg-info-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) {
    .setup-screen {
        padding: 0.7rem 0.55rem 0.95rem;
    }

    .dash-shell {
        gap: 0.7rem;
    }

    .dash-sidebar {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0.7rem;
        padding: 0.85rem 0.75rem;
    }

    .dash-sidebar-head {
        align-items: flex-start;
    }

    .dash-current-team {
        display: block;
        padding: 0.65rem 0.7rem;
    }

    .dash-nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: row;
        grid-auto-columns: auto;
        flex: none;
        overflow-x: visible;
        gap: 0.42rem;
    }

    .dash-nav-item {
        min-height: 46px;
        padding: 0.62rem 0.6rem;
        gap: 0.55rem;
    }

    .dash-nav-icon,
    .dash-nav-icon svg {
        width: 18px;
        height: 18px;
    }

    .dash-nav-label {
        font-size: 0.62rem;
        letter-spacing: 0.08em;
    }

    .dash-coach {
        width: 100%;
        gap: 0.55rem;
    }

    .dash-start {
        width: 100%;
        padding: 0.74rem 0.82rem;
        font-size: 0.72rem;
    }

    .dash-title {
        font-size: clamp(1.92rem, 1.58rem + 1vw, 2.3rem);
    }

    .dash-subtitle {
        font-size: 0.8rem;
    }

    .dash-header-right {
        gap: 0.7rem;
        flex-wrap: wrap;
    }

    .dash-metric-label {
        font-size: 0.58rem;
        letter-spacing: 0.14em;
    }

    .dash-metric-value {
        font-size: 1.26rem;
    }

    .dash-panel {
        padding: 0.88rem 0.82rem;
    }

    .dash-panel-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.55rem;
    }

    .dash-panel-title {
        font-size: 0.98rem;
    }

    .dash-panel-sub,
    .dash-legend {
        font-size: 0.72rem;
    }

    .dash-chart-wrap {
        height: 220px;
        grid-template-columns: 48px 1fr;
        padding: 0.7rem 0.6rem;
        column-gap: 0.45rem;
    }

    .dash-yaxis-title,
    .dash-yaxis-ticks,
    .dash-bar-label,
    .dash-xaxis-title {
        font-size: 0.56rem;
    }

    .tm-module,
    .tm-portal,
    .tm-season-label,
    .tm-season-value {
        font-size: 0.62rem;
        letter-spacing: 0.16em;
    }

    .tm-title {
        font-size: clamp(2.15rem, 1.7rem + 1.8vw, 2.7rem);
    }

    .tm-panel,
    .sg-panel,
    .pg-panel {
        padding: 0.95rem 0.82rem;
    }

    .pg-toolbar,
    .tm-list-header,
    .screen-bottom-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.65rem;
    }

    .pg-actions .btn,
    .screen-bottom-bar .btn,
    .screen-bottom-bar .icon-nav-item {
        width: 100%;
    }

    #startGameScreen .form-section.compact,
    #playerManagementScreen .form-section.compact,
    #leagueHubScreen .form-section.compact {
        padding: 0.75rem 0.72rem;
        border-radius: 16px;
    }

    #startGameScreen select,
    #startGameScreen input[type="text"],
    #startGameScreen input[type="number"],
    #startGameScreen textarea {
        min-height: 44px;
    }

    .pm-toolbar-grid,
    .pm-toolbar-actions,
    .pm-toolbar-filters {
        grid-template-columns: 1fr;
    }

    .pm-bottom-bar {
        grid-template-columns: 1fr;
    }

    .season-toolbar,
    .season-metrics-grid,
    .season-secondary-metrics,
    .pg-info-grid {
        grid-template-columns: 1fr;
    }
}

#startGameScreen {
    background: none;
    border: none;
    box-shadow: none;
    max-width: none;
    padding: 0.25rem 0;
    align-self: stretch;
    container-type: inline-size;
}

#startGameScreen::before {
    display: none;
}

#startGameScreen .tm-title {
    max-width: 100%;
    font-size: clamp(2.4rem, 7cqw, 4.2rem);
    overflow-wrap: anywhere;
}

#startGameScreen .league-rules-note {
    font-size: clamp(0.76rem, 1.55cqw, 0.85rem);
    line-height: 1.35;
}

/* Settings: shared dashboard palette, quiet sections, consistent form controls. */
#settingsScreen.settings-screen {
    background: none;
    border: 0;
    box-shadow: none;
    gap: 1.5rem;
    min-width: 0;
}
.settings-sections {
    border: 1px solid var(--dash-border);
    border-radius: 16px;
    background: var(--cc-surface);
    overflow: hidden;
}
.settings-section {
    display: grid;
    grid-template-columns: minmax(150px, 0.75fr) minmax(0, 2.25fr);
    gap: 2rem;
    padding: 1.75rem;
}
.settings-section + .settings-section {
    border-top: 1px solid var(--dash-border);
}
.settings-section-heading h2 {
    margin: 0;
    color: var(--cc-text);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}
.settings-section-heading p {
    margin: 0.4rem 0 0;
    max-width: 25ch;
    color: var(--cc-text-muted);
    font-size: 0.8rem;
    line-height: 1.6;
}
.settings-section-body {
    min-width: 0;
}
.settings-field {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
}
.settings-field > label, .settings-field > span {
    color: var(--cc-text-subtle);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.settings-field small {
    color: var(--cc-text-muted);
    font-size: 0.72rem;
    line-height: 1.4;
}
#settingsScreen select, #settingsScreen input[type="number"] {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0.65rem 0.8rem;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    background: var(--cc-input);
    color: var(--cc-text);
    font: inherit;
    font-size: 0.85rem;
}
#settingsScreen select option {
    background: var(--cc-surface);
    color: var(--cc-text);
}
#settingsScreen :is(select, input, button):focus-visible {
    outline: 2px solid var(--cc-focus);
    outline-offset: 3px;
    box-shadow: none;
}
.settings-account-profile {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.settings-avatar {
    width: 3rem;
    height: 3rem;
    flex: 0 0 3rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--cc-border-strong);
    border-radius: 50%;
    background: var(--cc-control);
    color: var(--cc-text);
    font-size: 1rem;
    font-weight: 700;
}
.settings-account-identity {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}
.settings-account-identity > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.settings-account-identity strong {
    color: var(--cc-text);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}
.settings-account-identity > span {
    color: var(--cc-text-subtle);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}
.settings-account-identity small {
    color: var(--cc-text-muted);
    font-size: 0.72rem;
}
.settings-plan-badge {
    padding: 0.15rem 0.45rem;
    border: 1px solid var(--cc-border-strong);
    border-radius: 4px;
    color: var(--cc-text-subtle);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}
.settings-plan-badge.pro {
    border-color: var(--cc-light-accent-border, rgba(255, 159, 10, 0.48));
    background: rgba(255, 159, 10, 0.12);
    color: var(--cc-accent-hover);
}
.settings-account-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 1.1rem;
}
.settings-account-status-line {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    color: var(--cc-text-muted);
    font-size: 0.72rem;
}
.settings-account-status-line strong {
    color: var(--cc-text-subtle);
    font-weight: 500;
}
.settings-account-actions {
    display: flex;
    gap: 0.5rem;
}
#settingsScreen .btn {
    min-height: 44px;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--cc-border-strong);
    border-radius: 8px;
    background: var(--cc-control);
    color: var(--cc-text);
    box-shadow: none;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}
#settingsScreen .btn:hover {
    background: var(--cc-control-hover);
    border-color: var(--cc-border-strong);
    transform: none;
}
#settingsScreen .settings-signout-btn {
    background: transparent;
    color: var(--cc-text-subtle);
}
#settingsScreen .settings-signout-btn:hover {
    border-color: var(--cc-danger);
    color: var(--cc-danger);
}
.settings-sync-status {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
    align-items: center;
}
.settings-sync-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cc-success);
}
.settings-sync-status.is-pending .settings-sync-dot, .settings-sync-status.is-risk .settings-sync-dot {
    background: var(--cc-warning);
}
.settings-sync-status.is-syncing .settings-sync-dot {
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    background: transparent;
    border: 2px solid var(--cc-success);
    border-right-color: transparent;
    animation: dash-sync-spin 900ms linear infinite;
}
.settings-sync-status > div {
    display: grid;
    gap: 0.3rem;
}
.settings-sync-status strong {
    color: var(--cc-text);
    font-size: 0.85rem;
    font-weight: 600;
}
.settings-sync-status span:not(.settings-sync-dot), .settings-sync-status small {
    color: var(--cc-text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
}
.settings-sync-message {
    color: var(--cc-warning);
    font-size: 0.78rem;
    line-height: 1.5;
    margin-top: 0.6rem;
}
.settings-sync-message:empty {
    display: none;
}
.settings-backup-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
    margin-top: 1.2rem;
}
.settings-action-tile {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    background: transparent;
    color: var(--cc-text-subtle);
    text-align: left;
    cursor: pointer;
}
.settings-action-tile:hover {
    background: var(--cc-control);
    border-color: var(--cc-border-strong);
}
.settings-action-tile svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.settings-action-tile > span:nth-child(2) {
    display: grid;
    gap: 0.25rem;
}
.settings-action-tile > span:last-child {
    margin-left: auto;
    color: var(--cc-text-muted);
}
.settings-action-tile strong {
    font-size: 0.8rem;
    font-weight: 600;
}
.settings-action-tile small {
    color: var(--cc-text-muted);
    font-size: 0.7rem;
    line-height: 1.5;
}
.settings-about-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}
.settings-about-links button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cc-text-subtle);
    font-size: 0.8rem;
    cursor: pointer;
}
.settings-about-links button:hover {
    color: var(--cc-accent-hover);
}
.settings-about-links span {
    color: var(--cc-text-muted);
}
#settingsScreen .btn:disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}
@media (max-width: 1100px) {
    .settings-section {
        grid-template-columns: minmax(130px, 0.7fr) minmax(0, 2fr);
        gap: 1.25rem;
        padding: 1.4rem;
    }
    .settings-backup-actions {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {
    .settings-section {
        grid-template-columns: 1fr;
        padding: 1.25rem;
        gap: 1.25rem;
    }
    .settings-section-heading p {
        max-width: none;
    }
    .settings-account-footer {
        align-items: stretch;
        flex-direction: column;
    }
    #settingsScreen .settings-account-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 480px) {
    .settings-field > label {
        font-size: 0.75rem;
    }
    #settingsScreen select, #settingsScreen input[type="number"] {
        font-size: 1rem;
    }
}


/* Account dialogs share Settings' neutral surfaces and controls. */
.settings-account-modal {
    background: var(--cc-scrim);
}
.settings-account-modal .modal-content.setup-surface {
    max-width: 520px;
    padding: 1.75rem;
    border: 1px solid var(--cc-border);
    border-radius: 16px;
    background: var(--cc-surface);
    box-shadow: var(--cc-light-shadow, 0 24px 80px rgba(0, 0, 0, 0.45));
}
.settings-account-modal .modal-header {
    margin: 0 2.5rem 0.5rem 0;
    color: var(--cc-text);
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.02em;
}
.settings-account-modal .settings-note {
    margin: 0 2rem 1.5rem 0;
    color: var(--cc-text-muted);
    font-size: 0.8rem;
    line-height: 1.6;
}
.settings-account-modal .modal-close {
    top: 1rem;
    right: 1rem;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    padding: 0;
    border-radius: 8px;
    color: var(--cc-text-muted);
    font-size: 1rem;
}
.settings-account-modal .modal-close:hover {
    background: var(--cc-control);
    color: var(--cc-text);
}
.settings-modal-account {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    background: var(--cc-surface-raised);
}
.settings-modal-account > div:last-child {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}
.settings-modal-account strong {
    color: var(--cc-text);
    font-size: 0.95rem;
    overflow-wrap: anywhere;
}
.settings-modal-account span {
    color: var(--cc-text-subtle);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}
.settings-modal-account small {
    color: var(--cc-text-muted);
    font-size: 0.72rem;
}
.settings-modal-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cc-border);
}
.settings-account-modal .btn {
    min-height: 44px;
    min-width: 0;
    padding: 0.65rem 1rem;
    border: 1px solid var(--cc-accent);
    border-radius: 8px;
    background: var(--cc-accent);
    box-shadow: none;
    color: var(--cc-on-accent);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}
.settings-account-modal .btn:hover {
    background: var(--cc-accent-hover);
    border-color: var(--cc-accent-hover);
    transform: none;
    box-shadow: none;
}
.settings-account-modal .btn-secondary {
    background: var(--cc-control);
    border-color: var(--cc-border-strong);
    color: var(--cc-text);
}
.settings-account-modal .btn-secondary:hover {
    background: var(--cc-control-hover);
    border-color: var(--cc-border-strong);
    color: var(--cc-text);
}
.settings-account-modal .settings-password-field {
    margin-top: 1rem;
    margin-bottom: 0;
}
.settings-account-modal .settings-password-field label {
    color: var(--cc-text-subtle);
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
.settings-account-modal .settings-password-field input {
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    background: var(--cc-input);
    color: var(--cc-text);
    font: inherit;
    font-size: 1rem;
    box-shadow: none;
}
.settings-account-modal :is(button, input):focus-visible {
    outline: 2px solid var(--cc-focus);
    outline-offset: 3px;
    box-shadow: none;
}
.settings-form-message {
    margin-top: 0.7rem;
    color: var(--cc-warning);
    font-size: 0.78rem;
    line-height: 1.5;
}
.settings-form-message.success { color: var(--cc-success); }
.settings-form-message.error { color: var(--cc-danger); }
@media (max-width: 480px) {
    .settings-modal-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .settings-account-modal .modal-close {
        top: 0.5rem;
        right: 0.5rem;
    }
}

#startGameScreen .tm-portal {
    max-width: 28rem;
    text-align: right;
    font-size: clamp(0.78rem, 1.7cqw, 0.95rem);
    line-height: 1.35;
}

.sg-panel {
    padding: 1.15rem 1.2rem;
}

.sg-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
    gap: 1rem;
    align-items: start;
}

.sg-column {
    display: grid;
    gap: 0.9rem;
    align-content: start;
}

.sg-shot-chart-card {
    min-height: 112px;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(28, 28, 28, 0.92), rgba(12, 12, 12, 0.96)));
    box-shadow: var(--cc-light-shadow, 0 14px 34px rgba(0, 0, 0, 0.34));
}

.sg-shot-chart-label {
    display: inline-flex;
    align-items: center;
    gap: 0.58rem;
    color: var(--dash-text);
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.sg-shot-chart-label input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    accent-color: #ff9800;
}

.sg-shot-chart-card p {
    margin: 1.35rem 0 0;
    color: var(--dash-text-dim);
    font-size: 0.82rem;
    line-height: 1.35;
}

@media (max-width: 960px) {
    .sg-grid {
        grid-template-columns: 1fr;
    }
}

#startGameScreen .form-section.compact {
    margin-bottom: 0;
    padding: 1rem 1.05rem;
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(28, 28, 28, 0.92), rgba(12, 12, 12, 0.96)));
    box-shadow: var(--cc-light-shadow, 0 14px 34px rgba(0, 0, 0, 0.34));
}

#startGameScreen .form-group {
    gap: 0.3rem;
}

#startGameScreen label {
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.72));
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#startGameScreen select,
#startGameScreen input[type="text"],
#startGameScreen input[type="number"],
#startGameScreen textarea {
    min-height: 48px;
    border: 1px solid var(--dash-border-strong);
    border-radius: 14px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(22, 22, 22, 0.96), rgba(10, 10, 10, 0.98)));
    color: var(--dash-text);
    font-weight: 700;
}

#startGameScreen select option {
    background: var(--cc-light-control, #101010);
    color: var(--dash-text);
}

#startGameScreen select:focus,
#startGameScreen input[type="text"]:focus,
#startGameScreen input[type="number"]:focus,
#startGameScreen textarea:focus {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.8));
    box-shadow: var(--cc-light-shadow, 0 0 0 3px rgba(255, 152, 0, 0.12));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(26, 26, 26, 0.96), rgba(12, 12, 12, 0.99)));
}

#startGameScreen .league-rules-note {
    margin-bottom: 0;
    border: 1px solid var(--dash-border);
    border-radius: 18px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(24, 24, 24, 0.9), rgba(10, 10, 10, 0.95)));
    color: var(--dash-text-dim);
    box-shadow: var(--cc-light-shadow, 0 14px 34px rgba(0, 0, 0, 0.28));
}

#startGameScreen #startGameBtn {
    min-height: 48px;
    width: 100%;
}

#startGameScreen .start-game-block-hint {
    margin-top: 0;
}

#startGameScreen .screen-bottom-bar {
    margin-top: 1rem;
    border-top-color: var(--dash-border);
    padding-top: 1rem;
}

#startGameScreen .icon-nav-btn {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.12));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(30, 30, 30, 0.96) 0%, rgba(12, 12, 12, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

#startGameScreen .icon-nav-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.45));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(40, 40, 40, 0.98) 0%, rgba(14, 14, 14, 0.99) 100%));
}

#startGameScreen .icon-nav-label {
    color: var(--dash-text-dim);
}

@media (max-width: 960px) {
    #startGameScreen .tm-portal {
        max-width: none;
        text-align: left;
    }
}

/* Settings, Preferences: one row per choice, the label on the left and the control on the right. Both apply as
   soon as they are tapped. Language is two buttons, each name in its own language; the pressed one is in use.
   The theme switch's thumb sits on the sun when the app is light and slides onto the moon when it is dark. */
.settings-pref-list {
    display: grid;
}
.settings-pref-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    min-height: 44px;
    padding: 0.75rem 0;
}
.settings-pref-row:first-child {
    padding-top: 0;
}
.settings-pref-row:last-child {
    padding-bottom: 0;
}
.settings-pref-row + .settings-pref-row {
    border-top: 1px solid var(--cc-border);
}
.settings-pref-label {
    color: var(--cc-text);
    font-size: 0.9rem;
    font-weight: 600;
}

.settings-segmented {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cc-border);
    border-radius: 999px;
    background: var(--cc-surface-raised);
}
#settingsScreen .settings-segment {
    min-width: 92px;
    min-height: 36px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--cc-text-muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#settingsScreen .settings-segment:hover {
    color: var(--cc-text);
}
#settingsScreen .settings-segment[aria-pressed="true"] {
    background: var(--cc-accent);
    color: var(--cc-on-accent);
    font-weight: 700;
}

#settingsScreen .settings-theme-switch {
    position: relative;
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: space-between;
    width: 72px;
    height: 36px;
    margin: 0;
    padding: 0 9px;
    border: 1px solid var(--cc-border);
    border-radius: 999px;
    background: var(--cc-surface-raised);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.settings-theme-icon {
    position: relative;
    z-index: 1;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: var(--cc-text-muted);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s ease;
}
.settings-theme-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--cc-accent);
    transition: transform 0.2s ease;
}
.settings-theme-switch[aria-checked="false"] .sun,
.settings-theme-switch[aria-checked="true"] .moon {
    stroke: var(--cc-on-accent);
}
.settings-theme-switch[aria-checked="true"] .settings-theme-thumb {
    transform: translateX(36px);
}
@media (prefers-reduced-motion: reduce) {
    #settingsScreen .settings-segment, #settingsScreen .settings-theme-switch, .settings-theme-icon, .settings-theme-thumb { transition: none; }
}

/* Live game redesign */
body.live-game-active {
    overflow: hidden;
}

.game-screen {
    height: 100vh;
    min-height: 100vh;
    padding: 0 !important;
    overflow: hidden;
    background:
        var(--cc-light-surface, radial-gradient(64% 52% at 50% -6%, rgba(255, 130, 36, 0.1), transparent 58%),
        linear-gradient(180deg, #090909 0%, #111111 100%));
}

.live-shell {
    display: grid;
    grid-template-columns: 164px minmax(0, 1fr);
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.live-side-menu {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    height: 100vh;
    padding: 0.8rem 0.65rem;
    border-right: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(24, 24, 24, 0.98), rgba(12, 12, 12, 0.98)));
    box-shadow: var(--cc-light-shadow, inset -1px 0 0 rgba(255, 255, 255, 0.03));
}

.live-side-head {
    display: flex;
    justify-content: flex-end;
}

.live-side-toggle {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.12));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(36, 36, 36, 0.96), rgba(14, 14, 14, 0.98)));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.86));
}

.live-side-nav {
    display: grid;
    gap: 0.38rem;
}

.live-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    min-height: 42px;
    padding: 0.72rem 0.78rem;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.54));
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.68rem;
    font-weight: 900;
}

.live-nav-item:hover {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.88));
}

.live-nav-item.active {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.28));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    color: var(--cc-light-accent, rgba(255, 166, 74, 0.98));
}

.live-nav-item.active::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 12%;
    bottom: 12%;
    width: 3px;
    border-radius: 999px;
    background: rgba(255, 152, 0, 0.98);
}

.live-nav-item.danger {
    color: var(--cc-light-danger, rgba(255, 192, 192, 0.8));
}

.live-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    font-size: 0.9rem;
    flex: 0 0 auto;
}

#gameScreen.live-nav-collapsed .live-shell {
    grid-template-columns: 82px minmax(0, 1fr);
}

#gameScreen.live-nav-collapsed .live-nav-label {
    display: none;
}

#gameScreen.live-nav-collapsed .live-nav-item {
    justify-content: center;
    padding-inline: 0.4rem;
}

.live-shell-main {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.scoreboard-bar {
    display: block;
    position: relative;
    top: auto;
    max-width: none;
    margin: 0;
    padding: 1.05rem 1.2rem 0.88rem;
    border-top: none;
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(15, 15, 15, 0.98), rgba(9, 9, 9, 0.97)));
    box-shadow: var(--cc-light-shadow, 0 14px 28px rgba(0, 0, 0, 0.34));
}

.score-display {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 188px minmax(0, 1fr);
    gap: 1.35rem;
    align-items: center;
}

.team-score {
    min-height: 120px;
    padding: 0;
    border: none;
    background: none;
    border-radius: 0;
    box-shadow: none;
    display: grid;
    align-items: center;
    width: fit-content;
    max-width: 100%;
}

.team-score::before,
.team-score::after {
    display: none;
}

.team-score.away {
    grid-template-columns: auto minmax(0, 280px) auto;
    gap: 0.95rem;
    justify-self: start;
}

.score-team-accent {
    width: 5px;
    height: 62px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffbf6c, #ff8f1f);
}

.score-team-meta {
    display: grid;
    gap: 0.24rem;
    min-width: 0;
}

.team-score.home .score-team-meta {
    justify-items: end;
    text-align: right;
}

.team-score.away .score-team-meta {
    justify-items: start;
    text-align: left;
}

.score-team-name {
    font-size: clamp(2.35rem, 1.75rem + 1.05vw, 3.15rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.98));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.score-team-role {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.42));
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
}

#homeScore,
#awayScore {
    font-size: clamp(5.8rem, 4.7rem + 2vw, 7rem);
    line-height: 0.86;
    letter-spacing: 0.01em;
    text-shadow: none;
}

#homeScore {
    color: var(--cc-light-accent, #ffab47);
}

#awayScore {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.98));
}

.home-score-wrap,
.away-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.32rem;
}

.away-score-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(42px, 1fr));
    gap: 0.28rem;
}

.away-score-btn {
    min-width: 42px;
    min-height: 28px;
    padding: 0.28rem 0.32rem;
    border-radius: 4px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(36, 36, 36, 0.96), rgba(15, 15, 15, 0.98)));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.06em;
}

.away-score-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 163, 66, 0.46));
    color: var(--cc-light-accent, rgba(255, 201, 150, 0.98));
}

.score-foul-row {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.12rem 0.42rem;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.1));
    border-radius: 999px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    font-family: 'Inter', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-top: 0.04rem;
}

.period-clock {
    justify-self: center;
    width: 188px;
    min-height: 118px;
    padding: 0.82rem 1rem 0.88rem;
    border-radius: 12px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.07));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(36, 36, 36, 0.98), rgba(16, 16, 16, 0.99)));
    box-shadow: var(--cc-light-shadow, 0 20px 40px rgba(0, 0, 0, 0.38));
    text-align: center;
}

.period {
    color: var(--cc-light-accent, rgba(255, 171, 71, 0.98));
    font-size: 2.15rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    font-family: 'Inter', sans-serif;
    text-transform: uppercase;
}

.period-clock .clock {
    font-size: clamp(3.35rem, 2.7rem + 1vw, 4rem);
    letter-spacing: 0.04em;
}

.clock.running {
    color: var(--cc-light-success, rgba(88, 214, 141, 0.98));
}

.live-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 294px;
    gap: 1rem;
    min-width: 0;
    min-height: 0;
    padding: 0.62rem 0.82rem 0.52rem;
    overflow: hidden;
}

.live-main-column,
.live-side-column {
    min-width: 0;
    min-height: 0;
}

.live-main-column {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.46rem;
}

.live-lineup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.live-lineup-title-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.live-title-accent {
    width: 5px;
    height: 20px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffc16f, #ff9020);
}

.live-panel-title,
.live-side-panel-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    line-height: 0.95;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96));
}

.live-lineup-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lineup-mini-btn {
    min-height: 42px;
    padding: 0.62rem 1rem;
    border-radius: 4px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(34, 34, 34, 0.98), rgba(15, 15, 15, 0.99)));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.86));
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: none;
}

.lineup-mini-btn::before {
    content: none;
    font-size: 0.75rem;
    line-height: 1;
}

.lineup-mini-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.4));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(42, 42, 42, 0.98), rgba(18, 18, 18, 0.99)));
    transform: translateY(-1px);
}

.lineup-mini-btn:disabled,
.live-bottom-btn:disabled,
.away-score-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.lineup-mini-btn-accent {
    border-color: var(--cc-light-accent-border, rgba(255, 120, 38, 0.34));
    background: linear-gradient(180deg, #e96618 0%, #ba4305 100%);
    color: var(--cc-light-text, #fff4e8);
}

.lineup-mini-btn-accent:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 171, 71, 0.54));
    background: linear-gradient(180deg, #f07a2f 0%, #cf4f0c 100%);
}

/* Keep the game clock's primary action easy to find in either theme. */
#pauseBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    flex-shrink: 0;
    border: 1px solid #ffad47;
    background: linear-gradient(180deg, #ffb64f 0%, #ff9800 100%);
    color: #211407;
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
}

#pauseBtn:hover {
    border-color: #ffc676;
    background: linear-gradient(180deg, #ffc36a 0%, #ffa51f 100%);
    color: #211407;
}

#pauseBtn::before {
    content: '';
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid currentColor;
}

#pauseBtn.pause::before {
    width: 8px;
    height: 10px;
    border: 0;
    background: linear-gradient(to right, currentColor 0 3px, transparent 3px 5px, currentColor 5px 8px);
}

#pauseBtn:focus-visible {
    outline: 3px solid #ffb64f;
    outline-offset: 3px;
}

#pauseBtn.pause,
#pauseBtn.pause:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 171, 71, 0.4));
    background: linear-gradient(180deg, #ffad57 0%, #f2862d 100%);
    color: #1b1108;
}

#homeOnCourt.live-player-list {
    display: grid;
    grid-template-columns: 1fr !important;
    grid-template-rows: repeat(5, minmax(0, 1fr));
    grid-auto-flow: row;
    gap: 0.42rem;
    min-height: 0;
    height: 100%;
    align-content: stretch;
    overflow: hidden;
    padding-right: 0.1rem;
}

#homeOnCourt.live-player-list .player-card {
    height: 100%;
    min-height: 0;
    margin-bottom: 0;
    padding: 0.34rem 0.48rem;
    border-radius: 8px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.07));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(18, 18, 18, 0.98), rgba(10, 10, 10, 0.99)));
    display: grid;
    grid-template-columns: minmax(188px, 0.34fr) minmax(0, 1fr);
    gap: 0.4rem;
    align-items: stretch;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.03), 0 10px 24px rgba(0, 0, 0, 0.24));
}

#homeOnCourt.live-player-list .player-card:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.28));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 30px rgba(0, 0, 0, 0.28));
}

#homeOnCourt.live-player-list .player-info {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    align-self: center;
    gap: 0.62rem;
    min-width: 0;
    min-height: 0;
    padding: 0.12rem 0.16rem;
    margin-bottom: 0;
}

#homeOnCourt.live-player-list .player-number {
    width: 48px;
    min-width: 48px;
    padding: 0.32rem 0.2rem;
    border-radius: 6px;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 171, 71, 0.18));
    background: rgba(255, 171, 71, 0.12);
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96));
    font-size: 1.36rem;
    font-weight: 900;
    line-height: 0.9;
    text-align: center;
}

#homeOnCourt.live-player-list .player-text {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
    align-content: center;
    text-align: left;
}

#homeOnCourt.live-player-list .player-name {
    font-size: 1rem;
    font-weight: 900;
    line-height: 0.98;
    text-transform: uppercase;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#homeOnCourt.live-player-list .player-meta,
#homeOnCourt.live-player-list .player-summary {
    font-size: 0.64rem;
    font-weight: 800;
    line-height: 1.05;
    text-transform: uppercase;
}

#homeOnCourt.live-player-list .player-meta {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.46));
}

#homeOnCourt.live-player-list .player-summary {
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.68));
}

#homeOnCourt.live-player-list .player-actions {
    display: grid;
    grid-template-columns: repeat(9, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 0.16rem;
    height: 100%;
    min-height: 0;
    align-items: stretch;
}

#homeOnCourt.live-player-list .action-btn {
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 0.26rem 0.18rem;
    border-radius: 4px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.06));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(41, 41, 41, 0.98), rgba(26, 26, 26, 0.99)));
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.64));
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.02em;
    box-shadow: none;
}

#homeOnCourt.live-player-list .action-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 183, 77, 0.24));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(53, 53, 53, 0.98), rgba(30, 30, 30, 0.99)));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
}

#homeOnCourt.live-player-list .action-btn.primary {
    border-color: var(--cc-light-success-border, rgba(74, 222, 128, 0.42));
    background: var(--cc-light-accent-soft, linear-gradient(180deg, rgba(31, 138, 73, 0.98), rgba(20, 103, 54, 0.99)));
    color: var(--cc-light-text, rgba(244, 255, 247, 0.98));
}

#homeOnCourt.live-player-list .action-btn.primary:hover {
    border-color: var(--cc-light-success-border, rgba(134, 239, 172, 0.62));
    background: var(--cc-light-accent-soft, linear-gradient(180deg, rgba(42, 166, 88, 0.98), rgba(22, 128, 61, 0.99)));
}

#homeOnCourt.live-player-list .action-btn.miss-shot,
#homeOnCourt.live-player-list .action-btn.rebound-action,
#homeOnCourt.live-player-list .action-btn[data-action="turnovers-1"] {
    background: var(--cc-light-control, linear-gradient(180deg, rgba(41, 41, 41, 0.98), rgba(26, 26, 26, 0.99)));
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.64));
}

#homeOnCourt.live-player-list .action-btn.miss-shot-2 {
    border-color: var(--cc-light-danger-border, rgba(248, 113, 113, 0.36));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(127, 29, 29, 0.98), rgba(91, 19, 19, 0.99)));
    color: var(--cc-light-text, rgba(255, 222, 222, 0.98));
}

#homeOnCourt.live-player-list .action-btn.miss-shot-3 {
    border-color: var(--cc-light-danger-border, rgba(248, 113, 113, 0.36));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(127, 29, 29, 0.98), rgba(91, 19, 19, 0.99)));
    color: var(--cc-light-text, rgba(255, 222, 222, 0.98));
}

#homeOnCourt.live-player-list .action-btn.miss-shot-2:hover {
    border-color: var(--cc-light-danger-border, rgba(252, 165, 165, 0.56));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(153, 27, 27, 0.98), rgba(127, 29, 29, 0.99)));
    color: var(--cc-light-text, rgba(255, 240, 240, 0.98));
}

#homeOnCourt.live-player-list .action-btn.miss-shot-3:hover {
    border-color: var(--cc-light-danger-border, rgba(252, 165, 165, 0.56));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(153, 27, 27, 0.98), rgba(127, 29, 29, 0.99)));
    color: var(--cc-light-text, rgba(255, 240, 240, 0.98));
}

#homeOnCourt.live-player-list .action-btn.danger {
    border-color: var(--cc-light-accent-border, rgba(255, 114, 61, 0.2));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(89, 34, 18, 0.98), rgba(64, 24, 12, 0.99)));
    color: var(--cc-light-accent, rgba(255, 134, 85, 0.98));
}

.live-side-column {
    display: grid;
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.12fr);
    gap: 0.8rem;
    overflow: hidden;
}

.live-side-panel {
    min-height: 0;
    padding: 0.95rem 0.9rem;
    border-radius: 10px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(24, 24, 24, 0.96), rgba(12, 12, 12, 0.99)));
    box-shadow: var(--cc-light-shadow, 0 18px 40px rgba(0, 0, 0, 0.34));
    display: flex;
    flex-direction: column;
}

.live-side-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.live-side-panel-subtitle {
    margin-top: 0.18rem;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.46));
    font-size: 0.78rem;
}

.live-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}

.live-summary-card {
    padding: 0.75rem 0.72rem;
    border-radius: 6px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.07));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.03));
}

.live-summary-label {
    display: block;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.42));
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.live-summary-value {
    display: block;
    margin-top: 0.3rem;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96));
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 0.95;
}

.live-timeout-dots {
    margin-top: 0.5rem;
}

.live-timeout-dots .timeout-dot {
    width: 14px;
    height: 4px;
    border-radius: 999px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.12));
    opacity: 1;
}

.live-timeout-dots .timeout-dot.used {
    background: rgba(255, 171, 71, 0.98);
}

.live-shooting-stats {
    display: grid;
    gap: 0.72rem;
    margin-top: auto;
}

.live-shooting-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    margin-bottom: 0.24rem;
}

.live-shooting-label {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.82));
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.live-shooting-value {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
    font-size: 0.74rem;
    font-weight: 700;
}

.live-shooting-track {
    position: relative;
    height: 5px;
    border-radius: 999px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.16));
    overflow: hidden;
}

.live-shooting-fill {
    display: block;
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffbe63 0%, #ffad45 55%, #ff9a2c 100%);
    box-shadow: var(--cc-light-shadow, 0 0 10px rgba(255, 173, 69, 0.24));
    transition: width 180ms ease;
}

.live-action-log-list {
    display: grid;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
    min-height: 0;
}

.live-action-log-item,
.live-action-log-empty {
    padding: 0.72rem 0.78rem;
    border-radius: 6px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.06));
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.03));
}

.live-action-log-item {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 0.65rem;
}

.live-action-log-body {
    min-width: 0;
}

.live-action-log-time {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.44));
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.live-action-log-title {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.94));
    font-size: 0.86rem;
    font-weight: 800;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.live-action-log-meta,
.live-action-log-empty {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.5));
    font-size: 0.72rem;
    margin-top: 0.12rem;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.live-bottom-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
    padding: 0.72rem 1rem 0.95rem;
    border-top: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(20, 20, 20, 0.98), rgba(12, 12, 12, 0.99)));
}

.live-bottom-btn {
    min-height: 50px;
    border-radius: 6px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(33, 33, 33, 0.98), rgba(15, 15, 15, 0.99)));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9));
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.live-bottom-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.34));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(44, 44, 44, 0.98), rgba(18, 18, 18, 0.99)));
}

.live-bottom-btn-accent {
    border-color: var(--cc-light-accent-border, rgba(255, 171, 71, 0.2));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(102, 74, 45, 0.98), rgba(73, 52, 31, 0.99)));
    color: var(--cc-light-accent, rgba(255, 189, 102, 0.98));
}

.live-bottom-btn-danger {
    border-color: var(--cc-light-accent-border, rgba(255, 118, 78, 0.18));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(72, 30, 18, 0.98), rgba(51, 22, 13, 0.99)));
    color: var(--cc-light-accent, rgba(255, 137, 95, 0.98));
}

.live-bottom-btn-muted {
    background: var(--cc-light-control, linear-gradient(180deg, rgba(57, 57, 57, 0.98), rgba(38, 38, 38, 0.99)));
    color: var(--cc-light-text, rgba(225, 238, 245, 0.92));
}

body.live-game-active .modal {
    background: var(--cc-light-scrim, rgba(6, 6, 6, 0.92));
    backdrop-filter: blur(5px);
}

body.live-game-active #boxScoreModal .modal-content.setup-surface,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-modal-content,
body.live-game-active #timeoutModal .timeout-modal-content,
body.live-game-active #freeThrowModal .modal-content,
body.live-game-active #shotLocationModal .modal-content.setup-surface,
body.live-game-active #pastGameShotChartModal .modal-content.setup-surface,
body.live-game-active #backupModal .modal-content.setup-surface,
body.live-game-active #substitutionModal .substitution-modal-content,
body.live-game-active #lineupModal .lineup-modal-content,
body.live-game-active #periodLineupReminderModal .period-lineup-reminder-content {
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08)) !important;
    box-shadow: var(--cc-light-shadow, 0 30px 64px rgba(0, 0, 0, 0.6)) !important;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(23, 23, 23, 0.98), rgba(10, 10, 10, 0.99))) !important;
}

body.live-game-active #boxScoreModal .modal-header,
body.live-game-active #playByPlayModal:not(.past-mode) .modal-header,
body.live-game-active #timeoutModal .modal-header,
body.live-game-active #pastGameShotChartModal .modal-header,
body.live-game-active #shotLocationModal .modal-header,
body.live-game-active #substitutionModal .modal-header,
body.live-game-active #lineupModal .modal-header,
body.live-game-active #periodLineupReminderModal .modal-header {
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.98));
}

body.live-game-active #boxScoreModal .modal-close,
body.live-game-active #playByPlayModal .modal-close,
body.live-game-active #timeoutModal .modal-close,
body.live-game-active #pastGameShotChartModal .modal-close,
body.live-game-active #shotLocationModal .modal-close,
body.live-game-active #substitutionModal .modal-close,
body.live-game-active #lineupModal .modal-close,
body.live-game-active #periodLineupReminderModal .modal-close {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62));
}

body.live-game-active #boxScoreModal .modal-close:hover,
body.live-game-active #playByPlayModal .modal-close:hover,
body.live-game-active #timeoutModal .modal-close:hover,
body.live-game-active #pastGameShotChartModal .modal-close:hover,
body.live-game-active #shotLocationModal .modal-close:hover,
body.live-game-active #substitutionModal .modal-close:hover,
body.live-game-active #lineupModal .modal-close:hover,
body.live-game-active #periodLineupReminderModal .modal-close:hover {
    color: var(--cc-light-accent, rgba(255, 183, 77, 0.98));
}

body.live-game-active #boxScoreModal .box-score,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-list,
body.live-game-active #pastGameShotChartModal .past-shot-chart-court-wrap,
body.live-game-active #timeoutModal .timeout-choice-card,
body.live-game-active #substitutionModal .sub-column,
body.live-game-active #substitutionModal .sub-pairings,
body.live-game-active #lineupModal .lineup-count-chip,
body.live-game-active #lineupModal .lineup-player-btn {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.08)) !important;
    background: var(--cc-light-control, linear-gradient(180deg, rgba(18, 18, 18, 0.96), rgba(8, 8, 8, 0.98))) !important;
    box-shadow: none !important;
}

body.live-game-active #boxScoreModal .stats-table thead th,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-group-title {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04)) !important;
    border-bottom-color: var(--cc-light-border, rgba(255, 255, 255, 0.08)) !important;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.62)) !important;
}

body.live-game-active #boxScoreModal .box-score-team-heading.home,
body.live-game-active #boxScoreModal .box-score-team-heading.away {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96)) !important;
}

body.live-game-active #boxScoreModal .stats-table tbody tr:nth-child(odd),
body.live-game-active #boxScoreModal .stats-table tbody tr:nth-child(even) {
    background: transparent !important;
}

body.live-game-active #boxScoreModal .stats-table td {
    border-bottom-color: var(--cc-light-border, rgba(255, 255, 255, 0.07)) !important;
}

body.live-game-active #boxScoreModal .stats-table tr:hover,
body.live-game-active #playByPlayModal:not(.past-mode) .play-row:hover {
    background: rgba(255, 152, 0, 0.08) !important;
}

body.live-game-active #boxScoreModal .stats-table td,
body.live-game-active #boxScoreModal .stats-table .player-name-col,
body.live-game-active #playByPlayModal:not(.past-mode) .play-row-text,
body.live-game-active #playByPlayModal:not(.past-mode) .play-row-score-values,
body.live-game-active #playByPlayModal:not(.past-mode) .play-row-badge,
body.live-game-active #timeoutModal .timeout-choice-team,
body.live-game-active #timeoutModal .timeout-choice-count,
body.live-game-active #pastGameShotChartModal .past-game-meta,
body.live-game-active #pastGameShotChartModal .past-shot-chart-footer,
body.live-game-active #pastGameShotChartModal .past-shot-chart-marker-info,
body.live-game-active #substitutionModal .sub-modal-team,
body.live-game-active #substitutionModal .sub-pairing-row,
body.live-game-active #substitutionModal .sub-modal-helper,
body.live-game-active #lineupModal .lineup-modal-subtitle,
body.live-game-active #periodLineupReminderModal .period-lineup-reminder-subtitle {
    color: var(--cc-light-text, rgba(255, 255, 255, 0.84)) !important;
}

body.live-game-active #playByPlayModal:not(.past-mode) .past-game-meta,
body.live-game-active #timeoutModal .timeout-modal-subtitle,
body.live-game-active #pastGameShotChartModal .past-shot-chart-empty,
body.live-game-active #shotLocationModal .shot-location-subtitle {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.54)) !important;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-time,
body.live-game-active #playByPlayModal:not(.past-mode) .play-row-score-head {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.46)) !important;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-group {
    border-bottom-color: var(--cc-light-border, rgba(255, 255, 255, 0.08)) !important;
    border-bottom: 1px solid var(--cc-light-blue-border, rgba(129, 151, 198, 0.28));
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row {
    border-top-color: var(--cc-light-border, rgba(255, 255, 255, 0.06)) !important;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-scoreboard,
body.live-game-active #playByPlayModal:not(.past-mode) .play-row-badge,
body.live-game-active #playByPlayModal:not(.past-mode) .play-row-badge.away {
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.08)) !important;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04)) !important;
    box-shadow: none !important;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-row-badge.home {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.18)) !important;
    background: rgba(255, 152, 0, 0.12) !important;
    color: var(--cc-light-accent, rgba(255, 206, 153, 0.98)) !important;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-controls,
body.live-game-active #pastGameShotChartModal .past-shot-chart-controls {
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08)) !important;
    border-radius: 12px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.03)) !important;
    box-shadow: none !important;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-controls label,
body.live-game-active #pastGameShotChartModal label {
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.7)) !important;
}

body.live-game-active #pastGameShotChartModal select option {
    background: var(--cc-light-control, #101010);
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-controls select,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-sort-btn,
body.live-game-active #pastGameShotChartModal select,
body.live-game-active #substitutionModal .sub-player-btn,
body.live-game-active #lineupModal .lineup-player-btn,
body.live-game-active #backupModal .btn,
body.live-game-active #timeoutModal .btn,
body.live-game-active #boxScoreModal .btn,
body.live-game-active #playByPlayModal .btn,
body.live-game-active #pastGameShotChartModal .btn,
body.live-game-active #shotLocationModal .btn,
body.live-game-active #freeThrowModal .btn,
body.live-game-active #periodLineupReminderModal .btn,
body.live-game-active #lineupModal .btn,
body.live-game-active #substitutionModal .btn {
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.1)) !important;
    background: var(--cc-light-control, linear-gradient(180deg, rgba(31, 31, 31, 0.98), rgba(12, 12, 12, 0.99))) !important;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.9)) !important;
    box-shadow: none !important;
}

body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-sort-btn:hover,
body.live-game-active #pastGameShotChartModal .btn:hover,
body.live-game-active #timeoutModal .btn:hover,
body.live-game-active #boxScoreModal .btn:hover,
body.live-game-active #playByPlayModal .btn:hover,
body.live-game-active #shotLocationModal .btn:hover,
body.live-game-active #freeThrowModal .btn:hover,
body.live-game-active #periodLineupReminderModal .btn:hover,
body.live-game-active #lineupModal .btn:hover,
body.live-game-active #substitutionModal .btn:hover,
body.live-game-active #substitutionModal .sub-player-btn:hover,
body.live-game-active #lineupModal .lineup-player-btn:hover,
body.live-game-active #timeoutModal .timeout-choice-card:hover {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.34)) !important;
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(41, 41, 41, 0.98), rgba(16, 16, 16, 0.99))) !important;
}

body.live-game-active #boxScoreModal .btn:not(.btn-secondary),
body.live-game-active #freeThrowModal .btn:not(.btn-danger),
body.live-game-active #periodLineupReminderModal .btn:not(.btn-secondary),
body.live-game-active #lineupModal .btn:not(.btn-secondary) {
    border-color: var(--cc-light-accent-border, rgba(255, 171, 71, 0.24)) !important;
    background: linear-gradient(180deg, #ffad57 0%, #f2862d 100%) !important;
    color: #1b1108 !important;
}

body.live-game-active #freeThrowModal .btn.btn-danger,
body.live-game-active #boxScoreModal .btn.btn-danger {
    border-color: var(--cc-light-accent-border, rgba(255, 118, 78, 0.2)) !important;
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(89, 34, 18, 0.98), rgba(64, 24, 12, 0.99))) !important;
    color: var(--cc-light-accent, rgba(255, 145, 99, 0.98)) !important;
}

body.live-game-active #substitutionModal .sub-player-number,
body.live-game-active #lineupModal .lineup-player-number {
    border-color: var(--cc-light-accent-border, rgba(255, 171, 71, 0.18)) !important;
    background: rgba(255, 171, 71, 0.12) !important;
    color: var(--cc-light-text, rgba(255, 255, 255, 0.96)) !important;
}

body.live-game-active #substitutionModal .sub-player-btn.selected-out,
body.live-game-active #substitutionModal .sub-player-btn.selected-in,
body.live-game-active #lineupModal .lineup-player-btn.selected {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.36)) !important;
    background: rgba(255, 152, 0, 0.12) !important;
}

body.live-game-active #boxScoreModal .box-score,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-list,
body.live-game-active #substitutionModal .sub-player-list,
body.live-game-active #lineupModal .lineup-player-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 152, 0, 0.6) rgba(255, 255, 255, 0.05);
}

body.live-game-active #boxScoreModal .box-score::-webkit-scrollbar,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-list::-webkit-scrollbar,
body.live-game-active #substitutionModal .sub-player-list::-webkit-scrollbar,
body.live-game-active #lineupModal .lineup-player-list::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

body.live-game-active #boxScoreModal .box-score::-webkit-scrollbar-track,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-list::-webkit-scrollbar-track,
body.live-game-active #substitutionModal .sub-player-list::-webkit-scrollbar-track,
body.live-game-active #lineupModal .lineup-player-list::-webkit-scrollbar-track {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.05));
    border-radius: 999px;
}

body.live-game-active #boxScoreModal .box-score::-webkit-scrollbar-thumb,
body.live-game-active #playByPlayModal:not(.past-mode) .play-by-play-list::-webkit-scrollbar-thumb,
body.live-game-active #substitutionModal .sub-player-list::-webkit-scrollbar-thumb,
body.live-game-active #lineupModal .lineup-player-list::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 171, 71, 0.82), rgba(214, 106, 17, 0.86));
    border-radius: 999px;
}

body.live-game-active #timeoutModal .timeout-dot,
body.live-game-active .timeout-dot {
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.14)) !important;
}

body.live-game-active #timeoutModal .timeout-dot.used,
body.live-game-active .timeout-dot.used {
    background: rgba(255, 171, 71, 0.98) !important;
}

@media (max-width: 1180px) {
    .live-shell {
        grid-template-columns: 140px minmax(0, 1fr);
    }

    .scoreboard-bar {
        padding: 0.88rem 0.95rem 0.74rem;
    }

    .score-display {
        grid-template-columns: minmax(0, 1fr) 164px minmax(0, 1fr);
        gap: 1rem;
    }

    .team-score.home {
        gap: 0.75rem;
    }

    .team-score.home,
    .team-score.away {
        width: 100%;
    }

    .score-team-name {
        font-size: clamp(1.95rem, 1.5rem + 0.9vw, 2.55rem);
    }

    #homeScore,
    #awayScore {
        font-size: clamp(4.8rem, 3.8rem + 1.8vw, 5.8rem);
    }

    .period-clock {
        width: 164px;
        min-height: 104px;
    }

    .period {
        font-size: 1.95rem;
    }

    .period-clock .clock {
        font-size: clamp(2.9rem, 2.35rem + 0.95vw, 3.45rem);
    }

    .live-content {
        grid-template-columns: minmax(0, 1fr) 258px;
        gap: 0.85rem;
        padding: 0.56rem 0.72rem 0.48rem;
    }

    #homeOnCourt.live-player-list .player-card {
        grid-template-columns: minmax(160px, 0.33fr) minmax(0, 1fr);
        gap: 0.3rem;
        padding: 0.28rem 0.38rem;
    }

    #homeOnCourt.live-player-list .player-number {
        min-width: 42px;
        width: 42px;
        font-size: 1.2rem;
    }

    #homeOnCourt.live-player-list .player-name {
        font-size: 0.88rem;
    }

    #homeOnCourt.live-player-list .player-meta,
    #homeOnCourt.live-player-list .player-summary,
    #homeOnCourt.live-player-list .action-btn,
    .live-shooting-label,
    .live-shooting-value,
    .live-action-log-time,
    .live-action-log-meta,
    .live-summary-label {
        font-size: 0.62rem;
    }

    .lineup-mini-btn {
        min-height: 40px;
        padding: 0.58rem 0.9rem;
    }

    .live-summary-value {
        font-size: 1.55rem;
    }

    .live-bottom-bar {
        gap: 0.55rem;
        padding: 0.62rem 0.85rem 0.85rem;
    }

    .live-bottom-btn {
        min-height: 44px;
        font-size: 0.74rem;
    }
}

@media (max-width: 980px) {
    body.live-game-active {
        overflow: auto;
    }

    .game-screen {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .live-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 100vh;
    }

    .live-side-menu {
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    }

    .live-side-head {
        display: none;
    }

    .live-side-nav {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
        overflow-x: auto;
    }

    .live-nav-label,
    #gameScreen.live-nav-collapsed .live-nav-label {
        display: inline;
    }

    .live-shell-main {
        grid-template-rows: auto auto auto;
        overflow: visible;
    }

    .score-display,
    .live-content,
    .live-bottom-bar {
        grid-template-columns: 1fr;
    }

    .live-content {
        overflow: visible;
    }

    .live-main-column,
    .live-side-column,
    .live-player-list {
        overflow: visible;
    }

    #homeOnCourt.live-player-list {
        grid-template-rows: none;
        grid-auto-rows: minmax(84px, auto);
    }

    #homeOnCourt.live-player-list .player-card {
        grid-template-columns: 1fr;
    }

    #homeOnCourt.live-player-list .player-actions {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .live-lineup-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .live-lineup-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 980px) and (orientation: portrait) {
    body.live-game-active {
        overflow: hidden;
    }

    .game-screen {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
    }

    .live-shell,
    #gameScreen.live-nav-collapsed .live-shell {
        grid-template-columns: 58px minmax(0, 1fr);
        height: 100dvh;
        min-height: 100dvh;
    }

    .live-side-menu {
        height: 100dvh;
        padding: 0.55rem 0.38rem;
        gap: 0.45rem;
        border-right: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
        border-bottom: none;
    }

    .live-side-head {
        display: none;
    }

    .live-side-nav {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        gap: 0.32rem;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .live-nav-label,
    #gameScreen.live-nav-collapsed .live-nav-label {
        display: none;
    }

    .live-nav-item,
    #gameScreen.live-nav-collapsed .live-nav-item {
        justify-content: center;
        min-height: 40px;
        padding: 0.68rem 0.25rem;
    }

    .live-nav-icon {
        width: 16px;
        font-size: 0.82rem;
    }

    .live-shell-main {
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
    }

    .scoreboard-bar {
        padding: 0.72rem 0.78rem 0.6rem;
    }

    .score-display {
        grid-template-columns: minmax(0, 1fr) 108px minmax(0, 1.08fr);
        gap: 0.58rem;
    }

    .team-score {
        min-height: 74px;
    }

    .team-score.home {
        grid-template-columns: 4px minmax(84px, 1fr) minmax(44px, auto);
        gap: 0.42rem;
    }

    .team-score.away {
        justify-self: stretch;
        grid-template-columns: minmax(52px, auto) minmax(66px, 1fr) minmax(168px, auto);
        gap: 0.34rem;
        align-items: center;
    }

    .team-score.away .away-score-wrap {
        align-self: center;
    }

    .team-score.away .away-score-actions {
        grid-template-columns: repeat(2, minmax(50px, 1fr));
        gap: 0.34rem;
        align-self: center;
    }

    .score-team-accent {
        width: 4px;
        height: 46px;
    }

    .score-team-meta {
        gap: 0.16rem;
    }

    .score-team-name {
        font-size: clamp(1rem, 0.82rem + 0.82vw, 1.34rem);
        line-height: 0.94;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .score-team-role {
        font-size: 0.56rem;
        letter-spacing: 0.18em;
    }

    #homeScore,
    #awayScore {
        font-size: clamp(3rem, 2.45rem + 1.6vw, 4rem);
        min-width: 2.2ch;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

    .away-score-btn {
        min-width: 0;
        min-height: 50px;
        padding: 0.4rem 0.28rem;
        font-size: 0.72rem;
    }

    .period-clock {
        width: 108px;
        min-height: 82px;
        padding: 0.56rem 0.7rem 0.62rem;
    }

    .period {
        font-size: 1.3rem;
    }

    .period-clock .clock {
        font-size: clamp(2rem, 1.6rem + 1vw, 2.6rem);
    }

    .live-content {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 0.62rem;
        padding: 0.46rem 0.62rem 0.38rem;
        overflow: hidden;
    }

    .live-main-column,
    .live-side-column,
    #homeOnCourt.live-player-list {
        min-height: 0;
        overflow: hidden;
    }

    .live-main-column {
        grid-template-rows: auto minmax(0, 1fr);
        gap: 0.4rem;
    }

    .live-lineup-header {
        align-items: center;
        flex-direction: row;
        gap: 0.7rem;
    }

    .live-panel-title,
    .live-side-panel-title {
        font-size: 1.6rem;
    }

    .live-lineup-actions {
        justify-content: flex-end;
        flex-wrap: nowrap;
        gap: 0.35rem;
    }

    .lineup-mini-btn {
        min-height: 34px;
        padding: 0.48rem 0.68rem;
        font-size: 0.62rem;
    }

    .save-status-chip {
        min-height: 28px;
        padding: 0.28rem 0.5rem;
        font-size: 0.58rem;
    }

    #homeOnCourt.live-player-list {
        grid-template-rows: repeat(5, minmax(0, 1fr));
        grid-auto-rows: 0;
        gap: 0.34rem;
        padding-right: 0;
    }

    #homeOnCourt.live-player-list .player-card {
        grid-template-columns: minmax(132px, 0.35fr) minmax(0, 1fr);
        gap: 0.28rem;
        padding: 0.24rem 0.34rem;
    }

    #homeOnCourt.live-player-list .player-info {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 0.45rem;
        padding: 0;
    }

    #homeOnCourt.live-player-list .player-number {
        width: 36px;
        min-width: 36px;
        font-size: 1rem;
        padding: 0.22rem 0.12rem;
    }

    #homeOnCourt.live-player-list .player-name {
        font-size: 0.82rem;
    }

    #homeOnCourt.live-player-list .player-meta,
    #homeOnCourt.live-player-list .player-summary {
        font-size: 0.55rem;
        line-height: 1.02;
    }

    #homeOnCourt.live-player-list .player-actions {
        grid-template-columns: repeat(9, minmax(0, 1fr));
        gap: 0.12rem;
    }

    #homeOnCourt.live-player-list .action-btn {
        padding: 0.14rem 0.08rem;
        font-size: 0.54rem;
    }

    .live-side-column {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: none;
        gap: 0.62rem;
    }

    .live-side-panel {
        padding: 0.72rem 0.68rem;
    }

    .live-side-panel-head {
        margin-bottom: 0.55rem;
    }

    .live-side-panel-subtitle {
        font-size: 0.66rem;
    }

    .live-summary-grid {
        gap: 0.5rem;
        margin-bottom: 0.58rem;
    }

    .live-summary-card {
        padding: 0.58rem;
    }

    .live-summary-value {
        font-size: 1.38rem;
    }

    .live-shooting-stats {
        gap: 0.56rem;
    }

    .live-shooting-label,
    .live-shooting-value,
    .live-action-log-time,
    .live-action-log-meta,
    .live-summary-label {
        font-size: 0.6rem;
    }

    .live-action-log-item,
    .live-action-log-empty {
        padding: 0.56rem 0.6rem;
    }

    .live-action-log-title {
        font-size: 0.72rem;
    }

    .live-bottom-bar {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.45rem;
        padding: 0.5rem 0.62rem 0.68rem;
    }

    .live-bottom-btn {
        min-height: 40px;
        font-size: 0.66rem;
    }
}

@media (max-width: 700px) and (orientation: portrait) {
    .live-lineup-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .live-lineup-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .live-side-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 430px) and (orientation: portrait) {
    .live-shell,
    #gameScreen.live-nav-collapsed .live-shell {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .live-side-menu {
        padding: 0.42rem 0.22rem;
    }

    .live-nav-item,
    #gameScreen.live-nav-collapsed .live-nav-item {
        min-height: 36px;
        padding: 0.56rem 0.18rem;
    }

    .scoreboard-bar {
        padding: 0.62rem 0.58rem 0.52rem;
    }

    .score-display {
        grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr);
        gap: 0.45rem;
    }

    .team-score.home {
        grid-template-columns: 3px minmax(68px, 1fr) minmax(38px, auto);
        gap: 0.3rem;
    }

    .team-score.away {
        grid-template-columns: minmax(44px, auto) minmax(54px, 1fr) minmax(144px, auto);
        gap: 0.24rem;
    }

    .score-team-name {
        font-size: clamp(0.88rem, 0.78rem + 0.5vw, 1.08rem);
    }

    .score-team-role {
        font-size: 0.5rem;
        letter-spacing: 0.12em;
    }

    #homeScore,
    #awayScore {
        font-size: clamp(2.6rem, 2.2rem + 1vw, 3.2rem);
        min-width: 2.4ch;
    }

    .team-score.away .away-score-actions {
        grid-template-columns: repeat(2, minmax(42px, 1fr));
        gap: 0.22rem;
    }

    .away-score-btn {
        min-height: 44px;
        padding: 0.34rem 0.2rem;
        font-size: 0.66rem;
    }

    .period-clock {
        width: 92px;
        min-height: 72px;
        padding: 0.48rem 0.5rem 0.54rem;
    }

    .period {
        font-size: 1.1rem;
    }

    .period-clock .clock {
        font-size: clamp(1.7rem, 1.5rem + 0.7vw, 2rem);
    }

    .live-content {
        padding: 0.4rem 0.5rem 0.34rem;
        gap: 0.52rem;
    }

    .live-lineup-header {
        gap: 0.55rem;
    }

    .live-panel-title,
    .live-side-panel-title {
        font-size: 1.38rem;
    }

    .live-lineup-actions {
        gap: 0.28rem;
    }

    .lineup-mini-btn {
        min-height: 32px;
        padding: 0.42rem 0.54rem;
        font-size: 0.58rem;
    }

    #homeOnCourt.live-player-list .player-card {
        grid-template-columns: minmax(118px, 0.36fr) minmax(0, 1fr);
        gap: 0.22rem;
        padding: 0.2rem 0.28rem;
    }

    #homeOnCourt.live-player-list .player-info {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 0.38rem;
    }

    #homeOnCourt.live-player-list .player-number {
        width: 32px;
        min-width: 32px;
        font-size: 0.9rem;
    }

    #homeOnCourt.live-player-list .player-name {
        font-size: 0.74rem;
    }

    #homeOnCourt.live-player-list .player-meta,
    #homeOnCourt.live-player-list .player-summary {
        font-size: 0.5rem;
    }

    #homeOnCourt.live-player-list .action-btn {
        font-size: 0.48rem;
    }

    .live-side-panel {
        padding: 0.66rem 0.6rem;
    }

    .live-bottom-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.38rem;
        padding: 0.46rem 0.5rem 0.6rem;
    }

    .live-bottom-btn {
        min-height: 38px;
        font-size: 0.62rem;
    }
}

/* Past Games: responsive archive presentation, isolated from game views. */
body:not(.live-game-active) #pastGamesScreen.past-games-screen {
    --pg-edge: rgba(255, 255, 255, 0.09);
    --pg-muted: rgba(255, 255, 255, 0.55);
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .tm-hero {
    padding-bottom: 24px;
    margin-bottom: 0;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .tm-module {
    color: var(--cc-light-accent, #f5a44b);
    font-size: 0.68rem;
    letter-spacing: 0.18em;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .tm-title-row {
    display: block;
    margin-top: 12px;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .tm-title {
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.1;
    letter-spacing: 0.025em;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .tm-portal {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--pg-muted);
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-panel {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-toolbar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 0 0 18px;
    margin-bottom: 0;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .tm-pool {
    width: auto;
    border: 0;
    padding: 0;
    background: none;
    gap: 8px;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .tm-pool-label {
    font-size: 0.75rem;
    letter-spacing: 0;
    color: var(--pg-muted);
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-clear-btn {
    width: auto;
    min-height: 44px;
    padding: 8px 12px;
    border-color: var(--pg-edge);
    background: transparent;
    box-shadow: none;
    color: var(--cc-light-danger, #d4a5a5);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr));
    gap: 16px;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-card {
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--pg-edge);
    border-radius: 18px;
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(27, 27, 27, 0.985), rgba(16, 16, 16, 0.995)));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.035));
    gap: 20px;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-card-top {
    align-items: center;
    gap: 6px;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-pill {
    max-width: 100%;
    overflow-wrap: anywhere;
    font-size: 0.68rem;
    letter-spacing: 0.015em;
    padding: 5px 8px;
    border-radius: 6px;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-pill:first-child {
    padding-left: 0;
    border-color: transparent;
    background: none;
    color: var(--pg-muted);
    margin-right: auto;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-matchup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 24px 0 4px;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-team-name {
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    text-align: left;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-team-name:last-child {
    text-align: right;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-scoreline {
    min-width: 0;
    font-size: clamp(1.7rem, 2.6vw, 2.5rem);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-align: center;
    color: var(--cc-light-accent, #ffb35c);
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-card-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding-top: 16px;
    border-top: 1px solid var(--pg-edge);
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-card-meta {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    color: var(--pg-muted);
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.14));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(32, 32, 32, 0.92) 0%, rgba(10, 10, 10, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.06));
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn-danger {
    border-color: var(--cc-light-danger-border, rgba(255, 112, 112, 0.35));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(90, 25, 32, 0.92) 0%, rgba(35, 10, 14, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 228, 232, 0.96));
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen button:focus-visible {
    outline: 2px solid var(--cc-light-accent-border, #ffb35c);
    outline-offset: 3px;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn:hover:not(.btn-danger) {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(40, 40, 40, 0.98) 0%, rgba(14, 14, 14, 0.99) 100%));
    color: var(--cc-light-text, rgba(255, 248, 238, 0.96));
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn-danger:hover {
    border-color: var(--cc-light-danger-border, rgba(255, 132, 132, 0.5));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(112, 31, 40, 0.95) 0%, rgba(44, 12, 17, 0.99) 100%));
    color: var(--cc-light-text, #ffffff);
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-pagination {
    padding-top: 20px;
    margin-top: 20px;
    border-top: 1px solid var(--pg-edge);
    gap: 12px;
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .dash-empty {
    padding: 56px 24px;
    border: 1px dashed var(--pg-edge);
    border-radius: 18px;
    background: var(--cc-light-surface, #141414);
    text-align: center;
    color: var(--pg-muted);
}
@media (max-width: 767px) {
    body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-card {
        padding: 16px;
    }
    body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-matchup {
        gap: 10px;
        padding-top: 20px;
    }
    body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-team-name {
        font-size: 0.85rem;
    }
    body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions {
        grid-template-columns: 1fr 1fr;
    }
    body:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn-danger {
        grid-column: 1 / -1;
    }
}

/* Saved Game Info: tracked-team shooting and responsive actions. */
body:not(.live-game-active) #pastGameInfoModal .modal-content {
    padding: clamp(20px, 3vw, 32px);
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.1));
    border-radius: 22px;
    background: var(--cc-light-surface, linear-gradient(160deg, #1b1b1b, #101010));
}
body:not(.live-game-active) #pastGameInfoModal .modal-header {
    padding-right: 44px;
    font-size: 2rem;
    letter-spacing: 0.025em;
    margin-bottom: 8px;
}
body:not(.live-game-active) #pastGameInfoModal .past-game-meta {
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.55));
    font-size: 0.82rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
body:not(.live-game-active) #pastGameInfoModal .modal-close {
    width: 44px;
    height: 44px;
    color: var(--cc-light-subtle, #c4c4c4);
    font-size: 1.4rem;
}
body:not(.live-game-active) #pastGameInfoModal .pg-info-scoreboard {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    padding: 24px 0;
    gap: 16px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
    border-radius: 0;
}
body:not(.live-game-active) #pastGameInfoModal .pg-info-team {
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
}
body:not(.live-game-active) #pastGameInfoModal .pg-info-team-away {
    text-align: right;
}
body:not(.live-game-active) #pastGameInfoModal .pg-info-team strong {
    font-size: 1rem;
    line-height: 1.4;
}
body:not(.live-game-active) #pastGameInfoModal .pg-info-score {
    font-size: clamp(2rem, 5vw, 3.5rem);
    white-space: nowrap;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--cc-light-accent, #ffb35c);
}
body:not(.live-game-active) #pastGameInfoModal .pg-info-section-title {
    margin: 24px 0 12px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--cc-light-subtle, rgba(255, 255, 255, 0.7));
}
body:not(.live-game-active) #pastGameInfoModal .pg-info-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 0;
}
body:not(.live-game-active) #pastGameInfoModal .pg-info-card {
    padding: 18px;
    border-radius: 12px;
    background: var(--cc-light-surface, #1d1b18);
    border: 1px solid var(--cc-light-accent-border, rgba(255, 152, 0, 0.16));
}
body:not(.live-game-active) #pastGameInfoModal .pg-info-card-label {
    font-size: 0.72rem;
    letter-spacing: 0;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.55));
}
body:not(.live-game-active) #pastGameInfoModal .pg-info-card-value {
    font-size: 1.15rem;
    font-variant-numeric: tabular-nums;
    color: var(--cc-light-accent, #ffbd72);
}
body:not(.live-game-active) #pastGameInfoModal .modal-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
}
body:not(.live-game-active) #pastGameInfoModal .modal-actions .btn {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 10px;
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
    border-radius: 10px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.1));
    background: var(--cc-light-control, #242424);
    box-shadow: none;
    color: var(--cc-light-text, #e5e5e5);
}
body:not(.live-game-active) #pastGameInfoModal .modal-actions .btn:first-child {
    color: var(--cc-light-accent, #ffbd72);
    background: rgba(255, 152, 0, 0.12);
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.3));
}
body:not(.live-game-active) #pastGameInfoModal .past-game-export-btn {
    grid-column: span 2;
}
body:not(.live-game-active) #pastGameInfoModal .modal-actions .btn-danger {
    color: var(--cc-light-danger, #d4a5a5);
    background: transparent;
    border-color: transparent;
}
body:not(.live-game-active) #pastGameInfoModal button:focus-visible {
    outline: 2px solid var(--cc-light-accent-border, #ffb35c);
    outline-offset: 3px;
}
@media (max-width: 600px) {
    body:not(.live-game-active) #pastGameInfoModal .pg-info-scoreboard {
        gap: 10px;
    }
    body:not(.live-game-active) #pastGameInfoModal .pg-info-team strong {
        font-size: 0.85rem;
    }
    body:not(.live-game-active) #pastGameInfoModal .pg-info-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    body:not(.live-game-active) #pastGameInfoModal .pg-info-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px;
    }
    body:not(.live-game-active) #pastGameInfoModal .pg-info-card-value {
        margin: 0;
        font-size: 1rem;
    }
    body:not(.live-game-active) #pastGameInfoModal .modal-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Settings visual consistency, scoped to non-live pages only.
 * Do not extend this scope to Settings, the shared shell, or live-game dialogs.
 * Primary: save/create/begin. Secondary: edit/export/filter.
 * Destructive: delete/clear/replace. Ghost: back/close/help/navigation links.
 * Geometry and responsive layout remain owned by the existing page rules.
 */

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) {
    --page-surface: #151515;
    --page-input: #0f0f0f;
    --page-control: #202020;
    --page-control-hover: #2b2b2b;
    --page-border: var(--dash-border, rgba(255, 255, 255, 0.08));
    --page-control-border: #3a4048;
    --page-text: var(--cc-dash-text, #f5f7fa);
    --page-muted: #969da6;
    --page-accent: var(--cc-dash-accent, #ff9f0a);
    --page-accent-hover: #ffb238;
    --page-danger: #ff7e87;
    color: var(--page-text);
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.auth-card, .onboarding-card, .tm-panel, .dash-panel, .season-panel, .season-analytics-section, .season-analytics-card, .season-analytics-leader-card, .season-metric-card, .season-player-hero, .season-player-overview-card, .season-player-detail-panel, .season-analytics-filter-panel, .modal-content) {
    background: var(--page-surface);
    border-color: var(--page-border);
    border-radius: 16px;
    box-shadow: none;
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.tm-team-card, .lh-league-card, .manager-item, .season-margin-game-card, .onboarding-highlight, .sg-shot-chart-card, .season-hot-zones-court-card, .season-secondary-item, .form-section.compact) {
    background: var(--page-input);
    border-color: var(--page-border);
    border-radius: 8px;
    box-shadow: none;
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.tm-panel-title, .dash-panel-title, .season-panel-title, .season-analytics-section h3, .modal-header, .onboarding-step-title, .auth-card-title) {
    color: var(--page-text);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.tm-panel-sub, .dash-panel-sub, .tm-team-sub, .lh-league-rules, .season-panel-subtitle, .season-analytics-note, .onboarding-step-text, .auth-card-sub, .settings-note) {
    color: var(--page-muted);
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.form-group > label, .auth-label, .season-filter-label) {
    color: var(--cc-light-text, #c5cbd2);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(select, textarea, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="date"] ) {
    background: var(--page-input);
    border-color: var(--cc-light-border, #343940);
    border-radius: 8px;
    color: var(--cc-light-text, #f0f2f5);
    box-shadow: none;
    font-family: 'Inter', sans-serif;
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) select option {
    background: var(--page-surface);
    color: var(--page-text);
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(input, textarea)::placeholder {
    color: var(--cc-light-muted, #8e949d);
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.btn, .mini-btn, .tm-action-btn, .auth-primary, .auth-provider, .league-builder-option, .season-combination-page-btn, .season-view-tab, .season-view-toggle-btn, .roster-mode-btn) {
    background: var(--page-control);
    border-color: var(--page-control-border);
    border-radius: 8px;
    color: var(--cc-light-text, #e7ebf0);
    box-shadow: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.btn, .mini-btn, .tm-action-btn, .auth-primary, .auth-provider, .league-builder-option, .season-combination-page-btn, .season-view-tab, .season-view-toggle-btn, .roster-mode-btn):hover:not(:disabled) {
    background: var(--page-control-hover);
    border-color: var(--cc-light-border, #535c66);
    color: var(--page-text);
    box-shadow: none;
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.auth-primary, .roster-mode-btn, [data-action="startGame"], [data-action="continueOnboarding"], [data-action="saveOnboardingLeague"], [data-action="saveOnboardingTeam"], [data-action="finishOnboardingToDashboard"], [data-action="saveNewLeague"], [data-action="openOpponentModal"], [data-action="saveOpponentFromModal"], [data-action="confirmGameRoster"], [data-action="savePlayerFromModal"], [data-action="saveTeamManagerRoster"], [data-action="openTeamManagerModal"], [data-action="openCreateLeagueModal"], #playerManagementScreen [data-action="openPlayerEditorModal"].tm-action-primary) {
    background: var(--page-accent);
    border-color: var(--page-accent);
    color: var(--page-surface);
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.auth-primary, .roster-mode-btn, [data-action="startGame"], [data-action="continueOnboarding"], [data-action="saveOnboardingLeague"], [data-action="saveOnboardingTeam"], [data-action="finishOnboardingToDashboard"], [data-action="saveNewLeague"], [data-action="openOpponentModal"], [data-action="saveOpponentFromModal"], [data-action="confirmGameRoster"], [data-action="savePlayerFromModal"], [data-action="saveTeamManagerRoster"], [data-action="openTeamManagerModal"], [data-action="openCreateLeagueModal"], #playerManagementScreen [data-action="openPlayerEditorModal"].tm-action-primary):hover:not(:disabled) {
    background: var(--page-accent-hover);
    border-color: var(--page-accent-hover);
    color: var(--page-surface);
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.danger, .btn-danger, [data-action="clearAllPastGames"], [data-action="deleteSelectedPastGame"], [data-action="deleteLeagueFromHub"], [data-action="deleteTeamManagerRoster"], [data-action="deleteManagedPlayer"], [data-action="replaceRosterFromModal"]) {
    background: var(--cc-light-danger-soft, #301c22);
    border-color: var(--cc-light-danger-border, #75404a);
    color: var(--page-danger);
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.danger, .btn-danger, [data-action="clearAllPastGames"], [data-action="deleteSelectedPastGame"], [data-action="deleteLeagueFromHub"], [data-action="deleteTeamManagerRoster"], [data-action="deleteManagedPlayer"], [data-action="replaceRosterFromModal"]):hover:not(:disabled) {
    background: var(--cc-light-danger-soft, #42232b);
    border-color: var(--page-danger);
    color: var(--cc-light-danger, #ffa1a8);
}

body:not(.live-game-active) #teamManagerScreen .player-manager-table tbody tr.is-inactive,
body:not(.live-game-active) #teamManagerScreen .player-card-item.is-inactive {
    background: rgba(255, 255, 255, 0.035);
    border-color: var(--page-control-border);
}

body:not(.live-game-active) #teamManagerScreen .player-manager-table tbody tr.is-inactive td,
body:not(.live-game-active) #teamManagerScreen .player-card-item.is-inactive .manager-item-meta {
    color: var(--page-muted);
}

body:not(.live-game-active) #teamManagerScreen .player-manager-table tbody tr.is-inactive td:first-child {
    box-shadow: inset 3px 0 0 var(--page-muted);
}

body:not(.live-game-active) #teamManagerScreen .player-status-btn.is-inactive,
body:not(.live-game-active) #teamManagerScreen .player-card-status.is-inactive {
    color: var(--page-muted);
}

body:not(.live-game-active) #teamManagerScreen .mini-btn.danger {
    background: var(--cc-light-danger-soft, #301c22);
    border-color: var(--cc-light-danger-border, #75404a);
    color: var(--page-danger);
}

body:not(.live-game-active) #teamManagerScreen .mini-btn.danger:hover:not(:disabled) {
    background: var(--cc-light-danger-soft, #42232b);
    border-color: var(--page-danger);
    color: var(--cc-light-danger, #ffa1a8);
}

body:not(.live-game-active) #teamManagerScreen .manager-item-actions .mini-btn {
    min-width: 88px;
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.14));
    background: var(--cc-light-control, linear-gradient(180deg, rgba(32, 32, 32, 0.92) 0%, rgba(10, 10, 10, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

body:not(.live-game-active) #teamManagerScreen .manager-item-actions .mini-btn:hover:not(:disabled) {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(46, 46, 46, 0.94) 0%, rgba(12, 12, 12, 0.99) 100%));
}

body:not(.live-game-active) #teamManagerScreen .manager-item-actions .mini-btn.danger {
    border-color: var(--cc-light-danger-border, rgba(255, 112, 112, 0.35));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(90, 25, 32, 0.92) 0%, rgba(35, 10, 14, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 228, 232, 0.96));
}

body:not(.live-game-active) #teamManagerScreen .manager-item-actions .mini-btn.danger:hover:not(:disabled) {
    border-color: var(--page-danger);
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(112, 31, 40, 0.95) 0%, rgba(44, 12, 17, 0.99) 100%));
    color: var(--cc-light-danger, #ffa1a8);
}

body:not(.live-game-active) #teamManagerScreen .tm-team-actions .mini-btn.danger {
    border-color: var(--cc-light-danger-border, rgba(255, 112, 112, 0.35));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(90, 25, 32, 0.92) 0%, rgba(35, 10, 14, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 228, 232, 0.96));
}

body:not(.live-game-active) #teamManagerScreen .tm-team-actions .mini-btn.danger:hover:not(:disabled) {
    border-color: var(--page-danger);
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(112, 31, 40, 0.95) 0%, rgba(44, 12, 17, 0.99) 100%));
    color: var(--cc-light-danger, #ffa1a8);
}

body:not(.live-game-active) #teamManagerScreen .player-table-wrap {
    background: var(--cc-bg);
    border-color: var(--cc-border);
}

body:not(.live-game-active) #teamManagerScreen .player-manager-table {
    background: var(--cc-bg);
}

body:not(.live-game-active) #teamManagerScreen .player-manager-table thead th {
    background: var(--cc-control);
    padding: 0.75rem 0.5rem;
    text-align: left;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 2px solid var(--cc-border);
    color: var(--cc-text-subtle);
    font-weight: 600;
    text-decoration: underline dotted rgba(255, 183, 77, 0.45);
    text-underline-offset: 0.18rem;
}

body:not(.live-game-active) #teamManagerScreen .player-table-sort-btn {
    appearance: none;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    text-transform: inherit;
    text-decoration: inherit;
    cursor: pointer;
}

body:not(.live-game-active) #teamManagerScreen .player-table-sort-btn:hover,
body:not(.live-game-active) #teamManagerScreen .player-table-sort-btn.is-active {
    color: var(--page-accent);
}

body:not(.live-game-active) #teamManagerScreen .player-manager-table tbody tr:nth-child(odd) {
    background: var(--cc-surface);
}

body:not(.live-game-active) #teamManagerScreen .player-manager-table tbody tr:nth-child(even) {
    background: var(--cc-surface-raised);
}

body:not(.live-game-active) #teamManagerScreen .player-manager-table tbody tr:hover {
    background: var(--cc-control-hover);
}

body:not(.live-game-active) #teamManagerScreen .player-manager-table td {
    border-bottom-color: var(--cc-border);
    color: var(--cc-text);
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.modal-close, .auth-link, .auth-legal-link, .auth-icon-btn, .dash-link, .dash-help-button, [data-action="backOnboarding"], [data-action="backToSeasonStatsScreen"], [data-action="backToTeamManagerFromPlayers"], [data-action="closePlayerEditorModal"], [data-action="closeCreateLeagueModal"], [data-action="closeTeamManagerModal"], [data-action="closeReplaceRosterModal"], [data-action="closePastGameDetailModal"], [data-action="closePastGameInfoModal"], [data-action="closePastGameRecapModal"], [data-action="closePastGameShotChartModal"]) {
    background: transparent;
    border-color: transparent;
    color: var(--cc-light-subtle, #aeb6bf);
    box-shadow: none;
    text-shadow: none;
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.modal-close, .auth-link, .auth-legal-link, .auth-icon-btn, .dash-link, .dash-help-button, [data-action="backOnboarding"], [data-action="backToSeasonStatsScreen"], [data-action="backToTeamManagerFromPlayers"], [data-action="closePlayerEditorModal"], [data-action="closeCreateLeagueModal"], [data-action="closeTeamManagerModal"], [data-action="closeReplaceRosterModal"], [data-action="closePastGameDetailModal"], [data-action="closePastGameInfoModal"], [data-action="closePastGameRecapModal"], [data-action="closePastGameShotChartModal"]):hover:not(:disabled) {
    background: var(--cc-light-control-hover, #262626);
    border-color: transparent;
    color: var(--cc-light-accent, #ffb341);
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.league-builder-option, .season-view-tab, .season-view-toggle-btn, .roster-mode-btn):is(.active, [aria-selected="true"], [aria-pressed="true"]) {
    background: var(--cc-light-accent-soft, #302619);
    border-color: var(--page-accent);
    color: var(--cc-light-accent, #ffb341);
    box-shadow: none;
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(button, select, input, textarea, a):focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 3px;
    box-shadow: none;
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) button:disabled {
    opacity: 0.45;
    cursor: default;
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.stats-table, .season-analytics-shooting-table, .season-analytics-game-table) th {
    background: var(--page-control);
    border-color: var(--page-border);
    color: var(--cc-light-text, #c5cbd2);
}

body:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.stats-table, .season-analytics-shooting-table, .season-analytics-game-table) td {
    border-color: var(--page-border);
}

/* Light theme tokens. The saved preference is applied to both the document
 * and body so screens loaded after startup share the same palette. */
html[data-theme="light"], body[data-theme="light"] {
    color-scheme: light;
    /* Legacy component rules use these light-only aliases with their original
       dark colors as fallbacks. This keeps the cascade, responsive overrides,
       and interaction states intact while sharing one accessible light palette. */
    --cc-light-text: var(--cc-text);
    --cc-light-subtle: var(--cc-text-subtle);
    --cc-light-muted: var(--cc-text-muted);
    --cc-light-surface: var(--cc-surface);
    --cc-light-raised: var(--cc-surface-raised);
    --cc-light-control: var(--cc-control);
    --cc-light-control-hover: var(--cc-control-hover);
    --cc-light-border: var(--cc-border);
    --cc-light-accent: var(--cc-accent);
    --cc-light-success: var(--cc-success);
    --cc-light-danger: var(--cc-danger);
    --cc-light-blue: #595959;
    --cc-light-purple: #555555;
    --cc-light-accent-border: #c9904b;
    --cc-light-success-border: #5c9a78;
    --cc-light-danger-border: #ca7b85;
    --cc-light-blue-border: #7396c9;
    --cc-light-purple-border: #a48ac5;
    --cc-light-accent-soft: #fff2df;
    --cc-light-success-soft: #e8f5ed;
    --cc-light-danger-soft: #fcecef;
    --cc-light-scrim: var(--cc-scrim);
    --cc-light-shadow: 0 4px 18px rgba(24, 32, 42, 0.08);
    --cc-light-text-shadow: none;
    /* Same 22px dot grid as the dark theme, inked for a light background. */
    --cc-light-decoration: radial-gradient(circle at 1px 1px, rgba(24, 32, 42, 0.14) 1px, transparent 1.45px);
    --cc-chart-for: #a65700;
    --cc-chart-against: #656565;
    --cc-chart-positive: #16804b;
    --cc-chart-negative: #b43948;
    --cc-chart-close: #bd4c16;
    --cc-chart-mid: #79531c;
    --cc-chart-three: #595959;
    --cc-bg: #f5f5f5;
    --cc-surface: #ffffff;
    --cc-surface-raised: #f0f0f0;
    --cc-input: #ffffff;
    --cc-control: #f0f0f0;
    --cc-control-hover: #e5e5e5;
    --cc-border: #d9d9d9;
    --cc-border-strong: #b9c1cb;
    --cc-border-soft: rgba(24, 32, 42, 0.12);
    --cc-border-soft-strong: rgba(24, 32, 42, 0.2);
    --cc-text: #1f1f1f;
    --cc-text-subtle: #46515e;
    --cc-text-muted: #6a6a6a;
    --cc-text-on-dark: #18202a;
    --cc-text-on-dark-muted: #626b76;
    --cc-accent: #a65700;
    --cc-accent-hover: #9b5200;
    --cc-success: #116a3c;
    --cc-warning: #8a5a00;
    --cc-danger: #b43948;
    --cc-focus: #a65700;
    --cc-on-accent: #ffffff;
    --cc-scrim: rgba(31, 31, 31, 0.42);
    --cc-dashboard-surface: #ffffff;
    --cc-dashboard-surface-2: #f4f5f7;
    --cc-dashboard-border: rgba(24, 32, 42, 0.12);
    --cc-dashboard-border-strong: rgba(24, 32, 42, 0.2);
    --cc-dashboard-muted: #626b76;
    --cc-dashboard-accent: #a65700;
    --cc-dashboard-danger: #b43948;
    --cc-dash-bg: var(--cc-bg);
    --cc-dash-surface: var(--cc-dashboard-surface);
    --cc-dash-surface-2: var(--cc-dashboard-surface-2);
    --cc-dash-border: var(--cc-dashboard-border);
    --cc-dash-border-strong: var(--cc-dashboard-border-strong);
    --cc-dash-text: var(--cc-text);
    --cc-dash-muted: var(--cc-dashboard-muted);
    --cc-dash-accent: var(--cc-dashboard-accent);
    --cc-dash-success: var(--cc-success);
    --cc-dash-danger: var(--cc-dashboard-danger);
    --bg: var(--cc-bg);
    --surface: var(--cc-surface);
    --surface-light: var(--cc-surface-raised);
    --text: var(--cc-text);
    --text-dim: var(--cc-text-muted);
    --success: var(--cc-success);
    --warning: var(--cc-warning);
    --danger: var(--cc-danger);
    --border: var(--cc-border);
    --live-surface: var(--cc-surface);
    --live-surface-soft: var(--cc-surface-raised);
    --live-border: var(--cc-border-strong);
    --live-shadow: 0 14px 34px rgba(24, 32, 42, 0.18);
}

body[data-theme="light"] {
    --page-surface: var(--cc-surface);
    --page-input: #f8f8f8;
    --page-control: var(--cc-control);
    --page-control-hover: var(--cc-control-hover);
    --page-border: var(--cc-dashboard-border);
    --page-control-border: var(--cc-border-strong);
    --page-text: var(--cc-text);
    --page-muted: var(--cc-text-muted);
    --page-accent: var(--cc-accent);
    --page-accent-hover: var(--cc-accent-hover);
    --page-danger: var(--cc-danger);
    --muted-text: var(--cc-text-muted);
    --primary: var(--cc-accent);
    --primary-dark: var(--cc-accent-hover);
    --secondary: #595959;
    --secondary-dark: #464646;
}

body[data-theme="light"] :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) {
    --page-surface: var(--cc-surface);
    --page-input: #f8f8f8;
    --page-control: var(--cc-control);
    --page-control-hover: var(--cc-control-hover);
    --page-border: var(--cc-dashboard-border);
    --page-control-border: var(--cc-border-strong);
    --page-text: var(--cc-text);
    --page-muted: var(--cc-text-muted);
    --page-accent: var(--cc-accent);
    --page-accent-hover: var(--cc-accent-hover);
    --page-danger: var(--cc-danger);
}

body[data-theme="light"] :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(select, textarea, input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="date"]) {
    background: var(--page-input);
    border-color: var(--page-control-border);
    color: var(--page-text);
}

body[data-theme="light"] :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.btn, .mini-btn, .tm-action-btn, .auth-primary, .auth-provider, .league-builder-option, .season-combination-page-btn, .season-view-tab, .season-view-toggle-btn, .roster-mode-btn) {
    background: var(--page-control);
    border-color: var(--page-control-border);
    color: var(--page-text);
}

body[data-theme="light"] :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.auth-primary, .roster-mode-btn, [data-action="startGame"], [data-action="continueOnboarding"], [data-action="saveOnboardingLeague"], [data-action="saveOnboardingTeam"], [data-action="finishOnboardingToDashboard"], [data-action="saveNewLeague"], [data-action="openOpponentModal"], [data-action="saveOpponentFromModal"], [data-action="confirmGameRoster"], [data-action="savePlayerFromModal"], [data-action="saveTeamManagerRoster"], [data-action="openTeamManagerModal"], [data-action="openCreateLeagueModal"], #playerManagementScreen [data-action="openPlayerEditorModal"].tm-action-primary) {
    background: var(--page-accent);
    border-color: var(--page-accent);
    color: var(--page-surface);
}

body[data-theme="light"] .auth-screen {
    --auth-primary: var(--cc-accent);
    --auth-secondary: #e8edf2;
    --auth-tertiary: var(--cc-accent-hover);
    --auth-neutral: var(--cc-bg);
    --auth-surface: rgba(255, 255, 255, 0.86);
    --auth-border: var(--cc-border-soft);
    --auth-border-strong: var(--cc-border-soft-strong);
    --auth-text: var(--cc-text);
    --auth-text-dim: var(--cc-text-muted);
}

body[data-theme="light"].auth-locked,
body[data-theme="light"] .auth-bg {
    background-color: var(--cc-bg);
    background-image: var(--cc-light-decoration), radial-gradient(circle at 18% 18%, rgba(184, 100, 0, 0.08), transparent 36%), radial-gradient(circle at 84% 12%, rgba(31, 31, 31, 0.06), transparent 34%);
    background-size: 22px 22px, cover, cover;
    background-position: 0 0, center, center;
    background-repeat: repeat, no-repeat, no-repeat;
}

body[data-theme="light"] .game-screen {
    background: var(--cc-bg);
    color: var(--cc-text);
}

/* The app shell sits on top of the setup screen, so both carry the dot grid.
   A fixed attachment keeps the two layers' dots aligned while scrolling. */
body[data-theme="light"] :is(.setup-screen, .dash-app-shell) {
    background-color: var(--cc-bg);
    background-image: var(--cc-light-decoration), radial-gradient(circle at 18% 16%, rgba(184, 100, 0, 0.08), transparent 34%), radial-gradient(circle at 84% 12%, rgba(31, 31, 31, 0.06), transparent 34%);
    background-size: 22px 22px, cover, cover;
    background-position: 0 0, center, center;
    background-repeat: repeat, no-repeat, no-repeat;
    background-attachment: fixed;
    color: var(--cc-text);
}

body[data-theme="light"] :is(.setup-nav, .setup-panel) {
    background: var(--cc-surface);
    border-color: var(--cc-border);
    box-shadow: 0 14px 36px rgba(24, 32, 42, 0.1);
    color: var(--cc-text);
}

body[data-theme="light"] .dash-sidebar,
body[data-theme="light"] .top-bar {
    background: var(--cc-surface);
    border-color: var(--cc-border);
    box-shadow: 0 12px 28px rgba(24, 32, 42, 0.08);
}

body[data-theme="light"] .scoreboard-bar {
    background: linear-gradient(180deg, #ffffff, #f0f0f0);
    border-top-color: var(--cc-border-strong);
    border-bottom-color: var(--cc-border-strong);
    box-shadow: 0 10px 24px rgba(24, 32, 42, 0.1);
}

body[data-theme="light"] .modal {
    background: var(--cc-scrim);
}

body[data-theme="light"] :is(.modal-content, .modal-content.setup-surface) {
    background: var(--cc-surface);
    border-color: var(--cc-border);
    color: var(--cc-text);
    box-shadow: 0 24px 60px rgba(24, 32, 42, 0.18);
}

/* Keep Season Stats surfaces aligned with the shared dashboard sidebar. */
body:not(.live-game-active):not([data-theme="light"]) #seasonStatsScreen {
    --season-stats-surface: var(--cc-surface);
}

body:not(.live-game-active):not([data-theme="light"]) #seasonStatsScreen :is(.season-toolbar, .season-metric-card, .season-secondary-metrics, .season-table-wrap) {
    background: var(--season-stats-surface);
}

body:not(.live-game-active):not([data-theme="light"]) #seasonStatsScreen .season-secondary-item {
    background: transparent;
}

body:not(.live-game-active):not([data-theme="light"]) #teamManagerScreen .tm-team-card {
    background: linear-gradient(180deg, rgba(27, 27, 27, 0.985), rgba(16, 16, 16, 0.995));
}

body:not(.live-game-active):not([data-theme="light"]) #leagueHubScreen .lh-league-card {
    background: linear-gradient(180deg, rgba(27, 27, 27, 0.985), rgba(16, 16, 16, 0.995));
}

#dashboardScreen.dashboard-modern .dash-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: start;
    gap: 0.45rem 1rem;
    margin-bottom: 1rem;
    padding: 0 0.1rem;
}

#dashboardScreen.dashboard-modern .dash-header-left {
    grid-column: 1;
    display: grid;
    align-content: start;
    gap: 0.75rem;
}

#dashboardScreen.dashboard-modern .dash-title {
    color: var(--cc-dash-text);
    font-size: clamp(2.8rem, 2.1rem + 2.4vw, 4.2rem);
    line-height: 1;
    letter-spacing: 1.6px;
}

#dashboardScreen.dashboard-modern .dash-header-right {
    grid-column: 2;
    justify-self: end;
    align-items: flex-start;
    gap: 0.75rem;
}

#dashboardScreen.dashboard-modern .dash-metric {
    display: none;
}

#dashboardScreen.dashboard-modern .dash-subtitle {
    margin: 0;
    text-align: left;
    margin-top: 0.35rem;
    padding-bottom: 0;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.52));
    font-size: 0.95rem;
    letter-spacing: 0;
    text-transform: none;
}

body:not(.live-game-active) :is(#pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #settingsScreen) .tm-title-row {
    display: block;
}

body:not(.live-game-active) :is(#pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #settingsScreen) .tm-title-row .tm-portal {
    margin-top: 0.35rem;
    padding-bottom: 0;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.52));
    font-size: 0.95rem;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
}

/* Match Dashboard and Past Games title sizing to the Season Stats header. */
body:not(.live-game-active) :is(#dashboardScreen.dashboard-modern .dash-title, #pastGamesScreen.past-games-screen .tm-title) {
    font-size: clamp(2.6rem, 2.1rem + 1.8vw, 4rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
}

/* Keep page headers focused on the title and supporting description. */
body:not(.live-game-active) .tm-module {
    display: none;
}

@media (max-width: 560px) {
    #dashboardScreen.dashboard-modern .dash-header {
        grid-template-columns: minmax(0, 1fr);
    }

    #dashboardScreen.dashboard-modern .dash-header-right {
        grid-column: 1;
        grid-row: 2;
        justify-self: start;
    }
}

/* Keep Past Game Box Score actions on the shared dashboard control treatment. */
body:not(.live-game-active) #pastGameDetailModal .modal-actions.wide-spacing :is(.btn.btn-secondary, .past-game-export-btn) {
    background: var(--cc-light-control, linear-gradient(180deg, rgba(30, 30, 30, 0.96) 0%, rgba(12, 12, 12, 0.98) 100%));
    border-color: var(--cc-light-border, rgba(255, 255, 255, 0.14));
    color: var(--cc-light-text, rgba(255, 255, 255, 0.92));
}

body:not(.live-game-active) #pastGameDetailModal .modal-actions.wide-spacing :is(.btn.btn-secondary, .past-game-export-btn):hover:not(:disabled) {
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(40, 40, 40, 0.98) 0%, rgba(14, 14, 14, 0.99) 100%));
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
    color: var(--cc-light-text, rgba(255, 248, 238, 0.96));
}

body:not(.live-game-active) #pastGameDetailModal .modal-actions.wide-spacing :is(.btn.btn-secondary, .past-game-export-btn):focus-visible {
    outline: 2px solid var(--page-accent);
    outline-offset: 3px;
    box-shadow: none;
}

/* Make modal close controls visually distinct from navigation actions. */
body:not(.live-game-active) #pastGameDetailModal :is(#pastGameCloseBtn, .modal-close) {
    border-color: var(--cc-light-danger-border, rgba(255, 112, 112, 0.35));
    background: var(--cc-light-surface, linear-gradient(180deg, rgba(90, 25, 32, 0.92) 0%, rgba(35, 10, 14, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 228, 232, 0.96));
}

body:not(.live-game-active) #pastGameDetailModal :is(#pastGameCloseBtn, .modal-close):hover:not(:disabled) {
    border-color: var(--cc-light-danger-border, rgba(255, 132, 132, 0.72));
    background: var(--cc-light-control-hover, linear-gradient(180deg, rgba(116, 31, 40, 0.96) 0%, rgba(48, 12, 18, 0.99) 100%));
    color: var(--cc-light-text, #fff1f3);
}

body:not(.live-game-active) #pastGameDetailModal :is(#pastGameCloseBtn, .modal-close):focus-visible {
    outline: 2px solid var(--cc-light-danger-border, rgba(255, 112, 112, 0.9));
    outline-offset: 3px;
    box-shadow: none;
}

.game-roster-modal-content {
    max-width: 980px;
}

.game-roster-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.game-roster-team {
    border: 1px solid var(--cc-light-border, rgba(148, 163, 184, 0.18));
    border-radius: 14px;
    padding: 0.8rem;
}

.game-roster-team h3,
.game-roster-count {
    margin: 0 0 0.55rem;
}

.game-roster-count {
    color: var(--muted-text, #94a3b8);
    font-size: 0.82rem;
}

.game-roster-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--cc-light-border, rgba(148, 163, 184, 0.1));
}

.game-roster-player-name {
    min-width: 0;
}

.game-roster-control {
    white-space: nowrap;
    font-size: 0.78rem;
}

.sub-player-entry {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
}

.sub-player-entry .sub-player-btn {
    flex: 1;
}

.sub-availability-btn {
    border: 1px solid var(--cc-light-border, rgba(148, 163, 184, 0.25));
    border-radius: 8px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 0.7rem;
    padding: 0.35rem 0.45rem;
}

.sub-availability-btn:hover {
    border-color: var(--cc-light-accent-border, rgba(249, 115, 22, 0.8));
}

/* Light appearance: component aliases, semantic states, and data graphics.
   Keep layout and interaction rules above as the single source of geometry. */
body[data-theme="light"] .dash-app-shell {
    --dash-primary: var(--cc-accent);
    --dash-secondary: var(--cc-control);
    --dash-tertiary: var(--cc-accent-hover);
    --dash-neutral: var(--cc-bg);
    --dash-surface: var(--cc-surface);
    --dash-surface-2: var(--cc-surface-raised);
}

body[data-theme="light"] #pastGamesScreen.past-games-screen {
    --pg-edge: var(--cc-border);
    --pg-muted: var(--cc-text-muted);
}

body[data-theme="light"] #setupScreen {
    background-color: var(--cc-bg);
}

body[data-theme="light"] :is(button:disabled, input:disabled, select:disabled, textarea:disabled) {
    /* Disabled controls remain readable; color and cursor convey the state. */
    opacity: 1 !important;
    color: var(--cc-text-muted) !important;
    background: var(--cc-surface-raised) !important;
    border-color: var(--cc-border) !important;
    box-shadow: none !important;
    text-shadow: none;
    cursor: not-allowed;
}

body[data-theme="light"] :is(.season-module-screen, .start-game-screen, .dash-app-shell)::before {
    background-image: none;
}

body[data-theme="light"] :is(input, textarea)::placeholder {
    color: var(--cc-text-muted);
    opacity: 1;
}

body[data-theme="light"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) {
    accent-color: var(--cc-accent);
}

body[data-theme="light"] select option {
    background: var(--cc-surface);
    color: var(--cc-text);
}

body[data-theme="light"] :is(button, a, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--cc-focus);
    outline-offset: 3px;
}

body[data-theme="light"] :is(.stats-table, .manual-roster-table, .season-analytics-shooting-table, .season-analytics-game-table) {
    color: var(--cc-text);
    background: var(--cc-surface);
}

body[data-theme="light"] :is(.stats-table, .manual-roster-table, .season-analytics-shooting-table, .season-analytics-game-table) :is(th, td) {
    border-color: var(--cc-border);
}

body[data-theme="light"] :is(.stats-table, .manual-roster-table, .season-analytics-shooting-table, .season-analytics-game-table) th {
    color: var(--cc-text-subtle);
    background: var(--cc-control);
}

body[data-theme="light"] :is(.stats-table, .manual-roster-table, .season-analytics-shooting-table, .season-analytics-game-table) tbody tr:nth-child(even) {
    background: #f8f8f8;
}

body[data-theme="light"] :is(.stats-table, .manual-roster-table, .season-analytics-shooting-table, .season-analytics-game-table) tbody tr:hover {
    background: var(--cc-light-accent-soft);
}

body[data-theme="light"] :is(.season-shooting-donut)::after {
    background: var(--cc-surface);
    border-color: var(--cc-border);
    box-shadow: none;
}

body[data-theme="light"] :is(.season-margin-chart, .season-player-trend-chart) {
    background: var(--cc-surface);
}

body[data-theme="light"] :is(.season-margin-grid-line, .season-shooting-trend-grid, .season-player-trend-grid) {
    stroke: var(--cc-border);
}

body[data-theme="light"] :is(.season-margin-axis-text, .season-margin-axis-label, .season-shooting-trend-axis, .season-player-trend-axis, .season-player-trend-label) {
    fill: var(--cc-text-muted);
}

body[data-theme="light"] :is(.season-overview-chart-tooltip-bg, .season-margin-hover-label-bg) {
    fill: var(--cc-surface);
    stroke: var(--cc-border-strong);
    filter: drop-shadow(0 3px 6px rgba(24, 32, 42, 0.12));
}

body[data-theme="light"] :is(.season-overview-chart-tooltip-label, .season-margin-hover-label) {
    fill: var(--cc-text);
}

body[data-theme="light"] .season-overview-chart-target:focus-visible {
    stroke: var(--cc-text);
}

body[data-theme="light"] :is(.season-shooting-trend-point, .season-margin-hover-point, .season-player-trend-point) {
    stroke: var(--cc-surface);
    filter: none;
}

body[data-theme="light"] :is(.season-margin-line, .season-shooting-trend-line) {
    filter: none;
}

body[data-theme="light"] .season-shooting-distribution-dot.tone-under,
body[data-theme="light"] .season-shooting-trend-legend .tone-fg {
    background: var(--cc-chart-for);
}

body[data-theme="light"] .season-shooting-distribution-dot.tone-close { background: var(--cc-chart-close); }
body[data-theme="light"] .season-shooting-distribution-dot.tone-mid { background: var(--cc-chart-mid); }
body[data-theme="light"] .season-shooting-distribution-dot.tone-three,
body[data-theme="light"] .season-shooting-trend-legend .tone-three { background: var(--cc-chart-three); }
body[data-theme="light"] .season-shooting-trend-legend .tone-ft { background: var(--cc-light-purple); }

/* Court artwork and heat-map zones intentionally retain their own palette.
   White labels with dark outlines stay legible across all heat-map colors. */
body[data-theme="light"] .cc-court-zone-label {
    fill: #ffffff;
    stroke: #17212e;
}

@media (max-width: 760px) {
    .game-roster-grid {
        grid-template-columns: 1fr;
    }

    .game-roster-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .game-roster-row .game-roster-control:last-child {
        grid-column: 2;
    }
}

/* Semantic control roles override the legacy per-page button variants. */
body[data-theme="light"] :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #settingsScreen, .modal) :is(.danger, .btn-danger, [data-action="clearAllPastGames"], [data-action="deleteSelectedPastGame"], [data-action="deleteLeagueFromHub"], [data-action="deleteTeamManagerRoster"], [data-action="deleteManagedPlayer"], [data-action="replaceRosterFromModal"]):not(:disabled) {
    background: var(--cc-light-danger-soft);
    border-color: var(--cc-light-danger-border);
    color: var(--cc-danger);
    box-shadow: none;
}
body[data-theme="light"] :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #settingsScreen, .modal) :is(.danger, .btn-danger, [data-action="clearAllPastGames"], [data-action="deleteSelectedPastGame"], [data-action="deleteLeagueFromHub"], [data-action="deleteTeamManagerRoster"], [data-action="deleteManagedPlayer"], [data-action="replaceRosterFromModal"]):hover:not(:disabled) {
    background: #f6dce1;
    border-color: var(--cc-danger);
    color: #982735;
}
body[data-theme="light"] :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #settingsScreen, .modal) :is(.modal-close, .auth-link, .auth-legal-link, .link-btn, .dash-link):not(:disabled) {
    background: transparent;
    color: var(--cc-text-subtle);
    border-color: transparent;
    box-shadow: none;
}
body[data-theme="light"] :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #settingsScreen, .modal) :is(.modal-close, .auth-link, .auth-legal-link, .link-btn, .dash-link):hover:not(:disabled) {
    background: var(--cc-control-hover);
    color: var(--cc-accent);
}
body[data-theme="light"] .dash-start {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: var(--cc-on-accent);
}
body[data-theme="light"] .dash-start:hover {
    background: var(--cc-accent-hover);
    color: var(--cc-on-accent);
}
body[data-theme="light"] #dashboardScreen .dash-bar-fill.fg {
    background: var(--cc-chart-against);
    border-color: var(--cc-chart-against);
    box-shadow: none;
}
body[data-theme="light"] #dashboardScreen .dash-bar-fill.three {
    background: var(--cc-chart-for);
    border-color: var(--cc-chart-for);
    box-shadow: none;
}
body[data-theme="light"] .dash-bars::before {
    background: repeating-linear-gradient(to top, var(--cc-border) 0 1px, transparent 1px 54px);
    opacity: 1;
}
body[data-theme="light"] .dash-chart-legend-modern i { background: var(--cc-chart-against); }
body[data-theme="light"] .dash-chart-legend-modern i.three { background: var(--cc-chart-for); }

body[data-theme="light"] .season-shooting-percentage-fill {
    background: var(--cc-chart-for);
    box-shadow: none;
}
body[data-theme="light"] .shooting-three .season-shooting-percentage-fill {
    background: var(--cc-chart-three);
}

body[data-theme="light"] .save-status-chip {
    background: var(--cc-light-success-soft);
    color: var(--cc-success);
    border-color: var(--cc-light-success-border);
}
body[data-theme="light"] .save-status-chip:is(.error, .risk) {
    background: var(--cc-light-danger-soft);
    color: var(--cc-danger);
    border-color: var(--cc-light-danger-border);
}

/* Brand amber belongs on fills and markers; dark ink keeps light-mode labels
   readable. Scope this refinement away from the live game and dark theme. */
body[data-theme="light"]:not(.live-game-active) {
    --cc-accent: #ff9f0a;
    --cc-accent-hover: #ffb238;
    --cc-on-accent: #18202a;
    --cc-light-accent: var(--cc-text);
    --cc-light-accent-border: #ff9f0a;
    --cc-light-accent-soft: #fff1d6;
    --cc-chart-for: #ff9f0a;
    --cc-chart-mid: #555555;
    --cc-dashboard-accent: #ff9f0a;
    --cc-bg: #ededed;
    --cc-surface-raised: #f4f4f4;
    --cc-control: #e9e9e9;
    --cc-control-hover: #dedede;
    --cc-border: #b8b8b8;
    --cc-border-strong: #7d8b9c;
    --cc-border-soft: #bcc5d0;
    --cc-border-soft-strong: #8c9aaa;
    --cc-dashboard-border: #aeb9c6;
    --cc-dashboard-border-strong: #7d8b9c;
    --cc-dashboard-surface-2: #f1f4f7;
    --cc-text-subtle: #384554;
    --cc-text-muted: #5c5c5c;
    --cc-dashboard-muted: #505e6e;
    --cc-text-on-dark-muted: #505e6e;
    --cc-focus: #384554;
}

body[data-theme="light"]:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.auth-primary, .roster-mode-btn, [data-action="startGame"], [data-action="continueOnboarding"], [data-action="saveOnboardingLeague"], [data-action="saveOnboardingTeam"], [data-action="finishOnboardingToDashboard"], [data-action="saveNewLeague"], [data-action="openOpponentModal"], [data-action="saveOpponentFromModal"], [data-action="confirmGameRoster"], [data-action="savePlayerFromModal"], [data-action="saveTeamManagerRoster"], [data-action="openTeamManagerModal"], [data-action="openCreateLeagueModal"], #playerManagementScreen [data-action="openPlayerEditorModal"].tm-action-primary) {
    color: var(--cc-on-accent);
}

body[data-theme="light"]:not(.live-game-active) :is(.settings-stepper button, .settings-language-option, .settings-theme-option):hover,
body[data-theme="light"]:not(.live-game-active) :is(.modal-close, .auth-link, .auth-legal-link, .link-btn, .dash-link):hover:not(:disabled),
body[data-theme="light"]:not(.live-game-active) #teamManagerScreen .player-table-sort-btn:is(:hover, .is-active) {
    color: var(--cc-text);
}

body[data-theme="light"]:not(.live-game-active) #dashboardScreen .dash-bar-fill.three {
    background: linear-gradient(180deg, #ffbd4a, #ff9f0a);
    border-color: var(--cc-border-strong);
}

body[data-theme="light"]:not(.live-game-active) :is(.dash-chart-wrap, .season-margin-chart, .season-player-trend-chart) {
    background: var(--cc-surface-raised);
    border-color: var(--cc-border);
}

body[data-theme="light"]:not(.live-game-active) :is(input[type="text"], input[type="number"], input[type="email"], input[type="password"], input[type="search"], input[type="date"], select, textarea) {
    border-color: var(--cc-border-strong);
}

body[data-theme="light"]:not(.live-game-active) .dash-start {
    color: var(--cc-on-accent);
}

body[data-theme="light"]:not(.live-game-active) :is(.settings-plan-badge.pro, .settings-about-links button:hover, .settings-link),
body[data-theme="light"]:not(.live-game-active) #authScreen #authCreateAccountBtn,
body[data-theme="light"]:not(.live-game-active) #authScreen #authSignInForm .auth-link,
body[data-theme="light"]:not(.live-game-active) #authScreen [data-auth-view] .auth-footer .auth-link {
    color: var(--cc-text);
}
body[data-theme="light"]:not(.live-game-active) :is(.season-shooting-trend-line.fg, .season-player-trend-line, .season-margin-hover-line) {
    stroke: var(--cc-accent);
}
body[data-theme="light"]:not(.live-game-active) :is(.season-shooting-trend-point.fg, .season-player-trend-point, .season-margin-hover-point) {
    fill: var(--cc-accent);
}
body[data-theme="light"]:not(.live-game-active) .season-player-trend-area {
    fill: rgba(255, 159, 10, 0.12);
}

/* Keep action and status colors in light appearance, including disabled roles.
   Neutral controls remain neutral; brand, destructive, and success roles do not. */
body[data-theme="light"]:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.auth-primary, .roster-mode-btn, [data-action="startGame"], [data-action="continueOnboarding"], [data-action="saveOnboardingLeague"], [data-action="saveOnboardingTeam"], [data-action="finishOnboardingToDashboard"], [data-action="saveNewLeague"], [data-action="openOpponentModal"], [data-action="saveOpponentFromModal"], [data-action="confirmGameRoster"], [data-action="savePlayerFromModal"], [data-action="saveTeamManagerRoster"], [data-action="openTeamManagerModal"], [data-action="openCreateLeagueModal"], #playerManagementScreen [data-action="openPlayerEditorModal"].tm-action-primary) {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: var(--cc-on-accent);
}
body[data-theme="light"]:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.auth-primary, .roster-mode-btn, [data-action="startGame"], [data-action="continueOnboarding"], [data-action="saveOnboardingLeague"], [data-action="saveOnboardingTeam"], [data-action="finishOnboardingToDashboard"], [data-action="saveNewLeague"], [data-action="openOpponentModal"], [data-action="saveOpponentFromModal"], [data-action="confirmGameRoster"], [data-action="savePlayerFromModal"], [data-action="saveTeamManagerRoster"], [data-action="openTeamManagerModal"], [data-action="openCreateLeagueModal"], #playerManagementScreen [data-action="openPlayerEditorModal"].tm-action-primary):hover:not(:disabled) {
    background: var(--cc-accent-hover);
    border-color: var(--cc-accent-hover);
    color: var(--cc-on-accent);
}
body[data-theme="light"]:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.auth-primary, .roster-mode-btn, [data-action="startGame"], [data-action="continueOnboarding"], [data-action="saveOnboardingLeague"], [data-action="saveOnboardingTeam"], [data-action="finishOnboardingToDashboard"], [data-action="saveNewLeague"], [data-action="openOpponentModal"], [data-action="saveOpponentFromModal"], [data-action="confirmGameRoster"], [data-action="savePlayerFromModal"], [data-action="saveTeamManagerRoster"], [data-action="openTeamManagerModal"], [data-action="openCreateLeagueModal"], #playerManagementScreen [data-action="openPlayerEditorModal"].tm-action-primary):disabled {
    background: #d9a347 !important;
    border-color: #ba822a !important;
    color: #18202a !important;
}
body[data-theme="light"]:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #settingsScreen, .modal) :is(.danger, .btn-danger, [data-action="clearAllPastGames"], [data-action="deleteSelectedPastGame"], [data-action="deleteLeagueFromHub"], [data-action="deleteTeamManagerRoster"], [data-action="deleteManagedPlayer"], [data-action="replaceRosterFromModal"]):not(:disabled),
body[data-theme="light"]:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn-danger:not(:disabled) {
    background: #c92f45;
    border-color: #b43948;
    color: #ffffff;
}
body[data-theme="light"]:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #settingsScreen, .modal) :is(.danger, .btn-danger, [data-action="clearAllPastGames"], [data-action="deleteSelectedPastGame"], [data-action="deleteLeagueFromHub"], [data-action="deleteTeamManagerRoster"], [data-action="deleteManagedPlayer"], [data-action="replaceRosterFromModal"]):hover:not(:disabled),
body[data-theme="light"]:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn-danger:hover:not(:disabled) {
    background: #a91f34;
    border-color: #ffffff;
    color: #ffffff;
}
body[data-theme="light"]:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #settingsScreen, .modal) :is(.danger, .btn-danger, [data-action="clearAllPastGames"], [data-action="deleteSelectedPastGame"], [data-action="deleteLeagueFromHub"], [data-action="deleteTeamManagerRoster"], [data-action="deleteManagedPlayer"], [data-action="replaceRosterFromModal"]):disabled {
    background: #96505c !important;
    border-color: #bd8390 !important;
    color: #ffffff !important;
}
body[data-theme="light"]:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn:not(.btn-danger):first-child {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: var(--cc-text);
}
body[data-theme="light"]:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn:not(.btn-danger):hover:not(:disabled) {
    background: var(--cc-accent-hover);
    border-color: var(--cc-accent);
    color: var(--cc-text);
}
body[data-theme="light"]:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-pill.accent,
body[data-theme="light"]:not(.live-game-active) :is(.settings-plan-badge.pro, .team-warning-pill, .start-game-block-hint) {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: var(--cc-text);
}
body[data-theme="light"]:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-pill.win {
    background: #167344;
    border-color: #39805a;
    color: #ffffff;
}
body[data-theme="light"]:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-pill.loss {
    background: #c92f45;
    border-color: #b43948;
    color: #ffffff;
}
body[data-theme="light"]:not(.live-game-active) :is(#seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen) :is(.season-view-tab, .season-view-toggle-btn).active,
body[data-theme="light"]:not(.live-game-active) :is(#seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen) :is(.season-view-tab, .season-view-toggle-btn)[aria-selected="true"] {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: var(--cc-text);
}

body[data-theme="light"]:not(.live-game-active) :is(#authScreen, #onboardingScreen, #dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal) :is(.league-builder-option, .season-view-tab, .season-view-toggle-btn, .roster-mode-btn):is(.active, [aria-selected="true"], [aria-pressed="true"]) {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: var(--cc-text);
}

/* Secondary actions stay neutral, as in the dark theme: amber is the primary
   action and red is destructive. */
body[data-theme="light"]:not(.live-game-active) .btn.btn-secondary:not(.btn-danger):not(.danger):not(:disabled),
body[data-theme="light"]:not(.live-game-active) :is(#settingsScreen, #pastGamesScreen, #pastGameDetailModal, #pastGameInfoModal, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #startGameScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen) .btn.btn-secondary:not(.btn-danger):not(.danger):not(:disabled),
body[data-theme="light"]:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn:not(.btn-danger):not(:first-child):not(:disabled) {
    background: #424242;
    border-color: #424242;
    color: #ffffff;
}
body[data-theme="light"]:not(.live-game-active) .btn.btn-secondary:not(.btn-danger):not(.danger):hover:not(:disabled),
body[data-theme="light"]:not(.live-game-active) :is(#settingsScreen, #pastGamesScreen, #pastGameDetailModal, #pastGameInfoModal, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #startGameScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen) .btn.btn-secondary:not(.btn-danger):not(.danger):hover:not(:disabled),
body[data-theme="light"]:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn:not(.btn-danger):not(:first-child):hover:not(:disabled) {
    background: #313131;
    border-color: #313131;
    color: #ffffff;
}
body[data-theme="light"]:not(.live-game-active) #settingsScreen [data-action="discardSettingsChanges"]:disabled {
    background: #676767 !important;
    border-color: #676767 !important;
    color: #ffffff !important;
}

body[data-theme="light"]:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn:not(.btn-danger):first-child:not(:disabled) {
    background: var(--cc-accent);
    border-color: var(--cc-accent);
    color: var(--cc-on-accent);
}
body[data-theme="light"]:not(.live-game-active) #pastGamesScreen.past-games-screen .pg-actions .btn:not(.btn-danger):first-child:hover:not(:disabled) {
    background: var(--cc-accent-hover);
    border-color: var(--cc-accent-hover);
    color: var(--cc-on-accent);
}

.onboarding-title-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.onboarding-title-row .onboarding-step-title {
    flex: 0 1 auto;
    min-width: 0;
}

.onboarding-help {
    position: relative;
    flex: 0 0 auto;
}

.onboarding-help summary {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.3));
    border-radius: 50%;
    color: var(--cc-light-accent, #ffb74d);
    cursor: pointer;
    list-style: none;
    font-weight: 700;
}

.onboarding-help summary::-webkit-details-marker {
    display: none;
}

.onboarding-help summary:focus-visible {
    outline: 2px solid var(--cc-light-accent, #ffb74d);
    outline-offset: 3px;
}

.onboarding-help-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.onboarding-help-content {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 5;
    width: min(24rem, 60vw);
    box-sizing: border-box;
    padding: 1rem;
    border: 1px solid var(--cc-light-accent-border, rgba(255, 183, 77, 0.3));
    border-radius: 12px;
    background: var(--cc-light-surface, #242424);
    color: var(--cc-light-text, #f5f6f8);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.onboarding-help-content strong {
    color: var(--cc-light-accent, #ffb74d);
    font-size: 0.8rem;
}

.onboarding-help-content p {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    line-height: 1.5;
}

#leagueHubScreen .lh-teams-group h3 {
    margin: 0 0 1rem;
}
#leagueHubScreen .lh-teams-group .tm-actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* The name-only opponent dialog shares the page's compact form design. */
#opponentCreateModal {
    background: var(--cc-light-scrim, rgba(0, 0, 0, 0.72));
}
#opponentCreateModal .modal-content {
    width: min(480px, calc(100vw - 32px));
    padding: 24px;
    max-height: calc(100dvh - 32px);
}
#opponentCreateModal .modal-header {
    padding-right: 36px;
    font-size: 1.4rem;
    margin-bottom: 16px;
}
#opponentCreateModal .settings-note {
    line-height: 1.5;
    margin-bottom: 12px;
}
#opponentCreateModal .form-group {
    margin: 20px 0;
}
#opponentCreateModal .tm-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
}
#opponentCreateModal .tm-actions .btn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 0.9rem;
}
#opponentCreateModal .modal-close {
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
}
@media (max-width: 480px) {
    #opponentCreateModal .modal-content { padding: 20px; }
    #opponentCreateModal .tm-actions .btn { flex: 1 1 auto; }
}

#leagueHubScreen .lh-managed-team-heading {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}
#leagueHubScreen .lh-managed-team-heading .team-warning-pill {
    margin: 0;
    flex: 0 0 auto;
}

#leagueHubScreen .form-section.compact.lh-teams-group .lh-teams-header > h3 {
    color: var(--cc-text);
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.5;
}
#leagueHubScreen .lh-teams-group .tm-team-card { gap: 10px; }
#leagueHubScreen .lh-teams-group .tm-team-meta { flex: 1; min-width: 0; }
#leagueHubScreen .lh-teams-group .tm-team-name { overflow-wrap: anywhere; }

#leagueHubScreen .lh-teams-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}
#leagueHubScreen .lh-teams-header > h3 {
    margin: 0;
    flex: 1 1 160px;
    min-width: 0;
    overflow-wrap: anywhere;
}
#leagueHubScreen .lh-teams-header > button {
    flex: 0 0 auto;
    margin-left: auto;
}

.dash-current-team-option.dash-new-team-option {
    margin-top: 8px;
    border-top: 1px solid var(--cc-border-soft-strong);
    color: var(--cc-accent);
}

/* Compact, opaque team menu with a distinct creation action. */
#dashCurrentTeamSwitcher .dash-current-trigger {
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--cc-border-soft-strong);
    border-radius: 8px;
    background: var(--cc-input);
}
#dashCurrentTeamSwitcher .dash-current-value { margin: 0; font-weight: 600; line-height: 1.4; }
#dashCurrentTeamSwitcher .dash-current-chevron {
    margin: 0;
    flex: 0 0 16px;
    color: var(--cc-text-muted);
    transition: transform 160ms ease;
}
#dashCurrentTeamSwitcher .dash-current-trigger[aria-expanded="true"] .dash-current-chevron { transform: rotate(180deg); }
#dashCurrentTeamSwitcher .dash-current-team-list {
    padding: 6px;
    gap: 4px;
    border: 1px solid var(--cc-border-soft-strong);
    border-radius: 10px;
    background: var(--cc-surface);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
}
#dashCurrentTeamSwitcher .dash-current-team-option {
    position: relative;
    min-height: 44px;
    padding: 10px 12px;
    border: 0;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--cc-text);
    background: transparent;
    overflow-wrap: anywhere;
}
#dashCurrentTeamSwitcher .dash-current-team-option:hover,
#dashCurrentTeamSwitcher .dash-current-team-option:focus-visible { background: var(--cc-control-hover); }
#dashCurrentTeamSwitcher .dash-current-team-option:focus-visible { outline: 2px solid var(--cc-focus); outline-offset: -2px; }
#dashCurrentTeamSwitcher .dash-current-team-option.active { background: var(--cc-control); padding-right: 38px; }
#dashCurrentTeamSwitcher .dash-current-team-option.active::after {
    content: '\2713';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cc-accent);
}
#dashCurrentTeamSwitcher .dash-new-team-option {
    margin-top: 6px;
    border-top: 1px solid var(--cc-border-soft-strong);
    border-radius: 0 0 6px 6px;
    color: var(--cc-accent);
}
@media (prefers-reduced-motion: reduce) {
    #dashCurrentTeamSwitcher .dash-current-chevron { transition: none; }
}

/* Keep the optional Pro setting compact beside the game setup form. */
#startGameScreen .sg-shot-chart-card {
    align-self: start;
    height: auto;
    min-height: 0;
    padding: 14px 16px;
}
#startGameScreen .sg-shot-chart-card p { margin-top: 10px; }

/* Single-team game roster shares the setup dialog design. */
#gameRosterModal .game-roster-modal-content {
    width: min(640px, calc(100vw - 32px));
    max-width: 640px;
    max-height: calc(100dvh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px;
}
#gameRosterModal .modal-header {
    flex: 0 0 auto;
    padding-right: 36px;
    font-size: 1.4rem;
    margin-bottom: 12px;
}
#gameRosterModal .settings-note { flex: 0 0 auto; line-height: 1.5; margin-bottom: 16px; }
#gameRosterModal .game-roster-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    overflow-y: auto;
}
#gameRosterModal .game-roster-team {
    background: var(--page-input);
    border-color: var(--page-border);
    border-radius: 8px;
}
#gameRosterModal .game-roster-count { color: var(--page-muted); }
#gameRosterModal .game-roster-control input { accent-color: var(--cc-accent); }
#gameRosterModal .modal-actions {
    flex: 0 0 auto;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--page-border);
}
#gameRosterModal .modal-actions .btn { min-height: 44px; font-size: 0.9rem; padding: 10px 18px; }

/* Standard alerts and confirmations use the Settings theme, including during games. */
#confirmModal.modal { padding: 16px; background: var(--cc-scrim); backdrop-filter: blur(8px); }
#confirmModal.modal .modal-content.setup-surface {
    width: 100%; min-width: 0; max-width: 440px; padding: 24px;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--cc-surface); color: var(--cc-text);
    border: 1px solid var(--cc-border); border-radius: 16px;
    box-shadow: var(--cc-light-shadow, 0 24px 80px rgba(0, 0, 0, 0.45));
}
#confirmModal.modal .modal-header {
    margin: 0 0 10px; color: var(--cc-text); font-family: 'Inter', sans-serif;
    font-size: 1.25rem; font-weight: 700; line-height: 1.4;
    letter-spacing: -0.02em; text-transform: none; overflow-wrap: anywhere;
}
#confirmModal.modal .settings-note {
    margin: 0; color: var(--cc-text-subtle); font-size: 0.94rem; font-weight: 400;
    line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
#confirmModal.modal .modal-actions {
    display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px;
    margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--cc-border);
}
#confirmModal.modal .btn {
    flex: 0 1 auto; min-width: 88px; min-height: 44px; margin: 0; padding: 10px 16px;
    border: 1px solid var(--cc-accent); border-radius: 8px;
    background: var(--cc-accent); color: var(--cc-on-accent); box-shadow: none;
    font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 600;
    line-height: 1.4; letter-spacing: 0; text-transform: none; white-space: normal;
}
#confirmModal.modal .btn::before { content: none; }
#confirmModal.modal .btn:hover { background: var(--cc-accent-hover); border-color: var(--cc-accent-hover); transform: none; box-shadow: none; }
#confirmModal.modal .btn-secondary { background: var(--cc-control); border-color: var(--cc-border-strong); color: var(--cc-text); }
#confirmModal.modal .btn-secondary:hover { background: var(--cc-control-hover); border-color: var(--cc-border-strong); }
#confirmModal.modal .btn-danger { background: var(--cc-danger); border-color: var(--cc-danger); color: var(--cc-on-accent); }
#confirmModal.modal .btn-danger:hover { background: var(--cc-danger); border-color: var(--cc-danger); filter: brightness(0.92); }
#confirmModal.modal .btn:focus-visible { outline: 2px solid var(--cc-focus); outline-offset: 3px; }
@media (max-width: 480px) {
    #confirmModal.modal .modal-content.setup-surface { padding: 20px; }
    #confirmModal.modal .btn { flex: 1 1 100px; }
}

body[data-theme="light"] #confirmModal.modal {
    --cc-accent: #ff9f0a; --cc-accent-hover: #ffb238;
    --cc-focus: #ff9f0a; --cc-on-accent: #121518;
}
body[data-theme="light"] #confirmModal.modal .btn-danger { color: #ffffff; }

/* Shared live-game dialog system; each dialog retains its content-specific width. */
body.live-game-active .modal {
    padding: 20px;
    background: var(--cc-light-scrim, rgba(5, 7, 10, 0.72));
    backdrop-filter: blur(8px);
}

body.live-game-active .modal > .modal-content {
    min-width: 0;
    width: calc(100vw - 40px);
    padding: 24px;
    border-radius: 16px;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.live-game-active .modal .modal-header {
    margin: 0 44px 16px 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.025em;
    text-transform: none;
}

body.live-game-active .modal .modal-close {
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.1));
    border-radius: 10px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    font-size: 1rem;
    line-height: 1;
}

body.live-game-active .modal :is(.settings-note, .shot-location-subtitle, .lineup-modal-subtitle, .timeout-modal-note, .sub-modal-helper) {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.6;
}

body.live-game-active .modal .modal-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.08));
}

body.live-game-active .modal .btn {
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0;
    text-transform: none;
}

body.live-game-active .modal :is(.btn, .modal-close, .sub-player-btn, .sub-availability-btn, .lineup-player-btn, .timeout-choice-card):focus-visible {
    outline: 2px solid #ffad47;
    outline-offset: 3px;
}

body.live-game-active .modal :is(.sub-column, .sub-pairings, .timeout-choice-card, .lineup-player-btn, .box-score, .shot-location-body) {
    border-radius: 12px;
}

body.live-game-active .modal :is(.sub-column-title, .box-score-team-heading, .timeout-choice-team, .ft-player-name) {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}

body.live-game-active #confirmModal .modal-header { margin-right: 0; }
body.live-game-active #confirmModal .modal-content { max-width: 440px; }
body.live-game-active #boxScoreModal .box-score { overflow-x: auto; }

@media (max-width: 600px) {
    body.live-game-active .modal { padding: 16px; }
    body.live-game-active .modal > .modal-content {
        width: calc(100vw - 32px);
        padding: 20px;
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
    }
    body.live-game-active .modal .modal-actions .btn { flex: 1 1 140px; }
    body.live-game-active #timeoutModal .timeout-modal-grid { grid-template-columns: 1fr; }
}

body.live-game-active :is(#freeThrowModal, #timeoutModal, #substitutionModal, #lineupModal, #periodLineupReminderModal, #boxScoreModal, #playByPlayModal, #shotLocationModal, #pastGameShotChartModal, #backupModal, #settingsModal) .modal-header {
    font-family: 'Inter', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-transform: none;
    color: var(--cc-light-accent, #ffb74d) !important;
}

/* Preserve readable player/stat columns while the table scrolls on phones. */
body.live-game-active #boxScoreModal .stats-table:has(#homeStatsBody) {
    min-width: 900px;
    table-layout: auto;
}

body.live-game-active #boxScoreModal .stats-table:has(#homeStatsBody) :is(th, td) {
    width: auto;
    white-space: nowrap;
    padding: 10px 12px;
}

body.live-game-active #boxScoreModal .stats-table:has(#homeStatsBody) :is(th, td):first-child {
    width: 3rem;
    text-align: center;
}

body.live-game-active #boxScoreModal .stats-table:has(#homeStatsBody) :is(th, td):nth-child(2) {
    min-width: 160px;
    text-align: left;
}

/* Live-game footer actions share the compact league-button visual system. */
.live-bottom-bar .live-bottom-btn {
    min-height: 44px;
    padding: 0.46rem 0.72rem;
    border-radius: 9px;
    border-color: var(--cc-border-strong);
    background: var(--cc-control);
    color: var(--cc-text);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.2px;
    text-transform: none;
    cursor: pointer;
    box-shadow: var(--cc-light-shadow, inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 10px rgba(0, 0, 0, 0.3));
    transition: background 0.2s ease, border-color 0.15s ease;
}
.live-bottom-bar .live-bottom-btn:hover:not(:disabled) {
    border-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.55));
    background: var(--cc-control-hover);
}
.live-bottom-bar .live-bottom-btn-accent {
    background: #ff9f0a;
    border-color: #ff9f0a;
    color: #121518;
}
.live-bottom-bar .live-bottom-btn-accent:hover:not(:disabled) {
    background: #ffb238;
    border-color: #ffb238;
}
.live-bottom-bar .live-bottom-btn-danger {
    border-color: var(--cc-light-danger-border, rgba(255, 112, 112, 0.35));
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(90, 25, 32, 0.92) 0%, rgba(35, 10, 14, 0.98) 100%));
    color: var(--cc-light-text, rgba(255, 228, 232, 0.96));
}
.live-bottom-bar .live-bottom-btn-danger:hover:not(:disabled) {
    border-color: var(--cc-danger);
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(110, 30, 39, 0.92) 0%, rgba(48, 14, 20, 0.98) 100%));
}
.live-bottom-bar .live-bottom-btn:focus-visible {
    outline: 2px solid var(--cc-focus);
    outline-offset: 3px;
}

/* Let team-summary content determine its height instead of splitting the
   sidebar into fractions that can push the last shooting row past its border. */
.live-side-column {
    grid-template-rows: auto minmax(0, 1fr);
}
.live-side-column .live-opponent-panel {
    min-height: min-content;
    min-width: 0;
}
.live-opponent-panel > * {
    flex-shrink: 0;
    min-width: 0;
}
.live-opponent-panel .live-side-panel-head > div {
    min-width: 0;
}
.live-opponent-panel .live-side-panel-title,
.live-opponent-panel .live-summary-label {
    overflow-wrap: anywhere;
}
.live-opponent-panel .live-shooting-meta {
    flex-wrap: wrap;
    row-gap: 0.2rem;
}
.live-opponent-panel .live-shooting-value {
    margin-left: auto;
}
.live-opponent-panel .live-shooting-stats {
    margin-top: 0;
}
@media (min-width: 981px) {
    .live-side-column {
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}
@media (max-width: 980px) and (orientation: portrait) {
    .live-side-column {
        grid-template-rows: auto;
    }
}

/* Live controls: modern surfaces without changing any sizing or typography. */
#gameScreen :is(.lineup-mini-btn, .away-score-btn, .live-nav-item, .live-side-toggle),
#gameScreen #homeOnCourt .action-btn {
    border-radius: 9px;
    background: var(--cc-control);
    border-color: var(--cc-border-strong);
    color: var(--cc-text);
    box-shadow: none;
}
#gameScreen :is(.lineup-mini-btn, .away-score-btn, .live-nav-item, .live-side-toggle):hover:not(:disabled),
#gameScreen #homeOnCourt .action-btn:hover:not(:disabled) {
    background: var(--cc-control-hover);
    border-color: var(--cc-focus);
    color: var(--cc-text);
}
#gameScreen :is(#pauseBtn, .lineup-mini-btn-accent, .live-nav-item.active),
#gameScreen #homeOnCourt .action-btn.danger {
    background: #ff9f0a;
    border-color: #ff9f0a;
    color: #121518;
}
#gameScreen :is(#pauseBtn, .lineup-mini-btn-accent, .live-nav-item.active):hover:not(:disabled),
#gameScreen #homeOnCourt .action-btn.danger:hover:not(:disabled) {
    background: #ffb238;
    border-color: #ffb238;
    color: #121518;
}
#gameScreen #homeOnCourt .action-btn.primary {
    background: var(--cc-success);
    border-color: var(--cc-success);
    color: #121518;
}
#gameScreen #homeOnCourt .action-btn.primary:hover:not(:disabled) {
    background: var(--cc-success);
    border-color: var(--cc-success);
    color: #121518;
    filter: brightness(1.08);
}
#gameScreen .live-nav-item.danger,
#gameScreen #homeOnCourt :is(.action-btn.miss-shot-2, .action-btn.miss-shot-3) {
    background: var(--cc-danger);
    border-color: var(--cc-danger);
    color: #121518;
}
#gameScreen .live-nav-item.danger:hover:not(:disabled),
#gameScreen #homeOnCourt :is(.action-btn.miss-shot-2, .action-btn.miss-shot-3):hover:not(:disabled) {
    background: var(--cc-danger);
    border-color: var(--cc-danger);
    color: #121518;
    filter: brightness(1.08);
}
body[data-theme="light"] #gameScreen #homeOnCourt :is(.action-btn.primary, .action-btn.miss-shot-2, .action-btn.miss-shot-3),
body[data-theme="light"] #gameScreen .live-nav-item.danger { color: #ffffff; }
#gameScreen button:focus-visible {
    outline: 2px solid var(--cc-focus);
    outline-offset: 2px;
}
#gameScreen .save-status-chip { box-shadow: none; }

/* Finish the roster and timeout controls with the same flat Settings surfaces. */
body.live-game-active :is(#lineupModal, #substitutionModal, #timeoutModal) .modal-header {
    color: var(--cc-light-text, #f2f3f5) !important;
}
body.live-game-active #lineupModal .modal-content { max-width: 720px; }
body.live-game-active #substitutionModal .modal-content { max-width: 920px; }
body.live-game-active #timeoutModal .modal-content { max-width: 540px; }
body.live-game-active :is(#lineupModal, #substitutionModal, #timeoutModal) :is(.lineup-modal-subtitle, .sub-modal-team, .sub-modal-helper, .timeout-modal-subtitle) {
    margin: 0 0 18px;
    color: var(--cc-light-muted, #a9adb5);
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
}
body.live-game-active #substitutionModal .sub-column {
    padding: 0;
    border: 0 !important;
    background: transparent !important;
}
body.live-game-active #substitutionModal .sub-column-title {
    margin-bottom: 12px;
    color: var(--cc-light-muted, #a9adb5);
    font-size: 0.78rem;
    font-weight: 600;
}
body.live-game-active #substitutionModal .sub-pairings {
    margin-top: 18px;
    padding: 12px;
    border: 1px solid var(--cc-light-border, #303238) !important;
    background: var(--cc-light-raised, #1d1e21) !important;
    font-size: 0.86rem;
    line-height: 1.5;
}
body.live-game-active #substitutionModal .sub-pairings:empty { display: none; }
body.live-game-active #substitutionModal .sub-modal-helper { margin: 14px 0 0; }
body.live-game-active :is(#lineupModal, #substitutionModal) :is(.lineup-player-btn, .sub-player-btn) {
    min-height: 48px;
    padding: 10px 12px;
    gap: 12px;
    border: 1px solid var(--cc-light-border, #303238) !important;
    background: var(--cc-light-control, #202124) !important;
    border-radius: 9px;
    box-shadow: none;
    transform: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.86rem;
}
body.live-game-active :is(#lineupModal, #substitutionModal) :is(.lineup-player-number, .sub-player-number) {
    min-width: 32px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--cc-light-muted, #a9adb5) !important;
    font-size: 0.8rem;
    font-weight: 500;
}
body.live-game-active :is(#lineupModal, #substitutionModal) :is(.lineup-player-name, .sub-player-name) {
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}
body.live-game-active :is(#lineupModal, #substitutionModal) :is(.lineup-player-btn, .sub-player-btn):hover:not(:disabled) {
    background: var(--cc-light-control-hover, #282a2e) !important;
    border-color: var(--cc-light-accent-border, #a56b28) !important;
    transform: none;
}
body.live-game-active :is(#lineupModal, #substitutionModal) :is(.lineup-player-btn.selected, .sub-player-btn.selected-out, .sub-player-btn.selected-in) {
    border-color: #ff9f0a !important;
    background: var(--cc-light-accent-soft, rgba(255, 159, 10, 0.1)) !important;
    box-shadow: inset 3px 0 #ff9f0a;
}
body.live-game-active #lineupModal .lineup-player-btn.selected::after {
    content: '\2713';
    margin-left: auto;
    color: var(--cc-light-accent, #ffb74d);
}
body.live-game-active #lineupModal .lineup-count-chip {
    padding: 5px 10px;
    border: 0 !important;
    background: var(--cc-light-accent-soft, rgba(255, 159, 10, 0.1)) !important;
    color: var(--cc-light-accent, #ffb74d);
    font-size: 0.8rem;
    font-weight: 600;
}
body.live-game-active #substitutionModal .sub-player-entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}
body.live-game-active #substitutionModal .sub-availability-btn {
    min-height: 44px;
    padding: 8px;
    border-radius: 8px;
    border-color: var(--cc-light-border, #303238);
    background: transparent;
    color: var(--cc-light-muted, #a9adb5);
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 500;
    white-space: normal;
}
body.live-game-active #timeoutModal .timeout-choice-card {
    padding: 18px;
    border: 1px solid var(--cc-light-border, #303238) !important;
    border-radius: 10px;
    background: var(--cc-light-control, #202124) !important;
    box-shadow: none;
    transform: none;
}
body.live-game-active #timeoutModal .timeout-choice-card:hover:not(:disabled) {
    background: var(--cc-light-control-hover, #282a2e) !important;
    border-color: #ff9f0a !important;
}
body.live-game-active #timeoutModal .timeout-choice-team { font-size: 0.94rem; font-weight: 600; }
body.live-game-active #timeoutModal .timeout-choice-count { margin-top: 6px; font-size: 0.8rem; font-weight: 400; color: var(--cc-light-muted, #a9adb5); }
body.live-game-active #timeoutModal .timeout-modal-dots { margin-top: 12px; }
@media (max-width: 600px) {
    body.live-game-active #substitutionModal .substitution-layout { grid-template-columns: 1fr; gap: 20px; }
    body.live-game-active #lineupModal .lineup-player-list { column-count: 1; }
}

/* Clear live-game typography and distinct stat-action colours. */
#gameScreen {
    --live-made-fill: #237344;
    --live-made-hover: #2b8250;
    --live-miss-fill: #b91c1c;
    --live-miss-hover: #991b1b;
    --live-foul-fill: #f75b02;
    --live-foul-hover: #e65300;
}
#gameScreen :is(.live-panel-title, .live-side-panel-title, .score-team-name) {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
}
#gameScreen :is(.live-panel-title, .live-side-panel-title) {
    font-size: 1.2rem;
    line-height: 1.35;
}
#gameScreen .score-team-name { font-size: clamp(0.95rem, 1.2vw, 1.25rem); }
#gameScreen #homeOnCourt :is(.player-name, .player-summary, .player-meta) {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0;
    text-transform: none;
}
#gameScreen #homeOnCourt .player-name { font-weight: 600; }
#gameScreen #homeOnCourt .action-btn { letter-spacing: 0; font-weight: 700; }
#gameScreen #homeOnCourt .action-btn.primary {
    background: var(--live-made-fill); border-color: var(--live-made-fill); color: #ffffff;
}
#gameScreen #homeOnCourt .action-btn.primary:hover:not(:disabled) {
    background: var(--live-made-hover); border-color: var(--live-made-hover); color: #ffffff; filter: none;
}
#gameScreen #homeOnCourt :is(.action-btn.miss-shot-2, .action-btn.miss-shot-3) {
    background: var(--live-miss-fill); border-color: var(--live-miss-fill); color: #ffffff;
}
#gameScreen #homeOnCourt :is(.action-btn.miss-shot-2, .action-btn.miss-shot-3):hover:not(:disabled) {
    background: var(--live-miss-hover); border-color: var(--live-miss-hover); color: #ffffff; filter: none;
}
#gameScreen #homeOnCourt .action-btn.danger {
    background: var(--live-foul-fill); border-color: var(--live-foul-fill); color: #121518;
}
#gameScreen #homeOnCourt .action-btn.danger:hover:not(:disabled) {
    background: var(--live-foul-hover); border-color: var(--live-foul-hover); color: #121518;
}

body[data-theme="light"] #gameScreen #homeOnCourt .action-btn.primary { color: #ffffff; }

/* Quiet jersey badges; retain the existing responsive box dimensions. */
#gameScreen #homeOnCourt.live-player-list .player-number {
    border-radius: 8px;
    border-color: var(--cc-border-strong);
    background: var(--cc-surface-raised);
    color: var(--cc-text);
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    box-shadow: none;
}

/* Consistent live-game hierarchy and action labels. */
#gameScreen button,
body.live-game-active .modal button { text-transform: uppercase; }
#gameScreen #homeOnCourt :is(.player-meta, .player-summary),
#gameScreen :is(.live-side-panel-subtitle, .live-action-log-meta) {
    font-weight: 400;
}
#gameScreen :is(.live-summary-label, .live-shooting-label, .live-shooting-value, .live-action-log-time) {
    font-weight: 600;
}
#gameScreen:is(#gameScreen) :is(.lineup-mini-btn-accent, .live-nav-item.active) {
    background: var(--live-foul-fill);
    border-color: var(--live-foul-fill);
    color: #121518;
}
#gameScreen:is(#gameScreen) :is(.lineup-mini-btn-accent, .live-nav-item.active):hover:not(:disabled) {
    background: var(--live-foul-hover);
    border-color: var(--live-foul-hover);
    color: #121518;
}
/* Override dialog-specific casing only while a live game is active. */
body.live-game-active .modal button { text-transform: uppercase !important; }

/* Modern live scoreboard; animation classes and keyframes remain unchanged. */
#gameScreen .scoreboard-bar {
    background: var(--cc-bg);
    border-bottom-color: var(--cc-border);
}
#gameScreen .score-team-accent { background: var(--live-foul-fill); }
#gameScreen .score-team-name {
    color: var(--cc-text);
    line-height: 1.25;
}
#gameScreen .score-team-role {
    color: var(--cc-text-muted);
    font-weight: 500;
    letter-spacing: 0.12em;
}
#gameScreen :is(#homeScore, #awayScore) {
    font-family: 'Inter', sans-serif;
    font-size: clamp(3rem, 4.5vw, 5rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: -0.045em;
}
#gameScreen #homeScore { color: var(--live-foul-fill); }
#gameScreen #awayScore { color: var(--cc-text); }
#gameScreen .period-clock {
    background: var(--cc-surface);
    border-color: var(--cc-border);
    border-radius: 16px;
    box-shadow: none;
}
#gameScreen .period {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--live-foul-fill);
}
#gameScreen .period-clock .clock {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1.8rem, 2.8vw, 3rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: -0.035em;
    color: var(--cc-text);
}
#gameScreen .period-clock .clock.running { color: var(--cc-success); }
#gameScreen .score-foul-row {
    background: var(--cc-control);
    border-color: var(--cc-border);
}
#gameScreen .score-foul-label { color: var(--cc-text-muted); font-weight: 600; letter-spacing: 0.04em; }
#gameScreen .score-foul-value { color: var(--cc-text); font-variant-numeric: tabular-nums; }
@media (max-width: 980px) {
    #gameScreen :is(#homeScore, #awayScore) { font-size: clamp(2rem, 5vw, 3.25rem); }
    #gameScreen .period-clock .clock { font-size: clamp(1.5rem, 3vw, 2rem); }
    #gameScreen .period { font-size: 0.9rem; }
}
#gameScreen .period-clock .clock.danger { color: var(--cc-danger); }

/* Quiet navigation keeps live-game actions distinct from views. */
#gameScreen .live-side-menu { background: var(--cc-light-surface, #131517); box-shadow: none; }
#gameScreen .live-side-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 4px; overflow-y: auto; }
#gameScreen .live-nav-item {
    position: relative; flex-shrink: 0; min-height: 46px; padding: 12px 14px;
    border: 0; border-radius: 7px; background: transparent; box-shadow: none;
    color: var(--cc-light-muted, #b9bec7); gap: 12px; font-family: 'Inter', sans-serif;
    font-size: 0.88rem; font-weight: 500; letter-spacing: 0; text-transform: none;
    text-align: left; white-space: nowrap;
}
#gameScreen .live-nav-item:hover:not(:disabled) { background: var(--cc-light-raised, rgba(255,255,255,0.04)); border: 0; color: var(--cc-light-text, #f2f3f5); transform: none; }
#gameScreen .live-nav-item.active,
#gameScreen .live-nav-item.active:hover:not(:disabled) { background: var(--cc-light-accent-soft, rgba(255,159,10,0.12)); color: var(--cc-light-accent, #ff9f0a); border: 0; }
#gameScreen .live-nav-item.active::before { top: 0; bottom: 0; left: 0; width: 3px; border-radius: 3px; }
#gameScreen .live-nav-icon { width: 20px; height: 20px; }
#gameScreen .live-nav-icon svg { display: block; width: 100%; height: 100%; }
#gameScreen #liveNavTimeoutBtn { margin-top: 18px; }
#gameScreen #liveNavTimeoutBtn::before { content: ''; position: absolute; top: -11px; left: 8px; right: 8px; height: 1px; background: var(--cc-light-border, #282c32); }
#gameScreen #liveNavQuitBtn,
body[data-theme="light"] #gameScreen #liveNavQuitBtn { margin-top: auto; background: transparent; color: var(--cc-light-danger, #ff727b); border: 0; }
#gameScreen #liveNavQuitBtn::before { content: ''; position: absolute; top: -10px; left: 8px; right: 8px; height: 1px; background: var(--cc-light-border, #282c32); }
#gameScreen #liveNavQuitBtn:hover:not(:disabled) { background: var(--cc-light-danger-soft, rgba(255,114,123,0.08)); color: var(--cc-light-danger, #ff727b); border: 0; }
#gameScreen .live-side-toggle { background: transparent; box-shadow: none; border-color: var(--cc-light-border, #282c32); }
@media (max-width: 767px) {
    #gameScreen .live-nav-item { justify-content: center; padding: 12px 4px; }
}
#gameScreen #liveNavDashboardBtn.active,
#gameScreen #liveNavDashboardBtn.active:hover:not(:disabled) {
    background: var(--cc-light-accent-soft, rgba(255,159,10,0.12));
    color: var(--cc-light-accent, #ff9f0a);
    border: 0;
}
@media (min-width: 1200px) {
    #gameScreen:not(.live-nav-collapsed) .live-shell { grid-template-columns: 216px minmax(0, 1fr); }
}

/* The managed team's identity fills the entire left scoreboard section. */
#gameScreen .team-score.home {
    width: 100%;
    justify-self: stretch;
    grid-template-columns: 5px minmax(0, 1fr) auto;
}
#gameScreen .team-score.home .score-team-meta {
    justify-items: start;
    text-align: left;
}
@media (max-width: 980px) and (orientation: portrait) {
    #gameScreen .team-score.home { grid-template-columns: 4px minmax(0, 1fr) auto; }
}

/* Flat dark surfaces: keep this palette on non-live screens only. The light
 * theme and live-game action colors continue to own their existing tokens. */
body:not(.live-game-active):not([data-theme="light"]) :is(#authScreen, #setupScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal, #settingsModal) {
    --cc-bg: #0d0f11;
    --cc-surface: #181a1d;
    --cc-surface-raised: #202327;
    --cc-input: #111315;
    --cc-border: #303338;
    --cc-dashboard-surface: var(--cc-surface);
    --cc-dashboard-surface-2: var(--cc-input);
    --cc-light-surface: var(--cc-surface);
    --cc-light-raised: var(--cc-surface-raised);
    --cc-light-border: var(--cc-border);
    --cc-light-shadow: none;
    --auth-neutral: var(--cc-bg);
    --auth-surface: var(--cc-surface);
    --page-surface: var(--cc-surface);
    --page-input: var(--cc-input);
}
body:not(.live-game-active):not([data-theme="light"]) .dash-app-shell {
    --dash-neutral: var(--cc-bg);
    --dash-surface: var(--cc-surface);
    --dash-surface-2: var(--cc-input);
    background: var(--cc-bg);
}
body:not(.live-game-active):not([data-theme="light"]) #setupScreen {
    background-color: var(--cc-bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 1.5px);
    background-size: 22px 22px;
    background-position: 0 0;
    background-repeat: repeat;
}
body:not(.live-game-active):not([data-theme="light"]) #authScreen .auth-bg {
    background-color: var(--cc-bg);
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 1.45px);
    background-size: 22px 22px;
    background-position: 0 0;
    background-repeat: repeat;
}
body:not(.live-game-active):not([data-theme="light"]) #setupScreen :is(.onboarding-hero, .tm-team-card, .lh-league-card, .dash-kpi-card, .dash-panel, .tm-panel, .settings-section, .sg-panel) {
    background: var(--cc-surface);
    border-color: var(--cc-border);
    box-shadow: none;
}
body:not(.live-game-active):not([data-theme="light"]) #setupScreen :is(.pg-card, .dash-game, .onboarding-highlight) {
    background: var(--cc-input);
    border-color: var(--cc-border);
    box-shadow: none;
}
body:not(.live-game-active):not([data-theme="light"]) #setupScreen :is(.start-game-screen, .season-module-screen)::before { background: none; }
/* Neutral controls are scoped explicitly; scoring and destructive fills retain
 * their orange/yellow, green and red colors. */
body:not(.live-game-active):not([data-theme="light"]) :is(#authScreen, #setupScreen, #pastGamesModal, #pastGameDetailModal, #pastGameInfoModal, #gameRecapModal, #gameReportModal, #playerReportModal, #pastGameShotChartModal, #createLeagueModal, #teamManagerModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #opponentCreateModal, #gameRosterModal, #settingsModal) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    background: var(--cc-input);
    border-color: var(--cc-border);
}
body:not(.live-game-active):not([data-theme="light"]) #setupScreen :is(.btn-secondary, .dash-filter-btn, .season-filter-select) {
    background: var(--cc-control);
    border-color: var(--cc-border);
    box-shadow: none;
}
body:not(.live-game-active):not([data-theme="light"]) #setupScreen .btn-secondary:hover:not(:disabled) { background: var(--cc-control-hover); }

body:not(.live-game-active):not([data-theme="light"]).auth-locked {
    background-color: #0d0f11;
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.045) 1px, transparent 1.45px);
    background-size: 22px 22px;
    background-position: 0 0;
    background-repeat: repeat;
}
body:not(.live-game-active):not([data-theme="light"]) #setupScreen .icon-nav-btn {
    background: var(--cc-control);
    border-color: var(--cc-border);
    box-shadow: none;
}
body:not(.live-game-active):not([data-theme="light"]) #setupScreen .icon-nav-btn:hover:not(:disabled) {
    background: var(--cc-control-hover);
}

/* Chart data and grid lines retain their original palette rather than using
 * the opaque card-surface aliases. Light theme keeps its existing values. */
body:not(.live-game-active):not([data-theme="light"]) #dashboardScreen :is(.dash-bar-fill.fg, .dash-chart-wrap) {
    --cc-light-surface: initial;
}
body:not(.live-game-active):not([data-theme="light"]) #dashboardScreen .dash-bars::before {
    --cc-light-raised: initial;
}

/* Compact league-header action; retain a comfortable phone tap target. */
body:not(.live-game-active) #leagueHubScreen .lh-teams-header > button[data-action="openOpponentModal"] {
    width: auto;
    min-width: 0;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    line-height: 1.25;
}
@media (max-width: 767px) {
    body:not(.live-game-active) #leagueHubScreen .lh-teams-header > button[data-action="openOpponentModal"] {
        min-height: 44px;
    }
}

/* Saved-game shot chart uses the same restrained surfaces as the dashboard. */
body:not(.live-game-active) #pastGameShotChartModal .past-shot-chart-modal-content {
    width: min(94vw, 860px);
    max-width: 860px;
    max-height: calc(100dvh - 32px);
    padding: 24px;
    overflow-y: auto;
    border: 1px solid var(--cc-border);
    border-radius: 18px;
    background: var(--cc-surface);
    box-shadow: none;
    gap: 0;
}
#pastGameShotChartModal .modal-header { margin-bottom: 8px; padding-right: 44px; }
#pastGameShotChartModal .past-game-meta {
    margin: 0 0 20px;
    color: var(--cc-text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
#pastGameShotChartModal .past-shot-chart-controls {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 16px;
}
#pastGameShotChartModal .past-shot-chart-controls .form-group {
    width: min(100%, 280px);
    gap: 6px;
}
#pastGameShotChartModal .past-shot-chart-controls label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cc-text-subtle);
    margin: 0;
    flex-shrink: 0;
}
#pastGameShotChartModal .past-shot-chart-controls select {
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 8px;
    border-color: var(--cc-border);
    background: var(--cc-input);
    color: var(--cc-text);
    font-size: 0.85rem;
}
#pastGameShotChartModal .past-shot-chart-court-wrap {
    width: min(100%, 500px);
    flex-shrink: 0;
    border-color: var(--cc-border);
    border-radius: 12px;
}
#pastGameShotChartModal .past-shot-chart-marker-info {
    border-color: var(--cc-border);
    border-radius: 8px;
    font-size: 0.8rem;
    padding: 10px 12px;
    text-align: left;
    white-space: pre-line;
}
#pastGameShotChartModal .past-shot-chart-footer {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
    text-align: left;
}
#pastGameShotChartModal .past-shot-stat {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    background: var(--cc-input);
}
#pastGameShotChartModal .past-shot-stat-label {
    font-size: 0.7rem;
    color: var(--cc-text-muted);
    letter-spacing: 0.04em;
}
#pastGameShotChartModal .past-shot-stat strong { font-size: 1.2rem; color: var(--cc-text); }
#pastGameShotChartModal .past-shot-stat-percentage { font-size: 0.8rem; color: var(--cc-accent); }
#pastGameShotChartModal .modal-actions { margin-top: 20px; }
@media (max-width: 767px) {
    body:not(.live-game-active) #pastGameShotChartModal .past-shot-chart-modal-content {
        padding: 18px;
        max-height: calc(100dvh - 24px);
    }
    #pastGameShotChartModal .past-shot-chart-controls .form-group { width: 100%; }
    #pastGameShotChartModal .past-shot-stat { padding: 10px; }
}

/* The shot filter is a compact control, not a full-width surface. */
#pastGameShotChartModal.live-mode #pastGameShotChartMeta { display: none; }
#pastGameShotChartModal .past-shot-chart-controls,
body.live-game-active #pastGameShotChartModal .past-shot-chart-controls {
    justify-content: flex-start;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    display: grid;
    gap: 12px;
}
#pastGameShotChartModal .past-shot-chart-controls .form-group {
    width: min(100%, 360px);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
#pastGameShotChartModal .past-shot-chart-controls select,
body.live-game-active #pastGameShotChartModal .past-shot-chart-controls select {
    flex: 1;
    min-width: 0;
    margin: 0;
    background: var(--cc-input) !important;
    border: 1px solid var(--cc-border) !important;
    color: var(--cc-text) !important;
    box-shadow: none !important;
}

/* Shot chart filters: two toggles, then four labelled selects that wrap to fit the dialog. */
#pastGameShotChartModal .past-shot-chart-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
#pastGameShotChartModal .past-shot-chart-segment {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    background: var(--cc-input);
}
#pastGameShotChartModal .past-shot-chart-segment.hidden { display: none; }
#pastGameShotChartModal .past-shot-chart-segment button {
    min-height: 38px;
    padding: 6px 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--cc-text-muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}
#pastGameShotChartModal .past-shot-chart-segment button.active {
    background: var(--cc-accent);
    color: var(--cc-on-accent);
}
#pastGameShotChartModal .past-shot-chart-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}
#pastGameShotChartModal .past-shot-chart-filters .form-group {
    width: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}
#pastGameShotChartModal .past-shot-chart-filters select { width: 100%; }
#pastGameShotChartModal .past-shot-chart-layer.hidden { display: none; }
#pastGameShotChartModal .past-shot-chart-location-note {
    margin: 10px auto 0;
    max-width: 500px;
    color: var(--cc-accent);
    font-size: 0.8rem;
    font-weight: 600;
}
#pastGameShotChartModal .past-shot-chart-location-note.hidden { display: none; }
#pastGameShotChartModal .past-shot-chart-players { margin-top: 16px; }
#pastGameShotChartModal .past-shot-chart-players.hidden { display: none; }
#pastGameShotChartModal .past-shot-chart-players-title {
    margin: 0 0 8px;
    color: var(--cc-text);
    font-size: 0.9rem;
    font-weight: 700;
}
#pastGameShotChartModal .past-shot-chart-players-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
}
#pastGameShotChartModal .past-shot-chart-players-table th {
    padding: 6px 8px;
    border-bottom: 1px solid var(--cc-border);
    color: var(--cc-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: right;
}
#pastGameShotChartModal .past-shot-chart-players-table th:first-child { text-align: left; }
#pastGameShotChartModal .past-shot-chart-players-table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--cc-border);
    color: var(--cc-text);
}
#pastGameShotChartModal .past-shot-chart-players-table td.numeric { text-align: right; white-space: nowrap; }
#pastGameShotChartModal .past-shot-chart-player-row.selected td { background: var(--cc-accent-soft, rgba(255, 152, 0, 0.12)); }
#pastGameShotChartModal .past-shot-chart-player-btn {
    min-height: 40px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    overflow-wrap: anywhere;
}
#pastGameShotChartModal .past-shot-chart-player-row.selected .past-shot-chart-player-btn { color: var(--cc-accent); }

/* Lineup actions follow the shared compact dialog buttons. */
#lineupModal.modal .modal-actions .btn {
    flex: 0 1 auto;
    min-width: 88px;
    min-height: 44px;
    margin: 0;
    padding: 10px 16px;
    border: 1px solid var(--cc-accent) !important;
    border-radius: 8px;
    background: var(--cc-accent) !important;
    color: var(--cc-on-accent) !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
}
#lineupModal.modal .modal-actions .btn::before { content: none; }
#lineupModal.modal .modal-actions .btn:hover {
    background: var(--cc-accent-hover) !important;
    border-color: var(--cc-accent-hover) !important;
    transform: none;
}
#lineupModal.modal .modal-actions .btn-secondary {
    background: var(--cc-control) !important;
    border-color: var(--cc-border-strong) !important;
    color: var(--cc-text) !important;
}
#lineupModal.modal .modal-actions .btn-secondary:hover {
    background: var(--cc-control-hover) !important;
    border-color: var(--cc-border-strong) !important;
}
#lineupModal.modal .modal-actions .btn:focus-visible {
    outline: 2px solid var(--cc-focus);
    outline-offset: 3px;
}
body[data-theme="light"] #lineupModal.modal {
    --cc-accent: #ff9f0a;
    --cc-accent-hover: #ffb238;
    --cc-on-accent: #121518;
}

/* Keep availability controls separate from instant substitutions. */
#substitutionModal .sub-player-entry.is-available { grid-template-columns: minmax(0, 1fr); }
#substitutionModal .sub-unavailable-group { margin-top: 20px; }
#substitutionModal .sub-unavailable-group[hidden] { display: none; }
#substitutionModal .is-unavailable .sub-player-btn { opacity: 0.55; cursor: not-allowed; }
#substitutionModal .sub-player-status { font-size: 0.7rem; font-weight: 400; text-transform: none; margin-left: auto; }
#substitutionModal .sub-availability-btn { text-transform: none; }

/* Period-start reminder follows the compact Notice/Confirm design.
 * Scoped overrides also win over the older live-game gradient rules. */
body #periodLineupReminderModal.modal { padding: 16px; background: var(--cc-scrim); backdrop-filter: blur(8px); }
body #periodLineupReminderModal.modal .modal-content.setup-surface {
    width: 100%; min-width: 0; max-width: 440px; padding: 24px;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--cc-surface) !important; color: var(--cc-text) !important;
    border: 1px solid var(--cc-border) !important; border-radius: 16px;
    box-shadow: var(--cc-light-shadow, 0 24px 80px rgba(0, 0, 0, 0.45)) !important;
}
body #periodLineupReminderModal.modal .modal-header {
    margin: 0 0 10px; color: var(--cc-text) !important; font-family: 'Inter', sans-serif;
    font-size: 1.25rem; font-weight: 700; line-height: 1.4;
    letter-spacing: -0.02em; text-transform: none; overflow-wrap: anywhere;
}
body #periodLineupReminderModal.modal .period-lineup-reminder-subtitle {
    margin: 0; color: var(--cc-text-subtle); font-size: 0.94rem; font-weight: 400;
    line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
body #periodLineupReminderModal.modal .modal-actions {
    display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px;
    margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--cc-border);
}
body #periodLineupReminderModal.modal .modal-actions .btn {
    flex: 0 1 auto; min-width: 88px; min-height: 44px; margin: 0; padding: 10px 16px;
    border: 1px solid var(--cc-accent) !important; border-radius: 8px;
    background: var(--cc-accent) !important; color: var(--cc-on-accent) !important; box-shadow: none !important;
    font-family: 'Inter', sans-serif; font-size: 0.875rem; font-weight: 600;
    line-height: 1.4; letter-spacing: 0; text-transform: none; white-space: normal;
}
body #periodLineupReminderModal.modal .modal-actions .btn::before { content: none; }
body #periodLineupReminderModal.modal .modal-actions .btn:hover { background: var(--cc-accent-hover) !important; border-color: var(--cc-accent-hover) !important; transform: none; box-shadow: none !important; }
body #periodLineupReminderModal.modal .modal-actions .btn-secondary { background: var(--cc-control) !important; border-color: var(--cc-border-strong) !important; color: var(--cc-text) !important; }
body #periodLineupReminderModal.modal .modal-actions .btn-secondary:hover { background: var(--cc-control-hover) !important; border-color: var(--cc-border-strong) !important; }
body #periodLineupReminderModal.modal .modal-actions .btn:focus-visible { outline: 2px solid var(--cc-focus); outline-offset: 3px; }
@media (max-width: 480px) {
    body #periodLineupReminderModal.modal .modal-content.setup-surface { padding: 20px; }
    body #periodLineupReminderModal.modal .modal-actions .btn { flex: 1 1 100px; }
}

body[data-theme="light"] #periodLineupReminderModal.modal {
    --cc-accent: #ff9f0a; --cc-accent-hover: #ffb238;
    --cc-focus: #ff9f0a; --cc-on-accent: #121518;
}

/* Free throws use the same compact Settings/Notice surface and filled controls. */
body #freeThrowModal.modal {
    padding: 16px; background: var(--cc-scrim); backdrop-filter: blur(8px);
}
body #freeThrowModal.modal .modal-content {
    width: 100%; min-width: 0; max-width: 440px !important; padding: 24px;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    background: var(--cc-surface) !important; color: var(--cc-text);
    border: 1px solid var(--cc-border) !important; border-radius: 16px;
    box-shadow: var(--cc-light-shadow, 0 24px 80px rgba(0, 0, 0, 0.45)) !important;
}
body #freeThrowModal.modal .modal-header {
    margin: 0 48px 16px 0; color: var(--cc-text) !important;
    font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700;
    line-height: 1.4; letter-spacing: -0.02em; text-transform: none;
}
body #freeThrowModal.modal .ft-player-name {
    margin: 0 0 6px; color: var(--cc-text); text-shadow: none;
    font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600;
    line-height: 1.5; letter-spacing: 0; overflow-wrap: anywhere;
}
body #freeThrowModal.modal .ft-player-score {
    margin: 0; color: var(--cc-text-subtle); font-size: 0.94rem;
    font-weight: 400; line-height: 1.6; letter-spacing: 0;
}
body #freeThrowModal.modal .modal-close {
    top: 16px; right: 16px; width: 40px; height: 40px;
    display: grid; place-items: center; padding: 0;
    background: var(--cc-control) !important; color: var(--cc-text-subtle) !important;
    border: 1px solid var(--cc-border-strong) !important; border-radius: 8px;
    font-size: 1rem; line-height: 1; box-shadow: none;
}
body #freeThrowModal.modal .modal-close:hover {
    background: var(--cc-control-hover) !important; color: var(--cc-text) !important; transform: none;
}
body #freeThrowModal.modal .ft-attempts {
    display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 0;
    padding-top: 16px; border-top: 1px solid var(--cc-border);
}
body #freeThrowModal.modal .ft-attempts .ft-action-btn.btn {
    flex: 1 1 100px; min-width: 0; min-height: 44px; margin: 0; padding: 10px 16px;
    border: 1px solid #237344 !important; border-radius: 8px;
    background: #237344 !important; color: #ffffff !important;
    box-shadow: none !important; font-family: 'Inter', sans-serif;
    font-size: 0.875rem; font-weight: 600; line-height: 1.4;
    letter-spacing: 0; text-transform: none; white-space: normal;
}
body #freeThrowModal.modal .ft-attempts .btn::before { content: none; }
body #freeThrowModal.modal .ft-attempts .btn:hover {
    background: #2b8250 !important;
    border-color: #2b8250 !important; transform: none;
}
body #freeThrowModal.modal .ft-attempts .btn.btn-danger {
    background: #b91c1c !important; border-color: #b91c1c !important;
    color: #ffffff !important;
}
body #freeThrowModal.modal .ft-attempts .btn.btn-danger:hover { background: #991b1b !important; border-color: #991b1b !important; }
body #freeThrowModal.modal :is(.btn, .modal-close):focus-visible {
    outline: 2px solid var(--cc-focus); outline-offset: 3px;
}
body[data-theme="light"] #freeThrowModal.modal {
    --cc-accent: #ff9f0a; --cc-accent-hover: #ffb238;
    --cc-focus: #ff9f0a; --cc-on-accent: #121518;
}
@media (max-width: 480px) {
    body #freeThrowModal.modal .modal-content { padding: 20px; }
}
body[data-theme="light"] #freeThrowModal.modal .ft-attempts .btn.btn-danger { color: #ffffff !important; }

/* Remaining opponent timeouts sit below the scoreboard team role. */
#gameScreen .team-score.away .score-timeouts-remaining {
    display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px;
    margin-top: 4px; color: var(--cc-text-subtle);
    font-family: 'Inter', sans-serif; font-size: 0.75rem;
    font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none;
}
#gameScreen .team-score.away .score-timeouts-remaining strong {
    color: var(--cc-text); font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Game Info follows the compact Settings and Notice presentation. */
body #pastGameInfoModal.modal {
    --cc-accent: #ff9f0a;
    --cc-accent-hover: #ffb238;
    --cc-on-accent: #121518;
    --cc-focus: #ff9f0a;
    padding: 16px;
    background: var(--cc-scrim);
    backdrop-filter: blur(8px);
}
body #pastGameInfoModal.modal .modal-content.setup-surface {
    width: 100%; min-width: 0; max-width: 760px !important;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 24px; border-radius: 16px;
    background: var(--cc-surface) !important; color: var(--cc-text);
    border: 1px solid var(--cc-border) !important;
    box-shadow: var(--cc-light-shadow, 0 24px 80px rgba(0, 0, 0, 0.45)) !important;
}
body #pastGameInfoModal.modal .modal-header {
    margin: 0 48px 6px 0; padding: 0;
    font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700;
    line-height: 1.4; letter-spacing: -0.02em; text-transform: none;
    color: var(--cc-text) !important;
}
body #pastGameInfoModal.modal .past-game-meta {
    margin: 0; color: var(--cc-text-subtle); font-size: 0.8125rem; line-height: 1.6;
}
body #pastGameInfoModal.modal .pg-info-scoreboard {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 16px; align-items: center; margin: 20px 0 0; padding: 18px;
    background: var(--cc-surface-raised); border: 1px solid var(--cc-border);
    border-radius: 12px;
}
body #pastGameInfoModal.modal .pg-info-team-label {
    color: var(--cc-text-subtle); font-size: 0.75rem; letter-spacing: 0; text-transform: none;
}
body #pastGameInfoModal.modal .pg-info-team strong {
    color: var(--cc-text); font-family: 'Inter', sans-serif;
    font-size: 0.9375rem; line-height: 1.5; letter-spacing: 0;
}
body #pastGameInfoModal.modal .pg-info-score {
    color: var(--cc-text); font-family: 'Inter', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 700;
    line-height: 1.3; letter-spacing: -0.03em;
}
body #pastGameInfoModal.modal .pg-info-section-title {
    margin: 20px 0 10px; color: var(--cc-text-subtle);
    font-family: 'Inter', sans-serif; font-size: 0.8125rem; line-height: 1.5;
    letter-spacing: 0; text-transform: none; overflow-wrap: anywhere;
}
body #pastGameInfoModal.modal .pg-info-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
body #pastGameInfoModal.modal .pg-info-card {
    min-width: 0; padding: 14px; border-radius: 10px;
    background: var(--cc-surface-raised); border: 1px solid var(--cc-border);
}
body #pastGameInfoModal.modal .pg-info-card-label {
    color: var(--cc-text-subtle); font-size: 0.75rem; line-height: 1.5;
}
body #pastGameInfoModal.modal .pg-info-card-value {
    display: block; margin-top: 6px; color: var(--cc-text);
    font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere;
}
body #pastGameInfoModal.modal .modal-actions.wide-spacing {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px; margin-top: 20px; padding-top: 16px; border-color: var(--cc-border);
}
body #pastGameInfoModal.modal :is(.modal-actions .btn, .modal-close) {
    min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px;
    background: var(--cc-control) !important; color: var(--cc-text) !important;
    border: 1px solid var(--cc-border-strong) !important; border-radius: 8px;
    box-shadow: none !important; font-family: 'Inter', sans-serif;
    font-size: 0.8125rem; font-weight: 600; line-height: 1.4;
    text-transform: none; letter-spacing: 0; white-space: normal;
    transition: background-color 150ms ease, border-color 150ms ease;
}
body #pastGameInfoModal.modal .modal-actions .btn::before { content: none; }
body #pastGameInfoModal.modal :is(.modal-actions .btn, .modal-close):hover:not(:disabled) {
    background: var(--cc-control-hover) !important; transform: none;
}
body #pastGameInfoModal.modal .modal-actions [data-action="openSelectedPastGameDetail"] {
    background: var(--cc-accent) !important; border-color: var(--cc-accent) !important;
    color: var(--cc-on-accent) !important;
}
body #pastGameInfoModal.modal .modal-actions [data-action="openSelectedPastGameDetail"]:hover:not(:disabled) {
    background: var(--cc-accent-hover) !important; border-color: var(--cc-accent-hover) !important;
}
body #pastGameInfoModal.modal .modal-actions .btn-danger {
    background: #b91c1c !important; border-color: #b91c1c !important; color: #ffffff !important;
}
body #pastGameInfoModal.modal .modal-actions .btn-danger:hover:not(:disabled) {
    background: #991b1b !important; border-color: #991b1b !important;
}
body #pastGameInfoModal.modal :is(.modal-actions .btn, .modal-close):focus-visible {
    outline: 2px solid var(--cc-focus); outline-offset: 3px; box-shadow: none !important;
}
body #pastGameInfoModal.modal :is(.modal-actions .btn, .modal-close):disabled {
    opacity: 0.55; cursor: not-allowed; transform: none;
}
body #pastGameInfoModal.modal .modal-close {
    top: 16px; right: 16px; width: 40px; height: 40px; min-height: 40px;
    display: grid; place-items: center; padding: 0; font-size: 1rem;
}
@media (max-width: 600px) {
    body #pastGameInfoModal.modal .modal-content.setup-surface { padding: 20px; }
    body #pastGameInfoModal.modal .pg-info-scoreboard { padding: 14px 10px; gap: 8px; }
    body #pastGameInfoModal.modal .pg-info-grid { grid-template-columns: 1fr; }
    body #pastGameInfoModal.modal .pg-info-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    body #pastGameInfoModal.modal .pg-info-card-value { margin: 0; }
    body #pastGameInfoModal.modal .modal-actions.wide-spacing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
    body #pastGameInfoModal.modal .pg-info-scoreboard { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    body #pastGameInfoModal.modal .pg-info-score { grid-row: 2; grid-column: 1 / -1; }
}
/* Filled secondary actions retain clear contrast against the light surface. */
body[data-theme="light"] #pastGameInfoModal.modal :is(.modal-actions .btn-secondary, .past-game-export-btn, .modal-close) {
    background: #364152 !important; border-color: #364152 !important; color: #ffffff !important;
}
body[data-theme="light"] #pastGameInfoModal.modal :is(.modal-actions .btn-secondary, .past-game-export-btn, .modal-close):hover:not(:disabled) {
    background: #253041 !important; border-color: #253041 !important;
}
/* The existing first action is a secondary-class button, but has primary hierarchy here. */
body[data-theme="light"] #pastGameInfoModal.modal .modal-actions [data-action="openSelectedPastGameDetail"] {
    background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: var(--cc-on-accent) !important;
}
body[data-theme="light"] #pastGameInfoModal.modal .modal-actions [data-action="openSelectedPastGameDetail"]:hover:not(:disabled) {
    background: var(--cc-accent-hover) !important; border-color: var(--cc-accent-hover) !important;
}

/* Make account sign-out actions easy to identify in both themes. */
body [data-auth-action="signOut"] {
    background: #b91c1c !important;
    border: 1px solid #b91c1c !important;
    color: #ffffff !important;
    border-radius: 8px;
    padding: 10px 16px;
    min-height: 44px;
    font-weight: 600;
}
body [data-auth-action="signOut"]:hover:not(:disabled) {
    background: #991b1b !important;
    border-color: #991b1b !important;
    filter: none;
}
body[data-theme="light"] [data-auth-action="signOut"] { color: #ffffff !important; }
body [data-auth-action="signOut"]:focus-visible { outline: 2px solid var(--cc-focus); outline-offset: 3px; }
/* Saved box score: compact popup surface, table and complete action states. */
body #pastGameDetailModal.modal {
    --cc-accent: #ff9f0a;
    --cc-accent-hover: #ffb238;
    --cc-on-accent: #121518;
    --cc-focus: #ff9f0a;
    padding: 16px;
    background: var(--cc-scrim);
    backdrop-filter: blur(8px);
}
body #pastGameDetailModal.modal .modal-content.setup-surface {
    width: 100%; min-width: 0; max-width: 1120px !important;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 24px; border-radius: 16px;
    background: var(--cc-surface) !important; color: var(--cc-text);
    border: 1px solid var(--cc-border) !important;
    box-shadow: var(--cc-light-shadow, 0 24px 80px rgba(0, 0, 0, 0.45)) !important;
}
body #pastGameDetailModal.modal .modal-header {
    margin: 0 48px 6px 0; padding: 0;
    font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700;
    line-height: 1.4; letter-spacing: -0.02em; text-transform: none;
    color: var(--cc-text) !important;
}
body #pastGameDetailModal.modal .past-game-meta {
    margin: 0; color: var(--cc-text-subtle); font-size: 0.8125rem; line-height: 1.6;
    letter-spacing: 0;
    text-transform: none;
}
body #pastGameDetailModal.modal .modal-actions.wide-spacing {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px; margin-top: 20px; padding-top: 16px; border-color: var(--cc-border);
}
body #pastGameDetailModal.modal :is(.modal-actions .btn, .modal-close) {
    min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px;
    background: var(--cc-control) !important; color: var(--cc-text) !important;
    border: 1px solid var(--cc-border-strong) !important; border-radius: 8px;
    box-shadow: none !important; font-family: 'Inter', sans-serif;
    font-size: 0.8125rem; font-weight: 600; line-height: 1.4;
    text-transform: none; letter-spacing: 0; white-space: normal;
    transition: background-color 150ms ease, border-color 150ms ease;
}
body #pastGameDetailModal.modal .modal-actions .btn::before { content: none; }
body #pastGameDetailModal.modal :is(.modal-actions .btn, .modal-close):hover:not(:disabled) {
    background: var(--cc-control-hover) !important; transform: none;
}
body #pastGameDetailModal.modal .modal-actions [data-action="togglePastGameDetailEditMode"] {
    background: var(--cc-accent) !important; border-color: var(--cc-accent) !important;
    color: var(--cc-on-accent) !important;
}
body #pastGameDetailModal.modal .modal-actions [data-action="togglePastGameDetailEditMode"]:hover:not(:disabled) {
    background: var(--cc-accent-hover) !important; border-color: var(--cc-accent-hover) !important;
}
body #pastGameDetailModal.modal .modal-actions .btn-danger {
    background: #b91c1c !important; border-color: #b91c1c !important; color: #ffffff !important;
}
body #pastGameDetailModal.modal .modal-actions .btn-danger:hover:not(:disabled) {
    background: #991b1b !important; border-color: #991b1b !important;
}
body #pastGameDetailModal.modal :is(.modal-actions .btn, .modal-close):focus-visible {
    outline: 2px solid var(--cc-focus); outline-offset: 3px; box-shadow: none !important;
}
body #pastGameDetailModal.modal :is(.modal-actions .btn, .modal-close):disabled {
    opacity: 0.55; cursor: not-allowed; transform: none;
}
body #pastGameDetailModal.modal .modal-close {
    top: 16px; right: 16px; width: 40px; height: 40px; min-height: 40px;
    display: grid; place-items: center; padding: 0; font-size: 1rem;
}
body[data-theme="light"] #pastGameDetailModal.modal :is(.modal-actions .btn-secondary, .past-game-export-btn, .modal-close) {
    background: #364152 !important; border-color: #364152 !important; color: #ffffff !important;
}
body[data-theme="light"] #pastGameDetailModal.modal :is(.modal-actions .btn-secondary, .past-game-export-btn, .modal-close):hover:not(:disabled) {
    background: #253041 !important; border-color: #253041 !important;
}
body[data-theme="light"] #pastGameDetailModal.modal .modal-actions [data-action="togglePastGameDetailEditMode"] {
    background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: var(--cc-on-accent) !important;
}
body[data-theme="light"] #pastGameDetailModal.modal .modal-actions [data-action="togglePastGameDetailEditMode"]:hover:not(:disabled) {
    background: var(--cc-accent-hover) !important; border-color: var(--cc-accent-hover) !important;
}
body #pastGameDetailModal.modal .past-game-team-heading {
    margin: 20px 0 10px; color: var(--cc-text); font-family: 'Inter', sans-serif;
    font-size: 0.9375rem; line-height: 1.5; letter-spacing: 0; text-transform: none;
    overflow-wrap: anywhere;
}
body #pastGameDetailModal.modal .past-game-box-score-wrap {
    width: 100%; max-width: 100%; margin: 0; padding: 0;
    overflow-x: auto; border: 1px solid var(--cc-border); border-radius: 10px;
    background: var(--cc-surface); scrollbar-width: thin;
    scrollbar-color: var(--cc-accent) var(--cc-surface-raised);
}
body #pastGameDetailModal.modal .stats-table {
    width: 100%; min-width: 900px; margin: 0; border-collapse: collapse;
    font-family: 'Inter', sans-serif; font-size: 0.8125rem; line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
body #pastGameDetailModal.modal .stats-table :is(th, td) {
    padding: 10px 8px; border-bottom: 1px solid var(--cc-border);
    color: var(--cc-text); white-space: nowrap;
}
body #pastGameDetailModal.modal .stats-table thead th {
    background: var(--cc-control); color: var(--cc-text-subtle);
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0;
}
body #pastGameDetailModal.modal .stats-table tbody tr:nth-child(odd) { background: var(--cc-surface-raised); }
body #pastGameDetailModal.modal .stats-table tbody tr:nth-child(even) { background: var(--cc-surface); }
body #pastGameDetailModal.modal .stats-table tbody tr:hover { background: var(--cc-control-hover); }
body #pastGameDetailModal.modal .stats-table tbody tr:last-child td { border-bottom: 0; }
body #pastGameDetailModal.modal .stats-table :is(th, td):nth-child(2) {
    width: 13rem; min-width: 13rem; text-align: left;
}
body #pastGameDetailModal.modal .stats-table .player-name-col { color: var(--cc-text); font-weight: 600; }
body #pastGameDetailModal.modal .stat-adjust-btn {
    min-width: 32px; min-height: 36px; border: 1px solid var(--cc-border-strong);
    border-radius: 6px; background: var(--cc-control); color: var(--cc-text);
    font-size: 1rem;
}
body #pastGameDetailModal.modal .stat-adjust-btn:hover:not(:disabled) { background: var(--cc-control-hover); }
body #pastGameDetailModal.modal .stat-adjust-btn:focus-visible { outline: 2px solid var(--cc-focus); outline-offset: 2px; }
body #pastGameDetailModal.modal .stat-adjust-btn:disabled { opacity: 0.55; cursor: not-allowed; }
body #pastGameDetailModal.modal .past-game-export-btn { grid-column: span 2; }
@media (max-width: 700px) {
    body #pastGameDetailModal.modal .modal-content.setup-surface { padding: 20px; }
    body #pastGameDetailModal.modal .modal-actions.wide-spacing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    body #pastGameDetailModal.modal .past-game-export-btn { grid-column: auto; }
}

/* Edit Player shares the compact popup controls. */
/* Saved box score: compact popup surface, table and complete action states. */
body #playerEditorModal.modal {
    --cc-accent: #ff9f0a;
    --cc-accent-hover: #ffb238;
    --cc-on-accent: #121518;
    --cc-focus: #ff9f0a;
    padding: 16px;
    background: var(--cc-scrim);
    backdrop-filter: blur(8px);
}
body #playerEditorModal.modal .modal-content.setup-surface {
    width: 100%; min-width: 0; max-width: 560px !important;
    max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    overflow-y: auto; overscroll-behavior: contain;
    padding: 24px; border-radius: 16px;
    background: var(--cc-surface) !important; color: var(--cc-text);
    border: 1px solid var(--cc-border) !important;
    box-shadow: var(--cc-light-shadow, 0 24px 80px rgba(0, 0, 0, 0.45)) !important;
}
body #playerEditorModal.modal .modal-header {
    margin: 0 48px 6px 0; padding: 0;
    font-family: 'Inter', sans-serif; font-size: 1.25rem; font-weight: 700;
    line-height: 1.4; letter-spacing: -0.02em; text-transform: none;
    color: var(--cc-text) !important;
}
body #playerEditorModal.modal .past-game-meta {
    margin: 0; color: var(--cc-text-subtle); font-size: 0.8125rem; line-height: 1.6;
}
body #playerEditorModal.modal .modal-actions.wide-spacing {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px; margin-top: 20px; padding-top: 16px; border-color: var(--cc-border);
}
body #playerEditorModal.modal :is(.modal-actions .btn, .modal-close) {
    min-width: 0; min-height: 44px; margin: 0; padding: 10px 12px;
    background: var(--cc-control) !important; color: var(--cc-text) !important;
    border: 1px solid var(--cc-border-strong) !important; border-radius: 8px;
    box-shadow: none !important; font-family: 'Inter', sans-serif;
    font-size: 0.8125rem; font-weight: 600; line-height: 1.4;
    text-transform: none; letter-spacing: 0; white-space: normal;
    transition: background-color 150ms ease, border-color 150ms ease;
}
body #playerEditorModal.modal .modal-actions .btn::before { content: none; }
body #playerEditorModal.modal :is(.modal-actions .btn, .modal-close):hover:not(:disabled) {
    background: var(--cc-control-hover) !important; transform: none;
}
body #playerEditorModal.modal .modal-actions [data-action="savePlayerFromModal"] {
    background: var(--cc-accent) !important; border-color: var(--cc-accent) !important;
    color: var(--cc-on-accent) !important;
}
body #playerEditorModal.modal .modal-actions [data-action="savePlayerFromModal"]:hover:not(:disabled) {
    background: var(--cc-accent-hover) !important; border-color: var(--cc-accent-hover) !important;
}
body #playerEditorModal.modal .modal-actions .btn-danger {
    background: #b91c1c !important; border-color: #b91c1c !important; color: #ffffff !important;
}
body #playerEditorModal.modal .modal-actions .btn-danger:hover:not(:disabled) {
    background: #991b1b !important; border-color: #991b1b !important;
}
body #playerEditorModal.modal :is(.modal-actions .btn, .modal-close):focus-visible {
    outline: 2px solid var(--cc-focus); outline-offset: 3px; box-shadow: none !important;
}
body #playerEditorModal.modal :is(.modal-actions .btn, .modal-close):disabled {
    opacity: 0.55; cursor: not-allowed; transform: none;
}
body #playerEditorModal.modal .modal-close {
    top: 16px; right: 16px; width: 40px; height: 40px; min-height: 40px;
    display: grid; place-items: center; padding: 0; font-size: 1rem;
}
body[data-theme="light"] #playerEditorModal.modal :is(.modal-actions .btn-secondary, .past-game-export-btn, .modal-close) {
    background: #364152 !important; border-color: #364152 !important; color: #ffffff !important;
}
body[data-theme="light"] #playerEditorModal.modal :is(.modal-actions .btn-secondary, .past-game-export-btn, .modal-close):hover:not(:disabled) {
    background: #253041 !important; border-color: #253041 !important;
}
body[data-theme="light"] #playerEditorModal.modal .modal-actions [data-action="savePlayerFromModal"] {
    background: var(--cc-accent) !important; border-color: var(--cc-accent) !important; color: var(--cc-on-accent) !important;
}
body[data-theme="light"] #playerEditorModal.modal .modal-actions [data-action="savePlayerFromModal"]:hover:not(:disabled) {
    background: var(--cc-accent-hover) !important; border-color: var(--cc-accent-hover) !important;
}

body #playerEditorModal.modal .form-grid { gap: 16px; margin-top: 20px; }
body #playerEditorModal.modal .form-group { min-width: 0; margin: 0; }
body #playerEditorModal.modal .form-group label { color: var(--cc-text-subtle); font-size: 0.8125rem; line-height: 1.5; }
body #playerEditorModal.modal input {
    width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px;
    background: var(--cc-input); color: var(--cc-text); border: 1px solid var(--cc-border-strong);
    border-radius: 8px; font-size: 0.9375rem;
}
body #playerEditorModal.modal input:focus-visible { outline: 2px solid var(--cc-focus); outline-offset: 2px; }
/* Black scrim avoids the washed-out gray overlay; surfaces follow each theme. */
body :is(#pastGameDetailModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal).modal {
    background: rgba(0, 0, 0, 0.82); backdrop-filter: none;
}
body:not([data-theme="light"]) :is(#pastGameDetailModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal).modal {
    --cc-surface: #101010; --cc-surface-raised: #191919;
    --cc-control: #242424; --cc-control-hover: #303030; --cc-input: #0b0b0b;
}
@media (max-width: 600px) {
    body #playerEditorModal.modal .modal-content.setup-surface { padding: 20px; }
    body #playerEditorModal.modal .form-grid { grid-template-columns: 1fr; }
}

/* Game By Game: prioritize the data while retaining readable controls. */
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) { padding: 20px; min-width: 0; max-width: none; width: 100%; gap: 12px; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-toolbar { gap: 10px; margin: 0; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-filter-panel { padding: 12px 16px; gap: 8px; border-radius: 12px; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-toolbar-filters { gap: 12px; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-toolbar-filters .form-group { margin: 0; min-width: 0; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-toolbar-filters label { font-size: 0.75rem; margin-bottom: 4px; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-toolbar-filters select { min-height: 40px; padding: 8px 10px; font-size: 0.8125rem; border-radius: 8px; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-view-controls { padding: 8px; border-radius: 12px; overflow: visible; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-view-controls > .season-toolbar-section-label { display: none; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-view-tabs { width: 100%; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-view-tab { flex: 1 1 120px; min-width: 0; min-height: 44px; flex-direction: row; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; font-size: 0.8125rem; border-radius: 8px; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-view-tab-icon { width: 24px; height: 24px; min-width: 24px; border-radius: 6px; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-view-tab-icon svg { width: 16px; height: 16px; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-view-tab-label { font-size: inherit; white-space: normal; line-height: 1.4; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-panel { margin-top: 14px; gap: 12px; margin: 0; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); border-radius: 12px; min-width: 0; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-section .season-analytics-heading { padding: 14px 16px; border: 0; align-self: center; font-size: 1rem; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-controls { padding: 10px 16px; border: 0; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-player-filter { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; max-width: none; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-player-filter select { min-height: 40px; font-size: 0.8125rem; font-weight: 600; border-radius: 8px; padding: 8px 10px; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-table-wrap { grid-column: 1 / -1; max-width: 100%; overflow: auto; max-height: 65vh; border-top: 1px solid var(--cc-border); scrollbar-width: thin; scrollbar-color: var(--cc-accent) var(--cc-surface-raised); }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-table { min-width: 0; width: max-content; min-width: 100%; font-size: 0.8125rem; line-height: 1.5; border-collapse: separate; border-spacing: 0; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-table :is(th, td) { padding: 8px 10px; letter-spacing: 0; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-table th { position: sticky; top: 0; z-index: 2; background: var(--cc-control); font-size: 0.6875rem; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-table :is(th, td):first-child { position: sticky; left: 0; width: 260px; min-width: 260px; max-width: 260px; white-space: normal; background: var(--cc-surface); box-shadow: 1px 0 var(--cc-border); z-index: 1; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-table th:first-child { z-index: 3; background: var(--cc-control); }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-table tbody tr:nth-child(even) td:first-child { background: var(--cc-surface-raised); }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-total-row td { background: var(--cc-light-accent-soft, #302413); font-weight: 700; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-total-row td:first-child { background: var(--cc-light-accent-soft, #302413); }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-sort-btn { font-size: inherit; line-height: 1.5; padding: 4px 0; min-height: 32px; }
@media (max-width: 700px) {
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) { padding: 16px; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-toolbar-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-section { grid-template-columns: 1fr; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-controls { padding-top: 0; }
#seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-analytics-game-table :is(th, td):first-child { width: 180px; min-width: 180px; max-width: 180px; }
}
@media (max-width: 700px) {
    #seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-view-tab { flex-basis: 90px; }
    #seasonAnalyticsScreen:has(.season-view-tab[data-analytics-view="gameByGame"].active) .season-view-tab-icon { display: none; }
}

/* Hot-zone labels sit above court lines on opaque charcoal badges. */
.cc-zone-label-bg { fill: #181a1d; stroke: #45484d; stroke-width: 0.5; }
.cc-zone-label-name { fill: #ffffff; font-size: 8px; font-weight: 500; }
.cc-zone-label-value { fill: #ffffff; font-size: 9px; font-weight: 700; }
.cc-zone-label-card { cursor: pointer; }
.cc-zone-label-card:focus .cc-zone-label-bg { stroke: #ff9f0a; stroke-width: 1.5; }
.season-hot-zones-selected { color: var(--cc-text); font-size: 0.875rem; margin: 12px 0 0; min-height: 2.5em; }
@media (max-width: 600px) {
    .cc-zone-label-name { display: none; }
    .cc-zone-label-bg { height: 31px; }
    .cc-zone-label-value { display: none; }
    .cc-zone-label-mobile-value { display: block; }
}

.cc-zone-label-mobile-value { fill: #ffffff; font-size: 8px; font-weight: 700; }
@media (min-width: 601px) { .cc-zone-label-mobile-value { display: none; } }

/* Stat groups reduce sideways scrolling without hiding access to the full table. */
#seasonAnalyticsScreen .season-game-stat-groups {
    grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px;
    padding: 0 16px 12px;
}
#seasonAnalyticsScreen .season-game-stat-group {
    min-height: 40px; padding: 8px 14px; border: 1px solid var(--cc-border-strong);
    border-radius: 8px; background: var(--cc-control); color: var(--cc-text);
    font-family: 'Inter', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
#seasonAnalyticsScreen .season-game-stat-group:hover { background: var(--cc-control-hover); }
#seasonAnalyticsScreen .season-game-stat-group[aria-pressed="true"] {
    background: #ff9f0a; border-color: #ff9f0a; color: #121518;
}
#seasonAnalyticsScreen .season-game-stat-group:focus-visible { outline: 2px solid #ff9f0a; outline-offset: 3px; }

/* Lineups player chips: neutral / on floor / off floor. */
#seasonAnalyticsScreen .season-lineup-filter { display: grid; gap: 8px; padding: 0 16px 12px; }
#seasonAnalyticsScreen .season-lineup-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#seasonAnalyticsScreen .season-lineup-filter-chip {
    min-height: 36px; padding: 6px 12px; border: 1px solid var(--cc-border-strong);
    border-radius: 999px; background: var(--cc-control); color: var(--cc-text);
    font-family: 'Inter', sans-serif; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
#seasonAnalyticsScreen .season-lineup-filter-chip:hover { background: var(--cc-control-hover); }
#seasonAnalyticsScreen .season-lineup-filter-chip.is-on {
    border-color: var(--cc-light-success, #63e99a); color: var(--cc-light-success, #63e99a);
    background: rgba(52, 211, 153, 0.12);
}
#seasonAnalyticsScreen .season-lineup-filter-chip.is-off {
    border-color: var(--cc-light-danger, #f06464); color: var(--cc-light-danger, #f06464);
    background: rgba(251, 113, 133, 0.12); text-decoration: line-through;
}
#seasonAnalyticsScreen .season-lineup-filter-chip:focus-visible { outline: 2px solid #ff9f0a; outline-offset: 3px; }
#seasonAnalyticsScreen .season-lineup-filter-clear {
    border: 0; padding: 0; background: none; color: var(--cc-light-accent, #f5ad51);
    font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline;
}
#seasonAnalyticsScreen .season-lineup-filter-empty { padding: 12px 16px; }
#seasonAnalyticsScreen .season-lineups-description { padding: 0 16px 10px; max-width: 72ch; }

/* Lineups table: one players cell, numeric columns, partial-data badge only when needed. */
#seasonAnalyticsScreen .season-lineups-table td.season-lineup-players {
    text-align: left; white-space: normal; min-width: 14rem; line-height: 1.5;
}
#seasonAnalyticsScreen .season-lineup-player { display: inline-block; margin-right: 10px; white-space: nowrap; }
#seasonAnalyticsScreen .season-lineup-player strong { color: var(--cc-light-accent, #f5ad51); font-weight: 700; }
#seasonAnalyticsScreen .season-lineup-quality-badge {
    display: inline-block; margin-left: 2px; padding: 1px 8px; border-radius: 999px;
    border: 1px solid var(--cc-border-strong); color: var(--cc-text-muted, #9c9c9c);
    font-size: 0.72rem; font-weight: 600; white-space: nowrap;
}
#seasonAnalyticsScreen .season-lineups-table td.season-lineup-per-game { font-weight: 700; }
/* Combinations under the minimum minutes: listed last and dimmed, never hidden. */
#seasonAnalyticsScreen .season-combinations-table tr.season-combination-small td { color: var(--cc-text-muted, #9c9c9c); font-weight: 400; }
#seasonAnalyticsScreen .season-combinations-table tr.season-combination-small .season-lineup-player strong { color: inherit; }
@media (max-width: 700px) {
    #seasonAnalyticsScreen .season-lineup-filter-chip { min-height: 44px; }
}
@media (max-width: 700px) {
    #seasonAnalyticsScreen .season-game-stat-group { flex: 1 1 100px; }
}

body :is([data-auth-action="signOut"], #pastGamesScreen [data-action="clearAllPastGames"], #pastGamesModal [data-action="clearAllPastGames"]):disabled {
    opacity: 0.55; cursor: not-allowed;
}

.cc-zone-label-counts, .cc-zone-label-mobile-counts { fill: #ffffff; font-size: 8px; font-weight: 500; }
@media (min-width: 601px) { .cc-zone-label-mobile-counts { display: none; } }
@media (max-width: 600px) {
    .cc-zone-label-counts { display: none; }
}

/* Match archive clearing to the saved-game Delete control. */
body :is(#pastGamesScreen, #pastGamesModal) [data-action="clearAllPastGames"] {
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(90, 25, 32, 0.92) 0%, rgba(35, 10, 14, 0.98) 100%)) !important;
    border: 1px solid var(--cc-light-danger-border, rgba(255, 112, 112, 0.35)) !important;
    color: var(--cc-light-text, rgba(255, 228, 232, 0.96)) !important;
    box-shadow: none !important;
}
body :is(#pastGamesScreen, #pastGamesModal) [data-action="clearAllPastGames"]:hover:not(:disabled) {
    background: var(--cc-light-danger-soft, linear-gradient(180deg, rgba(112, 31, 40, 0.95) 0%, rgba(44, 12, 17, 0.99) 100%)) !important;
    border-color: var(--cc-light-danger-border, rgba(255, 132, 132, 0.5)) !important;
    color: var(--cc-light-text, #ffffff) !important;
}
body[data-theme="light"] :is(#pastGamesScreen, #pastGamesModal) [data-action="clearAllPastGames"]:not(:disabled) {
    background: #c92f45 !important; border-color: #b43948 !important; color: #ffffff !important;
}
body[data-theme="light"] :is(#pastGamesScreen, #pastGamesModal) [data-action="clearAllPastGames"]:hover:not(:disabled) {
    background: #a91f34 !important; border-color: #ffffff !important;
}
/* Saved-games count matches the existing Roster count pill. */
body:not(.live-game-active) #pastGamesScreen.past-games-screen .tm-pool {
    display: inline-flex; align-items: center; width: auto;
    gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 999px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.10));
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.22));
}
body:not(.live-game-active) #pastGamesScreen.past-games-screen .tm-pool-label {
    font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
    color: var(--cc-light-muted, rgba(255, 255, 255, 0.42));
}

/* Shared zone colors keep the court and its legend consistent in both themes. */

/* Alternating combinations and On / Off rows make stats easier to follow. */
#seasonAnalyticsScreen:has(.season-view-tab:is([data-analytics-view="combinations"], [data-analytics-view="onOff"]).active) .stats-table tbody tr:nth-child(odd) > td {
    background: var(--cc-surface);
}
#seasonAnalyticsScreen:has(.season-view-tab:is([data-analytics-view="combinations"], [data-analytics-view="onOff"]).active) .stats-table tbody tr:nth-child(even) > td {
    background: var(--cc-surface-raised);
}
#seasonAnalyticsScreen:has(.season-view-tab:is([data-analytics-view="combinations"], [data-analytics-view="onOff"]).active) .stats-table tbody tr:is(:hover, :focus-within) > td {
    background: var(--cc-control-hover);
}

/* Coach thresholds share the Settings controls in both entry points. */
.hot-zone-settings { margin: 16px 0; color: var(--cc-text) !important; }
.hot-zone-settings summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; padding: 8px 0; }
.hot-zone-settings form { margin-top: 12px; }
.hot-zone-settings form > p { color: var(--cc-text-subtle); font-size: 0.875rem; line-height: 1.6; }
.hot-zone-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.hot-zone-settings fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--cc-border); border-radius: 10px; display: flex; gap: 12px; }
.hot-zone-settings legend { padding: 0 4px; font-size: 0.875rem; font-weight: 600; }
.hot-zone-settings label { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 6px; font-size: 0.8125rem; color: var(--cc-text-subtle); white-space: normal; }
.hot-zone-settings input { width: 100%; max-width: 180px; min-height: 44px; padding: 10px 12px; font: inherit; color: var(--cc-text) !important; background: var(--cc-control) !important; border: 1px solid var(--cc-border-strong); border-radius: 8px; min-width: 0; box-sizing: border-box; }
.hot-zone-settings-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.hot-zone-settings-actions .btn { min-height: 44px; padding: 10px 16px; background: var(--cc-accent) !important; color: var(--cc-on-accent) !important; border: 1px solid var(--cc-accent) !important; border-radius: 8px; box-shadow: none; font: 600 0.875rem/1.4 'Inter', sans-serif; letter-spacing: 0; text-transform: none; min-width: 0; max-width: 100%; white-space: normal; }
.hot-zone-settings-actions .btn::before { content: none; }
.hot-zone-settings-actions .btn-secondary { background: var(--cc-control) !important; border-color: var(--cc-border-strong) !important; color: var(--cc-text) !important; }
.hot-zone-settings :is(input, button, summary):focus-visible { outline: 2px solid var(--cc-focus); outline-offset: 3px; }
@media (max-width: 1000px) { .hot-zone-settings-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .hot-zone-settings fieldset { flex-wrap: wrap; } .hot-zone-settings fieldset label { flex-basis: 100%; } }
.hot-zone-settings-actions .btn:hover { background: var(--cc-accent-hover) !important; border-color: var(--cc-accent-hover) !important; transform: none; box-shadow: none; }
.hot-zone-settings-actions .btn-secondary:hover { background: var(--cc-control-hover) !important; border-color: var(--cc-border-strong) !important; }

.away-score-actions .away-foul-btn { grid-column: 1 / -1; }
.away-score-btn:focus-visible { outline: 2px solid var(--primary-color, #ff9f43); outline-offset: 2px; }

.away-score-actions [data-action="awayTeamPoints2"],
.away-score-actions [data-action="awayTeamPoints3"],
.away-score-actions [data-action="awayTeamPoints1"] { grid-column: 1; }
.away-score-actions [data-action="awayTeamScoreCorrection"] { grid-column: 2; grid-row: 3; }

/* Opponent FOUL reads as a danger action in both themes. */
#gameScreen .away-score-actions .away-foul-btn,
body[data-theme="light"] #gameScreen .away-score-actions .away-foul-btn {
    background: #c81e2e;
    border-color: #c81e2e;
    color: #ffffff;
    font-weight: 700;
}
#gameScreen .away-score-actions .away-foul-btn:hover:not(:disabled),
body[data-theme="light"] #gameScreen .away-score-actions .away-foul-btn:hover:not(:disabled) {
    background: #a3162b;
    border-color: #a3162b;
    color: #ffffff;
}

/* Season objectives (Pro) */
.dash-nav-badge {
    margin-left: auto;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--dash-primary, var(--primary));
    color: var(--cc-on-accent, #121518);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.25rem;
    text-align: center;
}

.dash-nav-badge.hidden {
    display: none;
}

#objectivesScreen .objectives-actions {
    display: flex;
    justify-content: flex-end;
}

.objectives-content {
    display: grid;
    gap: 1.25rem;
    margin-top: 1rem;
}

.objectives-content.hidden {
    display: none;
}

.objectives-section {
    display: grid;
    gap: 0.7rem;
}

.objectives-section-title,
.objectives-player-name {
    margin: 0;
    color: var(--dash-text, var(--text));
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.objectives-player-name {
    color: var(--dash-text-dim, var(--text-dim));
    font-size: 0.78rem;
}

.objectives-season-ended,
.objectives-hint,
.objectives-empty-line {
    margin: 0;
    color: var(--dash-text-dim, var(--text-dim));
    font-size: 0.85rem;
    line-height: 1.45;
}

.objectives-empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: start;
    gap: 0.6rem;
}

.objectives-season-ended {
    padding: 0.75rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--dash-border);
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.03));
}

.objectives-season-ended.hidden,
.objectives-hint.hidden {
    display: none;
}

.objectives-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.7rem;
}

.objectives-personal-list {
    display: grid;
    gap: 1rem;
}

.objectives-player-group {
    display: grid;
    gap: 0.55rem;
}

.objective-card {
    --objective-tone: var(--dash-text-dim, #8e949d);
    display: grid;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.95rem 1rem;
    border: 1px solid var(--dash-border);
    border-left: 3px solid var(--objective-tone);
    border-radius: 16px;
    background: var(--dash-surface);
    box-shadow: var(--cc-light-shadow, 0 14px 34px rgba(0, 0, 0, 0.34));
}

.tone-good { --objective-tone: var(--success, #00D084); }
.tone-warn { --objective-tone: var(--warning, #FFB020); }
.tone-bad { --objective-tone: var(--danger, #FF4757); }

.objective-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
}

.objective-card-title {
    margin: 0;
    min-width: 0;
    color: var(--dash-text, var(--text));
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.objective-chip {
    flex: 0 0 auto;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--objective-tone) 55%, transparent);
    background: color-mix(in srgb, var(--objective-tone) 14%, transparent);
    color: var(--objective-tone);
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
}

.objective-card-meta,
.objective-card-sample {
    margin: 0;
    color: var(--dash-text-dim, var(--text-dim));
    font-size: 0.78rem;
}

.objective-card-value {
    margin: 0;
    color: var(--dash-text, var(--text));
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.objective-bar {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.07));
    overflow: hidden;
}

.objective-bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--objective-tone);
    transition: width 0.3s ease;
}

.objective-card-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin-top: 0.15rem;
}

.objective-card-actions .btn {
    width: auto;
    min-height: 36px;
    margin: 0;
    padding: 0.4rem 0.8rem;
}

.objective-card-actions .objective-link {
    min-height: 36px;
    padding: 0.4rem 0;
}

.objective-editor-content {
    max-width: 620px;
}

.objective-editor-content .form-group.hidden {
    display: none;
}

.objective-title-field {
    grid-column: 1 / -1;
}

.objective-editor-error {
    margin: 0.5rem 0 0;
    color: var(--danger, #FF4757);
    font-size: 0.85rem;
}

.objective-editor-error.hidden {
    display: none;
}

.objectives-update-content {
    max-width: 560px;
}

.objectives-update-summary {
    margin: 0 0 0.85rem;
    color: var(--dash-text-dim, var(--text-dim));
    font-size: 0.9rem;
}

.objectives-update-groups {
    display: grid;
    gap: 0.9rem;
    max-height: min(60vh, 520px);
    overflow-y: auto;
}

.objectives-update-heading {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.objectives-update-list {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.objectives-update-item {
    --objective-tone: var(--dash-text-dim, #8e949d);
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--objective-tone);
    border-radius: 10px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.04));
    font-size: 0.88rem;
}

.objectives-update-item.hidden {
    display: none;
}

.objectives-update-name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.objectives-update-detail {
    flex: 0 0 auto;
    color: var(--dash-text-dim, var(--text-dim));
    font-variant-numeric: tabular-nums;
}

.objectives-update-more {
    margin-top: 0.35rem;
}

@media (max-width: 767px) {
    .objectives-card-grid {
        grid-template-columns: 1fr;
    }

    .objectives-update-item {
        flex-direction: column;
        gap: 0.15rem;
    }
}


/* Phones need natural content height: fixed fractional rows can collapse the
   lineup when the summary panels consume the available viewport. */
@media (max-width: 767px) {
    #gameScreen .live-shell-main {
        display: block;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    #gameScreen .live-content,
    #gameScreen .live-main-column,
    #gameScreen .live-side-column {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        overflow: visible;
    }

    #gameScreen #homeOnCourt.live-player-list {
        grid-template-rows: none;
        grid-auto-rows: auto;
        overflow: visible;
    }

    #gameScreen #homeOnCourt.live-player-list .player-card {
        grid-template-columns: minmax(0, 1fr);
        padding: 0.6rem;
    }

    #gameScreen .live-lineup-header,
    #gameScreen .live-lineup-actions {
        flex-wrap: wrap;
    }

    #gameScreen .scoreboard-bar {
        padding-bottom: 4rem;
    }

    #gameScreen .score-display {
        grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
        gap: 0.35rem;
    }

    #gameScreen .team-score.home,
    #gameScreen .team-score.away {
        position: static;
        display: flex;
        flex-direction: column;
        min-width: 0;
        gap: 0.35rem;
        text-align: center;
    }

    #gameScreen .score-team-accent {
        display: none;
    }

    #gameScreen .period-clock {
        width: 76px;
        padding-inline: 0.3rem;
    }

    #gameScreen .team-score.away .away-score-actions {
        position: absolute;
        left: 0.5rem;
        right: 0.5rem;
        bottom: 0.5rem;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0.25rem;
    }

    #gameScreen .away-score-actions .away-score-btn {
        grid-column: auto;
        grid-row: auto;
        min-width: 0;
        min-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-sync-button:is(.is-syncing, .is-waiting) svg,
    .settings-sync-status.is-syncing .settings-sync-dot { animation: none; }
}

/* Account deletion has its own scoped surface. Existing pages keep their styles. */
#manageAccountModal .settings-delete-zone {
    margin-top: 1.4rem; padding: 1rem; border: 1px solid var(--cc-danger); border-radius: 10px;
}
#manageAccountModal .settings-delete-zone h3 { margin: 0 0 .35rem; font-size: .94rem; color: var(--cc-danger); }
#manageAccountModal .settings-delete-zone p { margin: 0 0 .85rem; color: var(--cc-text-subtle); font-size: .83rem; line-height: 1.5; }
#manageAccountModal .settings-delete-zone .btn-danger,
#deleteAccountModal .settings-delete-actions .btn-danger {
    background: #b91c1c; border: 1px solid #b91c1c; color: #fff;
}
#manageAccountModal .settings-delete-zone .btn-danger:hover,
#deleteAccountModal .settings-delete-actions .btn-danger:hover:not(:disabled) {
    background: #991b1b; border-color: #991b1b; color: #fff;
}
#deleteAccountModal .settings-delete-warning {
    margin: .85rem 0 1.1rem; padding: .8rem 1rem; border-radius: 8px;
    border: 1px solid var(--cc-danger); color: var(--cc-text); background: var(--cc-control);
    font-size: .78rem; line-height: 1.5;
}
#deleteAccountModal .settings-delete-actions { display: flex; flex-wrap: wrap; gap: .6rem; }
#deleteAccountModal .settings-delete-actions .btn { min-height: 42px; }
#deleteAccountModal .settings-delete-actions .btn:disabled { opacity: .55; cursor: wait; }
@media (max-width: 580px) {
    #deleteAccountModal .modal-content { max-width: calc(100vw - 24px); padding: 1rem; }
    #deleteAccountModal .settings-delete-actions .btn { flex: 1 1 100%; }
}


/* Saved post-game reports: read-only cards that stack on phones and tablets. */
.game-report-modal { width: min(960px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 32px); overflow-y: auto; }
.game-report-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.game-report-note { font-size: .88rem; opacity: .85; line-height: 1.45; }
.game-report-controls { margin: 18px 0; }
.game-report-ai-choice { display: inline-flex; gap: 8px; align-items: center; }
@media print {
    body:has(#gameReportModal.active):not(.cc-printing-report) > *:not(#gameReportModal) { display: none !important; }
    #gameReportModal.active { position: static; display: block; background: white; color: black; }
    #gameReportModal .modal-content { position: static; width: 100%; max-height: none; overflow: visible; color: black; background: white; }
    #gameReportModal .modal-close, #gameReportModal .modal-actions, #gameReportGenerateControls { display: none !important; }
}

/* Raised setup cards and roster rows stay distinct from the app background. */
body:not(.live-game-active):not([data-theme="light"]) #startGameScreen :is(.form-section.compact, .sg-shot-chart-card, .league-rules-note),
body:not(.live-game-active):not([data-theme="light"]) #teamManagerScreen :is(.player-table-wrap, .player-card-item) {
    background: var(--cc-surface-raised);
    border-color: var(--cc-border);
    box-shadow: none;
}
body:not(.live-game-active):not([data-theme="light"]) #teamManagerScreen .player-manager-table tbody tr:focus-within {
    background: var(--cc-control-hover);
}

/* Analytics and league management share the flat charcoal page palette. */
body:not(.live-game-active):not([data-theme="light"]) :is(#seasonAnalyticsScreen, #objectivesScreen, #leagueHubScreen, #leagueEditScreen) {
    --page-surface: var(--cc-surface);
    --page-input: var(--cc-input);
    --dash-surface: var(--cc-surface);
}
body:not(.live-game-active):not([data-theme="light"]) :is(#leagueHubScreen, #leagueEditScreen) :is(.lh-league-card, .manager-item, .form-section.compact),
body:not(.live-game-active):not([data-theme="light"]) #seasonAnalyticsScreen :is(.season-analytics-view-controls, .season-analytics-game-section, .season-hot-zones-court-card, .season-secondary-item, .season-margin-game-card) {
    background: var(--cc-surface-raised);
    border-color: var(--cc-border);
    box-shadow: none;
}
body:not(.live-game-active):not([data-theme="light"]) #seasonAnalyticsScreen :is(.stats-table, .season-analytics-shooting-table, .season-analytics-game-table) tbody tr:nth-child(odd):not(.season-analytics-game-total-row):not(.selected) {
    background: var(--cc-surface);
}
body:not(.live-game-active):not([data-theme="light"]) #seasonAnalyticsScreen :is(.stats-table, .season-analytics-shooting-table, .season-analytics-game-table) tbody tr:nth-child(even):not(.season-analytics-game-total-row):not(.selected) {
    background: var(--cc-surface-raised);
}
body:not(.live-game-active):not([data-theme="light"]) #seasonAnalyticsScreen :is(.stats-table, .season-analytics-shooting-table, .season-analytics-game-table) tbody tr:not(.season-analytics-game-total-row):not(.selected):is(:hover, :focus-within) {
    background: var(--cc-control-hover);
}

/* Saved games use the same charcoal hierarchy as the other manager pages. */
body:not(.live-game-active):not([data-theme="light"]) #pastGamesScreen {
    --page-surface: var(--cc-surface);
    --page-input: var(--cc-input);
}
body:not(.live-game-active):not([data-theme="light"]) #setupScreen #pastGamesScreen :is(.pg-card, .history-item),
body:not(.live-game-active):not([data-theme="light"]) #pastGamesModal :is(.pg-card, .history-item) {
    background: var(--cc-surface-raised);
    border-color: var(--cc-border);
    box-shadow: none;
}

/* Light appearance: readable labels, dimmed modal backdrops, and one zebra
   pattern for data tables. Amber stays on fills and markers; labels that used
   it as text take the dark ink, as the light palette above intends. */

body[data-theme="light"]:not(.live-game-active) :is(#dashboardScreen, #pastGamesScreen, #startGameScreen, #teamManagerScreen, #playerManagementScreen, #leagueHubScreen, #leagueEditScreen, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #settingsScreen, .dash-app-shell) :is(.dash-current-label, .dash-nav-item.active, .dash-chip strong, .dash-performer-metrics span) {
    color: var(--cc-text);
}

body[data-theme="light"]:not(.live-game-active) #pastGameShotChartModal .past-shot-stat-percentage {
    color: var(--cc-text);
}

/* Dim the page behind dialogs instead of covering it with a white sheet. */
body[data-theme="light"]:not(.live-game-active) :is(#confirmModal, #pastGamesModal, #pastGameInfoModal, #pastGameDetailModal, #pastGameShotChartModal, #legalModal, #settingsModal, #backupModal, #storageRiskConfirmModal, #createLeagueModal, #changelogModal, #playerEditorModal, #objectiveEditorModal, #objectivesUpdateModal, #replaceRosterModal, #gameRecapModal, #gameReportModal, #playerReportModal, #playByPlayModal, #teamManagerModal, #manageAccountModal, #changeDisplayNameModal, #changePasswordModal) {
    background: var(--cc-scrim);
    backdrop-filter: blur(3px);
}

body[data-theme="light"]:not(.live-game-active) :is(#pastGameDetailModal, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #teamManagerScreen, #playerManagementScreen) .stats-table tbody tr:nth-child(odd) {
    background: var(--cc-surface);
}

body[data-theme="light"]:not(.live-game-active) :is(#pastGameDetailModal, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #teamManagerScreen, #playerManagementScreen) .stats-table tbody tr:nth-child(even) {
    background: var(--cc-surface-raised);
}

body[data-theme="light"]:not(.live-game-active) :is(#pastGameDetailModal, #seasonStatsScreen, #seasonAnalyticsScreen, #objectivesScreen, #seasonPlayerDetailsScreen, #teamManagerScreen, #playerManagementScreen) .stats-table tbody tr:is(:hover, :focus-within, .selected) {
    background: var(--cc-light-accent-soft);
}

/* Inactive analytics views read as choices, not disabled buttons. */
body[data-theme="light"]:not(.live-game-active) #seasonAnalyticsScreen .season-view-tab:not(.active):not([aria-selected="true"]) {
    background: var(--cc-surface);
    border-color: var(--cc-border);
}

body[data-theme="light"]:not(.live-game-active) #seasonAnalyticsScreen .season-view-tab:not(.active):not([aria-selected="true"]):hover {
    background: var(--cc-light-accent-soft);
    border-color: var(--cc-light-accent-border);
}

/* Keep the private-browsing warning recognizable as a warning. */
body[data-theme="light"] .storage-warning-banner {
    background: var(--cc-danger);
    color: #ffffff;
    border-bottom-color: var(--cc-danger);
}

/* Live game, light theme: a grey stage with white bordered surfaces so
   player cards, panels and neutral controls stay distinct and readable. */
body[data-theme="light"] #gameScreen {
    --live-light-stage: #e6e9ee;
    --live-light-surface: #ffffff;
    --live-light-line: #c6cdd6;
    --live-light-line-strong: #8e99a7;
    --live-light-ink: #141a22;
    --live-light-ink-muted: #475262;
    --live-light-neutral: #3c4757;
    --live-light-neutral-hover: #2d3643;
    background: var(--live-light-stage);
    color: var(--live-light-ink);
}
body[data-theme="light"] #gameScreen :is(.live-shell-main, .live-shell) {
    background: var(--live-light-stage);
}

/* Scoreboard and side panels */
body[data-theme="light"] #gameScreen .top-bar.scoreboard-bar,
body[data-theme="light"] #gameScreen .live-side-panel,
body[data-theme="light"] #gameScreen .live-bottom-bar {
    background: var(--live-light-surface);
    border-color: var(--live-light-line);
}
body[data-theme="light"] #gameScreen :is(.live-summary-card, .live-action-log-list > *) {
    background: #f3f5f8;
    border-color: var(--live-light-line);
}
body[data-theme="light"] #gameScreen :is(.score-team-role, .score-timeouts-remaining, .live-side-panel-subtitle, .live-summary-label, .live-shooting-label, .live-shooting-value) {
    color: var(--live-light-ink-muted);
}
body[data-theme="light"] #gameScreen .live-shooting-track {
    background: var(--live-light-line);
}

/* Player cards */
body[data-theme="light"] #gameScreen #homeOnCourt .player-card {
    background: var(--live-light-surface);
    border: 1px solid var(--live-light-line);
    box-shadow: 0 1px 2px rgba(20, 26, 34, 0.08);
}
body[data-theme="light"] #gameScreen #homeOnCourt .player-name { color: var(--live-light-ink); }
body[data-theme="light"] #gameScreen #homeOnCourt :is(.player-meta, .player-summary) { color: var(--live-light-ink-muted); }
body[data-theme="light"] #gameScreen #homeOnCourt.live-player-list .player-number {
    background: #eef1f5;
    border-color: var(--live-light-line-strong);
    color: var(--live-light-ink);
}

/* TO / OR / DR: solid slate so they read as buttons beside the coloured ones. */
body[data-theme="light"] #gameScreen #homeOnCourt .action-btn:not(.primary):not(.miss-shot):not(.danger) {
    background: var(--live-light-neutral);
    border-color: var(--live-light-neutral);
    color: #ffffff;
}
body[data-theme="light"] #gameScreen #homeOnCourt .action-btn:not(.primary):not(.miss-shot):not(.danger):hover:not(:disabled) {
    background: var(--live-light-neutral-hover);
    border-color: var(--live-light-neutral-hover);
    color: #ffffff;
}

/* Secondary controls: white with a firm outline and dark label. */
body[data-theme="light"] #gameScreen :is(.lineup-mini-btn:not(.lineup-mini-btn-accent):not([data-action="toggleClock"]), .away-score-btn, .live-bottom-btn:not(.live-bottom-btn-accent):not(.live-bottom-btn-danger), .live-side-toggle) {
    background: var(--live-light-surface);
    border: 1px solid var(--live-light-line-strong);
    color: var(--live-light-ink);
    font-weight: 700;
}
body[data-theme="light"] #gameScreen :is(.lineup-mini-btn:not(.lineup-mini-btn-accent):not([data-action="toggleClock"]), .away-score-btn, .live-bottom-btn:not(.live-bottom-btn-accent):not(.live-bottom-btn-danger), .live-side-toggle):hover:not(:disabled) {
    background: #eef1f5;
    border-color: var(--live-light-ink-muted);
    color: var(--live-light-ink);
}
body[data-theme="light"] #gameScreen .lineup-mini-btn-accent {
    background: #fff4e5;
    border: 1px solid #c97a12;
    color: #8a4b00;
}
body[data-theme="light"] #gameScreen .lineup-mini-btn-accent:disabled {
    background: #f1f3f6;
    border-color: var(--live-light-line);
    color: #6b7584;
}
body[data-theme="light"] #gameScreen .live-bottom-btn-danger {
    border: 1px solid #d9707f;
    font-weight: 700;
    background: #c81e2e;
    border-color: #c81e2e;
    color: #ffffff;
}

/* Side menu */
body[data-theme="light"] #gameScreen .live-side-menu {
    background: var(--live-light-surface);
    border-right: 1px solid var(--live-light-line);
}
body[data-theme="light"] #gameScreen .live-nav-item:not(.active):not(.danger) { color: #2a3340; font-weight: 600; }
body[data-theme="light"] #gameScreen .live-nav-item:not(.active):not(.danger):hover:not(:disabled) {
    background: #eef1f5;
    color: var(--live-light-ink);
}
body[data-theme="light"] #gameScreen :is(#liveNavTimeoutBtn, #liveNavQuitBtn)::before { background: var(--live-light-line); }
body[data-theme="light"] #gameScreen #liveNavQuitBtn { color: #b4232f; font-weight: 600; }

/* Live game, light theme: End game is a solid red action. */
body[data-theme="light"] #gameScreen .live-bottom-btn-danger:hover:not(:disabled) {
    background: #a3162b;
    border-color: #a3162b;
    color: #ffffff;
}

/* Substitution and lineup player cards, light theme: dark slate cards with
   solid red (going out), green (coming in) or orange (lineup) selections. */
body.live-game-active[data-theme="light"] :is(#substitutionModal .sub-player-btn, #lineupModal .lineup-player-btn) {
    border-color: #3c4757 !important;
    background: #3c4757 !important;
    color: #ffffff !important;
}
body.live-game-active[data-theme="light"] :is(#substitutionModal .sub-player-btn, #lineupModal .lineup-player-btn):hover:not(:disabled) {
    border-color: #2d3643 !important;
    background: #2d3643 !important;
}
body.live-game-active[data-theme="light"] :is(#substitutionModal .sub-player-btn, #lineupModal .lineup-player-btn) :is(.sub-player-name, .sub-player-status, .lineup-player-name) {
    color: #ffffff !important;
}
body.live-game-active[data-theme="light"] :is(#substitutionModal .sub-player-number, #lineupModal .lineup-player-number) {
    border-color: rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}
body.live-game-active[data-theme="light"] #substitutionModal .sub-player-btn.selected-out,
body.live-game-active[data-theme="light"] #substitutionModal .sub-player-btn.selected-out:hover:not(:disabled) {
    border-color: #8f1520 !important;
    background: #b42330 !important;
    box-shadow: 0 0 0 2px rgba(180, 35, 48, 0.3) !important;
}
body.live-game-active[data-theme="light"] #substitutionModal .sub-player-btn.selected-in,
body.live-game-active[data-theme="light"] #substitutionModal .sub-player-btn.selected-in:hover:not(:disabled) {
    border-color: #14572d !important;
    background: #1d7a3e !important;
    box-shadow: 0 0 0 2px rgba(29, 122, 62, 0.3) !important;
}
body.live-game-active[data-theme="light"] #lineupModal .lineup-player-btn.selected,
body.live-game-active[data-theme="light"] #lineupModal .lineup-player-btn.selected:hover:not(:disabled) {
    border-color: #9a4f00 !important;
    background: #c26a00 !important;
    box-shadow: 0 0 0 2px rgba(194, 106, 0, 0.3) !important;
}
body.live-game-active[data-theme="light"] #lineupModal .lineup-player-btn.selected::after { color: #ffffff; }

/* Live shot chart and shot location, light theme: dim the game behind the
   dialog (the shot chart layer was white) and give its surfaces contrast. */
body.live-game-active[data-theme="light"] :is(#pastGameShotChartModal, #shotLocationModal).modal {
    background: rgba(20, 26, 34, 0.55);
    backdrop-filter: blur(6px);
}
body.live-game-active[data-theme="light"] :is(#pastGameShotChartModal, #shotLocationModal) .modal-content.setup-surface {
    border: 1px solid #c6cdd6 !important;
    background: #ffffff !important;
    box-shadow: 0 24px 56px rgba(20, 26, 34, 0.28) !important;
}
body.live-game-active[data-theme="light"] :is(#pastGameShotChartModal, #shotLocationModal) .modal-header { color: #8a4b00; }
body.live-game-active[data-theme="light"] :is(#pastGameShotChartModal, #shotLocationModal) :is(.past-shot-chart-court-wrap, .shot-location-court-wrap) {
    border: 1px solid #c6cdd6 !important;
    background: #e6e9ee !important;
}
body.live-game-active[data-theme="light"] #pastGameShotChartModal .past-shot-stat {
    border: 1px solid #c6cdd6 !important;
    background: #f1f3f7 !important;
}
body.live-game-active[data-theme="light"] #pastGameShotChartModal .past-shot-stat-label { color: #475262 !important; }
body.live-game-active[data-theme="light"] #pastGameShotChartModal .past-shot-stat strong { color: #141a22 !important; }
body.live-game-active[data-theme="light"] #pastGameShotChartModal .past-shot-stat-percentage { color: #8a4b00 !important; }
body.live-game-active[data-theme="light"] :is(#pastGameShotChartModal, #shotLocationModal) .past-shot-chart-controls label { color: #2a3340; }
body.live-game-active[data-theme="light"] :is(#pastGameShotChartModal, #shotLocationModal) :is(.shot-location-subtitle, .past-shot-chart-footer, .past-shot-chart-marker-info) { color: #475262 !important; }
body.live-game-active[data-theme="light"] #pastGameShotChartModal .past-shot-chart-controls select {
    border-color: #8e99a7 !important;
    background: #ffffff !important;
    color: #141a22 !important;
}
body.live-game-active[data-theme="light"] :is(#pastGameShotChartModal, #shotLocationModal) .btn {
    border: 1px solid #8e99a7 !important;
    background: #ffffff !important;
    color: #141a22 !important;
    font-weight: 700;
}
body.live-game-active[data-theme="light"] :is(#pastGameShotChartModal, #shotLocationModal) .btn:hover:not(:disabled) {
    border-color: #475262 !important;
    background: #eef1f5 !important;
}
body.live-game-active[data-theme="light"] :is(#pastGameShotChartModal, #shotLocationModal) .modal-close {
    border: 1px solid #c6cdd6;
    background: #ffffff;
    color: #2a3340;
}

/* iPad: the dashboard sidebar leaves the analytics panel far narrower than the screen (about 500px on a
   768px iPad in portrait), so these layouts follow the panel's own width. Browsers without container
   queries keep the screen-width rules above. */

@container analytics-panel (max-width: 759px) {
    .season-shooting-summary-grid,
    .season-shooting-summary-grid.count-6,
    .season-margin-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .season-shooting-insights-grid,
    .season-analytics-shooting-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .season-margin-game-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .season-margin-game-facts:not(.runs) .season-margin-fact:first-child {
        grid-column: 1 / -1;
    }

    /* Lead changes and ties stay in the game card above the table. */
    .season-margin-games-table th:nth-child(7),
    .season-margin-games-table td:nth-child(7),
    .season-margin-games-table th:nth-child(8),
    .season-margin-games-table td:nth-child(8) {
        display: none;
    }
}

@container analytics-panel (max-width: 419px) {
    .season-shooting-summary-grid,
    .season-shooting-summary-grid.count-6 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Game by Game summary: four factors (team) or game log (player), as a table where there is room and
   as cards in narrow spaces (phones, iPad portrait beside the sidebar). Tapping a game opens its box score. */
#seasonAnalyticsScreen .season-game-summary {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    min-width: 0;
    padding: 0 16px 16px;
}
#seasonAnalyticsScreen .season-game-legend,
#seasonAnalyticsScreen .season-game-empty { margin: 0; max-width: 80ch; }
#seasonAnalyticsScreen .season-game-trend { display: grid; gap: 8px; min-width: 0; }
#seasonAnalyticsScreen .season-game-trend-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
#seasonAnalyticsScreen .season-game-trend-chart { min-width: 0; }
#seasonAnalyticsScreen .season-game-trend-svg { display: block; width: 100%; height: auto; }
#seasonAnalyticsScreen .season-game-trend-grid { stroke: var(--cc-border); stroke-width: 1; }
#seasonAnalyticsScreen .season-game-trend-axis { fill: var(--cc-text-muted); font-size: 11px; font-weight: 600; }
#seasonAnalyticsScreen .season-game-trend-average { stroke: var(--cc-text-muted); stroke-width: 1.5; stroke-dasharray: 5 5; }
#seasonAnalyticsScreen .season-game-trend-line { fill: none; stroke: var(--cc-accent, #ff9f0a); stroke-width: 2.4; stroke-linejoin: round; }
#seasonAnalyticsScreen .season-game-trend-point { fill: var(--cc-accent, #ff9f0a); stroke: var(--cc-surface); stroke-width: 2; }
#seasonAnalyticsScreen .season-game-trend-point.good { fill: var(--cc-light-success, #63e99a); }
#seasonAnalyticsScreen .season-game-trend-point.bad { fill: var(--cc-light-danger, #f06464); }
#seasonAnalyticsScreen .season-game-trend-marker { stroke: var(--cc-text-muted); stroke-width: 1; stroke-dasharray: 3 4; }
#seasonAnalyticsScreen .season-game-trend-hit { fill: transparent; cursor: pointer; }
#seasonAnalyticsScreen .season-game-trend-hit:focus { outline: none; }
#seasonAnalyticsScreen .season-game-trend-hit:focus-visible { fill: rgba(255, 159, 10, 0.1); }
#seasonAnalyticsScreen .season-game-trend-detail { margin: 0; color: var(--cc-text); font-size: 0.8125rem; font-variant-numeric: tabular-nums; }

#seasonAnalyticsScreen .season-game-summary-table-wrap {
    min-width: 0;
    overflow-x: auto;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
}
#seasonAnalyticsScreen .season-game-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}
#seasonAnalyticsScreen .season-game-summary-table th,
#seasonAnalyticsScreen .season-game-summary-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--cc-border);
    color: var(--cc-text);
    text-align: left;
    vertical-align: middle;
}
#seasonAnalyticsScreen .season-game-summary-table th {
    background: var(--cc-control);
    color: var(--cc-text-muted);
    font-size: 0.6875rem;
    white-space: nowrap;
}
#seasonAnalyticsScreen .season-game-summary-table .numeric { text-align: right; white-space: nowrap; }
#seasonAnalyticsScreen .season-game-summary-season td { background: var(--cc-surface-raised); font-weight: 700; }
#seasonAnalyticsScreen .season-game-summary-row { cursor: pointer; }
#seasonAnalyticsScreen .season-game-summary-row:hover td { background: var(--cc-control-hover, rgba(255, 255, 255, 0.04)); }
#seasonAnalyticsScreen .season-game-open {
    min-height: 36px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cc-text);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}
#seasonAnalyticsScreen .season-game-open:focus-visible { outline: 2px solid #ff9f0a; outline-offset: 2px; }
#seasonAnalyticsScreen .season-game-result { display: inline-flex; align-items: center; gap: 6px; }
#seasonAnalyticsScreen .season-game-result-score { color: var(--cc-text-muted); font-size: 0.75rem; }
#seasonAnalyticsScreen .season-game-value { display: block; font-weight: 700; }
#seasonAnalyticsScreen .season-game-opponent-value { display: block; color: var(--cc-text-muted); font-size: 0.6875rem; font-weight: 500; }
#seasonAnalyticsScreen .season-game-good { background: rgba(99, 233, 154, 0.1); }
#seasonAnalyticsScreen .season-game-good .season-game-value { color: var(--cc-light-success, #2fa866); }
#seasonAnalyticsScreen .season-game-bad { background: rgba(240, 100, 100, 0.1); }
#seasonAnalyticsScreen .season-game-bad .season-game-value { color: var(--cc-light-danger, #d94b4b); }

#seasonAnalyticsScreen .season-game-cards { display: none; gap: 10px; }
#seasonAnalyticsScreen .season-game-card {
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    background: var(--cc-surface);
    color: var(--cc-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}
#seasonAnalyticsScreen .season-game-card:focus-visible { outline: 2px solid #ff9f0a; outline-offset: 2px; }
#seasonAnalyticsScreen .season-game-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#seasonAnalyticsScreen .season-game-card-title { font-size: 0.8125rem; font-weight: 600; overflow-wrap: anywhere; }
#seasonAnalyticsScreen .season-game-card-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
}
#seasonAnalyticsScreen .season-game-card-stat {
    display: grid;
    gap: 2px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--cc-surface-raised);
    font-variant-numeric: tabular-nums;
}
#seasonAnalyticsScreen .season-game-card-label { color: var(--cc-text-muted); font-size: 0.6875rem; font-weight: 600; }

/* All stats: every game row opens its box score too. */
#seasonAnalyticsScreen .season-analytics-game-row { cursor: pointer; }

@container analytics-panel (max-width: 639px) {
    #seasonAnalyticsScreen .season-game-summary-table-wrap { display: none; }
    #seasonAnalyticsScreen .season-game-cards { display: grid; }
}

/* Possession help: a closed disclosure under the four-factors legend. */
#seasonAnalyticsScreen .season-game-help {
    max-width: 80ch;
    color: var(--cc-text-muted);
    font-size: 0.8125rem;
}
#seasonAnalyticsScreen .season-game-help summary {
    min-height: 32px;
    display: list-item;
    color: var(--cc-accent, #ff9f0a);
    font-weight: 600;
    cursor: pointer;
}
#seasonAnalyticsScreen .season-game-help summary:focus-visible { outline: 2px solid #ff9f0a; outline-offset: 2px; }
#seasonAnalyticsScreen .season-game-help p { margin: 6px 0 0; line-height: 1.5; }

/* Season Stats: a percentage under the attempt minimum stays visible but recedes. */
.season-secondary-value.season-small-sample {
    color: var(--cc-text-muted, #9c9c9c);
    font-weight: 500;
}
td.season-small-sample,
.season-secondary-value.season-small-sample,
.season-player-summary-pct.season-small-sample {
    cursor: help;
}

/* Game report: one design for screen and paper. On screen it follows the app theme; printed pages are white
   with the brand's light colours. Brand colours come from the --cc-brand-* tokens (config/brand.js, brand/). */
.gr-doc {
    --gr-accent: var(--cc-brand-accent, #e2600f); --gr-heading: var(--cc-text); --gr-ink: var(--cc-brand-ink, #111a2e);
    --gr-on-ink: #ffffff; --gr-on-ink-muted: #b9c0cf; --gr-on-ink-line: rgba(255, 255, 255, 0.14); --gr-on-ink-faint: rgba(255, 255, 255, 0.06); --gr-ink-accent: #f47a2a; --gr-mark-ball: #ee6a1c;
    --gr-text: var(--cc-text); --gr-muted: var(--cc-text-muted); --gr-tile: var(--cc-surface-raised); --gr-paper: var(--cc-surface, #ffffff);
    --gr-border: var(--cc-border); --gr-win: var(--cc-success, #116a3c); --gr-loss: var(--cc-danger, #b43948); --gr-them: #9c9c9c;
    --gr-three: #438bff; --gr-ft: #b185ff; --gr-under: #ffb52e; --gr-close: #ff8f2d; --gr-mid: #9b6a23;
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; color: var(--gr-text);
}
.game-report-content:has(.gr-doc) { display: block; }
.gr-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* Brand: the app icon beside "Bench" regular and "Advantage" bold orange, as in the wordmark. */
.gr-brand { display: inline-flex; align-items: center; gap: 0.45em; font-family: 'Inter', sans-serif; line-height: 1; }
.gr-brand.small { font-size: 0.875rem; }
.gr-brand.large { font-size: 1.375rem; }
.gr-brand-mark { flex: none; width: 1.7em; height: 1.7em; }
.gr-mark-tile { fill: var(--gr-ink); }
.gr-mark-bar { fill: var(--gr-on-ink); }
.gr-mark-ball { fill: var(--gr-mark-ball); }
.gr-mark-seams { fill: none; stroke: var(--gr-ink); stroke-width: 1.9; stroke-linecap: round; }
.gr-brand-name { color: var(--gr-heading); font-weight: 400; letter-spacing: -0.02em; }
.gr-brand-accent { color: var(--gr-accent); font-weight: 700; }
.gr-brandbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding-bottom: 10px; border-bottom: 1px solid var(--gr-border); }
.gr-brandbar-game { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; color: var(--gr-muted); font-size: 0.75rem; font-weight: 600; }
.gr-brandbar .gr-result { padding: 2px 8px; border-radius: 4px; font-size: 0.6875rem; }
.gr-credit { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--gr-border); color: var(--gr-muted); font-size: 0.75rem; }
.gr-credit .gr-brand-mark { width: 18px; height: 18px; }
.gr-credit-text { margin: 0; }
.gr-page-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-top: 12px; border-top: 1px solid var(--gr-border); color: var(--gr-muted); font-size: 0.75rem; }

.gr-muted { margin: 0; color: var(--gr-muted); font-size: 0.8125rem; }
.gr-result { padding: 5px 12px; border-radius: 999px; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.gr-result.win { color: var(--gr-win); background: color-mix(in srgb, var(--gr-win) 14%, transparent); }
.gr-result.loss { color: var(--gr-loss); background: color-mix(in srgb, var(--gr-loss) 14%, transparent); }
.gr-result.tie { color: var(--gr-muted); background: var(--gr-paper); }

/* Section headings: small orange capitals, as on the cover. */
.gr-section-title { margin: 0 0 12px; color: var(--gr-accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.gr-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-bottom: 12px; }
.gr-section-head .gr-section-title { margin: 0; }
/* Points by period: bars on a baseline, then the period, its margin and the running score. */
.gr-quarters { display: flex; gap: 14px; padding-top: 18px; }
.gr-quarter { flex: 1 1 0; display: grid; justify-items: center; gap: 2px; min-width: 0; }
.gr-quarter-bars { display: flex; align-items: flex-end; justify-content: center; gap: 6px; justify-self: stretch; height: 150px; padding: 0 10%; border-bottom: 1px solid var(--gr-border); }
.gr-bar { position: relative; flex: 1; max-width: 44px; border-radius: 4px 4px 0 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-bar.us { background: var(--gr-accent); }
.gr-bar.them { background: var(--gr-them); }
.gr-bar-value { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: 0.75rem; font-weight: 700; }
.gr-quarter-label { padding-top: 8px; color: var(--gr-heading); font-size: 0.875rem; font-weight: 800; }
.gr-quarter-margin { font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.gr-quarter-margin.up { color: var(--gr-win); } .gr-quarter-margin.down { color: var(--gr-loss); } .gr-quarter-margin.even { color: var(--gr-muted); }
.gr-quarter-running { color: var(--gr-muted); font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.gr-chart-note { margin: 10px 0 0; color: var(--gr-muted); font-size: 0.75rem; }
.gr-legend { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--gr-muted); }
.gr-swatch { width: 10px; height: 10px; border-radius: 2px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-swatch.us { background: var(--gr-accent); } .gr-swatch.them { background: var(--gr-them); margin-left: 8px; }
.gr-runs { margin: 6px 0 0; font-size: 0.8125rem; }
.gr-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gr-tile { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--gr-border); border-radius: 12px; background: var(--gr-tile); }
.gr-tile-label { color: var(--gr-muted); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.gr-tile-value { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.gr-tile.tone-three .gr-tile-value { color: var(--gr-three); }
.gr-tile.tone-ft .gr-tile-value { color: var(--gr-ft); }
.gr-tile-detail, .gr-tile-compare { font-size: 0.75rem; }
.gr-tile-compare.better { color: var(--gr-win); } .gr-tile-compare.worse { color: var(--gr-loss); } .gr-tile-compare.same { color: var(--gr-muted); }
/* Page 2 tiles: a plain label, a large number and, for shooting, how much of the bar was made. */
.gr-stats-section .gr-tile { gap: 4px; padding: 14px 16px; }
.gr-stats-section .gr-tile-label { color: var(--gr-heading); font-size: 0.75rem; letter-spacing: 0; text-transform: none; }
.gr-stats-section .gr-tile-value { font-size: 1.75rem; line-height: 1.1; }
.gr-stats-section .gr-tile-detail { color: var(--gr-muted); }
.gr-tile-meter { display: block; width: 80%; height: 4px; margin: 4px 0 2px; overflow: hidden; border-radius: 2px; background: var(--gr-border); }
.gr-tile-meter-fill { display: block; height: 100%; border-radius: 2px; background: var(--gr-accent); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-takeaway { margin: 0 0 10px; font-weight: 600; }
/* What went well and what to work on: two tinted panels. */
.gr-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.gr-note-column { padding: 16px 18px; border-radius: 12px; background: color-mix(in srgb, var(--gr-win) 12%, transparent); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-note-column.work { background: color-mix(in srgb, var(--gr-accent) 12%, transparent); }
.gr-note-title { margin: 0 0 6px; font-size: 0.875rem; }
.gr-note-list { margin: 0; padding-left: 18px; font-size: 0.875rem; line-height: 1.5; }
.gr-note-column .gr-note-title { margin-bottom: 8px; color: var(--gr-win); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.gr-note-column.work .gr-note-title { color: var(--gr-accent); }
.gr-note-column .gr-note-list { padding: 0; list-style: none; line-height: 1.7; }
/* The coach's message: a quiet panel, one paragraph per block of text. */
.gr-message { margin: 0; padding: 16px 20px; border-radius: 12px; background: var(--gr-tile); line-height: 1.6; }
.gr-message p { margin: 0 0 10px; }
.gr-message p:last-child { margin-bottom: 0; }
.gr-message .gr-message-signature { margin-top: 4px; color: var(--gr-heading); font-weight: 700; }
.gr-coach-only { padding: 12px; border: 1px dashed var(--gr-border); border-radius: 10px; }
/* Box score: a navy header, quiet zebra rows, the team leader in orange, then totals and shooting on an orange tint. */
.gr-box-leader-note { margin: 0; color: var(--gr-muted); font-size: 0.75rem; }
.gr-box-leader-note strong { color: var(--gr-accent); font-weight: 700; }
.gr-table-wrap { overflow-x: auto; border-radius: 10px; }
.gr-box { width: 100%; border-collapse: collapse; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.gr-box th, .gr-box td { padding: 8px 10px; text-align: left; white-space: nowrap; }
.gr-box th { color: var(--gr-on-ink); background: var(--gr-ink); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-box td { border-bottom: 1px solid color-mix(in srgb, var(--gr-border) 60%, transparent); }
.gr-box tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--gr-ink) 4%, var(--gr-paper)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-box .num { text-align: right; }
.gr-box .jersey { color: var(--gr-heading); font-weight: 700; }
.gr-box td.pts { color: var(--gr-heading); font-weight: 800; }
.gr-box td.leader { color: var(--gr-accent); font-weight: 800; }
.gr-box .dnp { color: var(--gr-muted); font-style: italic; }
.gr-box tbody tr:is(.total, .shooting) td { border-bottom: 0; background: color-mix(in srgb, var(--gr-accent) 9%, var(--gr-paper)); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-box tr.total td { padding-top: 12px; border-top: 2px solid var(--gr-accent); color: var(--gr-heading); font-weight: 800; }
.gr-box tr.shooting td { padding-top: 2px; padding-bottom: 10px; color: var(--gr-accent); font-size: 0.6875rem; font-weight: 700; }
.gr-opponent { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; margin-top: 16px; padding: 14px 20px; border: 1px solid var(--gr-border); border-radius: 12px; }
.gr-opponent p { margin: 0; }
.gr-opponent-label { color: var(--gr-muted); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.gr-opponent-name { color: var(--gr-heading); font-size: 1rem; font-weight: 800; }
.gr-opponent-side { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.gr-opponent-detail { color: var(--gr-muted); font-size: 0.8125rem; }
.gr-opponent-points { display: flex; align-items: baseline; gap: 6px; }
.gr-opponent-points strong { color: var(--gr-heading); font-size: 1.75rem; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.gr-opponent-points span { color: var(--gr-muted); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; }
.gr-box-key { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; background: var(--gr-tile); color: var(--gr-muted); font-size: 0.6875rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-box-key-item { display: inline-flex; gap: 5px; }
.gr-box-key-item strong { color: var(--gr-heading); font-weight: 800; }
.gr-flow-tiles { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.gr-flow-value { font-size: 1.25rem; }
.gr-flow-value.better { color: var(--gr-win); } .gr-flow-value.worse { color: var(--gr-loss); } .gr-flow-value.same { color: var(--gr-muted); }
.gr-margin { margin-top: 12px; }
.gr-margin-chart { display: block; width: 100%; height: auto; }
.gr-margin-grid { stroke: var(--gr-border); stroke-width: 1; }
.gr-margin-zero { stroke: var(--gr-muted); stroke-width: 1.5; }
.gr-margin-text { fill: var(--gr-muted); font-size: 11px; font-weight: 600; }
.gr-margin-text.strong { fill: var(--gr-text); font-weight: 800; }
.gr-margin-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; }
.gr-margin-line.ahead { stroke: var(--gr-win); } .gr-margin-line.behind { stroke: var(--gr-loss); }
.gr-margin-area.ahead { fill: color-mix(in srgb, var(--gr-win) 18%, transparent); }
.gr-margin-area.behind { fill: color-mix(in srgb, var(--gr-loss) 18%, transparent); }
.gr-margin-marker { fill: var(--gr-win); } .gr-margin-marker.behind { fill: var(--gr-loss); }
.gr-shooting { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.gr-court { max-width: 360px; margin: 0 auto; }
.gr-court .cc-court-svg { display: block; width: 100%; height: auto; }
.gr-hot-legend { display: grid; gap: 6px; margin-top: 8px; }
.gr-hot-swatches { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 0; font-size: 0.75rem; }
.gr-hot-item { display: inline-flex; align-items: center; gap: 5px; }
.gr-hot-swatch { width: 10px; height: 10px; border-radius: 2px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-hot-swatch.hot { background: var(--court-zone-hot); } .gr-hot-swatch.neutral { background: var(--court-zone-neutral); }
.gr-hot-swatch.cold { background: var(--court-zone-cold); } .gr-hot-swatch.no-sample { background: var(--court-zone-no-sample); }
.gr-hot-thresholds, .gr-distribution-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.gr-hot-thresholds th, .gr-hot-thresholds td, .gr-distribution-table th, .gr-distribution-table td { padding: 4px 6px; border-bottom: 1px solid var(--gr-border); text-align: left; white-space: nowrap; }
.gr-hot-thresholds th, .gr-distribution-table th { color: var(--gr-muted); font-size: 0.6875rem; }
.gr-hot-thresholds .num, .gr-distribution-table .num { text-align: right; }
.gr-distribution-layout { display: grid; gap: 12px; margin-top: 8px; }
.gr-donut { position: relative; width: min(170px, 100%); aspect-ratio: 1; margin: 0 auto; }
.gr-donut-ring { display: block; width: 100%; height: 100%; }
.gr-donut-segment { fill: none; stroke-width: 29; }
.gr-donut-segment.under { stroke: var(--gr-under); } .gr-donut-segment.close { stroke: var(--gr-close); }
.gr-donut-segment.mid { stroke: var(--gr-mid); } .gr-donut-segment.three { stroke: var(--gr-three); }
.gr-donut-centre { position: absolute; inset: 24%; display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--gr-paper); }
.gr-donut-centre strong { font-size: 1.75rem; line-height: 1; }
.gr-donut-centre span { color: var(--gr-muted); font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.gr-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-dot.under { background: var(--gr-under); } .gr-dot.close { background: var(--gr-close); } .gr-dot.mid { background: var(--gr-mid); } .gr-dot.three { background: var(--gr-three); }
@media (max-width: 600px) { .gr-shooting { grid-template-columns: 1fr; } }
.gr-share { display: grid; gap: 10px; margin-top: 16px; padding: 14px; border: 1px solid var(--cc-border); border-radius: 12px; }
.gr-share.hidden { display: none; }
.gr-share-title { margin: 0; font-size: 1rem; }
.gr-share-check { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.gr-share-cards { display: grid; gap: 8px; }
.gr-share-card { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: end; }
.gr-share-card-label { padding-bottom: 10px; font-weight: 600; }
.gr-share-select, .gr-share-message { display: grid; gap: 4px; font-size: 0.8125rem; }
.gr-share-select select, .gr-share-message textarea { min-height: 40px; padding: 8px; border: 1px solid var(--cc-border); border-radius: 8px; background: var(--cc-input, transparent); color: var(--cc-text); font: inherit; }
.gr-share-counter { justify-self: end; color: var(--cc-text-muted); font-size: 0.75rem; }
.gr-share-counter.over { color: var(--cc-danger); }
@media (max-width: 600px) { .gr-share-card { grid-template-columns: 1fr; } .gr-share-card-label { padding-bottom: 0; } }

/* Cover: the result on a navy panel, then the impact players, key stats and contents. */
.gr-cover-page { gap: 0; overflow: hidden; border: 1px solid var(--gr-border); border-radius: 16px; }
.gr-cover-hero { display: grid; gap: 14px; padding: 24px 28px 26px; border-bottom: 6px solid var(--gr-ink-accent); background: var(--gr-ink); color: var(--gr-on-ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-cover-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.gr-cover-hero .gr-brand-name { color: var(--gr-on-ink); }
.gr-cover-hero .gr-brand-accent { color: var(--gr-ink-accent); }
/* The icon's own navy tile would vanish on the navy panel, so it gets a hairline edge there. */
.gr-cover-hero .gr-mark-tile { stroke: var(--gr-on-ink-muted); stroke-opacity: 0.35; stroke-width: 2; }
.gr-cover-league { margin: 0; color: var(--gr-on-ink-muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.gr-cover-kicker-row { display: flex; align-items: center; gap: 10px; }
.gr-cover-kicker { margin: 0; color: var(--gr-ink-accent); font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.gr-cover-result { padding: 3px 9px; border-radius: 4px; background: var(--gr-on-ink-line); color: var(--gr-on-ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.gr-cover-result.win { background: var(--gr-ink-accent); color: var(--gr-ink); }
.gr-cover-score { display: grid; margin: 0; font-size: 1rem; }
.gr-cover-team { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 6px 0; }
.gr-cover-team + .gr-cover-team { border-top: 1px solid var(--gr-on-ink-line); }
.gr-cover-team.trailing { color: var(--gr-on-ink-muted); }
.gr-cover-team-name { min-width: 0; font-size: clamp(1.5rem, 4.5vw, 2.5rem); font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.gr-cover-team-score { font-size: clamp(2.5rem, 7vw, 3.75rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.gr-cover-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; color: var(--gr-on-ink-muted); font-size: 0.9375rem; font-weight: 600; }
.gr-cover-separator { opacity: 0.6; }
.gr-cover-periods { width: 100%; margin-top: 6px; border: 1px solid var(--gr-on-ink-line); border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; table-layout: fixed; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
.gr-cover-periods th, .gr-cover-periods td { padding: 8px 10px; text-align: center; }
.gr-cover-periods :is(th, td):first-child { width: 34%; text-align: left; }
.gr-cover-periods th { background: var(--gr-on-ink-faint); color: var(--gr-on-ink-muted); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.gr-cover-periods td.name { overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.gr-cover-periods tbody tr + tr td { border-top: 1px solid var(--gr-on-ink-line); }
.gr-cover-periods tr.theirs td { color: var(--gr-on-ink-muted); }
.gr-cover { display: grid; gap: 12px; padding: 22px 28px 20px; }
.gr-cover-label { margin: 6px 0 0; color: var(--gr-accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.gr-cover-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.gr-cover-player { display: grid; align-content: start; gap: 6px; padding: 14px 16px; border: 1px solid var(--gr-border); border-radius: 12px; background: var(--gr-tile); }
.gr-cover-player.lead { border-color: var(--gr-ink); background: var(--gr-ink); color: var(--gr-on-ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gr-cover-player-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gr-cover-player-number { color: var(--gr-heading); font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.gr-cover-player.lead .gr-cover-player-number { color: var(--gr-ink-accent); }
.gr-cover-player-category { padding: 2px 7px; border: 1px solid currentColor; border-radius: 4px; color: var(--gr-accent); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.gr-cover-player.lead .gr-cover-player-category { border-color: var(--gr-ink-accent); background: var(--gr-ink-accent); color: var(--gr-ink); }
.gr-cover-player-name { margin: 0; font-size: 1.0625rem; font-weight: 700; overflow-wrap: anywhere; }
.gr-cover-player-stats { margin: 0; padding-top: 8px; border-top: 1px solid var(--gr-border); color: var(--gr-muted); font-size: 0.8125rem; }
.gr-cover-player.lead .gr-cover-player-stats { border-color: var(--gr-on-ink-line); color: var(--gr-on-ink-muted); }
.gr-cover-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.gr-cover-stats .gr-tile { justify-items: center; text-align: center; }
.gr-cover-stats .gr-tile-value { order: -1; }
.gr-cover-contents { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; font-size: 0.8125rem; }
.gr-cover-contents-title { color: var(--gr-heading); font-weight: 800; }
.gr-cover-contents-item { color: var(--gr-muted); font-weight: 600; }
.gr-cover-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--gr-border); color: var(--gr-muted); font-size: 0.75rem; }
@media (max-width: 480px) {
    .gr-cover-hero { padding: 20px 18px 22px; }
    .gr-cover { padding: 18px 16px; }
    .gr-cover-periods th, .gr-cover-periods td { padding: 7px 6px; }
}
#gameReportPrint { display: none; }
@media print {
    /* No page margin leaves the browser no room for its own header and footer (page title, address, date). */
    @page { margin: 0; }
    .gr-print .gr-page { padding: 12mm; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
    /* Blocks, not grids: browsers keep a block whole across pages reliably only outside grid and flex layouts. */
    .gr-print .gr-doc, .gr-print .gr-page { display: block; }
    .gr-print .gr-page > * + * { margin-top: 18px; }
    /* The cover fills the first sheet: the navy panel bleeds to the edges, the footer sits at the bottom. */
    .gr-print .gr-cover-page { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; padding: 0; border: 0; border-radius: 0; break-after: page; }
    .gr-print .gr-cover-page > * + * { margin-top: 0; }
    .gr-print .gr-cover-hero { padding: 16mm 16mm 12mm; border-bottom-width: 3mm; }
    .gr-print .gr-cover-team-name { font-size: 2.25rem; }
    .gr-print .gr-cover-team-score { font-size: 3.5rem; }
    .gr-print .gr-cover { flex: 1 0 auto; display: flex; flex-direction: column; gap: 4mm; padding: 10mm 16mm 12mm; }
    .gr-print .gr-cover-players { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gr-print .gr-cover-stats { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); }
    .gr-print .gr-cover-footer { margin-top: auto; }
    /* One row of tiles on paper, so the summary keeps to fewer sheets. */
    .gr-print .gr-tiles { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .gr-print .gr-flow-tiles { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
    body.cc-printing-report > *:not(#gameReportPrint) { display: none !important; }
    body.cc-printing-report { background: white !important; }
    body.cc-printing-report #gameReportPrint { display: block; }
    /* Darker orange on white paper so small headings stay readable. */
    .gr-print .gr-doc { --gr-accent: #c9540c; --gr-heading: var(--gr-ink); --gr-text: #1f1f1f; --gr-muted: #5b6272; --gr-tile: #f3f4f7; --gr-paper: #ffffff; --gr-border: #d9dce3; --gr-win: #116a3c; --gr-loss: #b43948; color: var(--gr-text); background: var(--gr-paper); }
    .gr-print .gr-credit { margin: 0 12mm; padding-bottom: 12mm; break-inside: avoid; page-break-inside: avoid; }
    /* Nothing is cut between pages: a section, chart or table that doesn't fit moves to the next page whole.
       Only a box score taller than a full page splits, and then between rows, with the header repeated. */
    .gr-print .gr-section, .gr-print .gr-cover-player, .gr-print .gr-tile, .gr-print .gr-note-column,
    .gr-print .gr-message, .gr-print .gr-margin, .gr-print .gr-court, .gr-print .gr-hot-legend, .gr-print .gr-distribution,
    .gr-print svg, .gr-print table, .gr-print tr { break-inside: avoid; page-break-inside: avoid; }
    .gr-print .gr-section-title, .gr-print .gr-note-title, .gr-print .gr-brandbar { break-after: avoid; page-break-after: avoid; }
    .gr-print .gr-box thead { display: table-header-group; }
    .gr-print .gr-box th, .gr-print .gr-box td { padding: 5px 8px; }
    /* A rounded frame can't follow a table across pages, so print keeps square corners. */
    .gr-print .gr-table-wrap { overflow: visible; border-radius: 0; }
    .gr-print .gr-opponent, .gr-print .gr-box-key { break-inside: avoid; page-break-inside: avoid; }
    .gr-print .gr-box-page { break-before: page; }
    .gr-print .gr-shooting { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .gr-print * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Player profile: the layout follows the width of the profile itself, so an iPad beside the sidebar,
   an iPad in landscape, a phone and a desktop each get a fitting arrangement. Browsers without
   container queries keep the full table and the wide layout. */
#seasonPlayerDetailsScreen #seasonPlayerDetailsContent {
    container: player-profile / inline-size;
    display: grid;
    gap: 0.85rem;
}

#seasonPlayerDetailsScreen .season-player-hero {
    flex-wrap: wrap;
}

.season-player-mode-toggle {
    position: relative;
    z-index: 1;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.09));
    border-radius: 10px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.03));
}

.season-player-mode-btn {
    min-height: 40px;
    padding: 6px 14px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--dash-text-dim);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.season-player-mode-btn[aria-pressed="true"] {
    background: #ff9f0a;
    color: #121518;
}

.season-player-mode-btn:focus-visible {
    outline: 2px solid #ff9f0a;
    outline-offset: 2px;
}

@media (max-width: 560px) {
    .season-player-mode-toggle {
        width: 100%;
    }

    .season-player-mode-btn {
        flex: 1 1 0;
        min-height: 44px;
    }
}

/* Summary: headline numbers first and larger, shooting with its percentage, then the rest. */
.season-player-summary-group {
    display: grid;
    gap: 0.55rem;
}

.season-player-summary-headline,
.season-player-summary-shooting {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.season-player-summary-more {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

#seasonPlayerDetailsScreen #seasonPlayerSummary .season-player-summary-headline .season-secondary-item {
    padding: 0.8rem 0.9rem;
    border-top-color: var(--cc-light-accent-border, rgba(255, 152, 0, 0.5));
}

#seasonPlayerDetailsScreen #seasonPlayerSummary .season-player-summary-headline .season-secondary-value {
    font-size: 1.65rem;
    line-height: 1.1;
}

#seasonPlayerDetailsScreen #seasonPlayerSummary .season-player-summary-more .season-secondary-value {
    font-size: 0.95rem;
}

.season-player-summary-pct {
    color: var(--dash-text-dim);
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.season-player-summary-pct.season-small-sample {
    color: var(--cc-text-muted, #9c9c9c);
    font-weight: 500;
}

/* Game log: every row opens the game's box score. */
#seasonPlayerDetailsScreen .season-player-games-table {
    min-width: 100%;
}

#seasonPlayerDetailsScreen .season-player-log-row {
    cursor: pointer;
}

.season-player-log-open {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.season-player-log-open:focus-visible,
.season-player-log-card:focus-visible {
    outline: 2px solid #ff9f0a;
    outline-offset: 2px;
}

.season-player-log-cards {
    display: none;
    gap: 8px;
}

.season-player-log-card {
    display: grid;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid var(--cc-light-border, rgba(255, 255, 255, 0.07));
    border-radius: 12px;
    background: var(--cc-light-raised, rgba(255, 255, 255, 0.025));
    color: var(--dash-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.season-player-log-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.season-player-log-card-title {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.season-player-log-card-title strong {
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

.season-player-log-card-title span {
    color: var(--dash-text-dim);
    font-size: 0.75rem;
    font-weight: 600;
}

.season-player-log-card-stats {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.season-player-log-card-stat {
    display: grid;
    gap: 2px;
    padding: 6px 4px;
    border-radius: 8px;
    background: var(--cc-light-surface, rgba(0, 0, 0, 0.18));
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.season-player-log-card-stat strong,
.season-player-log-card-stat .season-player-log-plus-minus {
    font-size: 0.9rem;
    font-weight: 700;
}

.season-player-log-card-label {
    color: var(--dash-text-dim);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.season-player-log-empty {
    margin: 0;
    color: var(--dash-text-dim);
}

/* Wide (desktop, iPad landscape): zones beside their summary. */
@container player-profile (min-width: 640px) {
    #seasonPlayerDetailsScreen .season-hot-zones-layout {
        grid-template-columns: minmax(0, 1.6fr) minmax(200px, 1fr);
    }
}

/* Medium (iPad portrait beside the sidebar): every column stays, packed tighter. */
@container player-profile (max-width: 899px) {
    #seasonPlayerDetailsScreen .season-player-games-table th,
    #seasonPlayerDetailsScreen .season-player-games-table td {
        padding: 0.5rem 0.32rem;
        font-size: 0.78rem;
    }

    #seasonPlayerDetailsScreen .season-player-games-table th:first-child,
    #seasonPlayerDetailsScreen .season-player-games-table td:first-child {
        width: auto;
    }

    #seasonPlayerDetailsScreen .season-player-games-table th:nth-child(2),
    #seasonPlayerDetailsScreen .season-player-games-table td:nth-child(2) {
        width: auto;
        max-width: 9rem;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #seasonPlayerDetailsScreen .season-player-games-table th:nth-child(n + 4),
    #seasonPlayerDetailsScreen .season-player-games-table td:nth-child(n + 4) {
        min-width: 2.6rem;
    }
}

/* Narrow (phones, small iPad panels): one card per game, shooting two by two. */
@container player-profile (max-width: 639px) {
    #seasonPlayerDetailsScreen .season-player-game-log-table-wrap {
        display: none;
    }

    #seasonPlayerDetailsScreen .season-player-log-cards {
        display: grid;
    }

    .season-player-summary-shooting {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .season-player-summary-more {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    #seasonPlayerDetailsScreen .season-hot-zones-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@container player-profile (max-width: 459px) {
    .season-player-summary-headline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #seasonPlayerDetailsScreen #seasonPlayerSummary .season-player-summary-headline .season-secondary-value {
        font-size: 1.45rem;
    }

    .season-player-log-card-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Five-section navigation: sidebar divider, Pro lock, section tabs and the tablet icon rail. */
/* Phone-only navigation (css/mobile/05-bottom-bar.css) stays out of the way on wider screens. */
.dash-bottom-bar,
.dash-bottom-start,
.dash-phone-team {
    display: none;
}

.dash-nav-divider {
    height: 1px;
    margin: 0.35rem 0.2rem;
    background: var(--cc-dashboard-border);
}

.dash-nav-lock {
    display: none;
    margin-left: auto;
    color: var(--cc-text-muted);
}

.dash-nav-lock svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

:is(.dash-nav-item, .dash-bottom-item).is-locked .dash-nav-lock {
    display: inline-grid;
}

.dash-current-initials {
    display: none;
}

/* Team and Stats share one header: the section title and tools, with the page tabs below. */
.dash-section-header {
    display: grid;
    gap: 0.9rem;
}

.dash-section-header-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.dash-section-title {
    margin: 0;
    color: var(--cc-text);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.6rem, 2.1rem + 1.8vw, 4rem);
    line-height: 0.92;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.dash-section-tools {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.dash-section-season {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.dash-section-season-label {
    color: var(--cc-text-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

#dashSectionHeader .dash-section-season select {
    width: auto;
    min-width: 8.5rem;
    min-height: 36px;
    padding: 0.35rem 2rem 0.35rem 0.7rem;
    border-radius: 10px;
    font-size: 0.85rem;
}

.dash-section-tabs {
    display: flex;
    justify-self: start;
    gap: 0.35rem;
    max-width: 100%;
    overflow-x: auto;
    padding: 0.3rem;
    border: 1px solid var(--cc-dashboard-border);
    border-radius: 14px;
    background: var(--cc-surface);
    scrollbar-width: none;
}

.dash-section-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    color: var(--cc-text-muted);
    font: inherit;
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.dash-section-tab[hidden] {
    display: none;
}

.dash-section-tab:hover,
.dash-section-tab:focus-visible {
    color: var(--cc-text);
    background: var(--cc-surface-raised);
    outline: none;
}

.dash-section-tab.active {
    color: var(--cc-accent);
    border-color: color-mix(in srgb, var(--cc-accent) 32%, transparent);
    background: color-mix(in srgb, var(--cc-accent) 13%, transparent);
}

.dash-section-tab .dash-nav-badge {
    margin-left: 0;
}

/* Tablets get a fixed icon rail with a short label under each icon; it never collapses. */
@media (min-width: 768px) and (max-width: 1024px) {
    #dashShell:not(.onboarding-active) {
        grid-template-columns: 92px minmax(0, 1fr);
        gap: 0.85rem;
    }

    #dashShell:not(.onboarding-active) .dash-sidebar {
        width: 92px;
        max-height: none;
        gap: 0.75rem;
        padding: 0.85rem 0.45rem;
        overflow: visible;
        /* Above the page so the team list can open over it. */
        z-index: 5;
    }

    #dashShell .dash-sidebar-head {
        justify-content: center;
        padding-bottom: 0.75rem;
    }

    #dashShell :is(.dash-brand-title, .dash-sidebar-toggle, .dash-sidebar-reopen, .dash-current-label, .dash-current-value, .dash-current-chevron, .dash-coach-meta) {
        display: none;
    }

    #dashShell .dash-current-team {
        margin-top: 0;
        padding: 0;
        border: 0;
        background: transparent;
    }

    #dashShell .dash-current-trigger {
        display: flex;
        justify-content: center;
        padding: 0;
        border: 0;
        background: transparent;
    }

    #dashShell .dash-current-value-row {
        justify-content: center;
    }

    #dashShell .dash-current-initials {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid color-mix(in srgb, var(--cc-accent) 30%, transparent);
        border-radius: 12px;
        background: color-mix(in srgb, var(--cc-accent) 12%, transparent);
        color: var(--cc-accent);
        font-size: 0.8rem;
        font-weight: 900;
        letter-spacing: 0.06em;
    }

    #dashShell .dash-current-team-list {
        top: 0;
        right: auto;
        left: calc(100% + 0.6rem);
        width: 240px;
    }

    #dashShell .dash-nav {
        gap: 0.3rem;
    }

    #dashShell .dash-nav-item {
        flex-direction: column;
        justify-content: center;
        gap: 0.3rem;
        min-height: 0;
        padding: 0.6rem 0.15rem;
        text-align: center;
    }

    #dashShell .dash-nav-item:hover {
        transform: none;
    }

    #dashShell .dash-nav-label {
        font-size: 0.55rem;
        letter-spacing: 0.02em;
        line-height: 1.15;
    }

    #dashShell :is(.dash-nav-lock, .dash-nav-badge) {
        position: absolute;
        top: 0.25rem;
        right: 0.3rem;
        margin: 0;
    }

    #dashShell .dash-coach {
        justify-items: center;
        gap: 0.65rem;
        padding-top: 0.75rem;
    }

    #dashShell .dash-coach-row {
        justify-content: center;
    }

    #dashShell .dash-start {
        display: grid;
        place-items: center;
        width: 52px;
        height: 52px;
        min-height: 0;
        padding: 0;
        border-radius: 14px;
        font-size: 0;
    }

    #dashShell .dash-start::before {
        margin: 0 0 0 0.15rem;
        border-top-width: 0.45rem;
        border-bottom-width: 0.45rem;
        border-left-width: 0.7rem;
    }
}

/* Sync status on the header sync icon: a dot instead of a text pill, and a card that explains it. */
#dashManualSyncBtn {
    position: relative;
}

#dashManualSyncBtn[data-sync-dot]::after {
    content: '';
    position: absolute;
    top: 1px;
    right: 1px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cc-text-muted);
    box-shadow: 0 0 0 2px var(--cc-surface);
}

#dashManualSyncBtn[data-sync-dot="attention"]::after {
    background: var(--cc-warning);
}

.dash-sync-explain {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    z-index: 60;
    display: grid;
    gap: 0.55rem;
    width: min(300px, calc(100vw - 2rem));
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--cc-dashboard-border);
    border-radius: 12px;
    background: var(--cc-surface);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--cc-bg) 55%, transparent);
    text-align: left;
}

.dash-sync-explain-title {
    color: var(--cc-text);
    font-size: 0.86rem;
    font-weight: 800;
}

.dash-sync-explain-detail {
    margin: 0;
    color: var(--cc-text-subtle);
    font-size: 0.8rem;
    line-height: 1.45;
}

.dash-sync-explain-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.dash-sync-explain-actions .btn {
    width: auto;
    min-height: 34px;
    padding: 0.4rem 0.8rem;
    font-size: 0.76rem;
    letter-spacing: 0.02em;
}

/* Brand lockup, footer and sign-in language switch. The text comes from config/brand.js;
   the look follows the wordmark in brand/logo-logiciels-benchadvantage-*.svg. */

/* Light-theme values of the --cc-brand-* tokens (dark values are in 01-base.css).
   Kept here because 11a-light-theme.css is at its line budget. */
html[data-theme="light"],
body[data-theme="light"] {
    --cc-brand-text: #111a2e;
    --cc-brand-accent: #e2600f;
    --cc-brand-muted: #4a5368;
}

/* "Logiciels" sits on its own line above "BenchAdvantage"; together they are one name.
   "Bench" is regular weight and "Advantage" bold orange, as in the wordmark. */
.brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.06em;
    font-family: 'Inter', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cc-brand-text);
}

.brand-lockup-prefix {
    font-size: 0.42em;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
}

.brand-lockup-name {
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
}

.brand-lockup-accent {
    font-weight: 700;
    color: var(--cc-brand-accent);
}

/* The wordmark is left-aligned; the block itself stays centred on the sign-in screen. */
.brand-wordmark {
    display: inline-grid;
    justify-items: start;
    gap: 0.35rem;
    text-align: start;
}

.auth-title.brand-lockup {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0;
    text-transform: none;
    text-shadow: none;
}

/* One long word: shrink with the viewport instead of overflowing small phones. */
.auth-title .brand-lockup-name {
    font-size: min(0.9em, 10.5vw);
}

.brand-wordmark .auth-tagline {
    margin-top: 0;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cc-brand-muted);
}

.dash-brand-title.brand-lockup {
    font-family: 'Inter', sans-serif;
    letter-spacing: 0;
}

.dash-brand-title .brand-lockup-name {
    font-size: 0.95em;
}

.brand-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem 1rem;
    font-size: 0.75rem;
    color: var(--cc-text-muted);
}

.brand-footer-copyright {
    flex-basis: 100%;
    text-align: center;
}

.auth-shell .brand-footer {
    color: var(--auth-text-dim);
}

.brand-footer-link {
    padding: 0.3rem 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.brand-footer-link:hover,
.brand-footer-link:focus-visible {
    color: var(--cc-text);
}

.auth-shell .brand-footer-link:hover,
.auth-shell .brand-footer-link:focus-visible {
    color: var(--auth-text);
}

.settings-brand-footer {
    justify-content: flex-start;
    margin-top: 0.9rem;
}

.settings-brand-footer .brand-footer-copyright {
    text-align: start;
}

.auth-language-switch {
    position: absolute;
    top: max(0.9rem, env(safe-area-inset-top));
    right: max(1rem, env(safe-area-inset-right));
    z-index: 1;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--auth-border-strong);
    border-radius: 999px;
    background: var(--auth-surface);
    color: var(--auth-text);
    font: 600 0.8rem 'Inter', sans-serif;
    cursor: pointer;
}

.auth-language-switch:hover,
.auth-language-switch:focus-visible {
    border-color: var(--auth-primary);
}

/* Player progression (Pro): the profile's "Where to help" and "Recent form" panels, the trend chart's
   average lines, and the dashboard's player form panel. Green reads as good for the team, red as
   something to work on, whatever way the number itself moved. */
.player-progression-empty,
.player-focus-none,
.dash-form-none {
    margin: 0;
    color: var(--cc-text-muted);
    font-size: 0.85rem;
}

.player-focus-columns {
    display: grid;
    /* Two columns that stack by themselves once one would get narrower than 260px. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 0.85rem;
}

.player-focus-column {
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.player-focus-column-title {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.player-focus-column.weak .player-focus-column-title {
    color: var(--cc-danger);
}

.player-focus-column.strong .player-focus-column-title {
    color: var(--cc-success);
}

.player-focus-item {
    display: grid;
    gap: 0.3rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--cc-border-soft);
    border-left-width: 4px;
    border-radius: 10px;
    background: var(--page-input, var(--cc-surface-raised));
}

.player-focus-item.weak {
    border-left-color: var(--cc-danger);
}

.player-focus-item.strong {
    border-left-color: var(--cc-success);
}

.player-focus-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.player-focus-label {
    color: var(--cc-text);
    font-weight: 800;
}

.player-focus-value {
    color: var(--cc-text);
    font-size: 1.15rem;
    font-weight: 900;
    white-space: nowrap;
}

.player-focus-detail {
    margin: 0;
    color: var(--cc-text-muted);
    font-size: 0.8rem;
}

.player-trend-badge {
    justify-self: start;
    color: var(--cc-text-muted);
    font-size: 0.78rem;
    font-weight: 800;
    white-space: nowrap;
}

.player-trend-badge.better {
    color: var(--cc-success);
}

.player-trend-badge.worse {
    color: var(--cc-danger);
}

/* Recent form: one row per stat, before vs. latest games. */
.player-form-table {
    display: grid;
}

.player-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 0.5rem;
    align-items: center;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--cc-border-soft);
    color: var(--cc-text);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.player-form-row:last-child {
    border-bottom: 0;
}

.player-form-row.head {
    color: var(--cc-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.player-form-row > :first-child {
    font-weight: 800;
}

.player-form-row.none > :not(:first-child) {
    color: var(--cc-text-muted);
}

/* Trend chart: the season average over the game-by-game line. */
.player-trend-season-line {
    stroke: var(--cc-text-muted);
    stroke-width: 1.5;
    stroke-dasharray: 6 5;
}

.player-trend-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-top: 0.5rem;
    color: var(--cc-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.player-trend-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.player-trend-legend-swatch {
    width: 18px;
    border-top: 3px solid var(--cc-accent);
}

.player-trend-legend-item.season .player-trend-legend-swatch {
    border-top: 2px dashed var(--cc-text-muted);
}

/* Dashboard: who is rising and who needs attention lately. */
.dash-form-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
}

.dash-form-column {
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.dash-form-heading {
    margin: 0;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dash-form-heading.up {
    color: var(--cc-success);
}

.dash-form-heading.down {
    color: var(--cc-danger);
}

.dash-form-list {
    display: grid;
    gap: 0.55rem;
}

.dash-form-item {
    appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--cc-border-soft);
    border-left-width: 4px;
    border-radius: 12px;
    background: var(--page-input, var(--cc-surface-raised));
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.dash-form-item.better {
    border-left-color: var(--cc-success);
}

.dash-form-item.worse {
    border-left-color: var(--cc-danger);
}

.dash-form-item:hover,
.dash-form-item:focus-visible {
    border-color: var(--cc-accent);
}

.dash-form-item:focus-visible {
    outline: 2px solid var(--cc-focus);
    outline-offset: 2px;
}

.dash-form-meta {
    min-width: 0;
}

.dash-form-arrow {
    font-size: 1.25rem;
    font-weight: 900;
}

.dash-form-item.better .dash-form-arrow {
    color: var(--cc-success);
}

.dash-form-item.worse .dash-form-arrow {
    color: var(--cc-danger);
}

/* Stats > Analytics > Player form: every player, "before → recent" for each stat. */
.player-form-analytics-table tbody tr {
    cursor: pointer;
}

.player-form-analytics-table td {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.player-form-name {
    padding: 0;
    border: 0;
    background: none;
    color: var(--cc-text);
    font: inherit;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.player-form-name:hover,
.player-form-name:focus-visible {
    color: var(--cc-accent);
}

/* Analytics tables bold their third column; here only a real change is bold. */
#seasonAnalyticsScreen .player-form-analytics-table td.player-form-cell {
    font-weight: 500;
}

#seasonAnalyticsScreen .player-form-analytics-table td.player-form-cell.none {
    color: var(--cc-text-muted);
}

#seasonAnalyticsScreen .player-form-analytics-table td.player-form-cell.better {
    color: var(--cc-success);
    font-weight: 800;
}

#seasonAnalyticsScreen .player-form-analytics-table td.player-form-cell.worse {
    color: var(--cc-danger);
    font-weight: 800;
}

.player-form-cell-arrow {
    margin-left: 0.3rem;
}

/* Player profile game log: how many games to show, and the "latest N of M" line under the table. */
.player-game-log-controls {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem 1rem;
}

.player-game-log-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    color: var(--cc-text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.player-game-log-inline-date {
    display: none;
    color: var(--cc-text-muted);
    font-size: 0.72rem;
    font-weight: 600;
}

/* Narrow profile with more than 5 games: the compact table (one line per game, columns scroll
   sideways) instead of one tall card per game. */
@container player-profile (max-width: 639px) {
    #seasonPlayerDetailsScreen .player-game-log-dense .season-player-game-log-table-wrap {
        display: block;
    }

    #seasonPlayerDetailsScreen .player-game-log-dense .season-player-log-cards {
        display: none;
    }

    /* The date moves under the opponent, so the stats start right after the result. */
    #seasonPlayerDetailsScreen .player-game-log-dense .season-player-games-table :is(th, td):first-child {
        display: none;
    }

    #seasonPlayerDetailsScreen .player-game-log-dense .player-game-log-inline-date {
        display: block;
    }
}

/* Stats > Analytics > Player progress > Where to help: a colour grid, players by stat. */
.player-focus-priority {
    margin: 0.4rem 0 0.75rem;
    padding: 0.6rem 0.8rem;
    border-left: 4px solid var(--cc-danger);
    border-radius: 8px;
    background: color-mix(in srgb, var(--cc-danger) 12%, transparent);
    color: var(--cc-text);
    font-weight: 800;
}

.player-focus-priority.none {
    border-left-color: var(--cc-border);
    background: var(--cc-surface-raised);
    color: var(--cc-text-muted);
    font-weight: 600;
}

.player-focus-grid-table tbody tr {
    cursor: pointer;
}

#seasonAnalyticsScreen .player-focus-grid-table td.player-focus-cell {
    color: var(--cc-text);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

#seasonAnalyticsScreen .player-focus-grid-table td.player-focus-cell.weak {
    background: color-mix(in srgb, var(--cc-danger) 22%, transparent);
}

#seasonAnalyticsScreen .player-focus-grid-table td.player-focus-cell.weak-strong {
    background: color-mix(in srgb, var(--cc-danger) 45%, transparent);
    font-weight: 800;
}

#seasonAnalyticsScreen .player-focus-grid-table td.player-focus-cell.strong {
    background: color-mix(in srgb, var(--cc-success) 20%, transparent);
}

#seasonAnalyticsScreen .player-focus-grid-table td.player-focus-cell.strong-strong {
    background: color-mix(in srgb, var(--cc-success) 40%, transparent);
    font-weight: 800;
}

#seasonAnalyticsScreen .player-focus-grid-table td.player-focus-cell.none {
    color: var(--cc-text-muted);
    font-weight: 500;
}

.player-focus-legend {
    display: flex;
    margin-top: 0.75rem;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    color: var(--cc-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.player-focus-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.player-focus-legend-item::before {
    content: '';
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1px solid var(--cc-border);
}

.player-focus-legend-item.weak::before {
    background: color-mix(in srgb, var(--cc-danger) 45%, transparent);
}

.player-focus-legend-item.strong::before {
    background: color-mix(in srgb, var(--cc-success) 40%, transparent);
}

/* Player report (Pro): the button on the player profile and the review sheet before the PDF is shared. */
.season-player-hero-actions {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.season-player-report-btn {
    min-height: 48px;
    padding: 6px 16px;
    border: 1px solid var(--cc-brand-accent);
    border-radius: 10px;
    background: var(--cc-brand-accent);
    color: var(--cc-on-accent);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
}

.season-player-report-btn:focus-visible {
    outline: 2px solid var(--cc-focus);
    outline-offset: 2px;
}

/* Report dialogs (player and game) dim and blur the app behind them, like the confirm and editor dialogs,
   instead of covering it with a near-opaque sheet. */
body:not(.live-game-active) :is(#gameReportModal, #playerReportModal).modal {
    background: var(--cc-scrim);
    backdrop-filter: blur(8px);
}

.player-report-modal {
    display: flex;
    flex-direction: column;
    width: min(720px, calc(100vw - 24px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    padding: 1.5rem 1.5rem 0;
    overflow: hidden;
}

#playerReportModal .player-report-modal h2 {
    margin: 0 2.5rem 0.25rem 0;
}

.player-report-subtitle,
.player-report-note {
    margin: 0;
    color: var(--cc-text-muted);
    font-size: 0.875rem;
}

.player-report-form {
    display: grid;
    flex: 1 1 auto;
    gap: 14px;
    min-height: 0;
    margin-top: 12px;
    padding-bottom: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.player-report-section {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--cc-border);
    border-radius: 12px;
}

.player-report-section-title {
    margin: 0;
    font-size: 1rem;
}

.player-report-field {
    display: grid;
    gap: 4px;
    font-size: 0.8125rem;
}

.player-report-label {
    color: var(--cc-text-muted);
    font-weight: 600;
}

.player-report-field textarea,
.player-report-field input {
    width: 100%;
    min-height: 44px;
    padding: 10px;
    border: 1px solid var(--cc-border);
    border-radius: 8px;
    background: var(--cc-input);
    color: var(--cc-text);
    font: inherit;
    font-size: 1rem;
}

.player-report-field textarea {
    resize: vertical;
}

.player-report-counter {
    justify-self: end;
    color: var(--cc-text-muted);
    font-size: 0.75rem;
}

.player-report-question {
    display: grid;
    gap: 8px;
}

.player-report-question-text {
    margin: 0;
    font-weight: 600;
}

.player-report-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.player-report-choice-btn {
    flex: 1 1 160px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid var(--cc-border);
    border-radius: 10px;
    background: var(--cc-control);
    color: var(--cc-text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.player-report-choice-btn[aria-pressed="true"] {
    border-color: var(--cc-brand-accent);
    background: var(--cc-brand-accent);
    color: var(--cc-on-accent);
}

.player-report-item {
    display: grid;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    background: var(--cc-surface-raised);
}

.player-report-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.player-report-item-number {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--cc-brand-accent);
    color: var(--cc-on-accent);
    font-size: 0.75rem;
    font-weight: 700;
}

.player-report-item-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 0.9375rem;
}

.player-report-item-text {
    margin: 0;
    font-size: 0.875rem;
}

.player-report-target-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.player-report-field .player-report-target-row input {
    width: 7rem;
}

.player-report-unit {
    color: var(--cc-text-muted);
}

.player-report-link {
    justify-self: start;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cc-brand-accent);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.player-report-pill {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--cc-control);
    color: var(--cc-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.player-report-pill.tone-reached,
.player-report-pill.tone-onTrack {
    color: var(--cc-success);
}

.player-report-pill.tone-working {
    color: var(--cc-warning);
}

.player-report-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
}

.player-report-check input {
    width: 20px;
    height: 20px;
}

.player-report-actions {
    display: grid;
    gap: 8px;
    margin: 0 -1.5rem;
    padding: 12px 1.5rem 16px;
    border-top: 1px solid var(--cc-border);
    background: var(--cc-surface);
}

.player-report-status {
    min-height: 1.2em;
    margin: 0;
    color: var(--cc-text-muted);
    font-size: 0.8125rem;
}

.player-report-status[data-tone="error"] {
    color: var(--cc-danger);
}

.player-report-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.player-report-buttons .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 10px 14px;
}

.player-report-buttons .btn.btn-secondary {
    min-height: 44px;
    font-size: 0.8125rem;
}

/* Help "?" buttons: the same grey circle everywhere (dashboard pages and onboarding). The screen list and
   specificity outrank the flat-link reset in 10-past-games.css, the modern dashboard and the phone sizes. */
body:not(.live-game-active) :is(#dashboardScreen, #pastGamesScreen, #onboardingScreen) :is(.dash-help-button, .onboarding-help summary) {
    display: grid;
    place-items: center;
    /* --cc-mobile-control exists only on phones (css/mobile), where it keeps the larger touch size. */
    width: var(--cc-mobile-control, 2.25rem);
    height: var(--cc-mobile-control, 2.25rem);
    min-width: var(--cc-mobile-control, 2.25rem);
    padding: 0;
    border: 1px solid var(--cc-border);
    border-radius: 50%;
    background: var(--cc-control);
    color: var(--cc-text-muted);
    box-shadow: none;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}

body:not(.live-game-active) :is(#dashboardScreen, #pastGamesScreen, #onboardingScreen) :is(.dash-help-button, .onboarding-help summary):is(:hover, :focus-visible):not(:disabled) {
    border-color: var(--cc-border-strong);
    background: var(--cc-control-hover);
    color: var(--cc-text);
}