/* Courtly brand system */

:root {
    --court-deep-blue: #0f172a;
    --court-blue: #3b82f6;
    --court-cyan: #93c5fd;
    --court-green: #3b82f6;
    --court-green-light: #93c5fd;

    --bg: #0f172a;
    --bg-accent: #17243b;
    --bg-overlay-1: rgba(15,23,42,.82);
    --bg-overlay-2: rgba(15,23,42,.90);
    --surface: rgba(15,23,42,.92);
    --surface-2: rgba(59,130,246,.18);
    --text: #e5e7eb;
    --text-muted: #b7c1d1;
    --accent: #3b82f6;
    --accent-2: #93c5fd;

    --radius: 8px;
    --radius-sm: 6px;
    --shadow-card: 0 14px 36px rgba(0,13,43,0.34);
    --shadow-soft: 0 5px 16px rgba(0,13,43,0.24);
    --stroke: rgba(147,197,253,.28);
    --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: 110%;
}

body {
    font-family: "Manrope", "Segoe UI", sans-serif !important;
    background: var(--bg);
    background-image: linear-gradient(var(--bg-overlay-1), var(--bg-overlay-2)), url('/assets/court-background.jpg') !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: var(--text);
    caret-color: transparent;
    min-height: 100dvh;
}

.auth-page {
    background: linear-gradient(var(--bg-overlay-1), var(--bg-overlay-2)), url('/assets/court-background.jpg') center center / 100% 100% no-repeat fixed !important;
    font-family: "Manrope", "Segoe UI", sans-serif !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(--court-blue);
    background: var(--bg-accent);
    outline: none;
    transform: translateY(-1px);
}

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

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

.session-sport-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    background: #fff;
    -webkit-mask-image: var(--session-sport-image);
    mask-image: var(--session-sport-image);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-mode: luminance;
    mask-mode: luminance;
}

.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__stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    font-size: 0.93rem;
    color: var(--text-muted);
}

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

/* 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__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-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;
    font: 700 1.1rem/1 inherit;
    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-why-btn {
    height: 34px;
    padding: 0 12px;
    border: 1px solid var(--stroke);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--accent);
    cursor: pointer;
    font: 700 0.72rem/1 inherit;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}

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

.court-why-btn:disabled { cursor: wait; opacity: 0.5; }

.court-card__explanation {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px dashed var(--stroke);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* 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 */
.court-card__lines {
    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__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;
}

/* 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: 1fr 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 {
    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: #fff;
    -webkit-mask-image: url('../assets/icons/gender-male.svg');
    mask-image: url('../assets/icons/gender-male.svg');
}
.gender-dot--female {
    color: #fff;
    -webkit-mask-image: url('../assets/icons/gender-female.svg');
    mask-image: url('../assets/icons/gender-female.svg');
}
.gender-dot--missing {
    color: #9ca3af;
    -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 {
    font-size: 1.05rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.player-card__name .gender-dot { margin-left: 1px; }

.player-card__name .rank-icon {
    margin-left: 5px;
}

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

@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; }
    .session-header__stats { font-size: 0.8rem; gap: 8px; }
    .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;
}

/* 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: 8px 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-left: 6px;
    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 {
    font-weight: 700;
    font-size: 0.9rem;
    flex: 1;
}

.existing-item__rating {
    font-size: 0.95rem;
    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.35s ease;
    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);
}

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

[data-theme="light"] {
    --bg: #f8fafc;
    --bg-accent: #e2e8f0;
    --bg-overlay-1: rgba(241, 245, 249, 0.85);
    --bg-overlay-2: rgba(248, 250, 252, 0.92);
    --surface: rgba(255, 255, 255, 0.95);
    --surface-2: rgba(226, 232, 240, 0.8);
    --text: #0f172a;
    --text-muted: #475569;
    --accent: #3b82f6;
    --accent-2: #2563eb;
    --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;
}

[data-theme="light"] body {
    font-family: "Manrope", "Segoe UI", sans-serif;
}

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

/* System preference: light */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        --bg: #f8fafc;
        --bg-accent: #e2e8f0;
        --bg-overlay-1: rgba(241, 245, 249, 0.85);
        --bg-overlay-2: rgba(248, 250, 252, 0.92);
        --surface: rgba(255, 255, 255, 0.95);
        --surface-2: rgba(226, 232, 240, 0.8);
        --text: #0f172a;
        --text-muted: #475569;
        --accent: #3b82f6;
        --accent-2: #2563eb;
        --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: "Manrope", "Segoe UI", sans-serif; }
    :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__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;
}

.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.72rem;
    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.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: 100%; }

    body { min-width: 320px; }

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

    .session-header {
        align-items: stretch;
        margin: 12px 0;
        padding: 12px;
    }

    .session-header__left,
    .session-header__stats {
        width: 100%;
        min-width: 0;
    }

    .session-header__left { gap: 10px; }

    .session-header__name {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .session-header__stats {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }

    .session-header__stats > * { min-width: 0; }

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

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

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

    .court-card__court { gap: 6px; }

    .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-wrap { padding: 16px 12px 40px !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%; }
}