/* Courtly brand system */

:root {
    --court-deep-blue: #0b0e2a;
    --court-blue: #7c5cff;
    --court-cyan: #39d0ff;
    --court-green: #00c764;
    --court-green-light: #7cf0b8;

    --bg: #0b0e2a;
    --bg-accent: #151a3f;
    --bg-overlay-1: rgba(11,14,42,.86);
    --bg-overlay-2: rgba(11,14,42,.94);
    --glow-1: rgba(60,60,160,.28);
    --glow-2: rgba(120,50,160,.18);
    --surface: rgba(16,20,48,.82);
    --surface-2: rgba(124,92,255,.16);
    --text: #e6e8ff;
    --text-muted: #8f96c9;
    --accent: #7c5cff;
    --accent-2: #ff5da2;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-card: 0 14px 36px rgba(0,0,0,.40);
    --shadow-soft: 0 5px 16px rgba(0,0,0,.30);
    --stroke: rgba(120,140,255,.16);
    --min-touch: 56px;

    /* Semantic Theme Custom Properties */
    --court-player-text: #ffffff;
    --rating-badge-bg: #00d1ff;
    --rating-badge-text: #00283a;
    --rating-value-color: #ffffff;
    --rating-value-opacity: 0.6;
    --win-badge-bg: #ffd700;
    --win-badge-text: #3d2e00;

    --status-active-bg: #1a3a2a;
    --status-active-text: #3cae67;
    --status-upcoming-bg: #1a2a3a;
    --status-upcoming-text: #5b9bd5;
    --status-paused-bg: #3a2a10;
    --status-paused-text: #d4a017;
    --status-finished-bg: #2a2a3a;
    --status-finished-text: #8a8aaa;
    --status-tournament-bg: #3a1a3a;
    --status-tournament-text: #d565e0;
    --status-passed-bg: #3a2024;
    --status-passed-text: #d47a8a;

    --mode-peg-bg: #3a2c10;
    --mode-peg-text: #e0a91a;
    --mode-smart-bg: #10243a;
    --mode-smart-text: #5b9bd5;

    --tag-rating-bg: #10243a;
    --tag-rating-text: #5b9bd5;
    --tag-provisional-bg: #3a2c10;
    --tag-provisional-text: #e0a91a;
    --tag-established-bg: #1a3a2a;
    --tag-established-text: #3cae67;
    --win-chip-bg: #1a3a2a;
    --win-chip-text: #3cae67;
    --loss-chip-bg: #3a2024;
    --loss-chip-text: #d47a8a;

    --auth-error-bg: rgba(255,104,104,.12);
    --auth-error-text: #ff8d98;
    --auth-error-stroke: rgba(255,141,152,.35);

    --scrollbar-thumb: #34344d;
    --scrollbar-thumb-hover: #50506b;
}

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

html, * {
    scrollbar-color: var(--scrollbar-thumb) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 2px solid transparent; background-clip: padding-box; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); background-clip: padding-box; }

html {
    font-size: 133%;
    zoom: 0.9;
}

body {
    font-family: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace !important;
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, var(--glow-1), transparent 70%),
        radial-gradient(ellipse 70% 55% at 80% 85%, var(--glow-2), transparent 70%),
        var(--bg) !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--text);
    caret-color: transparent;
    min-height: 100dvh;
}

.auth-page {
    background:
        radial-gradient(ellipse 80% 60% at 50% 40%, var(--glow-1), transparent 70%),
        radial-gradient(ellipse 70% 55% at 80% 85%, var(--glow-2), transparent 70%),
        var(--bg) !important;
    background-repeat: no-repeat;
    font-family: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace !important;
}

.theme-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43.2px;
    height: 43.2px;
    padding: 0;
    border: 1px solid var(--stroke);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font: 700 0.95rem/1 "Manrope", "Segoe UI", sans-serif;
    transition: border-color .15s, background .15s, transform .15s;
}

.theme-switch:hover,
.theme-switch:focus-visible {
    border-color: var(--accent);
    background: var(--bg-accent);
    outline: none;
    transform: translateY(-1px);
}

/* View navigation badges (Sessions / Player Stats / Rankings) */
.view-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin: 0 0 22px;
}

.pill-link {
    display: inline-flex;
    align-items: center;
    font-size: .85rem;
    letter-spacing: .04em;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    color: var(--text-muted);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s, border-color .15s;
}

.pill-link:hover {
    border-color: var(--accent);
    color: var(--text);
}

.pill-link.pill-link--active {
    border-color: var(--accent);
    color: var(--text);
    background: var(--surface-2);
    font-weight: 700;
}

.auth-page > .theme-switch {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2;
}

.auth-logo img {
    width: 96px !important;
    height: 96px !important;
    object-fit: contain;
}

.auth-wordmark {
    display: flex;
    justify-content: center;
    margin: 4px auto 30px;
}

.auth-wordmark img {
    width: min(280px, 90%);
    height: 100px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
}

.auth-wordmark__image--light { display: none; }
[data-theme="light"] .auth-wordmark__image--dark { display: none; }
[data-theme="light"] .auth-wordmark__image--light { display: block; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .auth-wordmark__image--dark { display: none; }
    :root:not([data-theme]) .auth-wordmark__image--light { display: block; }
}

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 0 auto 30px;
}

.auth-brand__mark {
    width: 58px;
    height: 58px;
    object-fit: contain;
    flex-shrink: 0;
}

.auth-brand__mark--dark { display: none; }

[data-theme="light"] .auth-brand__mark--light { display: none; }
[data-theme="light"] .auth-brand__mark--dark { display: block; }

[data-theme="light"] .brand-mark { content: url('/assets/courtly-mark-dark.png'); }

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .auth-brand__mark--light { display: none; }
    :root:not([data-theme]) .auth-brand__mark--dark { display: block; }
    :root:not([data-theme]) .brand-mark { content: url('/assets/courtly-mark-dark.png'); }
}

.auth-brand__word {
    font-family: "Arial Black", "Space Grotesk", "Manrope", sans-serif;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--text, #e4e4f0);
}

.auth-card {
    background: var(--surface) !important;
    border-color: var(--stroke) !important;
    box-shadow: var(--shadow-card) !important;
}

.auth-card h2 { color: var(--text) !important; }
.auth-card .sub, .auth-field label, .auth-footer, .auth-divider { color: var(--text-muted) !important; }
.auth-field input { background: var(--bg) !important; color: var(--text) !important; border-color: var(--stroke) !important; }
.auth-field input:focus { border-color: var(--court-cyan) !important; }
.auth-btn--primary { background: var(--court-blue) !important; }
.auth-footer a { color: var(--court-cyan) !important; }
.social-btn { background: var(--surface-2) !important; color: var(--text) !important; border-color: var(--stroke) !important; }
.auth-error { background: var(--auth-error-bg) !important; color: var(--auth-error-text) !important; border-color: var(--auth-error-stroke) !important; }

input,
textarea,
[contenteditable="true"] {
    caret-color: auto;
}

.session-header,
.courts-grid,
.waiting-list,
.session-controls {
    width: 100%;
}

/* Header */
.session-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    position: relative;
    gap: 10px;
    margin: 14px auto 14px;
    padding: 14px 18px;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.session-header__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

/* The brand keeps its size so the session name is what gives way. */
.session-header__left .app-brand { flex: 0 0 auto; }

.session-header__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2rem;
    font-weight: 800;
    font-family: "Space Grotesk", "Manrope", sans-serif;
    letter-spacing: 0.03em;
    color: var(--court-cyan);
    text-decoration: none;
    cursor: pointer;
}

.session-header__logo-img {
    width: 96px;
    height: 96px;
    object-fit: contain;
    display: block;
}

.session-header__logo-img--dark { display: none; }
[data-theme="light"] .session-header__logo-img--light { display: none; }
[data-theme="light"] .session-header__logo-img--dark { display: block; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .session-header__logo-img--light { display: none; }
    :root:not([data-theme]) .session-header__logo-img--dark { display: block; }
}

.session-header__logo:hover {
    color: var(--court-green);
}

.back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 700;
    transition: background 0.15s, transform 0.12s;
    flex-shrink: 0;
}

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

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

#courtly-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 16px;
}

#courtly-app > * {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.session-header__name {
    font-size: 1.45rem;
    font-weight: 700;
    /* Shrinks and ellipsizes rather than wrapping or pushing the header wider. */
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.session-header__tagline {
    margin: 0;
    color: var(--court-cyan);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.35;
    text-transform: uppercase;
    max-width: 145px;
}

.dashboard-brand-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-left: 10px;
    border-left: 1px solid var(--stroke);
    padding-left: 12px;
}

.dashboard-brand-copy strong {
    color: var(--court-cyan);
    font-size: .7rem;
    letter-spacing: .14em;
    line-height: 1.35;
}

.dashboard-brand-copy span {
    color: var(--text-muted);
    font-size: .72rem;
}

.sport-picker {
    display: grid;
    grid-template-columns: repeat(5, minmax(72px, 1fr));
    gap: 0;
    margin: 0 -2px 18px;
    padding: 14px 0 10px;
    border-top: 1px solid var(--stroke);
    border-bottom: 1px solid var(--stroke);
}

.sport-picker__label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--text-muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .15em;
    line-height: 1.5;
    text-transform: uppercase;
    padding: 0 12px;
    border-right: 1px solid var(--stroke);
}

.sport-picker__label span { display: block; }

.sport-picker__label i {
    display: block;
    width: 22px;
    height: 1px;
    margin-top: 10px;
    background: var(--court-cyan);
}

.sport-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: 76px;
    padding: 6px 4px;
    border: 0;
    border-left: 1px solid var(--stroke);
    border-radius: 0;
    background: transparent;
    color: rgba(245,249,255,.88);
    cursor: pointer;
    font: 800 .6rem/1.15 "Manrope", "Segoe UI", sans-serif;
    letter-spacing: .11em;
    text-transform: uppercase;
    transition: border-color .15s, background .15s, color .15s, transform .15s;
}

.sport-option svg,
.sport-option .sport-icon {
    width: 34px;
    height: 34px;
    display: block;
}

.sport-option .sport-icon {
    background: #fff;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    -webkit-mask-mode: luminance;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    mask-mode: luminance;
}

.sport-icon--badminton { -webkit-mask-image: url('/assets/badminton.png'); mask-image: url('/assets/badminton.png'); }
.sport-icon--tennis { -webkit-mask-image: url('/assets/tennis.png'); mask-image: url('/assets/tennis.png'); }
.sport-icon--pickleball { -webkit-mask-image: url('/assets/pickleball.png'); mask-image: url('/assets/pickleball.png'); }
.sport-icon--padel { -webkit-mask-image: url('/assets/padel.png'); mask-image: url('/assets/padel.png'); }
.sport-icon--squash { -webkit-mask-image: url('/assets/squash.png'); mask-image: url('/assets/squash.png'); }

.sport-option svg {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.sport-option:hover,
.sport-option:focus-visible {
    color: var(--text);
    background: rgba(147, 197, 253, .08);
    outline: none;
}

.sport-option.is-selected {
    border-color: transparent;
    background: rgba(147, 197, 253, .12);
    color: #fff;
    box-shadow: inset 0 0 0 1px var(--court-cyan);
    transform: none;
}

.sport-option.is-selected svg { color: #fff; }

.sport-option--more { color: var(--text-muted); }
.sport-option--more:hover,
.sport-option--more:focus-visible { color: var(--court-cyan); }

.session-header__timer {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--text);
}

.court-count {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.court-count__controls {
    display: inline-flex;
    gap: 3px;
}

.court-count__button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--stroke);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font: 800 1rem/1 inherit;
}

.court-count__button:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.session-header__badge {
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.session-header__badge--active { background: var(--status-active-bg); color: var(--status-active-text); }
.session-header__badge--upcoming { background: var(--status-upcoming-bg); color: var(--status-upcoming-text); }
.session-header__badge--paused { background: var(--status-paused-bg); color: var(--status-paused-text); }
.session-header__badge--finished { background: var(--status-finished-bg); color: var(--status-finished-text); }
.session-header__badge--tournament { background: var(--status-tournament-bg); color: var(--status-tournament-text); }

.standings-panel { margin-top: 16px; }
.standings-panel__row { cursor: default; }

/* Subtle connection status dot next to the status badge */
.connection-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 0;
    cursor: default;
}
.connection-dot--connecting {
    background: #d4a017;
    animation: connection-pulse 1.4s ease-in-out infinite;
}
.connection-dot--offline {
    background: var(--accent);
    animation: connection-pulse 1.4s ease-in-out infinite;
}
@keyframes connection-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* Offline mode control — sits left of the theme toggle. A simple line icon
   for the chosen mode (banned = forced offline, network = forced online,
   refresh = automatic); click opens a menu to switch between them. Border
   color/pulse reflects whether it's actually queuing or awaiting a sync
   decision right now. */
.offline-control {
    position: relative;
    display: inline-flex;
}
.offline-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--stroke);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
}
.offline-icon-svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.offline-indicator--offline {
    border-color: var(--accent);
    color: var(--accent);
    animation: connection-pulse 1.4s ease-in-out infinite;
}
.offline-indicator--pending {
    border-color: #d4a017;
    color: #d4a017;
    animation: connection-pulse 1.4s ease-in-out infinite;
}

.offline-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    min-width: 140px;
    padding: 6px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: 10px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}
.offline-menu__item {
    padding: 8px 10px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}
.offline-menu__item:hover { background: var(--surface-2); }
.offline-menu__item--active { color: var(--accent); }

.offline-queue-list {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    max-height: 160px;
    overflow-y: auto;
    text-align: left;
    font-size: 0.85rem;
    color: var(--text-muted);
    border: 1px solid var(--stroke);
    border-radius: 8px;
}
.offline-queue-list li {
    padding: 8px 12px;
    border-bottom: 1px solid var(--stroke);
}
.offline-queue-list li:last-child { border-bottom: none; }

.confirm-icon--sync { background: #1f3a52; color: #4da6ff; }

/* Error banner for permanent auth failures (e.g. session owned by another account) */
.sync-error-banner {
    margin: 12px 16px 0;
    padding: 10px 14px;
    border: 1px solid var(--accent);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Courts toolbar — add-court plus button pinned to the top right of the courts box */
.courts-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 auto 10px;
    padding: 0 12px 10px;
    border-bottom: 1px solid var(--stroke);
    width: 100%;
}

.courts-toolbar__actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.court-toolbar-btn {
    height: 48px;
    padding: 0 20px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font: 800 0.95rem/1 inherit;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.court-toolbar-btn:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: scale(1.05);
}

.court-toolbar-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.courts-toolbar__actions .mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Courts grid */
.courts-grid {
    display: grid;
    gap: 14px;
    margin: 0 auto 14px;
    padding: 0 12px;
    width: 100%;
}

@media (min-width: 1024px) {
    .courts-grid { grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); }
    .courts-1 { grid-template-columns: minmax(480px, 760px); justify-content: center; }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .courts-grid { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
}

@media (max-width: 639px) {
    .courts-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0 8px 14px; padding: 0 4px; }
}

/* Court card — no container, courts shown directly */
.court-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    min-width: 0;
    width: 100%;
}

/* Court header: name + status */
.court-card__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.court-card__number {
    font-size: 1.6rem;
    font-weight: 800;
    font-family: "Space Grotesk", "Manrope", sans-serif;
    letter-spacing: 0.03em;
    color: var(--text);
}

.court-card__number--editable {
    cursor: pointer;
    text-decoration: underline dotted transparent;
    text-underline-offset: 4px;
    transition: color .15s, text-decoration-color .15s;
}

.court-card__number--editable:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
}

.court-card__status {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--surface-2);
}

.court-card__status--playing { color: #3cae67; }
.court-card__status--available { color: var(--text-muted); }

.court-clear-btn {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--surface-2);
    color: #ffb020;
    border: 1px solid rgba(255, 176, 32, .35);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.court-clear-btn:hover:not(:disabled) {
    background: #ffb020;
    border-color: #ffb020;
    color: #1a1a2a;
}

.court-clear-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.court-clear-btn.is-busy {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}

.court-clear-btn.is-busy::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}

.court-card__head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.court-remove-btn {
    width: 34px;
    height: 34px;
    border: 1px solid var(--stroke);
    border-radius: 50%;
    background: var(--surface-2);
    color: var(--text-muted);
    cursor: pointer;
    /* Explicit longhands: the old `font: 700 1.1rem/1 inherit` shorthand was
       invalid (inherit can't be a shorthand component), so it was dropped and
       the glyph fell back to an inherited size. Larger now, so the × reads at
       the same weight as the court's other controls. */
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

.court-remove-btn:hover:not(:disabled) {
    background: #ff2d55;
    border-color: #ff2d55;
    color: #fff;
    transform: scale(1.08);
}

.court-remove-btn:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

/* Court body: dark surface, colors driven by --court-* vars set per sport */
.court-card__body {
    position: relative;
    background: var(--court-surface, #161626);
    border: 1px solid var(--court-line, var(--stroke));
    border-radius: 0;
    box-shadow: var(--shadow-card), var(--court-wall-shadow, none);
    padding: 14px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

/* Court lines overlay — removed: only the court border remains */
.court-card__lines {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: var(--court-zone-bands, none);
}

/* Center line (horizontal) */
.court-card__lines::before {
    content: '';
    position: absolute;
    left: var(--court-baseline-inset, 12%);
    right: var(--court-baseline-inset, 12%);
    top: 50%;
    height: 2px;
    background: var(--court-line, var(--stroke));
    opacity: var(--court-line-opacity, 1);
    transform: translateY(-50%);
}

/* Service line (vertical) */
.court-card__lines::after {
    content: '';
    position: absolute;
    left: 50%;
    top: var(--court-sideline-inset, 8%);
    bottom: var(--court-sideline-inset, 8%);
    width: 2px;
    background: var(--court-line, var(--stroke));
    opacity: var(--court-line-opacity, 1);
    transform: translateX(-50%);
}

/* Sport-specific court coloring and line styling */
.court-card--badminton {
    --court-surface: rgba(22, 22, 38, 0.5);
    --court-surface-empty: rgba(26, 26, 42, 0.5);
    --court-line: var(--stroke);
}

.court-card--tennis {
    --court-surface: #1c5c3c;
    --court-surface-empty: #1a5236;
    --court-line: #f2f7f0;
    --court-line-opacity: 0.85;
    --court-baseline-inset: 6%;
    --court-sideline-inset: 10%;
}

.court-card--pickleball {
    --court-surface: #1b4d6b;
    --court-surface-empty: #1a4762;
    --court-line: #f4d35e;
    --court-baseline-inset: 8%;
    --court-sideline-inset: 6%;
    --court-zone-bands: linear-gradient(to right, transparent 0%, transparent calc(50% - 15%), rgba(244, 211, 94, 0.14) calc(50% - 15%), rgba(244, 211, 94, 0.14) calc(50% + 15%), transparent calc(50% + 15%));
}

.court-card--padel {
    --court-surface: #0d6b6e;
    --court-surface-empty: #0c6265;
    --court-line: #eafffd;
    --court-line-opacity: 0.9;
    --court-baseline-inset: 4%;
    --court-sideline-inset: 10%;
    --court-wall-shadow: inset 0 0 0 3px rgba(234, 255, 253, 0.18);
}

.court-card--squash {
    --court-surface: #7a3232;
    --court-surface-empty: #712d2d;
    --court-line: #ffffff;
    --court-baseline-inset: 4%;
    --court-sideline-inset: 30%;
}

/* Ensure court content sits above the lines */
.court-card__court,
.court-card__divider,
.btn-win {
    position: relative;
    z-index: 2;
}

/* Court layout: two sides with VS in the middle */
.court-card__court {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.court-card__side {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.15s, opacity 0.15s;
}

.court-card__side:hover { background: rgba(255, 255, 255, 0.05); }

.court-card__side--locked {
    pointer-events: none;
    opacity: 0.55;
}

.court-card__body--empty {
    flex-direction: column;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    background: var(--court-surface-empty, #1a1a2a);
    border: 1px solid var(--court-line, var(--stroke));
    border-radius: 0;
}

.court-card__body--drop {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent) inset;
}

.court-card__body--picked {
    border-color: var(--accent);
    border-style: dashed;
    box-shadow: 0 0 0 2px var(--accent) inset;
    cursor: copy;
}

/* "Selecting teams…" overlay shown while the server computes the next matchup */
.court-card__selecting {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--court-surface-empty, rgba(26, 26, 42, .94));
    pointer-events: none;
}
.court-card__selecting-ring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 3px solid var(--accent, #7c5cff);
    border-top-color: transparent;
    animation: courtly-selecting-spin .8s linear infinite;
}
.court-card__selecting-text {
    color: var(--text-muted);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
}
@keyframes courtly-selecting-spin {
    to { transform: rotate(360deg); }
}

.court-card__celebration { position: absolute; inset: 0; z-index: 8; overflow: hidden; pointer-events: none; }
.court-card__celebration strong {
    position: absolute; left: var(--origin-x); top: var(--origin-y);
    transform: translate(-50%, -50%) scale(.7); color: #fff7bf;
    font-size: 1.25rem; letter-spacing: .08em;
    text-shadow: 0 0 8px #ffad00, 0 0 18px #ff4200;
    animation: celebration-label .85s ease-out both;
}
.court-card__confetti {
    position: absolute; left: var(--origin-x); top: var(--origin-y);
    width: 7px; height: 14px; border-radius: 1px;
    background: var(--confetti-color, #ffd166);
    box-shadow: 0 0 3px rgba(255,255,255,.55);
    animation: confetti-firework 1.15s cubic-bezier(.15,.75,.3,1) both;
    animation-delay: calc(var(--particle) * 10ms);
}
.court-card__confetti:nth-child(3n) { --confetti-color: #ff5d73; }
.court-card__confetti:nth-child(3n + 1) { --confetti-color: #54e0ff; }
.court-card__confetti:nth-child(3n + 2) { --confetti-color: #ffe66d; }
.court-card__confetti:nth-child(1) { --dx: -92px; --dy: -42px; --rot: -130deg; }
.court-card__confetti:nth-child(2) { --dx: -72px; --dy: -76px; --rot: -95deg; }
.court-card__confetti:nth-child(3) { --dx: -42px; --dy: -102px; --rot: -65deg; }
.court-card__confetti:nth-child(4) { --dx: -10px; --dy: -112px; --rot: -20deg; }
.court-card__confetti:nth-child(5) { --dx: 28px; --dy: -108px; --rot: 25deg; }
.court-card__confetti:nth-child(6) { --dx: 62px; --dy: -82px; --rot: 70deg; }
.court-card__confetti:nth-child(7) { --dx: 92px; --dy: -45px; --rot: 115deg; }
.court-card__confetti:nth-child(8) { --dx: -108px; --dy: 4px; --rot: -155deg; }
.court-card__confetti:nth-child(9) { --dx: -74px; --dy: 36px; --rot: -105deg; }
.court-card__confetti:nth-child(10) { --dx: -40px; --dy: 62px; --rot: -65deg; }
.court-card__confetti:nth-child(11) { --dx: 38px; --dy: 62px; --rot: 65deg; }
.court-card__confetti:nth-child(12) { --dx: 76px; --dy: 35px; --rot: 105deg; }
.court-card__confetti:nth-child(13) { --dx: 108px; --dy: 4px; --rot: 155deg; }
.court-card__confetti:nth-child(14) { --dx: -64px; --dy: -18px; --rot: -80deg; }
.court-card__confetti:nth-child(15) { --dx: 66px; --dy: -20px; --rot: 80deg; }
.court-card__confetti:nth-child(16) { --dx: -22px; --dy: 92px; --rot: -25deg; }
.court-card__confetti:nth-child(17) { --dx: 22px; --dy: 94px; --rot: 25deg; }
.court-card__confetti:nth-child(18) { --dx: 0; --dy: -125px; --rot: 0deg; }
.court-card__confetti:nth-child(19) { --dx: -118px; --dy: -70px; --rot: -180deg; }
.court-card__confetti:nth-child(20) { --dx: 118px; --dy: -70px; --rot: 180deg; }
.court-card__confetti:nth-child(21) { --dx: -120px; --dy: 60px; --rot: -210deg; }
.court-card__confetti:nth-child(22) { --dx: 120px; --dy: 60px; --rot: 210deg; }
.court-card__confetti:nth-child(23) { --dx: -55px; --dy: -135px; --rot: -120deg; }
.court-card__confetti:nth-child(24) { --dx: 55px; --dy: -135px; --rot: 120deg; }
.court-card__confetti:nth-child(25) { --dx: -88px; --dy: 100px; --rot: -240deg; }
.court-card__confetti:nth-child(26) { --dx: 88px; --dy: 100px; --rot: 240deg; }
.court-card__confetti:nth-child(27) { --dx: -18px; --dy: 135px; --rot: -45deg; }
.court-card__confetti:nth-child(28) { --dx: 18px; --dy: 135px; --rot: 45deg; }
@keyframes confetti-firework {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
    to { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.9) rotate(var(--rot)); }
}
@keyframes celebration-label {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
    25% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.court-empty-text {
    color: var(--text-muted);
    font-size: 1.15rem;
    font-weight: 700;
}

/* Floating centered message over an empty court */
.court-card__empty {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    pointer-events: none;
}

.court-card__empty .court-empty-text {
    text-align: center;
}

.court-card__empty .fill-courts-btn {
    pointer-events: auto;
}

/* Individual player box */
.court-card__player-box {
    flex: 1;
    min-width: 0;
    padding: 16px 14px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 64px;
    position: relative;
}

.court-card__player-box--streak {
    background: #d97706;
    border: 2px solid #ffb000;
    box-sizing: border-box;
}

.court-card__player-box--team-1 {
    background: #5fb2fff0;
}

.court-card__player-box--team-2 {
    background: #32e28af5;
}

.court-card__player-box--drop-target {
    outline: 3px dashed var(--accent-2, #ff5da2);
    outline-offset: -4px;
    box-shadow: 0 0 10px rgba(255, 93, 162, .35) inset;
}

.court-card__player-box--picked {
    outline: 2px dashed var(--accent, #7c5cff);
    outline-offset: -3px;
    cursor: copy;
}

/* Pending (court not yet full) — grayed-out player preview */
.court-card__pending {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.court-card__pending-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.court-card__player-box--pending {
    background: var(--surface-2, #e8edf1);
    border: 1px dashed var(--stroke, #b9c4cc);
    min-height: 48px;
}

.court-card__player-box--pending .court-card__player {
    color: var(--text-muted);
}

.court-card__player-box--pending .court-card__rating {
    background: var(--rating-badge-bg);
    color: var(--rating-badge-text);
}

.court-card__player-box--pending-empty {
    opacity: 0.55;
}

.court-card__player--placeholder {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--text-muted);
}

.court-card__player {
    color: var(--court-player-text, var(--text));
    font-size: 1.35rem;
    font-weight: 800;
    font-family: "Manrope", sans-serif;
    letter-spacing: 0.01em;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    line-height: 1.2;
}

.gender-dot {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 5px 2px 0;
    vertical-align: middle;
    background-color: currentColor;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.85));
}

.gender-dot--male {
    color: var(--text);
    -webkit-mask-image: url('../assets/icons/gender-male.svg');
    mask-image: url('../assets/icons/gender-male.svg');
}
.gender-dot--female {
    color: var(--text);
    -webkit-mask-image: url('../assets/icons/gender-female.svg');
    mask-image: url('../assets/icons/gender-female.svg');
}
.gender-dot--missing {
    color: var(--text-muted);
    -webkit-mask-image: url('../assets/icons/gender-unknown.svg');
    mask-image: url('../assets/icons/gender-unknown.svg');
}

.court-card__player-box .gender-dot {
    position: absolute;
    left: 6px;
    top: 6px;
    margin: 0;
}

.player-card .gender-dot {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 13px;
    height: 13px;
    margin: 0;
}

.court-card__player-meta {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-height: 16px;
}

/* Individual win tally — badge on the edge of the player box */
.court-card__win {
    font-style: normal;
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--win-badge-bg);
    color: var(--win-badge-text);
    line-height: 1.3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Winning-streak flame (2+ consecutive wins) — gold badge */
.court-card__streak {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 800;
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--win-badge-bg);
    color: var(--win-badge-text);
    line-height: 1.3;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.court-card__streak::before {
    content: '🔥 ';
}

/* Individual rating badge (1-100) — left edge of the player box */
.court-card__rating {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    background: transparent;
    color: var(--rating-value-color);
    line-height: 1;
    box-shadow: none;
}

.court-card__divider {
    display: flex;
    align-items: center;
    justify-content: center;
}

.court-card__divider span {
    background: #252540;
    color: var(--accent);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 8px 22px;
    border-radius: 999px;
}

/* WIN buttons — under each team */
.btn-win {
    width: 100%;
    min-height: 44px;
    border: 1px solid;
    border-radius: 4px;
    padding: 10px 14px;
    background: transparent;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease, opacity 0.12s ease;
    position: relative;
    z-index: 2;
    opacity: 0.5;
}

.btn-win:hover {
    opacity: 0.75;
}

.btn-win--team-1 { color: #0084ff; border-color: #0084ff; }
.btn-win--team-2 { color: #00c764; border-color: #00c764; }
.btn-win--close { color: #f59e0b; border-color: #f59e0b; }

/* Solid matte while pressed */
.btn-win:active {
    color: #ffffff;
}
.btn-win--team-1:active { background: #0084ff; border-color: #0084ff; }
.btn-win--team-2:active { background: #00c764; border-color: #00c764; }
.btn-win--close:active { background: #f59e0b; border-color: #f59e0b; }

/* Solid matte while a result is being submitted */
.btn-win.is-submitting {
    color: transparent;
    position: relative;
    min-width: 44px;
    min-height: 44px;
}
.btn-win--team-1.is-submitting { background: #0084ff; border-color: #0084ff; }
.btn-win--team-2.is-submitting { background: #00c764; border-color: #00c764; }
.btn-win--close.is-submitting { background: #f59e0b; border-color: #f59e0b; }

.btn-win.is-submitting::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

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

/* Only one winner: the other team's button is locked out */
.btn-win:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* Waiting list */
.waiting-list {
    margin: 0 auto 14px;
    padding: 13px 16px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
}

.match-history {
    margin: 18px 0 0;
    border: 1px solid var(--stroke);
    background: var(--surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.match-history__summary {
    cursor: pointer;
    list-style: none;
    padding: 13px 16px;
    color: var(--text);
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}
.match-history__summary::-webkit-details-marker { display: none; }

.match-history__summary-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.match-history__summary-label::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--accent);
    transform: rotate(45deg);
}

.match-history__summary-count {
    margin-left: auto;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--stroke);
    padding: 3px 10px;
    border-radius: 999px;
}

.match-history__summary::after {
    content: '▾';
    color: var(--text-muted);
    font-size: .9rem;
    transition: transform .18s ease;
}
.match-history[open] .match-history__summary::after { transform: rotate(180deg); }

.match-history__search-wrap { padding: 0 16px 12px; }
.match-history__search {
    width: 100%;
    padding: 9px 14px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font: 13px/1.4 inherit;
}
.match-history__search:focus { border-color: var(--court-cyan); outline: none; }
.match-history__search::placeholder { color: var(--text-muted); }

.match-history__list {
    max-height: 320px;
    overflow-y: auto;
    padding: 0 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.match-history__match {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: var(--surface-2);
}

.match-history__meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 0 0 auto;
    min-width: 56px;
    padding-right: 12px;
    border-right: 1px solid var(--stroke);
}

.match-history__game {
    font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
}

.match-history__court {
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.match-history__teams {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.match-history__team {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 8px;
    background: var(--bg);
    border: 1px solid transparent;
}

.match-history__team--win {
    background: linear-gradient(90deg, rgba(0, 199, 100, .16), rgba(0, 199, 100, .04));
    border-color: rgba(0, 199, 100, .35);
}

.match-history__team-name {
    font-weight: 700;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.match-history__team-rating {
    margin-left: auto;
    font-size: .72rem;
    font-weight: 800;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.match-history__badge {
    flex-shrink: 0;
    font-size: .6rem;
    font-weight: 900;
    letter-spacing: .08em;
    color: #00c764;
    background: rgba(0, 199, 100, .18);
    padding: 3px 8px;
    border-radius: 999px;
}

.match-history__feedback {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding-left: 12px;
    border-left: 1px solid var(--stroke);
}

.match-history__feedback-label {
    font-size: .58rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.fb-btn {
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-muted);
    font: 700 .6rem/1 inherit;
    letter-spacing: .04em;
    padding: 5px 9px;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}

.fb-btn:hover { color: var(--text); border-color: var(--text-muted); }
.fb-btn--active { color: #fff; }
.fb-btn--poor.fb-btn--active { background: #ff2d55; border-color: #ff2d55; }
.fb-btn--good.fb-btn--active { background: #f59e0b; border-color: #f59e0b; }
.fb-btn--great.fb-btn--active { background: #00c764; border-color: #00c764; }

.mode-switch--insights { color: var(--accent); }

.insights-summary { font-size: 1rem; line-height: 1.55; margin: 0 0 14px; }
.insights-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.insights-item { padding: 10px 12px; border: 1px solid var(--stroke); border-radius: 8px; background: var(--surface-2); }
.insights-item__issue { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 4px; }
.insights-item__suggestion { display: block; font-size: .82rem; color: var(--text-muted); }
.insights-weights { margin-bottom: 14px; }
.insights-weights h4 { margin: 0 0 8px; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.insights-weight { display: flex; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid var(--stroke); font-size: .85rem; font-variant-numeric: tabular-nums; }
.insights-weights__note { margin: 8px 0 0; font-size: .74rem; color: var(--text-muted); }
.insights-source { margin: 14px 0 0; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }

.match-history__empty {
    margin: 0;
    padding: 18px 16px;
    color: var(--text-muted);
    font-size: .85rem;
    text-align: center;
}

.waiting-list__title {
    margin-bottom: 10px;
    color: var(--accent);
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.waiting-list__cards {
    overflow-x: auto;
}

.waiting-list__row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.waiting-list__empty {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.player-card {
    width: 260px;
    flex: 0 0 260px;
    padding: 10px 12px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 8px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: var(--surface-2);
    background: color-mix(in srgb, var(--surface-2) 50%, transparent);
    position: relative;
    overflow: hidden;
}

.player-card:not(:last-child) {
    margin-right: 22px;
}

/* Arrow between queued players */
.player-card:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    color: var(--accent);
    font-weight: 700;
    z-index: 1;
    pointer-events: none;
}

.player-card__col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.player-card__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}

.player-card__name {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    max-width: 100%;
    min-width: 0;
}

.player-card__name .gender-dot { margin: 0; }

.name-label {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.player-card__rating {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.player-card__rating .rating-value {
    font-size: 1rem;
}

.player-card__wins {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.player-card__sitouts {
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Small pause button beside a waiting player's name */
.player-card__pause {
    border: none;
    background: #2a2a44;
    color: var(--text-muted);
    border-radius: 8px;
    font-size: 1.6rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.player-card__pause:hover {
    background: #3a2040;
    color: var(--accent);
}

/* Paused player in the NEXT UP list */
.player-card--paused {
    opacity: 0.6;
}

.player-card--paused .player-card__name {
    color: var(--text-muted);
}

.player-card--paused .player-card__pause:hover {
    background: #2a3a2a;
    color: #3cae67;
}

/* Remove-from-session button beside the pause button */
.player-card__remove {
    border: none;
    background: #2a2a44;
    color: var(--text-muted);
    border-radius: 8px;
    font-size: 1.4rem;
    line-height: 1;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.player-card__remove:hover {
    background: #3a2024;
    color: #d47a8a;
}

/* The next 4 waiting players — next game on court */
.player-card--next {
    border-color: #00c764;
    animation: courtly-glow 1.8s ease-in-out infinite;
}

/* A waiting player tapped on touch — awaiting a court/player drop */
.player-card--picked {
    box-shadow: 0 0 0 2px var(--accent, #7c5cff) inset;
    border-color: var(--accent, #7c5cff);
}

.waiting-list__pick-hint {
    margin: 2px 0 10px;
    color: var(--text-muted);
    font-size: .95rem;
}

.waiting-list__pick-hint strong {
    color: var(--accent-2, #ff5da2);
}

/* Draggable waiting cards: disable native touch panning so pointer drag works */
.player-card--draggable {
    touch-action: none;
}

/* Floating clone of the dragged player card (matches the native drag image) */
.touch-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    pointer-events: none;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
}

.touch-drag-ghost .player-card {
    opacity: 0.85;
    border-color: var(--accent, #7c5cff);
}

@keyframes courtly-glow {
    0%, 100% {
        box-shadow: 0 0 6px rgba(0, 199, 100, 0.4), 0 0 0 2px rgba(0, 199, 100, 0.3);
    }
    50% {
        box-shadow: 0 0 10px rgba(0, 199, 100, 0.85), 0 0 0 2px rgba(0, 199, 100, 0.5);
    }
}

/* Controls */
.session-controls {
    margin: 0 auto;
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 639px) {
    .session-controls { padding: 10px 8px; gap: 6px; }
    .session-controls .btn { font-size: 0.82rem; padding: 10px 14px; }
    .session-header { padding: 10px 12px; gap: 6px; margin: 8px auto; }
    .session-header__name { font-size: 1.05rem; }
    .session-header__tagline,
    .dashboard-brand-copy { display: none; }
    .sport-picker { grid-template-columns: repeat(5, 78px); overflow-x: auto; }
    .court-card__number { font-size: 1.15rem; }
    .court-card__player { font-size: 1rem; }
    .court-card__body { padding: 10px 8px; gap: 6px; }
    .court-card__player-box { padding: 10px 8px; min-height: 42px; }
    .court-card__side { gap: 6px; }
    .court-card__divider span { font-size: 0.8rem; padding: 4px 12px; }
    .waiting-list { padding: 10px 12px; }
    .player-card { width: 232px; flex: 0 0 232px; padding: 8px 10px; }
    .player-card__name { font-size: 0.9rem; }
}

.btn {
    min-height: var(--min-touch);
    border: none;
    border-radius: 10px;
    padding: 10px 18px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--shadow-soft);
    transition: transform 0.12s ease, filter 0.12s ease, opacity 0.12s ease;
}

.btn:hover { filter: brightness(1.03); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn--primary { background: var(--accent); color: #fff; }
.btn--secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--stroke); }
.btn--warning { background: #d4860b; color: #fff; }
.btn--danger { background: #c0392b; color: #fff; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    overflow: hidden;
    overscroll-behavior: contain;
    touch-action: none;
}

.modal {
    min-width: 320px;
    max-width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--stroke);
    border-radius: var(--radius);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.4);
}

.modal h3 {
    margin-bottom: 12px;
}

.modal--wide {
    width: min(560px, 92vw);
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

/* Players dialog — fixed height, list grows to fill */
.modal--players {
    height: 60vh;
}

.modal--players .add-section {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal--players .add-section__existing {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.modal--players .existing-list {
    flex: 1 1 auto;
    max-height: none;
    min-height: 0;
    align-content: start;
}

/* Styled confirmation dialog */
.modal--confirm {
    width: min(380px, 90vw);
    text-align: center;
}

/* Empty-court decision prompt — wider so all three actions stay on one row */
.modal--empty-court {
    width: max(50vw, 380px);
    max-width: 92vw;
}

.confirm-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #3a1020;
    color: var(--accent);
    font-size: 1.5rem;
    font-weight: 800;
}

.modal--confirm h3 {
    margin-bottom: 8px;
}

.confirm-note {
    margin-bottom: 18px;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal__head h3 {
    margin-bottom: 0;
}

.modal__close {
    border: none;
    background: transparent;
    font-size: 1.1rem;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
}

/* Manage players list */
.manage-list {
    margin-top: 12px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Add players section */
.add-section {
    border-bottom: 1px solid var(--stroke);
    padding-bottom: 14px;
    margin-bottom: 14px;
}

.add-section__new {
    display: flex;
    gap: 8px;
    align-items: center;
}

.add-section__new .modal__input {
    flex: 1;
    margin-bottom: 0;
}

.add-section__label {
    margin: 12px 0 6px;
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.existing-list {
    max-height: 180px;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
}

.existing-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 10px;
    background: var(--surface-2);
    border: 1px solid #e2ebe7;
    border-radius: 9px;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
    user-select: none;
}

.existing-item:hover { border-color: var(--accent); background: var(--surface); }

.existing-item--selected {
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 2px var(--accent) inset;
}

.manual-assignment__player {
    width: 100%;
    color: var(--text);
    font: inherit;
    text-align: left;
}

.modal--manual-assign {
    width: min(640px, 92vw);
}

.modal--manual-assign .add-section__label {
    line-height: 1.5;
    margin: 4px 0 12px;
}

.manual-assign__list {
    gap: 10px;
    margin-bottom: 16px;
}

.manual-teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.manual-team {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--stroke);
    border-radius: 12px;
    background: var(--surface-2);
}

.manual-team__head {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
}

.manual-team--1 .manual-team__head { color: #5b9bd5; }
.manual-team--2 .manual-team__head { color: #5ee49a; }

.manual-team__slot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--stroke);
    border-radius: 10px;
    background: var(--surface);
    cursor: grab;
    transition: border-color 0.12s, background 0.12s, opacity 0.12s;
}

.manual-team__slot:hover { border-color: var(--accent); }
.manual-team__slot--dragging { opacity: 0.4; }
.manual-team__slot--over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent) inset;
}
.manual-team__slot--tapped { border-color: var(--accent); }

.manual-team__name {
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.manual-team__rating {
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 1.05rem;
}

.rank-icon {
    display: inline-block;
    flex: none;
    box-sizing: border-box;
    width: 28px;
    height: 28px;
    margin: 0;
    vertical-align: middle;
    border-radius: 50%;
}

.rank-icon img {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

.rating-value {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1;
    color: var(--rating-value-color);
    opacity: var(--rating-value-opacity);
}

@media (max-width: 767px) {
    .rating-value { font-size: 1.5rem; }
}

.existing-item--dragging { opacity: 0.4; }

.existing-item--drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent) inset;
    background: var(--surface);
}

.teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin: 10px 0;
}

.team-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px dashed var(--stroke, #174378);
    border-radius: 10px;
}

.team-card__player { cursor: grab; }
.team-card__player:active { cursor: grabbing; }

.team-card__handle {
    opacity: 0.4;
    font-size: 0.85rem;
    margin-right: 2px;
}

.court-card__scores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
}

.court-card__score-input {
    width: 56px;
    text-align: center;
    padding: 4px 6px;
    border-radius: 6px;
    border: 1px solid var(--stroke, #174378);
    background: var(--surface-2, transparent);
    color: inherit;
    font-weight: 700;
}

.court-card__score-sep { opacity: 0.6; font-weight: 700; }

.existing-item--added {
    opacity: 0.55;
    cursor: default;
}

.existing-item--added:hover {
    border-color: #2f9a58;
    background: var(--surface-2);
}

.existing-item__added-badge {
    font-size: 0.68rem;
    font-weight: 800;
    color: #2f9a58;
    flex-shrink: 0;
}

.existing-item input {
    width: 18px;
    height: 18px;
    accent-color: #2f9a58;
    flex-shrink: 0;
}

.existing-item__label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    cursor: pointer;
}

.existing-item__name {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 0.8rem;
    flex: 1;
    min-width: 0;
}

.existing-item__name .gender-dot { margin: 0; }

.existing-item__rating {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.existing-item__del {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 1rem;
    cursor: pointer;
    color: #c0392b;
    opacity: 0.6;
    transition: opacity 0.12s, background 0.12s;
}

.existing-item__del:hover { opacity: 1; background: #fdeeea; }

/* Confirm modal delete icon variant */
.confirm-icon--delete {
    background: #fdeeea;
    color: #c0392b;
}

/* Roster within the players dialog */
.roster {
    overflow-y: auto;
    max-height: 40vh;
}

.manage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    background: var(--surface-2);
    border-radius: 10px;
    flex-wrap: wrap;
}

.manage-row__info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.manage-row__name {
    font-weight: 800;
    font-size: 0.95rem;
}

.manage-row__status {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.manage-row__status--waiting { background: #e7f4ee; color: #0e6b3a; }
.manage-row__status--playing { background: #e0ebff; color: #174ea8; }
.manage-row__status--paused { background: #fff0cf; color: #8a5200; }
.manage-row__status--left { background: #e9ecef; color: #46515b; }

.manage-row__meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.manage-row__actions {
    display: flex;
    gap: 6px;
}

.manage-btn {
    min-height: 32px;
    padding: 4px 10px;
    border: 1px solid #cfdcd7;
    border-radius: 8px;
    background: #fff;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease;
}

.manage-btn:hover { background: #f0f5f2; }
.manage-btn--danger { border-color: #f3c9c0; color: #c0392b; }
.manage-btn--danger:hover { background: #fdeeea; }
.manage-btn--delete { border-color: #d1cccc; color: #555; }
.manage-btn--delete:hover { background: #fbf6f6; border-color: #c0392b; color: #c0392b; }
.manage-reset { border-color: #c9d9ef; color: #245b91; }
.manage-reset:hover { background: #edf5ff; border-color: #245b91; }

/* Delete confirmation icon */
.confirm-icon--delete {
    background: #fdf2f2;
    color: #555;
    font-size: 1.3rem;
}

.manage-empty {
    color: var(--text-muted);
    text-align: center;
    padding: 16px 0;
}

.modal__input {
    width: 100%;
    margin-bottom: 12px;
    padding: 11px;
    border: 1px solid #ccd8d3;
    border-radius: 10px;
    font-size: 0.96rem;
}

.modal__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 0.5rem;
}

/* ── Transition animations for Next Up queue ── */

/* Player entering the queue (fade in from court) */
.queue-enter-active {
    transition: all 0.4s ease;
}
.queue-enter-from {
    opacity: 0;
    transform: translateY(-12px) scale(0.92);
}

/* Player leaving the queue (fade out to court) */
.queue-leave-active {
    transition: all 0.3s ease;
    transition-delay: calc(var(--leave-order, 0) * 90ms);
    position: absolute;
}
.queue-leave-from {
    opacity: 1;
}
.queue-leave-to {
    opacity: 0;
    transform: scale(0.85);
}

/* Smooth movement of remaining cards when one leaves */
.queue-move {
    transition: transform 0.35s ease;
}

/* ── Court player fade animations ── */

/* Players appearing on court */
.court-fade-enter-active {
    transition: all 0.45s ease;
}
.court-fade-enter-from {
    opacity: 0;
    transform: scale(0.9);
}

/* Players leaving court (winner fade out) */
.court-fade-leave-active {
    transition: all 0.35s ease;
}
.court-fade-leave-to {
    opacity: 0;
    transform: scale(0.85);
}

/* ── Court population: players fade in one at a time ── */
.court-card__court .court-card__player-box {
    animation: court-pop-in .42s cubic-bezier(.22, .9, .35, 1) both;
}
.court-card__side--team-1 .court-card__player-box:nth-child(1) { animation-delay: 0ms; }
.court-card__side--team-1 .court-card__player-box:nth-child(2) { animation-delay: 110ms; }
.court-card__side--team-2 .court-card__player-box:nth-child(1) { animation-delay: 220ms; }
.court-card__side--team-2 .court-card__player-box:nth-child(2) { animation-delay: 330ms; }
@keyframes court-pop-in {
    from { opacity: 0; transform: translateY(10px) scale(.94); }
    to { opacity: 1; transform: none; }
}

/* ── Cyber Theme ─────────────────────────────────────────────────────── */

[data-theme="cyber"] {
    --bg: #04151f;
    --bg-accent: #0a2a38;
    --bg-overlay-1: rgba(4, 21, 31, .86);
    --bg-overlay-2: rgba(4, 21, 31, .94);
    --surface: rgba(6, 30, 40, .88);
    --surface-2: rgba(0, 229, 255, .14);
    --text: #d8f7ff;
    --text-muted: #7fb8c8;
    --accent: #00e5ff;
    --accent-2: #00ff9d;
    --stroke: rgba(0, 229, 255, .22);
    --glow-1: rgba(0, 229, 255, .20);
    --glow-2: rgba(0, 255, 157, .12);
    --court-deep-blue: #04151f;
    --court-blue: #00e5ff;
    --court-cyan: #7df3ff;
    --court-green: #00ff9d;
    --court-green-light: #7dffce;
    --rating-badge-bg: #00e5ff;
    --rating-badge-text: #003039;
    --win-badge-bg: #ffd700;
    --win-badge-text: #3d2e00;
    --scrollbar-thumb: #0e3b47;
    --scrollbar-thumb-hover: #155666;
}

/* ── Light Theme ─────────────────────────────────────────────────────── */

[data-theme="light"] {
    --bg: #ffffff;
    --bg-accent: #e2e8f0;
    --bg-overlay-1: #ffffff;
    --bg-overlay-2: #ffffff;
    --surface: rgba(255, 255, 255, 0.95);
    --surface-2: rgba(226, 232, 240, 0.8);
    --text: #0f172a;
    --text-muted: #475569;
    --accent: #6d4fff;
    --accent-2: #d61e7b;
    --stroke: rgba(15, 23, 42, 0.15);
    --shadow-card: 0 10px 28px rgba(0,0,0,.08);
    --shadow-soft: 0 4px 10px rgba(0,0,0,.05);

    --court-player-text: #0f172a;
    --rating-badge-bg: #d0f2fe;
    --rating-badge-text: #005470;
    --rating-value-color: #0f172a;
    --rating-value-opacity: 0.25;
    --win-badge-bg: #fef3c7;
    --win-badge-text: #92400e;

    --status-active-bg: #d7f6e2;
    --status-active-text: #0e6b3a;
    --status-upcoming-bg: #d9e8ff;
    --status-upcoming-text: #174ea8;
    --status-paused-bg: #ffefc8;
    --status-paused-text: #8a5200;
    --status-finished-bg: #e6ebf0;
    --status-finished-text: #46515b;
    --status-tournament-bg: #f5e6ff;
    --status-tournament-text: #7b1fa2;
    --status-passed-bg: #ffe3e6;
    --status-passed-text: #a81c2a;

    --mode-peg-bg: #ffefc8;
    --mode-peg-text: #8a5200;
    --mode-smart-bg: #d9e8ff;
    --mode-smart-text: #174ea8;

    --tag-rating-bg: #d9e8ff;
    --tag-rating-text: #174ea8;
    --tag-provisional-bg: #ffefc8;
    --tag-provisional-text: #8a5200;
    --tag-established-bg: #d7f6e2;
    --tag-established-text: #0e6b3a;
    --win-chip-bg: #d7f6e2;
    --win-chip-text: #0e6b3a;
    --loss-chip-bg: #ffe3e6;
    --loss-chip-text: #a81c2a;

    --auth-error-bg: #ffe3e6;
    --auth-error-text: #a81c2a;
    --auth-error-stroke: #fca5a5;

    --scrollbar-thumb: #cbd5e1;
    --scrollbar-thumb-hover: #94a3b8;

    --glow-1: rgba(99, 102, 241, .10);
    --glow-2: rgba(217, 70, 239, .06);
}

[data-theme="light"] body {
    font-family: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace;
}

[data-theme="light"] .court-card__body { background: #ffffff; }
[data-theme="light"] .court-card__body--empty { background: #f5f8f7; }
[data-theme="light"] .court-card__lines::before,
[data-theme="light"] .court-card__lines::after { background: #d7e1de; }
[data-theme="light"] .court-card__divider span { background: #f0f4f2; color: #8fa39b; }
[data-theme="light"] .player-card__pause { background: #dbe9e4; }
[data-theme="light"] .player-card__pause:hover { background: #ffefc8; color: #8a5200; }
[data-theme="light"] .player-card__remove { background: #f5e3e5; }
[data-theme="light"] .player-card__remove:hover { background: #f8d7da; color: #a81c2a; }

[data-theme="light"] .session-header__badge--active { background: var(--status-active-bg); color: var(--status-active-text); }
[data-theme="light"] .session-header__badge--upcoming { background: var(--status-upcoming-bg); color: var(--status-upcoming-text); }
[data-theme="light"] .session-header__badge--paused { background: var(--status-paused-bg); color: var(--status-paused-text); }
[data-theme="light"] .session-header__badge--finished { background: var(--status-finished-bg); color: var(--status-finished-text); }

[data-theme="light"] .brand-word,
[data-theme="light"] .auth-brand__word { color: #32405c; }

/* ── Rose Theme ──────────────────────────────────────────────────────── */

[data-theme="rose"] {
    --bg: #fff7fa;
    --bg-accent: #ffe1ea;
    --bg-overlay-1: rgba(255, 247, 250, .96);
    --bg-overlay-2: rgba(255, 247, 250, 1);
    --surface: rgba(255, 255, 255, .96);
    --surface-2: rgba(236, 72, 153, .10);
    --text: #3d1c2a;
    --text-muted: #a05f75;
    --accent: #ec4899;
    --accent-2: #10b981;
    --stroke: rgba(236, 72, 153, .20);
    --shadow-card: 0 10px 28px rgba(236, 72, 153, .10);
    --shadow-soft: 0 4px 10px rgba(236, 72, 153, .07);
    --glow-1: rgba(236, 72, 153, .12);
    --glow-2: rgba(16, 185, 129, .10);

    --court-deep-blue: #3d1c2a;
    --court-blue: #ec4899;
    --court-cyan: #0ea5e9;
    --court-green: #10b981;
    --court-green-light: #6ee7b7;

    --court-player-text: #3d1c2a;
    --rating-badge-bg: #fce7f3;
    --rating-badge-text: #9d174d;
    --rating-value-color: #3d1c2a;
    --rating-value-opacity: 0.25;
    --win-badge-bg: #d1fae5;
    --win-badge-text: #065f46;

    --status-active-bg: #d1fae5;
    --status-active-text: #047857;
    --status-upcoming-bg: #fce7f3;
    --status-upcoming-text: #be185d;
    --status-paused-bg: #ffefc8;
    --status-paused-text: #8a5200;
    --status-finished-bg: #f3e8ee;
    --status-finished-text: #6b4a58;
    --status-tournament-bg: #ede9fe;
    --status-tournament-text: #6d28d9;
    --status-passed-bg: #ffe4e6;
    --status-passed-text: #9f1239;

    --mode-peg-bg: #ffefc8;
    --mode-peg-text: #8a5200;
    --mode-smart-bg: #fce7f3;
    --mode-smart-text: #be185d;

    --tag-rating-bg: #fce7f3;
    --tag-rating-text: #be185d;
    --tag-provisional-bg: #ffefc8;
    --tag-provisional-text: #8a5200;
    --tag-established-bg: #d1fae5;
    --tag-established-text: #047857;
    --win-chip-bg: #d1fae5;
    --win-chip-text: #047857;
    --loss-chip-bg: #ffe4e6;
    --loss-chip-text: #9f1239;

    --auth-error-bg: #ffe4e6;
    --auth-error-text: #9f1239;
    --auth-error-stroke: #fda4af;

    --scrollbar-thumb: #f3c7d8;
    --scrollbar-thumb-hover: #e6a4bd;
}

/* ── Lavender Theme ──────────────────────────────────────────────────── */

[data-theme="lavender"] {
    --bg: #f8f7ff;
    --bg-accent: #e9e6ff;
    --bg-overlay-1: rgba(248, 247, 255, .96);
    --bg-overlay-2: rgba(248, 247, 255, 1);
    --surface: rgba(255, 255, 255, .96);
    --surface-2: rgba(124, 92, 255, .10);
    --text: #241d3d;
    --text-muted: #786f9c;
    --accent: #7c5cff;
    --accent-2: #3b82f6;
    --stroke: rgba(124, 92, 255, .20);
    --shadow-card: 0 10px 28px rgba(124, 92, 255, .10);
    --shadow-soft: 0 4px 10px rgba(124, 92, 255, .07);
    --glow-1: rgba(124, 92, 255, .12);
    --glow-2: rgba(59, 130, 246, .10);

    --court-deep-blue: #241d3d;
    --court-blue: #7c5cff;
    --court-cyan: #3b82f6;
    --court-green: #10b981;
    --court-green-light: #6ee7b7;

    --court-player-text: #241d3d;
    --rating-badge-bg: #ede9fe;
    --rating-badge-text: #5b21b6;
    --rating-value-color: #241d3d;
    --rating-value-opacity: 0.25;
    --win-badge-bg: #dbeafe;
    --win-badge-text: #1e40af;

    --status-active-bg: #d1fae5;
    --status-active-text: #047857;
    --status-upcoming-bg: #ede9fe;
    --status-upcoming-text: #6d28d9;
    --status-paused-bg: #ffefc8;
    --status-paused-text: #8a5200;
    --status-finished-bg: #e9e6ff;
    --status-finished-text: #5b4a8a;
    --status-tournament-bg: #dbeafe;
    --status-tournament-text: #1d4ed8;
    --status-passed-bg: #ffe4e6;
    --status-passed-text: #9f1239;

    --mode-peg-bg: #ffefc8;
    --mode-peg-text: #8a5200;
    --mode-smart-bg: #ede9fe;
    --mode-smart-text: #6d28d9;

    --tag-rating-bg: #ede9fe;
    --tag-rating-text: #6d28d9;
    --tag-provisional-bg: #ffefc8;
    --tag-provisional-text: #8a5200;
    --tag-established-bg: #d1fae5;
    --tag-established-text: #047857;
    --win-chip-bg: #d1fae5;
    --win-chip-text: #047857;
    --loss-chip-bg: #ffe4e6;
    --loss-chip-text: #9f1239;

    --auth-error-bg: #ffe4e6;
    --auth-error-text: #9f1239;
    --auth-error-stroke: #fda4af;

    --scrollbar-thumb: #ddd6f5;
    --scrollbar-thumb-hover: #c3b8ea;
}

/* ── Ocean Theme ─────────────────────────────────────────────────────── */

[data-theme="ocean"] {
    --bg: #08111f;
    --bg-accent: #0e1e36;
    --bg-overlay-1: rgba(8, 17, 31, .88);
    --bg-overlay-2: rgba(8, 17, 31, .96);
    --surface: rgba(14, 28, 50, .88);
    --surface-2: rgba(56, 189, 248, .14);
    --text: #e7f0ff;
    --text-muted: #93a8c8;
    --accent: #38bdf8;
    --accent-2: #818cf8;
    --stroke: rgba(56, 189, 248, .22);
    --glow-1: rgba(56, 189, 248, .20);
    --glow-2: rgba(129, 140, 248, .14);

    --court-deep-blue: #08111f;
    --court-blue: #38bdf8;
    --court-cyan: #7dd3fc;
    --court-green: #34d399;
    --court-green-light: #a7f3d0;

    --rating-badge-bg: #38bdf8;
    --rating-badge-text: #04283a;
    --win-badge-bg: #fbbf24;
    --win-badge-text: #3d2a00;
    --scrollbar-thumb: #12243d;
    --scrollbar-thumb-hover: #1d3556;
}

/* Rose & Lavender share the light-mode surface overrides */

[data-theme="rose"] .court-card__body,
[data-theme="lavender"] .court-card__body { background: #ffffff; }

[data-theme="rose"] .court-card__body--empty,
[data-theme="lavender"] .court-card__body--empty { background: #faf7f9; }

[data-theme="rose"] .court-card__lines::before,
[data-theme="rose"] .court-card__lines::after,
[data-theme="lavender"] .court-card__lines::before,
[data-theme="lavender"] .court-card__lines::after { background: #e2e0ea; }

[data-theme="rose"] .court-card__divider span,
[data-theme="lavender"] .court-card__divider span { background: #f3f0f7; color: #9787ad; }

[data-theme="rose"] .player-card__pause,
[data-theme="lavender"] .player-card__pause { background: #e9e4f2; }

[data-theme="rose"] .player-card__pause:hover,
[data-theme="lavender"] .player-card__pause:hover { background: #ffefc8; color: #8a5200; }

[data-theme="rose"] .player-card__remove,
[data-theme="lavender"] .player-card__remove { background: #f5e3e5; }

[data-theme="rose"] .player-card__remove:hover,
[data-theme="lavender"] .player-card__remove:hover { background: #f8d7da; color: #a81c2a; }

[data-theme="rose"] .brand-word,
[data-theme="rose"] .auth-brand__word,
[data-theme="lavender"] .brand-word,
[data-theme="lavender"] .auth-brand__word { color: #3b3050; }

[data-theme="rose"] .auth-wordmark__image--dark,
[data-theme="lavender"] .auth-wordmark__image--dark { display: none; }
[data-theme="rose"] .auth-wordmark__image--light,
[data-theme="lavender"] .auth-wordmark__image--light { display: block; }

[data-theme="rose"] .auth-brand__mark--light,
[data-theme="lavender"] .auth-brand__mark--light { display: none; }
[data-theme="rose"] .auth-brand__mark--dark,
[data-theme="lavender"] .auth-brand__mark--dark { display: block; }
[data-theme="rose"] .brand-mark,
[data-theme="lavender"] .brand-mark { content: url('/assets/courtly-mark-dark.png'); }

[data-theme="rose"] .session-header__logo-img--light,
[data-theme="lavender"] .session-header__logo-img--light { display: none; }
[data-theme="rose"] .session-header__logo-img--dark,
[data-theme="lavender"] .session-header__logo-img--dark { display: block; }

[data-theme="rose"] .app-brand__img--light,
[data-theme="lavender"] .app-brand__img--light { display: none; }
[data-theme="rose"] .app-brand__img--dark,
[data-theme="lavender"] .app-brand__img--dark { display: block; }

/* System preference: light */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg: #ffffff;
        --bg-accent: #e2e8f0;
        --bg-overlay-1: #ffffff;
        --bg-overlay-2: #ffffff;
        --surface: rgba(255, 255, 255, 0.95);
        --surface-2: rgba(226, 232, 240, 0.8);
        --text: #0f172a;
        --text-muted: #475569;
        --accent: #6d4fff;
        --accent-2: #d61e7b;
        --stroke: rgba(15, 23, 42, 0.15);
        --shadow-card: 0 10px 28px rgba(0,0,0,.08);
        --shadow-soft: 0 4px 10px rgba(0,0,0,.05);

        --court-player-text: #0f172a;
        --rating-badge-bg: #d0f2fe;
        --rating-badge-text: #005470;
        --rating-value-color: #0f172a;
        --rating-value-opacity: 0.25;
        --win-badge-bg: #fef3c7;
        --win-badge-text: #92400e;

        --status-active-bg: #d7f6e2;
        --status-active-text: #0e6b3a;
        --status-upcoming-bg: #d9e8ff;
        --status-upcoming-text: #174ea8;
        --status-paused-bg: #ffefc8;
        --status-paused-text: #8a5200;
        --status-finished-bg: #e6ebf0;
        --status-finished-text: #46515b;
        --status-tournament-bg: #f5e6ff;
        --status-tournament-text: #7b1fa2;
        --status-passed-bg: #ffe3e6;
        --status-passed-text: #a81c2a;

        --mode-peg-bg: #ffefc8;
        --mode-peg-text: #8a5200;
        --mode-smart-bg: #d9e8ff;
        --mode-smart-text: #174ea8;

        --tag-rating-bg: #d9e8ff;
        --tag-rating-text: #174ea8;
        --tag-provisional-bg: #ffefc8;
        --tag-provisional-text: #8a5200;
        --tag-established-bg: #d7f6e2;
        --tag-established-text: #0e6b3a;
        --win-chip-bg: #d7f6e2;
        --win-chip-text: #0e6b3a;
        --loss-chip-bg: #ffe3e6;
        --loss-chip-text: #a81c2a;

        --auth-error-bg: #ffe3e6;
        --auth-error-text: #a81c2a;
        --auth-error-stroke: #fca5a5;

        --scrollbar-thumb: #cbd5e1;
        --scrollbar-thumb-hover: #94a3b8;
    }
    :root:not([data-theme]) body { font-family: "SF Mono", "JetBrains Mono", "Fira Code", ui-monospace, monospace; }
    :root:not([data-theme]) .court-card__body { background: #ffffff; }
    :root:not([data-theme]) .court-card__body--empty { background: #f5f8f7; }
    :root:not([data-theme]) .court-card__lines::before,
    :root:not([data-theme]) .court-card__lines::after { background: #d7e1de; }
    :root:not([data-theme]) .court-card__divider span { background: #f0f4f2; color: #8fa39b; }
    :root:not([data-theme]) .player-card__pause { background: #dbe9e4; }
    :root:not([data-theme]) .player-card__pause:hover { background: #ffefc8; color: #8a5200; }
    :root:not([data-theme]) .player-card__remove { background: #f5e3e5; }
    :root:not([data-theme]) .player-card__remove:hover { background: #f8d7da; color: #a81c2a; }
    :root:not([data-theme]) .session-header__badge--active { background: var(--status-active-bg); color: var(--status-active-text); }
    :root:not([data-theme]) .session-header__badge--upcoming { background: var(--status-upcoming-bg); color: var(--status-upcoming-text); }
    :root:not([data-theme]) .session-header__badge--paused { background: var(--status-paused-bg); color: var(--status-paused-text); }
    :root:not([data-theme]) .session-header__badge--finished { background: var(--status-finished-bg); color: var(--status-finished-text); }

    :root:not([data-theme]) .brand-word,
    :root:not([data-theme]) .auth-brand__word { color: #32405c; }
}

/* ── Theme Toggle ────────────────────────────────────────────────────── */

.theme-toggle {
    display: flex;
    gap: 0;
    border: 1px solid var(--stroke);
    border-radius: 6px;
    overflow: hidden;
}

.theme-toggle button {
    border: none;
    background: transparent;
    color: var(--text-muted);
    padding: 4px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}

.theme-toggle button.active {
    background: var(--accent);
    color: #fff;
}

/* Version label on the dashboard. */
.version-chip {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    padding: 4px 10px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    white-space: nowrap;
}

/* Matchmaking-mode switch (header) */
.mode-switch {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    cursor: pointer;
    color: var(--text-muted);
    background: transparent;
    font-family: inherit;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* SMART/PEG abbreviate to one letter where the switch is a small circle. */
.mode-switch__abbr { display: none; }

.mode-switch--players { color: var(--status-active-text); }
.mode-switch--finish { color: var(--auth-error-text); }
.mode-switch--peg { background: var(--mode-peg-bg); color: var(--mode-peg-text); border-color: var(--mode-peg-text); }
.mode-switch--smart { background: var(--mode-smart-bg); color: var(--mode-smart-text); border-color: var(--mode-smart-text); }

/* Bolder outline (thicker border, brighter text) so START reads as the primary action */
.mode-switch--start {
    border: 2px solid #e0c020;
    color: #e0c020;
    font-weight: 900;
    padding: 6px 14px;
}
.mode-switch--start:hover { background: rgba(224,192,32,0.12); }

/* Busy state shared by session lifecycle buttons (start/finish/resume/new session) */
.mode-switch.is-busy,
.btn.is-busy {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}
.mode-switch.is-busy::after,
.btn.is-busy::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

/* NEXT UP header with the active mode on the right */
.waiting-list__head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.waiting-list__head .waiting-list__title {
    margin-bottom: 0;
}
.waiting-list__players {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    white-space: nowrap;
}
.waiting-list__players + .waiting-list__mode {
    margin-left: 0;
}
.waiting-list__mode {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.waiting-list__mode--peg { color: var(--mode-peg-text); }
.waiting-list__mode--smart { color: var(--mode-smart-text); }

.fill-courts-btn {
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.fill-courts-btn:hover:not(:disabled) { background: var(--accent); color: #fff; }
.fill-courts-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.fill-courts-btn--start { background: var(--accent); color: #fff; }
.fill-courts-btn--assign { border-style: dashed; opacity: 0.85; }

.fill-courts-btn.is-busy,
.player-card__pause.is-busy {
    color: transparent !important;
    position: relative;
    pointer-events: none;
}

.fill-courts-btn.is-busy::after,
.player-card__pause.is-busy::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, .3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}

/* Responsive layout safeguards shared by every rendered page. */
@media (max-width: 767px) {
    html { font-size: 121%; zoom: 1; }

    body { min-width: 0; overflow-x: hidden; }

    #courtly-app { padding: 0 12px; }

    /* Brand + hamburger on the first row, session controls on their own row. */
    .session-header {
        align-items: center;
        margin: 12px 0;
        padding: 12px;
    }

    .session-header__left {
        flex: 1 1 auto;
        min-width: 0;
    }

    .session-header__left { gap: 10px; }

    .session-header__name {
        min-width: 0;
    }

    .mode-switch,
    .theme-toggle { justify-self: start; }

    .mode-switch { min-height: 40px; }

    /* Courts toolbar — icon-only controls on small screens */
    .court-toolbar-btn { width: 44px; height: 44px; padding: 0; }
    .court-toolbar-btn__icon,
    .courts-toolbar__actions .mode-switch__icon { font-size: 1.2rem; line-height: 1; }
    .court-toolbar-btn__label,
    .courts-toolbar__actions .mode-switch__label,
    .courts-toolbar__actions .mode-switch__full {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .courts-toolbar__actions .mode-switch { width: 44px; height: 44px; padding: 0; justify-content: center; }
    /* The switch is a circle here, so SMART/PEG become S/P. The full word stays
       in the DOM (clipped above) so screen readers still announce it. */
    .courts-toolbar__actions .mode-switch__abbr { display: inline; font-size: 1rem; letter-spacing: 0; }

    .courts-grid {
        width: 100%;
        max-width: none;
        margin: 0 0 14px;
        padding: 0;
    }

    .court-card__body--empty { min-height: 0; }

    .court-card__court { gap: 6px; }

    .court-card__head {
        flex-wrap: wrap;
        gap: 6px 10px;
    }

    .court-card__number {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 1.15rem;
    }

    .court-card__head-actions {
        margin-left: auto;
        flex-wrap: wrap;
        justify-content: flex-end;
        min-width: 0;
        gap: 6px;
    }

    .court-card__status {
        font-size: 0.68rem;
        padding: 4px 10px;
    }

    .court-clear-btn {
        font-size: 0.7rem;
        padding: 5px 10px;
    }

    .court-remove-btn {
        width: 30px;
        height: 30px;
        font-size: 1.2rem;
    }

    .court-card__player {
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 0.9rem;
    }

    .court-card__player-meta { left: 4px; right: 4px; }

    .court-card__rating,
    .court-card__win { padding: 1px 4px; }

    .court-card__divider span { padding: 4px 8px; }

    .waiting-list,
    .match-history,
    .session-controls { width: 100%; }

    .waiting-list__head {
        flex-wrap: wrap;
        gap: 8px;
    }

    .waiting-list__head .waiting-list__players {
        margin-left: 0;
    }

    .waiting-list__head .waiting-list__mode {
        margin-left: 0;
        width: 100%;
    }

    .modal-overlay { padding: 12px; }

    .modal,
    .modal--wide,
    .modal--confirm {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 24px);
        padding: 18px;
    }

    .add-section__new,
    .modal__actions { align-items: stretch; flex-direction: column; }

    .add-section__new .btn,
    .modal__actions .btn { width: 100%; }

    .existing-list { grid-template-columns: 1fr; }

    .auth-page {
        min-height: 100dvh !important;
        align-items: flex-start !important;
        padding: 16px !important;
    }

    .auth-card {
        margin: auto 0 !important;
        padding: 28px 20px !important;
    }

    .auth-logo { margin-bottom: 22px !important; }

    .auth-logo img {
        width: min(220px, 70vw) !important;
        height: auto !important;
        max-height: 96px;
    }

    .auth-card h2 { font-size: 1.45rem !important; }

    .auth-card .sub,
    .auth-field input,
    .auth-btn,
    .social-btn { font-size: 1rem !important; }

    .stats-head { margin-bottom: 18px !important; }

    .stats-head h1 { font-size: 1.25rem !important; }

    .stat-grid { grid-template-columns: 1fr !important; }

    .chart-card { padding: 14px !important; }

    .dashboard-header,
    .dashboard-subhead {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .dashboard-header { gap: 14px !important; }

    .dashboard-subhead { gap: 10px !important; }

    .dashboard-header__actions,
    .dashboard-subhead__actions {
        flex-wrap: wrap;
        justify-content: flex-start !important;
    }

    .session-row { align-items: stretch !important; }

    .session-link__meta { line-height: 1.5; }

    .dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }

    .dialog__actions { flex-wrap: wrap; }
}

@media (max-width: 374px) {
    #courtly-app { padding: 0 8px; }

    .court-card__body { padding: 8px 6px; }

    .court-card__player-box { padding: 8px 5px; }

    .court-card__player { font-size: 0.8rem; }
}

/* ==========================================================================
   Score picker — full-screen roller deck
   ========================================================================== */

.score-picker {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(4, 8, 18, .72);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
    animation: score-picker-fade .16s ease-out;
}

@keyframes score-picker-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.score-picker__panel {
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px;
    border: 1px solid var(--stroke);
    border-radius: 18px;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    box-shadow: var(--shadow-card);
}

.score-picker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.score-picker__court {
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--text-muted);
}

.score-picker__close {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font-size: 1rem;
    cursor: pointer;
}

.score-picker__close:hover { color: var(--text); }

.score-picker__teams {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    text-align: center;
}

.score-picker__team {
    padding: 7px 8px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-muted);
}

.score-picker__team--1 { background: rgba(0, 132, 255, .16); }
.score-picker__team--2 { background: rgba(0, 199, 100, .16); }

.score-picker__team--winner {
    color: #fff;
}

.score-picker__team--winner.score-picker__team--1 {
    background: #0084ff;
    border-color: #0084ff;
}

.score-picker__team--winner.score-picker__team--2 {
    background: #00c764;
    border-color: #00c764;
}

.score-picker__deck {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 280px;
}

/* Centre highlight band — matches the selected row in both wheels. */
.score-picker__band {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 112px;
    height: 56px;
    border: 2px solid var(--accent);
    border-radius: 12px;
    pointer-events: none;
}

.score-picker__colon {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-muted);
}

.score-picker__wheel {
    flex: 1;
    height: 100%;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    /* Fades the ends without per-item JS, which is what keeps the drag smooth. */
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 26%, #000 74%, transparent);
    contain: content;
}

.score-picker__wheel::-webkit-scrollbar { display: none; }

.score-picker__spacer {
    height: 112px;
}

.score-picker__item {
    height: 56px;
    line-height: 56px;
    scroll-snap-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
    opacity: .55;
    user-select: none;
    -webkit-user-select: none;
}

.score-picker__item--active {
    font-size: 1.85rem;
    font-weight: 900;
    color: var(--text);
    opacity: 1;
}

.score-picker__hint {
    margin: 0;
    min-height: 18px;
    text-align: center;
    font-size: .78rem;
    color: var(--text-muted);
}

.score-picker__hint--error { color: #f87171; }

.score-picker__actions {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 10px;
}

.score-picker__btn {
    min-height: var(--min-touch);
    border: 2px solid var(--stroke);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    font-size: .9rem;
    font-weight: 800;
    letter-spacing: .06em;
    cursor: pointer;
}

.score-picker__btn--confirm { color: #fff; }

.score-picker__btn--team-1 { background: #0084ff; border-color: #0084ff; }
.score-picker__btn--team-2 { background: #00c764; border-color: #00c764; }

.score-picker__btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .score-picker__panel { width: 100%; }
}

/* Court rename popover — inline roller deck of court numbers 1–20 */
#courtly-app .court-name-picker {
    position: fixed;
    z-index: 300;
    width: 240px;
    border: 1px solid var(--stroke);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    animation: court-name-picker-fade .14s ease-out;
}

@keyframes court-name-picker-fade {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.court-name-picker__deck {
    position: relative;
    height: 224px;
}

.court-name-picker__band {
    position: absolute;
    left: 4px;
    right: 4px;
    top: 90px;
    height: 44px;
    border: 2px solid var(--accent);
    border-radius: 10px;
    pointer-events: none;
}

.court-name-picker__wheel {
    height: 100%;
    overflow-y: scroll;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
}

.court-name-picker__wheel::-webkit-scrollbar { display: none; }

.court-name-picker__spacer { height: 90px; }

.court-name-picker__item {
    height: 44px;
    line-height: 44px;
    padding: 0 12px;
    scroll-snap-align: center;
    font-family: "Manrope", sans-serif;
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-muted);
    opacity: .55;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.court-name-picker__item:hover {
    opacity: 1;
    color: var(--text);
}

.court-name-picker__item--active {
    font-family: "Space Grotesk", "Manrope", sans-serif;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: var(--text);
    opacity: 1;
}

/* ==========================================================================
   App header + nav (shared across Circles / Sessions / Stats / Rankings)
   ========================================================================== */
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 1rem 18px;
    /* Theme-aware: was a hardcoded dark navy, which left the header dark (and its
       icons low-contrast/grey) in the light theme. --bg-overlay-* is already
       themed per palette — light resolves to solid white. */
    background: linear-gradient(180deg, var(--bg-overlay-1), var(--bg-overlay-2));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--stroke);
}
.app-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: .01em;
    color: var(--text);
    text-decoration: none;
}
.app-brand__img { width: 30px; height: 30px; object-fit: contain; display: block; }
.app-brand__img--dark { display: none; }
[data-theme="light"] .app-brand__img--light { display: none; }
[data-theme="light"] .app-brand__img--dark { display: block; }
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .app-brand__img--light { display: none; }
    :root:not([data-theme]) .app-brand__img--dark { display: block; }
}
.app-brand b { color: var(--accent-2); font-weight: 900; }
/* Pushed right so the menu sits next to the theme toggle / logout. */
.app-nav { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }

/* Desktop shows the pills directly; the hamburger is the small-screen menu. */
.app-nav__toggle { display: none; }
.app-nav__menu { display: flex; align-items: center; gap: 6px; }

/* Theme + logout are part of the menu so the hamburger can hold everything.
   The "Theme" caption is only shown inside the collapsed panel. */
.app-nav__theme { display: inline-flex; align-items: center; gap: 8px; }
.app-nav__label { display: none; }
.app-nav__logout { display: flex; margin: 0; }
/* Icon-only pills at every width, matching the Circles map header. Labels stay
   in the markup (visually hidden) so they still reach screen readers and titles. */
.app-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--stroke);
    color: var(--text-muted);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    transition: border-color .15s, color .15s, background .15s;
}
.app-pill:hover { border-color: var(--accent); color: var(--text); }
.app-pill--active {
    border-color: var(--accent);
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}
.app-pill__icon { font-size: 1.05rem; line-height: 1; }
.app-pill__label,
.app-logout__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.app-actions { display: flex; align-items: center; gap: 8px; }
.app-logout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--stroke);
    background: var(--surface);
    color: var(--text-muted);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color .15s, color .15s;
}
.app-logout:hover { border-color: var(--accent-2); color: var(--text); }

/* Every icon in the menu shares one size so the row reads evenly: the pills,
   the theme toggle and logout are all 38px with a 1.05rem glyph. */
.app-logout__icon { font-size: 1.05rem; line-height: 1; }
.app-nav .app-nav__theme .theme-switch { width: 38px; height: 38px; font-size: 1.05rem; }
.app-header .theme-switch { width: 38px; height: 38px; font-size: .95rem; }

/* App header — mobile: brand + actions stay on the top row, nav scrolls underneath */
@media (max-width: 767px) {
    .app-header { gap: 10px; padding: 10px 12px; }
    .app-brand { flex: 0 0 auto; font-size: 0.95rem; gap: 7px; }
    .app-brand__img { width: 24px; height: 24px; }
    .app-actions { flex: 0 0 auto; }

    /* Menu collapses into the hamburger, so nothing spills onto a second row. */
    .app-nav { flex: 0 0 auto; flex-wrap: nowrap; }
    .app-nav__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        padding: 0;
        border: 1px solid var(--stroke);
        border-radius: 999px;
        background: transparent;
        color: var(--text-muted);
        cursor: pointer;
    }
    .app-nav__toggle:hover { border-color: var(--accent); color: var(--text); }
    .app-nav__menu { display: none; }
    /* Keyed off <body>, not the menu element: Vue re-renders the live session
       header and would drop a class applied directly to the menu. */
    .nav-open .app-nav__menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        position: absolute;
        top: calc(100% + 8px);
        right: 12px;
        min-width: 190px;
        padding: 8px;
        background: var(--surface);
        border: 1px solid var(--stroke);
        border-radius: 14px;
        box-shadow: var(--shadow-card);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        z-index: 60;
    }
    /* Every row in the panel is the same capsule — same height, spacing,
       typography and border — whether it is a link, a control or a readout. */
    .nav-open .app-nav__menu .app-pill,
    .nav-open .app-nav__menu .app-nav__logout,
    .nav-open .app-nav__menu .app-nav__theme,
    .nav-open .app-nav__menu .offline-control,
    .nav-open .app-nav__menu .session-header__timer,
    .nav-open .app-nav__menu .session-header__badge {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        min-height: 38px;
        gap: 10px;
        padding: 0 14px;
        border: 1px solid var(--stroke);
        border-radius: 999px;
        background: transparent;
        color: var(--text-muted);
        font-size: 0.82rem;
        font-weight: 700;
        line-height: 1;
    }
    /* The row is the control, so anything inside it is reset to plain. */
    .nav-open .app-nav__menu .app-logout {
        width: auto;
        height: auto;
        padding: 0;
        gap: 10px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
    }
    .nav-open .app-nav__menu .app-pill__label,
    .nav-open .app-nav__menu .app-logout__label {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        clip: auto;
        white-space: nowrap;
        border: 0;
    }
    .nav-open .app-nav__menu .app-nav__label { display: inline; }
    /* The active page keeps its gradient highlight inside the panel too. */
    .nav-open .app-nav__menu .app-pill--active {
        border-color: var(--accent);
        color: #fff;
        background: linear-gradient(135deg, var(--accent), var(--accent-2));
    }
    /* Inside a row the icon is plain — the row itself is the control. */
    /* In the panel the whole row is the hit target, so the icon inside it is
       not intercepting taps. */
    .nav-open .app-nav__menu .theme-switch,
    .nav-open .app-nav__menu .offline-indicator {
        width: auto;
        height: auto;
        padding: 0;
        border: 0;
        background: transparent;
        pointer-events: none;
    }
    .nav-open .app-nav__menu .theme-switch { font-size: 1.05rem; line-height: 1; }
    .nav-open .app-nav__menu .offline-icon-svg { width: 1.05rem; height: 1.05rem; }
    .app-pill { flex: 0 0 auto; width: 38px; height: 38px; padding: 0; justify-content: center; gap: 0; }
    .app-pill__icon,
    .app-logout__icon { font-size: 1.05rem; line-height: 1; }
    .app-pill__label,
    .app-logout__label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .app-header .theme-switch { width: 34px; height: 34px; font-size: 0.9rem; }
    .app-logout { width: 38px; height: 38px; padding: 0; justify-content: center; gap: 0; }
}

/* Gender-block warning — courts can't auto-fill until every waiting player has a gender */
.gender-block-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 auto 12px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 176, 32, .45);
    border-radius: 10px;
    background: rgba(255, 176, 32, .08);
    color: #ffb020;
    font-size: 0.85rem;
    font-weight: 700;
    box-sizing: border-box;
}

.player-card__gender {
    border: 1px solid var(--stroke);
    background: var(--surface-2);
    color: var(--text-muted);
    border-radius: 999px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 0.95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .15s, color .15s, background .15s;
}
.player-card__gender--male:hover { border-color: #3b82f6; color: #3b82f6; }
.player-card__gender--female:hover { border-color: #ff5da2; color: #ff5da2; }
.player-card__gender:disabled { opacity: .4; cursor: not-allowed; }