/* =====================================================================
   PickleMix — NEW DESIGN (UI v2) stylesheet
   ---------------------------------------------------------------------
   Every rule that changes the look is scoped to html.ui-v2, so Classic
   (style.css) is untouched when the new design is off. Only the small
   "Try the new design" note / button and the toast are styled for both.
   Phase 1: top bar, light/dark themes, primary colour, base surfaces,
            date & time removed from the Courts tab.
   ===================================================================== */

/* ---------- visibility helpers (both designs) ---------- */
html:not(.ui-v2) .v2-only { display: none !important; }
html.ui-v2 .v2-classic-only { display: none !important; }
.v2-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Classic: the one small entry point + note + toast ---------- */
html:not(.ui-v2) .header-actions .v2-try-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, #1565d8, #2e9e44); color: #fff;
    border: 0; border-radius: 8px; padding: 8px 14px; font-weight: 600; cursor: pointer;
}
html:not(.ui-v2) .header-actions .v2-try-btn .v2-try-new { display: none; }

/* Shines (moving PickleMix-colour border + light sweep) until the new design has been tried once */
@property --v2-try-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html:not(.ui-v2) .header-actions .v2-try-btn.v2-shine {
    position: relative; overflow: hidden; isolation: isolate; font-weight: 700;
    border: 2.5px solid transparent; padding: 7px 14px;
    background:
        linear-gradient(135deg, #1565d8, #2e9e44) padding-box,
        conic-gradient(from var(--v2-try-angle), #1565d8, #2e9e44, #f6c90e, #2e9e44, #1565d8) border-box;
    animation: v2-try-spin 3s linear infinite, v2-try-glow 3s ease-in-out infinite;
}
html:not(.ui-v2) .header-actions .v2-try-btn.v2-shine::after {
    content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 45%; z-index: 1; pointer-events: none;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-18deg); animation: v2-try-sweep 4s ease-in-out infinite;
}
html:not(.ui-v2) .header-actions .v2-try-btn.v2-shine > * { position: relative; z-index: 2; }
html:not(.ui-v2) .header-actions .v2-try-btn.v2-shine .v2-try-new {
    display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: 999px;
    background: #f6c90e; color: #14202e; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; line-height: 1.5;
}
html:not(.ui-v2) .header-actions .v2-try-btn.v2-shine:hover { filter: brightness(1.1); box-shadow: 0 0 18px rgba(46, 158, 68, .7), 0 0 30px rgba(21, 101, 216, .45); }
@keyframes v2-try-spin { to { --v2-try-angle: 360deg; } }
@keyframes v2-try-glow {
    0%, 100% { box-shadow: 0 0 8px rgba(21, 101, 216, .55); }
    33% { box-shadow: 0 0 12px rgba(46, 158, 68, .65); }
    66% { box-shadow: 0 0 12px rgba(246, 201, 14, .6); }
}
@keyframes v2-try-sweep { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
    html:not(.ui-v2) .header-actions .v2-try-btn.v2-shine,
    html:not(.ui-v2) .header-actions .v2-try-btn.v2-shine::after { animation: none !important; }
    html:not(.ui-v2) .header-actions .v2-try-btn.v2-shine::after { display: none; }
    html:not(.ui-v2) .header-actions .v2-try-btn.v2-shine { box-shadow: 0 0 10px rgba(46, 158, 68, .55); }
}
#v2-try-note {
    position: fixed; left: 20px; bottom: 20px; z-index: 100004; max-width: 420px;
    display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px;
    background: #ffffff; color: #14202e; border-radius: 14px; border: 1px solid #e2e7ef;
    box-shadow: 0 12px 32px rgba(20, 32, 46, .18); font-family: inherit; text-align: left;
    animation: v2-rise .3s ease;
}
#v2-try-note .v2-try-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, #1565d8, #2e9e44); }
#v2-try-note .v2-try-text { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; line-height: 1.4; }
#v2-try-note .v2-try-text strong { font-size: 15px; }
#v2-try-note .v2-try-text span { color: #566476; }
#v2-try-note .v2-try-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
#v2-try-note button { border-radius: 9px; padding: 7px 12px; font-weight: 700; font-size: 13px; cursor: pointer; border: 1px solid #e2e7ef; background: #f3f5f9; color: #14202e; }
#v2-try-note .v2-try-yes { background: #1565d8; border-color: #1565d8; color: #fff; }
#v2-toast {
    position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100005;
    max-width: min(560px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 12px;
    background: #14202e; color: #fff; font-weight: 600; font-size: 14px; line-height: 1.4;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .3); text-align: center; animation: v2-rise .25s ease;
}
@keyframes v2-rise { from { opacity: 0; transform: translate(var(--v2-tx, 0), 8px); } to { opacity: 1; transform: translate(var(--v2-tx, 0), 0); } }
#v2-toast { --v2-tx: -50%; }

/* =====================================================================
   THEME TOKENS
   ===================================================================== */
html.ui-v2 {
    --v2-accent: #1565d8; --v2-accent-hover: #1259bf; --v2-accent-text: #1565d8; --v2-on-accent: #fff;
    --v2-accent-soft: #e5eefb; --v2-accent-ring: #8db3ec;
    --v2-font: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --v2-radius: 14px; --v2-radius-sm: 10px;
    --v2-bar-h: 84px;
}
html.ui-v2[data-v2-theme="light"] {
    color-scheme: light;
    --v2-bg: #f3f5f9; --v2-surface: #ffffff; --v2-surface-2: #f7f9fc; --v2-soft: #eef2f7;
    --v2-border: #e2e7ef; --v2-border-strong: #cfd7e3;
    --v2-text: #14202e; --v2-muted: #566476; --v2-faint: #8693a3;
    --v2-play: #b45309; --v2-play-bg: #fff4e5;
    --v2-free: #1f7a33; --v2-free-bg: #e7f6ea;
    --v2-info: #1d5fd1; --v2-info-bg: #e9f1ff;
    --v2-warn: #8a5a00; --v2-warn-bg: #fff3d1;
    --v2-danger: #c0352b; --v2-danger-bg: #fdecea;
    --v2-shadow: 0 1px 2px rgba(20, 32, 46, .06), 0 4px 14px rgba(20, 32, 46, .05);
    --v2-shadow-lg: 0 20px 50px rgba(20, 32, 46, .22);
    --v2-overlay: rgba(15, 23, 34, .5);
}
html.ui-v2[data-v2-theme="dark"] {
    color-scheme: dark;
    --v2-bg: #0d1218; --v2-surface: #151c25; --v2-surface-2: #1a232e; --v2-soft: #1f2934;
    --v2-border: #283340; --v2-border-strong: #364353;
    --v2-text: #e7ecf2; --v2-muted: #9aa8b8; --v2-faint: #6f7d8d;
    --v2-play: #f5a54a; --v2-play-bg: #33240f;
    --v2-free: #5fd07a; --v2-free-bg: #143020;
    --v2-info: #7fb0ff; --v2-info-bg: #16264a;
    --v2-warn: #ffd166; --v2-warn-bg: #3a2d0c;
    --v2-danger: #ff8a80; --v2-danger-bg: #3a1714;
    --v2-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .25);
    --v2-shadow-lg: 0 20px 50px rgba(0, 0, 0, .6);
    --v2-overlay: rgba(0, 0, 0, .65);
}

/* =====================================================================
   BASE
   ===================================================================== */
html.ui-v2 body {
    background: var(--v2-bg) !important;
    color: var(--v2-text);
    font-family: var(--v2-font);
    padding-top: calc(var(--v2-bar-h) + 10px) !important;
    margin: 0;
}
html.ui-v2 body, html.ui-v2 button, html.ui-v2 input, html.ui-v2 select, html.ui-v2 textarea { font-family: var(--v2-font); }
html.ui-v2 h1, html.ui-v2 h2, html.ui-v2 h3, html.ui-v2 h4 { color: var(--v2-text); letter-spacing: -0.01em; }
html.ui-v2 a { color: var(--v2-accent-text); }
html.ui-v2 :focus-visible { outline: 2px solid var(--v2-accent-ring); outline-offset: 2px; }
html.ui-v2 ::selection { background: var(--v2-accent-soft); }
html.ui-v2 * { scrollbar-width: thin; scrollbar-color: var(--v2-border-strong) transparent; }

/* =====================================================================
   TOP BAR (the existing header + tabs, restyled — nothing is moved)
   ===================================================================== */
html.ui-v2 .main-header {
    position: fixed !important; top: 0; left: 0; right: 0; z-index: 1000;
    height: var(--v2-bar-h); min-height: 0 !important; margin: 0 !important; padding: 0 16px !important;
    background: var(--v2-surface) !important; color: var(--v2-text) !important;
    border-bottom: 1px solid var(--v2-border); border-radius: 0 !important; box-shadow: none !important;
    overflow: visible !important; text-align: left;
}
html.ui-v2 .main-header::before, html.ui-v2 .main-header::after { display: none !important; }
html.ui-v2 .main-header .header-wave { display: none !important; }
html.ui-v2 .main-header .header-content {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    flex-direction: row !important; height: 100%; max-width: none !important; margin: 0 !important; padding: 0 !important; gap: 12px;
}
html.ui-v2 .main-header .header-left { display: flex !important; align-items: center !important; gap: 0 !important; flex-direction: row !important; flex-shrink: 0; }
html.ui-v2 .main-header .header-tagline { display: none !important; }
html.ui-v2 .main-header .logo-container { display: flex; align-items: center; gap: 0; margin: 0; padding: 0; }
html.ui-v2 .main-header .logo-icon, html.ui-v2 .main-header .logo-text { display: none !important; }
html.ui-v2 .main-header .v2-logo { display: block; height: 72px; width: auto; }

html.ui-v2 .main-header .header-right {
    display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end;
    gap: 8px !important; position: relative; margin: 0 !important; padding: 0 !important; flex-shrink: 0;
}
html.ui-v2 .main-header .user-session-info {
    display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important;
    margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important;
}
/* Session + subscription chips */
html.ui-v2 .main-header .session-status,
html.ui-v2 .main-header .subscription-status,
html.ui-v2 #session-status-display {
    display: inline-flex; align-items: center; gap: 7px; margin: 0 !important;
    padding: 5px 11px !important; border-radius: 999px !important; height: 30px; box-sizing: border-box;
    background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important;
    color: var(--v2-muted) !important; font-size: 12.5px !important; font-weight: 600; white-space: nowrap; box-shadow: none !important;
}
html.ui-v2 .main-header .session-status .status-text,
html.ui-v2 .main-header .subscription-status .status-text,
html.ui-v2 #session-status-display .session-time { color: var(--v2-text) !important; font-size: 12.5px !important; font-weight: 700; }
html.ui-v2 .main-header .subscription-status .status-details { color: var(--v2-muted) !important; font-size: 12px !important; margin-left: 2px !important; }
html.ui-v2 .main-header .status-indicator { width: 8px !important; height: 8px !important; border-radius: 50%; box-shadow: none !important; animation: none !important; }
html.ui-v2 #session-status-display i { color: var(--v2-free); }
html.ui-v2 .main-header .user-info { display: none !important; }
/* The fixed "Session Active" label is replaced by the live "Active (Xh)" chip next to it */
html.ui-v2 .main-header .user-session-info > .session-status { display: none !important; }

/* Icon + account buttons */
html.ui-v2 .v2-icon-btn {
    width: 38px; height: 38px; border-radius: var(--v2-radius-sm); border: 1px solid var(--v2-border);
    background: var(--v2-surface-2); color: var(--v2-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
/* "Classic design" button in the top bar: always visible, calm (no shine) */
html.ui-v2 .v2-classic-bar-btn {
    height: 38px; padding: 0 12px; border-radius: var(--v2-radius-sm); border: 1.5px solid var(--v2-accent);
    background: var(--v2-surface); color: var(--v2-accent-text); display: inline-flex; align-items: center; gap: 7px;
    cursor: pointer; font: 700 13px var(--v2-font); white-space: nowrap; flex: 0 0 auto;
}
html.ui-v2 .v2-classic-bar-btn:hover { background: var(--v2-accent-soft); }
html.ui-v2 .v2-classic-bar-btn:focus-visible { outline: 2px solid var(--v2-accent-ring); outline-offset: 2px; }
html.ui-v2 .v2-classic-bar-btn svg { flex: 0 0 auto; }
html.ui-v2 .v2-classic-bar-btn .v2-cb-short { display: none; }
@media (max-width: 1240px) {
    html.ui-v2 .v2-classic-bar-btn .v2-cb-long { display: none; }
    html.ui-v2 .v2-classic-bar-btn .v2-cb-short { display: inline; }
}
@media (max-width: 760px) { html.ui-v2 .v2-classic-bar-btn { padding: 0 10px; gap: 5px; } }
/* Phones: a slightly smaller logo so Classic, light/dark and the account button all fit */
@media (max-width: 520px) {
    html.ui-v2 .main-header .v2-logo { height: 46px; }
    html.ui-v2 .main-header .header-right { gap: 6px !important; }
    html.ui-v2 .v2-classic-bar-btn { padding: 0 9px; }
}
@media (max-width: 380px) { html.ui-v2 .main-header .v2-logo { height: 38px; } }
html.ui-v2 .v2-icon-btn:hover, html.ui-v2 .v2-account-btn:hover { border-color: var(--v2-border-strong); background: var(--v2-soft); }
html.ui-v2 .v2-account-btn {
    height: 38px; padding: 0 10px 0 5px; border-radius: var(--v2-radius-sm); border: 1px solid var(--v2-border);
    background: var(--v2-surface-2); color: var(--v2-text); display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
    font-weight: 600; font-size: 13px;
}
html.ui-v2 .v2-avatar {
    width: 28px; height: 28px; border-radius: 8px; background: var(--v2-accent); color: var(--v2-on-accent);
    display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px;
}

/* Account menu = the existing .header-actions shown as a dropdown */
html.ui-v2 .main-header .header-actions {
    display: none !important; position: absolute !important; top: calc(100% + 10px); right: 0; z-index: 1002;
    flex-direction: column !important; align-items: stretch !important; gap: 2px !important;
    min-width: 240px; padding: 8px !important; margin: 0 !important;
    background: var(--v2-surface) !important; border: 1px solid var(--v2-border); border-radius: var(--v2-radius);
    box-shadow: var(--v2-shadow-lg) !important;
}
html.ui-v2 .main-header .header-right.v2-menu-open .header-actions { display: flex !important; }
html.ui-v2 .main-header .header-actions > * { order: 3; }
html.ui-v2 .main-header .header-actions .v2-menu-email { order: 0; }
html.ui-v2 .main-header .header-actions #change-password-btn { order: 1; }
html.ui-v2 .main-header .header-actions #v2-appearance-btn { order: 2; }
html.ui-v2 .main-header .header-actions #v2-classic-btn { order: 3; }
html.ui-v2 .main-header .header-actions #logout-btn { order: 9; }
html.ui-v2 .main-header .header-actions .v2-classic-only { display: none !important; }
html.ui-v2 .v2-menu-email {
    padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--v2-border);
    color: var(--v2-muted); font-size: 12.5px; font-weight: 600;  white-space: normal; overflow-wrap: break-word;
}
html.ui-v2 .main-header .header-actions button {
    display: flex !important; align-items: center !important; gap: 10px !important; justify-content: flex-start !important;
    width: 100%; height: 40px; padding: 0 10px !important; margin: 0 !important; border-radius: 9px !important;
    background: transparent !important; color: var(--v2-text) !important; border: 0 !important; box-shadow: none !important;
    font-size: 14px !important; font-weight: 600 !important; text-align: left; transform: none !important; cursor: pointer;
}
html.ui-v2 .main-header .header-actions button:hover { background: var(--v2-soft) !important; }
html.ui-v2 .main-header .header-actions button .btn-text { display: inline !important; }
html.ui-v2 .main-header .header-actions button i, html.ui-v2 .main-header .header-actions button svg { width: 18px; text-align: center; color: var(--v2-muted); }
html.ui-v2 .main-header .header-actions #logout-btn { color: var(--v2-danger) !important; margin-top: 4px !important; border-top: 1px solid var(--v2-border) !important; border-radius: 0 0 9px 9px !important; }
html.ui-v2 .main-header .header-actions #logout-btn i { color: var(--v2-danger); }

/* Tabs sit inside the top bar (fixed, same element as before) */
html.ui-v2 .tabs {
    position: fixed !important; top: 0; left: 240px; z-index: 1001; height: var(--v2-bar-h);
    display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 2px;
    margin: 0 !important; padding: 0 !important; width: auto !important;
    background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
html.ui-v2 .tabs .tab {
    margin: 0 !important; padding: 8px 14px !important; border-radius: 9px !important;
    color: var(--v2-muted) !important; background: transparent !important; font-weight: 600 !important; font-size: 14px !important;
    box-shadow: none !important; transform: none !important; white-space: nowrap; line-height: 1.3;
}
html.ui-v2 .tabs .tab:hover { color: var(--v2-text) !important; background: var(--v2-soft) !important; }
html.ui-v2 .tabs .tab.active {
    color: var(--v2-text) !important; background: var(--v2-soft) !important; font-weight: 700 !important;
    box-shadow: inset 0 -2px 0 var(--v2-accent) !important;
}
/* Narrow laptops / tablets: tabs get their own slim row under the bar */
@media (max-width: 1240px) {
    html.ui-v2 { --v2-tabs-row: 44px; }
    html.ui-v2 body { padding-top: calc(var(--v2-bar-h) + var(--v2-tabs-row) + 10px) !important; }
    html.ui-v2 .tabs {
        top: var(--v2-bar-h); left: 0; right: 0; height: var(--v2-tabs-row); justify-content: center !important;
        background: var(--v2-surface) !important; border-bottom: 1px solid var(--v2-border) !important; overflow-x: auto;
    }
}
@media (max-width: 760px) {
    html.ui-v2 .main-header .subscription-status, html.ui-v2 .main-header .session-status, html.ui-v2 #session-status-display { display: none !important; }
    html.ui-v2 .v2-account-label { display: none; }
    html.ui-v2 .tabs { justify-content: flex-start !important; padding: 0 8px !important; }
}

/* =====================================================================
   PAGE CONTAINERS
   ===================================================================== */
html.ui-v2 .tab-content {
    background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
    padding: 6px 16px 20px !important; margin: 0 !important; color: var(--v2-text);
}
html.ui-v2 .tab-content.active { animation: none !important; }
/* Each tab already scrolls inside itself (app.js); give it the room the old header used */
html.ui-v2 .tab-content { max-height: calc(100vh - var(--v2-bar-h) - 10px) !important; max-height: calc(100dvh - var(--v2-bar-h) - 10px) !important; }
@media (max-width: 1240px) {
    html.ui-v2 .tab-content { max-height: calc(100vh - var(--v2-bar-h) - var(--v2-tabs-row) - 10px) !important; max-height: calc(100dvh - var(--v2-bar-h) - var(--v2-tabs-row) - 10px) !important; }
}
/* Courts tab: the date & time block is removed in the new design (still updated in the background) */
html.ui-v2 #courts > .time-display { display: none !important; }

/* Generic cards / panels */
html.ui-v2 .home-court-setup-card,
html.ui-v2 .players-tab-section,
html.ui-v2 .stat-card,
html.ui-v2 .up-next-section,
html.ui-v2 .restriction-toggles-container,
html.ui-v2 .leaderboard-container,
html.ui-v2 .leaderboard-header,
html.ui-v2 .level-description-bar,
html.ui-v2 .game-mode-bar,
html.ui-v2 .home-display-settings-card,
html.ui-v2 .home-logo-card {
    background: var(--v2-surface) !important; color: var(--v2-text) !important;
    border: 1px solid var(--v2-border) !important; border-radius: var(--v2-radius) !important; box-shadow: var(--v2-shadow) !important;
}
html.ui-v2 .stat-card:hover { transform: none !important; }
html.ui-v2 .stat-value { color: var(--v2-accent-text) !important; }
html.ui-v2 .stat-label, html.ui-v2 .players-tab-section-title { color: var(--v2-muted) !important; }
html.ui-v2 .level-description-item { background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border-color: var(--v2-border) !important; }
html.ui-v2 .level-description-item .level-range { color: var(--v2-muted) !important; }

/* Court cards */
html.ui-v2 .court-card {
    background: var(--v2-surface) !important; color: var(--v2-text);
    border: 1px solid var(--v2-border) !important; border-left-width: 1px !important;
    border-radius: var(--v2-radius) !important; box-shadow: var(--v2-shadow) !important; animation: none !important;
}
html.ui-v2 .court-card.ongoing { border-top: 3px solid var(--v2-play) !important; }
html.ui-v2 .court-card.available { border-top: 3px solid var(--v2-free) !important; }
html.ui-v2 .court-card.challenge-court { box-shadow: inset 0 0 0 2px #f6a623, var(--v2-shadow) !important; }
html.ui-v2 .court-card:hover { transform: none !important; box-shadow: var(--v2-shadow) !important; }
html.ui-v2 .court-header { border-bottom-color: var(--v2-border) !important; }
html.ui-v2 .court-title h3, html.ui-v2 .court-title { color: var(--v2-text) !important; }
html.ui-v2 .court-status { box-shadow: none !important; animation: none !important; letter-spacing: .02em; }
html.ui-v2 .status-available { background: var(--v2-free-bg) !important; color: var(--v2-free) !important; }
html.ui-v2 .status-ongoing { background: var(--v2-play-bg) !important; color: var(--v2-play) !important; }
html.ui-v2 .court-team, html.ui-v2 .court-player { background: var(--v2-surface-2) !important; color: var(--v2-text) !important; }
html.ui-v2 .team-player { background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border); }
html.ui-v2 .team-header { border-bottom-color: var(--v2-border) !important; }
html.ui-v2 .team-name { color: var(--v2-accent-text) !important; }
html.ui-v2 .team-player-stats, html.ui-v2 .court-player .player-stats, html.ui-v2 .player-stats { color: var(--v2-muted) !important; }

/* Up Next */
html.ui-v2 .up-next-box {
    background: var(--v2-surface-2) !important; color: var(--v2-text);
    border: 1px solid var(--v2-border) !important; border-radius: 12px !important; box-shadow: none !important;
}
html.ui-v2 .up-next-box.filled { border-color: var(--v2-accent-ring) !important; background: var(--v2-surface) !important; }
html.ui-v2 .up-next-box:hover { transform: none !important; }
html.ui-v2 .up-next-box-header { border-bottom-color: var(--v2-border) !important; }
html.ui-v2 .up-next-game-number { color: var(--v2-text) !important; }
html.ui-v2 .up-next-player { background: var(--v2-surface) !important; color: var(--v2-text); box-shadow: none !important; border: 1px solid var(--v2-border); border-left-width: 1px !important; }
html.ui-v2 .up-next-player-name { color: var(--v2-text) !important; }
html.ui-v2 .up-next-player-stats { color: var(--v2-muted) !important; }
html.ui-v2 .up-next-row[data-row] .up-next-box { border-left-width: 1px !important; }
html.ui-v2 .up-next-add-more-box { background: transparent !important; border: 2px dashed var(--v2-border-strong) !important; color: var(--v2-muted); }
html.ui-v2 .up-next-stats { background: var(--v2-surface-2) !important; color: var(--v2-muted) !important; border-radius: 10px; }
html.ui-v2 .up-next-stat-value { color: var(--v2-text) !important; }
html.ui-v2 .no-up-next-message { background: var(--v2-surface-2) !important; border-color: var(--v2-border) !important; color: var(--v2-muted) !important; }

/* Waitlist + players */
html.ui-v2 .waitlist-item, html.ui-v2 .player-item {
    background: var(--v2-surface) !important; color: var(--v2-text);
    border: 1px solid var(--v2-border) !important; border-radius: 12px !important; box-shadow: none !important;
}
html.ui-v2 .waitlist-item:hover, html.ui-v2 .player-item:hover { transform: none !important; border-color: var(--v2-accent-ring) !important; box-shadow: var(--v2-shadow) !important; }
html.ui-v2 .waitlist-player-name, html.ui-v2 .player-name { color: var(--v2-text) !important; }
html.ui-v2 .waitlist-player-details { color: var(--v2-muted) !important; }

/* Level badges keep their meaning but use calmer tones */
html.ui-v2 .waitlist-level, html.ui-v2 .up-next-player-level, html.ui-v2 .player-level, html.ui-v2 .team-player-level,
html.ui-v2 .court-player .player-level, html.ui-v2 .up-next-player-item-level, html.ui-v2 .player-level-small {
    background: var(--v2-info-bg) !important; color: var(--v2-info) !important;
}

/* Level filter strips (courts + Up Next) — same toggles, calmer look, level colours kept */
html.ui-v2 .court-level-filters {
    background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important; box-shadow: none !important; border-radius: 12px !important;
}
html.ui-v2 .level-toggle {
    --lvl: var(--v2-muted);
    background: var(--v2-surface) !important; color: var(--v2-muted) !important; border: 1px solid var(--v2-border) !important;
    box-shadow: none !important; transform: none !important; filter: none !important; opacity: .8;
}
html.ui-v2 .level-toggle span, html.ui-v2 .level-toggle i { color: inherit !important; text-shadow: none !important; }
html.ui-v2 .level-toggle[data-level="beginners"] { --lvl: #2e9e44; }
html.ui-v2 .level-toggle[data-level="novice"] { --lvl: #138aa0; }
html.ui-v2 .level-toggle[data-level="low-intermediate"] { --lvl: #c98a00; }
html.ui-v2 .level-toggle[data-level="high-intermediate"] { --lvl: #e8590c; }
html.ui-v2 .level-toggle[data-level="advanced"] { --lvl: #d6336c; }
html.ui-v2 .level-toggle.active {
    opacity: 1; color: var(--v2-text) !important; border-color: var(--lvl) !important;
    background: color-mix(in srgb, var(--lvl) 14%, var(--v2-surface)) !important;
    box-shadow: inset 0 3px 0 var(--lvl) !important;
}
html.ui-v2 .level-toggle.active i { color: var(--lvl) !important; }
html.ui-v2 .level-toggle::before, html.ui-v2 .level-toggle::after { opacity: .5; }
html.ui-v2 .level-category-badge { background: var(--v2-soft) !important; color: var(--v2-text) !important; border-color: var(--v2-border) !important; }

/* =====================================================================
   BUTTONS
   ===================================================================== */
html.ui-v2 .btn, html.ui-v2 .btn-aesthetic, html.ui-v2 .add-up-next-players {
    border-radius: var(--v2-radius-sm) !important; box-shadow: none !important; font-weight: 700; transform: none !important;
}
html.ui-v2 .btn:hover, html.ui-v2 .btn-aesthetic:hover, html.ui-v2 .add-up-next-players:hover:not(:disabled) { transform: none !important; box-shadow: none !important; filter: brightness(1.04); }
html.ui-v2 .btn-aesthetic::before, html.ui-v2 .add-up-next-players::before { display: none !important; }
html.ui-v2 .btn-primary, html.ui-v2 .add-up-next-players, html.ui-v2 .btn-aesthetic.btn-primary {
    background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border: 1px solid var(--v2-accent) !important;
}
html.ui-v2 .btn-primary:hover:not(:disabled), html.ui-v2 .add-up-next-players:hover:not(:disabled) { background: var(--v2-accent-hover) !important; }
html.ui-v2 .btn-secondary {
    background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important;
}
html.ui-v2 .btn-success { background: var(--v2-free) !important; color: #fff !important; border: 1px solid var(--v2-free) !important; }
html[data-v2-theme="dark"].ui-v2 .btn-success { color: #0d1218 !important; }
html.ui-v2 .btn-danger { background: var(--v2-danger-bg) !important; color: var(--v2-danger) !important; border: 1px solid var(--v2-danger) !important; }
html.ui-v2 .btn-warning { background: var(--v2-play-bg) !important; color: var(--v2-play) !important; border: 1px solid var(--v2-play) !important; }
html.ui-v2 .btn-info { background: var(--v2-info-bg) !important; color: var(--v2-info) !important; border: 1px solid var(--v2-info) !important; }
html.ui-v2 .btn-unfamiliar { background: var(--v2-surface-2) !important; color: var(--v2-accent-text) !important; border: 1px solid var(--v2-accent) !important; }
html.ui-v2 .btn:disabled, html.ui-v2 .btn-aesthetic:disabled, html.ui-v2 .add-up-next-players:disabled { opacity: .45 !important; filter: none !important; }

/* =====================================================================
   FORMS
   ===================================================================== */
html.ui-v2 .form-control, html.ui-v2 input[type="text"], html.ui-v2 input[type="number"], html.ui-v2 input[type="email"],
html.ui-v2 input[type="password"], html.ui-v2 input[type="search"], html.ui-v2 select, html.ui-v2 textarea {
    background-color: var(--v2-surface) !important; color: var(--v2-text) !important;
    border: 1px solid var(--v2-border-strong) !important; border-radius: 9px !important; box-shadow: none !important;
}
html.ui-v2 .form-control:focus, html.ui-v2 input:focus, html.ui-v2 select:focus, html.ui-v2 textarea:focus {
    border-color: var(--v2-accent) !important; box-shadow: 0 0 0 3px var(--v2-accent-soft) !important; outline: none;
}
html.ui-v2 input::placeholder, html.ui-v2 textarea::placeholder { color: var(--v2-faint) !important; }
html.ui-v2 label { color: inherit; }
html.ui-v2 input[type="checkbox"], html.ui-v2 input[type="radio"] { accent-color: var(--v2-accent); }

/* =====================================================================
   TABLES (stats, game history, leaderboard)
   ===================================================================== */
html.ui-v2 table { color: var(--v2-text); }
html.ui-v2 .stats-table, html.ui-v2 .leaderboard-table { background: var(--v2-surface) !important; border-radius: 12px; overflow: hidden; }
html.ui-v2 .stats-table th, html.ui-v2 .leaderboard-table th, html.ui-v2 table thead th {
    background: var(--v2-surface-2) !important; color: var(--v2-muted) !important; border-bottom: 1px solid var(--v2-border) !important;
    position: sticky; top: 0; z-index: 1;
}
html.ui-v2 .stats-table td, html.ui-v2 .leaderboard-table td { border-bottom: 1px solid var(--v2-border) !important; color: var(--v2-text); }
html.ui-v2 .stats-table tr:hover, html.ui-v2 .leaderboard-table tr:hover { background: var(--v2-surface-2) !important; }

/* =====================================================================
   MODALS (all existing ones keep their behaviour)
   ===================================================================== */
html.ui-v2 .modal { background: var(--v2-overlay) !important; }
html.ui-v2 .modal-content, html.ui-v2 .pm-modal {
    background: var(--v2-surface) !important; color: var(--v2-text) !important;
    border: 1px solid var(--v2-border); border-radius: 16px !important; box-shadow: var(--v2-shadow-lg) !important;
    max-height: calc(100vh - 40px); overflow-y: auto;
}
html.ui-v2 .modal-header { border-bottom-color: var(--v2-border) !important; }
html.ui-v2 .modal-title, html.ui-v2 .modal-content h3 { color: var(--v2-text) !important; }
html.ui-v2 .close { color: var(--v2-muted) !important; }
html.ui-v2 .pm-modal-backdrop { background: var(--v2-overlay) !important; }
html.ui-v2 .pm-modal p { color: var(--v2-muted) !important; }
html.ui-v2 .pm-btn { background: var(--v2-soft) !important; color: var(--v2-text) !important; }
html.ui-v2 .pm-btn-primary { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; }
html.ui-v2 .pm-btn-danger { background: var(--v2-danger) !important; color: #fff !important; }
html.ui-v2 .winner-option { background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border); }
html.ui-v2 .winner-option.selected { background: var(--v2-free) !important; color: #fff !important; }
html.ui-v2 .mx-tabs { background: var(--v2-surface-2) !important; border-bottom-color: var(--v2-border) !important; }
html.ui-v2 .mx-tab { background: var(--v2-surface) !important; color: var(--v2-muted) !important; border-color: var(--v2-border) !important; }
html.ui-v2 .mx-tab.active { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border-color: var(--v2-accent) !important; }
html.ui-v2 .mx-panel li, html.ui-v2 .mx-lead { color: var(--v2-text) !important; }
html.ui-v2 .court-player-select-dropdown, html.ui-v2 .search-results-dropdown {
    background: var(--v2-surface) !important; border-color: var(--v2-border) !important; color: var(--v2-text);
}
html.ui-v2 .court-player-select-option:hover, html.ui-v2 .court-player-select-option.highlighted { background: var(--v2-soft) !important; }
html.ui-v2 .up-next-player-grid, html.ui-v2 .court-player-modal-grid { background: var(--v2-surface-2) !important; }
html.ui-v2 .up-next-player-item, html.ui-v2 .court-player-modal-item {
    background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border); box-shadow: none !important;
}
html.ui-v2 .up-next-player-item:hover, html.ui-v2 .court-player-modal-item:hover { background: var(--v2-soft) !important; transform: none !important; }

/* Gender / game-mode / suggestion widgets injected by app.js */
html.ui-v2 .gender-rule-select { background-color: var(--v2-surface) !important; }
html.ui-v2 .gender-rule-label { color: var(--v2-muted) !important; }
html.ui-v2 .gender-flow-bar, html.ui-v2 .gender-plan-card {
    background: var(--v2-surface) !important; border: 1px solid var(--v2-border) !important; color: var(--v2-text);
}
html.ui-v2 .gp-chip, html.ui-v2 .gender-queue-chip, html.ui-v2 .gender-list-count span { background: var(--v2-surface-2) !important; }
html.ui-v2 .gp-use-btn { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; }
html.ui-v2 .mode-info-btn { background: var(--v2-surface) !important; border-color: var(--v2-border) !important; color: var(--v2-accent-text) !important; }

/* Other panels from the existing pages */
html.ui-v2 .rel-legend { background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important; color: var(--v2-muted) !important; }
html.ui-v2 .rel-legend span { color: var(--v2-muted) !important; }
html.ui-v2 .rel-legend .rel-legend-dot { color: inherit; }
html.ui-v2 .locking-panel, html.ui-v2 .sort-info-header { background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; box-shadow: var(--v2-shadow) !important; }
html.ui-v2 .locking-panel h3, html.ui-v2 .locking-panel h4 { color: var(--v2-text) !important; }
html.ui-v2 .up-next-box-header { background: transparent !important; }
html.ui-v2 .waitlist-player-name.clickable-player { background: transparent !important; }
html.ui-v2 .status-btn.status-present { background: var(--v2-free-bg) !important; color: var(--v2-free) !important; border: 1px solid var(--v2-free) !important; }
html.ui-v2 .status-btn.status-absent { background: var(--v2-danger-bg) !important; color: var(--v2-danger) !important; border: 1px solid var(--v2-danger) !important; }
html.ui-v2 .timeframe-selector { background: var(--v2-soft) !important; border: 1px solid var(--v2-border) !important; box-shadow: none !important; }
html.ui-v2 .timeframe-btn { background: transparent !important; color: var(--v2-muted) !important; }
html.ui-v2 .timeframe-btn.active { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; }
html.ui-v2 .leaderboard-search-btn, html.ui-v2 .home-court-stepper-btn { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border: 0 !important; box-shadow: none !important; }
html.ui-v2 .game-mode-bar-title, html.ui-v2 .game-mode-bar label, html.ui-v2 .challenge-count { color: var(--v2-text) !important; }
html.ui-v2 .game-mode-bar span, html.ui-v2 .game-mode-default-note, html.ui-v2 .game-mode-description { color: var(--v2-muted) !important; }
html.ui-v2 .challenge-settings-row label, html.ui-v2 .challenge-settings-row span { color: var(--v2-text) !important; }
html.ui-v2 .game-mode-pill { background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; box-shadow: none !important; }
html.ui-v2 .game-mode-pill.active, html.ui-v2 .game-mode-pill.selected { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border-color: var(--v2-accent) !important; }
html.ui-v2[data-v2-theme="dark"] .gp-title, html.ui-v2[data-v2-theme="dark"] .gp-counts { color: var(--v2-text) !important; }
html.ui-v2[data-v2-theme="dark"] .gp-chip, html.ui-v2[data-v2-theme="dark"] .gender-queue-chip { color: var(--v2-text) !important; }
html.ui-v2[data-v2-theme="dark"] .gender-chip-mens, html.ui-v2[data-v2-theme="dark"] .gender-list-count .gc-m,
html.ui-v2[data-v2-theme="dark"] .gender-rule-select.gender-rule-mens { color: #7fb0ff !important; border-color: #3b5f9e !important; }
html.ui-v2[data-v2-theme="dark"] .gender-chip-womens, html.ui-v2[data-v2-theme="dark"] .gender-list-count .gc-f,
html.ui-v2[data-v2-theme="dark"] .gender-rule-select.gender-rule-womens { color: #f38cb5 !important; border-color: #8c3a5d !important; }
html.ui-v2[data-v2-theme="dark"] .gender-chip-mixed, html.ui-v2[data-v2-theme="dark"] .gender-rule-select.gender-rule-mixed { color: #b89cf5 !important; border-color: #5d4a8f !important; }
html.ui-v2[data-v2-theme="dark"] .gender-list-count .gc-u { color: var(--v2-warn) !important; background: var(--v2-warn-bg) !important; }

/* Waiting-time badges keep their colour meaning */
html.ui-v2 .waiting-time-display { background: var(--v2-info-bg) !important; color: var(--v2-info) !important; border-color: transparent !important; }
html.ui-v2 .waiting-time-display.long-wait { background: var(--v2-warn-bg) !important; color: var(--v2-warn) !important; }
html.ui-v2 .waiting-time-display.very-long-wait { background: var(--v2-danger-bg) !important; color: var(--v2-danger) !important; }

/* =====================================================================
   DARK THEME: light colours written inline by the app's scripts
   (only text/background colours are adjusted; nothing else changes)
   ===================================================================== */
html.ui-v2[data-v2-theme="dark"] [style*="background: white"],
html.ui-v2[data-v2-theme="dark"] [style*="background:white"],
html.ui-v2[data-v2-theme="dark"] [style*="background-color: white"],
html.ui-v2[data-v2-theme="dark"] [style*="background: #fff;"],
html.ui-v2[data-v2-theme="dark"] [style*="background: #ffffff"],
html.ui-v2[data-v2-theme="dark"] [style*="background:#fff;"] { background: var(--v2-surface) !important; color: var(--v2-text); }
html.ui-v2[data-v2-theme="dark"] [style*="background: #f8f9fa"],
html.ui-v2[data-v2-theme="dark"] [style*="background:#f8f9fa"],
html.ui-v2[data-v2-theme="dark"] [style*="background: #f8f9ff"],
html.ui-v2[data-v2-theme="dark"] [style*="background: #f1f3f5"],
html.ui-v2[data-v2-theme="dark"] [style*="background: #e9ecef"],
html.ui-v2[data-v2-theme="dark"] [style*="background-color: #f8f9fa"] { background: var(--v2-surface-2) !important; }
html.ui-v2[data-v2-theme="dark"] [style*="background: #e7f3ff"],
html.ui-v2[data-v2-theme="dark"] [style*="background:#e7f3ff"],
html.ui-v2[data-v2-theme="dark"] [style*="background: #e3f2fd"],
html.ui-v2[data-v2-theme="dark"] [style*="background: #cce5ff"] { background: var(--v2-info-bg) !important; color: var(--v2-info) !important; }
html.ui-v2[data-v2-theme="dark"] [style*="background: #e8f5e8"],
html.ui-v2[data-v2-theme="dark"] [style*="background: #e8f5e9"],
html.ui-v2[data-v2-theme="dark"] [style*="background: #d4edda"] { background: var(--v2-free-bg) !important; color: var(--v2-free) !important; }
html.ui-v2[data-v2-theme="dark"] [style*="background: #fff3cd"],
html.ui-v2[data-v2-theme="dark"] [style*="background:#fff3cd"],
html.ui-v2[data-v2-theme="dark"] [style*="background: #fffbea"] { background: var(--v2-warn-bg) !important; color: var(--v2-warn) !important; }
html.ui-v2[data-v2-theme="dark"] [style*="background: #f8d7da"] { background: var(--v2-danger-bg) !important; color: var(--v2-danger) !important; }
html.ui-v2[data-v2-theme="dark"] [style*="color: #6c757d"],
html.ui-v2[data-v2-theme="dark"] [style*="color:#6c757d"],
html.ui-v2[data-v2-theme="dark"] [style*="color: #666"],
html.ui-v2[data-v2-theme="dark"] [style*="color: #adb5bd"],
html.ui-v2[data-v2-theme="dark"] [style*="color: #868e96"],
html.ui-v2[data-v2-theme="dark"] [style*="color:#666"],
html.ui-v2[data-v2-theme="dark"] [style*="color:#adb5bd"],
html.ui-v2[data-v2-theme="dark"] [style*="color:#888"],
html.ui-v2[data-v2-theme="dark"] [style*="color: #888"] { color: var(--v2-muted) !important; }
html.ui-v2[data-v2-theme="dark"] [style*="color: #495057"],
html.ui-v2[data-v2-theme="dark"] [style*="color: #333"],
html.ui-v2[data-v2-theme="dark"] [style*="color: #212529"],
html.ui-v2[data-v2-theme="dark"] [style*="color: #2c3e50"],
html.ui-v2[data-v2-theme="dark"] [style*="color: #343a40"],
html.ui-v2[data-v2-theme="dark"] [style*="color:#333"],
html.ui-v2[data-v2-theme="dark"] [style*="color:#495057"],
html.ui-v2[data-v2-theme="dark"] [style*="color:#212529"],
html.ui-v2[data-v2-theme="dark"] [style*="color:#2c3e50"],
html.ui-v2[data-v2-theme="dark"] [style*="color:#343a40"] { color: var(--v2-text) !important; }
html.ui-v2[data-v2-theme="dark"] [style*="border: 1px solid #dee2e6"],
html.ui-v2[data-v2-theme="dark"] [style*="border: 1px solid #e9ecef"],
html.ui-v2[data-v2-theme="dark"] [style*="border: 2px solid #e9ecef"],
html.ui-v2[data-v2-theme="dark"] [style*="border: 1px solid #ced4da"] { border-color: var(--v2-border) !important; }

/* =====================================================================
   APPEARANCE PANEL (new design only)
   ===================================================================== */
html.ui-v2 .v2-modal-backdrop {
    position: fixed; inset: 0; z-index: 100006; background: var(--v2-overlay);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
html.ui-v2 .v2-modal {
    width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box;
    background: var(--v2-surface); color: var(--v2-text); border: 1px solid var(--v2-border);
    border-radius: 18px; box-shadow: var(--v2-shadow-lg); padding: 20px 22px; text-align: left;
}
html.ui-v2 .v2-modal-head { display: flex; align-items: center; justify-content: space-between; }
html.ui-v2 .v2-modal-head h3 { margin: 0; font-size: 20px; font-weight: 800; }
html.ui-v2 .v2-modal-close { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--v2-border); background: var(--v2-surface-2); color: var(--v2-text); font-size: 20px; cursor: pointer; }
html.ui-v2 .v2-modal h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--v2-muted); }
html.ui-v2 .v2-modal-note { margin: 6px 0 0; font-size: 13px; color: var(--v2-muted); }
html.ui-v2 .v2-segment { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--v2-soft); border-radius: 12px; }
html.ui-v2 .v2-segment button { height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--v2-muted); font-weight: 700; font-size: 13.5px; cursor: pointer; }
html.ui-v2 .v2-segment button.is-on { background: var(--v2-surface); color: var(--v2-text); box-shadow: var(--v2-shadow); }
html.ui-v2 .v2-swatches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
html.ui-v2 .v2-swatch-wrap { position: relative; }
html.ui-v2 .v2-swatch {
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px 8px;
    border-radius: 12px; border: 1px solid var(--v2-border); background: var(--v2-surface-2); color: var(--v2-text); cursor: pointer;
}
html.ui-v2 .v2-swatch:hover { border-color: var(--v2-border-strong); }
html.ui-v2 .v2-swatch.is-current { border-color: var(--v2-accent); box-shadow: 0 0 0 2px var(--v2-accent-soft); }
html.ui-v2 .v2-swatch-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
html.ui-v2 .v2-swatch-name { font-size: 11.5px; font-weight: 700; text-align: center; line-height: 1.2; }
html.ui-v2 .v2-swatch-remove {
    position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--v2-border); background: var(--v2-surface); color: var(--v2-danger); font-weight: 800; cursor: pointer; padding: 0; line-height: 1;
}
html.ui-v2 .v2-club-add { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
html.ui-v2 .v2-club-add input[type="color"] { width: 44px; height: 40px; padding: 2px !important; border-radius: 10px !important; cursor: pointer; flex-shrink: 0; }
html.ui-v2 .v2-club-add input[type="text"] { flex-grow: 1; height: 40px; padding: 0 12px; box-sizing: border-box; min-width: 0; }
html.ui-v2 .v2-btn {
    height: 40px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--v2-border); background: var(--v2-surface-2);
    color: var(--v2-text); font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap;
}
html.ui-v2 .v2-btn-primary { background: var(--v2-accent); border-color: var(--v2-accent); color: var(--v2-on-accent); }
html.ui-v2 .v2-btn-ghost { background: transparent; }
html.ui-v2 .v2-modal-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--v2-border); }

/* Toast + try note follow the theme in the new design */
html.ui-v2[data-v2-theme="dark"] #v2-toast { background: #e7ecf2; color: #0d1218; }

/* =====================================================================
   PHASE 2 — COURTS TAB LAYOUT (new design only)
   Courts on the left (2 per row, scroll on their own), a Queue panel on
   the right: Up Next, Rules, Waitlist (each scrolls on its own).
   Same elements and buttons as before; buttons that cannot be used at
   that moment are hidden (they come back the moment they can be used).
   ===================================================================== */
html.ui-v2 #courts.tab-content.active {
    display: flex !important; flex-direction: column; gap: 10px;
    height: calc(100vh - var(--v2-bar-h) - 10px); height: calc(100dvh - var(--v2-bar-h) - 10px);
    overflow: hidden !important; padding: 10px 18px 14px !important; position: relative;
}
html.ui-v2 #courts > h1,
html.ui-v2 #courts > .time-display { display: none !important; }
html.ui-v2 #courts > #courts-level-description { display: none !important; }

/* Levels ⓘ popover = the existing level description bar */
html.ui-v2 #courts.v2-show-levels > #courts-level-description {
    display: flex !important; position: absolute !important; z-index: 60 !important; top: 52px !important; right: 18px; left: auto; width: min(720px, calc(100% - 36px));
    flex-wrap: nowrap; gap: 8px !important; padding: 10px !important; margin: 0 !important; box-shadow: var(--v2-shadow-lg) !important;
}
html.ui-v2 #courts.v2-show-levels > #courts-level-description .level-description-item { padding: 8px 6px !important; }
html.ui-v2 #courts.v2-show-levels > #courts-level-description .level-description-item * { font-size: 12.5px !important; line-height: 1.3 !important; margin: 0 0 2px !important; }
html.ui-v2 #courts.v2-show-levels > #courts-level-description .level-description-item > :first-child { font-size: 13.5px !important; font-weight: 800 !important; }
html.ui-v2 #courts.v2-show-levels > #courts-level-description .level-description-item { flex: 1 1 120px; min-width: 0 !important; }

/* ---------- snapshot row ---------- */
html.ui-v2 .v2-snapshot { flex-shrink: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
html.ui-v2 .v2-stat {
    display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 10px;
    background: var(--v2-surface); border: 1px solid var(--v2-border); white-space: nowrap;
}
html.ui-v2 .v2-stat-label { color: var(--v2-muted); font-size: 12.5px; font-weight: 600; }
html.ui-v2 .v2-stat-value { color: var(--v2-text); font-size: 15px; font-weight: 800; }
html.ui-v2 .v2-stat-sub { color: var(--v2-muted); font-size: 12px; }
html.ui-v2 .v2-snap-spacer { flex: 1 1 auto; }
html.ui-v2 .v2-chip {
    display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 10px; background: var(--v2-surface);
    border: 1px solid var(--v2-border); color: var(--v2-text); font: 700 12.5px/1.2 var(--v2-font); white-space: nowrap;
}
html.ui-v2 .v2-chip-btn { cursor: pointer; }
html.ui-v2 .v2-chip-btn:hover, html.ui-v2 .v2-chip-btn[aria-expanded="true"] { border-color: var(--v2-accent); color: var(--v2-accent-text); }

/* ---------- two columns ---------- */
html.ui-v2 .v2-courts-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 16px; }
html.ui-v2 .v2-courts-main { min-height: 0; display: flex; flex-direction: column; gap: 8px; }
html.ui-v2 .v2-courts-side { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 1400px) { html.ui-v2 .v2-courts-body { grid-template-columns: minmax(0, 1fr) 420px; } }

html.ui-v2 .v2-courts-main > #rel-legend {
    flex-shrink: 0; margin: 0 !important; padding: 4px 10px !important; font-size: 11.5px !important; gap: 12px !important;
    background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--v2-muted) !important;
}

/* ---------- courts grid ---------- */
html.ui-v2 .v2-courts-main > #courts-container {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; margin: 0 !important; padding: 2px 4px 4px 2px !important;
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)) !important;
    grid-auto-rows: minmax(min-content, 1fr); gap: 14px !important; max-width: none !important; justify-content: stretch !important;
    background: transparent !important; box-shadow: none !important; border: 0 !important;
}
html.ui-v2 #courts-container > .court-row { display: contents !important; }
html.ui-v2 #courts-container .court-card {
    position: relative; width: auto !important; max-width: none !important; min-height: 0 !important; margin: 0 !important;
    flex: none !important; grid-column: auto !important; justify-self: stretch !important;
    padding: 12px 14px !important; display: flex !important; flex-flow: row wrap !important; align-items: center; align-content: flex-start;
    gap: 8px 8px; font-size: 13px;
}
html.ui-v2 #courts-container .court-card > * { flex: 0 0 100%; min-width: 0; margin: 0 !important; }

/* Row 1: name ✏️ · gender · status */
html.ui-v2 #courts-container .court-header { display: contents !important; }
html.ui-v2 #courts-container .court-title { order: 1; flex: 1 1 auto !important; min-width: 0; gap: 4px !important; }
html.ui-v2 #courts-container .court-title h3 { margin: 0 !important; font-size: 17px !important; font-weight: 800 !important; white-space: normal; overflow-wrap: break-word;  }
html.ui-v2 #courts-container .court-title > span { font-size: 11px !important; opacity: .6; cursor: pointer; }
html.ui-v2 #courts-container .court-gender-rule { order: 2; flex: 0 0 auto !important; padding: 0 !important; background: none !important; border: 0 !important; gap: 0 !important; }
html.ui-v2 #courts-container .court-gender-rule .gender-rule-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
html.ui-v2 #courts-container .gender-rule-select,
html.ui-v2 .up-next-box .gender-rule-select {
    height: 28px !important; padding: 0 6px !important; border-radius: 999px !important; font: 700 12px var(--v2-font) !important; min-width: 0 !important; width: auto !important;
}
html.ui-v2 #courts-container .court-status {
    order: 3; flex: 0 0 auto !important; padding: 5px 10px !important; border-radius: 999px !important;
    font-size: 12px !important; font-weight: 800 !important; white-space: nowrap; text-transform: none !important;
}

/* Row 2: level pills · Challenge */
html.ui-v2 #courts-container .court-level-filters {
    order: 4; flex: 1 1 auto !important; display: flex !important; flex-wrap: wrap; gap: 5px !important; padding: 0 !important;
    background: none !important; border: 0 !important; justify-content: flex-start !important; grid-template-columns: none !important;
}
html.ui-v2 .court-level-filters .level-toggle {
    flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; height: 24px; padding: 0 9px !important;
    border-radius: 999px !important; display: inline-flex !important; align-items: center; margin: 0 !important; opacity: 1;
}
html.ui-v2 .court-level-filters .level-toggle > div { flex-direction: row !important; gap: 4px; width: auto !important; }
html.ui-v2 .court-level-filters .level-toggle i,
html.ui-v2 .court-level-filters .level-toggle .blocked-indicator,
html.ui-v2 .court-level-filters .level-toggle .player-count-badge,
html.ui-v2 .court-level-filters .level-toggle .level-player-count { display: none !important; }
html.ui-v2 .court-level-filters .level-toggle::before, html.ui-v2 .court-level-filters .level-toggle::after { display: none !important; }
html.ui-v2 .court-level-filters .level-toggle span { font-size: 0 !important; line-height: 1; }
html.ui-v2 .court-level-filters .level-toggle span::after { font: 700 11.5px var(--v2-font); }
html.ui-v2 .court-level-filters .level-toggle[data-level="beginners"] span::after { content: "Beginner"; }
html.ui-v2 .court-level-filters .level-toggle[data-level="novice"] span::after { content: "Novice"; }
html.ui-v2 .court-level-filters .level-toggle[data-level="low-intermediate"] span::after { content: "Low Int"; }
html.ui-v2 .court-level-filters .level-toggle[data-level="high-intermediate"] span::after { content: "High Int"; }
html.ui-v2 .court-level-filters .level-toggle[data-level="advanced"] span::after { content: "Advanced"; }
html.ui-v2 .court-level-filters .level-toggle:not(.active) { background: transparent !important; color: var(--v2-faint) !important; border-style: dashed !important; }
html.ui-v2 .court-level-filters .level-toggle:not(.active) span::after { text-decoration: line-through; }
html.ui-v2 .court-level-filters .level-toggle.active { box-shadow: none !important; }
html.ui-v2 .court-level-filters .level-toggle.has-players { box-shadow: inset 0 -2px 0 var(--lvl) !important; }

html.ui-v2 #courts-container .challenge-court-row {
    order: 5; flex: 1 1 auto !important; display: flex !important; align-items: center; flex-wrap: wrap; gap: 6px !important; justify-content: flex-start;
    padding: 0 !important; background: none !important; border: 0 !important; font-size: 12px;
}
html.ui-v2 #courts-container .challenge-toggle { font-size: 12px !important; font-weight: 700 !important; color: var(--v2-muted) !important; gap: 5px !important; margin: 0 !important; }
html.ui-v2 #courts-container .challenge-court-row .mode-info-btn,
html.ui-v2 .v2-courts-body .mode-info-btn {
    width: 22px !important; height: 22px !important; min-width: 0 !important; padding: 0 !important; border-radius: 50% !important;
    font-size: 11px !important; line-height: 1 !important; display: inline-flex !important; align-items: center; justify-content: center;
}
html.ui-v2 #courts-container .challenge-badge { font-size: 12px !important; padding: 3px 9px !important; border-radius: 8px !important; }
html.ui-v2 #courts-container .challenge-note { flex-basis: 100%; text-align: left; font-size: 11px !important; color: var(--v2-muted) !important; margin: 0 !important; }

/* Row 3: send Up Next game (only when this court is free and a full game is ready) */
html.ui-v2 #courts-container .up-next-court-actions { order: 6; display: flex !important; flex-wrap: wrap; align-items: center; gap: 6px; }
html.ui-v2 #courts-container .up-next-court-actions[data-v2-has-send="0"] { display: none !important; }
html.ui-v2 #courts-container .up-next-court-actions::before { content: "Send:"; font-size: 12px; font-weight: 700; color: var(--v2-muted); }
html.ui-v2 #courts-container .up-next-court-actions .add-up-next-players {
    height: 30px !important; padding: 0 10px !important; margin: 0 !important; border-radius: 9px !important; font-size: 12.5px !important; font-weight: 800 !important;
    background: var(--v2-surface) !important; color: var(--v2-accent-text) !important; border: 1px solid var(--v2-accent) !important; box-shadow: none !important; width: auto !important;
}
html.ui-v2 #courts-container .up-next-court-actions .add-up-next-players:hover { background: var(--v2-accent-soft) !important; }

/* Teams: Team 1 · VS · Team 2 */
html.ui-v2 #courts-container .court-teams {
    order: 7; flex: 1 1 100% !important; align-self: stretch; display: grid !important; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    gap: 8px !important; align-items: stretch;
}
html.ui-v2 #courts-container .court-teams::before {
    content: "VS"; grid-column: 2; grid-row: 1; align-self: center; font-size: 11px; font-weight: 800; color: var(--v2-muted);
}
html.ui-v2 #courts-container .court-team { grid-row: 1; padding: 7px 9px !important; border-radius: 11px !important; border: 0 !important; margin: 0 !important; min-width: 0; box-shadow: none !important; }
html.ui-v2 #courts-container .court-team:first-child { grid-column: 1; }
html.ui-v2 #courts-container .court-team:last-child { grid-column: 3; }
html.ui-v2 #courts-container .team-header { padding: 0 0 3px !important; margin: 0 !important; border: 0 !important; background: none !important; }
html.ui-v2 #courts-container .team-name { font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .06em; text-transform: uppercase; color: var(--v2-muted) !important; }
html.ui-v2 #courts-container .team-players { display: flex !important; flex-direction: column; gap: 4px !important; }
html.ui-v2 #courts-container .team-player {
    display: flex !important; align-items: flex-start; gap: 6px; padding: 5px 6px 5px 8px !important; margin: 0 !important; border-radius: 8px !important;
    border: 1px solid var(--v2-border) !important; min-height: 0 !important; box-shadow: none !important;
}
html.ui-v2 #courts-container .team-player-info { flex: 1 1 auto; min-width: 0; display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 1px 5px; }
html.ui-v2 #courts-container .team-player-info > * { grid-row: 1; }
html.ui-v2 #courts-container .team-player-info > .team-player-stats { grid-row: 2; grid-column: 1 / -1; }
html.ui-v2 #courts-container .team-player-name { grid-column: 1; min-width: 0; font-size: 14px !important; font-weight: 700 !important; white-space: normal; overflow-wrap: break-word;  margin: 0 !important; }
html.ui-v2 #courts-container .team-player-level { grid-column: 3; padding: 1px 7px !important; border-radius: 7px !important; font-size: 11.5px !important; font-weight: 700 !important; margin: 0 !important; }
html.ui-v2 #courts-container .team-player-info > div:not([class]) { grid-column: 2; margin: 0 !important; display: inline-flex; gap: 3px; }
html.ui-v2 #courts-container .team-player-stats {
    display: flex !important; flex-wrap: nowrap; gap: 0 8px; white-space: nowrap; font-size: 11.5px !important; margin: 0 !important; min-width: 0;
}
html.ui-v2 #courts-container .team-player-stats > div { flex-shrink: 0; }
html.ui-v2 #courts-container .team-player-stats .waiting-time-display { flex: 1 1 0 !important; min-width: 0; display: block !important; background: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; color: var(--v2-muted) !important; font-size: 11.5px !important; white-space: normal; overflow-wrap: break-word;  max-width: 100%; }
html.ui-v2 #courts-container .team-player-stats .waiting-time-display i { display: none; }
html.ui-v2 #courts-container .rel-badge { font-size: 0 !important; padding: 0 !important; width: 8px; height: 8px; border-radius: 50% !important; display: inline-block !important; }
html.ui-v2 #courts-container .remove-player {
    flex-shrink: 0; width: 22px !important; height: 22px !important; min-width: 0 !important; padding: 0 !important; border-radius: 6px !important;
    background: var(--v2-danger-bg) !important; color: var(--v2-danger) !important; border: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; font-size: 11px !important;
}
html.ui-v2 #courts-container .remove-player:disabled { display: none !important; }
/* empty court */
html.ui-v2 #courts-container .court-players {
    order: 7; flex: 1 1 100% !important; align-self: stretch; min-height: 70px; display: flex !important; align-items: center; justify-content: center;
    border: 2px dashed var(--v2-border) !important; border-radius: 12px; background: transparent !important;
}
html.ui-v2 #courts-container .court-players > div { padding: 8px !important; font-size: 14px !important; font-weight: 700; color: var(--v2-muted) !important; }

/* Balance: one line */
html.ui-v2 #courts-container .court-balance-display {
    order: 8; display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 0 !important; margin: 0 !important;
    background: none !important; border: 0 !important; box-shadow: none !important; font-size: 12px; color: var(--v2-muted);
}
html.ui-v2 #courts-container .court-balance-display > div { margin: 0 !important; gap: 6px !important; }
html.ui-v2 #courts-container .court-balance-display > div:first-child strong { color: var(--v2-text) !important; font-size: 12px; }
html.ui-v2 #courts-container .court-balance-display > div:first-child span { font-size: 12px; }
html.ui-v2 #courts-container .court-balance-display > div:nth-child(2) { display: flex !important; }
html.ui-v2 #courts-container .court-balance-display > div:nth-child(2) > div {
    display: inline-flex !important; align-items: baseline; gap: 5px; padding: 1px 8px !important; border-radius: 7px !important; background: var(--v2-soft) !important;
}
html.ui-v2 #courts-container .court-balance-display > div:nth-child(2) > div > div { font-size: 11.5px !important; }
html.ui-v2 #courts-container .court-balance-display > div:nth-child(2) > div > div:nth-child(2) { color: var(--v2-text) !important; font-weight: 800; }
html.ui-v2 #courts-container .level-disparity-warning { order: 9; font-size: 12px !important; padding: 6px 10px !important; border-radius: 9px !important; }

/* Action row: only buttons that can be used now */
html.ui-v2 #courts-container .court-actions {
    order: 10; flex: 1 1 auto !important; min-width: 0; display: flex !important; flex-wrap: wrap; gap: 8px !important; padding: 0 !important; margin: 0 !important;
    grid-template-columns: none !important; background: none !important; border: 0 !important;
}
html.ui-v2 #courts-container .court-actions .btn,
html.ui-v2 #courts-container .form-group .btn {
    flex: 1 1 auto; min-width: 0; min-height: 42px; height: auto; margin: 0 !important; padding: 4px 12px !important; border-radius: 10px !important; white-space: nowrap;
    font-size: 13.5px !important; font-weight: 700 !important; line-height: 1.15 !important; text-transform: none !important; letter-spacing: 0 !important;
    display: inline-flex !important; flex-direction: column; align-items: center; justify-content: center; box-shadow: none !important; transform: none !important;
}
html.ui-v2 #courts-container .court-actions .btn:disabled,
html.ui-v2 #courts-container .form-group .btn:disabled { display: none !important; }
html.ui-v2 #courts-container .court-card[data-v2-count="0"] .clear-court { display: none !important; }
html.ui-v2 #courts-container .court-actions .start-game,
html.ui-v2 #courts-container .court-actions .end-game,
html.ui-v2 #courts-container .court-actions .add-unfamiliar-players {
    flex-grow: 1.4; background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border: 0 !important; font-weight: 800 !important;
}
html.ui-v2 #courts-container .court-actions .start-game:hover,
html.ui-v2 #courts-container .court-actions .end-game:hover,
html.ui-v2 #courts-container .court-actions .add-unfamiliar-players:hover { background: var(--v2-accent-hover) !important; }
html.ui-v2 #courts-container .court-actions .add-unfamiliar-players i { display: none; }
html.ui-v2 #courts-container .court-actions .add-unfamiliar-players br { display: none; }
html.ui-v2 #courts-container .court-actions .autofill-sublabel { font-size: 11px !important; font-weight: 600 !important; opacity: .9; color: inherit !important; }
html.ui-v2 #courts-container .court-actions .quick-end-game { background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; }
html.ui-v2 #courts-container .court-actions .quick-end-game i { display: none; }
html.ui-v2 #courts-container .court-actions .cancel-game { flex-grow: .9; background: transparent !important; color: var(--v2-muted) !important; border: 1px solid var(--v2-border) !important; }
html.ui-v2 #courts-container .court-actions .clear-court { flex-grow: .9; background: transparent !important; color: var(--v2-danger) !important; border: 1px solid var(--v2-danger) !important; }
html.ui-v2 #courts-container .court-actions .clear-court:hover { background: var(--v2-danger-bg) !important; }
html.ui-v2 #courts-container .form-group { order: 11; flex: 0 1 auto !important; display: flex; }
html.ui-v2 #courts-container .form-group .btn { background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; flex-direction: row; gap: 6px; }
html.ui-v2 #courts-container .form-group .btn i { font-size: 12px !important; }
html.ui-v2 #courts-container .form-group > div { display: none !important; } /* "N/4 players" is already shown by the teams */
html.ui-v2 #courts-container .form-group .btn:not(:disabled) { font-size: 0 !important; }
html.ui-v2 #courts-container .form-group .btn:not(:disabled)::after { content: "+ Add a Player"; font: 700 14px var(--v2-font); }
html.ui-v2 #courts-container .form-group .btn:not(:disabled) i { display: none; }

/* TV buttons for this court: small, at the end of the action row */
html.ui-v2 #courts-container .court-tv-controls-container { order: 5; margin-left: auto !important; flex: 0 0 auto !important; width: auto !important; gap: 6px !important; margin: 0 !important; }
html.ui-v2 #courts-container .court-tv-control-btn,
html.ui-v2 .up-next-box .tv-control-btn {
    height: 26px !important; padding: 0 8px !important; font: 700 11px var(--v2-font) !important; border-radius: 8px !important; display: inline-flex !important; align-items: center; gap: 4px;
    background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; box-shadow: none !important; white-space: nowrap;
}
html.ui-v2 #courts-container .court-tv-control-btn i, html.ui-v2 .up-next-box .tv-control-btn i { font-size: 11px !important; }
html.ui-v2 #courts-container .court-tv-control-btn:hover, html.ui-v2 .up-next-box .tv-control-btn:hover { border-color: var(--v2-accent) !important; color: var(--v2-accent-text) !important; }

/* ---------- queue panel: Up Next ---------- */
html.ui-v2 .v2-courts-body .up-next-section {
    flex: 1.3 1 0; min-height: 0; display: flex !important; flex-direction: column; overflow: hidden; margin: 0 !important; padding: 0 !important;
}
html.ui-v2 .v2-courts-body .up-next-header {
    flex-shrink: 0; display: flex !important; flex-direction: column; align-items: stretch !important; gap: 8px; padding: 10px 12px 8px !important; margin: 0 !important;
    border-bottom: 1px solid var(--v2-border); background: none !important;
}
html.ui-v2 .v2-courts-body .up-next-header h2 {
    margin: 0 !important; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 16px !important; font-weight: 800 !important; color: var(--v2-text) !important;
}
html.ui-v2 .v2-courts-body .up-next-header h2 > i { display: none; }
html.ui-v2 .v2-courts-body .up-next-expand-hint { display: none !important; }
html.ui-v2 .v2-courts-body .up-next-count-badge,
html.ui-v2 .v2-courts-body .game-mode-header-badge { font-size: 11.5px !important; padding: 2px 8px !important; border-radius: 999px !important; margin: 0 !important; }
html.ui-v2 .v2-courts-body .up-next-actions { display: flex !important; flex-wrap: wrap; gap: 5px !important; margin: 0 !important; justify-content: flex-start !important; }
html.ui-v2 .v2-courts-body .up-next-actions .btn {
    height: 30px !important; min-height: 0 !important; padding: 0 7px !important; margin: 0 !important; border-radius: 9px !important;
    font: 700 11.5px var(--v2-font) !important; width: auto !important; min-width: 0 !important; max-width: none !important; flex: 0 0 auto; box-shadow: none !important; animation: none !important; transform: none !important;
    background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; display: inline-flex !important; align-items: center; gap: 5px;
}
html.ui-v2 .v2-courts-body .up-next-actions .btn i { font-size: 11px !important; }
html.ui-v2 .v2-courts-body .up-next-actions #add-unfamiliar-up-next-btn i { display: none; }
html.ui-v2 .v2-courts-body .up-next-actions #add-unfamiliar-up-next-btn { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border-color: var(--v2-accent) !important; order: -1; }
html.ui-v2 .v2-courts-body .up-next-actions #clear-up-next-btn { background: transparent !important; color: var(--v2-danger) !important; border-color: var(--v2-danger) !important; }
/* shorter labels, same buttons */
html.ui-v2 .v2-courts-body #add-next-four-btn,
html.ui-v2 .v2-courts-body #add-player-up-next-btn,
html.ui-v2 .v2-courts-body #clear-up-next-btn,
html.ui-v2 .v2-courts-body #add-up-next-game-btn { font-size: 0 !important; }
html.ui-v2 .v2-courts-body #add-next-four-btn i,
html.ui-v2 .v2-courts-body #add-player-up-next-btn i,
html.ui-v2 .v2-courts-body #clear-up-next-btn i,
html.ui-v2 .v2-courts-body #add-up-next-game-btn i { display: none; }
html.ui-v2 .v2-courts-body #add-next-four-btn::after { content: "Add Next 4"; font-size: 12px; }
html.ui-v2 .v2-courts-body #add-player-up-next-btn::after { content: "+ Player"; font-size: 12px; }
html.ui-v2 .v2-courts-body #clear-up-next-btn::after { content: "Clear All"; font-size: 12px; }
html.ui-v2 .v2-courts-body #add-up-next-game-btn::after { content: "+ Game"; font-size: 12px; }

html.ui-v2 .v2-courts-body #up-next-level-filters { flex-shrink: 0; padding: 6px 12px 0 !important; margin: 0 !important; }
html.ui-v2 .v2-courts-body #up-next-level-filters .level-toggle { height: 22px; padding: 0 8px !important; }
html.ui-v2 .v2-courts-body #up-next-level-filters .level-toggle span::after { font-size: 11px; }
html.ui-v2 .v2-courts-body #gender-plan-card {
    flex-shrink: 0; margin: 6px 12px 0 !important; padding: 6px 10px !important; gap: 6px !important; border-radius: 10px !important; font-size: 12px;
}
html.ui-v2 .v2-courts-body #gender-plan-card .gp-title { font-size: 12.5px !important; }
html.ui-v2 .v2-courts-body #gender-plan-card .gp-chip { font-size: 11.5px !important; padding: 2px 8px !important; }

html.ui-v2 .v2-courts-body #up-next-container {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px !important; margin: 0 !important; display: flex !important; flex-direction: column; gap: 7px;
}
html.ui-v2 .v2-courts-body .up-next-row > * { flex-shrink: 0; }
html.ui-v2 .v2-courts-body .up-next-row { flex-shrink: 0; display: flex !important; flex-direction: column; gap: 7px !important; min-height: 0 !important; margin: 0 !important; }
html.ui-v2 .v2-courts-body .up-next-box {
    position: relative; min-height: 0 !important; padding: 8px 10px 8px 24px !important; margin: 0 !important; gap: 6px; display: flex !important; flex-direction: column;
}
html.ui-v2 .v2-courts-body .up-next-box .drag-handle { left: 8px !important; top: 9px !important; font-size: 13px !important; }
html.ui-v2 .v2-courts-body .up-next-box-header {
    display: flex !important; flex-direction: row !important; align-items: center; flex-wrap: wrap; gap: 6px !important; padding: 0 64px 0 0 !important; margin: 0 !important; border: 0 !important; min-height: 26px;
}
html.ui-v2 .v2-courts-body .up-next-box-header .header-left { display: flex !important; align-items: center; gap: 6px !important; flex-wrap: wrap; margin: 0 !important; }
html.ui-v2 .v2-courts-body .up-next-game-number { font-size: 13px !important; font-weight: 800 !important; }
html.ui-v2 .v2-courts-body .up-next-box .player-count-badge { font-size: 11.5px !important; padding: 1px 7px !important; border-radius: 999px !important; background: var(--v2-soft) !important; color: var(--v2-muted) !important; }
html.ui-v2 .v2-courts-body .up-next-box .tv-controls-container { margin-left: 2px !important; gap: 4px !important; }
html.ui-v2 .v2-courts-body .up-next-box .tv-control-btn { height: 22px !important; padding: 0 6px !important; font-size: 10.5px !important; }
html.ui-v2 .v2-courts-body .up-next-gender-row { margin: 0 !important; padding: 0 !important; }
html.ui-v2 .v2-courts-body .up-next-box .gender-rule-select { height: 24px !important; font-size: 11.5px !important; }
html.ui-v2 .v2-courts-body .up-next-box-header .header-right { position: absolute; top: 7px; right: 38px; margin: 0 !important; }
html.ui-v2 .v2-courts-body .up-next-box-header .header-right .btn,
html.ui-v2 .v2-courts-body .up-next-box-header .header-right button {
    width: 24px !important; height: 24px !important; min-width: 0 !important; padding: 0 !important; border-radius: 7px !important; font-size: 11px !important;
    background: var(--v2-surface) !important; color: var(--v2-muted) !important; border: 1px solid var(--v2-border) !important; display: inline-flex !important; align-items: center; justify-content: center;
}
/* "Clear Game" becomes the small × at the top right of its game */
html.ui-v2 .v2-courts-body .up-next-box .clear-up-next-game {
    position: absolute; top: 7px; right: 8px; width: 24px !important; height: 24px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
    border-radius: 7px !important; font-size: 0 !important; background: var(--v2-danger-bg) !important; color: var(--v2-danger) !important; border: 0 !important;
    display: inline-flex !important; align-items: center; justify-content: center;
}
html.ui-v2 .v2-courts-body .up-next-box .clear-up-next-game i { display: none; }
html.ui-v2 .v2-courts-body .up-next-box .clear-up-next-game::after { content: "×"; font: 800 15px/1 var(--v2-font); }
html.ui-v2 .v2-courts-body .up-next-box:not(:has(.up-next-player)) .clear-up-next-game { display: none !important; }
html.ui-v2 .v2-courts-body .up-next-balance-indicator {
    display: flex !important; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 3px 8px !important; margin: 0 !important; border-radius: 8px !important; font-size: 11.5px !important;
}
html.ui-v2 .v2-courts-body .up-next-balance-indicator .balance-header { display: flex; gap: 8px; margin: 0 !important; }
html.ui-v2 .v2-courts-body .up-next-balance-indicator .balance-text,
html.ui-v2 .v2-courts-body .up-next-balance-indicator .balance-details { font-size: 11.5px !important; padding: 0 !important; background: none !important; }
html.ui-v2 .v2-courts-body .up-next-balance-indicator .level-category-badges { display: flex; gap: 4px; margin: 0 !important; }
html.ui-v2 .v2-courts-body .up-next-balance-indicator .level-category-badge { font-size: 10.5px !important; padding: 0 6px !important; }
html.ui-v2 .v2-courts-body .up-next-players { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px !important; margin: 0 !important; min-height: 0 !important; }
html.ui-v2 .v2-courts-body .up-next-players:empty { display: flex !important; align-items: center; justify-content: center; min-height: 30px !important; border: 1px dashed var(--v2-border-strong); border-radius: 8px; }
html.ui-v2 .v2-courts-body .up-next-players:empty::before { content: "Open game · drag players here or use Add"; font-size: 11.5px; color: var(--v2-muted); }
html.ui-v2 .v2-courts-body .up-next-player {
    display: flex !important; align-items: center; gap: 6px; padding: 3px 4px 3px 8px !important; margin: 0 !important; border-radius: 8px !important; min-width: 0; min-height: 0 !important;
}
html.ui-v2 .v2-courts-body .up-next-player-info { flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; gap: 5px; }
html.ui-v2 .v2-courts-body .up-next-player-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px !important; font-weight: 700 !important; white-space: normal; overflow-wrap: break-word;  display: block !important; margin: 0 !important; }
html.ui-v2 .v2-courts-body .up-next-player-name .up-next-player-level { font-size: 11px !important; padding: 0 5px !important; margin-left: 2px !important; }
html.ui-v2 .v2-courts-body .up-next-player-info > div:not([class]) { margin: 0 !important; flex-shrink: 0; }
html.ui-v2 .v2-courts-body .up-next-player-info .rel-badge { font-size: 0 !important; padding: 0 !important; width: 8px; height: 8px; border-radius: 50% !important; display: inline-block !important; vertical-align: middle; }
html.ui-v2 .v2-courts-body .up-next-player-stats { display: none !important; }
html.ui-v2 .v2-courts-body .up-next-remove-player {
    flex-shrink: 0; width: 18px !important; height: 18px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 5px !important;
    background: transparent !important; color: var(--v2-muted) !important; font-size: 10px !important; display: inline-flex !important; align-items: center; justify-content: center;
}
html.ui-v2 .v2-courts-body .up-next-remove-player:hover { background: var(--v2-danger-bg) !important; color: var(--v2-danger) !important; }
html.ui-v2 .v2-courts-body .up-next-add-more-box { min-height: 0 !important; padding: 4px !important; border-width: 1px !important; border-radius: 10px !important; display: flex !important; justify-content: center; }
html.ui-v2 .v2-courts-body .up-next-add-more-box .add-more-hint { display: none !important; }
html.ui-v2 .v2-courts-body .up-next-add-more-box .btn { height: 28px !important; padding: 0 12px !important; font: 700 12px var(--v2-font) !important; border-radius: 8px !important; background: transparent !important; color: var(--v2-accent-text) !important; border: 0 !important; box-shadow: none !important; }
html.ui-v2 .v2-courts-body #up-next-stats {
    flex-shrink: 0; display: flex !important; gap: 14px; padding: 7px 12px !important; margin: 0 !important; border-radius: 0 !important; border-top: 1px solid var(--v2-border);
    background: none !important; font-size: 12px !important; justify-content: flex-start !important;
}
html.ui-v2 .v2-courts-body .up-next-stat { display: inline-flex !important; gap: 4px; padding: 0 !important; background: none !important; flex-direction: row !important; }
html.ui-v2 .v2-courts-body .up-next-stat-label, html.ui-v2 .v2-courts-body .up-next-stat-value { font-size: 12px !important; }
html.ui-v2 .v2-courts-body .up-next-stat-value { font-weight: 800 !important; }
html.ui-v2 .v2-courts-body .no-up-next-message { margin: 0 !important; padding: 10px !important; font-size: 12.5px !important; }

/* ---------- queue panel: Rules ---------- */
html.ui-v2 .v2-courts-side > .restriction-toggles-container {
    flex-shrink: 0; margin: 0 !important; padding: 7px 12px !important; gap: 4px 10px !important; justify-content: flex-start !important; border-radius: 12px !important;
    font-size: 12px; box-shadow: none !important;
}
html.ui-v2 .v2-courts-side > .restriction-toggles-container::before { content: "Rules"; font-weight: 800; color: var(--v2-text); }
html.ui-v2 .v2-courts-side > .restriction-toggles-container label { gap: 5px !important; margin: 0 !important; }
html.ui-v2 .v2-courts-side > .restriction-toggles-container input { width: 14px !important; height: 14px !important; margin: 0 !important; }
html.ui-v2 .v2-courts-side > .restriction-toggles-container label span { font-size: 0 !important; color: var(--v2-text) !important; }
html.ui-v2 .v2-courts-side > .restriction-toggles-container label span::after { font: 600 12px var(--v2-font); }
html.ui-v2 .v2-courts-body label:has(#disable-restriction-toggle) span::after { content: "No 5-min rest"; }
html.ui-v2 .v2-courts-body label:has(#encounter-restriction-toggle) span::after { content: "No 2+ meets"; }
html.ui-v2 .v2-courts-body label:has(#level-gap-restriction-toggle) span::after { content: "Level gap"; }
html.ui-v2 .v2-courts-body label:has(#fresh-players-only-toggle) span::after { content: "Fresh only"; }
html.ui-v2 .v2-courts-body #level-gap-view-table-btn { margin: 0 0 0 -8px !important; font-size: 13px !important; color: var(--v2-muted) !important; padding: 0 2px !important; }

/* ---------- queue panel: Waitlist ---------- */
html.ui-v2 .v2-waitlist-card {
    flex: .9 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
    background: var(--v2-surface); border: 1px solid var(--v2-border); border-radius: var(--v2-radius); box-shadow: var(--v2-shadow);
}
html.ui-v2 .v2-waitlist-card > #gender-warning-banner { flex-shrink: 0; margin: 8px 10px 0 !important; font-size: 12px !important; padding: 6px 10px !important; }
html.ui-v2 .v2-waitlist-card > .waitlist-header {
    flex-shrink: 0; display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px !important; margin: 0 !important;
    border-bottom: 1px solid var(--v2-border); background: none !important;
}
html.ui-v2 .v2-waitlist-card > .waitlist-header h2 { margin: 0 !important; font-size: 16px !important; font-weight: 800 !important; color: var(--v2-text) !important; }
html.ui-v2 .v2-waitlist-card .waitlist-controls { flex: 1 1 auto; min-width: 0; display: flex !important; align-items: center; gap: 6px !important; flex-wrap: nowrap; margin: 0 !important; justify-content: flex-end; }
html.ui-v2 .v2-waitlist-card .waitlist-controls > div { flex: 1 1 90px; min-width: 70px; }
html.ui-v2 .v2-waitlist-card .waitlist-controls .form-control {
    height: 28px !important; min-height: 0 !important; font-size: 12px !important; padding: 0 6px !important; border-radius: 8px !important; margin: 0 !important;
}
html.ui-v2 .v2-waitlist-card #waitlist-search { width: 100% !important; padding-left: 24px !important; }
html.ui-v2 .v2-waitlist-card .waitlist-controls .fa-search { left: 8px !important; font-size: 11px; }
html.ui-v2 .v2-waitlist-card #waitlist-sort { width: 122px !important; flex: 0 1 122px; }
html.ui-v2 .v2-waitlist-card .gender-list-tools { display: inline-flex !important; align-items: center; gap: 5px; margin: 0 !important; flex-shrink: 0; }
html.ui-v2 .v2-waitlist-card #gender-filter-waitlist { width: 96px !important; min-width: 0 !important; }
html.ui-v2 .v2-waitlist-card .gender-list-count { display: inline-flex; gap: 4px; font-size: 11.5px; white-space: nowrap; }
html.ui-v2 .v2-waitlist-card > #waitlist-grid {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex !important; flex-direction: column; gap: 5px !important; padding: 6px 10px !important; margin: 0 !important;
    grid-template-columns: none !important; max-height: none !important;
}
html.ui-v2 .v2-waitlist-card .waitlist-item {
    flex-shrink: 0; position: relative; display: grid !important; grid-template-columns: minmax(0, 1fr) auto 86px auto; grid-template-areas: "name lvl sel btn" "det det sel btn";
    align-items: center; column-gap: 6px; row-gap: 1px; padding: 6px 8px !important; margin: 0 !important; border-radius: 9px !important; min-height: 0 !important;
    background: var(--v2-surface-2) !important; text-align: left !important; flex-direction: row !important; width: auto !important;
}
html.ui-v2 .v2-waitlist-card .waitlist-item > .waitlist-player-name { grid-area: name; margin: 0 !important; padding: 0 !important; line-height: 1.3 !important; background: none !important; min-height: 0 !important; font-size: 13.5px !important; font-weight: 700 !important; white-space: normal; overflow-wrap: break-word;  text-align: left !important; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .waitlist-level { grid-area: lvl; margin: 0 !important; padding: 1px 6px !important; border-radius: 6px !important; font-size: 11.5px !important; font-weight: 700; justify-self: start; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .waitlist-player-details {
    grid-area: det; min-width: 0; margin: 0 !important; display: flex !important; align-items: center; gap: 8px; font-size: 11.5px !important; white-space: nowrap; overflow: hidden; text-align: left !important;
}
html.ui-v2 .v2-waitlist-card .waitlist-player-details > div { margin: 0 !important; flex-shrink: 0; }
html.ui-v2 .v2-waitlist-card .waitlist-player-details .waiting-time-display {
    display: inline-flex !important; align-items: center; gap: 4px; padding: 0 7px !important; border-radius: 6px !important; font-size: 11.5px !important; font-weight: 700; background: var(--v2-soft) !important; color: var(--v2-muted) !important; flex-shrink: 1; min-width: 0;
}
html.ui-v2 .v2-waitlist-card .waitlist-player-details .waiting-time-display i { display: none; }
html.ui-v2 .v2-waitlist-card .waitlist-player-details .waiting-time-display span[style] { font-size: 10px !important; padding: 0 5px !important; }
html.ui-v2 .v2-waitlist-card .waitlist-player-details .waiting-time-display.long-wait { background: var(--v2-play-bg) !important; color: var(--v2-play) !important; }
html.ui-v2 .v2-waitlist-card .waitlist-item > select { grid-area: sel; width: 86px !important; height: 28px !important; min-height: 0 !important; margin: 0 !important; padding: 0 4px !important; font-size: 12px !important; border-radius: 8px !important; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .add-to-court-btn {
    grid-area: btn; height: 28px !important; min-height: 0 !important; padding: 0 9px !important; margin: 0 !important; border-radius: 8px !important; width: auto !important;
    font-size: 0 !important; background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border: 0 !important; box-shadow: none !important; white-space: nowrap;
}
html.ui-v2 .v2-waitlist-card .waitlist-item > .add-to-court-btn i { display: none; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .add-to-court-btn::after { content: "+ First free"; font: 800 12px var(--v2-font); }
html.ui-v2 .v2-waitlist-card .waitlist-item > .add-to-court-btn:disabled { display: none !important; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .waitlist-lock-indicator { position: absolute; top: -5px; left: -5px; margin: 0 !important; width: 16px !important; height: 16px !important; font-size: 9px !important; z-index: 1; }
html.ui-v2 .v2-waitlist-card .waitlist-item > *:not(.waitlist-player-name):not(.waitlist-level):not(.waitlist-player-details):not(select):not(.add-to-court-btn):not(.waitlist-lock-indicator) { grid-column: 1 / -1; }

@media (max-width: 1240px) {
    html.ui-v2 #courts.tab-content.active { height: calc(100vh - var(--v2-bar-h) - var(--v2-tabs-row) - 10px); height: calc(100dvh - var(--v2-bar-h) - var(--v2-tabs-row) - 10px); }
}
/* ---------- smaller screens: stack, page scrolls as before ---------- */
@media (max-width: 1100px) {
    html.ui-v2 #courts.tab-content.active { height: auto; overflow: auto !important; }
    html.ui-v2 .v2-courts-body { display: flex; flex-direction: column; }
    html.ui-v2 .v2-courts-main > #courts-container { overflow: visible; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)) !important; }
    html.ui-v2 .v2-courts-body .up-next-section, html.ui-v2 .v2-waitlist-card { flex: none; max-height: 70vh; }
}

/* Court name icon smaller; × fallback if the icon font is slow to load */
html.ui-v2 #courts-container .court-title h3::before { transform: scale(.8); margin-right: 2px !important; }
html.ui-v2 #courts-container .court-card { transition: none !important; }
html.ui-v2 .v2-courts-body #up-next-level-filters { background: none !important; border: 0 !important; box-shadow: none !important; justify-content: flex-start !important; }
html.ui-v2 .v2-courts-body .up-next-box-header .header-left { display: contents !important; }
html.ui-v2 .v2-courts-body .up-next-box-header .up-next-game-number { order: 1; }
html.ui-v2 .v2-courts-body .up-next-box-header .player-count-badge { order: 2; }
html.ui-v2 .v2-courts-body .up-next-box-header .up-next-gender-row { order: 3; }
html.ui-v2 .v2-courts-body .up-next-box-header .tv-controls-container { order: 4; margin: 0 !important; }
html.ui-v2 .v2-courts-body .up-next-box .tv-control-btn { font-size: 10px !important; padding: 0 5px !important; }
html.ui-v2 .v2-courts-body #gender-plan-card .gp-counts { font-size: 12px !important; }
/* × drawn by the stylesheet so the remove buttons never look blank */
html.ui-v2 #courts-container .remove-player i, html.ui-v2 .v2-courts-body .up-next-remove-player i { display: none !important; }
html.ui-v2 #courts-container .remove-player::after, html.ui-v2 .v2-courts-body .up-next-remove-player::after { content: "×"; font: 800 14px/1 var(--v2-font); }
html.ui-v2 #courts-container .court-balance-display > div:first-child { flex: 0 1 auto; }
html.ui-v2 .v2-courts-body .up-next-box-header .up-next-gender-row { flex: 0 0 auto !important; width: auto !important; }
html.ui-v2 .v2-courts-body .up-next-box-header .player-count-badge { margin: 0 !important; }
html.ui-v2 #courts-container .rel-badge, html.ui-v2 .v2-courts-body .up-next-player-info .rel-badge { background-color: currentColor !important; border: 0 !important; }
/* gender tags: quiet coloured symbol instead of a white pill */
html.ui-v2 #courts .gender-tag { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 1px !important; font-weight: 800; }
html.ui-v2 #courts .gender-tag.gender-m { color: var(--v2-info) !important; }
html.ui-v2 #courts .gender-tag.gender-f { color: #c2306b !important; }
html.ui-v2[data-v2-theme="dark"] #courts .gender-tag.gender-f { color: #f38cb5 !important; }
/* a full court that has not started yet reads "Ready to start" */
html.ui-v2 #courts-container .court-card[data-v2-state="ready"] .court-status { background: var(--v2-info-bg) !important; color: var(--v2-info) !important; font-size: 0 !important; }
html.ui-v2 #courts-container .court-card[data-v2-state="ready"] .court-status::after { content: "Ready to start"; font: 800 12px var(--v2-font); }
html.ui-v2 #courts-container .court-card[data-v2-state="ready"] { border-top-color: var(--v2-info) !important; }
html.ui-v2 .v2-courts-body #game-mode-header-badge { display: none !important; } /* the mode is shown in the snapshot row */
html.ui-v2 .v2-courts-side > .v2-waitlist-card { min-height: 260px; }

/* =====================================================================
   PHASE 3 — HOME, PLAYERS, STATS, LEADERBOARD (new design only)
   Same elements and buttons; tighter layout, one button style, and
   buttons that cannot be used at that moment are hidden.
   ===================================================================== */
/* One compact button size on these tabs (overrides the big inline sizes) */
html.ui-v2 #home .btn, html.ui-v2 #players .players-tab-section .btn, html.ui-v2 #players .lock-players-btn-big,
html.ui-v2 #stats .btn, html.ui-v2 #leaderboard .btn, html.ui-v2 #leaderboard .leaderboard-search-btn {
    min-height: 36px; height: auto !important; padding: 7px 14px !important; margin: 0 !important; font: 700 13.5px/1.2 var(--v2-font) !important;
    border-radius: 10px !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; width: auto !important;
    text-transform: none !important; letter-spacing: 0 !important; background-image: none !important; white-space: nowrap;
}
html.ui-v2 #home .btn i, html.ui-v2 #players .players-tab-section .btn i, html.ui-v2 #players .lock-players-btn-big i,
html.ui-v2 #stats .btn i, html.ui-v2 #leaderboard .btn i, html.ui-v2 #leaderboard .leaderboard-search-btn i { font-size: 12.5px !important; margin: 0 !important; }
/* Option B: hide what can't be used right now */
html.ui-v2 #home .btn:disabled, html.ui-v2 #players .btn:disabled, html.ui-v2 #players .status-btn:disabled,
html.ui-v2 #stats .btn:disabled, html.ui-v2 #leaderboard .btn:disabled { display: none !important; }

/* Section cards */
html.ui-v2 #home .home-court-setup-card, html.ui-v2 #home #tv-controls-section,
html.ui-v2 #players .players-tab-section, html.ui-v2 #players .locking-panel,
html.ui-v2 #leaderboard .leaderboard-header, html.ui-v2 #leaderboard .leaderboard-container {
    background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important;
    border-radius: var(--v2-radius) !important; box-shadow: var(--v2-shadow) !important; margin: 0 !important;
}

/* ---------------- HOME: two columns ---------------- */
html.ui-v2 #home.tab-content.active {
    display: grid !important; grid-template-columns: minmax(360px, 1fr) minmax(420px, 1.25fr); gap: 16px; align-items: start;
    max-width: 1280px; margin: 0 auto !important; padding: 16px 18px 20px !important;
}
html.ui-v2 #home > * { margin: 0 !important; max-width: none !important; width: auto !important; }
html.ui-v2 #home .home-court-setup-card { padding: 16px 18px !important; text-align: left !important; display: flex; flex-direction: column; gap: 12px; }
html.ui-v2 #home .home-court-setup-title { margin: 0 !important; font-size: 17px !important; font-weight: 800 !important; text-align: left !important; display: flex; align-items: center; gap: 8px; color: var(--v2-text) !important; }
html.ui-v2 #home .home-court-setup-title i { color: var(--v2-accent-text) !important; font-size: 15px; }
html.ui-v2 #home .home-court-stepper-group { margin: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; text-align: left !important; }
html.ui-v2 #home .home-court-stepper-group > label { margin: 0 !important; font-weight: 700; font-size: 14px; }
html.ui-v2 #home .home-court-stepper { margin: 0 !important; gap: 8px !important; justify-content: flex-start !important; }
html.ui-v2 #home .home-court-stepper-btn { width: 36px !important; height: 36px !important; min-width: 0 !important; border-radius: 10px !important; font-size: 18px !important; padding: 0 !important; }
html.ui-v2 #home #court-count { width: 64px !important; height: 36px !important; text-align: center; font-size: 16px !important; font-weight: 800; padding: 0 !important; opacity: 1 !important; }
html.ui-v2 #home #tier-upgrade-badge {
    flex: 1 0 100%; margin: 0 !important; padding: 8px 12px !important; border-radius: 10px !important; font-size: 13px !important; gap: 8px;
    background: var(--v2-accent-soft) !important; color: var(--v2-accent-text) !important; border: 1px solid var(--v2-accent-ring) !important; box-shadow: none !important;
}
html.ui-v2 #home #tier-upgrade-badge * { color: inherit !important; }
html.ui-v2 #home #update-court-count { align-self: flex-start; }
html.ui-v2 #home .game-mode-bar, html.ui-v2 #home .challenge-settings {
    margin: 0 !important; padding: 12px 0 0 !important; background: none !important; border: 0 !important; border-top: 1px solid var(--v2-border) !important;
    border-radius: 0 !important; box-shadow: none !important; text-align: left !important; display: flex; flex-direction: column; gap: 8px; align-items: stretch !important;
}
html.ui-v2 #home .game-mode-bar-title { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-start !important; font-size: 14.5px !important; font-weight: 800 !important; margin: 0 !important; }
html.ui-v2 #home .game-mode-bar-title i { color: var(--v2-accent-text) !important; }
html.ui-v2 #home .game-mode-pills { display: flex !important; gap: 6px !important; flex-wrap: wrap; justify-content: flex-start !important; margin: 0 !important; }
html.ui-v2 #home .game-mode-pill { flex: 1 1 0; min-width: 0; height: 38px; padding: 0 10px !important; border-radius: 10px !important; font: 700 13.5px var(--v2-font) !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; margin: 0 !important; }
html.ui-v2 #home .game-mode-description { margin: 0 !important; font-size: 12.5px !important; text-align: left !important; }
html.ui-v2 #home .challenge-settings-row { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px !important; justify-content: flex-start !important; margin: 0 !important; font-size: 13.5px; }
html.ui-v2 #home #challenge-streak-cap { width: 64px !important; height: 32px !important; text-align: center; padding: 0 !important; }
html.ui-v2 #home .challenge-all-btn { min-height: 30px !important; padding: 4px 12px !important; font-size: 12.5px !important; background: var(--v2-warn-bg) !important; color: var(--v2-warn) !important; border: 1px solid var(--v2-warn) !important; }

/* TV Display System card: same buttons, calm surface */
html.ui-v2 #home #tv-controls-section { padding: 16px 18px !important; text-align: left !important; display: flex; flex-direction: column; gap: 12px; }
html.ui-v2 #home #tv-controls-section h3 { margin: 0 !important; font-size: 17px !important; font-weight: 800 !important; color: var(--v2-text) !important; justify-content: flex-start !important; }
html.ui-v2 #home #tv-controls-section h3 i, html.ui-v2 #home #tv-controls-section h4 i { color: var(--v2-accent-text) !important; }
html.ui-v2 #home #tv-controls-section p { margin: 0 !important; color: var(--v2-muted) !important; font-size: 13px; opacity: 1 !important; }
html.ui-v2 #home #tv-controls-section > div { margin: 0 !important; padding-top: 0 !important; justify-content: flex-start !important; gap: 8px !important; border-color: var(--v2-border) !important; }
html.ui-v2 #home #tv-controls-section > div:has(h4) { border-top: 1px solid var(--v2-border) !important; padding-top: 12px !important; }
html.ui-v2 #home #tv-controls-section h4 { margin: 0 0 8px !important; font-size: 14px !important; font-weight: 800; color: var(--v2-text) !important; text-align: left; }
html.ui-v2 #home #tv-controls-section > div:last-child { font-size: 12px !important; color: var(--v2-muted) !important; opacity: 1 !important; }
html.ui-v2 #home #tv-controls-section .btn:not(#open-court-tv-display) { background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; opacity: 1 !important; }
html.ui-v2 #home #tv-controls-section .btn:not(#open-court-tv-display):hover { border-color: var(--v2-accent) !important; color: var(--v2-accent-text) !important; }
html.ui-v2 #home #open-court-tv-display { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border: 0 !important; min-height: 42px; font-size: 14.5px !important; }
html.ui-v2 #home #tv-top5-logo-thumb { border-color: var(--v2-border-strong) !important; background-color: var(--v2-surface-2) !important; color: var(--v2-muted) !important; }
html.ui-v2 #home .home-display-settings-card, html.ui-v2 #home .home-logo-card { grid-column: 2; }

/* ---------------- PLAYERS ---------------- */
html.ui-v2 #players.tab-content.active { display: flex !important; flex-direction: column; gap: 10px; padding: 12px 18px 20px !important; }
html.ui-v2 #players > * { margin: 0 !important; }
/* counts as one slim row */
html.ui-v2 #players .stats-grid { display: flex !important; gap: 8px !important; flex-wrap: wrap; margin: 0 !important; }
html.ui-v2 #players .stat-card {
    flex: 0 0 auto; display: inline-flex !important; flex-direction: row !important; align-items: baseline; gap: 8px; padding: 8px 14px !important;
    min-height: 0 !important; border-radius: 10px !important; box-shadow: none !important; text-align: left !important;
}
html.ui-v2 #players .stat-card .stat-label { font-size: 12.5px !important; font-weight: 600; margin: 0 !important; order: 1; }
html.ui-v2 #players .stat-card .stat-value { font-size: 17px !important; font-weight: 800 !important; margin: 0 !important; order: 2; color: var(--v2-text) !important; }
/* session + locking side by side */
html.ui-v2 #players .players-tab-top-row { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px !important; margin: 0 !important; }
html.ui-v2 #players .players-tab-top-row > * { margin: 0 !important; min-width: 0; }
html.ui-v2 #players .players-tab-section { padding: 10px 14px !important; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; }
html.ui-v2 #players .players-tab-section-title { margin: 0 !important; font-size: 13px !important; font-weight: 800 !important; color: var(--v2-text) !important; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
html.ui-v2 #players .players-tab-section-title i { color: var(--v2-accent-text) !important; }
html.ui-v2 #players .players-tab-section-buttons { display: flex !important; flex-wrap: wrap; gap: 8px !important; align-items: center; margin: 0 !important; flex: 1 1 auto; }
html.ui-v2 #players .locking-panel { padding: 10px 14px !important; display: flex; flex-direction: column; gap: 6px; }
html.ui-v2 #players .locking-panel-header { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; margin: 0 !important; }
html.ui-v2 #players .locking-panel-header h2 { margin: 0 !important; font-size: 13px !important; font-weight: 800 !important; display: flex; align-items: center; gap: 6px; }
html.ui-v2 #players .locking-panel-header h2 i { color: var(--v2-accent-text) !important; }
html.ui-v2 #players .lock-players-btn-big { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border: 0 !important; }
html.ui-v2 #players .locked-pairs-chips { margin: 0 !important; font-size: 12.5px; }
html.ui-v2 #players .locked-pairs-empty { margin: 0 !important; padding: 0 !important; font-size: 12.5px !important; color: var(--v2-muted) !important; }
/* levels as one slim row */
html.ui-v2 #players #players-level-description { display: flex !important; flex-wrap: nowrap; gap: 6px !important; padding: 6px !important; margin: 0 !important; }
html.ui-v2 #players #players-level-description .level-description-item {
    flex: 1 1 0; min-width: 0 !important; padding: 6px 10px !important; display: flex !important; flex-direction: row !important; align-items: center; gap: 8px;
    text-align: left !important; border-radius: 9px !important; flex-wrap: wrap;
}
html.ui-v2 #players #players-level-description .level-range { order: 2; font-size: 11.5px !important; color: var(--v2-muted) !important; margin: 0 !important; }
html.ui-v2 #players #players-level-description .level-label { order: 1; font-size: 13px !important; font-weight: 800 !important; margin: 0 !important; color: var(--v2-text) !important; }
html.ui-v2 #players #players-level-description .level-player-count { order: 3; margin: 0 0 0 auto !important; font-size: 11.5px !important; padding: 1px 8px !important; }
/* search + sort */
html.ui-v2 #players .search-input-container { margin: 0 !important; }
html.ui-v2 #players #player-search { width: 260px !important; height: 34px !important; padding-left: 34px !important; }
html.ui-v2 #players #search-sort-section label { margin: 0 !important; font-size: 13px; color: var(--v2-muted) !important; }
html.ui-v2 #players #player-sort { width: 190px !important; height: 34px !important; }
html.ui-v2 #players #gender-filter-players { height: 34px !important; }
/* player cards: denser grid */
html.ui-v2 #players .player-list {
    display: grid !important; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)) !important; gap: 10px !important;
    padding: 0 !important; margin: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important;
}
html.ui-v2 #players .player-list > :not(.player-item) { grid-column: 1 / -1; }
html.ui-v2 #players .sort-info-header { padding: 8px 14px !important; margin: 0 !important; border-radius: 10px !important; font-size: 12.5px !important; box-shadow: none !important; }
html.ui-v2 #players .sort-info-header * { color: var(--v2-muted) !important; }
html.ui-v2 #players .sort-info-header strong { color: var(--v2-text) !important; }
html.ui-v2 #players .player-item { padding: 10px 12px !important; margin: 0 !important; min-height: 0 !important; display: flex !important; flex-direction: column; gap: 8px; }
html.ui-v2 #players .player-info { margin: 0 !important; }
html.ui-v2 #players .player-info > div:first-child { gap: 6px !important; margin-bottom: 6px !important; }
html.ui-v2 #players .player-name { font-size: 15px !important; font-weight: 800 !important; }
html.ui-v2 #players .player-level { padding: 1px 8px !important; font-size: 12px !important; border-radius: 7px !important; }
html.ui-v2 #players .badge-present, html.ui-v2 #players .badge-location, html.ui-v2 #players .player-info span[class^="badge"] { font-size: 11px !important; padding: 2px 8px !important; border-radius: 7px !important; }
html.ui-v2 #players .badge-present { background: var(--v2-free-bg) !important; color: var(--v2-free) !important; }
html.ui-v2 #players .badge-location { background: var(--v2-play-bg) !important; color: var(--v2-play) !important; }
html.ui-v2 #players .player-compact-stats { margin: 0 !important; font-size: 12px !important; gap: 4px !important; }
html.ui-v2 #players .player-compact-stats * { font-size: 12px !important; }
html.ui-v2 #players .player-actions { display: flex !important; gap: 6px !important; margin: 0 !important; justify-content: flex-start !important; flex-wrap: wrap; }
html.ui-v2 #players .player-actions:not(:has(button:not(:disabled))) { display: none !important; }
html.ui-v2 #players .player-actions .btn, html.ui-v2 #players .player-actions .status-btn {
    min-height: 30px !important; height: 30px; padding: 0 10px !important; font: 700 12.5px var(--v2-font) !important; border-radius: 8px !important; margin: 0 !important; width: auto !important; flex: 0 0 auto;
}
html.ui-v2 #players .player-actions .btn-sm { min-width: 30px; padding: 0 !important; }
html.ui-v2 #players .player-actions .status-btn { flex: 1 1 auto; }
html.ui-v2 #players .gender-tag, html.ui-v2 #leaderboard .gender-tag { background: transparent !important; border: 0 !important; padding: 0 1px !important; font-weight: 800; }
html.ui-v2 #players .gender-tag.gender-m { color: var(--v2-info) !important; }
html.ui-v2 #players .gender-tag.gender-f { color: #c2306b !important; }
html.ui-v2[data-v2-theme="dark"] #players .gender-tag.gender-f { color: #f38cb5 !important; }
@media (max-width: 1100px) {
    html.ui-v2 #players .players-tab-top-row { grid-template-columns: 1fr; }
    html.ui-v2 #players #players-level-description { flex-wrap: wrap; }
    html.ui-v2 #home.tab-content.active { grid-template-columns: 1fr; }
}

/* ---------------- STATS ---------------- */
html.ui-v2 #stats.tab-content.active { padding: 14px 18px 20px !important; }
html.ui-v2 #stats > div:first-child { display: flex !important; align-items: center !important; gap: 10px; flex-wrap: wrap; margin: 0 0 10px !important; justify-content: flex-start !important; }
html.ui-v2 #stats > div:first-child > h2 { margin: 0 auto 0 0 !important; order: 0; }
html.ui-v2 #stats > div:first-child > div { display: flex; align-items: center; gap: 8px; margin: 0 !important; }
html.ui-v2 #stats > div:first-child > div:has(#stats-sort) { order: 1; }
html.ui-v2 #stats > div:first-child > div:has(#export-btn) { order: 2; }
html.ui-v2 #stats > div:first-child label { margin: 0 !important; font-size: 13px; color: var(--v2-muted) !important; font-weight: 600; }
html.ui-v2 #stats #stats-sort { width: 180px !important; height: 36px !important; }
html.ui-v2 #stats h2 { font-size: 18px !important; font-weight: 800 !important; color: var(--v2-text) !important; }
html.ui-v2 #stats > h2 { margin: 18px 0 10px !important; }
html.ui-v2 #stats .stats-table, html.ui-v2 #leaderboard .leaderboard-table {
    width: 100%; border-collapse: separate !important; border-spacing: 0 !important; border: 1px solid var(--v2-border) !important; box-shadow: var(--v2-shadow) !important; margin: 0 !important; font-size: 13.5px;
}
html.ui-v2 #stats .stats-table th, html.ui-v2 #leaderboard .leaderboard-table th {
    padding: 9px 12px !important; font-size: 12px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .04em; text-align: left;
}
html.ui-v2 #stats .stats-table td, html.ui-v2 #leaderboard .leaderboard-table td { padding: 8px 12px !important; font-size: 13.5px; background: transparent !important; }
html.ui-v2 #stats .stats-table tbody tr:last-child td, html.ui-v2 #leaderboard .leaderboard-table tbody tr:last-child td { border-bottom: 0 !important; }
html.ui-v2 #stats .stats-table tbody tr:nth-child(even) { background: var(--v2-surface-2) !important; }
html.ui-v2 #stats .game-history-actions { white-space: nowrap; }
html.ui-v2 #stats .game-history-actions button {
    width: 30px; height: 30px; border-radius: 8px !important; border: 1px solid var(--v2-border) !important; background: var(--v2-surface) !important; color: var(--v2-muted) !important;
    margin: 0 2px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: none !important;
}
html.ui-v2 #stats .game-history-actions .btn-edit-game:hover { color: var(--v2-accent-text) !important; border-color: var(--v2-accent) !important; }
html.ui-v2 #stats .game-history-actions .btn-delete-game:hover { color: var(--v2-danger) !important; border-color: var(--v2-danger) !important; }
html.ui-v2 #stats .stats-table tbody td[colspan] { background: var(--v2-warn-bg) !important; color: var(--v2-warn) !important; }

/* ---------------- LEADERBOARD ---------------- */
html.ui-v2 #leaderboard.tab-content.active { display: flex !important; flex-direction: column; gap: 10px; padding: 14px 18px 20px !important; }
html.ui-v2 #leaderboard > * { margin: 0 !important; }
html.ui-v2 #leaderboard .leaderboard-header { padding: 10px 14px !important; display: flex !important; align-items: center; flex-wrap: wrap; gap: 10px 16px; }
html.ui-v2 #leaderboard .leaderboard-header h2 { margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; color: var(--v2-text) !important; white-space: nowrap; }
html.ui-v2 #leaderboard .leaderboard-controls { flex: 1 1 auto; display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
html.ui-v2 #leaderboard .timeframe-selector { margin: 0 !important; padding: 3px !important; border-radius: 10px !important; display: inline-flex !important; gap: 2px; }
html.ui-v2 #leaderboard .timeframe-btn { height: 30px; padding: 0 12px !important; border-radius: 8px !important; font: 700 13px var(--v2-font) !important; border: 0 !important; margin: 0 !important; }
html.ui-v2 #leaderboard .leaderboard-actions { display: flex !important; flex-wrap: wrap; gap: 6px !important; margin: 0 !important; }
html.ui-v2 #leaderboard .leaderboard-actions .btn { min-height: 32px; padding: 5px 12px !important; font-size: 12.5px !important; }
html.ui-v2 #leaderboard #reset-leaderboard, html.ui-v2 #leaderboard #reset-all-leaderboards { background: transparent !important; }
html.ui-v2 #leaderboard .leaderboard-search-container { display: flex !important; gap: 8px; justify-content: flex-start !important; margin: 0 !important; padding: 0 !important; }
html.ui-v2 #leaderboard #leaderboard-search { width: 320px !important; max-width: 100%; height: 36px !important; padding: 0 12px !important; font-size: 13.5px !important; margin: 0 !important; }
html.ui-v2 #leaderboard .search-result { background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; border-radius: var(--v2-radius) !important; box-shadow: var(--v2-shadow) !important; padding: 12px 14px !important; }
html.ui-v2 #leaderboard .leaderboard-container { padding: 12px 14px !important; }
html.ui-v2 #leaderboard .leaderboard-container h3 { margin: 0 0 10px !important; font-size: 15px !important; font-weight: 800 !important; color: var(--v2-text) !important; }
html.ui-v2 #leaderboard .leaderboard-table { box-shadow: none !important; }
html.ui-v2 #leaderboard .leaderboard-table td[style*="padding: 50px"] { padding: 28px !important; color: var(--v2-muted) !important; }
html.ui-v2 #leaderboard .leaderboard-table td[style*="padding: 50px"] i { font-size: 28px !important; margin-bottom: 8px !important; }
html.ui-v2 #leaderboard .leaderboard-table td h4 { color: var(--v2-text) !important; margin: 0 0 4px !important; font-size: 15px !important; }
/* Phase 3 fine-tuning */
html.ui-v2 #home #tv-controls-section div { justify-content: flex-start !important; text-align: left !important; }
html.ui-v2 #home .home-court-stepper-group > label { flex: 0 0 auto; text-align: left !important; }
html.ui-v2 #players #search-sort-section select, html.ui-v2 #players #player-search { font-size: 13.5px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 32px !important; }
html.ui-v2 #players #search-sort-section select { padding-left: 10px !important; }
html.ui-v2 #players #players-level-description .level-description-item {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 0; align-items: center;
}
html.ui-v2 #players #players-level-description .level-label { grid-column: 1; grid-row: 1; white-space: normal; overflow-wrap: break-word;  }
html.ui-v2 #players #players-level-description .level-range { grid-column: 1; grid-row: 2; }
html.ui-v2 #players #players-level-description .level-player-count { grid-column: 2; grid-row: 1 / 3; }
html.ui-v2 #leaderboard #leaderboard-search { flex: 0 1 320px; }
html.ui-v2 #stats #stats-sort { font-size: 13.5px !important; padding: 0 10px !important; line-height: 34px !important; }
html.ui-v2 #home .home-court-stepper-group { justify-content: flex-start !important; }

/* ---------------- TV pop-ups (Customize TV Display, TV Display Help) ---------------- */
html.ui-v2 .tvc-modal { background: var(--v2-overlay) !important; backdrop-filter: none !important; }
html.ui-v2 .tvc-modal-content {
    background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important;
    border-radius: 16px !important; box-shadow: var(--v2-shadow-lg) !important; font-family: var(--v2-font) !important; padding: 20px !important;
}
html.ui-v2 .tvc-modal-content label { color: var(--v2-text) !important; }
html.ui-v2 .tvc-close { background: var(--v2-surface-2) !important; color: var(--v2-muted) !important; border: 1px solid var(--v2-border) !important; width: 32px !important; height: 32px !important; }
html.ui-v2 .tvc-close:hover { color: var(--v2-danger) !important; border-color: var(--v2-danger) !important; }
html.ui-v2 .tvc-header { color: var(--v2-text) !important; border-bottom: 1px solid var(--v2-border) !important; font-size: 18px !important; font-weight: 800 !important; }
html.ui-v2 .tvc-header i { color: var(--v2-accent-text) !important; }
html.ui-v2 .tvc-note, html.ui-v2 .tvc-file-name, html.ui-v2 .tvc-logo-preview span { color: var(--v2-muted) !important; }
html.ui-v2 .tvc-section { background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border); }
html.ui-v2 .tvc-section h3 { color: var(--v2-text) !important; font-size: 14.5px !important; font-weight: 800; }
html.ui-v2 .tvc-section h4 { color: var(--v2-muted) !important; font-size: 13px !important; }
html.ui-v2 .tvc-slider-row span { color: var(--v2-accent-text) !important; }
html.ui-v2 .tvc-color-row input[type="color"], html.ui-v2 .tvc-preview, html.ui-v2 .tvc-logo-preview { border-color: var(--v2-border-strong) !important; }
html.ui-v2 .tvc-preview, html.ui-v2 .tvc-logo-preview { background-color: var(--v2-soft) !important; }
html.ui-v2 .tvc-option, html.ui-v2 .tvc-preset-btn, html.ui-v2 .tvc-image-row button, html.ui-v2 .tvc-file-label {
    background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border-strong) !important; border-radius: 10px !important;
}
html.ui-v2 .tvc-option:hover, html.ui-v2 .tvc-preset-btn:hover, html.ui-v2 .tvc-image-row button:hover, html.ui-v2 .tvc-file-label:hover { border-color: var(--v2-accent) !important; }
html.ui-v2 .tvc-option.selected, html.ui-v2 .tvc-preset-btn.selected { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border-color: var(--v2-accent) !important; }
html.ui-v2 .tvc-image-row input[type="text"] { border-radius: 10px !important; }
html.ui-v2 .tvc-swatch { border-color: var(--v2-border-strong) !important; }
html.ui-v2 .tvc-reset-btn { background: transparent !important; color: var(--v2-danger) !important; border: 1px solid var(--v2-danger) !important; border-radius: 10px !important; }
html.ui-v2 .tvc-save-btn { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border: 0 !important; border-radius: 12px !important; font-size: 15px !important; }
html.ui-v2 .tvc-help-list li { border-bottom-color: var(--v2-border) !important; color: var(--v2-text) !important; font-size: 13.5px !important; }
html.ui-v2 .tvc-help-list strong { color: var(--v2-accent-text) !important; }
/* Lock Players picker */
html.ui-v2 #lock-picker-status { background: var(--v2-accent-soft) !important; color: var(--v2-accent-text) !important; border: 1px solid var(--v2-accent-ring) !important; }
html.ui-v2 .lock-picker-item { background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; box-shadow: none !important; transform: none !important; }
html.ui-v2 .lock-picker-item:hover:not(.disabled) { border-color: var(--v2-accent) !important; background: var(--v2-accent-soft) !important; }
html.ui-v2 .lock-picker-item.selected { border-color: var(--v2-accent) !important; background: var(--v2-accent-soft) !important; box-shadow: inset 0 0 0 1px var(--v2-accent) !important; }
html.ui-v2 .lock-picker-item.disabled { background: var(--v2-surface-2) !important; opacity: .7; }
html.ui-v2 .lock-picker-item-name { color: var(--v2-text) !important; }
html.ui-v2 .lock-picker-item-level { color: var(--v2-muted) !important; }
html.ui-v2 #lock-picker-close { color: var(--v2-muted) !important; }
html.ui-v2 #home .home-court-stepper-group > label, html.ui-v2 #home .home-court-stepper { width: auto !important; display: inline-flex !important; }
html.ui-v2 #home .home-court-stepper-group { display: flex !important; flex-direction: row !important; align-items: center !important; text-align: left !important; }

/* =====================================================================
   READABILITY UPDATE — bigger text, nothing cut off with "...",
   waiting time highlighted on every player, Up Next under the courts
   when all courts fit in one row (the empty space below gets used).
   ===================================================================== */
/* Send Up Next game buttons (both versions the app draws) */
html.ui-v2 #courts-container .up-next-court-actions > div { display: flex !important; flex-wrap: wrap; gap: 6px !important; justify-content: flex-start !important; width: auto !important; flex: 1 1 auto; }
html.ui-v2 #courts-container .up-next-court-actions .add-up-next-players {
    height: auto !important; min-height: 34px; max-width: none !important; min-width: 0 !important; flex: 0 0 auto !important; margin: 0 !important;
    white-space: nowrap !important; padding: 5px 12px !important; display: inline-flex !important; align-items: center; gap: 7px;
    line-height: 1.2 !important; animation: none !important; font-size: 13.5px !important;
}
html.ui-v2 #courts-container .up-next-court-actions .add-up-next-players i { font-size: 12px !important; }
html.ui-v2 #courts-container .up-next-court-actions .add-up-next-players .player-count-badge {
    font-size: 11.5px !important; padding: 1px 7px !important; border-radius: 999px !important; margin: 0 !important;
    background: var(--v2-accent-soft) !important; color: var(--v2-accent-text) !important; border: 0 !important;
}
html.ui-v2 #courts-container .up-next-court-actions::before { font-size: 13px; }

/* Snapshot row */
html.ui-v2 .v2-stat-label { font-size: 13px; }
html.ui-v2 .v2-stat-value { font-size: 17px; }
html.ui-v2 .v2-stat-sub { font-size: 13px; }

/* Court cards: larger text, names and times shown in full */
html.ui-v2 #courts-container .court-card { font-size: 14px; }
html.ui-v2 #courts-container .court-title h3 { font-size: 18px !important; }
html.ui-v2 .court-level-filters .level-toggle span::after { font-size: 12.5px; }
html.ui-v2 #courts-container .level-toggle { height: 26px; }
html.ui-v2 #courts-container .challenge-toggle, html.ui-v2 #courts-container .challenge-court-row { font-size: 13px !important; }
html.ui-v2 #courts-container .court-tv-control-btn { font-size: 12px !important; height: 28px !important; }
html.ui-v2 #courts-container .team-name { font-size: 11.5px !important; }
html.ui-v2 #courts-container .team-player-name { font-size: 15.5px !important; line-height: 1.25; }
html.ui-v2 #courts-container .team-player-level { font-size: 12.5px !important; }
html.ui-v2 #courts-container .team-player-stats {
    flex-wrap: wrap !important; white-space: normal !important; gap: 4px 8px !important; align-items: center; font-size: 12.5px !important; margin-top: 2px !important;
}
html.ui-v2 #courts-container .team-player-stats .waiting-time-display,
html.ui-v2 .v2-courts-body .up-next-player-stats .waiting-time-display {
    flex: 0 1 auto !important; display: inline-flex !important; align-items: center; gap: 5px; max-width: 100%;
    padding: 2px 9px !important; margin: 0 !important; border-radius: 999px !important; white-space: normal !important;
    font-size: 12.5px !important; font-weight: 800 !important; line-height: 1.3;
    background: var(--v2-info-bg) !important; color: var(--v2-info) !important;
}
html.ui-v2 #courts-container .team-player-stats .waiting-time-display i,
html.ui-v2 .v2-courts-body .up-next-player-stats .waiting-time-display i { display: inline-block !important; font-size: 11px; }
html.ui-v2 #courts .waiting-time-display.long-wait { background: var(--v2-warn-bg) !important; color: var(--v2-warn) !important; }
html.ui-v2 #courts .waiting-time-display.very-long-wait { background: var(--v2-danger-bg) !important; color: var(--v2-danger) !important; }
html.ui-v2 #courts-container .court-balance-display, html.ui-v2 #courts-container .court-balance-display * { font-size: 13px !important; }
html.ui-v2 #courts-container .court-players > div { font-size: 15px !important; }

/* Up Next: bigger names, waiting time back on every player */
html.ui-v2 .v2-courts-body .up-next-game-number { font-size: 14.5px !important; }
html.ui-v2 .v2-courts-body .up-next-box .player-count-badge { font-size: 12.5px !important; }
html.ui-v2 .v2-courts-body .up-next-actions .btn { font-size: 12.5px !important; height: 32px !important; }
html.ui-v2 .v2-courts-body #add-next-four-btn::after, html.ui-v2 .v2-courts-body #add-player-up-next-btn::after,
html.ui-v2 .v2-courts-body #clear-up-next-btn::after, html.ui-v2 .v2-courts-body #add-up-next-game-btn::after { font-size: 12.5px; }
html.ui-v2 .v2-courts-body .up-next-player { align-items: flex-start !important; padding: 5px 4px 5px 9px !important; }
html.ui-v2 .v2-courts-body .up-next-player-info { flex-wrap: wrap; row-gap: 3px !important; }
html.ui-v2 .v2-courts-body .up-next-player-name { font-size: 14px !important; line-height: 1.25; }
html.ui-v2 .v2-courts-body .up-next-player-name .up-next-player-level { font-size: 12px !important; }
html.ui-v2 .v2-courts-body .up-next-player-stats {
    display: flex !important; flex: 1 0 100%; flex-wrap: wrap; align-items: center; gap: 3px 6px; margin: 0 !important; font-size: 12px !important; color: var(--v2-muted) !important;
}
html.ui-v2 .v2-courts-body .up-next-player-stats > div:not(.waiting-time-display) { margin: 0 !important; }
html.ui-v2 .v2-courts-body .up-next-remove-player { width: 22px !important; height: 22px !important; }
html.ui-v2 .v2-courts-body .up-next-balance-indicator, html.ui-v2 .v2-courts-body .up-next-balance-indicator * { font-size: 12.5px !important; }
html.ui-v2 .v2-courts-body #up-next-stats, html.ui-v2 .v2-courts-body .up-next-stat-label, html.ui-v2 .v2-courts-body .up-next-stat-value { font-size: 13px !important; }
html.ui-v2 .v2-courts-body #gender-plan-card, html.ui-v2 .v2-courts-body #gender-plan-card .gp-chip { font-size: 12.5px !important; }

/* Rules strip */
html.ui-v2 .v2-courts-body .restriction-toggles-container, html.ui-v2 .v2-courts-body .restriction-toggles-container label span::after { font-size: 13px !important; }

/* Waitlist: name, level, court picker and button on one line; games + waiting time underneath */
html.ui-v2 .v2-waitlist-card > .waitlist-header h2 { font-size: 17px !important; }
html.ui-v2 .v2-waitlist-card .waitlist-controls { flex-wrap: wrap !important; }
html.ui-v2 .v2-waitlist-card .waitlist-controls > div { flex: 1 1 140px !important; }
html.ui-v2 .v2-waitlist-card #waitlist-sort, html.ui-v2 .v2-waitlist-card #gender-filter-waitlist { width: auto !important; flex: 0 0 auto !important; }
html.ui-v2 .v2-waitlist-card .waitlist-controls .form-control { font-size: 13px !important; height: 32px !important; }
html.ui-v2 .v2-waitlist-card .gender-list-count { font-size: 12.5px; }
html.ui-v2 .v2-waitlist-card .waitlist-item { grid-template-columns: minmax(90px, 1fr) auto auto auto !important; grid-template-areas: "name lvl sel btn" "det det det det" !important; row-gap: 4px !important; padding: 8px 10px !important; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .waitlist-player-name { font-size: 15px !important; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .waitlist-level { font-size: 12.5px !important; }
html.ui-v2 .v2-waitlist-card .waitlist-item > select { width: auto !important; max-width: 220px; font-size: 12.5px !important; height: 30px !important; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .add-to-court-btn { height: 30px !important; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .add-to-court-btn::after { font-size: 12.5px; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .waitlist-player-details { flex-wrap: wrap; white-space: normal !important; overflow: visible !important; font-size: 12.5px !important; row-gap: 4px; }
html.ui-v2 .v2-waitlist-card .waitlist-player-details .waiting-time-display { font-size: 13px !important; font-weight: 800 !important; padding: 2px 10px !important; background: var(--v2-info-bg) !important; color: var(--v2-info) !important; white-space: normal !important; }
html.ui-v2 .v2-waitlist-card .waitlist-player-details .waiting-time-display i { display: inline-block !important; font-size: 11px; }
html.ui-v2 .v2-waitlist-card .waitlist-player-details .waiting-time-display.long-wait { background: var(--v2-warn-bg) !important; color: var(--v2-warn) !important; }
html.ui-v2 .v2-waitlist-card .waitlist-player-details .waiting-time-display span[style] { font-size: 11px !important; }

/* waiting-time pills: rounded tag, wraps only between words */
html.ui-v2 #courts .waiting-time-display { border-radius: 8px !important; }
html.ui-v2 .v2-waitlist-card .waitlist-player-details .waiting-time-display { white-space: nowrap !important; flex: 0 0 auto !important; }
html.ui-v2 .v2-waitlist-card .waitlist-player-details > div:not(.waiting-time-display) { white-space: normal; }
/* Narrow court cards (4 across): Team 1 above Team 2 so names and times stay readable */
html.ui-v2 #courts-container .court-card { container-type: inline-size; container-name: v2court; }
@container v2court (max-width: 540px) {
    html.ui-v2 #courts-container .court-teams { grid-template-columns: minmax(0, 1fr) !important; row-gap: 6px !important; }
    html.ui-v2 #courts-container .court-teams::before { grid-column: 1; grid-row: 2; justify-self: center; }
    html.ui-v2 #courts-container .court-team:first-child { grid-column: 1; grid-row: 1; }
    html.ui-v2 #courts-container .court-team:last-child { grid-column: 1; grid-row: 3; }
    html.ui-v2 #courts-container .court-actions .btn { flex-basis: 40%; }
}

/* =====================================================================
   LAYOUT ROUND 3 — courts, rules and Up Next on the left (one page
   scroll, no inner scrolls); a Waitlist panel on the right that slides
   away to a slim strip. Plus highlights: send buttons, rules, player
   history words, gender pills, game timer colours, locks, Ready games.
   ===================================================================== */
html.ui-v2[data-v2-theme="light"] {
    --v2-men: #1d5fd1; --v2-men-bg: #e9f1ff; --v2-women: #b4235f; --v2-women-bg: #fdebf2; --v2-mixed: #6a3fb8; --v2-mixed-bg: #f1ebfd;
    --v2-yellow: #7a5d00; --v2-yellow-bg: #fff4c2; --v2-orange: #9a4508; --v2-orange-bg: #ffe9d1;
    --v2-lock: #6f42c1; --v2-lock-bg: #efe7fc;
}
html.ui-v2[data-v2-theme="dark"] {
    --v2-men: #7fb0ff; --v2-men-bg: #16264a; --v2-women: #f38cb5; --v2-women-bg: #3a1728; --v2-mixed: #b89cf5; --v2-mixed-bg: #2a1f45;
    --v2-yellow: #ffe066; --v2-yellow-bg: #3a3210; --v2-orange: #ffa94d; --v2-orange-bg: #3d2410;
    --v2-lock: #c4a5ff; --v2-lock-bg: #2c2147;
}

/* ---------- two columns: page (left) + waitlist panel (right) ---------- */
html.ui-v2 .v2-courts-body {
    --v2-side-w: 440px;
    grid-template-columns: minmax(0, 1fr) var(--v2-side-w) !important;
    transition: grid-template-columns .28s ease;
}
@media (max-width: 1400px) { html.ui-v2 .v2-courts-body { --v2-side-w: 400px; } }
html.ui-v2 #courts.v2-wl-hidden .v2-courts-body { --v2-side-w: 52px; }

/* left: one scroll for the whole page; nothing scrolls inside it */
html.ui-v2 .v2-courts-main { overflow-y: auto !important; overflow-x: hidden; gap: 12px !important; padding: 0 6px 16px 0; scroll-behavior: smooth; }
html.ui-v2 .v2-courts-main > #courts-container {
    flex: none !important; overflow: visible !important; min-height: 0 !important;
    grid-auto-rows: auto !important; align-items: start;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)) !important;
}
html.ui-v2 #courts-container .court-card { align-self: stretch; height: auto !important; max-height: none !important; overflow: visible !important; }
html.ui-v2 .v2-courts-main > .up-next-section { flex: none !important; min-height: 0 !important; overflow: visible !important; }
html.ui-v2 .v2-courts-main #up-next-container { overflow: visible !important; flex: none !important; max-height: none !important; }
html.ui-v2 .v2-courts-main .up-next-row { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px !important; }
html.ui-v2 .v2-courts-main .up-next-box { container-type: inline-size; container-name: v2game; }
html.ui-v2 .v2-courts-main .up-next-players { grid-template-columns: minmax(0, 1fr) !important; }
@container v2game (min-width: 440px) {
    html.ui-v2 .v2-courts-main .up-next-players { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
html.ui-v2 .v2-courts-main .up-next-add-more-box { min-height: 56px !important; }

/* right: waitlist panel slides out; a strip stays on the edge */
html.ui-v2 .v2-courts-side { position: relative; overflow: hidden !important; padding: 0 !important; }
html.ui-v2 .v2-courts-side > .v2-waitlist-card {
    flex: 1 1 auto !important; min-height: 0 !important; width: var(--v2-side-w-full, 440px); max-width: none;
    transition: transform .28s ease, opacity .2s ease, visibility 0s linear 0s;
}
@media (max-width: 1400px) { html.ui-v2 .v2-courts-side > .v2-waitlist-card { --v2-side-w-full: 400px; } }
html.ui-v2 #courts.v2-wl-hidden .v2-courts-side > .v2-waitlist-card {
    transform: translateX(105%); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform .28s ease, opacity .2s ease, visibility 0s linear .28s;
}
html.ui-v2 .v2-wl-toggle {
    margin-left: auto; height: 30px; padding: 0 12px; border-radius: 9px; cursor: pointer; white-space: nowrap;
    background: var(--v2-surface-2); color: var(--v2-text); border: 1px solid var(--v2-border); font: 700 13px var(--v2-font);
    display: inline-flex; align-items: center; gap: 6px; order: 99;
}
html.ui-v2 .v2-wl-toggle:hover { border-color: var(--v2-accent); color: var(--v2-accent-text); }
html.ui-v2 .v2-waitlist-card > .waitlist-header h2 { order: 0; }
html.ui-v2 .v2-wl-strip {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0;
    border-radius: var(--v2-radius); background: var(--v2-surface); color: var(--v2-text); border: 1px solid var(--v2-border);
    box-shadow: var(--v2-shadow); cursor: pointer; font: 600 13.5px var(--v2-font);
    opacity: 0; visibility: hidden; transition: opacity .2s ease .12s;
}
html.ui-v2 #courts.v2-wl-hidden .v2-wl-strip { opacity: 1; visibility: visible; }
html.ui-v2 .v2-wl-strip:hover { border-color: var(--v2-accent); }
html.ui-v2 .v2-wl-strip-arrow { color: var(--v2-accent-text); font-size: 15px; }
html.ui-v2 .v2-wl-strip-text { writing-mode: vertical-rl; text-orientation: mixed; white-space: nowrap; line-height: 1.3; }
html.ui-v2 .v2-wl-strip-text b { color: var(--v2-accent-text); font-weight: 800; }

/* ---------- Rules for picking players (always visible, above Up Next) ---------- */
html.ui-v2 .v2-courts-main > .restriction-toggles-container {
    flex: none; margin: 0 !important; padding: 12px 14px !important; display: flex !important; flex-wrap: wrap; align-items: center;
    justify-content: flex-start !important; gap: 8px 10px !important; text-align: left !important; border-radius: var(--v2-radius) !important;
}
html.ui-v2 .v2-courts-main > .restriction-toggles-container::before {
    content: "Rules for picking players"; flex: 0 0 auto; margin-right: 6px; font: 800 15px var(--v2-font); color: var(--v2-text);
}
html.ui-v2 .v2-courts-main > .restriction-toggles-container label {
    display: inline-flex !important; align-items: center; gap: 9px !important; margin: 0 !important; padding: 7px 12px 7px 9px;
    border-radius: 999px; border: 1px solid var(--v2-border-strong); background: var(--v2-surface-2); cursor: pointer;
}
html.ui-v2 .v2-courts-main > .restriction-toggles-container label span,
html.ui-v2 .v2-courts-body label:has(#disable-restriction-toggle) span,
html.ui-v2 .v2-courts-body label:has(#encounter-restriction-toggle) span,
html.ui-v2 .v2-courts-body label:has(#level-gap-restriction-toggle) span,
html.ui-v2 .v2-courts-body label:has(#fresh-players-only-toggle) span { font: 600 13.5px var(--v2-font) !important; color: var(--v2-text) !important; }
html.ui-v2 .v2-courts-main > .restriction-toggles-container label span::after { content: none !important; }
/* switch look for the same checkboxes */
html.ui-v2 .v2-courts-main > .restriction-toggles-container input[type="checkbox"] {
    -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 34px !important; height: 20px !important; margin: 0 !important; border-radius: 999px;
    border: 0; cursor: pointer; transition: background-color .15s ease, background-position .15s ease;
    background: radial-gradient(circle at center, #fff 0 7px, transparent 7.5px) no-repeat 3px 50% / 14px 14px, var(--v2-border-strong);
}
html.ui-v2 .v2-courts-main > .restriction-toggles-container input[type="checkbox"]:checked {
    background: radial-gradient(circle at center, #fff 0 7px, transparent 7.5px) no-repeat calc(100% - 3px) 50% / 14px 14px, var(--v2-free);
}
html.ui-v2 .v2-courts-main > .restriction-toggles-container input[type="checkbox"]:focus-visible { outline: 2px solid var(--v2-accent); outline-offset: 2px; }
html.ui-v2 .v2-courts-main > .restriction-toggles-container label:has(input:checked) { background: var(--v2-free-bg); border-color: var(--v2-free); }
html.ui-v2 .v2-courts-main > .restriction-toggles-container label:has(input:checked)::after {
    content: "ON"; font: 800 11px var(--v2-font); letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; background: var(--v2-free); color: var(--v2-surface);
}
html.ui-v2 .v2-courts-main #level-gap-view-table-btn { margin: 0 0 0 -4px !important; font-size: 15px !important; color: var(--v2-accent-text) !important; }

/* ---------- Send Up Next game: wide, filled, glows when it appears ---------- */
html.ui-v2 #courts-container .up-next-court-actions { align-items: stretch !important; }
html.ui-v2 #courts-container .up-next-court-actions::before { content: none !important; }
html.ui-v2 #courts-container .up-next-court-actions > div { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; width: 100% !important; gap: 6px !important; }
html.ui-v2 #courts-container .up-next-court-actions .add-up-next-players {
    width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; min-height: 44px; padding: 8px 14px !important; justify-content: space-between !important; gap: 10px;
    background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border: 0 !important; border-radius: 11px !important;
    font-size: 0 !important; white-space: normal !important;
}
html.ui-v2 #courts-container .up-next-court-actions .add-up-next-players:hover { background: var(--v2-accent-hover) !important; }
html.ui-v2 #courts-container .up-next-court-actions .add-up-next-players > i,
html.ui-v2 #courts-container .up-next-court-actions .add-up-next-players > .btn-text { display: none !important; }
html.ui-v2 #courts-container .up-next-court-actions .add-up-next-players::after {
    order: -1; display: block !important; content: attr(data-v2-label); font: 800 14.5px/1.25 var(--v2-font); text-align: left;
}
html.ui-v2 #courts-container .up-next-court-actions .add-up-next-players .player-count-badge {
    flex: 0 0 auto; font: 800 12px var(--v2-font) !important; padding: 2px 9px !important;
    background: color-mix(in srgb, var(--v2-on-accent) 22%, transparent) !important; color: var(--v2-on-accent) !important;
}
html.ui-v2 #courts-container .add-up-next-players.v2-glow { animation: v2-send-glow 1s ease-in-out 3 !important; }
@keyframes v2-send-glow {
    0%, 100% { box-shadow: 0 0 0 0 var(--v2-accent-ring); }
    50% { box-shadow: 0 0 0 6px var(--v2-accent-ring); }
}

/* ---------- Player history: words + colours (NEW · WITH 2x · VS 1x) ---------- */
html.ui-v2 #courts .rel-badge {
    width: auto !important; height: auto !important; display: inline-flex !important; align-items: center; cursor: pointer;
    font: 800 11px/1.2 var(--v2-font) !important; letter-spacing: .02em; padding: 2px 7px !important; border-radius: 6px !important; border: 1px solid transparent !important;
}
html.ui-v2 #courts .rel-badge.rel-new { background-color: var(--v2-free-bg) !important; color: var(--v2-free) !important; border-color: var(--v2-free) !important; }
html.ui-v2 #courts .rel-badge.rel-with { background-color: var(--v2-orange-bg) !important; color: var(--v2-orange) !important; border-color: var(--v2-orange) !important; }
html.ui-v2 #courts .rel-badge.rel-vs { background-color: var(--v2-men-bg) !important; color: var(--v2-men) !important; border-color: var(--v2-men) !important; }
html.ui-v2 #courts .rel-badge.rel-both { background-color: var(--v2-danger-bg) !important; color: var(--v2-danger) !important; border-color: var(--v2-danger) !important; }
html.ui-v2 #courts-container .team-player-info > div:not([class]) { flex-wrap: wrap; }
html.ui-v2 .v2-courts-main > #rel-legend { font-size: 12.5px !important; }
html.ui-v2 .v2-courts-main > #rel-legend .rel-legend-item { font-weight: 800; }

/* ---------- Gender: coloured pills + clear ♂/♀ ---------- */
html.ui-v2 #courts .gender-rule-select {
    font: 800 13px var(--v2-font) !important; height: 30px !important; padding: 0 8px !important; border-width: 1.5px !important;
    background-color: var(--v2-soft) !important; color: var(--v2-text) !important; border-color: var(--v2-border-strong) !important;
}
html.ui-v2 #courts .gender-rule-select.gender-rule-mens { background-color: var(--v2-men-bg) !important; color: var(--v2-men) !important; border-color: var(--v2-men) !important; }
html.ui-v2 #courts .gender-rule-select.gender-rule-womens { background-color: var(--v2-women-bg) !important; color: var(--v2-women) !important; border-color: var(--v2-women) !important; }
html.ui-v2 #courts .gender-rule-select.gender-rule-mixed { background-color: var(--v2-mixed-bg) !important; color: var(--v2-mixed) !important; border-color: var(--v2-mixed) !important; }
html.ui-v2 #courts .gender-rule-select option { background: var(--v2-surface); color: var(--v2-text); }
html.ui-v2 #courts-container .court-gender-rule { display: inline-flex !important; align-items: center; gap: 6px !important; }
html.ui-v2 #courts-container .court-gender-rule .gender-rule-label {
    position: static !important; width: auto !important; height: auto !important; clip: auto !important; overflow: visible !important;
    font: 700 12px var(--v2-font) !important; color: var(--v2-muted) !important;
}
html.ui-v2 .v2-courts-body .up-next-gender-row { display: inline-flex !important; align-items: center; gap: 6px; }
html.ui-v2 .v2-courts-body .up-next-gender-row::before { content: "Gender"; font: 700 12px var(--v2-font); color: var(--v2-muted); }
html.ui-v2 #courts .gender-tag { font-size: 15px !important; line-height: 1; }
html.ui-v2 #courts .gender-tag.gender-m { color: var(--v2-men) !important; }
html.ui-v2 #courts .gender-tag.gender-f { color: var(--v2-women) !important; }

/* ---------- Game timer: colour gets stronger the longer a game runs ---------- */
html.ui-v2 #courts-container .court-card[data-v2-timer] .court-status { font-size: 13.5px !important; padding: 6px 12px !important; border: 1.5px solid transparent !important; }
html.ui-v2 #courts-container .court-card[data-v2-timer="ok"] .court-status { background: var(--v2-free-bg) !important; color: var(--v2-free) !important; border-color: var(--v2-free) !important; }
html.ui-v2 #courts-container .court-card[data-v2-timer="soso"] .court-status { background: var(--v2-yellow-bg) !important; color: var(--v2-yellow) !important; border-color: var(--v2-yellow) !important; }
html.ui-v2 #courts-container .court-card[data-v2-timer="acceptable"] .court-status { background: var(--v2-orange-bg) !important; color: var(--v2-orange) !important; border-color: var(--v2-orange) !important; }
html.ui-v2 #courts-container .court-card[data-v2-timer="long"] .court-status { background: var(--v2-danger) !important; color: #fff !important; border-color: var(--v2-danger) !important; font-weight: 900 !important; }
html.ui-v2[data-v2-theme="dark"] #courts-container .court-card[data-v2-timer="long"] .court-status { color: #1a0d0b !important; }
html.ui-v2 #courts-container .court-card[data-v2-timer="ok"] { border-top-color: var(--v2-free) !important; }
html.ui-v2 #courts-container .court-card[data-v2-timer="soso"] { border-top-color: var(--v2-yellow) !important; }
html.ui-v2 #courts-container .court-card[data-v2-timer="acceptable"] { border-top-color: var(--v2-orange) !important; }
html.ui-v2 #courts-container .court-card[data-v2-timer="long"] { border-top-color: var(--v2-danger) !important; box-shadow: inset 0 3px 0 var(--v2-danger), var(--v2-shadow) !important; }

/* ---------- Locked partners: 🔗 visible everywhere ---------- */
html.ui-v2 #courts .lock-indicator, html.ui-v2 #courts .waitlist-lock-indicator {
    width: 22px !important; height: 22px !important; font-size: 11px !important; border: 0 !important;
    background: var(--v2-lock-bg) !important; color: var(--v2-lock) !important; box-shadow: inset 0 0 0 1.5px var(--v2-lock) !important; margin: 0 2px !important;
}
html.ui-v2 .v2-waitlist-card .waitlist-item > .waitlist-lock-indicator { position: static !important; grid-area: lvl; justify-self: end; }

/* ---------- Up Next game that is full: green + "Ready" ---------- */
html.ui-v2 .v2-courts-body .up-next-box.filled { border-color: var(--v2-free) !important; box-shadow: inset 0 0 0 1px var(--v2-free) !important; }
html.ui-v2 .v2-courts-body .up-next-box.filled .up-next-game-number::after {
    content: "Ready"; margin-left: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px;
    background: var(--v2-free-bg); color: var(--v2-free); font: 800 11.5px var(--v2-font);
}

@media (max-width: 1100px) {
    html.ui-v2 .v2-courts-body { display: flex !important; }
    html.ui-v2 .v2-courts-main { overflow: visible !important; }
    html.ui-v2 .v2-courts-side > .v2-waitlist-card { width: auto; }
    html.ui-v2 .v2-wl-toggle, html.ui-v2 .v2-wl-strip { display: none !important; }
    html.ui-v2 #courts.v2-wl-hidden .v2-courts-side > .v2-waitlist-card { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
}
/* Waitlist header: title + Hide on the first line, search/sort/filter under */
html.ui-v2 .v2-waitlist-card > .waitlist-header { flex-wrap: wrap !important; }
html.ui-v2 .v2-waitlist-card > .waitlist-header > h2 { order: 0; flex: 1 1 auto; }
html.ui-v2 .v2-waitlist-card > .waitlist-header > .v2-wl-toggle { order: 1; margin-left: 0; }
html.ui-v2 .v2-waitlist-card > .waitlist-header > .waitlist-controls { order: 2; flex: 1 1 100% !important; }
html.ui-v2 .v2-courts-body .up-next-players { align-content: start !important; align-items: start !important; }

/* =====================================================================
   READABLE TEXT IN BOTH THEMES — fixes found by the contrast scan
   (every text on the 5 tabs and the main pop-ups was checked)
   ===================================================================== */
html.ui-v2 { --v2-teal: #0e7c8c; }
html.ui-v2[data-v2-theme="dark"] { --v2-teal: #5ccfe0; }
/* colours the app writes straight into the page → the readable version for this theme */
html.ui-v2 [style*="color:#28a745"], html.ui-v2 [style*="color: #28a745"], html.ui-v2 [style*="color: rgb(40, 167, 69)"] { color: var(--v2-free) !important; }
html.ui-v2 [style*="color:#dc3545"], html.ui-v2 [style*="color: #dc3545"], html.ui-v2 [style*="color: rgb(220, 53, 69)"] { color: var(--v2-danger) !important; }
html.ui-v2 [style*="color:#6f42c1"], html.ui-v2 [style*="color: #6f42c1"] { color: var(--v2-mixed) !important; }
html.ui-v2 [style*="color:#17a2b8"], html.ui-v2 [style*="color: #17a2b8"] { color: var(--v2-teal) !important; }
html.ui-v2 [style*="color:#007bff"], html.ui-v2 [style*="color: #007bff"] { color: var(--v2-info) !important; }
html.ui-v2 [style*="color: #495057"], html.ui-v2 [style*="color:#495057"], html.ui-v2 [style*="color: #333"], html.ui-v2 [style*="color:#333"],
html.ui-v2 [style*="color: #212529"], html.ui-v2 [style*="color: #2d3748"], html.ui-v2 [style*="color: #1a202c"] { color: var(--v2-text) !important; }
html.ui-v2 [style*="color: #6c757d"], html.ui-v2 [style*="color:#6c757d"], html.ui-v2 [style*="color: #666"], html.ui-v2 [style*="color:#666"],
html.ui-v2 [style*="color: #718096"], html.ui-v2 [style*="color: #adb5bd"] { color: var(--v2-muted) !important; }
/* white text on bright coloured pills: darken the pill a little so the text reads */
html.ui-v2 .level-player-count, html.ui-v2 .up-next-balance-indicator, html.ui-v2 .court-player-modal-level,
html.ui-v2 .lock-picker-remove-upnext-btn,
html.ui-v2 #waitlist-grid .waiting-time-display span[style*="background: #28a745"],
html.ui-v2 #players .player-info span[style*="background: #6c757d"] {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .38) !important; color: #fff !important;
}
html.ui-v2 .up-next-balance-indicator > .balance-header, html.ui-v2 .up-next-balance-indicator > .balance-header * { color: #fff !important; }
html.ui-v2 .up-next-balance-indicator .level-category-badge { color: var(--v2-text) !important; box-shadow: none !important; }
html.ui-v2 .up-next-count-badge { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; }
/* text set by the app's own stylesheet */
html.ui-v2 #tier-upgrade-badge, html.ui-v2 #tier-upgrade-badge * { color: var(--v2-text) !important; }
html.ui-v2 .challenge-settings-row, html.ui-v2 .up-next-box-header, html.ui-v2 .player-compact-stats { color: var(--v2-text) !important; }
html.ui-v2 .player-compact-stats .stat-sep { color: var(--v2-faint) !important; }
html.ui-v2 .up-next-stat-label, html.ui-v2 .quick-add-hint, html.ui-v2 .court-player-modal-stats, html.ui-v2 .up-next-player-item-stats { color: var(--v2-muted) !important; }
html.ui-v2 .lock-picker-item-status, html.ui-v2 .lock-picker-item-status.status-court { color: var(--v2-danger) !important; }
html.ui-v2 .lock-picker-item-status.status-locked { color: var(--v2-mixed) !important; }
html.ui-v2 .lock-picker-item-status.status-upnext { color: var(--v2-orange) !important; }
html.ui-v2 #lock-picker-status { color: var(--v2-text) !important; }

/* Leaderboard: readable names and numbers; top 3 keep gold / silver / bronze */
html.ui-v2 .leaderboard-table tbody tr, html.ui-v2 .leaderboard-table tbody tr:nth-child(even) { background: transparent !important; }
html.ui-v2 .leaderboard-table tbody tr:nth-child(even) { background: var(--v2-surface-2) !important; }
html.ui-v2 .leaderboard-table tbody tr:hover { background: var(--v2-soft) !important; }
html.ui-v2 .leaderboard-table td, html.ui-v2 .player-name-cell { color: var(--v2-text) !important; }
html.ui-v2 .player-name-main { color: var(--v2-text) !important; font-size: 16px !important; margin-bottom: 4px !important; }
html.ui-v2 .player-stats-mini, html.ui-v2 .win-loss-record { color: var(--v2-muted) !important; font-size: 13px !important; }
html.ui-v2 .games-count { background: var(--v2-soft) !important; color: var(--v2-text) !important; }
html.ui-v2 .leaderboard-table .rank-cell {
    -webkit-text-fill-color: currentColor !important; background: none !important; text-shadow: none !important; color: var(--v2-text) !important; font-size: 18px !important;
}
html.ui-v2 .leaderboard-table .rank-cell.rank-1, html.ui-v2 .leaderboard-table .rank-cell.rank-2, html.ui-v2 .leaderboard-table .rank-cell.rank-3 { position: relative; }
html.ui-v2 .leaderboard-table .rank-cell.rank-1 { color: #9a6b00 !important; box-shadow: inset 4px 0 0 #f2b705; }
html.ui-v2 .leaderboard-table .rank-cell.rank-2 { color: #5d6b7a !important; box-shadow: inset 4px 0 0 #a9b4c0; }
html.ui-v2 .leaderboard-table .rank-cell.rank-3 { color: #9a5320 !important; box-shadow: inset 4px 0 0 #cd7f32; }
html.ui-v2[data-v2-theme="dark"] .leaderboard-table .rank-cell.rank-1 { color: #ffd34d !important; }
html.ui-v2[data-v2-theme="dark"] .leaderboard-table .rank-cell.rank-2 { color: #d3dbe4 !important; }
html.ui-v2[data-v2-theme="dark"] .leaderboard-table .rank-cell.rank-3 { color: #f0a868 !important; }
html.ui-v2 .leaderboard-table .rank-cell.rank-1::after { content: " 🥇"; }
html.ui-v2 .leaderboard-table .rank-cell.rank-2::after { content: " 🥈"; }
html.ui-v2 .leaderboard-table .rank-cell.rank-3::after { content: " 🥉"; }
html.ui-v2 #home #tier-upgrade-badge, html.ui-v2 #home #tier-upgrade-badge * { color: var(--v2-text) !important; }
html.ui-v2 [style*="background: #f0e6ff"], html.ui-v2 [style*="background:#f0e6ff"] { background: var(--v2-lock-bg) !important; color: var(--v2-lock) !important; }
html.ui-v2 #leaderboard-tv-status, html.ui-v2 #leaderboard-tv-status * { color: var(--v2-text) !important; }

/* ---------- TV buttons (Fullscreen / Voice Only / Settings): bigger, in their own TV colour ---------- */
html.ui-v2[data-v2-theme="light"] { --v2-tv: #0b6e7c; --v2-tv-bg: #e2f5f8; }
html.ui-v2[data-v2-theme="dark"] { --v2-tv: #6fd8e8; --v2-tv-bg: #12313a; }
html.ui-v2 #courts-container .court-tv-controls-container { gap: 8px !important; }
html.ui-v2 #courts-container .court-tv-control-btn {
    height: 36px !important; padding: 0 14px !important; font: 800 13.5px var(--v2-font) !important; gap: 7px !important; border-radius: 10px !important;
    background: var(--v2-tv-bg) !important; color: var(--v2-tv) !important; border: 1.5px solid var(--v2-tv) !important;
}
html.ui-v2 #courts-container .court-tv-control-btn i { font-size: 13px !important; }
html.ui-v2 .v2-courts-body .up-next-box .tv-control-btn {
    height: 30px !important; padding: 0 10px !important; font: 800 12.5px var(--v2-font) !important; gap: 5px !important; border-radius: 8px !important;
    background: var(--v2-tv-bg) !important; color: var(--v2-tv) !important; border: 1.5px solid var(--v2-tv) !important;
}
html.ui-v2 .v2-courts-body .up-next-box .tv-control-btn i { font-size: 12px !important; }
html.ui-v2 #courts-container .court-tv-control-btn:hover, html.ui-v2 .v2-courts-body .up-next-box .tv-control-btn:hover {
    background: var(--v2-tv) !important; color: var(--v2-surface) !important;
}

/* =====================================================================
   ROUND 4 — TV buttons, level toggles, player names
   ===================================================================== */
/* Fullscreen / Voice: bigger, each with its own colour (court cards + Up Next games) */
html.ui-v2 #courts-container .court-tv-control-btn {
    height: 34px !important; padding: 0 14px !important; font: 800 13.5px var(--v2-font) !important; border-radius: 10px !important; gap: 7px;
}
html.ui-v2 #courts-container .court-tv-control-btn i, html.ui-v2 .v2-courts-body .up-next-box .tv-control-btn i { font-size: 13px !important; }
html.ui-v2 #courts-container .court-tv-control-btn:nth-child(1), html.ui-v2 .v2-courts-body .up-next-box .tv-control-btn:nth-child(1) {
    background: var(--v2-info-bg) !important; color: var(--v2-info) !important; border: 1.5px solid var(--v2-info) !important;
}
html.ui-v2 #courts-container .court-tv-control-btn:nth-child(2), html.ui-v2 .v2-courts-body .up-next-box .tv-control-btn:nth-child(2) {
    background: var(--v2-free-bg) !important; color: var(--v2-free) !important; border: 1.5px solid var(--v2-free) !important;
}
html.ui-v2 #courts-container .court-tv-control-btn:hover, html.ui-v2 .v2-courts-body .up-next-box .tv-control-btn:hover { filter: brightness(1.08); }
html.ui-v2 .v2-courts-body .up-next-box .tv-control-btn {
    height: 30px !important; padding: 0 11px !important; font: 800 12.5px var(--v2-font) !important; border-radius: 9px !important; gap: 6px;
}
html.ui-v2 .v2-courts-body .up-next-box .tv-controls-container { gap: 6px !important; }

/* Court level toggles: own row, centred */
html.ui-v2 #courts-container .court-level-filters { flex: 1 1 100% !important; justify-content: center !important; }

/* Up Next level toggles: easy to notice */
html.ui-v2 .v2-courts-body #up-next-level-filters {
    display: flex !important; align-items: center; flex-wrap: wrap; justify-content: flex-start !important; gap: 6px !important;
    margin: 10px 12px 0 !important; padding: 9px 12px !important; border-radius: 12px !important;
    background: var(--v2-accent-soft) !important; border: 1px solid var(--v2-accent-ring) !important;
}
html.ui-v2 .v2-courts-body #up-next-level-filters::before {
    content: "Levels allowed in Up Next:"; font: 800 13.5px var(--v2-font); color: var(--v2-text); margin-right: 4px;
}
html.ui-v2 .v2-courts-body #up-next-level-filters .level-toggle { height: 30px !important; padding: 0 12px !important; }
html.ui-v2 .v2-courts-body #up-next-level-filters .level-toggle span::after { font-size: 13px !important; }
html.ui-v2 .v2-courts-body #up-next-level-filters .level-toggle.active { background: var(--v2-surface) !important; box-shadow: inset 0 -3px 0 var(--lvl) !important; }

/* Player names: bigger and bolder everywhere so they are quick to find */
html.ui-v2 #courts-container .team-player-name { font-size: 16.5px !important; font-weight: 800 !important; color: var(--v2-text) !important; letter-spacing: -.01em; }
html.ui-v2 .v2-courts-body .up-next-player-name { font-size: 15.5px !important; font-weight: 800 !important; color: var(--v2-text) !important; letter-spacing: -.01em; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .waitlist-player-name { font-size: 16.5px !important; font-weight: 800 !important; color: var(--v2-text) !important; letter-spacing: -.01em; }
html.ui-v2 #players .player-name { font-size: 16.5px !important; }
html.ui-v2 .court-player-modal-name, html.ui-v2 .up-next-player-item-name, html.ui-v2 .lock-picker-item-name { font-size: 15.5px !important; font-weight: 800 !important; }
html.ui-v2 .v2-courts-body .up-next-box .tv-control-btn:nth-child(3) { background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1.5px solid var(--v2-border-strong) !important; }
/* Waitlist row: name gets its own full line (no squeezed names), then court picker + button, then games & wait */
html.ui-v2 .v2-waitlist-card .waitlist-item {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "name lvl" "sel btn" "det det" !important; row-gap: 6px !important;
}
html.ui-v2 .v2-waitlist-card .waitlist-item > select { width: 100% !important; max-width: none !important; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .waitlist-level { justify-self: end; }
html.ui-v2 .v2-waitlist-card .waitlist-item > .waitlist-lock-indicator { grid-area: name; justify-self: end; align-self: center; margin-right: 0 !important; }

/* =====================================================================
   ROUND 5 — the everyday open-play buttons get their own colours + symbol
   (fixed colours, so they stay recognisable whatever primary colour is picked)
   ▶ Start Game = green · ■ End Game = orange · ✦ Auto-fill (Add Unfamiliar) = purple
   ＋ Add a Player (court) / + Player (Up Next) = teal
   ===================================================================== */
html.ui-v2 {
    --v2-act-start: #1f7a33; --v2-act-start-h: #186329;
    --v2-act-end: #c2410c; --v2-act-end-h: #a3360a;
    --v2-act-auto: #6d28d9; --v2-act-auto-h: #5b21b6;
    --v2-act-add: #0f766e; --v2-act-add-h: #0b5f59;
}
html.ui-v2 #courts-container .court-actions .start-game,
html.ui-v2 #courts-container .court-actions .end-game,
html.ui-v2 #courts-container .court-actions .add-unfamiliar-players,
html.ui-v2 #courts-container .form-group .btn:not(:disabled),
html.ui-v2 .v2-courts-body #add-unfamiliar-up-next-btn,
html.ui-v2 .v2-courts-body #add-player-up-next-btn {
    color: #fff !important; border: 0 !important; font-weight: 800 !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, .18) !important;
}
html.ui-v2 #courts-container .court-actions .start-game { background: var(--v2-act-start) !important; }
html.ui-v2 #courts-container .court-actions .start-game:hover { background: var(--v2-act-start-h) !important; }
html.ui-v2 #courts-container .court-actions .end-game { background: var(--v2-act-end) !important; }
html.ui-v2 #courts-container .court-actions .end-game:hover { background: var(--v2-act-end-h) !important; }
html.ui-v2 #courts-container .court-actions .add-unfamiliar-players, html.ui-v2 .v2-courts-body #add-unfamiliar-up-next-btn { background: var(--v2-act-auto) !important; }
html.ui-v2 #courts-container .court-actions .add-unfamiliar-players:hover, html.ui-v2 .v2-courts-body #add-unfamiliar-up-next-btn:hover { background: var(--v2-act-auto-h) !important; }
html.ui-v2 #courts-container .form-group .btn:not(:disabled), html.ui-v2 .v2-courts-body #add-player-up-next-btn { background: var(--v2-act-add) !important; }
html.ui-v2 #courts-container .form-group .btn:not(:disabled):hover, html.ui-v2 .v2-courts-body #add-player-up-next-btn:hover { background: var(--v2-act-add-h) !important; }
html.ui-v2 #courts-container .court-actions .autofill-sublabel { color: #fff !important; opacity: .92; }

/* a small symbol in front so each one is found at a glance */
html.ui-v2 #courts-container .court-actions .start-game::before { content: "▶"; font-size: 12px; margin-right: 7px; }
html.ui-v2 #courts-container .court-actions .end-game::before { content: "■"; font-size: 12px; margin-right: 7px; }
html.ui-v2 #courts-container .court-actions .start-game, html.ui-v2 #courts-container .court-actions .end-game { flex-direction: row !important; font-size: 15px !important; }
html.ui-v2 #courts-container .court-actions .autofill-label::before { content: "✦ "; }
html.ui-v2 .v2-courts-body #add-unfamiliar-up-next-btn::before { content: "✦"; font-size: 12px; }
html.ui-v2 #courts-container .form-group .btn:not(:disabled)::after { content: "＋ Add a Player" !important; font: 800 14.5px var(--v2-font) !important; }
html.ui-v2 .v2-courts-body #add-player-up-next-btn::after { content: "＋ Player" !important; }
/* Quick End stays next to End Game but quieter, in the same orange family */
html.ui-v2 #courts-container .court-actions .quick-end-game { background: var(--v2-orange-bg) !important; color: var(--v2-orange) !important; border: 1.5px solid var(--v2-orange) !important; }
html.ui-v2 .v2-courts-body .up-next-actions #add-unfamiliar-up-next-btn { background: var(--v2-act-auto) !important; border-color: var(--v2-act-auto) !important; color: #fff !important; }
html.ui-v2 .v2-courts-body .up-next-actions #add-unfamiliar-up-next-btn:hover { background: var(--v2-act-auto-h) !important; }
html.ui-v2 .v2-courts-body .up-next-actions #add-player-up-next-btn { background: var(--v2-act-add) !important; border-color: var(--v2-act-add) !important; color: #fff !important; }

/* Home → Top Players Control: what is active on the TV right now */
html.ui-v2 #home #tv-controls-section .btn.is-on {
    background: var(--v2-free-bg) !important; color: var(--v2-free) !important; border: 1.5px solid var(--v2-free) !important; font-weight: 800 !important;
    box-shadow: inset 0 0 0 1px var(--v2-free) !important;
}

/* =====================================================================
   ROUND 9 — Roomier Courts tab ("Comfortable" layout, the default)
   Court cards are split into zones with lines between them, cards get
   clearer edges, the Courts tab gets section titles, and Up Next / the
   waitlist get separators. "Compact" (Appearance) keeps today's spacing.
   ===================================================================== */
html.ui-v2 { --v2-team1: #15803d; --v2-team2: #c2410c; --v2-card-edge: var(--v2-border-strong); --v2-card-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 8px 22px rgba(15, 23, 42, .07); }
@media (prefers-color-scheme: dark) { html.ui-v2:not([data-v2-theme="light"]) { --v2-team1: #4ade80; --v2-team2: #fb923c; } }
html.ui-v2[data-v2-theme="dark"] { --v2-team1: #4ade80; --v2-team2: #fb923c; --v2-card-edge: #46566b; --v2-card-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 26px rgba(0, 0, 0, .45); }
html.ui-v2[data-v2-theme="light"] { --v2-team1: #15803d; --v2-team2: #c2410c; }

/* Section titles (Courts · Rules · Up Next · Waitlist) */
html.ui-v2 .v2-section-title { margin: 2px 0 10px !important; padding: 0 0 6px !important; font: 800 15px var(--v2-font) !important; color: var(--v2-text) !important; border-bottom: 2px solid var(--v2-border) !important; letter-spacing: .01em; }
html.ui-v2[data-v2-density="compact"] .v2-section-title { display: none !important; }

/* ---- Court cards ---- */
html.ui-v2:not([data-v2-density="compact"]) #courts-container { gap: 16px !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-card {
    padding: 0 0 14px !important; gap: 12px 8px !important; overflow: hidden;
    border-left: 1.5px solid var(--v2-card-edge) !important; border-right: 1.5px solid var(--v2-card-edge) !important; border-bottom: 1.5px solid var(--v2-card-edge) !important;
    box-shadow: var(--v2-card-shadow) !important; background: var(--v2-surface) !important;
}
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-card[data-v2-timer="long"] { box-shadow: inset 0 3px 0 var(--v2-danger), var(--v2-card-shadow) !important; }
/* everything below the header band sits inside the card's side padding */
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-card > :not(.v2-cz-head) { margin: 0 14px !important; flex-basis: calc(100% - 28px) !important; max-width: calc(100% - 28px); }

/* Zone 1: header band — name, timer, gender, Fullscreen / Voice */
html.ui-v2 #courts-container .v2-cz-head { order: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; }
html.ui-v2 #courts-container .v2-cz-head .court-title { order: 1; flex: 1 1 auto !important; }
html.ui-v2 #courts-container .v2-cz-head .court-status { order: 2; }
html.ui-v2 #courts-container .v2-cz-head .court-gender-rule { order: 3; }
html.ui-v2 #courts-container .v2-cz-head .court-tv-controls-container { order: 4; margin-left: auto !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .v2-cz-head { flex: 0 0 100% !important; margin: 0 !important; padding: 12px 14px !important; background: var(--v2-surface-2); border-bottom: 1px solid var(--v2-border); }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .v2-cz-head .court-title h3 { font-size: 18px !important; }

/* Zone 2: court settings — levels, Challenge Court, Auto next game */
html.ui-v2 #courts-container .v2-cz-settings { order: 1 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
html.ui-v2 #courts-container .v2-cz-settings.is-empty { display: none !important; }
html.ui-v2 #courts-container .v2-cz-settings > * { order: 0 !important; margin: 0 !important; }
html.ui-v2 #courts-container .v2-cz-settings > .court-level-filters { flex: 1 1 100% !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .v2-cz-settings { padding: 8px 10px 10px !important; border: 1px solid var(--v2-border) !important; border-radius: 10px; background: transparent; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .v2-cz-settings::before { content: "Court settings"; flex: 1 1 100%; font: 800 10.5px var(--v2-font); letter-spacing: .08em; text-transform: uppercase; color: var(--v2-muted); }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .v2-cz-settings > .court-level-filters { justify-content: flex-start !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .v2-cz-settings > .court-level-filters::before { content: "Levels:"; font: 700 12px var(--v2-font); color: var(--v2-muted); align-self: center; margin-right: 2px; }
html.ui-v2 #courts-container .v2-cz-settings > .ap-court-row { justify-content: flex-start !important; }

/* Zone 3: the players — Team 1 / Team 2 with their own colour edge and a VS line */
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-teams { gap: 10px !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-team { padding: 8px 10px 8px 12px !important; border: 1px solid var(--v2-border) !important; border-radius: 11px !important; background: var(--v2-surface-2) !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-team:first-child { border-left: 4px solid var(--v2-team1) !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-team:last-child { border-left: 4px solid var(--v2-team2) !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-team:first-child .team-name { color: var(--v2-team1) !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-team:last-child .team-name { color: var(--v2-team2) !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .team-name { font: 800 11.5px var(--v2-font) !important; letter-spacing: .06em; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-teams::before {
    font-size: 12px !important; color: var(--v2-text) !important; background: var(--v2-surface); border: 1.5px solid var(--v2-border-strong); border-radius: 999px; padding: 2px 10px; line-height: 1.4;
}
@container v2court (max-width: 540px) {
    html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-teams { row-gap: 8px !important; background: linear-gradient(var(--v2-border), var(--v2-border)) center / 100% 1px no-repeat; }
}
/* the player rows inside a team: a line between them instead of two boxes */
html.ui-v2:not([data-v2-density="compact"]) #courts-container .team-player { border-radius: 8px !important; }

/* Zone 4: balance as one readable line */
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-balance-display { padding: 2px 2px 0 !important; font-size: 12.5px !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-balance-display > div:nth-child(2) > div { font-size: 12px !important; }

/* Zone 5: the actions — a line above them */
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-card .ap-call-row,
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-card:not(:has(.ap-call-row)) .court-actions { border-top: 1px solid var(--v2-border) !important; padding-top: 12px !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-card .ap-call-row.is-called { border-top: 2px solid var(--v2-orange) !important; padding-top: 8px !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .court-actions { gap: 10px !important; }
/* "Send Up Next" row on a free court: its own band */
html.ui-v2:not([data-v2-density="compact"]) #courts-container .up-next-court-actions[data-v2-has-send="1"] { padding: 8px 10px !important; border: 1px dashed var(--v2-border-strong) !important; border-radius: 10px; }

/* ---- Up Next games: header strip with a line under it ---- */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-container { gap: 14px !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box { padding: 0 0 10px !important; gap: 8px !important; border: 1.5px solid var(--v2-card-edge) !important; box-shadow: var(--v2-card-shadow) !important; overflow: hidden; background: var(--v2-surface) !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box > * { margin-left: 10px !important; margin-right: 10px !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box > .up-next-box-header { margin: 0 !important; padding: 9px 64px 9px 26px !important; background: var(--v2-surface-2); border-bottom: 1px solid var(--v2-border) !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box > .drag-handle { margin: 0 !important; top: 12px !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .up-next-players { gap: 8px !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .up-next-player { border: 1px solid var(--v2-border) !important; }

/* ---- Waitlist: clear lines between players ---- */
html.ui-v2:not([data-v2-density="compact"]) .v2-waitlist-card > #waitlist-grid { gap: 10px !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-waitlist-card .waitlist-item { border: 1px solid var(--v2-card-edge) !important; padding: 10px 12px !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-waitlist-card .waitlist-item:hover { border-color: var(--v2-accent) !important; }

/* ---- Rules box and the Autopilot card get the same edge ---- */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-main > .restriction-toggles-container,
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-main > .queue-autopilot-card { border: 1.5px solid var(--v2-card-edge) !important; box-shadow: var(--v2-card-shadow) !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-main > .queue-autopilot-card { border-left: 4px solid var(--v2-purple, #7c3aed) !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-main { gap: 18px !important; }

/* ---- Player history popup (NEW / WITH / VS badges): readable in light and dark ---- */
html.ui-v2 #relationship-modal > div { background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; box-shadow: var(--v2-shadow-lg, 0 20px 50px rgba(0,0,0,.35)) !important; }
html.ui-v2 #relationship-modal > div > button { color: var(--v2-muted) !important; }
html.ui-v2 #relationship-modal-content h3,
html.ui-v2 #relationship-modal-content [style*="color:#1a202c"] { color: var(--v2-text) !important; }
html.ui-v2 #relationship-modal-content [style*="background:#f8f9fa"] { background: var(--v2-surface-2) !important; }
html.ui-v2 #relationship-modal-content [style*="color:#6c757d"] { color: var(--v2-muted) !important; }
html.ui-v2 #relationship-modal-content [style*="border-bottom:1px solid #f0f0f0"] { border-bottom-color: var(--v2-border) !important; }
html.ui-v2 #relationship-modal-content [style*="color:#28a745"] { color: var(--v2-free) !important; }
html.ui-v2 #relationship-modal-content [style*="border-left:4px solid #28a745"] { border-left-color: var(--v2-free) !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .v2-cz-settings > .court-level-filters { gap: 4px !important; flex-wrap: wrap !important; }
html.ui-v2:not([data-v2-density="compact"]) #courts-container .v2-cz-settings .level-toggle { padding: 2px 8px !important; font-size: 11.5px !important; }

/* ---- Up Next (Comfortable): teams, a 2-row header, state on the edge, calm balance ---- */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-header h2::after {
    content: attr(data-v2-summary); margin-left: 10px; font: 600 12.5px var(--v2-font); color: var(--v2-muted); white-space: nowrap;
}
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body #up-next-stats { display: none !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-header { border-bottom: 2px solid var(--v2-border) !important; padding-bottom: 8px !important; }
/* "Levels allowed" + "Suggested mix" read as one bar */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body #up-next-level-filters { margin-bottom: 0 !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body #up-next-level-filters + .gender-plan-bar,
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body #up-next-level-filters + * { margin-top: 0 !important; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-top: 1px dashed var(--v2-border) !important; }

/* the game box: header strip (2 rows), players, then balance and Clear game */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box > .up-next-box-header { order: 0; row-gap: 6px !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .up-next-gender-row { order: 3; flex: 0 1 auto !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .tv-controls-container { order: 4; flex: 0 0 auto !important; margin-left: auto !important; gap: 4px !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .tv-control-btn { height: 28px !important; padding: 0 9px !important; font-size: 12px !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .up-next-box-header > .header-left > .up-next-game-number,
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .up-next-box-header > .header-left > .player-count-badge { order: 1; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .up-next-box-header .up-next-gender-row { flex-basis: auto !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .up-next-box-header { padding-right: 14px !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box > .up-next-players { order: 1; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box > .up-next-balance-indicator { order: 3; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box > .clear-up-next-game { order: 4; }

/* teams: Team 1 = players 1–2, Team 2 = players 3–4, with a VS line between (only once there are 3+) */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players > .up-next-player:nth-child(1),
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players > .up-next-player:nth-child(2) { border-left: 4px solid var(--v2-team1) !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players > .up-next-player:nth-child(3),
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players > .up-next-player:nth-child(4) { border-left: 4px solid var(--v2-team2) !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players:has(> .up-next-player:nth-child(3))::before {
    content: "VS"; justify-self: center; align-self: center; font: 800 12px/1.4 var(--v2-font); color: var(--v2-text);
    background: var(--v2-surface); border: 1.5px solid var(--v2-border-strong); border-radius: 999px; padding: 2px 10px;
    grid-column: 1 / -1; grid-row: 3;
}
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players:has(> .up-next-player:nth-child(3)) > .up-next-player:nth-child(1) { grid-row: 1; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players:has(> .up-next-player:nth-child(3)) > .up-next-player:nth-child(2) { grid-row: 2; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players:has(> .up-next-player:nth-child(3)) > .up-next-player:nth-child(3) { grid-row: 4; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players:has(> .up-next-player:nth-child(3)) > .up-next-player:nth-child(4) { grid-row: 5; }
@container v2game (min-width: 440px) {
    html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players:has(> .up-next-player:nth-child(3))::before { grid-row: 2; }
    html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players:has(> .up-next-player:nth-child(3)) > .up-next-player:nth-child(1) { grid-row: 1; grid-column: 1; }
    html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players:has(> .up-next-player:nth-child(3)) > .up-next-player:nth-child(2) { grid-row: 1; grid-column: 2; }
    html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players:has(> .up-next-player:nth-child(3)) > .up-next-player:nth-child(3) { grid-row: 3; grid-column: 1; }
    html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players:has(> .up-next-player:nth-child(3)) > .up-next-player:nth-child(4) { grid-row: 3; grid-column: 2; }
}

/* state on the edge: ready = solid green, being built = dashed, empty = light dashed */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box[data-v2-fill="ready"] { border: 1.5px solid var(--v2-free) !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box[data-v2-fill="partial"] { border: 1.5px dashed var(--v2-border-strong) !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box[data-v2-fill="empty"] { border: 1.5px dashed var(--v2-border) !important; box-shadow: none !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box.ap-held,
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box.ap-called { border: 1.5px solid var(--v2-orange) !important; outline: none !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box.ap-held { border-style: dashed !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box[data-v2-open-text]::after {
    content: attr(data-v2-open-text); order: 2; margin: 0 10px; padding: 8px 10px; border: 1.5px dashed var(--v2-border-strong); border-radius: 9px;
    font: 700 12.5px var(--v2-font); color: var(--v2-muted); text-align: center;
}

/* balance: one calm line instead of the big green bar */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-balance-indicator {
    background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important; box-shadow: none !important; color: var(--v2-text) !important; padding: 4px 10px !important;
}
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-balance-indicator > .balance-header,
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-balance-indicator > .balance-header * { color: var(--v2-text) !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-balance-indicator .level-category-badge { background: var(--v2-surface) !important; border: 1px solid var(--v2-border) !important; }

/* Clear game: a quiet button at the bottom, away from the title */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .clear-up-next-game {
    position: static !important; width: auto !important; height: 28px !important; align-self: flex-start; margin: 0 10px !important; padding: 0 10px !important;
    font: 700 12px var(--v2-font) !important; background: transparent !important; color: var(--v2-muted) !important; border: 1px solid var(--v2-border) !important; border-radius: 8px !important; gap: 6px;
}
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .clear-up-next-game i { display: inline-block; font-size: 11px; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .clear-up-next-game::after { content: none !important; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .clear-up-next-game:hover { color: var(--v2-danger) !important; border-color: var(--v2-danger) !important; }

/* ---- Team Colors OFF on the TV (casual: players pick their own teams) — both layouts ---- */
/* court cards: one group of 4, no Team 1 / Team 2, no VS */
html.ui-v2[data-v2-teams="off"] #courts-container .court-teams { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; background: none !important; }
html.ui-v2[data-v2-teams="off"] #courts-container .court-team,
html.ui-v2[data-v2-teams="off"] #courts-container .team-players { display: contents !important; }
html.ui-v2[data-v2-teams="off"] #courts-container .team-header { display: none !important; }
html.ui-v2[data-v2-teams="off"] #courts-container .team-player { grid-row: auto !important; grid-column: auto !important; border: 1px solid var(--v2-border) !important; border-left: 4px solid var(--v2-border-strong) !important; background: var(--v2-surface-2) !important; }
html.ui-v2[data-v2-teams="off"] #courts-container .court-teams::before {
    content: "Players pick teams" !important; grid-column: 1 / -1 !important; grid-row: 3 !important; justify-self: start !important; align-self: center;
    font: 700 11.5px var(--v2-font) !important; color: var(--v2-muted) !important; background: var(--v2-surface-2) !important; border: 1px solid var(--v2-border) !important;
    border-radius: 999px !important; padding: 2px 10px !important; line-height: 1.4 !important; text-transform: none; letter-spacing: 0;
}
@container v2court (max-width: 540px) {
    html.ui-v2[data-v2-teams="off"] #courts-container .court-teams { grid-template-columns: minmax(0, 1fr) !important; }
    html.ui-v2[data-v2-teams="off"] #courts-container .court-teams::before { grid-row: 5 !important; }
}
/* Up Next: plain list in queue order, no team edges, no VS */
html.ui-v2[data-v2-teams="off"] .v2-courts-body .up-next-players > .up-next-player:nth-child(n):not(.x) { grid-row: auto !important; grid-column: auto !important; border-left: 4px solid var(--v2-border-strong) !important; }
html.ui-v2[data-v2-teams="off"] .v2-courts-body .up-next-players::before { content: none !important; display: none !important; }
html.ui-v2[data-v2-teams="off"]:not([data-v2-density="compact"]) .v2-courts-body .up-next-players:has(> .up-next-player:nth-child(2))::after {
    content: "Players pick teams"; grid-column: 1 / -1; justify-self: start; font: 700 11.5px var(--v2-font); color: var(--v2-muted);
    background: var(--v2-surface-2); border: 1px solid var(--v2-border); border-radius: 999px; padding: 2px 10px; line-height: 1.4;
}
/* team balance means nothing when players pick teams: hide it, keep the level tags */
html.ui-v2[data-v2-teams="off"] #courts-container .court-balance-display { display: none !important; }
html.ui-v2[data-v2-teams="off"] .v2-courts-body .up-next-balance-indicator > .balance-header { display: none !important; }
html.ui-v2[data-v2-teams="off"] .v2-courts-body .up-next-balance-indicator:not(:has(.level-category-badge)) { display: none !important; }

/* ---- Edit Game popup (Stats → game history ✏️) and Reclub import tabs: readable in dark ---- */
html.ui-v2 .edit-game-modal-content { background: var(--v2-surface) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border); }
html.ui-v2 .edit-game-modal-header { border-bottom-color: var(--v2-border) !important; }
html.ui-v2 .edit-game-modal-header h3, html.ui-v2 #edit-game-modal-body, html.ui-v2 #edit-game-modal-body p { color: var(--v2-text) !important; }
html.ui-v2 .close-edit-modal { color: var(--v2-muted) !important; }
html.ui-v2 .edit-game-form-group label, html.ui-v2 .team-select h4 { color: var(--v2-text) !important; }
html.ui-v2 #edit-game-modal-body [style*="color: #6c757d"] { color: var(--v2-muted) !important; }
html.ui-v2 .team-select { background: var(--v2-surface-2) !important; border-color: var(--v2-border) !important; }
html.ui-v2 .player-checkbox { background: var(--v2-surface) !important; color: var(--v2-text) !important; border-color: var(--v2-border) !important; }
html.ui-v2 .player-checkbox:hover { background: var(--v2-accent-soft) !important; }
html.ui-v2 .edit-game-form-group select, html.ui-v2 .edit-game-form-group input, html.ui-v2 .score-inputs input { background: var(--v2-surface) !important; color: var(--v2-text) !important; border-color: var(--v2-border-strong) !important; }
html.ui-v2 .reclub-tab-btn { color: var(--v2-muted) !important; }
html.ui-v2 .reclub-tab-btn.active { color: var(--v2-accent-text) !important; border-bottom-color: var(--v2-accent) !important; }
html.ui-v2 .btn-save-edit { background: var(--v2-accent) !important; color: var(--v2-on-accent) !important; border: 0 !important; }
html.ui-v2 .btn-cancel-edit { background: var(--v2-surface-2) !important; color: var(--v2-text) !important; border: 1px solid var(--v2-border) !important; }
/* gender rule + "not all players are …" warning wrap inside the card on phones */
html.ui-v2 #courts-container .court-gender-rule { flex-wrap: wrap !important; max-width: 100%; min-width: 0; flex-shrink: 1 !important; row-gap: 6px !important; }
html.ui-v2 #courts-container .court-gender-rule .gender-mismatch-badge { white-space: normal !important; max-width: 100%; }

/* ---- Even rows: court boxes and Up Next boxes fill every row, no lonely last box (columns/spans set by ui-v2.js) ---- */
html.ui-v2 .v2-courts-main > #courts-container { --v2-tile-min: 330px; }
/* Up Next: the app draws rows of 4; in the new design all games share one grid so rows can be balanced */
html.ui-v2 .v2-courts-main #up-next-container {
    --v2-tile-min: 300px; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px !important; align-items: stretch !important;
}
html.ui-v2 .v2-courts-main #up-next-container > .up-next-row { display: contents !important; }
html.ui-v2 .v2-courts-main #up-next-container > * , html.ui-v2 .v2-courts-main #up-next-container > .up-next-row > * { min-width: 0; }
html.ui-v2 .v2-courts-main > #courts-container[data-v2-cols],
html.ui-v2 .v2-courts-main #up-next-container[data-v2-cols] { grid-template-columns: repeat(var(--v2-cols), minmax(0, 1fr)) !important; }
html.ui-v2 .v2-courts-main > #courts-container[data-v2-cols] .court-card,
html.ui-v2 .v2-courts-main #up-next-container[data-v2-cols] > .up-next-row > *,
html.ui-v2 .v2-courts-main #up-next-container[data-v2-cols] > :not(.up-next-row) { grid-column: span var(--v2-span, 1) !important; }

/* Up Next box inside adapts to its width: narrow = 3 header rows, medium = 2, wide = 1 */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box > .up-next-box-header::after { content: ""; order: 2; flex: 0 0 100%; height: 0; }
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .up-next-box-header .player-count-badge { margin-left: auto !important; }
@container v2game (min-width: 600px) {
    html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box > .up-next-box-header::after { display: none; }
    html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box .up-next-box-header > .header-left > .player-count-badge { order: 5; margin-left: 0 !important; }
    html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-players { gap: 6px 8px !important; }
}
/* the summary next to "Up Next" wraps on small phones instead of running off the edge */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-header h2::after { white-space: normal !important; display: inline-block; }
/* empty game: the "Open game" placeholder keeps its side margins and stays centred in a tall box */
html.ui-v2:not([data-v2-density="compact"]) .v2-courts-body .up-next-box > .up-next-players:empty { margin: 0 10px !important; text-align: center; padding: 8px !important; }