:root {
    --brand: #181c1a;
    --brand-dark: #0a0b09;
    --brand-tint: #e8f3d2;
    --accent: #a5c639;
    --accent-dark: #5d8b37;
    --teal: #5d8b37;
    --teal-deep: #5d8b37;
    --yellow: #a5c639;
    --pickleball-deep: #5d8b37;
    --pickleball-hover: #8fae2e;
    --feijoa: #a3d78e;
    --sahara: #f2e18c;
    --energy: #f7d850;
    --team1: #2f6fed;
    --team1-dark: #1d4fc4;
    --ink: #201d18;
    --muted: #726c5e;
    --line: #e7dfcf;
    --surface: #ffffff;
    --page-bg: #faf6ee;
    --danger: #c62828;
    --danger-bg: #fdecea;
    --info-bg: #eef6ff;
    --radius: 10px;
    font-family: 'Inter', -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--page-bg);
    color: var(--ink);
}

h1, h2, h3, h4, .serif {
    margin: 0 0 0.4em 0;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    letter-spacing: -0.01em;
}

a {
    color: var(--brand-dark);
}

/* Safety net: nothing in this app wants the browser's default "already visited" purple - every custom-
   colored link below relies on its own class's color actually winning, not fading to purple once
   clicked. Anything more specific than plain `a` (e.g. .btn) still wins over this. */
a:visited {
    color: inherit;
}

.app-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-header {
    background: rgba(250, 246, 238, 0.9);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--ink);
    display: flex;
    flex-wrap: wrap;
    /* flex-start, not center - a logged-in club's .brand-block is taller than its siblings (the club
       name subtitle adds a second line under the logo), and centering against that taller box pushed
       the nav/live-pill/actions down into the gap between the logo and the subtitle instead of lining
       up with the logo, looking visibly "off" whenever they shared a wrapped row with it. flex-start
       instead puts every sibling's own top edge flush with .brand-block's top edge - deliberately no
       margin-top nudge on any of them, since even a few px of "nudge to visually center" turned out to
       still read as misaligned once the header wraps and something else needs to compare against it. */
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem 1.25rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
}

/* Each of these reads as one unit (brand, nav, live pill, the logged-in club's name+actions) - letting
   the flex container shrink them individually is what squeezed button labels into wrapping mid-word
   ("My" / "Venues") instead of the row just wrapping onto a second line. */
.app-header > * {
    flex-shrink: 0;
}

.brand {
    color: var(--ink);
    text-decoration: none;
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.brand-mark {
    display: flex;
    flex-shrink: 0;
    border-radius: 12px;
}

.brand-text {
    display: inline-flex;
}

.brand-accent {
    color: var(--accent);
}

.app-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    max-width: 100%;
}

.app-nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.3rem 0;
    border-bottom: 2px solid transparent;
}

.app-nav a:hover {
    color: var(--accent);
}

.app-nav a.active {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.app-nav-disabled {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: rgba(32, 29, 24, 0.35);
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.3rem 0;
    cursor: default;
}

.app-main {
    flex: 1;
    padding: 1.25rem;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* Buttons - .btn is also used on <a> tags (e.g. "Completed Tournaments"), which otherwise carry the
   browser's own underline and (once clicked) a :visited purple that nothing here was overriding. */
.btn, .btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.btn:hover {
    filter: brightness(0.97);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary, .btn-primary:visited {
    background: var(--brand);
    color: white;
    border-color: var(--brand-dark);
}

.btn-accent, .btn-accent:visited {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent-dark);
}

.btn-pickleball, .btn-pickleball:visited {
    background: var(--yellow);
    color: #fff;
    border-color: var(--pickleball-deep);
}

.btn-danger, .btn-danger:visited {
    background: var(--danger-bg);
    color: var(--danger);
    border-color: #f3c6c3;
}

.btn-sm {
    padding: 0.3rem 0.6rem;
    font-size: 0.82rem;
}

.btn-block {
    width: 100%;
    justify-content: center;
}

.btn-icon {
    padding: 0.3rem 0.55rem;
    font-size: 1rem;
    line-height: 1;
}

/* Forms */
.field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.9rem;
}

.field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
}

.field input, .field select, .field textarea {
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
}

.field-row {
    display: flex;
    gap: 0.75rem;
}

.field-row > .field {
    flex: 1;
}

.checkbox-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-direction: row;
}

/* A compact ToggleSwitch + label pairing for inline use in a toolbar (e.g. .board-settings), unlike
   .settings-row which spreads its label/switch apart for a wide standalone settings list. */
.toggle-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
}

/* Matching mode picker */
.matching-mode-picker {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mode-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.8rem 1rem;
    cursor: pointer;
    background: var(--surface);
    transition: border-color 0.1s ease, background 0.1s ease;
}

.mode-card:hover {
    border-color: var(--brand);
}

.mode-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.mode-card.selected {
    background: var(--brand-tint);
    border-color: var(--brand);
}

.mode-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.2rem;
}

.mode-check {
    color: var(--brand);
    font-weight: 800;
}

.mode-desc {
    font-size: 0.85rem;
}

.mode-desc-link {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    margin-left: 0.3em;
    font-size: inherit;
    font-family: inherit;
    font-weight: 700;
    color: var(--brand-dark);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
}

.mode-desc-link:hover {
    color: var(--brand);
}

.badge-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* A small attention-grabbing count bubble on a button (e.g. "View Registrations" pending count) - red
   like a notification badge, since it's specifically counting items still awaiting review/action. */
.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.35rem;
    margin-left: 0.4rem;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
}

.badge-tag-recommended {
    background: var(--brand-tint);
    color: var(--brand-dark);
}

.badge-tag-new {
    background: #ecdcfb;
    color: #6a1fb0;
}

.badge-tag-soon {
    background: rgba(32, 29, 24, 0.08);
    color: rgba(32, 29, 24, 0.55);
}

.badge-tag-trial {
    background: #fff3cd;
    color: #8a6400;
}

.badge-tag-plan {
    background: var(--brand-tint);
    color: var(--accent-dark);
}

.upgrade-nav-badge {
    text-decoration: none;
    padding: 0.28rem 0.7rem;
    font-size: 0.72rem;
    transition: filter 0.15s ease;
}

.upgrade-nav-badge:hover {
    filter: brightness(0.95);
}

/* Pill toggle (e.g. Format: Doubles / Singles) */
.pill-toggle {
    display: flex;
    gap: 0.4rem;
}

.pill-btn {
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #eef0f2;
    color: var(--muted);
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    font-family: inherit;
}

.pill-btn.selected {
    background: var(--brand);
    color: white;
    border-color: var(--brand-dark);
}

/* Scaled down to match the shrunk "Round 1 seed pairing" caption next to it, instead of towering over it
   at the default control sizes. */
.seed-pairing-row .help-modal-trigger {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.seed-pairing-row .help-modal-trigger svg {
    width: 12px;
    height: 12px;
}

.seed-pairing-row .pill-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.8rem;
}

/* Toggle switch */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-track {
    position: absolute;
    inset: 0;
    background: #ccc;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.switch-track::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: transform 0.15s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.switch input:checked + .switch-track {
    background: var(--brand);
}

.switch input:checked + .switch-track::before {
    transform: translateX(20px);
}

.switch input:focus-visible + .switch-track {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* Stepper (e.g. Game limit count) */
.stepper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.stepper-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #eee;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stepper-btn:hover {
    background: #e2e2e2;
}

.stepper-value {
    font-size: 1.1rem;
    font-weight: 700;
    min-width: 1.5rem;
    text-align: center;
}

/* Session settings panel */
.settings-panel {
    margin-bottom: 1rem;
    padding: 0;
}

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1rem;
    cursor: pointer;
}

.settings-summary {
    font-size: 0.82rem;
    margin-top: 0.15rem;
}

.chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    transition: transform 0.15s ease, background 0.15s ease;
}

.chevron.expanded {
    transform: rotate(180deg);
}

.settings-header:hover .chevron,
.panel-title:hover .chevron {
    background: var(--accent-dark);
}

.settings-body {
    border-top: 1px solid var(--line);
    padding: 0.4rem 1rem 0.6rem;
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 640px;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line);
}

.settings-row:last-child {
    border-bottom: none;
}

.settings-row select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
}

.settings-group-highlight {
    background: var(--brand-tint);
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius);
    padding: 0.1rem 0.9rem;
    margin-top: 0.75rem;
}

.board-layout-side {
    position: sticky;
    top: 4.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.preview-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.9rem;
}

.preview-stat:last-child {
    border-bottom: none;
}

.preview-stat span:first-child {
    color: var(--muted);
}

.preview-stat strong {
    text-align: right;
}

.preview-total strong {
    color: var(--accent-dark);
}

.preview-divider {
    border-top: 1px dashed var(--line);
    margin: 0.4rem 0;
}

/* Welcome hero banner */
.hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    margin: 1.5rem auto 0;
    max-width: 1000px;
    padding: 3.5rem 2rem;
    text-align: center;
    background:
        radial-gradient(circle at 85% 88%, rgba(242,169,60,0.2), transparent 45%),
        radial-gradient(circle at 20% 15%, #5d8b37 0%, var(--brand) 45%, var(--brand-dark) 100%);
    color: white;
}

.hero-decor {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-content {
    position: relative;
    max-width: 620px;
    margin: 0 auto;
}

.hero-content-wide {
    max-width: 760px;
}

.hero-split {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 2rem;
    margin-top: 0.5rem;
    text-align: left;
}

.hero-split-col {
    flex: 1;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero-split-col .hero-actions {
    justify-content: flex-start;
}

.hero-split-col .hero-badges {
    justify-content: flex-start;
    flex-direction: column;
    gap: 0.35rem;
}

.hero-split-title {
    color: white;
    font-size: 1.1rem;
    margin-bottom: 0.8rem;
}

.hero-split-divider {
    width: 1px;
    background: rgba(255,255,255,0.18);
    align-self: stretch;
}

.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 1.1rem;
}

.hero-title {
    font-size: 2.6rem;
    line-height: 1.15;
    margin-bottom: 0.9rem;
    color: white;
}

.hero-title-accent {
    color: var(--accent);
}

.hero-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,0.85);
    margin-bottom: 1.6rem;
}

.hero-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}

.hero-actions .btn {
    padding: 0.7rem 1.4rem;
    font-size: 0.95rem;
}

.hero-btn-secondary {
    background: transparent;
    color: white;
    border-color: rgba(255,255,255,0.4);
}

.hero-badges {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.75);
}

@media (max-width: 640px) {
    .hero {
        padding: 2.5rem 1.25rem;
    }
    .hero-title {
        font-size: 2rem;
    }
    .hero-split {
        flex-direction: column;
        align-items: center;
        gap: 1.75rem;
    }
    .hero-split-col {
        align-items: center;
        text-align: center;
        max-width: none;
    }
    .hero-split-col .hero-actions,
    .hero-split-col .hero-badges {
        justify-content: center;
        align-items: center;
    }
    .hero-split-divider {
        display: none;
    }
}

/* First-run welcome / chooser */
.welcome {
    max-width: 640px;
    margin: 1.5rem auto;
    text-align: center;
}

.welcome-logo {
    margin-bottom: 0.75rem;
}

.welcome-title {
    font-size: 2rem;
    margin-bottom: 0.2rem;
}

.welcome-subtitle {
    color: var(--muted);
    font-size: 1.05rem;
    margin-bottom: 1.75rem;
}

.welcome-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.welcome-card {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.25rem;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.welcome-card:hover {
    border-color: var(--brand);
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.welcome-card:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.welcome-card-static {
    /* This card holds its own buttons rather than being one big link, so the box itself isn't
       clickable - only cursor:pointer is misleading here, the hover highlight is still a fine cue. */
    cursor: default;
}

.welcome-card-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.welcome-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.welcome-icon-brand {
    background: var(--brand-tint);
}

.welcome-icon-accent {
    background: #f2ffcc;
}

.welcome-icon-gold {
    background: #fff4cc;
}

.welcome-card h3 {
    margin-bottom: 0.4rem;
}

.welcome-points {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.88rem;
    color: var(--muted);
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.welcome-points li::before {
    content: "✓ ";
    color: var(--brand);
    font-weight: 700;
}

.welcome-footer {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.welcome-footer .btn {
    text-decoration: none;
}

.club-logout-form {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0 auto;
}

.club-name-badge {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
}

/* The logged-in club's actions - sits on the main header row, aligned with the nav, instead of sharing a
   row with the club name (which moves to its own row below via .club-name-row). */
.club-actions-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.3rem;
    margin: 0 0 0 auto;
}

.club-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.club-actions-subrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.icon-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.icon-action-btn svg {
    flex-shrink: 0;
}

.icon-action-btn:hover {
    background: var(--brand-tint);
    border-color: var(--accent-dark);
    color: var(--accent-dark);
}

.brand-block {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.club-name-subtitle {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(165, 198, 57, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(165, 198, 57, 0); }
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--accent-dark);
    white-space: nowrap;
    /* .app-header is flex-start (not center), since a couple of its other children - the logged-in
       club-actions-wrap, .brand-block when it still had the subtitle - are taller multi-line boxes that
       centering would otherwise drag everything else down to match. But this pill's text is much
       shorter than a plain single line (brand, nav), so flex-start alone leaves it looking like it's
       floating above the line instead of sitting on it - nudge it down to visually center against
       those, without touching the container's own alignment. */
    margin-top: 0.45rem;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    display: inline-block;
    animation: pulse-dot 1.8s infinite;
}

/* Club login */
.club-page {
    max-width: 460px;
    margin: 2.5rem auto;
}

/* Public tournament registration - same gradient treatment as the homepage hero box, so the form
   reads as its own standalone landing page rather than a bare form floating on blank white. */
/* No longer a dark decorative "hero" under the new light theme (see app-wide rebrand) - these public
   pages now just sit on the ambient page background like every other public page (ClubLogin,
   CustomerAccount, etc). Kept as a class (rather than removed from markup) purely for its layout/
   centering properties. */
.register-hero {
    position: relative;
    overflow: hidden;
    margin: 1.5rem auto;
    max-width: 1000px;
    padding: 3rem 1.5rem;
}

.register-hero .club-page {
    margin: 0 auto;
}

@media (max-width: 640px) {
    .register-hero {
        padding: 2rem 1rem;
    }
}

.club-tabs {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.3rem;
    gap: 0.3rem;
    margin-bottom: 1.25rem;
}

.club-tab {
    flex: 1;
    text-align: center;
    padding: 0.6rem;
    border-radius: 8px;
    border: none;
    background: transparent;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.92rem;
}

.club-tab.active {
    background: var(--brand);
    color: white;
}

.club-link-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.club-link-prefix {
    color: var(--muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.club-footer {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.club-or-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
    color: var(--muted);
    font-size: 0.85rem;
}

.club-or-divider::before,
.club-or-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}

.club-footer button {
    background: none;
    border: none;
    color: var(--brand);
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    text-decoration: underline;
}

/* Club login/signup "lively and modern" refresh - scoped under .club-auth-page/.club-auth-card rather
   than touching .club-page/.card themselves, since those are shared with several other pages (public
   tournament registration, the confirm-email/recovery-code/deactivated pages, etc.) that aren't part of
   this request. */
.club-auth-page {
    position: relative;
    isolation: isolate;
    padding: 2.5rem 0 3rem;
    min-height: calc(100vh - 5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@keyframes club-auth-rise {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Full-bleed dark backdrop - a fixed layer behind the whole viewport (not just this column), since
   .club-auth-page itself sits inside .app-main's centered 1400px/460px columns. Layered radial glows in
   the brand palette drift slowly for an "enticing" but non-distracting feel now that the bobbing badge
   emoji is gone. Deliberately NOT animated (via transform) on .club-auth-page itself - an ancestor with
   a running transform animation/transition becomes the containing block for its position:fixed
   descendants in every browser, which would trap these two full-viewport layers inside .club-auth-page's
   own (460px-wide) box instead of the real viewport. The entrance rise animation lives on
   .club-tabs/.club-auth-card instead - see below. */
.club-auth-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 15% 20%, rgba(165, 198, 57, 0.28), transparent 42%),
        radial-gradient(circle at 85% 15%, rgba(247, 216, 80, 0.16), transparent 38%),
        radial-gradient(circle at 75% 85%, rgba(163, 215, 142, 0.2), transparent 45%),
        linear-gradient(160deg, var(--brand-dark) 0%, var(--brand) 55%, #10130f 100%);
    background-size: 140% 140%, 140% 140%, 140% 140%, 100% 100%;
    animation: club-auth-drift 22s ease-in-out infinite alternate;
}

.club-auth-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%);
}

@keyframes club-auth-drift {
    from { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
    to { background-position: 8% 8%, 92% 12%, 42% 92%, 0 0; }
}

.club-auth-page .club-tabs {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
    animation: club-auth-rise 0.5s ease both;
}

.club-auth-page .club-tab {
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.club-auth-page .club-tab.active {
    box-shadow: 0 6px 14px -6px rgba(24, 28, 26, 0.45);
}

.club-auth-page .club-tab:not(.active):hover {
    background: var(--brand-tint);
    color: var(--accent-dark);
}

.club-auth-card {
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06), 0 2px 8px rgba(24, 28, 26, 0.06);
    animation: club-auth-rise 0.5s ease both;
}

.club-auth-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-dark), var(--energy), var(--accent-dark));
    background-size: 200% 100%;
    animation: club-auth-shimmer 3s linear infinite;
}

@keyframes club-auth-shimmer {
    to { background-position: -200% 0; }
}

.club-auth-card h2 {
    background: linear-gradient(90deg, var(--ink), var(--accent-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.club-auth-card .field input,
.club-auth-card .field select,
.club-auth-card .field textarea {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.club-auth-card .field input:focus,
.club-auth-card .field select:focus,
.club-auth-card .field textarea:focus {
    outline: none;
    border-color: var(--accent-dark);
    box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.25);
}

.club-auth-card .btn-primary {
    background: linear-gradient(135deg, var(--accent-dark), var(--brand));
    border: none;
    box-shadow: 0 10px 20px -10px rgba(93, 139, 55, 0.7);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.club-auth-card .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 24px -10px rgba(93, 139, 55, 0.8);
}

.club-auth-card a.btn-block {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.club-auth-card a.btn-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -12px rgba(24, 28, 26, 0.35);
    border-color: var(--accent-dark);
}

.club-recover-request {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
    font-size: 0.9rem;
}

.club-recover-request summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--brand);
}

.club-recover-request p {
    margin: 0.5rem 0 0;
}

.club-recovery-box {
    background: var(--brand-tint);
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius);
    padding: 1rem;
    text-align: center;
    margin: 1rem 0;
}

.club-recovery-code {
    font-family: 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--brand-dark);
    margin: 0.4rem 0;
}

/* Court-capacity upgrade page */
.upgrade-page {
    max-width: 560px;
    margin: 2rem auto;
}

.upgrade-card h1 {
    margin: 0.3rem 0 0.3rem;
    font-size: 1.6rem;
}

.upgrade-eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--accent-dark);
    text-transform: uppercase;
}

.upgrade-feature-list {
    margin: 0.6rem 0 0;
    padding-left: 1.2rem;
    font-size: 0.9rem;
    color: var(--muted);
}

.upgrade-feature-list li {
    margin-bottom: 0.3rem;
}

.upgrade-club-box {
    background: var(--brand-tint);
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin: 1rem 0 1.4rem;
}

.upgrade-club-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.upgrade-club-name {
    font-weight: 700;
    margin: 0.15rem 0 0.15rem;
}

.upgrade-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin: 0.75rem 0 1.25rem;
}

.upgrade-plan {
    position: relative;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.9rem 0.8rem;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.upgrade-plan:hover {
    border-color: var(--accent-dark);
}

.upgrade-plan.selected {
    border-color: var(--accent-dark);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.18);
}

.upgrade-plan-badge {
    position: absolute;
    top: -0.6rem;
    right: 0.6rem;
    background: var(--brand-tint);
    border: 1px solid var(--accent-dark);
    color: var(--accent-dark);
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

.upgrade-plan-name {
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.1rem;
}

.upgrade-plan-duration {
    font-size: 0.78rem;
    margin-bottom: 0.3rem;
}

.upgrade-plan-price {
    font-size: 1.3rem;
    font-weight: 800;
}

.upgrade-plan-desc {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}

.upgrade-plan-pay {
    display: block;
    text-align: center;
    text-decoration: none;
    margin-top: 0.7rem;
}

.upgrade-report-box {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    margin-bottom: 1.1rem;
}

.upgrade-qr-image {
    display: block;
    width: 220px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.upgrade-qr-expiry {
    text-align: center;
    margin: 0.6rem 0 0;
}

.upgrade-qr-modal {
    position: relative;
    text-align: center;
}

.upgrade-qr-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1rem;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
    padding: 0.4rem;
}

.upgrade-qr-modal-close:hover {
    color: var(--danger);
}

.upgrade-cancel-link {
    display: block;
    width: 100%;
    margin-top: 0.8rem;
    background: none;
    border: none;
    color: var(--muted);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.85rem;
    text-align: center;
}

.upgrade-cancel-link:hover {
    color: var(--danger);
}

.upgrade-dev-btn {
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--muted);
    margin-top: 0.6rem;
}

.upgrade-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line);
    padding-top: 1rem;
    margin-bottom: 1.1rem;
}

.upgrade-total-price {
    font-size: 1.3rem;
    font-weight: 800;
}

.upgrade-inline-hint {
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

.upgrade-inline-hint a {
    font-weight: 700;
}

.upgrade-note {
    text-align: center;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.upgrade-footer {
    text-align: center;
    margin-top: 1rem;
}

@media (max-width: 560px) {
    .upgrade-plans {
        grid-template-columns: 1fr;
    }
}

/* Cards / surfaces */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1rem;
}

.panel-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.panel-title-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.import-textarea {
    min-height: 140px;
    resize: vertical;
    font-family: inherit;
}

.alert {
    padding: 0.6rem 0.9rem;
    border-radius: 8px;
    font-size: 0.9rem;
    margin-bottom: 0.9rem;
}

.alert-danger {
    background: var(--danger-bg);
    color: var(--danger);
}

.alert-info {
    background: var(--info-bg);
    color: #0b4a7a;
}

.alert-warning {
    background: #fff3cd;
    color: #8a6100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.badge-open { background: var(--brand-tint); color: var(--brand-dark); }
.badge-inuse { background: rgba(93, 139, 55, 0.12); color: var(--teal-deep); }
.badge-closed { background: #eee; color: #777; }
.badge-scheduled { background: #eef6ff; color: #0b4a7a; }
.badge-active { background: var(--brand-tint); color: var(--brand-dark); }
.badge-completed { background: #eee; color: #555; }
.badge-cancelled { background: var(--danger-bg); color: var(--danger); }
.badge-setup { background: var(--info-bg); color: #0b4a7a; }
.badge-inprogress { background: var(--brand-tint); color: var(--brand-dark); }
.badge-upcoming { background: var(--info-bg); color: #0b4a7a; }
.badge-manual { background: #fff3cd; color: #8a6100; }
.badge-receipt { background: #fff3cd; color: #8a6100; }

/* Session list */
.session-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.session-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.session-card h3 {
    color: var(--ink);
}

.session-card .meta {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.tournament-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.tournament-card-link h3 {
    color: var(--ink);
}

.tournament-card-link .meta {
    color: var(--muted);
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

.tournament-card-link .placement-meta {
    font-size: 0.78rem;
    margin-top: 0.1rem;
}

.tournament-card-photo {
    position: relative;
}

.tournament-card-date-pill {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.tournament-card-status-pill {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.tournament-card-location {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--muted);
    font-size: 0.8rem;
    margin-top: 0.2rem;
}

.tournament-card-location svg {
    flex-shrink: 0;
}

.tournament-card-categories {
    font-size: 0.72rem;
    opacity: 0.7;
}

/* Session board layout */
.board-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.page-title-icon {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-title-icon svg {
    flex-shrink: 0;
}

.board-settings {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.board-layout {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    align-items: start;
}

.board-layout-main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 900px) {
    .board-layout {
        grid-template-columns: 1fr;
    }
}

.court-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.9rem;
}

.court-card {
    border-top: 4px solid var(--line);
}

.court-card.status-open { border-top-color: var(--brand); }
.court-card.status-inuse { border-top-color: var(--accent-dark); }
.court-card.status-closed { border-top-color: #999; }

.court-card .court-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.match-teams {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.team {
    flex: 1;
    background: var(--page-bg);
    border-radius: 8px;
    padding: 0.5rem 0.6rem;
    overflow: hidden;
}

.team.winner {
    background: var(--brand-tint);
    outline: 2px solid var(--accent-dark);
}

.team .player {
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 0.15rem 0;
}

.player-rating {
    font-size: 0.72rem;
    color: var(--muted);
}

.team-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: white;
    padding: 0.2rem 0.6rem;
    margin: -0.5rem -0.6rem 0.4rem;
}

.team-label-1 { background: var(--team1); }
.team-label-2 { background: var(--accent-dark); }

.vs {
    font-weight: 800;
    color: var(--muted);
    font-size: 0.8rem;
}

.win-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.win-btn {
    flex: 1;
    border: none;
    border-radius: var(--radius);
    padding: 0.55rem;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
}

.win-btn:hover {
    filter: brightness(0.95);
}

.win-btn-1 { background: var(--team1); }
.win-btn-2 { background: var(--accent-dark); }

.link-btn {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
    padding: 0.4rem 0;
    width: 100%;
}

.link-btn:hover {
    color: var(--ink);
}

.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 0.3rem;
    animation: live-pulse 1.4s ease-in-out infinite;
}

@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.upnext-badge {
    display: inline-block;
    background: var(--info-bg);
    color: #0b4a7a;
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    margin-bottom: 0.6rem;
}

.upnext-section {
    margin-bottom: 1.25rem;
}

.upnext-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.upnext-card {
    flex: 1 1 260px;
    min-width: 240px;
    background: var(--brand-tint);
    border: 1px solid var(--accent-dark);
    border-radius: var(--radius);
    padding: 0.9rem;
}

.upnext-card.placeholder {
    background: transparent;
    border: 1px dashed var(--line);
}

.upnext-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.player-slot {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.15rem;
    flex-wrap: wrap;
}

.player-slot-name {
    flex: 1;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    background: white;
    border: none;
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.player-slot-name:hover {
    background: var(--brand-tint);
}

.player-slot-auto {
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.15rem 0.5rem;
    cursor: pointer;
    flex-shrink: 0;
}

.player-slot-auto:hover {
    color: var(--ink);
    border-color: var(--muted);
}

.manual-search-input {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid var(--line);
    font-size: 0.8rem;
    font-family: inherit;
}

.manual-search-results {
    flex-basis: 100%;
    margin-top: 0.3rem;
    margin-bottom: 0;
}

.badge-auto {
    background: rgba(255, 255, 255, 0.6);
    color: var(--brand-dark);
}

.upnext-dismiss {
    background: none;
    border: none;
    color: var(--muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.upnext-dismiss:hover {
    color: var(--ink);
}

.upnext-note {
    color: var(--muted);
    font-size: 0.8rem;
}

.court-title-editable {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.icon-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.1rem 0.2rem;
    color: var(--muted);
    line-height: 1;
}

.icon-btn:hover {
    color: var(--ink);
}

.upcoming-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(165, 198, 57, 0.16);
    border-bottom: 1px solid var(--accent-dark);
    padding: 0.6rem 1.25rem;
    text-decoration: none;
    color: inherit;
}

.upcoming-banner:hover {
    filter: brightness(0.98);
}

.upcoming-banner-icon {
    flex-shrink: 0;
    display: flex;
    color: var(--accent-dark);
}

.upcoming-banner-body {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem 0.6rem;
    flex: 1;
}

.upcoming-banner-label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent-dark);
}

.upcoming-banner-date {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent-dark);
}

.upcoming-banner-name {
    font-size: 0.95rem;
}

@keyframes lp-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.marketing-ticker {
    background: var(--brand);
    color: #f5f1e6;
    padding: 11px 0;
    overflow: hidden;
}

.marketing-ticker-track {
    display: flex;
    width: max-content;
    gap: 56px;
    animation: lp-marquee 26s linear infinite;
}

.marketing-ticker-track span {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.marketing-ticker-track em {
    font-style: normal;
    color: #f7d850;
}

/* Same ghost-icon treatment as .icon-btn, but for a destructive action - muted until hovered, then it
   clearly reads as "remove" instead of sitting there as a permanent wall of red buttons. */
.icon-btn-danger {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius);
    color: var(--muted);
}

.icon-btn-danger:hover {
    color: var(--danger);
    background: var(--danger-bg);
}

.court-rename-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
}

.court-rename-row input {
    flex: 1;
    padding: 0.2rem 0.4rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 0.95rem;
    font-family: inherit;
    font-weight: 700;
}

.queue-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.queue-meta {
    font-size: 0.72rem;
    color: var(--muted);
}

.court-empty {
    color: var(--muted);
    font-size: 0.88rem;
    padding: 1rem 0;
    text-align: center;
}

/* Queue */
.queue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.queue-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--page-bg);
}

.queue-position {
    font-weight: 800;
    color: var(--brand-dark);
    min-width: 1.5rem;
}

.queue-name {
    flex: 1;
    font-weight: 600;
}

.queue-row-stack {
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
}

.queue-row-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.tiebreak-suboption {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--muted);
    padding-left: 2.1rem;
}

.tiebreak-suboption input[type="checkbox"] {
    margin: 0;
}

.group-board {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}

.group-column {
    flex: 1 1 180px;
    min-width: 180px;
    background: var(--page-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.6rem;
}

.group-column.drag-over {
    border-color: var(--accent-dark);
    background: var(--brand-tint);
}

.group-column-header {
    font-weight: 800;
    margin-bottom: 0.5rem;
    display: flex;
    justify-content: space-between;
    color: var(--brand-dark);
}

.group-entrant-chip {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.4rem 0.55rem;
    margin-bottom: 0.4rem;
    font-size: 0.85rem;
    cursor: grab;
}

.group-entrant-chip:active {
    cursor: grabbing;
}

.group-schedule {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--line);
}

.group-schedule-round {
    font-size: 0.76rem;
    color: var(--muted);
    margin-bottom: 0.3rem;
}

.group-schedule-round strong {
    color: var(--ink);
    font-weight: 600;
}

.player-name-input {
    flex: 1;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: 0.95rem;
    font-family: inherit;
}

.player-name-input:focus {
    outline: none;
    border-color: var(--accent-dark);
    box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.2);
}

.queue-empty {
    color: var(--muted);
    font-size: 0.88rem;
    padding: 0.5rem 0;
}

.checkin-box {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.9rem;
}

.checkin-box select {
    flex: 1;
}

/* Recent matches */
.recent-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recent-row {
    font-size: 0.85rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.recent-row .score {
    font-weight: 700;
}

.recent-team.winner {
    font-weight: 700;
    color: var(--accent-dark);
}

/* Player table */
.player-table {
    width: 100%;
    border-collapse: collapse;
}

.player-table th, .player-table td {
    text-align: left;
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--line);
}

.player-table tbody tr:hover {
    background: var(--page-bg);
}

/* Highlights which tiebreak criterion (and score) actually separated a wins-tied cluster in the round
   robin standings - a soft yellow wash on the whole column, then a bolder pill per row for whoever
   actually needed a tiebreak, so it reads as "the interesting column" at a glance. */
.player-table .tiebreak-col {
    background: rgba(247, 216, 80, 0.18);
}

/* Round robin standings - fixed column widths (rather than letting each bracket's own table auto-size
   to its longest entrant name) so Rank/W-L/Total/Diff/Advancing line up vertically from one bracket's
   table to the next, even though each bracket renders as its own separate <table>. Also capped to its
   own natural width (not stretched to 100% like a regular .player-table) so W-L/Total/Diff sit right
   next to the Entrant column instead of stranded at the far edge of a wide card. */
.rr-standings-table {
    table-layout: fixed;
    width: auto;
}

.rr-standings-table th:nth-child(1),
.rr-standings-table td:nth-child(1) {
    width: 64px;
}

.rr-standings-table th:nth-child(2),
.rr-standings-table td:nth-child(2) {
    width: 240px;
}

.rr-standings-table th:nth-child(3),
.rr-standings-table td:nth-child(3) {
    width: 86px;
}

.rr-standings-table th:nth-child(4),
.rr-standings-table td:nth-child(4) {
    width: 86px;
}

.rr-standings-table th:nth-child(5),
.rr-standings-table td:nth-child(5) {
    width: 86px;
}

.rr-standings-table th:nth-child(6),
.rr-standings-table td:nth-child(6) {
    width: 120px;
}

/* Lets multiple brackets' standings tables flow side by side (wrapping to a new row once they no
   longer fit) instead of always stacking full-width - a compact (non-stretched) table otherwise leaves
   a large dead gap to the right of it on a wide screen with nothing else to fill that space. Shrunk to
   its own content width (not the card's full width) so that gap doesn't just reappear to the right of
   the whole row when there's only one bracket (or they don't fill a full row). */
.rr-standings-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem 2.5rem;
    width: fit-content;
    max-width: 100%;
}

.rr-standings-block {
    flex: 0 0 auto;
}

.tiebreak-badge {
    display: inline-block;
    background: var(--energy);
    color: var(--ink);
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
}

.table-scroll {
    overflow-x: auto;
}

.admin-club-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 160px;
}

.category-tree {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.category-tree-node {
    display: flex;
    flex-direction: column;
}

.category-tree-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}

.category-tree-toggle:hover {
    background: var(--page-bg);
}

.category-tree-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    flex-shrink: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--muted);
}

.category-tree-children {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin: 0.4rem 0 0.2rem 1.85rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--line);
}

.category-tree-level {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 0.4rem 0.7rem;
    color: var(--ink);
    font-size: 0.9rem;
    cursor: pointer;
}

.category-tree-level:hover {
    background: var(--brand-tint);
    border-color: var(--accent-dark);
}

.standings-section {
    margin-bottom: 1.25rem;
}

.muted {
    color: var(--muted);
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 26, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 1rem;
}

.modal-box {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 1.25rem;
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}

.help-modal {
    max-width: 560px;
    text-align: left;
}

/* Always in the DOM (see SeedPairingHelpModal.razor) so opening it is a one-class toggle instead of a
   Blazor round trip that has to insert/remove the whole diagram subtree. */
.help-modal-backdrop {
    display: none;
}

.help-modal-backdrop.is-open {
    display: flex;
}

.help-modal-section {
    margin-top: 1.25rem;
}

.help-modal-section h4 {
    margin-bottom: 0.35rem;
}

.help-modal-formula {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 0.9rem;
    background: var(--page-bg);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    display: inline-block;
}

.help-modal-example {
    margin-top: 0.6rem;
    padding: 0.75rem 1rem;
}

.help-modal-diagram {
    margin-top: 0.6rem;
    padding: 0.9rem 0.75rem 0.6rem;
    overflow-x: auto;
}

.help-modal-diagram svg {
    display: block;
    width: 100%;
    height: auto;
    min-width: 380px;
}

.help-modal-diagram-caption {
    margin: 0.4rem 0 0;
    text-align: center;
}

.help-modal-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 0.92rem;
}

.help-modal-table th,
.help-modal-table td {
    text-align: left;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--line);
}

.qr-code-box {
    display: flex;
    justify-content: center;
    padding: 1rem;
    margin: 0.75rem 0;
    background: #fff;
    border-radius: var(--radius);
}

.qr-code-box img {
    display: block;
    width: 200px;
    height: 200px;
}

.timer {
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    font-size: 0.82rem;
}

#blazor-error-ui {
    background: var(--danger-bg);
    color: var(--danger);
    bottom: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    display: none;
    left: 0;
    padding: 0.8rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

/* Tournament bracket */
.seed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--brand-tint);
    color: var(--brand-dark);
    font-weight: 800;
    font-size: 0.78rem;
    flex-shrink: 0;
}

.move-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.move-buttons .icon-btn {
    line-height: 1;
    padding: 0.1rem 0.3rem;
}

.bracket-scroll {
    overflow-x: auto;
}

.bracket-grid {
    display: flex;
    gap: 2.5rem;
    min-width: max-content;
    align-items: flex-start;
}

.bracket-side {
    display: flex;
    flex-direction: column;
}

.bracket-side-label {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    color: var(--muted);
    margin-bottom: 0.75rem;
}

.bracket-side-label-lg {
    font-size: 1.05rem;
}

.bracket-rounds {
    display: flex;
    gap: 2.5rem;
    align-items: stretch;
}

.bracket-round {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 1.25rem;
    min-width: 190px;
}

/* Round robin's match list isn't a bracket tree - it's just every match in play order, so instead of one
   scrolling column it wraps into as many columns as the screen fits (each card min 220px wide). */
.round-robin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
    align-items: start;
}

/* Live standings page (meant for a spectator-facing TV/LCD): each group's table sits in its own column
   instead of stacking one under another, so more groups fit on screen at once without scrolling. */
.bracket-match-row {
    position: relative;
}

/* Connector lines: each drawn as a border-box in the gap after a match card. A merging pair's "top" and
   "bottom" halves each run from their own card's vertical center out to the full round gap, then turn to
   meet at the pair's shared midpoint - which, thanks to .bracket-round's space-around distribution, lines
   up with where their shared next-round match actually sits. A "single" advance (no sibling to merge
   with) is just a straight line the same distance. */
.bracket-match-row.connector-top::after,
.bracket-match-row.connector-bottom::after,
.bracket-match-row.connector-single::after {
    content: "";
    position: absolute;
    left: 100%;
    width: 2.5rem;
    border-color: var(--accent-dark);
    border-style: solid;
    border-width: 0;
    pointer-events: none;
}

.bracket-match-row.connector-top::after {
    top: 50%;
    height: calc(50% + 0.625rem);
    border-top-width: 2px;
    border-right-width: 2px;
}

.bracket-match-row.connector-bottom::after {
    bottom: 50%;
    height: calc(50% + 0.625rem);
    border-bottom-width: 2px;
    border-right-width: 2px;
}

.bracket-match-row.connector-single::after {
    top: 50%;
    height: 0;
    border-top-width: 2px;
    transform: translateY(-1px);
}

/* The grand final reset sits directly below the grand final in the same column (not the next one over),
   so it needs a short vertical drop instead of the horizontal connectors above. */
.bracket-match-row.connector-down::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0;
    top: 100%;
    height: 1.25rem;
    border-left: 2px solid var(--accent-dark);
    transform: translateX(-1px);
    pointer-events: none;
}

.bracket-match {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    /* Reserve enough height for a bye tag even on matches that don't have one, so every card in a round
       is the same height - the connector math above assumes paired cards are equal height to land the
       merge point in the right place, and a shorter/taller neighbor (e.g. a bye) would throw that off. */
    min-height: 5.8rem;
}

.bracket-match.ready {
    border-color: var(--accent-dark);
    cursor: pointer;
}

.bracket-match.ready:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bracket-match.completed.editable {
    cursor: pointer;
}

.bracket-match.completed.editable:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bracket-match.completed.editable:hover::after {
    content: "✎ Click to edit";
    display: block;
    text-align: center;
    font-size: 0.68rem;
    color: var(--muted);
    padding: 0.2rem 0.4rem;
    border-top: 1px solid var(--line);
}

.bracket-entrant {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
}

.bracket-entrant + .bracket-entrant {
    border-top: 1px solid var(--line);
}

.bracket-entrant.winner {
    background: var(--brand-tint);
    font-weight: 800;
}

.bracket-entrant.loser {
    color: var(--muted);
}

.bracket-rank-badge {
    display: inline-block;
    margin-left: 0.4rem;
    font-weight: 700;
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}

/* One color per round robin bracket (cycled by group number - see TournamentMatchCard's
   GroupColorCount) so every entrant from the same bracket is recognizable at a glance in the
   winners bracket, and different brackets are clearly distinct from each other. */
.bracket-rank-badge-0 { background: #eef6ff; color: #0b4a7a; }
.bracket-rank-badge-1 { background: var(--brand-tint); color: var(--accent-dark); }
.bracket-rank-badge-2 { background: #f2ecfb; color: #5b3a8f; }
.bracket-rank-badge-3 { background: #fff1e0; color: #8a4b00; }
.bracket-rank-badge-4 { background: #fdeaf3; color: #8f2a63; }
.bracket-rank-badge-5 { background: #e3f7f5; color: #0f6b63; }
.bracket-rank-badge-6 { background: #fff8d6; color: #7a6300; }
.bracket-rank-badge-7 { background: #fdeceb; color: #a3341f; }

.bracket-score {
    font-weight: 800;
    min-width: 1.3rem;
    text-align: right;
    flex-shrink: 0;
}

.bracket-bye-tag {
    font-size: 0.7rem;
    color: var(--muted);
    font-style: italic;
    padding: 0.25rem 0.65rem;
    border-top: 1px solid var(--line);
}

/* Always-visible (not hover-only) call to action on a not-yet-played match, so it reads as tappable
   at a glance even on touch devices where hover never happens. */
.bracket-score-hint {
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
    color: #fff;
    background: var(--accent);
    padding: 0.3rem 0.65rem;
    border-top: 1px solid var(--accent-dark);
}

.bracket-match.championship {
    /* Badge is positioned relative to the card itself and sits inside its own box (never outside), so
       this can't collide with a connector line or a sibling row above/below it - unlike an external label,
       it also can't disturb the card's own height, which the connector alignment math depends on. */
    position: relative;
    border: 2px solid var(--accent-dark);
    box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.18), 0 4px 14px rgba(0, 0, 0, 0.08);
}

.bracket-match.championship.completed {
    background: linear-gradient(180deg, var(--brand-tint) 0%, var(--surface) 70%);
    box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.32), 0 6px 18px rgba(165, 198, 57, 0.28);
}

.bracket-match.championship .bracket-entrant.winner {
    background: linear-gradient(90deg, var(--brand-tint), rgba(165, 198, 57, 0.4));
}

.championship-badge {
    position: absolute;
    top: -0.55rem;
    right: -0.55rem;
    width: 1.3rem;
    height: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    background: var(--accent);
    border: 2px solid var(--surface);
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    z-index: 1;
}

/* Info tooltip */
.info-tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    color: var(--muted);
    cursor: help;
    outline: none;
    vertical-align: middle;
}

.info-tip-icon {
    font-size: 0.85rem;
    line-height: 1;
}

.info-tip:hover .info-tip-icon,
.info-tip:focus .info-tip-icon {
    color: var(--brand);
}

.info-tip-bubble {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--brand);
    color: white;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.4;
    width: max-content;
    max-width: 240px;
    white-space: normal;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
    z-index: 30;
}

.info-tip-bubble::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--brand);
}

.info-tip:hover .info-tip-bubble,
.info-tip:focus .info-tip-bubble,
.info-tip:focus-within .info-tip-bubble {
    opacity: 1;
    visibility: visible;
}

/* Champion celebration banner */
.champion-banner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 50% 20%, rgba(165, 198, 57, 0.16), transparent 55%),
        radial-gradient(circle at 15% 85%, var(--brand-dark) 0%, var(--brand) 50%, var(--brand-dark) 100%);
    padding: 2.75rem 1.5rem;
    text-align: center;
    margin-bottom: 1.25rem;
}

.champion-glow {
    position: absolute;
    inset: -25%;
    z-index: 0;
    background: radial-gradient(circle, rgba(165, 198, 57, 0.55) 0%, rgba(165, 198, 57, 0.15) 40%, transparent 68%);
    animation: champion-pulse 2.6s ease-in-out infinite;
}

.champion-content {
    position: relative;
    z-index: 2;
}

.champion-trophy {
    font-size: 3rem;
    line-height: 1;
    filter: drop-shadow(0 0 14px rgba(165, 198, 57, 0.85));
    animation: champion-bounce 1.7s ease-in-out infinite;
}

.champion-label {
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.78rem;
    font-weight: 800;
    color: var(--accent);
    margin-top: 0.6rem;
    text-shadow: 0 0 10px rgba(165, 198, 57, 0.6);
}

.champion-name {
    font-size: 1.9rem;
    font-weight: 800;
    color: white;
    margin-top: 0.25rem;
}

.runners-up-card {
    border-top: 3px solid var(--accent-dark);
}

.sparkles {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.sparkle {
    position: absolute;
    font-size: 1.1rem;
    opacity: 0;
    animation: sparkle-twinkle 2.4s ease-in-out infinite;
}

.sparkle:nth-child(1) { top: 18%; left: 8%; animation-delay: 0s; }
.sparkle:nth-child(2) { top: 68%; left: 14%; animation-delay: 0.3s; }
.sparkle:nth-child(3) { top: 22%; left: 88%; animation-delay: 0.6s; }
.sparkle:nth-child(4) { top: 72%; left: 90%; animation-delay: 0.9s; }
.sparkle:nth-child(5) { top: 10%; left: 46%; animation-delay: 1.2s; }
.sparkle:nth-child(6) { top: 82%; left: 55%; animation-delay: 1.5s; }
.sparkle:nth-child(7) { top: 42%; left: 4%; animation-delay: 1.8s; }
.sparkle:nth-child(8) { top: 46%; left: 94%; animation-delay: 2.1s; }

.confetti {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.confetti-piece {
    position: absolute;
    top: -12px;
    width: 7px;
    height: 13px;
    opacity: 0.9;
    background: var(--accent);
    animation: confetti-fall linear infinite;
}

.confetti-piece:nth-child(4n) { background: white; }
.confetti-piece:nth-child(4n + 1) { background: var(--accent-dark); }
.confetti-piece:nth-child(4n + 2) { background: var(--accent); }
.confetti-piece:nth-child(4n + 3) { background: rgba(255, 255, 255, 0.7); }

.confetti-piece:nth-child(1) { left: 3%; animation-delay: 0s; animation-duration: 2.8s; }
.confetti-piece:nth-child(2) { left: 9%; animation-delay: 0.5s; animation-duration: 3.4s; }
.confetti-piece:nth-child(3) { left: 15%; animation-delay: 1s; animation-duration: 2.6s; }
.confetti-piece:nth-child(4) { left: 21%; animation-delay: 1.5s; animation-duration: 3.1s; }
.confetti-piece:nth-child(5) { left: 27%; animation-delay: 0.2s; animation-duration: 3.6s; }
.confetti-piece:nth-child(6) { left: 33%; animation-delay: 0.8s; animation-duration: 2.9s; }
.confetti-piece:nth-child(7) { left: 39%; animation-delay: 1.3s; animation-duration: 3.3s; }
.confetti-piece:nth-child(8) { left: 45%; animation-delay: 1.9s; animation-duration: 2.7s; }
.confetti-piece:nth-child(9) { left: 51%; animation-delay: 0.4s; animation-duration: 3.5s; }
.confetti-piece:nth-child(10) { left: 57%; animation-delay: 1.1s; animation-duration: 2.8s; }
.confetti-piece:nth-child(11) { left: 63%; animation-delay: 1.7s; animation-duration: 3.2s; }
.confetti-piece:nth-child(12) { left: 69%; animation-delay: 0.6s; animation-duration: 3s; }
.confetti-piece:nth-child(13) { left: 75%; animation-delay: 1.4s; animation-duration: 3.4s; }
.confetti-piece:nth-child(14) { left: 81%; animation-delay: 0.1s; animation-duration: 2.6s; }
.confetti-piece:nth-child(15) { left: 87%; animation-delay: 2s; animation-duration: 3.1s; }
.confetti-piece:nth-child(16) { left: 93%; animation-delay: 0.9s; animation-duration: 2.9s; }
.confetti-piece:nth-child(17) { left: 97%; animation-delay: 1.6s; animation-duration: 3.6s; }
.confetti-piece:nth-child(18) { left: 55%; animation-delay: 2.3s; animation-duration: 3.3s; }

@keyframes champion-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes champion-bounce {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-8px) rotate(4deg); }
}

@keyframes sparkle-twinkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.15) rotate(90deg); }
}

@keyframes confetti-fall {
    0% { transform: translateY(-12px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(240px) rotate(360deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .champion-glow, .champion-trophy, .sparkle, .confetti-piece {
        animation: none;
    }
    .champion-glow { opacity: 0.8; }
    .sparkle { opacity: 0.9; }
    .confetti-piece { display: none; }
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 1rem;
    top: 0.6rem;
}

/* Court Booking - public directory + venue detail */

.book-page {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

.book-search-row {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.book-search-box {
    position: relative;
    flex: 1;
    max-width: 480px;
}

.book-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    pointer-events: none;
}

.book-search-box input {
    width: 100%;
    padding: 0.75rem 1.1rem 0.75rem 2.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--ink);
    box-shadow: 0 1px 3px rgba(24, 28, 26, 0.06);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.book-search-box input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.15);
}

.book-search-box input::placeholder {
    color: var(--muted);
}

.venue-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

.venue-card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.venue-card:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.venue-card-photo {
    position: relative;
    height: 120px;
    background:
        radial-gradient(circle at 80% 20%, rgba(165, 198, 57, 0.35), transparent 55%),
        linear-gradient(135deg, #5d8b37 0%, var(--brand) 55%, var(--brand-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    overflow: hidden;
}

.venue-card-logo {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--surface);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    overflow: visible;
}

.venue-card-logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.venue-card-court-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: var(--accent-dark);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 999px;
    border: 2px solid var(--surface);
    white-space: nowrap;
}

.venue-card-photo img,
.venue-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.venue-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.venue-card-body {
    padding: 0.85rem 1rem 0.75rem;
}

.venue-card-name {
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.venue-card-address {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    color: var(--muted);
    margin-bottom: 0.5rem;
}

.venue-card-address svg {
    flex-shrink: 0;
}

.venue-card-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--brand-dark);
}

.venue-card-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem 0.85rem;
    border-top: 1px solid var(--line);
}

.venue-card-action-link {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    background: var(--page-bg);
    border: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
}

.venue-card-action-link:hover {
    background: var(--brand-tint);
    border-color: var(--accent-dark);
    color: var(--accent-dark);
}

.venue-card-qr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--page-bg);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
}

.venue-card-qr-btn:hover {
    background: var(--brand-tint);
    border-color: var(--accent-dark);
    color: var(--accent-dark);
}

.venue-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.venue-empty-icon {
    width: 88px;
    height: 88px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--brand-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-dark);
}

.venue-empty-icon svg {
    width: 50px;
    height: 50px;
    overflow: visible;
}

.venue-empty-ball {
    transform-box: fill-box;
    transform-origin: center;
    animation: venue-ball-bounce 1.1s ease-in-out infinite;
}

.venue-empty-shadow {
    fill: var(--line);
    transform-box: fill-box;
    transform-origin: center;
    animation: venue-ball-shadow 1.1s ease-in-out infinite;
}

@keyframes venue-ball-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-11px); }
}

@keyframes venue-ball-shadow {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(0.6); opacity: 0.3; }
}

.venue-empty-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 0.3rem;
}

.venue-empty-subtitle {
    font-size: 0.9rem;
    color: var(--muted);
    margin: 0 0 1rem;
}

.venue-hero {
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}

.club-logo-preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 80% 20%, rgba(165, 198, 57, 0.35), transparent 55%),
        linear-gradient(135deg, #5d8b37 0%, var(--brand) 55%, var(--brand-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    overflow: hidden;
}

.club-logo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.venue-hero-photo {
    position: relative;
    height: 220px;
    background:
        radial-gradient(circle at 80% 20%, rgba(165, 198, 57, 0.35), transparent 55%),
        linear-gradient(135deg, #5d8b37 0%, var(--brand) 55%, var(--brand-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.5rem;
    overflow: hidden;
}

.venue-hero-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: none;
    padding: 1rem 1.25rem;
}

.venue-hero-info h2 {
    margin-bottom: 0.2rem;
}

.venue-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--line);
    margin-bottom: 1rem;
}

.venue-tab {
    background: none;
    border: none;
    padding: 0.6rem 0.9rem;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.venue-tab.active {
    color: var(--brand-dark);
    border-bottom-color: var(--accent-dark);
}

.venue-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.5rem;
}

.venue-amenity-chip {
    background: var(--brand-tint);
    color: var(--brand-dark);
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    font-size: 0.8rem;
}

.book-date-row {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    padding-bottom: 0.25rem;
}

.book-date-pill {
    flex: 0 0 auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    text-align: center;
    cursor: pointer;
    font-size: 0.82rem;
    line-height: 1.3;
}

.book-date-pill.active {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.book-date-picker {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
    padding: 0 0.4rem;
}

.book-date-picker label {
    font-size: 0.72rem;
    color: var(--muted);
    white-space: nowrap;
}

.book-date-picker input {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0.3rem 0.4rem;
    font-size: 0.82rem;
    font-family: inherit;
}

.book-availability-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}

.book-availability-table th, .book-availability-table td {
    border: 1px solid var(--line);
    padding: 0.5rem 0.6rem;
    text-align: center;
    font-size: 0.85rem;
}

.book-availability-table th {
    background: var(--page-bg);
    font-weight: 700;
}

.book-availability-table td.time-col {
    font-weight: 600;
    white-space: nowrap;
    background: var(--page-bg);
}

.book-slot-open {
    background: var(--brand-tint);
    color: var(--brand-dark);
    border-radius: 6px;
    padding: 0.25rem 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    text-decoration: none;
    cursor: pointer;
}

.book-slot-open:hover {
    background: var(--accent);
    color: #fff;
}

.book-slot-open.book-slot-selected {
    background: var(--accent-dark);
    color: #fff;
    box-shadow: 0 0 0 2px var(--accent-dark);
}

.book-slot-booked {
    background: #eee;
    color: #888;
    border-radius: 6px;
    padding: 0.25rem 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-block;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.book-slot-none {
    color: var(--line);
}

.book-selection-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.1);
    padding: 0.75rem 1.25rem;
}

.book-selection-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    max-width: 1100px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.book-selection-summary {
    font-size: 0.88rem;
}

.book-selection-summary strong {
    color: var(--brand-dark);
}

.book-selection-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.book-selection-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.88rem;
    background: var(--page-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
}

.book-checkout-ranges {
    list-style: none;
    margin: 0 0 0.5rem;
    padding: 0;
    font-size: 0.92rem;
}

.book-checkout-ranges li {
    padding: 0.15rem 0;
}

.venue-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.venue-photo-thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.venue-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.venue-photo-thumb button {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 0.1rem 0.4rem;
    line-height: 1.4;
    border-radius: 999px;
}

.venue-photo-thumb-clickable {
    cursor: zoom-in;
    transition: opacity 0.15s ease;
}

.venue-photo-thumb-clickable:hover {
    opacity: 0.85;
}

.lightbox-backdrop {
    background: rgba(10, 11, 9, 0.9);
    z-index: 200;
}

.lightbox-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    max-height: 90vh;
}

.lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
}

.lightbox-close {
    position: absolute;
    top: -2.5rem;
    right: 0;
    color: #fff;
    font-size: 1.3rem;
}

.lightbox-close:hover {
    color: var(--brand);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-nav:hover {
    background: rgba(0, 0, 0, 0.7);
}

.lightbox-prev {
    left: 0.5rem;
}

.lightbox-next {
    right: 0.5rem;
}

.book-mode-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
    margin: 0.75rem 0 1.25rem;
}

.book-mode-card {
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0.9rem 0.8rem;
    cursor: pointer;
    transition: border-color 0.1s ease, box-shadow 0.1s ease;
}

.book-mode-card:hover {
    border-color: var(--accent-dark);
}

.book-mode-card.selected {
    border-color: var(--accent-dark);
    border-width: 2px;
    box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.18);
}

.book-mode-name {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.save-toast {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--brand);
    color: #fff;
    padding: 0.65rem 1.1rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
    z-index: 200;
    animation: toast-in 0.2s ease-out;
}

.error-toast {
    background: var(--danger);
    max-width: 380px;
}

.error-toast-close {
    background: none;
    border: none;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0 0 0.25rem;
    margin-left: auto;
}

.venue-save-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
    padding: 0.75rem 1.25rem;
    z-index: 50;
}

/* Full-screen live sections (Components/Shared/FullScreenPanel.razor). Normally just a small button above
   the section; in full screen the section fills the screen and app.js scales its content to fit with no
   scrolling. */
.fs-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

.fs-caption,
.fs-exit {
    display: none;
}

/* Used when the browser's own fullscreen isn't available or allowed - fills the whole window instead. */
.fs-section.fs-pseudo {
    position: fixed;
    inset: 0;
    z-index: 3000;
}

.fs-section.fs-active {
    background: var(--page-bg);
    padding: 1rem 1.25rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.fs-section.fs-active .fs-bar {
    justify-content: space-between;
    flex: none;
}

.fs-section.fs-active .fs-caption {
    display: block;
    font-family: 'Fraunces', serif;
    font-weight: 700;
    font-size: 1.2rem;
}

.fs-section.fs-active .fs-enter {
    display: none;
}

.fs-section.fs-active .fs-exit {
    display: inline;
}

.fs-section.fs-active .fs-stage {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.fs-section.fs-active .fs-fit-inner {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
}

.fs-section.fs-active .card {
    margin-bottom: 0;
}

.fs-section.fs-active .bracket-scroll {
    overflow: visible;
}

.fs-section.fs-active .bracket-grid {
    width: max-content;
    margin: 0 auto;
}

.fs-section.fs-active .rr-standings-group {
    margin: 0 auto;
}

/* "Do you own or manage courts?" prompt shown to a club with no venue (MainLayout), and the short note
   confirming a "No". */
.court-prompt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
}

.court-prompt-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 320px;
}

.court-prompt-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.court-prompt-note {
    border-left-color: var(--line);
    font-size: 0.92rem;
}

/* "· N matches left" beside a bracket side's label - same quiet style as the round robin heading's count. */
/* "How byes are seeded": a small link beside the Winners bracket title and the example list in its popup. */
.bye-seed-link { margin-left: 0.4rem; padding: 0; border: 0; background: none; color: var(--accent-dark); font: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0; text-transform: none; text-decoration: underline; cursor: pointer; }
.bye-seed-link:hover { color: var(--ink); }
.bye-seed-modal { max-width: 560px; }
/* The popup is opened from inside the Winners bracket title (uppercase, bold, small) - its own text must not inherit that. */
.bracket-side-label .bye-seed-modal { text-transform: none; letter-spacing: normal; font-size: 0.9rem; font-weight: 400; line-height: 1.5; color: var(--ink); text-align: left; }
.bye-diagram svg text { font-family: inherit; text-transform: none; letter-spacing: normal; }
/* The popup itself scrolls (one scrollbar), so the table is not a scroll box of its own. */
.bs-table { margin-top: 0.5rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface, #fff); }
.bs-head, .bs-row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 2.7rem 2.9rem 2.7rem; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; }
.bs-head { background: var(--page-bg, #f6f3ea); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.bs-head span:nth-child(n+3) { text-align: right; }
.bs-row { border-top: 1px solid var(--line); }
.bs-head + .bs-row { border-top: 0; }
.bs-row.bye { background: #f6f9ea; }
.bs-seed { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--brand); color: #fff; font-size: 0.78rem; font-weight: 800; }
.bs-name { font-weight: 700; font-size: 0.9rem; line-height: 1.25; overflow-wrap: anywhere; }
.bs-name .bracket-rank-badge { margin-left: 0.3rem; vertical-align: middle; }
.bs-bye { margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--brand-tint); color: var(--accent-dark); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; vertical-align: middle; }
.bs-stat { text-align: right; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bs-diff.neg { color: var(--danger, #b3261e); }
@media (max-width: 420px) {
    .bs-head, .bs-row { grid-template-columns: 1.9rem minmax(0, 1fr) 2.3rem 2.4rem 2.3rem; gap: 0.25rem; padding-left: 0.5rem; padding-right: 0.5rem; }
    .bs-name { font-size: 0.84rem; }
    .bs-stat { font-size: 0.8rem; }
}
.bracket-side-label .bracket-side-count {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* Player import review (SessionBoard) and the skill stars shared with "add a new player". */
.import-bulk {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    background: var(--page-bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    margin-bottom: 0.75rem;
}

.import-review-list {
    max-height: 46vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding-right: 0.25rem;
}

.import-row {
    background: #f3fbf6;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 0.65rem 0.8rem;
}

.import-row.excluded {
    opacity: 0.5;
}

.import-row-top {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.import-row-top input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    flex: none;
}

.import-name {
    flex: 1;
    min-width: 0;
}

.import-stars {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    margin: 0.35rem 0 0 1.9rem;
}

.import-star {
    background: none;
    border: none;
    padding: 0 0.1rem;
    font-size: 1.35rem;
    line-height: 1;
    color: #cfd4da;
    cursor: pointer;
}

.import-star.on {
    color: #f0b400;
}

.import-star:hover {
    color: #f7cc4a;
}

/* At-a-glance strip laid over the bottom of a venue's cover photo: cheapest rate, court count, opening hours. */
.venue-hero-stats {
    position: absolute;
    left: 50%;
    bottom: 0.6rem;
    transform: translateX(-50%);
    width: calc(100% - 1.5rem);
    max-width: 400px;
    display: flex;
    background: rgba(240, 247, 242, 0.96);
    border: 1px solid rgba(60, 150, 100, 0.25);
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-size: 0.85rem;
    text-align: left;
}

.venue-stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.4rem 0.7rem;
}

.venue-stat + .venue-stat {
    border-left: 1px solid rgba(60, 150, 100, 0.25);
}

.venue-stat-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 600;
}

.venue-stat-label svg {
    width: 12px;
    height: 12px;
}

.venue-stat-label svg {
    color: var(--brand-dark);
    flex: none;
}

.venue-stat-value {
    margin-top: 0.05rem;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.venue-stat-value small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0;
}

@media (max-width: 480px) {
    .venue-stat {
        padding: 0.35rem 0.5rem;
    }

    .venue-stat-value {
        font-size: 0.82rem;
        letter-spacing: -0.02em;
    }

    .venue-stat-value small {
        font-size: 0.62rem;
    }

    .venue-stat-label {
        font-size: 0.65rem;
        gap: 0.2rem;
    }
}

.venue-stat-value small.spaced {
    margin-left: 0.3rem;
}

/* ---- Venue page: About tab cards ---- */
.venue-about {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.venue-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.venue-about-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.venue-info-card {
    padding: 1.25rem 1.35rem;
    margin: 0;
}

.venue-info-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.9rem;
    font-size: 1.05rem;
}

.venue-info-title svg {
    color: var(--brand-dark);
    flex: none;
}

.venue-info-sub {
    margin: 1.1rem 0 0.4rem;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.venue-rate-headline {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.venue-rate-headline small {
    font-size: 1rem;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
}

.venue-rate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-top: 1px solid var(--line);
}

.venue-info-sub + .venue-rate-row {
    border-top: none;
}

.venue-rate-price {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.venue-facilities {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.75rem 1rem;
}

.venue-facility {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.venue-facility svg {
    color: var(--brand-dark);
    flex: none;
}

.venue-facility span {
    overflow-wrap: anywhere;
}

.venue-open-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.6rem;
}

.venue-open-dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #b9bcc2;
    flex: none;
}

.venue-open-dot.on {
    background: #1f9d55;
    box-shadow: 0 0 0 3px rgba(31, 157, 85, 0.18);
}

.venue-hours-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.venue-hours-row.today {
    color: var(--ink);
    font-weight: 800;
}

.venue-map-wrap {
    position: relative;
    margin-bottom: 0.9rem;
}

.venue-map {
    height: 240px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--page-bg);
}

.venue-directions {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    background: #fff;
    color: var(--brand-dark);
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.venue-contact-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    overflow-wrap: anywhere;
}

/* ---- Venue page: booking tab - date strip, legend and time grid ---- */
.book-dates {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.book-date-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    padding: 0.55rem 0.15rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    font: inherit;
    color: var(--ink);
}

.book-date-btn .d {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.book-date-btn .n {
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

.book-date-btn:hover {
    border-color: var(--brand);
}

.book-date-btn.active {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

.book-date-btn.active .d {
    color: rgba(255, 255, 255, 0.85);
}

.book-date-more {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.book-date-more label {
    color: var(--muted);
    font-weight: 600;
}

.book-date-more input[type="date"] {
    width: auto;
}

.book-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
}

.book-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--muted);
    font-weight: 600;
}

.book-legend .swatch {
    width: 0.95rem;
    height: 0.95rem;
    border-radius: 4px;
    border: 1px solid var(--line);
    display: inline-block;
}

.swatch.available { background: #fff; }
.swatch.selected { background: var(--brand); border-color: var(--brand); }
.swatch.booked { background: repeating-linear-gradient(135deg, #e7e5e0, #e7e5e0 3px, #f1efea 3px, #f1efea 6px); }
.swatch.blocked { background: #f1d9d4; border-color: #e3b7ae; }

.book-grid-wrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--surface);
}

.book-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.book-grid th {
    background: #d6e1d8;
    padding: 0.6rem 0.5rem;
    text-align: center;
    font-weight: 700;
    border-left: 1px solid var(--line);
}

.book-grid .court-name {
    font-size: 1rem;
}

.book-grid .court-price {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.book-grid td {
    height: 58px;
    padding: 0.3rem;
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
    text-align: center;
    min-width: 108px;
}

.book-grid td.time-col,
.book-grid th.time-col {
    position: sticky;
    left: 0;
    z-index: 1;
    min-width: 104px;
    width: 104px;
    border-left: none;
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    background: #eef2ee;
}

.book-grid th.time-col {
    background: #d6e1d8;
    font-size: 0.95rem;
}

.book-grid td.cell span {
    font-size: 0.82rem;
    font-weight: 700;
}

.book-grid td.none { color: #b9bcc2; }
.book-grid td.booked { background: repeating-linear-gradient(135deg, #e7e5e0, #e7e5e0 4px, #f1efea 4px, #f1efea 8px); color: var(--muted); }
.book-grid td.blocked { background: #f1d9d4; color: #a3322a; }

.book-grid td.open button {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.book-grid td.open button:hover {
    border-color: var(--brand);
    background: #f2faf4;
}

.book-grid td.open button.selected {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}

@media (max-width: 800px) {
    .venue-about-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .venue-rate-headline {
        font-size: 1.8rem;
    }
}

@media (max-width: 480px) {
    .book-dates {
        gap: 0.25rem;
    }

    .book-date-btn .n {
        font-size: 0.78rem;
    }

    .book-date-btn .d {
        font-size: 0.62rem;
    }

    .book-grid td {
        min-width: 0;
    }

    .book-grid td.time-col,
    .book-grid th.time-col {
        width: 84px;
        min-width: 84px;
        font-size: 0.7rem;
    }
}

/* ---- Open Play session cards: status stripe, icon rows, chips, live dot ---- */
.fancy-card {
    position: relative;
    overflow: hidden;
    padding: 1.1rem 1.15rem 1rem 1.35rem;
    border-radius: 16px;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    animation: session-card-in 0.45s ease both;
    animation-delay: calc(var(--i, 0) * 60ms);
}

.fancy-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--line);
}

.fancy-card.status-active::before { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); }
.fancy-card.status-upcoming::before { background: linear-gradient(180deg, #7ab6ee, #3a86c8); }
.fancy-card.status-completed::before { background: #c9c3b4; }

a.fancy-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-dark);
    box-shadow: 0 10px 24px rgba(32, 29, 24, 0.12);
}

a.fancy-card:active { transform: translateY(-1px); }

.session-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.session-card-head h3 {
    margin: 0;
    font-size: 1.1rem;
    overflow-wrap: anywhere;
}

.session-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: none;
}

.live-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--accent-dark);
    animation: live-pulse 1.6s ease-out infinite;
}

.session-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.4rem;
    color: var(--ink);
    font-size: 0.9rem;
}

.session-info > span:last-child { min-width: 0; overflow-wrap: anywhere; }

.session-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.9rem;
    height: 1.9rem;
    flex: none;
    border-radius: 10px;
    background: var(--brand-tint);
    color: var(--accent-dark);
}

.session-info-icon.pin {
    background: #fdeceb;
    color: #d6453d;
}

.session-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.8rem;
}

.session-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--page-bg);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.session-chip svg { width: 0.85rem; height: 0.85rem; }

.session-open {
    display: block;
    margin-top: 0.85rem;
    color: var(--accent-dark);
    font-size: 0.85rem;
    font-weight: 800;
}

.session-open span { display: inline-block; transition: transform 0.18s ease; }
a.fancy-card:hover .session-open span { transform: translateX(4px); }

@keyframes session-card-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(93, 139, 55, 0.55); }
    70% { box-shadow: 0 0 0 7px rgba(93, 139, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(93, 139, 55, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .fancy-card { animation: none; transition: none; }
    .live-dot { animation: none; }
}

a.fancy-card { display: flex; flex-direction: column; }
a.fancy-card .session-open { margin-top: auto; padding-top: 0.85rem; }

/* ---- Tournament list cards: full-bleed photo header, body with icon row + category chips ---- */
.fancy-card.tournament-card { padding: 0; }
.fancy-card.tournament-card::before { display: none; }

.fancy-card.tournament-card { display: flex; flex-direction: column; }
.tournament-card .tournament-card-link { display: flex; flex-direction: column; flex: 1; }
.tournament-card .session-open { margin-top: auto; padding-top: 0.85rem; }

.tournament-card .tournament-card-photo {
    height: 150px;
    margin: 0;
    border-radius: 0;
    transition: filter 0.2s ease;
}

.tournament-card .tournament-card-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.28) 0%, transparent 45%, rgba(0, 0, 0, 0.12) 100%);
    pointer-events: none;
}

.tournament-card .tournament-card-photo img { transition: transform 0.35s ease; }
.tournament-card:hover .tournament-card-photo img { transform: scale(1.06); }

.tournament-card .tournament-card-date-pill,
.tournament-card .tournament-card-status-pill { z-index: 1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); }

.tournament-card .tournament-card-date-pill svg { width: 0.8rem; height: 0.8rem; color: var(--accent-dark); }

.tournament-card .badge-inprogress { background: var(--brand-tint); }

.tournament-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0.9rem 1.15rem 1rem;
}

.tournament-card-body h3 { margin: 0 0 0.2rem; font-size: 1.1rem; overflow-wrap: anywhere; }
.tournament-card-body .session-info { margin-top: 0.5rem; }
.tournament-card-body .session-chips { margin-top: 0.7rem; }

.session-chip-more { background: var(--brand-tint); border-color: transparent; color: var(--accent-dark); }

.tournament-card-footer { padding: 0 1.15rem 1rem; }

/* ---- Venue list cards (public Court Booking + My Venues): bigger photo, pills, icon rows, motion ---- */
.venue-card {
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    animation: session-card-in 0.45s ease both;
    animation-delay: calc(var(--i, 0) * 60ms);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.venue-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-dark);
    box-shadow: 0 10px 24px rgba(32, 29, 24, 0.12);
}

.venue-card-photo { height: 150px; }

.venue-card-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 45%, rgba(0, 0, 0, 0.3) 100%);
    pointer-events: none;
}

.venue-card-photo img { transition: transform 0.35s ease; }
.venue-card:hover .venue-card-photo img { transform: scale(1.06); }

.venue-card-logo,
.venue-card-court-count,
.venue-card-price-pill,
.venue-card-status { z-index: 1; }

.venue-card-logo { top: 10px; left: 10px; width: 40px; height: 40px; }

.venue-card-court-count {
    bottom: 10px;
    right: 10px;
    gap: 0.3rem;
    padding: 0.25rem 0.6rem;
    border: none;
    background: rgba(255, 255, 255, 0.94);
    color: var(--ink);
    font-size: 0.74rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.venue-card-court-count svg { width: 0.85rem; height: 0.85rem; color: var(--accent-dark); }

.venue-card-price-pill {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--brand-dark);
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.venue-card-price-pill small { font-size: 0.7rem; font-weight: 700; opacity: 0.75; }

.venue-card-status {
    position: absolute;
    top: 10px;
    right: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.venue-card-inactive .venue-card-photo > img,
.venue-card-inactive .venue-card-photo > span:first-child { filter: grayscale(0.85); opacity: 0.8; }

.venue-card-link { flex: 1; display: flex; flex-direction: column; }

.venue-card-body { flex: 1; display: flex; flex-direction: column; padding: 0.9rem 1.15rem 1rem; }

.venue-card-name { font-size: 1.05rem; font-weight: 800; margin-bottom: 0.1rem; overflow-wrap: anywhere; }

.venue-card-body .session-info { margin-top: 0.45rem; align-items: flex-start; }

.venue-card-desc {
    margin: 0.6rem 0 0;
    color: var(--muted);
    font-size: 0.85rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.venue-card .session-open { margin-top: auto; padding-top: 0.85rem; }
a.venue-card:hover .session-open span { transform: translateX(4px); }

.venue-card-actions { padding: 0.7rem 1.15rem 0.9rem; }

@media (prefers-reduced-motion: reduce) {
    .venue-card { animation: none; transition: none; }
}

/* ---- Court Booking directory page ---- */
.book-page.book-directory { max-width: none; padding: 0; }

.book-directory .book-directory-stats { margin-top: 0; }

.book-directory .book-search-box { max-width: 520px; }

.book-directory .book-search-box input {
    padding-right: 2.6rem;
    box-shadow: 0 2px 10px rgba(24, 28, 26, 0.07);
}

.book-directory .book-search-box input:focus {
    box-shadow: 0 0 0 4px rgba(165, 198, 57, 0.22);
}

.book-search-clear {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.6rem;
    height: 1.6rem;
    border: none;
    border-radius: 50%;
    background: var(--page-bg);
    color: var(--muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.book-search-clear:hover { background: var(--brand-tint); color: var(--accent-dark); }

.venue-card-skeleton { pointer-events: none; }

.venue-card-skeleton .venue-card-photo,
.skeleton-line {
    background: linear-gradient(90deg, #eee9dc 25%, #f7f3ea 50%, #eee9dc 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.3s linear infinite;
}

.venue-card-skeleton .venue-card-photo::after { display: none; }

.skeleton-line { height: 0.8rem; border-radius: 6px; margin-top: 0.6rem; }

@keyframes skeleton-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ---- My Bookings: date tile + info card ---- */
.booking-section-title {
    margin: 1.4rem 0 0.7rem;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

.booking-section-title:first-of-type { margin-top: 0.4rem; }

.session-grid:has(.booking-card) { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.booking-card-main { display: flex; gap: 0.9rem; align-items: flex-start; }
.booking-card-info { flex: 1; min-width: 0; }
.booking-card .session-card-head { margin-bottom: 0.15rem; }

.booking-court { color: var(--muted); font-size: 0.9rem; font-weight: 600; }

.booking-date-tile {
    flex: none;
    width: 3.6rem;
    padding: 0.4rem 0;
    border-radius: 14px;
    background: var(--brand-tint);
    color: var(--accent-dark);
    text-align: center;
    line-height: 1.1;
}

.booking-date-tile .m { display: block; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.booking-date-tile .d { display: block; font-size: 1.6rem; font-weight: 800; color: var(--ink); }
.booking-date-tile .w { display: block; font-size: 0.7rem; font-weight: 700; color: var(--muted); }

.booking-card.status-upcoming .booking-date-tile { background: var(--info-bg); color: #0b4a7a; }
.booking-card.status-completed .booking-date-tile { background: #f0ede5; color: var(--muted); }

.booking-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.9rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--line);
}

.booking-card-skeleton .skeleton-line { margin-top: 0.7rem; }

@media (max-width: 480px) {
    .session-grid:has(.booking-card) { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Themed dropdown (DropdownSelect) ---- */
.dd { position: relative; }

.dd-field {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(24, 28, 26, 0.06);
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dd-field:hover { border-color: var(--accent-dark); }
.dd.open .dd-field, .dd-field:focus-visible { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 4px rgba(165, 198, 57, 0.22); }

.dd-value { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.dd-placeholder { color: var(--muted); font-weight: 500; }
.dd-stars { color: #f0b400; letter-spacing: 0.04em; font-size: 0.95rem; white-space: nowrap; }

.dd-chevron { flex: none; color: var(--muted); transition: transform 0.18s ease; }
.dd.open .dd-chevron { transform: rotate(180deg); color: var(--accent-dark); }

.dd-backdrop { position: fixed; inset: 0; z-index: 20; background: transparent; }

.dd-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 21;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: 0 12px 28px rgba(32, 29, 24, 0.18);
    max-height: 280px;
    overflow-y: auto;
    animation: dd-in 0.14s ease both;
}

.dd-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    background: none;
    border: none;
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.dd-option:hover { background: var(--page-bg); }
.dd-option.selected { background: var(--brand-tint); color: var(--accent-dark); }
.dd-option-label { flex: 1; }
.dd-check { flex: none; color: var(--accent-dark); }

@keyframes dd-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

/* ---- Import review modal (modern) ---- */
.import-head { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 0.9rem; }

.import-head-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 14px;
    background: var(--brand-tint);
    color: var(--accent-dark);
}

.import-sub { margin: 0.2rem 0 0; font-size: 0.88rem; line-height: 1.4; }

.import-bulk {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 1.2rem;
    flex-wrap: wrap;
    padding: 0.85rem 1rem;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand-tint), #f6f9ea);
    border-color: rgba(93, 139, 55, 0.25);
}

.import-bulk-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 220px; min-width: 0; }
.import-bulk-text strong { font-size: 0.95rem; }
.import-bulk-text .muted { font-size: 0.8rem; line-height: 1.35; }
.import-bulk .dd { flex: 0 0 190px; }

.import-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.6rem; }
.import-toolbar-links { display: inline-flex; gap: 0.9rem; }

.import-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-dark);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}

.import-link:hover { text-decoration: underline; }

.import-row {
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    padding: 0.7rem 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.import-row:hover { border-color: var(--accent-dark); box-shadow: 0 4px 12px rgba(32, 29, 24, 0.07); }
.import-row.excluded { opacity: 0.55; background: var(--page-bg); }
.import-row-top { gap: 0.7rem; }

.import-check {
    appearance: none;
    -webkit-appearance: none;
    flex: none;
    width: 1.4rem !important;
    height: 1.4rem !important;
    margin: 0;
    border: 2px solid #cfc8b8;
    border-radius: 7px;
    background: var(--surface) center / 80% no-repeat;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.import-check:hover { border-color: var(--accent-dark); }

.import-check:checked {
    background-color: var(--accent-dark);
    border-color: var(--accent-dark);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.import-check:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(165, 198, 57, 0.3); }

input.import-name {
    width: auto;
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    background: var(--page-bg);
    border: 1.5px solid transparent;
    border-radius: 10px;
    color: var(--ink);
    font: inherit;
    font-weight: 600;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

input.import-name:hover { border-color: var(--line); }

input.import-name:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--accent-dark);
    box-shadow: 0 0 0 4px rgba(165, 198, 57, 0.22);
}

input.import-name:disabled { background: transparent; color: var(--ink); -webkit-text-fill-color: var(--ink); cursor: default; padding-left: 0.2rem; }

.import-status {
    flex: none;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.import-status.new { background: var(--brand-tint); color: var(--accent-dark); }
.import-status.known { background: var(--info-bg); color: #0b4a7a; }

.import-stars { margin: 0.45rem 0 0 2.1rem; gap: 0.1rem; }
.import-star { font-size: 1.5rem; transition: transform 0.1s ease, color 0.1s ease; }
.import-star:hover { transform: scale(1.18); }
.import-skill-label { margin-left: 0.4rem; color: var(--muted); font-size: 0.85rem; font-weight: 600; }

.import-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.8rem 0;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    background: var(--info-bg);
    color: #0b4a7a;
    font-size: 0.85rem;
}

@media (max-width: 480px) {
    .import-bulk .dd { flex: 1 1 100%; }
}

/* Keep the Add button on screen: the list takes whatever height is left below the modal's fixed parts. */
.import-review-list { max-height: max(180px, calc(100vh - 480px)); }

/* ---- Completed Sessions: footer with view link + quiet delete ---- */
.session-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--line);
}

.session-card-footer .session-open { margin-top: 0; padding-top: 0; text-decoration: none; }
.session-card-footer .session-open:hover span { transform: translateX(4px); }

.session-delete {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.session-delete svg { width: 0.9rem; height: 0.9rem; }
.session-delete:hover { background: var(--danger-bg); color: var(--danger); border-color: rgba(198, 40, 40, 0.25); }

.fancy-card:has(> .session-card-footer) { display: flex; flex-direction: column; }
.fancy-card:has(> .session-card-footer) > .tournament-card-link { flex: 1; }

/* ---- Completed Tournaments: champion row + placements ---- */
.session-info-icon.gold { background: #fdf3cf; color: #b98900; }

.champion-label {
    display: block;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.1;
}

.placement-row {
    margin: 0.3rem 0 0 2.5rem;
    color: var(--muted);
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.placement-label { color: var(--ink); font-weight: 700; margin-right: 0.2rem; }
.placement-label::after { content: ":"; }

/* ---- Tournament group page: cover hero, category cards, add-category picker ---- */
.group-hero { border-radius: 18px; overflow: hidden; margin-bottom: 0.4rem; box-shadow: 0 6px 20px rgba(32, 29, 24, 0.12); }

.group-hero-photo { height: 220px; align-items: center; justify-content: center; }
.group-hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 35%, rgba(0, 0, 0, 0.72) 100%);
    pointer-events: none;
}

.group-hero-back,
.group-hero-btn {
    position: absolute;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.8rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--ink);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background 0.12s ease, transform 0.12s ease;
}

.group-hero-back { top: 0.8rem; left: 0.8rem; }
.group-hero-back:hover, .group-hero-btn:hover { background: #fff; transform: translateY(-1px); }

.group-hero-actions { position: absolute; top: 0.8rem; right: 0.8rem; z-index: 2; display: flex; gap: 0.4rem; font-size: 1rem; }
.group-hero-actions .group-hero-btn { position: relative; }
.group-hero-btn svg { width: 0.95rem; height: 0.95rem; color: var(--accent-dark); }
.group-hero-btn.danger svg { color: var(--danger); }
.group-hero-btn.danger { padding: 0.35rem 0.55rem; }
.group-hero-btn.disabled { opacity: 0.6; pointer-events: none; }
.group-hero-btn input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }

.group-hero-title { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 0.9rem; z-index: 2; font-size: 1rem; text-align: left; }
.group-hero-title h1 { margin: 0 0 0.45rem; color: #fff; font-size: clamp(1.4rem, 4vw, 2rem); text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); overflow-wrap: anywhere; }

.group-hero-chips { margin-top: 0; }

.group-hero-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
}

.group-hero-chip.live { background: rgba(165, 198, 57, 0.9); border-color: transparent; color: var(--brand-dark); }
.group-hero-chip .live-dot { background: var(--brand-dark); }

.group-photo-hint { margin: 0.4rem 0.2rem 1rem; font-size: 0.8rem; }

.group-section-title { display: flex; align-items: center; gap: 0.5rem; margin-top: 0; }
.group-section-title svg { width: 1.2rem; height: 1.2rem; color: var(--accent-dark); }

.group-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.8rem; }

.group-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.9rem 1rem 0.8rem 1.2rem;
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    animation: session-card-in 0.4s ease both;
    animation-delay: calc(var(--i, 0) * 50ms);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.group-cat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--line); }
.group-cat.status-active::before { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); }
.group-cat.status-upcoming::before { background: linear-gradient(180deg, #7ab6ee, #3a86c8); }
.group-cat.status-completed::before { background: #c9c3b4; }
.group-cat:hover { border-color: var(--accent-dark); box-shadow: 0 8px 20px rgba(32, 29, 24, 0.1); transform: translateY(-2px); }

.group-cat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.group-cat-head strong { overflow-wrap: anywhere; flex: 1; min-width: 0; }
.group-cat-rename { flex: none; display: inline-flex; align-items: center; padding: 0.15rem 0.25rem; border-radius: 6px; color: var(--muted); }
.group-cat-rename:hover { background: var(--page-bg); color: var(--accent-dark); }
.group-cat-rename svg { width: 0.95rem; height: 0.95rem; }
.group-cat-meta { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; }
.group-cat-meta svg { width: 0.9rem; height: 0.9rem; color: var(--accent-dark); }
.group-cat-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.4rem; }

.group-add .category-tree { gap: 0.55rem; }

.group-add .category-tree-toggle {
    padding: 0.7rem 0.9rem;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(24, 28, 26, 0.05);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.group-add .category-tree-toggle:hover, .group-add .category-tree-node.open .category-tree-toggle { border-color: var(--accent-dark); background: var(--brand-tint); }

.group-add .category-tree-icon { border-radius: 50%; border: none; background: var(--brand-tint); color: var(--accent-dark); width: 1.5rem; height: 1.5rem; }
.group-add .category-tree-node.open .category-tree-icon { background: var(--accent-dark); color: #fff; }

.category-tree-count { margin-left: auto; color: var(--muted); font-size: 0.78rem; font-weight: 600; }

.group-add .category-tree-children {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.55rem 0 0.2rem 0.3rem;
    padding-left: 0;
    border-left: none;
}

.group-add .category-tree-level {
    padding: 0.4rem 0.85rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--accent-dark);
    background: var(--surface);
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}

.group-add .category-tree-level:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; transform: translateY(-1px); }

.group-share .qr-code-box { border: 1.5px dashed var(--line); border-radius: 16px; background: var(--page-bg); }
.group-share .qr-code-box img { border-radius: 8px; }

@media (max-width: 480px) {
    .group-hero-photo { height: 200px; }
    .group-hero-btn { font-size: 0.75rem; padding: 0.3rem 0.65rem; }
}

/* On a phone the corner buttons shrink to their icons so they never run into the "Back to tournaments" link. */
@media (max-width: 520px) {
    .group-hero-actions .ghb-text { display: none; }
    .group-hero-actions .group-hero-btn { padding: 0.4rem 0.55rem; }
    .group-hero-actions .group-hero-btn svg { width: 1.05rem; height: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) { .group-cat { animation: none; transition: none; } }

/* ---- Tournament registrations: pill tabs, filters, registration cards ---- */
.reg-subtitle { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }

.reg-tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0.3rem;
    margin-bottom: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    overflow-x: auto;
    scrollbar-width: none;
}

.reg-tabs::-webkit-scrollbar { display: none; }

.reg-tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 999px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.reg-tab:hover { background: var(--page-bg); color: var(--ink); }
.reg-tab.active { background: var(--brand); color: #fff; box-shadow: 0 2px 8px rgba(24, 28, 26, 0.25); }

.reg-tab-count {
    min-width: 1.4rem;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    background: var(--page-bg);
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}

.reg-tab.active .reg-tab-count { background: var(--accent); color: var(--brand-dark); }
.reg-tab-pending:not(.active) .reg-tab-count { background: #fdf3cf; color: #8a6100; }

.reg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.reg-search { flex: 2 1 220px; max-width: none; }
.reg-sort { flex: 1 1 210px; }

.reg-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 0.9rem;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.reg-filter-chip svg { width: 0.9rem; height: 0.9rem; }
.reg-filter-chip:hover { border-color: var(--accent-dark); }
.reg-filter-chip.on { background: var(--brand-tint); border-color: var(--accent-dark); color: var(--accent-dark); }

.reg-empty { padding: 2rem 1rem; }

.reg-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.reg-card::before { background: var(--line); }
.reg-card.reg-pending::before { background: linear-gradient(180deg, #f7d850, #e0a800); }
.reg-card.reg-accepted::before { background: linear-gradient(180deg, #7ab6ee, #3a86c8); }
.reg-card.reg-confirmed::before { background: linear-gradient(180deg, var(--accent), var(--accent-dark)); }
.reg-card.reg-rejected::before { background: linear-gradient(180deg, #f08a82, var(--danger)); }

.reg-card { display: flex; flex-direction: column; }
.reg-card-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.3rem; }
.reg-card-names { min-width: 0; }
.reg-card-names h3 { margin: 0 0 0.3rem; font-size: 1.05rem; overflow-wrap: anywhere; }
.reg-card-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.reg-card-tags .badge svg { width: 0.75rem; height: 0.75rem; }

.reg-avatars { display: flex; flex: none; }

.reg-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    background: var(--brand-tint);
    border: 2px solid var(--surface);
    color: var(--accent-dark);
    font-weight: 800;
    font-size: 1.05rem;
}

.reg-avatar.second { margin-left: -0.8rem; background: var(--info-bg); color: #0b4a7a; }

.reg-receipt {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.7rem;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    background: #fff8e1;
    color: #8a6100;
    font-size: 0.85rem;
}

.reg-receipt svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.1rem; }
.reg-receipt a { color: inherit; font-weight: 800; }

.reg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: auto; padding-top: 0.9rem; }
.reg-card .session-info:last-of-type { margin-bottom: 0; }

.board-settings .btn svg { width: 0.9rem; height: 0.9rem; vertical-align: -0.12em; }

@media (max-width: 480px) {
    .reg-tab { padding: 0.45rem 0.7rem; font-size: 0.82rem; }
    .reg-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Let the registrations column shrink to the screen so the tab strip scrolls inside itself instead of widening the page. */
.board-layout-main:has(.reg-tabs) { min-width: 0; }

@media (max-width: 480px) {
    .reg-tabs { gap: 0.15rem; padding: 0.25rem; }
    .reg-tab { flex: 1 1 0; padding: 0.45rem 0.25rem; gap: 0.25rem; font-size: 0.76rem; }
    .reg-tab-count { min-width: 1.1rem; padding: 0 0.35rem; font-size: 0.68rem; }
}

/* ---- Open Play: slimmer Queue column with smaller type ---- */
.board-layout:has(> .sb-rail) { grid-template-columns: minmax(0, 1fr) minmax(0, 18.5rem); }

@media (max-width: 900px) {
    .board-layout:has(> .sb-rail) { grid-template-columns: minmax(0, 1fr); }
}

.queue-card { padding: 0.8rem 0.85rem; }

.queue-card .panel-title { margin-bottom: 0.55rem; gap: 0.4rem; flex-wrap: wrap; }
.queue-card .panel-title h2 { font-size: 1.1rem; }
.queue-card .panel-title h2 svg { width: 18px; height: 18px; }
.queue-card .panel-title h3 { font-size: 0.92rem; }
.queue-card .panel-title-actions { gap: 0.35rem; }
.queue-card .badge { font-size: 0.64rem; padding: 0.1rem 0.45rem; }
.queue-card .btn-sm { font-size: 0.72rem; padding: 0.25rem 0.55rem; }

.queue-card .field { margin-bottom: 0.6rem; }
.queue-card .field input { font-size: 0.82rem; padding: 0.45rem 0.65rem; }

.queue-card .queue-list { gap: 0.3rem; }
.queue-card .queue-row { gap: 0.45rem; padding: 0.3rem 0.5rem; border-radius: 7px; }
.queue-card .queue-name { font-size: 0.82rem; overflow-wrap: anywhere; }
.queue-card .queue-position { font-size: 0.8rem; min-width: 1.2rem; }
.queue-card .queue-meta { font-size: 0.66rem; }
.queue-card .queue-empty { font-size: 0.8rem; padding: 0.35rem 0; }
.queue-card .muted { font-size: 0.78rem; }
.queue-card .panel-title .muted { font-size: 0.72rem; }
.queue-card .import-star { font-size: 1.2rem; }

/* ---- Open Play: slimmer Live Standings card with smaller type ---- */
.standings-section { padding: 0.8rem 0.9rem; }


.standings-section .panel-title { margin-bottom: 0.5rem; }
.standings-section .panel-title h2 { font-size: 1.1rem; }
.standings-section .panel-title h2 svg { width: 18px; height: 18px; }

.standings-section .player-table { font-size: 0.8rem; }

.standings-section .player-table th {
    padding: 0.35rem 0.5rem;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.standings-section .player-table td { padding: 0.35rem 0.5rem; font-variant-numeric: tabular-nums; }
.standings-section .player-table td:first-child { font-weight: 700; }
.standings-section .queue-empty { font-size: 0.8rem; }

/* ---- Tournament Live: slimmer standings cards with smaller type (live-page panels only) ---- */
.live-header h1 { font-size: 1.6rem; margin-bottom: 0.15rem; }
.live-header .meta { font-size: 0.82rem; }

/* Cards shrink to their content instead of stretching across the whole page. */
.fs-section .card:has(.rr-standings-group) { width: fit-content; max-width: 100%; padding: 0.8rem 0.95rem; }

.fs-section .card:has(.rr-standings-group) .panel-title { margin-bottom: 0.4rem; }
.fs-section .card:has(.rr-standings-group) h2 { font-size: 1.1rem; }
.fs-section .card:has(.rr-standings-group) h2 svg { width: 18px; height: 18px; }
.fs-section .card:has(.rr-standings-group) > .muted { font-size: 0.78rem !important; }

.fs-section .rr-standings-group { gap: 1rem 1.75rem; }
.fs-section .rr-standings-block h3 { font-size: 0.92rem; margin-bottom: 0.35rem; }

.fs-section .rr-standings-table { font-size: 0.8rem; }

.fs-section .rr-standings-table th {
    padding: 0.3rem 0.45rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.fs-section .rr-standings-table td { padding: 0.3rem 0.45rem; font-variant-numeric: tabular-nums; }
.fs-section .rr-standings-table td:nth-child(2) { font-weight: 700; }
.fs-section .rr-standings-table .badge { font-size: 0.6rem; padding: 0.08rem 0.4rem; }
.fs-section .rr-standings-table .tiebreak-badge { font-size: 0.68rem; padding: 0.12rem 0.45rem; }

.fs-section .rr-standings-table th:nth-child(1), .fs-section .rr-standings-table td:nth-child(1) { width: 46px; }
.fs-section .rr-standings-table th:nth-child(2), .fs-section .rr-standings-table td:nth-child(2) { width: 170px; }
.fs-section .rr-standings-table th:nth-child(3), .fs-section .rr-standings-table td:nth-child(3),
.fs-section .rr-standings-table th:nth-child(4), .fs-section .rr-standings-table td:nth-child(4),
.fs-section .rr-standings-table th:nth-child(5), .fs-section .rr-standings-table td:nth-child(5) { width: 58px; }
.fs-section .rr-standings-table th:nth-child(6), .fs-section .rr-standings-table td:nth-child(6) { width: 84px; }

.fs-section .runners-up-card { width: fit-content; min-width: min(100%, 22rem); max-width: min(100%, 32rem); padding: 0.8rem 0.95rem; }
.fs-section .runners-up-card h2 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.fs-section .runners-up-card .queue-list { gap: 0.3rem; }
.fs-section .runners-up-card .queue-row { padding: 0.35rem 0.6rem; font-size: 0.85rem; }

.fs-section .card.bracket-scroll > h2 { font-size: 1.1rem; margin: 0 0 0.4rem; }
.fs-section .card.bracket-scroll > h3 { font-size: 0.92rem; margin: 0.5rem 0 0.35rem; }

@media (max-width: 600px) {
    /* The fixed-width standings table can be wider than a phone: scroll inside the card, not the whole page. */
    .fs-section .card:has(.rr-standings-group) { overflow-x: auto; }
}

/* ---- Open Play Live: slimmer standings column with smaller type ---- */
.board-layout:has(> #fs-courts) { grid-template-columns: minmax(0, 1fr) minmax(0, 18.5rem); }

@media (max-width: 900px) {
    .board-layout:has(> #fs-courts) { grid-template-columns: minmax(0, 1fr); }
}

#fs-standings .card { padding: 0.8rem 0.9rem; }
#fs-standings .panel-title { margin-bottom: 0.45rem; }
#fs-standings .panel-title h2 { font-size: 1.1rem; margin: 0; }
#fs-standings .queue-empty { font-size: 0.8rem; }

#fs-standings .player-table { font-size: 0.8rem; }

#fs-standings .player-table th {
    padding: 0.3rem 0.4rem;
    color: var(--muted);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

#fs-standings .player-table td { padding: 0.3rem 0.4rem; font-variant-numeric: tabular-nums; }
#fs-standings .player-table td:first-child { font-weight: 700; overflow-wrap: anywhere; }

#fs-courts > .fs-stage > .fs-fit-inner > h2,
#fs-courts h2:first-child { font-size: 1.1rem; margin: 0 0 0.5rem; }

/* Open Play Live: compact court cards (live page only - the organizer board keeps its larger cards). */
#fs-courts .court-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; }
#fs-courts .court-card { padding: 0.7rem 0.8rem; }
#fs-courts .court-card .court-title { margin-bottom: 0.4rem; font-size: 0.9rem; }
#fs-courts .court-card .badge { font-size: 0.64rem; padding: 0.1rem 0.45rem; }
#fs-courts .match-teams { gap: 0.4rem; margin-bottom: 0.5rem; }
#fs-courts .team { padding: 0.4rem 0.5rem; border-radius: 7px; }
#fs-courts .team .player { font-size: 0.8rem; line-height: 1.35; padding: 0.1rem 0; }
#fs-courts .vs { font-size: 0.7rem; }
#fs-courts .timer { font-size: 0.72rem; }
#fs-courts .court-empty { font-size: 0.8rem; padding: 0.6rem 0; }

/* ---- Open Play board: slimmer Session settings card with smaller type ---- */
@media (min-width: 901px) {
    /* Same width as the Courts column below (everything except the Queue column and the gap). */
    .session-setup { max-width: calc(100% - 19.5rem); }
}

.session-setup .settings-header { padding: 0.65rem 0.85rem; }
.session-setup .settings-header strong { font-size: 0.92rem; }
.session-setup .settings-header .muted { font-size: 0.82rem; }
.session-setup .settings-summary { font-size: 0.74rem; margin-top: 0.1rem; }

.session-setup .settings-body { padding: 0.1rem 0.85rem 0.5rem; }
.session-setup .settings-row { gap: 0.75rem; padding: 0.5rem 0; }
.session-setup .settings-row strong { font-size: 0.84rem; }
.session-setup .settings-row .muted { font-size: 0.74rem; line-height: 1.35; }
.session-setup .settings-row select { padding: 0.3rem 0.5rem; font-size: 0.8rem; border-radius: 7px; }
.session-setup .settings-row input[type="time"] { padding: 0.3rem 0.5rem; font-size: 0.8rem; }

.session-setup .stepper { gap: 0.55rem; padding: 0.35rem 0; font-size: 0.8rem; }
.session-setup .stepper-btn { width: 26px; height: 26px; font-size: 0.95rem; }
.session-setup .stepper-value { font-size: 0.95rem; }

.session-setup .queue-row { padding: 0.3rem 0.5rem; }
.session-setup .checkbox-field { font-size: 0.82rem; }

.session-setup .pill-toggle { gap: 0.3rem; }
.session-setup .pill-btn { padding: 0.28rem 0.85rem; font-size: 0.78rem; }

.session-setup .settings-row .queue-list { min-width: 15rem; gap: 0.25rem; }
.session-setup .settings-row .queue-row { gap: 0.4rem; padding: 0.25rem 0.5rem; font-size: 0.8rem; }
.session-setup .settings-row .queue-position { font-size: 0.75rem; min-width: 1rem; }
.session-setup .tiebreak-suboption { font-size: 0.7rem; padding-left: 1.6rem; }
.session-setup .icon-btn { font-size: 0.65rem; }

@media (max-width: 600px) {
    /* Stack the label above its control so wide controls (the tie-breaker order) never push the page sideways. */
    .session-setup .settings-row { flex-wrap: wrap; }
    .session-setup .settings-row .queue-list { min-width: 0; width: 100%; }
}

/* ---- Court Booking directory: slimmer venue cards with smaller type (public /book list only) ---- */
.book-directory .board-header h1 { font-size: 1.6rem; margin-bottom: 0.1rem; }
.book-directory .board-header .meta { font-size: 0.82rem; }
.book-directory .book-directory-stats .session-chip { font-size: 0.72rem; padding: 0.15rem 0.5rem; }

.book-directory .book-search-box input { padding: 0.55rem 1rem 0.55rem 2.5rem; font-size: 0.88rem; }
.book-directory .book-search-icon { left: 0.85rem; width: 16px; height: 16px; }
.book-directory .book-search-box { max-width: 440px; }
.book-directory .book-search-row { margin-bottom: 1.1rem; }

.book-directory .venue-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0.8rem; }

.book-directory .venue-card { border-radius: 14px; }
.book-directory .venue-card-photo { height: 118px; font-size: 1.7rem; }

.book-directory .venue-card-logo { top: 8px; left: 8px; width: 32px; height: 32px; font-size: 0.95rem; }
.book-directory .venue-card-court-count { bottom: 8px; right: 8px; padding: 0.18rem 0.5rem; font-size: 0.66rem; }
.book-directory .venue-card-court-count svg { width: 0.75rem; height: 0.75rem; }
.book-directory .venue-card-price-pill { bottom: 8px; left: 8px; padding: 0.18rem 0.55rem; font-size: 0.72rem; }
.book-directory .venue-card-price-pill small { font-size: 0.62rem; }

.book-directory .venue-card-body { padding: 0.7rem 0.85rem 0.75rem; }
.book-directory .venue-card-name { font-size: 0.95rem; }
.book-directory .venue-card-body .session-info { gap: 0.5rem; margin-top: 0.35rem; font-size: 0.78rem; }
.book-directory .venue-card-body .session-info-icon { width: 1.55rem; height: 1.55rem; border-radius: 8px; }
.book-directory .venue-card-body .session-info-icon svg { width: 0.8rem; height: 0.8rem; }
.book-directory .venue-card-desc { margin-top: 0.45rem; font-size: 0.76rem; }
.book-directory .venue-card .session-open { padding-top: 0.65rem; font-size: 0.78rem; }

/* ---- Venue booking page: slimmer layout with smaller type (public /book/{venue} only) ---- */
.venue-page { max-width: 920px; }

.venue-page .venue-hero { margin-bottom: 0.75rem; }
.venue-page .venue-hero-photo { height: 170px; font-size: 3rem; }
.venue-page .venue-hero-info { padding: 0.7rem 1rem; }
.venue-page .venue-hero-info h2 { font-size: 1.3rem; margin-bottom: 0.1rem; }
.venue-page .venue-hero-info .muted { font-size: 0.82rem; }

.venue-page .venue-tabs { margin-bottom: 0.8rem; }
.venue-page .venue-tab { padding: 0.45rem 0.8rem; font-size: 0.86rem; }

.venue-page .book-dates { gap: 0.3rem; margin-bottom: 0.45rem; }
.venue-page .book-date-btn { padding: 0.4rem 0.1rem; border-radius: 10px; }
.venue-page .book-date-btn .d { font-size: 0.62rem; }
.venue-page .book-date-btn .n { font-size: 0.78rem; }
.venue-page .book-date-more { margin-bottom: 0.75rem; font-size: 0.8rem; }
.venue-page .book-date-more input[type="date"] { font-size: 0.8rem; padding: 0.25rem 0.4rem; }

.venue-page .book-legend { gap: 0.3rem 0.8rem; font-size: 0.76rem; margin-bottom: 0.4rem; }
.venue-page .book-legend .swatch { width: 0.8rem; height: 0.8rem; }
.venue-page > .muted, .venue-page .book-legend + .muted { font-size: 0.78rem !important; }

.venue-page .book-grid-wrap { border-radius: 14px; }
.venue-page .book-grid th { padding: 0.45rem 0.4rem; }
.venue-page .book-grid .court-name { font-size: 0.88rem; }
.venue-page .book-grid .court-price { font-size: 0.66rem; }
.venue-page .book-grid td { height: 46px; padding: 0.22rem; min-width: 92px; }
.venue-page .book-grid td.time-col, .venue-page .book-grid th.time-col { min-width: 92px; width: 92px; font-size: 0.7rem; }
.venue-page .book-grid th.time-col { font-size: 0.82rem; }
.venue-page .book-grid td.cell span { font-size: 0.74rem; }
.venue-page .book-grid td.open button { min-height: 36px; font-size: 0.78rem; border-radius: 8px; }

.venue-page .venue-info-card { padding: 0.95rem 1.05rem; }
.venue-page .venue-info-title { font-size: 0.95rem; margin-bottom: 0.65rem; }
.venue-page .venue-info-sub { font-size: 0.68rem; margin: 0.8rem 0 0.3rem; }
.venue-page .venue-rate-headline { font-size: 1.65rem; }
.venue-page .venue-rate-headline small { font-size: 0.85rem; }
.venue-page .venue-rate-row { padding: 0.5rem 0; font-size: 0.85rem; }
.venue-page .venue-facilities { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.5rem 0.8rem; font-size: 0.85rem; }
.venue-page .venue-hours-row { padding: 0.4rem 0; font-size: 0.85rem; }
.venue-page .venue-open-status { font-size: 0.85rem; }
.venue-page .venue-map { height: 200px; }
.venue-page .venue-contact-list { font-size: 0.85rem; }
.venue-page .venue-about-grid, .venue-page .venue-about { gap: 0.8rem; }

.venue-page .book-selection-bar { font-size: 0.85rem; }
.venue-page .book-selection-bar .btn { font-size: 0.82rem; padding: 0.4rem 0.9rem; }

/* ---- Booking checkout: slimmer page with smaller type (the QR pop-up is left at full size) ---- */
.checkout-page { max-width: 760px; }

.checkout-card { padding: 1rem 1.1rem; border-radius: 16px; }

.checkout-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }

.checkout-head-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    background: var(--brand-tint);
    color: var(--accent-dark);
}

.checkout-head-icon svg { width: 1.2rem; height: 1.2rem; }
.checkout-head h2 { margin: 0; font-size: 1.15rem; }
.checkout-head .checkout-date { margin: 0.1rem 0 0 !important; font-size: 0.8rem; }

.checkout-page .book-checkout-ranges { font-size: 0.85rem; margin: 0 0 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.checkout-page .book-checkout-ranges li { padding: 0.35rem 0.65rem; background: var(--page-bg); border: 1px solid var(--line); border-radius: 8px; }

.checkout-card .muted { font-size: 0.8rem; }

.checkout-total {
    display: flex;
    align-items: center;
    margin: 0.4rem 0 0.8rem;
    padding: 0.55rem 0.8rem;
    border-radius: 10px;
    background: var(--brand-tint);
    font-size: 1rem;
}

.checkout-page h3 { font-size: 0.9rem !important; }

.checkout-page .book-mode-list { gap: 0.6rem; margin: 0.5rem 0 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.checkout-page .book-mode-card { padding: 0.65rem 0.75rem; border-radius: 12px; }
.checkout-page .book-mode-name { font-size: 0.85rem; margin-bottom: 0.2rem; }
.checkout-page .book-mode-card .muted { font-size: 0.78rem; }

.checkout-page .upgrade-report-box { padding: 0.75rem 0.9rem; border-radius: 12px; margin-bottom: 0.9rem; }
.checkout-page .upgrade-club-label { font-size: 0.66rem; }

.checkout-page .card .card { padding: 0.75rem 0.85rem; border-radius: 12px; }
.checkout-page .field label { font-size: 0.82rem; }
.checkout-page .field label[style*="flex:1"] { font-size: 0.85rem; }
.checkout-page .card .stepper { gap: 0.45rem; }
.checkout-page .stepper-btn { width: 26px; height: 26px; font-size: 0.95rem; }
.checkout-page .stepper-value { font-size: 0.95rem; }

.checkout-page .alert { font-size: 0.82rem; padding: 0.55rem 0.8rem; }
.checkout-page .btn-block { padding: 0.6rem 1rem; font-size: 0.9rem; }
.checkout-page .upgrade-cancel-link { font-size: 0.8rem; }

.checkout-page .checkout-card > h3 { margin: 1rem 0 0.2rem; }
.checkout-page .checkout-card .card img { display: block; max-width: 200px; height: auto; margin: 0 auto; border-radius: 8px; }

/* ---- Upgrade page: slimmer card with smaller type (the QR pop-up is left at full size) ---- */
.upgrade-page { max-width: 500px; margin: 1rem auto; }

.upgrade-page .upgrade-card { padding: 0.95rem 1.05rem; border-radius: 16px; }
.upgrade-page .upgrade-card h1 { font-size: 1.3rem; margin: 0.2rem 0 0.25rem; }
.upgrade-page .upgrade-eyebrow { font-size: 0.66rem; }
.upgrade-page .upgrade-card > .muted { font-size: 0.82rem; line-height: 1.45; }
.upgrade-page .alert { font-size: 0.8rem; padding: 0.55rem 0.75rem; }

.upgrade-page .upgrade-feature-list { font-size: 0.82rem; margin-top: 0.5rem; padding-left: 1.1rem; }
.upgrade-page .upgrade-feature-list li { margin-bottom: 0.25rem; }

.upgrade-page .upgrade-club-box { padding: 0.65rem 0.8rem; margin: 0.75rem 0 1rem; border-radius: 12px; }
.upgrade-page .upgrade-club-label { font-size: 0.64rem; }
.upgrade-page .upgrade-club-name { font-size: 0.9rem; }
.upgrade-page .upgrade-club-box .muted { font-size: 0.78rem; }

.upgrade-page .upgrade-plans { gap: 0.55rem; margin: 0.6rem 0 1rem; }
.upgrade-page .upgrade-plan { padding: 0.7rem 0.65rem; border-radius: 12px; }
.upgrade-page .upgrade-plan-name { font-size: 0.9rem; }
.upgrade-page .upgrade-plan-price { font-size: 1.1rem; }
.upgrade-page .upgrade-plan-duration { font-size: 0.72rem; }
.upgrade-page .upgrade-plan-desc { font-size: 0.72rem; }
.upgrade-page .upgrade-plan-badge { font-size: 0.6rem; }

.upgrade-page .upgrade-total { padding-top: 0.75rem; margin-bottom: 0.9rem; font-size: 0.9rem; }
.upgrade-page .upgrade-total-price { font-size: 1.1rem; }

.upgrade-page .btn-block { padding: 0.6rem 1rem; font-size: 0.88rem; }
.upgrade-page .upgrade-note, .upgrade-page .upgrade-footer { font-size: 0.72rem; }
.upgrade-page .upgrade-cancel-link { font-size: 0.8rem; }
.upgrade-page .upgrade-report-box { padding: 0.7rem 0.85rem; border-radius: 12px; }
.upgrade-page .field label { font-size: 0.82rem; }

/* ---- Club Profile: slimmer cards with smaller type (scoped to this page) ---- */
.profile-page { max-width: 720px; }

.profile-page .board-header h1 { font-size: 1.6rem; margin-bottom: 0.1rem; }
.profile-page .board-header .meta { font-size: 0.82rem; }

.profile-page .card { padding: 0.95rem 1.05rem; border-radius: 14px; margin-bottom: 0.85rem; }
.profile-page .card h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.profile-page .card .muted { font-size: 0.8rem; line-height: 1.4; }

.profile-page .field { margin-bottom: 0.65rem; }
.profile-page .field label { font-size: 0.78rem; }
.profile-page .field input, .profile-page .field select, .profile-page .field textarea { padding: 0.4rem 0.6rem; font-size: 0.85rem; border-radius: 7px; }

.profile-page .settings-row { gap: 0.75rem; padding: 0.55rem 0; }
.profile-page .settings-row strong { font-size: 0.86rem; }
.profile-page .settings-row .muted { font-size: 0.76rem; }

.profile-page .btn { font-size: 0.82rem; padding: 0.4rem 0.85rem; }
.profile-page .btn-sm { font-size: 0.75rem; padding: 0.3rem 0.65rem; }
.profile-page .btn-block { font-size: 0.88rem; padding: 0.55rem 1rem; }

.profile-page .club-logo-preview { width: 72px; height: 72px; font-size: 1.9rem; }
.profile-page .alert { font-size: 0.8rem; padding: 0.5rem 0.75rem; }

.profile-page .stepper { gap: 0.5rem; padding: 0.2rem 0; }
.profile-page .stepper-btn { width: 26px; height: 26px; font-size: 0.95rem; }
.profile-page .stepper-value { font-size: 0.95rem; }

.profile-page .upgrade-club-box { padding: 0.65rem 0.8rem; margin: 0.6rem 0; border-radius: 12px; }
.profile-page .upgrade-club-label { font-size: 0.64rem; }
.profile-page .upgrade-club-name { font-size: 0.9rem; }

.profile-page .queue-row { padding: 0.3rem 0.5rem; font-size: 0.8rem; }
.profile-page .tiebreak-suboption { font-size: 0.7rem; }
.profile-page .icon-btn { font-size: 0.65rem; }

@media (max-width: 600px) {
    .profile-page .settings-row { flex-wrap: wrap; }
    .profile-page .settings-row .queue-list { min-width: 0; width: 100%; }
}

/* ---- Club login / signup: slimmer card with smaller type (scoped to the club auth page) ---- */
.club-page.club-auth-page { max-width: 400px; padding: 1.5rem 0 2rem; }

.club-auth-page .club-tabs { padding: 0.25rem; margin-bottom: 0.9rem; }
.club-auth-page .club-tab { padding: 0.45rem; font-size: 0.85rem; }

.club-auth-card { padding: 1rem 1.1rem 1.1rem; border-radius: 16px; }
.club-auth-card h2 { font-size: 1.25rem; margin: 0.2rem 0 0.3rem; }
.club-auth-card .muted { font-size: 0.82rem; line-height: 1.4; }
.club-auth-card .alert { font-size: 0.8rem; padding: 0.5rem 0.75rem; }

.club-auth-card .field { margin-bottom: 0.65rem; }
.club-auth-card .field label { font-size: 0.78rem; }
.club-auth-card .field input { padding: 0.45rem 0.65rem; font-size: 0.85rem; border-radius: 8px; }
.club-auth-card .field .muted { font-size: 0.74rem !important; }
.club-auth-card .club-link-prefix { font-size: 0.78rem; }

.club-auth-card .btn-block { padding: 0.55rem 1rem; font-size: 0.88rem; }
.club-auth-card .club-or-divider { margin: 0.75rem 0; font-size: 0.78rem; }
.club-auth-card .club-footer, .club-auth-page .club-footer { margin-top: 0.8rem; font-size: 0.8rem; }
.club-auth-card .club-recover-request { font-size: 0.8rem; margin-top: 0.8rem; padding-top: 0.7rem; }

/* ---- Customer account (log in / sign up / forgot + reset password): same slim card as the club login ---- */
.club-page.customer-auth { max-width: 400px; margin: 1.5rem auto 2rem; }

.customer-auth .club-tabs { padding: 0.25rem; margin-bottom: 0.9rem; }
.customer-auth .club-tab { padding: 0.45rem; font-size: 0.85rem; }

.customer-auth-card { padding: 1rem 1.1rem 1.1rem; border-radius: 16px; }
.customer-auth-card h2 { font-size: 1.25rem; margin: 0.2rem 0 0.3rem; }
.customer-auth-card .muted { font-size: 0.82rem; line-height: 1.4; }
.customer-auth-card .alert { font-size: 0.8rem; padding: 0.5rem 0.75rem; }

.customer-auth-card .field { margin-bottom: 0.65rem; }
.customer-auth-card .field label { font-size: 0.78rem; }
.customer-auth-card .field input { padding: 0.45rem 0.65rem; font-size: 0.85rem; border-radius: 8px; }
.customer-auth-card .field .muted { font-size: 0.74rem !important; }

.customer-auth-card .btn-block { padding: 0.55rem 1rem; font-size: 0.88rem; }
.customer-auth-card .club-or-divider { margin: 0.75rem 0; font-size: 0.78rem; }
.customer-auth .club-footer { margin-top: 0.8rem; font-size: 0.8rem; }
.customer-auth-card .club-recover-request { font-size: 0.8rem; margin-top: 0.8rem; padding-top: 0.7rem; }

/* The inline inputs inside the "Don't have your recovery code?" / "Forgot password?" drop-downs get the same look as the main fields. */
.club-recover-request input:not([type="hidden"]) {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    font: inherit;
    font-size: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.club-recover-request input:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.25); }
.club-recover-request .muted { margin: 0.4rem 0 0.5rem; }

/* ---- Admin: Customers page ---- */
.admin-customer-stats { margin: 0 0 0.9rem; }

.admin-customers-card { padding: 0.5rem 0.85rem; }
.admin-customers-table { font-size: 0.85rem; }

.admin-customers-table th {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.admin-customers-table td { vertical-align: top; }
.admin-customers-table td .muted { font-size: 0.76rem; }

.admin-customer-bookings-row td { background: var(--page-bg); }
.admin-customer-bookings-row .queue-row { background: var(--surface); flex-wrap: wrap; font-size: 0.82rem; }
.admin-customer-bookings-row .queue-name { min-width: 12rem; }

/* ---- Venue setup: slimmer side column, cards and type (scoped to the venue setup page body) ---- */
.board-layout.venue-setup { grid-template-columns: minmax(0, 1fr) minmax(0, 18.5rem); }

@media (max-width: 900px) {
    .board-layout.venue-setup { grid-template-columns: minmax(0, 1fr); }
}

.venue-setup .board-layout-main, .venue-setup .board-layout-side { gap: 0.85rem; min-width: 0; }

.venue-setup .card { padding: 0.95rem 1.05rem; border-radius: 14px; margin-bottom: 0; }
.venue-setup .card h2 { font-size: 1.05rem; margin: 0 0 0.6rem; }
.venue-setup .card h3 { font-size: 0.9rem !important; }
.venue-setup .card .muted { font-size: 0.8rem; line-height: 1.4; }

.venue-setup .field { margin-bottom: 0.65rem; }
.venue-setup .field label { font-size: 0.78rem; }
.venue-setup .field input, .venue-setup .field select, .venue-setup .field textarea { padding: 0.4rem 0.6rem; font-size: 0.85rem; border-radius: 7px; }
.venue-setup .field textarea { line-height: 1.4; }
.venue-setup .checkbox-field { font-size: 0.82rem; }
.venue-setup .field-row { gap: 0.6rem; }

.venue-setup .btn { font-size: 0.82rem; padding: 0.4rem 0.85rem; }
.venue-setup .btn-sm { font-size: 0.75rem; padding: 0.3rem 0.65rem; }
.venue-setup .btn-block { font-size: 0.88rem; padding: 0.55rem 1rem; }

.venue-setup .alert { font-size: 0.8rem; padding: 0.5rem 0.75rem; }
.venue-setup .badge { font-size: 0.64rem; padding: 0.1rem 0.45rem; }

.venue-setup .queue-list { gap: 0.3rem; }
.venue-setup .queue-row { gap: 0.5rem; padding: 0.3rem 0.55rem; font-size: 0.82rem; }

.venue-setup .venue-hero-photo { height: 150px; }
.venue-setup .venue-photo-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 0.5rem; }
.venue-setup .qr-code-box { padding: 0.7rem; margin: 0.5rem 0; }
.venue-setup .qr-code-box img { width: 160px; height: 160px; }

.live-header .btn svg { width: 14px; height: 14px; }

@media (max-width: 600px) {
    .venue-setup .field-row { flex-wrap: wrap; }
}

/* Side-column rows are narrow now: let the fields share the row and shrink, so a select can't push the page wider. */
.venue-setup .field-row { flex-wrap: wrap; }
.venue-setup .field-row > .field { flex: 1 1 8rem; min-width: 0; }
.venue-setup .field select, .venue-setup .field input { min-width: 0; max-width: 100%; }

/* ---- Bracket D (wildcards): setup toggle card and the wildcard picker ---- */
.wildcard-card {
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1.5px dashed var(--line);
    border-radius: 14px;
    background: var(--page-bg);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.wildcard-card.on { border-style: solid; border-color: var(--accent-dark); background: #f6f9ea; }
.wildcard-card .settings-row { border-bottom: none; padding: 0.2rem 0; max-width: none; }
.wildcard-card .muted { font-size: 0.78rem; margin-top: 0.15rem; }
.wildcard-howto { margin: 0.6rem 0 0; font-size: 0.82rem; line-height: 1.45; }
.wildcard-note { font-size: 0.85rem; }

.wildcard-picker { max-width: 520px; }
.wildcard-list { max-height: min(46vh, 22rem); }
.wildcard-group-label { margin: 0.6rem 0 0.1rem; color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.wildcard-group-label:first-child { margin-top: 0; }
.wildcard-picker .import-row { display: block; cursor: pointer; }
.wildcard-picker .import-row.excluded-soft { background: var(--surface); }
.wildcard-picker .import-row.locked { opacity: 0.45; cursor: not-allowed; }
.wildcard-name { background: none; padding: 0.2rem 0.3rem; flex: 1; font-weight: 700; }

/* Wildcard picker: a compact standings-style table (tick, rank, entrant, W-L, Total, Diff). The header row stays put while the list scrolls. */
.wc-table { max-height: min(48vh, 24rem); overflow-y: auto; margin-top: 0.5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); }
.wc-head, .wc-row { display: grid; grid-template-columns: 1.4rem 1.5rem minmax(0, 1fr) 2.7rem 2.9rem 2.7rem; align-items: center; gap: 0.35rem; padding: 0.45rem 0.7rem; }
.wc-head { position: sticky; top: 0; z-index: 1; padding-top: 0.4rem; padding-bottom: 0.4rem; background: var(--page-bg, #f6f3ea); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.wc-head span:nth-child(n+4) { text-align: right; }
.wc-group { padding: 0.4rem 0.7rem 0.15rem; color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.wc-row { cursor: pointer; border-top: 1px solid var(--line); transition: background 0.12s ease; }
.wc-group + .wc-row { border-top: 0; }
.wc-row:hover:not(.locked) { background: var(--page-bg, #f6f3ea); }
.wc-row.picked { background: #f1f7dd; box-shadow: inset 3px 0 0 var(--accent-dark); }
.wc-row.locked { opacity: 0.45; cursor: not-allowed; }
.wc-check { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--accent-dark); cursor: inherit; }
.wc-rank { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: #ece7dc; color: var(--muted); font-size: 0.7rem; font-weight: 800; }
.wc-name { font-weight: 700; font-size: 0.9rem; line-height: 1.2; overflow-wrap: anywhere; }
.wc-stat { text-align: right; font-size: 0.85rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wc-diff.neg { color: var(--danger, #b3261e); }
@media (max-width: 420px) {
    .wc-head, .wc-row { grid-template-columns: 1.25rem 1.3rem minmax(0, 1fr) 2.3rem 2.4rem 2.3rem; gap: 0.25rem; padding-left: 0.5rem; padding-right: 0.5rem; }
    .wc-name { font-size: 0.84rem; }
    .wc-stat { font-size: 0.8rem; }
}

/* ---- Open Play Sessions list: slimmer cards and smaller type (home sessions page only) ---- */
.sessions-page .session-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.8rem; }
.sessions-page .session-card { padding: 0.85rem 1rem; border-radius: 14px; }
.sessions-page .session-card-head { margin-bottom: 0.5rem; gap: 0.5rem; }
.sessions-page .session-card-head h3 { font-size: 0.98rem; }
.sessions-page .session-status { font-size: 0.64rem; padding: 0.1rem 0.45rem; }
.sessions-page .session-info { gap: 0.5rem; margin-top: 0.3rem; font-size: 0.78rem; }
.sessions-page .session-info-icon { width: 1.55rem; height: 1.55rem; border-radius: 8px; }
.sessions-page .session-info-icon svg { width: 0.8rem; height: 0.8rem; }
.sessions-page .session-chips { gap: 0.3rem; margin-top: 0.6rem; }
.sessions-page .session-chip { font-size: 0.7rem; padding: 0.12rem 0.5rem; }
.sessions-page .session-chip svg { width: 0.75rem; height: 0.75rem; }
.sessions-page a.fancy-card .session-open { padding-top: 0.65rem; font-size: 0.78rem; }
.sessions-page .btn-sm { font-size: 0.75rem; padding: 0.3rem 0.65rem; }
.sessions-page .card > .muted { font-size: 0.82rem; }

/* New Session / upgrade modals */
.sessions-page .modal-box h3 { font-size: 1.05rem; }
.sessions-page .modal-box .field { margin-bottom: 0.65rem; }
.sessions-page .modal-box .field label { font-size: 0.78rem; }
.sessions-page .modal-box .field input, .sessions-page .modal-box .field select { padding: 0.4rem 0.6rem; font-size: 0.85rem; border-radius: 7px; }
.sessions-page .modal-box .checkbox-field { font-size: 0.82rem; }
.sessions-page .modal-box .btn { font-size: 0.82rem; padding: 0.4rem 0.85rem; }
.sessions-page .modal-box .btn-block { font-size: 0.88rem; padding: 0.55rem 1rem; }
.sessions-page .modal-box .alert { font-size: 0.8rem; padding: 0.5rem 0.75rem; }
.sessions-page .modal-box .settings-row { font-size: 0.85rem; }
.sessions-page .modal-box .settings-row .muted { font-size: 0.76rem; }
.sessions-page .modal-box .field-row > .field { min-width: 0; }

@media (max-width: 600px) {
    .sessions-page .modal-box .field-row { flex-wrap: wrap; }
    .sessions-page .modal-box .field-row > .field { flex: 1 1 8rem; }
}

/* Small star after the group/rank badge for a hand-picked wildcard (Bracket D) player. */
.bracket-rank-wildcard { margin-left: 0.2rem; font-size: 0.62rem; line-height: 1; color: #c98a00; }

/* ---- My Venues: slimmer venue cards and smaller type (club /club/venues page only) ---- */
.venues-page .board-header h1 { font-size: 1.6rem; margin-bottom: 0.1rem; }
.venues-page .board-header h1 svg { width: 24px; height: 24px; }
.venues-page .board-header .meta { font-size: 0.82rem; }

.venues-page .venue-grid { grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0.8rem; }
.venues-page .venue-card { border-radius: 14px; }
.venues-page .venue-card-photo { height: 118px; font-size: 1.7rem; }
.venues-page .venue-card-logo { top: 8px; left: 8px; width: 32px; height: 32px; font-size: 0.95rem; }
.venues-page .venue-card-court-count { bottom: 8px; right: 8px; padding: 0.18rem 0.5rem; font-size: 0.66rem; }
.venues-page .venue-card-court-count svg { width: 0.75rem; height: 0.75rem; }
.venues-page .venue-card-status { top: 8px; right: 8px; font-size: 0.64rem; padding: 0.1rem 0.45rem; }

.venues-page .venue-card-body { padding: 0.7rem 0.85rem 0.75rem; }
.venues-page .venue-card-name { font-size: 0.95rem; }
.venues-page .venue-card-body .session-info { gap: 0.5rem; margin-top: 0.35rem; font-size: 0.78rem; }
.venues-page .venue-card-body .session-info-icon { width: 1.55rem; height: 1.55rem; border-radius: 8px; }
.venues-page .venue-card-body .session-info-icon svg { width: 0.8rem; height: 0.8rem; }

.venues-page .venue-card-actions { padding: 0.55rem 0.85rem 0.7rem; gap: 0.4rem; }
.venues-page .venue-card-action-link { font-size: 0.74rem; padding: 0.32rem 0.5rem; }
.venues-page .venue-card-qr-btn { width: 28px; height: 28px; }

.venues-page .card > .muted { font-size: 0.82rem; }

/* New Venue / Court Booking Link modals */
.venues-page .modal-box h3 { font-size: 1.05rem; }
.venues-page .modal-box .field { margin-bottom: 0.65rem; }
.venues-page .modal-box .field label { font-size: 0.78rem; }
.venues-page .modal-box .field input { padding: 0.4rem 0.6rem; font-size: 0.85rem; border-radius: 7px; }
.venues-page .modal-box .btn { font-size: 0.82rem; padding: 0.4rem 0.85rem; }
.venues-page .modal-box .btn-block { font-size: 0.88rem; padding: 0.55rem 1rem; }
.venues-page .modal-box .alert { font-size: 0.8rem; padding: 0.5rem 0.75rem; }
.venues-page .modal-box .qr-code-box { padding: 0.7rem; margin: 0.5rem 0; }

/* ---- Public tournament share page (/t/{id}): cover photo, category list with live links ---- */
.share-page { max-width: 640px; margin: 1.5rem auto 3rem; padding: 0 1rem; }

.share-hero { position: relative; border-radius: 18px; overflow: hidden; margin-bottom: 1rem; box-shadow: 0 6px 20px rgba(32, 29, 24, 0.12); background: var(--ink); min-height: 120px; }
.share-hero img { display: block; width: 100%; height: 220px; object-fit: cover; }
.share-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.72) 100%); pointer-events: none; }
.share-hero-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 1rem 1.2rem; color: #fff; }
.share-hero h1 { margin: 0; font-size: 1.6rem; line-height: 1.2; color: #fff; }
.share-hero-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-top: 0.3rem; font-size: 0.82rem; opacity: 0.92; }
.share-hero.no-photo { display: flex; align-items: flex-end; min-height: 140px; background: linear-gradient(135deg, var(--accent-dark), var(--ink)); }
.share-hero.no-photo .share-hero-text { position: static; }
.share-hero.no-photo::after { display: none; }

.share-card { padding: 1rem 1.1rem; }
.share-card h2 { font-size: 1.05rem; margin: 0 0 0.7rem; }

.share-cat-list { display: flex; flex-direction: column; gap: 0.5rem; }
.share-cat { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color 0.15s ease, background 0.15s ease; }
a.share-cat[href]:hover { border-color: var(--accent-dark); background: var(--brand-tint); }
.share-cat-name { flex: 1 1 10rem; min-width: 0; font-weight: 700; font-size: 0.92rem; overflow-wrap: anywhere; }
.share-cat-go { font-size: 0.78rem; font-weight: 800; color: var(--accent-dark); }
.share-cat.not-started { opacity: 0.75; }
.share-cat.not-started .share-cat-go { color: var(--muted); font-weight: 600; }

.share-register { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line); font-size: 0.85rem; }

/* ---- Scorekeepers: organizer panel, assign pop-up, match-card icon, and the scorekeeper's own page ---- */
.scorekeeper-panel .sk-summary { margin: 0; font-size: 0.82rem; }
.sk-pending-badge { margin-left: 0.4rem; font-size: 0.68rem; vertical-align: middle; }
.sk-join { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin-bottom: 0.8rem; }
.sk-join .qr-code-box { margin: 0; flex: none; }
.sk-join-side { flex: 1 1 14rem; min-width: 0; }
.sk-join-side .muted { font-size: 0.8rem; margin-top: 0; }
.sk-group-title { font-size: 0.85rem; margin: 0.9rem 0 0.4rem; }
.sk-list .queue-row { flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.sk-name { flex: 1 1 8rem; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
.sk-actions { display: inline-flex; gap: 0.35rem; flex-wrap: wrap; }

.match-no-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin-bottom: 0.25rem; }
.match-sk-btn { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 60%; padding: 0.1rem 0.4rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); cursor: pointer; font: inherit; font-size: 0.68rem; font-weight: 700; }
.match-sk-btn:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
.match-sk-btn.assigned { background: var(--brand-tint); border-color: transparent; color: var(--accent-dark); }
.match-sk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sk-assign-match { margin-top: -0.4rem; overflow-wrap: anywhere; }

/* The courts already added, as tap-to-pick buttons in the "Court" popup of a match card. */
.mc-courts { display: flex; flex-wrap: wrap; gap: 0.45rem; max-height: 11rem; overflow-y: auto; }
.mc-court { padding: 0.45rem 0.85rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.mc-court:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
.mc-court.on { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }
.sk-pick-list { display: flex; flex-direction: column; gap: 0.4rem; max-height: 16rem; overflow-y: auto; }
.sk-pick { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.65rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.sk-pick.selected { border-color: var(--accent-dark); background: var(--brand-tint); font-weight: 700; }
.sk-pick:disabled { opacity: 0.5; cursor: not-allowed; }
.sk-pick-name { overflow-wrap: anywhere; }
.sk-pick-note { font-size: 0.72rem; white-space: nowrap; }

.sk-page { max-width: 480px; margin: 1.2rem auto 3rem; }
.sk-card { padding: 1.2rem 1.2rem 1.4rem; }
.sk-card h1 { font-size: 1.35rem; margin: 0.15rem 0 0.6rem; overflow-wrap: anywhere; }
.sk-eyebrow { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-dark); }
.sk-big-btn { padding: 0.85rem 1rem; font-size: 1rem; }
.sk-status { display: inline-block; margin: 0.2rem 0 0.6rem; padding: 0.45rem 0.8rem; border-radius: 999px; font-weight: 800; font-size: 0.9rem; }
.sk-status.pending { background: #fff3cd; color: #8a6100; }
.sk-status.ok { background: var(--brand-tint); color: var(--accent-dark); }
.sk-status.bad { background: #fdeceb; color: #a3341f; }
.sk-match-meta { margin-top: -0.3rem; }
.sk-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.6rem; align-items: stretch; margin: 0.8rem 0; }
.sk-team { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 0.7rem; border-radius: 14px; color: #fff; min-width: 0; }
.sk-team.a { background: #0d47a1; }
.sk-team.b { background: #b71c1c; }
.sk-team-label { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.sk-player { font-weight: 700; font-size: 0.95rem; overflow-wrap: anywhere; }
.sk-vs { align-self: center; font-weight: 800; color: var(--muted); font-size: 0.8rem; }
.sk-note { font-size: 0.8rem; margin-bottom: 0; }

/* ---- Scorekeeper scoreboard (phone): dark, big tap targets ---- */
.sb { background: #0b0b0b; color: #fff; border-radius: 20px; padding: 0.9rem 0.8rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; user-select: none; -webkit-tap-highlight-color: transparent; }
.sb button { font: inherit; cursor: pointer; }
.sb-head { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; color: #9a9a9a; }
.sb-muted { color: #9a9a9a; margin: 0; font-size: 0.85rem; }
.sb-tiny { font-size: 0.74rem; }
.sb-center { text-align: center; }
.sb-title { font-size: 1.05rem; margin: 0.3rem 0 0; color: #fff; }
.sb-note { background: #4a3500; color: #ffd466; padding: 0.55rem 0.7rem; border-radius: 10px; font-size: 0.82rem; font-weight: 600; }
.sb-error { background: #4a1212; color: #ffb4b4; padding: 0.55rem 0.7rem; border-radius: 10px; font-size: 0.82rem; font-weight: 600; }

.team-a { --team: #0d47a1; --team-light: #1976d2; }
.team-b { --team: #b71c1c; --team-light: #d32f2f; }

.sb-pick-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.sb-team-pick { padding: 0.9rem 0.5rem; border-radius: 14px; border: 2px solid transparent; background: #1c1c1c; color: #fff; font-weight: 800; font-size: 1rem; }
.sb-team-pick.selected { background: var(--team); border-color: #fff; }

.sb-setup-team { background: #161616; border-left: 4px solid var(--team-light); border-radius: 12px; padding: 0.65rem 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.sb-setup-label { font-weight: 800; font-size: 0.85rem; }
.sb-setup-player { display: flex; align-items: center; gap: 0.5rem; }
.sb-star { flex: 1; min-width: 0; text-align: left; padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid #333; background: #1f1f1f; color: #ddd; font-weight: 700; overflow-wrap: anywhere; }
.sb-star.on { border-color: #ffd54a; color: #fff; background: #2b2610; }
.sb-side { padding: 0.7rem 0.8rem; border-radius: 10px; border: 1px solid #333; background: #1f1f1f; color: #ddd; font-weight: 800; min-width: 4.6rem; }
.sb-side.right { background: #123a1f; border-color: #2e7d46; color: #9ff0b5; }
.sb-start { margin-top: 0.4rem; padding: 1rem; border: none; border-radius: 14px; background: #7cb342; color: #0b0b0b; font-weight: 900; font-size: 1.05rem; }

.sb-board { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; background: #1c1c1c; border-radius: 18px; padding: 0.6rem; }
.sb-panel { background: var(--team); border-radius: 14px; padding: 0.65rem 0.6rem 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; border: 3px solid transparent; }
.sb-panel.serving { border-color: #ffe14d; }
.sb-panel-name { text-align: center; font-weight: 900; font-size: 1.05rem; }
.sb-panel-players { display: flex; flex-direction: column; gap: 0.2rem; }
.sb-panel-player { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-weight: 600; opacity: 0.85; min-width: 0; }
.sb-panel-player.is-server { opacity: 1; font-weight: 800; }
.sb-pos { flex: none; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: rgba(255, 255, 255, 0.2); display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 900; }
.sb-pname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-score-row { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.sb-score { font-size: 4rem; font-weight: 900; line-height: 1.05; }
.sb-serve-chip { background: #ffe14d; color: #111; border-radius: 8px; padding: 0.15rem 0.4rem; font-weight: 900; font-size: 0.95rem; }

.sb-info { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem 0.8rem; background: #232323; border: 1px solid #333; border-radius: 12px; padding: 0.6rem 0.7rem; font-size: 0.9rem; }
.sb-info b { color: #bbb; font-weight: 600; }
.sb-serverno { color: #ffe14d; font-weight: 800; }
.sb-over { background: #123a1f; color: #9ff0b5; border-radius: 14px; padding: 1rem; text-align: center; font-weight: 900; font-size: 1.15rem; }

.sb-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.sb-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; min-height: 11rem; padding: 0.8rem 0.5rem; border: none; border-radius: 18px; color: #fff; background: var(--team-light); }
.sb-btn.sideout { background: var(--team); opacity: 0.92; }
.sb-btn:active { transform: scale(0.98); }
.sb-btn-icon { font-size: 2.6rem; line-height: 1; width: 4rem; height: 4rem; display: inline-flex; align-items: center; justify-content: center; border: 3px solid #fff; border-radius: 50%; }
.sb-btn.sideout .sb-btn-icon { border-color: rgba(255, 255, 255, 0.6); }
.sb-btn-label { text-align: center; font-weight: 900; font-size: 1.05rem; line-height: 1.25; }
.sb-btn-label small { font-weight: 700; opacity: 0.8; font-size: 0.78rem; }

.sb-bar { display: flex; justify-content: space-around; gap: 0.3rem; background: #232323; border-radius: 16px; padding: 0.5rem 0.4rem; }
.sb-bar-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; background: transparent; border: none; color: #fff; font-size: 1.3rem; padding: 0.4rem 0.2rem; }
.sb-bar-btn span { font-size: 0.72rem; font-weight: 700; }
.sb-bar-btn:disabled { color: #666; cursor: not-allowed; }
.sb-bar-btn.submit:not(:disabled) { color: #9ff0b5; }
.sb-modal h3 { margin-top: 0; }
.sk-submitted { display: flex; flex-direction: column; gap: 0.15rem; background: var(--brand-tint); border-radius: 12px; padding: 0.7rem 0.8rem; margin: 0.2rem 0 0.6rem; font-size: 0.88rem; }

/* ---- Scorekeeper review (organizer): badge on the match card, panel badge, review pop-up ---- */
.match-review-btn { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.45rem; border: 1px solid #f0a000; border-radius: 999px; background: #fff3cd; color: #8a6100; cursor: pointer; font: inherit; font-size: 0.68rem; font-weight: 800; animation: sk-review-pulse 2s ease-in-out infinite; }
.match-review-btn:hover { background: #ffe9a3; }
@keyframes sk-review-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 160, 0, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(240, 160, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .match-review-btn { animation: none; } }
.sk-review-badge { margin-left: 0.4rem; font-size: 0.68rem; vertical-align: middle; background: #fff3cd; color: #8a6100; }
.sk-auto-row { margin-bottom: 0.4rem; }
.sk-review-scores .field { min-width: 0; }
.sk-review-scores .field label { overflow-wrap: anywhere; }

/* Scorekeeper shortcut on the tournament Categories page: one row per category with its own QR code */
.sk-links-list { gap: 0.4rem; }
.sk-link-item { list-style: none; border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.7rem; background: var(--surface); }
.sk-link-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.6rem; }
.sk-link-name { flex: 1 1 8rem; min-width: 0; font-weight: 700; font-size: 0.86rem; overflow-wrap: anywhere; }
.sk-link-actions { display: inline-flex; align-items: center; gap: 0.35rem; }
.sk-link-detail { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-start; margin-top: 0.6rem; }
.sk-link-detail .qr-code-box { margin: 0; flex: none; }

/* Pop-up when a new scorekeeper asks to join (organizer pages) */
.sk-toast { position: fixed; top: 1rem; right: 1rem; z-index: 1200; display: flex; gap: 0.7rem; align-items: flex-start; max-width: 22rem; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--accent-dark); border-radius: 14px; box-shadow: 0 10px 28px rgba(32, 29, 24, 0.25); animation: sk-toast-in 0.25s ease-out; }
.sk-toast-icon { font-size: 1.3rem; line-height: 1.2; }
.sk-toast-body { min-width: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.sk-toast-cat { font-size: 0.78rem; }
.sk-toast-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
@keyframes sk-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .sk-toast { left: 0.75rem; right: 0.75rem; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .sk-toast { animation: none; } }

/* ---- Scorekeepers: more noticeable match icon, on/off switch, clearer picker ---- */
.match-sk-btn { padding: 0.18rem 0.55rem; border: 1px solid #5aa9f2; background: #e3f2ff; color: #0d47a1; box-shadow: 0 1px 3px rgba(13, 71, 161, 0.18); }
.match-sk-btn svg { width: 15px; height: 15px; }
.match-sk-btn:hover { background: #cde8ff; border-color: #1976d2; color: #0a3a85; }
.match-sk-btn.assigned { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.match-sk-btn.assigned:hover { background: #256b29; }
.btn-scorekeepers { border-color: #5aa9f2; background: #e3f2ff; color: #0d47a1; }
.btn-scorekeepers:hover { background: #cde8ff; }

/* Admin tournament view: the show / hide switch for the category on the public pages. */
.atv-vis { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.6rem; padding: 0.55rem 0.8rem; max-width: 36rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface, #fff); }
.atv-vis-text { display: grid; gap: 0.1rem; min-width: 0; }
.atv-vis-text small { color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.atv-vis-text small.is-hidden { color: #8a5a00; }
.sk-enable { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; margin-right: 0.4rem; flex: none; white-space: nowrap; }
/* The header row (title, "Use scorekeepers" On/Off switch, collapse arrow) wraps as a whole on a narrow card instead of squeezing the label onto two lines. */
.scorekeeper-panel .panel-title, .sk-embedded .panel-title { flex-wrap: wrap; gap: 0.35rem 0.6rem; }
.scorekeeper-panel .panel-title h2, .sk-embedded .panel-title h2 { margin: 0; line-height: 1.2; }
.sk-head-actions { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; flex: none; }
.sk-enable .muted, .sk-enable-label { white-space: nowrap; line-height: 1.2; }
.sk-enable-label { font-size: 0.72rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sk-enable-label.on { color: var(--accent-dark); }

/* Picker: nothing is preselected - a selected row is unmistakable (filled radio + tint), hover is only a border. */
.sk-pick::before { content: ""; flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid #b9b3a6; background: var(--surface); }
.sk-pick { justify-content: flex-start; }
.sk-pick-name { flex: 1; min-width: 0; }
.sk-pick:not(:disabled):not(.selected):hover { background: var(--surface); border-color: var(--accent-dark); }
.sk-pick.selected::before { border-color: var(--accent-dark); background: radial-gradient(circle, var(--accent-dark) 0 45%, var(--surface) 50%); }

/* Scorekeeper controls on playoff bracket cards: float over the top edge so the card height and connector lines are untouched */
.bracket-match-wrap { position: relative; }
.match-sk-floating { position: absolute; top: -0.85rem; left: 0.5rem; z-index: 3; display: flex; gap: 0.3rem; }
.match-sk-floating .match-sk-btn { max-width: 12rem; }

/* Scorekeepers popup (opened from the category page header) */
.sk-modal { max-width: 42rem; width: 100%; max-height: 90vh; overflow-y: auto; }
.sk-embedded .panel-title { align-items: center; }
.sk-embedded .sk-close { margin-left: 0.2rem; }
.btn-sk-badge { display: inline-block; margin-left: 0.35rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: #fff3cd; color: #8a6100; font-size: 0.68rem; font-weight: 800; }
.btn-sk-badge.review { background: #ffe0b2; color: #8a4b00; }


/* Scored-by record on a finished match (grey-green, not an assign button) + its details pop-up */
.match-sk-btn.scored { background: #eef3ee; border-color: #b7c9b7; color: #3d5a3d; box-shadow: none; }
.match-sk-btn.scored:hover { background: #e2ebe2; border-color: #7da07d; color: #2c452c; }
.sk-history-row { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.35rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.sk-history-scores { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0.8rem 0 0.4rem; }
.sk-history-block { background: var(--page-bg); border-radius: 10px; padding: 0.6rem 0.7rem; font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; overflow-wrap: anywhere; }
.sk-history-block b { margin-left: 0.3rem; }
.sk-history-status { margin: 0.4rem 0 0; font-size: 0.82rem; font-weight: 700; }
.sk-history-status.same { color: var(--accent-dark); }
.sk-history-status.edited { color: #8a4b00; }
@media (max-width: 480px) { .sk-history-scores { grid-template-columns: 1fr; } }

/* Scoreboard: full-screen mode (fills the phone screen over the site header) and its toggle */
.sb .sb-fs-btn { margin-left: auto; padding: 0.25rem 0.7rem; border: 1px solid #444; border-radius: 999px; background: #1c1c1c; color: #ddd; font-size: 0.72rem; font-weight: 700; }
.sb-head { flex-wrap: wrap; align-items: center; }
.sb.sb-full { position: fixed; inset: 0; z-index: 50; margin: 0; border-radius: 0; overflow-y: auto; box-sizing: border-box; min-height: 100vh; min-height: 100dvh;
    padding: max(0.8rem, env(safe-area-inset-top)) max(0.8rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(0.8rem, env(safe-area-inset-left)); }
.sb.sb-full .sb-btn { min-height: 12rem; }

/* Manual switch court: small, tucked away, hold-to-confirm */
.sb .sb-manual-switch { align-self: center; margin-top: 0.4rem; padding: 0.3rem 0.8rem; border: none; background: transparent; color: #666; font-size: 0.7rem; font-weight: 600; text-decoration: underline; }
.sb-hold { position: relative; overflow: hidden; }
.sb-hold .sb-hold-fill { position: absolute; inset: 0; width: 0; background: rgba(124, 179, 66, 0.55); }
.sb-hold.holding .sb-hold-fill { width: 100%; transition: width 0.9s linear; }
.sb-hold .sb-hold-text { position: relative; }

/* Scoreboard: the score call (e.g. 5-4-1) sits over the serving team's box */
.sb-col { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.sb-call-slot { min-height: 2.9rem; display: flex; align-items: flex-end; justify-content: center; gap: 0.4rem; }
.sb .sb-call { flex: 1 1 auto; min-width: 0; text-align: center; background: var(--team); color: #fff; border: 3px solid #ffe14d; border-radius: 12px; padding: 0.1rem 0.4rem; font-size: 1.9rem; font-weight: 900; line-height: 1.25; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.sb-col .sb-panel { flex: 1; }

/* Courts: chip beside the match number, "Playing now" chip, and the courts manager in the Scorekeepers popup */
.match-no-row { flex-wrap: nowrap; min-height: 1.75rem; }
.match-sk-group { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 0.3rem; min-width: 0; margin-left: auto; }
.match-sk-group > * { flex: 0 0 auto; }
.match-sk-group > .match-sk-btn, .match-sk-group > .match-review-btn { flex: 0 1 auto; min-width: 3.6rem; }
.match-court-chip { display: inline-flex; align-items: center; padding: 0.12rem 0.5rem; border-radius: 999px; background: #1f2a44; color: #fff; font-size: 0.68rem; font-weight: 800; white-space: nowrap; }
.match-playing-ball { animation: playing-bounce 0.9s ease-in-out infinite; transform-origin: center bottom; }
@keyframes playing-bounce { 0%, 100% { transform: translateY(0) scale(1, 1); } 40% { transform: translateY(-3px) scale(0.95, 1.05); } 60% { transform: translateY(-3px); } 85% { transform: translateY(0) scale(1.1, 0.88); } }
@media (prefers-reduced-motion: reduce) { .match-playing-ball { animation: none; } }
.match-sk-floating { flex-wrap: wrap; max-width: calc(100% - 1rem); }

.sk-courts { margin: 0.6rem 0 0.8rem; }
.sk-courts-hint { font-size: 0.8rem; margin: 0 0 0.5rem; }
.sk-court-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
.sk-court-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.2rem 0.3rem 0.2rem 0.7rem; border-radius: 999px; background: #1f2a44; color: #fff; font-size: 0.82rem; font-weight: 700; }
.sk-court-x { border: none; background: rgba(255, 255, 255, 0.18); color: #fff; width: 1.3rem; height: 1.3rem; border-radius: 50%; cursor: pointer; font-size: 0.65rem; line-height: 1; }
.sk-court-x:hover { background: rgba(255, 255, 255, 0.35); }
.sk-court-add { display: flex; gap: 0.4rem; align-items: center; }
.sk-court-add input { flex: 1; min-width: 0; padding: 0.4rem 0.6rem; font-size: 0.85rem; border-radius: 7px; }

.sk-court-pick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sk-court-opt { padding: 0.45rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.sk-court-opt:disabled { opacity: 0.5; cursor: not-allowed; }
.sk-court-opt.selected { background: #1f2a44; border-color: #1f2a44; color: #fff; }
.sk-court-busy { font-weight: 500; opacity: 0.75; font-size: 0.75rem; }

/* Organizer page: wider round robin cards, so the match-number row has room for the court, scorekeeper and "Playing now" chips */
.round-robin-grid.rr-wide { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.match-sk-group > .match-sk-btn { max-width: 11rem; }

/* "Playing now": the bottom bar of the card turns into a lively green strip (same height as "+ Enter score", so nothing shifts) */
.bracket-score-hint.playing { display: flex; align-items: center; justify-content: center; gap: 0.4rem; background: linear-gradient(90deg, #2e9e55, #56c279, #2e9e55); background-size: 200% 100%; color: #fff; animation: playing-shimmer 2.4s linear infinite; }
.bracket-score-hint.playing .match-playing-ball { color: #fff; }
@keyframes playing-shimmer { from { background-position: 0 0; } to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .bracket-score-hint.playing { animation: none; } }

/* Round robin cards are only as tall as their content (the playoff bracket's equal-height reserve would leave empty space here).
   The "Click to edit" strip that grows a card on hover would also push the next row down, so it's a tooltip in this grid instead. */
.round-robin-grid .bracket-match { min-height: 0; }
.round-robin-grid .bracket-match.completed.editable:hover::after { content: none; }

/* Scorekeepers off: typed-court chip and the start/stop toggle beside the match number */
.match-court-btn { border: 1px dashed transparent; gap: 0.25rem; cursor: pointer; font: inherit; font-size: 0.68rem; font-weight: 800; }
.match-court-btn.empty { background: transparent; color: var(--muted); border-color: var(--line); }
.match-court-btn.empty:hover { color: var(--ink); border-color: var(--ink); }
.match-start-btn { display: inline-flex; align-items: center; justify-content: center; width: 1.55rem; height: 1.55rem; padding: 0; border-radius: 999px; border: 1px solid #2e9e55; background: transparent; color: #2e9e55; cursor: pointer; }
.match-start-btn:hover { background: #2e9e55; color: #fff; }
.match-start-btn.on { background: #2e9e55; color: #fff; }

/* Before the first point: swap ends. Sits right of the score call, in Team B's column (it changes sides with Team B). */
.sb .sb-start-switch { flex: 0 0 auto; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin-left: auto; padding: 0 0.55rem; border: 2px solid rgba(255,255,255,0.55); border-radius: 12px; background: rgba(255,255,255,0.12); color: #fff; font-size: 0.62rem; font-weight: 800; line-height: 1.1; cursor: pointer; }
.sb .sb-start-switch span:first-child { font-size: 1.15rem; }
.sb .sb-start-switch:active { background: rgba(255,255,255,0.28); }


/* Playoff cards: a slim header row inside the card for the court / start / scorekeeper controls. It is on every card of the bracket
   (even empty ones) so all cards stay the same height and the connector lines still meet at the card centres. */
.bracket-head { display: flex; align-items: center; justify-content: flex-start; gap: 0.3rem; min-height: 1.7rem; padding: 0.15rem 0.5rem; border-bottom: 1px solid var(--line); background: rgba(0, 0, 0, 0.025); }
.bracket-head > * { flex: 0 0 auto; }
.bracket-head .match-sk-btn, .bracket-head .match-review-btn { flex: 0 1 auto; min-width: 0; max-width: 11rem; }
.bracket-match.with-head { min-height: 7.6rem; }
.bracket-head .match-start-btn { margin-left: auto; }
.bracket-match.championship .bracket-head { padding-right: 1.9rem; }
/* Lighter, smaller start button */
.match-start-btn { width: 1.25rem; height: 1.25rem; border-color: #9bd3ae; color: #5fb07a; }
.match-start-btn svg { width: 10px; height: 10px; }
.match-start-btn:hover { background: #5fb07a; border-color: #5fb07a; color: #fff; }
.match-start-btn.on { background: #5fb07a; border-color: #5fb07a; color: #fff; }

/* The bracket is about the players: the court chip is a light, quiet label rather than a dark pill... */
.match-court-chip { background: #f2f5f3; color: #5f6e64; border: 1px solid #e1e7e3; font-weight: 700; }
.match-court-btn:not(.empty):hover { background: #e8eeea; border-color: #c9d3cc; color: #3f4d44; }
/* ...and in the playoff header the scorekeeper icon goes to the right (the start button, when there is one, stays beside it) */
.bracket-head .match-sk-btn, .bracket-head .match-review-btn { margin-left: auto; }
.bracket-head .match-start-btn { margin-left: auto; }
.bracket-head .match-sk-btn ~ .match-start-btn, .bracket-head .match-review-btn ~ .match-start-btn { margin-left: 0; }

/* Playoff header: the scorekeeper icon is a smaller, softer touch so the players stay the focus */
.bracket-head .match-sk-btn { padding: 0.06rem 0.4rem; gap: 0.2rem; font-size: 0.66rem; box-shadow: none; border: 1px solid #bcdcf8; background: #f0f7ff; color: #4f84bd; }
.bracket-head .match-sk-btn svg { width: 12px; height: 12px; }
.bracket-head .match-sk-btn:hover { background: #e3f1ff; border-color: #8fc2ee; color: #2f6aa8; }
.bracket-head .match-sk-btn.assigned { background: #e8f4e9; border-color: #bfdcc1; color: #3f7f45; }
.bracket-head .match-sk-btn.assigned:hover { background: #dcedde; border-color: #9cc6a0; color: #2f6a35; }
.bracket-head .match-sk-btn.scored { background: #f1f5f1; border-color: #d3ddd3; color: #5f7a5f; }

/* Centered pop-ups on the tournament setup page: "Tournament saved" and the unsaved-changes warning */
.saved-modal { text-align: center; max-width: 380px; }
.saved-modal h3 { margin: 0.6rem 0 0.2rem; }
.saved-modal-icon { width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e3f4e8; color: #2e9e55; animation: saved-pop 0.35s ease-out; }
.saved-modal-icon.warn { background: #fff1d6; color: #c77700; }
@keyframes saved-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .saved-modal-icon { animation: none; } }

/* Tournament setup reuses the compact venue-setup scale above; a few extras for what is specific to this page */
.tournament-setup .settings-row { padding-top: 0.4rem; padding-bottom: 0.4rem; gap: 0.6rem; }
.tournament-setup .stepper-btn { width: 1.9rem; height: 1.9rem; }
.tournament-setup .queue-row .player-name-input { padding: 0.3rem 0.5rem; }
.tournament-setup .panel-title { margin-bottom: 0.4rem; }
.tournament-setup .upgrade-inline-hint { margin: 0.3rem 0; }

/* Category card: the "visible to the public" switch */
.group-cat-public { display: flex; align-items: center; gap: 0.5rem; margin: 0.45rem 0 0.2rem; font-size: 0.8rem; }

/* The banner's "Champion" word: a later generic .champion-label rule had turned it a dim grey on the dark banner - make it bright and big */
.champion-banner .champion-label {
    display: block;
    color: #ffd84d;
    font-size: 1.25rem;
    font-weight: 900;
    letter-spacing: 0.28em;
    line-height: 1.2;
    margin-top: 0.7rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.55), 0 0 14px rgba(255, 216, 77, 0.55);
}


/* ---- Dashboard: compact, colourful tiles with line icons ---- */
.dashboard-page { max-width: 1100px; }
.dash-hero h1 { font-size: 1.45rem; margin: 0; }
.dash-hero p { margin: 0.15rem 0 0; font-size: 0.88rem; }
.dash-heading { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 1.1rem 0 0.45rem; }
.dash-note { margin-top: 1rem; font-size: 0.85rem; }

/* tone palette: --a / --b are the icon gradient, --soft is the faint tile wash */
.tone-sky    { --a: #38bdf8; --b: #0284c7; --soft: rgba(56, 189, 248, 0.10); }
.tone-amber  { --a: #fbbf24; --b: #d97706; --soft: rgba(251, 191, 36, 0.12); }
.tone-teal   { --a: #2dd4bf; --b: #0f766e; --soft: rgba(45, 212, 191, 0.10); }
.tone-lime   { --a: #a3e635; --b: #4d7c0f; --soft: rgba(163, 230, 53, 0.13); }
.tone-rose   { --a: #fb7185; --b: #be123c; --soft: rgba(251, 113, 133, 0.10); }
.tone-violet { --a: #a78bfa; --b: #6d28d9; --soft: rgba(167, 139, 250, 0.11); }
.tone-slate  { --a: #94a3b8; --b: #475569; --soft: rgba(148, 163, 184, 0.12); }
.tone-gold   { --a: #fde047; --b: #ca8a04; --soft: rgba(253, 224, 71, 0.14); }

.dash-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0 0.2rem; }
.dash-stat { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--soft); border: 1px solid color-mix(in srgb, var(--b) 22%, transparent); text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s; }
.dash-stat:hover { transform: translateY(-1px); box-shadow: 0 3px 10px color-mix(in srgb, var(--b) 22%, transparent); }
.dash-stat-num { font-size: 1.1rem; font-weight: 800; color: var(--b); font-variant-numeric: tabular-nums; }
.dash-stat-label { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.dash-stat.alert { animation: dash-pulse 2.2s ease-in-out infinite; }

.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 0.55rem; }
.dash-tile { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; background: linear-gradient(135deg, var(--soft), transparent 70%), var(--surface); border: 1px solid var(--line); border-radius: 12px; text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; animation: dash-in 0.4s ease-out both; animation-delay: calc(var(--i, 0) * 45ms); }
.dash-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 16px color-mix(in srgb, var(--b) 20%, transparent); border-color: color-mix(in srgb, var(--b) 45%, var(--line)); }
.dash-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); box-shadow: 0 3px 8px color-mix(in srgb, var(--b) 35%, transparent); transition: transform 0.2s; }
.dash-tile:hover .dash-icon { transform: rotate(-6deg) scale(1.08); }
.dash-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-title { font-weight: 800; font-size: 0.92rem; line-height: 1.2; }
.dash-desc { color: var(--muted); font-size: 0.76rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-pill { flex: 0 0 auto; min-width: 1.6rem; text-align: center; padding: 0.1rem 0.5rem; border-radius: 999px; font-size: 0.78rem; font-weight: 800; color: var(--b); background: color-mix(in srgb, var(--a) 22%, transparent); }
.dash-pill.alert { color: #fff; background: #e11d48; animation: dash-pulse 2.2s ease-in-out infinite; }

@keyframes dash-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dash-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(225, 29, 72, 0); } }
@media (prefers-reduced-motion: reduce) { .dash-tile, .dash-stat.alert, .dash-pill.alert { animation: none; } .dash-tile:hover, .dash-tile:hover .dash-icon, .dash-stat:hover { transform: none; } }

/* ---- Signed-in header: a short row of everyday links + one profile menu (a bottom tab bar on phones) ---- */
.app-header.member-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(250, 246, 238, 0.98); align-items: center; }
.member-nav { gap: 0.2rem 0.3rem; align-items: center; }
.member-nav a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border-radius: 10px; border-bottom: none; font-weight: 600; }
.member-nav a:hover { background: var(--brand-tint); color: var(--accent-dark); }
.member-nav a.active { background: var(--brand-tint); color: var(--accent-dark); border-bottom: none; }
.nav-ic { position: relative; display: inline-flex; }
.nav-badge { position: absolute; top: -7px; right: -10px; min-width: 1rem; height: 1rem; padding: 0 0.25rem; font-size: 0.62rem; line-height: 1rem; }

.profile-menu { position: relative; margin-left: auto; }
.profile-btn { display: flex; align-items: center; gap: 0.55rem; padding: 0.25rem 0.65rem 0.25rem 0.3rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); transition: border-color 0.15s, box-shadow 0.15s; }
.profile-btn:hover { border-color: var(--accent-dark); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.profile-avatar { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; font-size: 0.72rem; font-weight: 800; flex: 0 0 auto; }
.profile-meta { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; max-width: 11rem; min-width: 0; }
.profile-name { font-size: 0.82rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.profile-plan { font-size: 0.66rem; font-weight: 700; color: var(--muted); }
.profile-plan.trial { color: #b45309; }
.profile-plan.paid { color: var(--accent-dark); }
.profile-chevron { color: var(--muted); flex: 0 0 auto; }
.profile-backdrop { position: fixed; inset: 0; z-index: 19; }
.profile-dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 15.5rem; z-index: 20; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); padding: 0.35rem; animation: pm-in 0.12s ease-out; }
.profile-dropdown a, .profile-dropdown button { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.5rem 0.65rem; border: none; background: none; border-radius: 8px; font: inherit; font-size: 0.86rem; font-weight: 600; color: var(--ink); text-decoration: none; cursor: pointer; text-align: left; }
.profile-dropdown a:hover, .profile-dropdown button:hover { background: var(--brand-tint); color: var(--accent-dark); }
.profile-dropdown form { margin: 0; }
.pm-ic { display: inline-flex; color: var(--muted); }
.profile-dropdown a:hover .pm-ic, .profile-dropdown button:hover .pm-ic { color: var(--accent-dark); }
.pm-sep { height: 1px; background: var(--line); margin: 0.3rem 0.2rem; }
.pm-tag { margin-left: auto; font-size: 0.66rem; font-weight: 800; background: #fff3d6; color: #92400e; padding: 0.05rem 0.45rem; border-radius: 999px; }
.profile-dropdown .badge-count { margin-left: auto; }
@keyframes pm-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .profile-dropdown { animation: none; } }

@media (max-width: 720px) {
    .member-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; justify-content: space-around; gap: 0; background: rgba(255, 255, 255, 0.98); border-top: 1px solid var(--line); padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom)); max-width: 100%; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); }
    .member-nav a { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 0.12rem; padding: 0.3rem 0.15rem; border-radius: 8px; justify-content: center; font-size: 0.66rem; }
    .member-nav .nav-label { font-size: 0.66rem; }
    body:has(.member-nav) .app-main { padding-bottom: 5rem; }
    .profile-meta, .profile-chevron { display: none; }
    .profile-btn { padding: 0.2rem; }
}

/* ---- Dashboard v2: attention first, then quick actions, live items, tiles and a checklist ---- */
.dash-attn { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(251, 113, 133, 0.10)); border: 1px solid rgba(217, 119, 6, 0.28); }
.dash-attn-title { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #92400e; margin-bottom: 0.45rem; }
.dash-attn-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dash-attn-item { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem 0.4rem 0.45rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-size: 0.86rem; font-weight: 700; transition: transform 0.15s, box-shadow 0.15s; }
.dash-attn-item:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.dash-attn-count { min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.8rem; font-weight: 800; background: linear-gradient(135deg, var(--a), var(--b)); }
.dash-attn-go { color: var(--muted); font-size: 1.1rem; line-height: 1; }
.dash-clear { margin-top: 0.8rem; padding: 0.55rem 0.9rem; border-radius: 12px; background: rgba(163, 230, 53, 0.14); color: var(--accent-dark); font-size: 0.86rem; font-weight: 700; }

.dash-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }
.dash-action { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.95rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.9rem; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.dash-action:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-color: var(--accent-dark); }
.dash-action-ic { display: inline-flex; color: var(--accent-dark); }
.dash-action.primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border-color: transparent; }
.dash-action.primary .dash-action-ic { color: #fff; }

.dash-live { display: flex; flex-direction: column; gap: 0.45rem; }
.dash-live-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.8rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.dash-live-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.dash-live-text .muted { font-size: 0.76rem; }

.dash-start { margin-top: 1.2rem; padding: 0.8rem 1rem; border-radius: 14px; background: var(--surface); border: 1px dashed var(--line); }
.dash-start-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.9rem; }
.dash-start-bar { height: 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.07); margin: 0.5rem 0 0.6rem; overflow: hidden; }
.dash-start-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); transition: width 0.4s; }
.dash-start ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.3rem 1rem; }
.dash-start li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.86rem; }
.dash-start li.done { color: var(--muted); text-decoration: line-through; }
.dash-check { width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 800; color: #fff; flex: 0 0 auto; }
.dash-start li.done .dash-check { background: var(--accent-dark); border-color: var(--accent-dark); }
.dash-start a { font-weight: 700; color: var(--accent-dark); text-decoration: none; }
.dash-start a:hover { text-decoration: underline; }

/* ---- Player Roster: compact rows, small controls, readable width ---- */
.roster-head h1 { font-size: 1.4rem; margin: 0; }
.roster-head .btn { font-size: 0.82rem; padding: 0.4rem 0.85rem; }
.roster-archived { font-size: 0.82rem; }
.roster-card { max-width: 980px; border-radius: 12px; overflow: hidden; }
.roster-card .player-table { font-size: 0.85rem; }
.roster-card .player-table th { padding: 0.4rem 0.7rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); background: var(--page-bg); }
.roster-card .player-table td { padding: 0.28rem 0.7rem; vertical-align: middle; }
.roster-card .roster-name { font-weight: 700; white-space: nowrap; }
.roster-card .roster-notes { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; }
.roster-card td:last-child { white-space: nowrap; text-align: right; }
.roster-card .btn-sm { font-size: 0.72rem; padding: 0.2rem 0.55rem; }

/* The close (x) on the "what do you use it for" banner */
.court-prompt { position: relative; }
.court-prompt-close { position: absolute; top: 0.35rem; right: 0.5rem; width: 1.6rem; height: 1.6rem; border: none; background: transparent; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: 50%; }
.court-prompt-close:hover { background: rgba(0, 0, 0, 0.07); color: var(--ink); }

/* The link for the account's main job (Venues for a court owner, Tournaments for an organizer) stays highlighted */
.member-nav a.nav-focus:not(.active) { color: var(--accent-dark); font-weight: 700; }
.member-nav a.nav-focus .nav-ic { color: var(--accent-dark); }

/* The tile for the account's main job (Venues for a court owner, Tournaments for an organizer) stands out */
.dash-tile.feature { border-color: color-mix(in srgb, var(--b) 55%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--a) 22%, transparent), transparent 75%), var(--surface); box-shadow: 0 4px 14px color-mix(in srgb, var(--b) 18%, transparent); }
.dash-tile.feature .dash-icon { width: 46px; height: 46px; }
.dash-tile.feature .dash-title { font-size: 1rem; }

/* Smaller quick-action buttons on the Dashboard */
.dash-actions { gap: 0.4rem; margin-top: 0.65rem; }
.dash-action { gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 9px; font-size: 0.8rem; }
.dash-action-ic svg { width: 15px; height: 15px; }

/* ---- Dashboard palette v3: stays inside the brand colours (charcoal + lime/green + warm cream) instead of a rainbow ---- */
.tone-sky    { --a: #a5c639; --b: #5d8b37; --soft: rgba(165, 198, 57, 0.10); }  /* lime */
.tone-lime   { --a: #a5c639; --b: #5d8b37; --soft: rgba(165, 198, 57, 0.10); }
.tone-teal   { --a: #8fb06a; --b: #3f6b3a; --soft: rgba(143, 176, 106, 0.10); } /* sage green */
.tone-rose   { --a: #8fb06a; --b: #3f6b3a; --soft: rgba(143, 176, 106, 0.10); }
.tone-amber  { --a: #d6c28a; --b: #7a6420; --soft: rgba(214, 194, 138, 0.14); } /* warm sand - the one accent */
.tone-gold   { --a: #d6c28a; --b: #7a6420; --soft: rgba(214, 194, 138, 0.14); }
.tone-violet { --a: #7d8a7c; --b: #2a312c; --soft: rgba(125, 138, 124, 0.10); } /* charcoal */
.tone-slate  { --a: #7d8a7c; --b: #2a312c; --soft: rgba(125, 138, 124, 0.10); }

/* Icon chips: a soft tint with a dark icon - the solid gradient is reserved for the main job's tile and for hover */
.dash-icon { color: var(--b); background: linear-gradient(135deg, color-mix(in srgb, var(--a) 26%, #fff), color-mix(in srgb, var(--a) 10%, #fff)); border: 1px solid color-mix(in srgb, var(--a) 35%, transparent); box-shadow: none; }
.dash-tile:hover .dash-icon, .dash-tile.feature .dash-icon { color: #fff; background: linear-gradient(135deg, var(--a), var(--b)); border-color: transparent; box-shadow: 0 3px 8px color-mix(in srgb, var(--b) 28%, transparent); }
.dash-tile { background: linear-gradient(135deg, var(--soft), transparent 70%), var(--surface); }
.dash-attn { background: linear-gradient(135deg, rgba(214, 194, 138, 0.20), rgba(165, 198, 57, 0.08)); border-color: rgba(122, 100, 32, 0.25); }
.dash-attn-title { color: #7a6420; }
.dash-attn-count { background: linear-gradient(135deg, var(--a), var(--b)); }

/* ---- Player Roster v2: search + skill-group filters + modern rows ---- */
.roster-head .meta { font-size: 0.82rem; }
.roster-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.roster-search { position: relative; flex: 1 1 260px; display: flex; align-items: center; margin: 0; }
.roster-search svg { position: absolute; left: 0.75rem; color: var(--muted); pointer-events: none; }
.roster-search input { width: 100%; padding: 0.5rem 2rem 0.5rem 2.2rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: 0.88rem; }
.roster-search input:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.25); }
.roster-clear { position: absolute; right: 0.4rem; width: 1.5rem; height: 1.5rem; border: none; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.roster-clear:hover { background: rgba(0, 0, 0, 0.07); color: var(--ink); }
.roster-sort { padding: 0.45rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: 0.82rem; }
.roster-archived { margin: 0; font-size: 0.82rem; }

.roster-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.roster-pill { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--ink); cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.roster-pill span { font-size: 0.72rem; font-weight: 800; padding: 0 0.4rem; border-radius: 999px; background: rgba(0, 0, 0, 0.06); color: var(--muted); }
.roster-pill:hover { border-color: var(--accent-dark); }
.roster-pill.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.roster-pill.active span { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* skill groups, all inside the brand palette */
.lvl-beginners   { --lc: #8fb06a; --ld: #3f6b3a; }
.lvl-novice      { --lc: #a5c639; --ld: #5d7f1b; }
.lvl-intermediate{ --lc: #5d8b37; --ld: #2f5128; }
.lvl-advanced    { --lc: #3a4339; --ld: #1d231d; }
.lvl-unrated     { --lc: #b8b9ae; --ld: #6a6c62; }

.roster-list { display: flex; flex-direction: column; gap: 0.4rem; max-width: 980px; }
.roster-row { display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s; }
.roster-row:hover { border-color: color-mix(in srgb, var(--accent-dark) 45%, var(--line)); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06); }
.roster-row.archived { opacity: 0.62; }
.roster-avatar { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 800; color: var(--ld); background: color-mix(in srgb, var(--lc) 24%, #fff); border: 1px solid color-mix(in srgb, var(--lc) 45%, transparent); }
.roster-main { flex: 1; min-width: 0; }
.roster-name-line { display: flex; align-items: center; gap: 0.5rem; }
.roster-row .roster-name { font-weight: 800; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-tag { font-size: 0.64rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; padding: 0.05rem 0.4rem; border-radius: 999px; background: rgba(0, 0, 0, 0.07); color: var(--muted); }
.roster-row .roster-notes { max-width: none; font-size: 0.78rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.roster-level { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; min-width: 4.2rem; padding: 0.15rem 0.5rem; border-radius: 10px; background: color-mix(in srgb, var(--lc) 18%, #fff); color: var(--ld); font-weight: 800; font-size: 0.95rem; line-height: 1.1; }
.roster-level small { font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
.roster-actions { flex: 0 0 auto; display: inline-flex; gap: 0.25rem; }
.roster-act { width: 1.9rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: background 0.15s, color 0.15s; }
.roster-act:hover { background: var(--brand-tint); color: var(--accent-dark); }
.roster-act.danger:hover { background: rgba(225, 29, 72, 0.1); color: #be123c; }
.roster-foot { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.6rem; font-size: 0.8rem; }

@media (max-width: 560px) {
    .roster-level small { display: none; }
    .roster-level { min-width: 2.6rem; }
    .roster-row { gap: 0.55rem; padding: 0.45rem 0.6rem; }
}

/* The counts in "Needs your attention" are alerts - same red as the other pending badges */
.dash-attn-count { background: #e11d48; color: #fff; box-shadow: 0 0 0 0 rgba(225, 29, 72, 0.35); animation: dash-pulse 2.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .dash-attn-count { animation: none; } }

/* ---- Get started: book a court vs run a club ---- */
.gs-page { max-width: 760px; margin: 2rem auto; text-align: center; }
.gs-page h1 { margin: 0 0 0.2rem; font-size: 1.7rem; }
.gs-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin-top: 1.4rem; text-align: left; }
.gs-choice { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.3rem 1.3rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; }
.gs-choice:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1); border-color: var(--accent-dark); }
.gs-choice-ic { width: 48px; height: 48px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.gs-choice-title { font-weight: 800; font-size: 1.05rem; margin-top: 0.3rem; }
.gs-choice-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.gs-choice-go { margin-top: 0.5rem; font-weight: 800; font-size: 0.88rem; color: var(--accent-dark); }
.gs-login { margin-top: 1.4rem; font-size: 0.88rem; }
.gs-booknote { margin: -0.3rem 0 0.8rem; padding: 0.45rem 0.7rem; border-radius: 10px; background: var(--brand-tint); color: var(--ink); font-size: 0.85rem; }
.gs-booknote a { font-weight: 800; color: var(--accent-dark); }

/* "Book a Court" beside Get Started in the visitor header */
.header-cta { display: inline-flex; align-items: center; gap: 0.5rem; }
.header-book-btn { font-weight: 700; }
@media (max-width: 480px) { .header-book-btn { padding: 0.4rem 0.65rem; font-size: 0.82rem; } }

/* Visitor header: Log in sits between Book a Court and Get Started; Get Started page gets a proper log-in bar */
.header-login-btn { font-weight: 700; border-color: var(--brand); color: var(--brand); }
.header-login-btn:hover { background: var(--brand); color: #fff; }
.gs-login-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; margin-top: 1.6rem; padding: 0.9rem 1rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.gs-login-label { font-weight: 700; font-size: 0.92rem; margin-right: 0.3rem; }
.gs-login-btn { padding: 0.5rem 1.4rem; font-weight: 800; }
.gs-player-btn { font-weight: 700; }
@media (max-width: 480px) { .header-login-btn, .header-book-btn { padding: 0.4rem 0.6rem; font-size: 0.8rem; } }

/* Quiet "turn on" notes at the bottom of the Dashboard for the options that are switched off */
.dash-options { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.25rem; }
.dash-option { font-size: 0.82rem; color: var(--muted); }
.dash-option-btn { margin-left: 0.3rem; padding: 0; border: none; background: none; font: inherit; font-weight: 700; color: var(--accent-dark); text-decoration: underline; cursor: pointer; }
.dash-option-btn:hover { color: var(--brand); }

/* Registration stages: amber while waiting for payment, green once registered, quiet grey when declined */
.reg-tab-accepted:not(.active) .reg-tab-count { background: #fdf3cf; color: #8a6100; }
.reg-tab-confirmed:not(.active) .reg-tab-count { background: #e3f1cf; color: #3f6b1a; }

/* Category cards (organizer): only the registration stages that need attention, and only when someone is in them */
.reg-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.45rem 0 0.2rem; }
.reg-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.12rem 0.55rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; background: rgba(0, 0, 0, 0.06); color: var(--muted); }
.reg-chip b { font-weight: 800; }
.reg-chip.review { background: #fdf3cf; color: #8a6100; }
.reg-chip.awaiting { background: #fdeccb; color: #8a4b00; }
.reg-chip.registered { background: #e3f1cf; color: #3f6b1a; }
.share-cat-players { font-size: 0.78rem; font-weight: 700; color: var(--muted); white-space: nowrap; }
.reg-chip.zero { background: rgba(0, 0, 0, 0.05); color: var(--muted); font-weight: 600; }

/* Player Roster: multi-select with bulk delete, and page navigation */
.roster-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; max-width: 980px; margin-bottom: 0.5rem; padding: 0.35rem 0.8rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 0.82rem; min-height: 2.4rem; }
.roster-selectall { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 700; cursor: pointer; }
.roster-selcount { font-weight: 800; color: var(--accent-dark); }
.roster-selhint { font-size: 0.76rem; }
.roster-check { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; accent-color: var(--accent-dark); cursor: pointer; }
.roster-check:disabled { opacity: 0.35; cursor: not-allowed; }
.roster-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.7rem; max-width: 980px; margin-top: 0.8rem; font-size: 0.82rem; }
.roster-pages { display: inline-flex; align-items: center; gap: 0.25rem; }
.roster-pg { min-width: 2rem; height: 2rem; padding: 0 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.roster-pg:hover:not(:disabled) { border-color: var(--accent-dark); color: var(--accent-dark); }
.roster-pg.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.roster-pg:disabled { opacity: 0.4; cursor: not-allowed; }
.roster-gap { padding: 0 0.2rem; color: var(--muted); }
.roster-size { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.roster-size select { padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font: inherit; font-size: 0.82rem; }

/* Select from roster (tournament participants) */
.picker-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.8rem; margin-bottom: 0.3rem; }
.picker-all { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 700; cursor: pointer; }
.picker-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.picker-list li + li { border-top: 1px solid var(--line); }
.picker-list label { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.45rem 0.7rem; cursor: pointer; font-size: 0.88rem; }
.picker-list label:hover { background: var(--brand-tint); }
.picker-name { flex: 1; font-weight: 600; }
.picker-rating { font-size: 0.74rem; font-weight: 800; padding: 0.05rem 0.5rem; border-radius: 999px; background: rgba(165, 198, 57, 0.2); color: #3f6b1a; }
.picker-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.6rem; font-size: 0.8rem; }

/* Admin: tournaments as a collapsible tree (main tournament = root, categories = branches) */
.admin-tree-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 1.5rem 0 0.6rem; flex-wrap: wrap; }
.admin-tree-actions { display: inline-flex; gap: 0.4rem; }
.admin-tree { padding: 0.4rem; }
.admin-tree-root + .admin-tree-root { border-top: 1px solid var(--line); }
.admin-tree-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; width: 100%; padding: 0.5rem 0.6rem; border: none; background: none; font: inherit; color: var(--ink); text-align: left; }
.admin-tree-row.root { cursor: pointer; border-radius: 8px; font-weight: 800; }
.admin-tree-row.root:hover { background: var(--brand-tint); }
.admin-tree-chevron { display: inline-block; width: 1rem; color: var(--muted); transition: transform 0.15s; }
.admin-tree-chevron.open { transform: rotate(90deg); }
.admin-tree-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.5rem; overflow: hidden; text-overflow: ellipsis; }
.admin-tree-meta { display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; font-size: 0.82rem; font-weight: 500; }
.admin-tree-children { margin: 0 0 0.4rem 1.4rem; padding-left: 0.8rem; border-left: 2px solid var(--line); }
.admin-tree-row.leaf { padding: 0.4rem 0.5rem; font-size: 0.88rem; }
.admin-tree-row.leaf + .admin-tree-row.leaf { border-top: 1px dashed var(--line); }

/* ---- Open Play session board: compact, modern, easier to scan ---- */
.session-head h1 { font-size: 1.45rem; margin: 0; }
.session-head .meta { font-size: 0.82rem; }
.session-head .board-settings { gap: 0.35rem; flex-wrap: wrap; }
.session-head .btn-sm { font-size: 0.76rem; padding: 0.3rem 0.65rem; border-radius: 999px; }
.session-head .head-end { border-color: rgba(190, 18, 60, 0.4); color: #be123c; }
.session-head .head-end:hover { background: rgba(190, 18, 60, 0.08); }

.session-board .panel-title h2 { font-size: 1.05rem; }
.session-board .panel-title h2 svg { width: 18px; height: 18px; }

.session-board .court-grid { grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 0.7rem; }
.session-board .court-card { padding: 0.65rem 0.75rem; border-radius: 12px; border-top-width: 3px; }
.session-board .court-card .court-title { margin-bottom: 0.45rem; font-size: 0.95rem; }
.session-board .match-teams { gap: 0.35rem; margin-bottom: 0.55rem; }
.session-board .team { padding: 0.35rem 0.5rem; border-radius: 8px; }
.session-board .team .player { font-size: 0.8rem; line-height: 1.3; padding: 0.08rem 0; }
.session-board .player-rating { font-size: 0.66rem; }
.session-board .team-label { font-size: 0.6rem; padding: 0.15rem 0.5rem; margin: -0.35rem -0.5rem 0.3rem; }
.session-board .win-buttons { gap: 0.4rem; margin-top: 0.45rem; }
.session-board .win-btn { padding: 0.4rem; font-size: 0.78rem; border-radius: 9px; }
.session-board .court-card .btn-sm { font-size: 0.74rem; padding: 0.32rem 0.6rem; border-radius: 9px; }
.session-board .court-card .field-row { gap: 0.4rem; }
.session-board .court-empty { font-size: 0.78rem; padding: 0.4rem 0; }
.court-remove { display: block; margin: 0.4rem auto 0; padding: 0.1rem 0.4rem; border: none; background: none; font: inherit; font-size: 0.72rem; color: var(--muted); text-decoration: underline; cursor: pointer; }
.court-remove:hover { color: #be123c; }

.session-board .upnext-section { padding: 0.75rem 0.85rem; margin-top: 0.9rem !important; border-radius: 12px; }
.session-board .upnext-grid { gap: 0.6rem; }
.session-board .upnext-card { flex: 1 1 230px; min-width: 220px; padding: 0.6rem 0.7rem; border-radius: 12px; background: rgba(232, 243, 210, 0.55); border-color: rgba(93, 139, 55, 0.45); }
.session-board .upnext-card-header { margin-bottom: 0.45rem; font-size: 0.85rem; }
.session-board .upnext-card .btn-sm { font-size: 0.74rem; padding: 0.32rem 0.6rem; border-radius: 9px; }
.session-board .upnext-card .team .player { font-size: 0.8rem; }
.session-board .standings-section { padding: 0.8rem 0.9rem; border-radius: 12px; }
.session-board .card { border-radius: 12px; }

/* Host venue bar on the Open Play session page, and the session settings pop-up */
.host-venue-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.7rem; padding: 0.4rem 0.8rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); font-size: 0.82rem; }
.host-venue-label { font-weight: 800; }
.host-venue-items { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; flex: 1; min-width: 0; }
.host-venue-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.3rem 0.15rem 0.6rem; border-radius: 999px; background: rgba(0, 0, 0, 0.06); font-weight: 700; }
.host-venue-chip small { font-weight: 600; opacity: 0.8; }
.host-venue-chip button { width: 1.2rem; height: 1.2rem; border: none; border-radius: 50%; background: transparent; color: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.host-venue-chip button:hover { background: rgba(0, 0, 0, 0.12); }
.host-venue-chip.ok { background: #e3f1cf; color: #3f6b1a; }
.host-venue-chip.wait { background: #fdf3cf; color: #8a6100; }
.host-venue-chip.no { background: #fde2e4; color: #9f1239; }
.session-settings-modal { max-width: 640px; max-height: 88vh; overflow-y: auto; }
.session-settings-modal .settings-row { max-width: none; }

/* Admin tournament tree: root row plus its Delete button */
.admin-tree-rootline { display: flex; align-items: center; gap: 0.5rem; }
.admin-tree-rootline .admin-tree-row.root { flex: 1; min-width: 0; }

/* Open Plays list: host venue filter */
.host-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.9rem; }
.host-filter-label { font-size: 0.8rem; font-weight: 800; color: var(--muted); margin-right: 0.2rem; }
.host-filter-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.25rem 0.7rem; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.host-filter-chip:hover { background: var(--brand-tint); }
.host-filter-chip.active { background: #181c1a; border-color: #181c1a; color: #fff; }
.host-filter-count { opacity: 0.65; font-weight: 600; margin-left: 0.15rem; }
.session-info.host-waiting { color: #8a6d1d; }

/* ---- Log in / sign up (club + customer): roomy, easy to read and tap - 16px type stops iOS zooming on focus ---- */
.club-page.club-auth-page, .club-page.customer-auth { max-width: 460px; }
.club-page.club-auth-page { padding: clamp(1rem, 5vh, 2.5rem) 0 2.5rem; justify-content: flex-start; }
.club-page.customer-auth { margin: clamp(1rem, 5vh, 2.5rem) auto 2.5rem; }

.club-auth-page .club-tabs, .customer-auth .club-tabs { padding: 0.3rem; margin-bottom: 1.1rem; }
.club-auth-page .club-tab, .customer-auth .club-tab { padding: 0.75rem 0.5rem; font-size: 1rem; min-height: 46px; }

.club-auth-card, .customer-auth-card { padding: 1.6rem 1.5rem 1.5rem; border-radius: 20px; }
.club-auth-card h2, .customer-auth-card h2 { font-size: 1.65rem; margin: 0.3rem 0 0.4rem; }
.club-auth-card .muted, .customer-auth-card .muted { font-size: 0.95rem; line-height: 1.5; }
.club-auth-card .alert, .customer-auth-card .alert { font-size: 0.92rem; padding: 0.7rem 0.9rem; }

.club-auth-card .field, .customer-auth-card .field { margin-bottom: 1.1rem; }
.club-auth-card .field label, .customer-auth-card .field label { font-size: 0.92rem; font-weight: 700; margin-bottom: 0.4rem; }
.club-auth-card .field input, .customer-auth-card .field input { min-height: 50px; padding: 0.7rem 0.9rem; font-size: 1rem; border-radius: 12px; width: 100%; box-sizing: border-box; }
.club-auth-card .field .muted, .customer-auth-card .field .muted { font-size: 0.85rem !important; }
.club-auth-card .club-link-prefix, .customer-auth-card .club-link-prefix { font-size: 1rem; font-weight: 600; }

/* "club/" sits inside the field as a joined prefix, and the input takes the rest of the row */
.club-auth-card .club-link-row { gap: 0; }
.club-auth-card .club-link-prefix { display: flex; align-items: center; align-self: stretch; padding: 0 0.8rem; background: var(--brand-tint); border: 1px solid var(--line); border-right: none; border-radius: 12px 0 0 12px; color: var(--accent-dark); }
.club-auth-card .club-link-row input { flex: 1; min-width: 0; border-radius: 0 12px 12px 0; }

/* Password with a Show / Hide button */
.password-row { position: relative; display: flex; }
.password-row input { padding-right: 4.6rem; }
.password-toggle { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); min-height: 38px; padding: 0 0.8rem; border: none; border-radius: 8px; background: transparent; color: var(--accent-dark); font: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.password-toggle:hover { background: var(--brand-tint); }

.club-auth-card .btn-block, .customer-auth-card .btn-block { min-height: 52px; padding: 0.8rem 1rem; font-size: 1.05rem; border-radius: 12px; }
.club-auth-card .club-or-divider, .customer-auth-card .club-or-divider { margin: 1.1rem 0; font-size: 0.9rem; }

.club-auth-card .club-footer, .club-auth-page .club-footer, .customer-auth .club-footer { margin-top: 1.25rem; font-size: 0.95rem; display: grid; gap: 0.35rem; }
.club-auth-card .club-footer button, .club-auth-card .club-footer a, .customer-auth .club-footer button, .customer-auth .club-footer a { padding: 0.3rem 0.2rem; font-size: 0.95rem; }
.club-auth-card .club-recover-request, .customer-auth-card .club-recover-request { font-size: 0.92rem; margin-top: 1.1rem; padding-top: 1rem; }

@media (max-width: 480px) {
    .club-auth-card, .customer-auth-card { padding: 1.35rem 1.1rem 1.25rem; border-radius: 18px; }
    .club-auth-card h2, .customer-auth-card h2 { font-size: 1.45rem; }
}
.club-auth-card .club-recover-request input:not([type="hidden"]), .customer-auth-card .club-recover-request input:not([type="hidden"]) { min-height: 50px; padding: 0.7rem 0.9rem; font-size: 1rem; border-radius: 12px; box-sizing: border-box; }

/* Short windows (laptops, browser zoom): keep the large fields, trim the space around them so the whole log in fits without scrolling */
@media (max-height: 820px) and (min-width: 600px) {
    .club-page.club-auth-page { padding-top: 0.6rem; padding-bottom: 1rem; }
    .club-page.customer-auth { margin-top: 0.6rem; margin-bottom: 1rem; }
    .club-auth-page .club-tab, .customer-auth .club-tab { min-height: 42px; padding: 0.55rem 0.5rem; }
    .club-auth-page .club-tabs, .customer-auth .club-tabs { margin-bottom: 0.7rem; }
    .club-auth-card, .customer-auth-card { padding: 1.1rem 1.5rem 1rem; }
    .club-auth-card h2, .customer-auth-card h2 { font-size: 1.45rem; margin: 0 0 0.2rem; }
    .club-auth-card h2 + .muted, .customer-auth-card h2 + .muted { display: none; }
    .club-auth-card .field, .customer-auth-card .field { margin-bottom: 0.75rem; }
    .club-auth-card .field label, .customer-auth-card .field label { margin-bottom: 0.25rem; }
    .club-auth-card .field input, .customer-auth-card .field input { min-height: 48px; padding-top: 0.55rem; padding-bottom: 0.55rem; }
    .club-auth-card .btn-block, .customer-auth-card .btn-block { min-height: 48px; padding-top: 0.6rem; padding-bottom: 0.6rem; }
    .club-auth-card .club-or-divider, .customer-auth-card .club-or-divider { margin: 0.7rem 0; }
    .club-auth-card .club-footer, .club-auth-page .club-footer, .customer-auth .club-footer { margin-top: 0.8rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem 1.1rem; }
}
@media (max-height: 820px) and (min-width: 600px) {
    .app-main:has(.club-auth-page), .app-main:has(.customer-auth) { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .club-page.club-auth-page { min-height: 0; padding-top: 0.25rem; padding-bottom: 0.25rem; }
    .club-page.customer-auth { margin-top: 0.25rem; margin-bottom: 0.25rem; }
}
/* Very short windows: the tab already says "Existing/New Account", so the card title can go */
@media (max-height: 700px) and (min-width: 600px) {
    .club-auth-card h2, .customer-auth-card h2 { display: none; }
    .club-auth-card, .customer-auth-card { padding-top: 1rem; }
}
@media (max-height: 820px) and (min-width: 600px) {
    .club-page.club-auth-page { margin-top: 0; margin-bottom: 0; }
}

/* Sign-up "What will you use thePickleChamp for?" options: normal-size checkbox, aligned, the whole row is tappable */
.club-auth-card .field .checkbox-field { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 400; margin-bottom: 0.5rem; }
.club-auth-card .field .checkbox-field:has(input:checked) { border-color: var(--accent-dark); background: var(--brand-tint); }
.club-auth-card .field .checkbox-field input[type="checkbox"] { flex: 0 0 auto; width: 1.3rem; height: 1.3rem; min-height: 0; padding: 0; margin: 0.1rem 0 0; accent-color: var(--accent-dark); box-shadow: none; }
.club-auth-card .field .checkbox-field > span { flex: 1; min-width: 0; font-size: 0.95rem; line-height: 1.35; }
.club-auth-card .field .checkbox-field > span .muted { font-size: 0.85rem !important; display: block; margin-top: 0.1rem; }

/* Dashboard: the club's logo beside its name */
.dash-hero.has-logo { display: flex; align-items: center; gap: 0.9rem; }
.dash-logo { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(24, 28, 26, 0.12); }
@media (max-width: 480px) { .dash-logo { width: 46px; height: 46px; } }

/* Add a court: name on top, surface and Indoor/Outdoor side by side - compact, with a tap-friendly segmented switch */
.court-add { display: grid; grid-template-columns: 1.25fr 1fr; gap: 0.6rem 0.7rem; margin: 0.4rem 0 0.8rem; text-align: left; }
.court-add label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 0.25rem; }
.court-add .court-add-name { grid-column: 1 / -1; }
.court-add input, .court-add select { width: 100%; min-height: 42px; padding: 0.45rem 0.7rem; font-size: 1rem; border-radius: 10px; box-sizing: border-box; }
.court-add .seg { display: flex; min-height: 42px; padding: 3px; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-sizing: border-box; }
.court-add .seg-btn { flex: 1; border: none; border-radius: 7px; background: transparent; font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.court-add .seg-btn.active { background: var(--brand); color: #fff; }
.court-add .seg-btn:not(.active):hover { background: var(--brand-tint); color: var(--accent-dark); }

/* Venue page: delete venue card */
.danger-zone { border-color: #f0c4c4; margin-top: 1rem; }
.danger-zone h2 { color: #a32d2d; }

/* Court Details page: compact cards, segmented switches, day chips, tight rule lists */
.court-card { padding: 1rem 1.1rem 1.1rem; margin-bottom: 0.9rem; }
.court-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.2rem; }
.court-card-head h2 { margin: 0; font-size: 1.1rem; }
.court-hint { margin: 0.15rem 0 0.6rem; font-size: 0.85rem; }
.court-empty { margin: 0.2rem 0 0.7rem; font-size: 0.9rem; }
.court-card label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 0.25rem; }
.court-card input:not([type="checkbox"]), .court-card select { width: 100%; min-height: 42px; padding: 0.4rem 0.65rem; font-size: 1rem; border-radius: 10px; box-sizing: border-box; }

.court-edit { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 0.6rem 0.8rem; margin-top: 0.5rem; }
.court-edit-name { grid-column: 1 / -1; }
.court-edit-status { grid-column: 1 / -1; }
.court-edit-status .court-hint { margin: 0.35rem 0 0; }
.court-edit-actions { margin-top: 0.8rem; }

.court-card .seg { display: flex; min-height: 42px; padding: 3px; gap: 3px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-sizing: border-box; }
.court-card .seg-btn { flex: 1; border: none; border-radius: 7px; background: transparent; font: inherit; font-size: 0.9rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.court-card .seg-btn.active { background: var(--brand); color: #fff; }
.court-card .seg-btn:not(.active):hover { background: var(--brand-tint); color: var(--accent-dark); }

.rule-list { list-style: none; margin: 0.2rem 0 0.8rem; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.rule-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0.7rem; font-size: 0.92rem; }
.rule-row + .rule-row { border-top: 1px solid var(--line); }
.rule-day { flex: 0 0 2.4rem; font-weight: 800; color: var(--accent-dark); }
.rule-day.wide { flex-basis: 6.5rem; }
.rule-main { font-weight: 600; }
.rule-sub { flex: 1; min-width: 0; color: var(--muted); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-del { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border: none; border-radius: 8px; background: transparent; color: #a32d2d; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.rule-del:hover { background: #fdeaea; }

.rule-add { padding-top: 0.7rem; border-top: 1px dashed var(--line); }
.rule-add > label { margin-bottom: 0.3rem; }
.day-picker { margin-bottom: 0.6rem; }
.day-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.day-chip { min-width: 2.9rem; min-height: 38px; padding: 0 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.day-chip.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.day-chip:not(.active):hover { background: var(--brand-tint); color: var(--accent-dark); }
.day-presets { display: flex; gap: 0.9rem; margin-top: 0.3rem; font-size: 0.82rem; }
.rule-add-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.6rem 0.7rem; align-items: end; }
.rule-add-fields .btn { min-height: 42px; }
.rule-add-reason { grid-column: span 2; }

.copy-row { display: grid; grid-template-columns: minmax(150px, 1fr) auto auto; gap: 0.6rem 1rem; align-items: end; }
.copy-checks { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; padding-bottom: 0.55rem; }
.copy-checks .checkbox-field { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.copy-row .btn { min-height: 42px; }

@media (max-width: 560px) {
    .court-edit { grid-template-columns: 1fr 1fr; }
    .copy-row { grid-template-columns: 1fr; }
    .rule-add-reason { grid-column: 1 / -1; }
    .rule-row { flex-wrap: wrap; row-gap: 0; }
    .rule-sub { flex-basis: 100%; order: 3; padding-left: 3.1rem; }
}

/* Customer sign-up: finish-your-account page (after Google) and the optional phone note */
body:has(.finish-page) {
    background:
        radial-gradient(circle at 12% 8%, rgba(165, 198, 57, 0.28), transparent 42%),
        radial-gradient(circle at 92% 18%, rgba(247, 216, 80, 0.2), transparent 38%),
        var(--bg, #faf6ee);
    min-height: 100vh;
}
.finish-page { max-width: 460px; margin: 0 auto; padding: clamp(1rem, 6vh, 3rem) 1rem 2.5rem; }
.finish-brand { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 1.1rem; text-decoration: none; font-size: 1.35rem; }
.finish-card { position: relative; overflow: hidden; padding: 2.2rem 1.5rem 1.5rem; border: none; border-radius: 20px; text-align: center; box-shadow: 0 24px 60px -24px rgba(24, 28, 26, 0.35), 0 2px 8px rgba(24, 28, 26, 0.06); animation: club-auth-rise 0.5s ease both; }
.finish-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, var(--accent-dark), var(--energy), var(--accent-dark)); background-size: 200% 100%; animation: club-auth-shimmer 3s linear infinite; }
.finish-avatar { width: 64px; height: 64px; margin: 0 auto 0.8rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent-dark), var(--brand)); box-shadow: 0 10px 20px -8px rgba(93, 139, 55, 0.7); }
.finish-card h2 { margin: 0 0 0.3rem; font-size: 1.6rem; }
.finish-sub { margin: 0 0 0.8rem; font-size: 0.97rem; line-height: 1.5; }
.finish-email { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.2rem; padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--brand-tint); color: var(--accent-dark); font-size: 0.88rem; font-weight: 700; }
.finish-card form { text-align: left; }
.finish-card .field { margin-bottom: 1.1rem; }
.finish-card .field label { display: block; font-size: 0.92rem; font-weight: 700; margin-bottom: 0.4rem; }
.finish-card .field input { width: 100%; min-height: 50px; padding: 0.7rem 0.9rem; font-size: 1rem; border-radius: 12px; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.finish-card .field input:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.25); }
.finish-card .btn-block { min-height: 52px; font-size: 1.05rem; border-radius: 12px; background: linear-gradient(135deg, var(--accent-dark), var(--brand)); border: none; box-shadow: 0 10px 20px -10px rgba(93, 139, 55, 0.7); }

.optional-tag { display: inline-block; margin-left: 0.35rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 0.72rem; font-weight: 700; vertical-align: middle; }
.phone-tip { display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 0.6rem; padding: 0.65rem 0.8rem; border-radius: 12px; background: #fff8e1; border: 1px solid #f3dc8c; color: #5b4a0f; font-size: 0.88rem; line-height: 1.4; }
.phone-tip-ic { font-size: 1.15rem; line-height: 1.2; }

/* Club Google sign-up: the "what will you use it for" cards, the account link row and the book-a-court note */
.finish-booknote { margin: 0 0 1.1rem; text-align: left; font-size: 0.9rem; line-height: 1.45; }
.finish-help { margin: 0 0 0.5rem; font-size: 0.85rem; text-align: left; }
.finish-card .field .checkbox-field { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.7rem 0.85rem; margin-bottom: 0.5rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; font-weight: 400; }
.finish-card .field .checkbox-field:has(input:checked) { border-color: var(--accent-dark); background: var(--brand-tint); }
.finish-card .field .checkbox-field input[type="checkbox"] { flex: 0 0 auto; width: 1.3rem; min-height: 0; height: 1.3rem; padding: 0; margin: 0.1rem 0 0; accent-color: var(--accent-dark); box-shadow: none; }
.finish-card .field .checkbox-field > span { flex: 1; min-width: 0; font-size: 0.95rem; line-height: 1.35; }
.finish-card .field .checkbox-field > span .muted { display: block; margin-top: 0.1rem; font-size: 0.85rem; }
.finish-card .club-link-row { display: flex; align-items: stretch; gap: 0; }
.finish-card .club-link-prefix { display: flex; align-items: center; padding: 0 0.8rem; background: var(--brand-tint); border: 1px solid var(--line); border-right: none; border-radius: 12px 0 0 12px; color: var(--accent-dark); font-size: 1rem; font-weight: 600; }
.finish-card .club-link-row input { flex: 1; min-width: 0; border-radius: 0 12px 12px 0; }

/* Venue bookings: history with tabs, filters, summary and paging */
.bk-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.bk-head h2 { margin: 0; }
.bk-tabs { display: flex; gap: 0.3rem; padding: 3px; margin-bottom: 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.bk-tab { flex: 1 0 auto; min-height: 38px; padding: 0 0.8rem; border: none; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 0.9rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.bk-tab.active { background: var(--brand); color: #fff; }
.bk-tab:not(.active):hover { background: var(--brand-tint); color: var(--accent-dark); }
.bk-tab-count { margin-left: 0.25rem; opacity: 0.7; font-weight: 600; }

.bk-filters { display: grid; grid-template-columns: 2fr 1.2fr 1fr 1fr auto; gap: 0.5rem 0.6rem; align-items: end; margin-bottom: 0.8rem; }
.bk-filters label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 0.25rem; }
.bk-filters input, .bk-filters select { width: 100%; min-height: 42px; padding: 0.4rem 0.65rem; font-size: 1rem; border-radius: 10px; box-sizing: border-box; }
.bk-clear { min-height: 42px; }

.bk-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.5rem; margin-bottom: 0.8rem; }
.bk-summary > div { display: flex; flex-direction: column; padding: 0.55rem 0.7rem; border-radius: 10px; background: var(--brand-tint); }
.bk-summary strong { font-size: 1.15rem; line-height: 1.2; }
.bk-summary span { font-size: 0.78rem; color: var(--muted); }
.bk-empty { padding: 0.8rem 0; }
.bk-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.8rem; }

@media (max-width: 720px) {
    .bk-filters { grid-template-columns: 1fr 1fr; }
    .bk-filter-search { grid-column: 1 / -1; }
}

/* Bookings page: header actions and the "needs review" strip */
.bk-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.bk-attn { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap; margin: 0 0 0.9rem; padding: 0.6rem 0.9rem; border-radius: 12px; background: #fff8e1; border: 1px solid #f3dc8c; color: #5b4a0f; font-size: 0.95rem; }

/* My Bookings: tabs, filters, paging */
.mb-tabs { display: flex; gap: 0.3rem; padding: 3px; margin: 0.4rem 0 0.9rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow-x: auto; }
.mb-tab { flex: 1 0 auto; min-height: 40px; padding: 0 0.9rem; border: none; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 0.92rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.mb-tab.active { background: var(--brand); color: #fff; }
.mb-tab:not(.active):hover { background: var(--brand-tint); color: var(--accent-dark); }
.mb-tab-count { margin-left: 0.25rem; opacity: 0.7; font-weight: 600; }
.mb-filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 0.5rem 0.6rem; align-items: end; margin-bottom: 1rem; }
.mb-filters label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--muted); margin-bottom: 0.25rem; }
.mb-filters input { width: 100%; min-height: 42px; padding: 0.4rem 0.65rem; font-size: 1rem; border-radius: 10px; box-sizing: border-box; }
.mb-clear { min-height: 42px; }
.mb-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 1rem; }
@media (max-width: 640px) { .mb-filters { grid-template-columns: 1fr 1fr; } .mb-filter-search { grid-column: 1 / -1; } }

/* Customer profile page */
.cust-profile { max-width: 640px; margin: 0 auto; }
.cp-hero { display: flex; align-items: center; gap: 1rem; margin: 0.4rem 0 1.1rem; }
.cp-hero h1 { margin: 0; font-size: 1.5rem; }
.cp-avatar { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.7rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent-dark), var(--brand)); box-shadow: 0 10px 20px -8px rgba(93, 139, 55, 0.7); }
.cp-card { padding: 1.2rem 1.25rem 1.3rem; margin-bottom: 1rem; }
.cp-card h2 { margin: 0 0 0.8rem; font-size: 1.15rem; }
.cp-card .field { margin-bottom: 1rem; }
.cp-card .field label { display: block; font-size: 0.9rem; font-weight: 700; margin-bottom: 0.35rem; }
.cp-card .field input { width: 100%; min-height: 48px; padding: 0.6rem 0.85rem; font-size: 1rem; border-radius: 12px; box-sizing: border-box; }
.cp-card .field input:disabled { background: var(--surface); color: var(--muted); }
.cp-note { margin: 0.3rem 0 0; font-size: 0.82rem; }
.cp-forgot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.6rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line); font-size: 0.88rem; }
.cp-links { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.cp-links form { margin-left: auto; }

/* Venue bookings: compact layout (overrides the roomier first version above) */
.bk-history { padding: 0.8rem 0.9rem 0.9rem; }
.bk-head { margin-bottom: 0.4rem; }
.bk-head h2 { font-size: 1.05rem; }
.bk-tabs { margin-bottom: 0.55rem; padding: 2px; gap: 0.2rem; }
.bk-tab { min-height: 32px; padding: 0 0.65rem; font-size: 0.82rem; }
.bk-filters { grid-template-columns: 2fr 1.2fr 1fr 1fr auto; gap: 0.4rem 0.5rem; margin-bottom: 0.55rem; }
.bk-filters label { font-size: 0.7rem; margin-bottom: 0.12rem; }
.bk-filters input, .bk-filters select { min-height: 36px; padding: 0.25rem 0.55rem; font-size: 0.9rem; border-radius: 8px; }
.bk-clear { min-height: 36px; }
.bk-summary { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; margin-bottom: 0.5rem; padding: 0.35rem 0.7rem; border-radius: 8px; }
.bk-summary > div { flex-direction: row; align-items: baseline; gap: 0.3rem; padding: 0; background: none; }
.bk-summary strong { font-size: 0.95rem; }
.bk-summary span { font-size: 0.78rem; }

.bk-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.bk-row { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem; padding: 0.4rem 0.7rem; font-size: 0.88rem; }
.bk-row + .bk-row { border-top: 1px solid var(--line); }
.bk-row:hover { background: var(--brand-tint); }
.bk-row.cancelled { opacity: 0.7; }
.bk-when, .bk-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.bk-when span, .bk-who span { font-size: 0.78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-tags { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.25rem; }
.bk-tags .badge { font-size: 0.68rem; padding: 0.12rem 0.5rem; }
.bk-tag { display: inline-flex; align-items: center; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 0.72rem; font-weight: 700; }
.bk-tag.bad { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.bk-action { min-height: 32px; }
.bk-pager { margin-top: 0.5rem; }
.bk-attn { margin-bottom: 0.6rem; padding: 0.4rem 0.7rem; font-size: 0.88rem; }

@media (max-width: 640px) {
    .bk-filters { grid-template-columns: 1fr 1fr; }
    .bk-filter-search { grid-column: 1 / -1; }
    .bk-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.15rem; }
    .bk-when { grid-column: 1; }
    .bk-action { grid-column: 2; grid-row: 1 / span 2; }
    .bk-who { grid-column: 1; }
    .bk-tags { grid-column: 1 / -1; justify-content: flex-start; }
}
.bk-tag.due { background: #fff4d6; border-color: #f0d68a; color: #7a5b00; }
.bk-tag.ok { background: var(--brand-tint); border-color: transparent; color: var(--accent-dark); }

/* Host request details form and the court owner's approval dialog */
.hrf { max-width: 460px; }
.hrf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 0.8rem; margin-top: 0.4rem; }
.hrf-grid label { display: block; font-size: 0.8rem; font-weight: 700; color: var(--muted); margin-bottom: 0.25rem; }
.hrf-grid input { width: 100%; min-height: 44px; padding: 0.4rem 0.65rem; font-size: 1rem; border-radius: 10px; box-sizing: border-box; }
.hrf-courts { grid-column: 1 / -1; }
@media (max-width: 420px) { .hrf-grid { grid-template-columns: 1fr; } }
.hr-modal { max-width: 560px; }
.hr-held { margin-top: 0.2rem; font-size: 0.78rem; font-weight: 700; color: var(--accent-dark); }
.hr-courts { margin-top: 0.9rem; }
.hr-courts-head { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
.hr-picked { margin-left: auto; }
.hr-court-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.4rem; max-height: 12rem; overflow: auto; }
.hr-court { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; margin: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; font-weight: 600; }
.hr-court:has(input:checked) { border-color: var(--accent-dark); background: var(--brand-tint); }
.hr-court input[type="checkbox"] { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--accent-dark); }

/* Venue bookings: schedule view (day strip, court timeline, phone agenda) */
.bk-views { display: inline-flex; padding: 2px; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.bk-view { min-height: 32px; padding: 0 0.8rem; border: none; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.bk-view.active { background: var(--brand); color: #fff; }

.sg-days { display: flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.35rem; margin-bottom: 0.6rem; }
.sg-day { flex: 0 0 auto; min-width: 5.6rem; display: flex; flex-direction: column; align-items: center; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font: inherit; cursor: pointer; }
.sg-day.today:not(.active) { border-color: var(--accent-dark); }
.sg-day.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.sg-day:not(.active):hover { background: var(--brand-tint); }
.sg-day-name { font-size: 0.82rem; font-weight: 800; }
.sg-day-num { font-size: 0.72rem; opacity: 0.8; }
.sg-day-count { margin-top: 0.25rem; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--brand-tint); color: var(--accent-dark); font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.sg-day.active .sg-day-count { background: rgba(255, 255, 255, 0.2); color: #fff; }
.sg-day-count.zero { background: transparent; color: var(--muted); font-weight: 600; }
.sg-day.active .sg-day-count.zero { background: transparent; color: rgba(255, 255, 255, 0.75); }

.sg-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem 1rem; margin-bottom: 0.4rem; }
.sg-title { display: flex; flex-direction: column; line-height: 1.3; }
.sg-title strong { font-size: 1.02rem; }
.sg-title .muted { font-size: 0.82rem; }
.sg-bar-right { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; }
.sg-jump { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.sg-jump input { min-height: 34px; padding: 0.2rem 0.5rem; font-size: 0.9rem; border-radius: 8px; }
.sg-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin-bottom: 0.5rem; font-size: 0.74rem; color: var(--muted); }
.sg-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.sg-key { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; border: 1px solid transparent; }

.sg-key.confirmed, .sg-b.confirmed { background: #d9efc0; border-color: #a5c639; color: #1f3a0f; }
.sg-key.pending, .sg-b.pending { background: #fff; border: 1px dashed #c9a43a; color: #5b4000; }
.sg-key.due, .sg-b.due { background: #fff0c2; border-color: #e8bb3a; color: #5b4000; }
.sg-key.noshow, .sg-b.noshow { background: #fde1e1; border-color: #e9a1a1; color: #7a1f1f; }
.sg-key.hold { background: #3c403d; }
.sg-key.closed { background: repeating-linear-gradient(135deg, #ddd, #ddd 2px, #f4f1e9 2px, #f4f1e9 4px); }

.sg-grid-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sg-grid { --sg-row: 28px; display: grid; grid-template-columns: 3.7rem repeat(var(--sg-courts), minmax(9.5rem, 1fr)); grid-template-rows: 2.3rem repeat(var(--sg-rows), var(--sg-row)); min-width: calc(3.7rem + var(--sg-courts) * 9.5rem); position: relative; }
.sg-corner { position: sticky; left: 0; z-index: 3; background: #fff; border-bottom: 1px solid var(--line); }
.sg-court-head { display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); background: var(--surface); font-size: 0.85rem; font-weight: 800; position: sticky; top: 0; z-index: 2; }
.sg-court-col { border-left: 1px solid var(--line); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--sg-row) - 1px), #f1ede3 calc(var(--sg-row) - 1px), #f1ede3 var(--sg-row)), repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--sg-row) * 2 - 1px), var(--line) calc(var(--sg-row) * 2 - 1px), var(--line) calc(var(--sg-row) * 2)); }
.sg-time { position: sticky; left: 0; z-index: 2; background: #fff; padding: 0.15rem 0.45rem 0 0; text-align: right; font-size: 0.72rem; font-weight: 700; color: var(--muted); border-right: 1px solid var(--line); }
.sg-closed { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05) 6px, transparent 6px, transparent 12px); pointer-events: none; margin-left: 1px; }
.sg-hold { display: flex; align-items: center; margin: 1px 3px; padding: 0.15rem 0.45rem; border-radius: 6px; background: repeating-linear-gradient(135deg, #4a4e4b, #4a4e4b 8px, #3c403d 8px, #3c403d 16px); color: #fff; font-size: 0.74rem; font-weight: 700; overflow: hidden; z-index: 1; }
.sg-hold span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-b { display: flex; flex-direction: column; margin: 2px 3px; padding: 0.22rem 0.45rem; border-radius: 8px; border: 1px solid transparent; text-align: left; font: inherit; line-height: 1.2; overflow: hidden; cursor: pointer; z-index: 1; transition: transform 0.1s ease, box-shadow 0.1s ease; }
.sg-b:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(24, 28, 26, 0.5); z-index: 3; }
.sg-b strong { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-b span { font-size: 0.72rem; opacity: 0.85; white-space: nowrap; }
.sg-b em { font-style: normal; font-size: 0.7rem; font-weight: 800; white-space: nowrap; }
.sg-now { align-self: start; position: relative; border-top: 2px solid #e04040; z-index: 4; pointer-events: none; }
.sg-now span { position: absolute; left: 0.25rem; top: -0.75rem; padding: 0 0.4rem; border-radius: 999px; background: #e04040; color: #fff; font-size: 0.62rem; font-weight: 800; }

.sg-agenda { display: none; flex-direction: column; gap: 0.4rem; }
.sg-card { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.7rem; border: 1px solid transparent; border-left-width: 5px; border-radius: 10px; text-align: left; font: inherit; cursor: pointer; }
.sg-card-time { display: flex; flex-direction: column; line-height: 1.2; font-size: 0.8rem; }
.sg-card-time span { color: inherit; opacity: 0.7; font-size: 0.74rem; }
.sg-card-main { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sg-card-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sg-card-main span { font-size: 0.78rem; opacity: 0.8; }

@media (max-width: 760px) {
    .sg-grid-wrap, .sg-legend, .sg-empty-desktop { display: none; }
    .sg-agenda { display: flex; }
}
.sg-card.confirmed { background: #d9efc0; border-left-color: #6f9a1f; color: #1f3a0f; }
.sg-card.pending { background: #fff; border: 1px dashed #c9a43a; border-left: 5px solid #c9a43a; color: #5b4000; }
.sg-card.due { background: #fff0c2; border-left-color: #e8bb3a; color: #5b4000; }
.sg-card.noshow { background: #fde1e1; border-left-color: #d46a6a; color: #7a1f1f; }
.sg-card.hold { background: #3c403d; border-left-color: #1d1f1e; color: #fff; cursor: default; }

.bk-hidden { display: none; }

/* Bookings: make "awaiting payment" (amber) and "balance to collect" (orange-red) stand out - both need the owner's attention */
:root { --wait-bg: #ffb703; --wait-ink: #3d2700; --owe-bg: #e8590c; --owe-ink: #fff; }

.bk-attn.wait { background: var(--wait-bg); border-color: #e09f00; color: var(--wait-ink); font-weight: 600; box-shadow: 0 6px 14px -10px rgba(224, 159, 0, 0.9); }
.bk-attn.wait .btn-primary { background: var(--wait-ink); color: #fff; }
.bk-attn.owe { background: var(--owe-bg); border-color: #c74a08; color: var(--owe-ink); font-weight: 600; box-shadow: 0 6px 14px -10px rgba(199, 74, 8, 0.9); }
.bk-attn.owe .btn-primary { background: #fff; color: #b3420a; }

.bk-tag.pend { background: var(--wait-bg); border-color: #e09f00; color: var(--wait-ink); font-weight: 800; }
.bk-tag.due { background: var(--owe-bg); border-color: #c74a08; color: var(--owe-ink); font-weight: 800; }
.badge.badge-wait { background: var(--wait-bg); color: var(--wait-ink); font-weight: 800; }

.bk-tab.tab-wait:not(.active) { background: #fff3cc; color: #7a5200; }
.bk-tab.tab-wait:not(.active) .bk-tab-count { background: var(--wait-bg); color: var(--wait-ink); opacity: 1; border-radius: 999px; padding: 0 0.4rem; font-weight: 800; }
.bk-tab.tab-owe:not(.active) { background: #ffe6d6; color: #a23b05; }
.bk-tab.tab-owe:not(.active) .bk-tab-count { background: var(--owe-bg); color: #fff; opacity: 1; border-radius: 999px; padding: 0 0.4rem; font-weight: 800; }

.bk-summary > div.hot { padding: 0.1rem 0.6rem; border-radius: 999px; }
.bk-summary > div.hot.wait { background: var(--wait-bg); color: var(--wait-ink); }
.bk-summary > div.hot.owe { background: var(--owe-bg); color: #fff; }
.bk-summary > div.hot strong, .bk-summary > div.hot span { color: inherit; font-weight: 800; }

.sg-key.pending { background: var(--wait-bg); border: 1px solid #e09f00; }
.sg-key.due { background: var(--owe-bg); border: 1px solid #c74a08; }
.sg-b.pending { background: var(--wait-bg); border: 2px dashed #8a5a00; color: var(--wait-ink); }
.sg-b.due { background: var(--owe-bg); border: 1px solid #c74a08; color: var(--owe-ink); }
.sg-b.due em, .sg-b.pending em { font-weight: 800; }
.sg-card.pending { background: var(--wait-bg); border: 2px dashed #8a5a00; border-left: 6px solid #8a5a00; color: var(--wait-ink); }
.sg-card.due { background: var(--owe-bg); border-left-color: #8f3606; color: var(--owe-ink); }
.sg-card.due .bk-tag.due { background: #fff; color: #b3420a; border-color: #fff; }
.sg-card.pending .bk-tag.pend { background: var(--wait-ink); color: #fff; border-color: transparent; }

/* Open Play: sign up or continue as a guest */
.guest-prompt { max-width: 440px; padding: 0; overflow: hidden; border-radius: 22px; border: none; animation: club-auth-rise 0.35s ease both; box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.6); }
.gp-hero { position: relative; padding: 1.7rem 1.4rem 1.4rem; text-align: center; color: #fff; background: radial-gradient(circle at 18% 12%, rgba(165, 198, 57, 0.55), transparent 48%), radial-gradient(circle at 88% 20%, rgba(247, 216, 80, 0.3), transparent 42%), linear-gradient(150deg, var(--brand) 0%, #2c4a1f 100%); }
.gp-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, var(--accent-dark), var(--energy), var(--accent-dark)); background-size: 200% 100%; animation: club-auth-shimmer 3s linear infinite; }
.gp-ball { display: inline-block; font-size: 2.4rem; line-height: 1; animation: gp-bounce 1.6s ease-in-out infinite; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.35)); }
.gp-hero h3 { margin: 0.4rem 0 0.2rem; font-size: 1.45rem; color: #fff; }
.gp-hero p { margin: 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }
@keyframes gp-bounce { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-8px) rotate(12deg); } }
.gp-body { padding: 1.1rem 1.3rem 1.3rem; background: #fff; }
.gp-perks { list-style: none; margin: 0 0 1.1rem; padding: 0; display: grid; gap: 0.5rem; }
.gp-perks li { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.7rem; border-radius: 12px; background: var(--brand-tint); font-size: 0.93rem; }
.gp-ic { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex: 0 0 auto; border-radius: 50%; background: #fff; font-size: 1.05rem; box-shadow: 0 2px 6px rgba(24, 28, 26, 0.12); }
.gp-actions { display: grid; gap: 0.5rem; }
.gp-actions .btn { min-height: 48px; font-size: 1rem; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.gp-primary { background: linear-gradient(135deg, var(--accent-dark), var(--brand)); border: none; box-shadow: 0 12px 22px -12px rgba(93, 139, 55, 0.9); }
.gp-guest-btn { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0.4rem; border: none; background: none; color: var(--ink); font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; }
.gp-guest-btn small { font-size: 0.75rem; font-weight: 500; color: var(--muted); }
.gp-guest-btn:hover { text-decoration: underline; }

/* Possible duplicate player warning */
.dup-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; margin: 0.5rem 0; padding: 0.5rem 0.7rem; border-radius: 10px; background: #fff3cd; border: 1px solid #f0d68a; color: #5b4a0f; font-size: 0.86rem; line-height: 1.35; }
.dup-use { padding: 0.25rem 0.6rem; border: 1px solid #c9a43a; border-radius: 999px; background: #fff; color: #5b4000; font: inherit; font-size: 0.82rem; font-weight: 700; cursor: pointer; }
.dup-use:hover { background: #ffe9a8; }
.dup-use small, .dup-chip small { font-weight: 500; opacity: 0.8; }
.dup-chip { padding: 0.2rem 0.6rem; border-radius: 999px; background: #fff; border: 1px solid #e3cf8d; font-weight: 700; }

/* Session board: where a player came from (Expected today / queue) */
.src-tags { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; margin-left: 0.4rem; vertical-align: middle; }
.src-tag { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.src-tag.imported { background: #dbeafe; color: #1d4ed8; }
.src-tag.added { background: #ede9fe; color: #6d28d9; }
.src-tag.new { background: var(--brand-tint); color: var(--accent-dark); }
.src-tag.known { background: var(--surface); color: var(--muted); border: 1px solid var(--line); }
.expected-remove { width: 1.7rem; height: 1.7rem; margin-right: 0.3rem; border: none; border-radius: 8px; background: transparent; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.expected-remove:hover { background: #fdeaea; color: #a32d2d; }
.expected-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.expected-who .queue-name { white-space: normal; overflow-wrap: anywhere; }
.expected-who .src-tags { margin-left: 0; }

/* Open Play board: long player lists scroll inside their own box (about 65% of the screen height), so the page - and Live Standings - stay in view */
.queue-list.scroll-list { overflow-y: auto; overscroll-behavior: contain; padding-right: 0.15rem; }
/* A list only gets a scrollbar once it has more than 15 players; the box is then just tall enough for 15 rows (rows differ in height, hence three values). */
.queue-list.scroll-list.rows-waiting { max-height: calc(15 * 3.05rem); }
.queue-list.scroll-list.rows-roster { max-height: calc(15 * 2.45rem); }
.expected-who .src-tags { flex-wrap: nowrap; gap: 0.2rem; }
.expected-who .src-tag { font-size: 0.62rem; padding: 0 0.4rem; }
.expected-remove { width: 1.4rem; height: 1.6rem; margin-right: 0.1rem; }

/* Open Play check-in box: "Add <name> as a new player" - the label gets its own line and the two buttons share the next one, so a narrow column no longer squeezes it */
.add-new-label { flex: 1 1 100%; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.add-new-actions { flex: 1 1 100%; display: flex; gap: 0.4rem; }
.add-new-actions .btn { flex: 1; justify-content: center; text-align: center; }

/* ---- Booking note (customer -> venue), cancel dialog and refund status ---- */
.book-note { margin: 0.9rem 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.book-note > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; cursor: pointer; padding: 0.6rem 0.85rem; font-weight: 600; font-size: 0.95rem; list-style: none; }
.book-note > summary::-webkit-details-marker { display: none; }
.book-note > summary::after { content: "＋"; flex: none; color: var(--muted); }
.book-note[open] > summary::after { content: "－"; }
.book-note textarea { display: block; width: calc(100% - 1.7rem); margin: 0 0.85rem; resize: vertical; min-height: 4.2rem; }
.book-note-count { text-align: right; font-size: 0.75rem; padding: 0.2rem 0.85rem 0.55rem; }

.bk-note-box { margin-top: 0.75rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--brand-tint); border: 1px solid var(--line); }
.bk-note-box p { margin: 0.25rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.cancel-reason-other { margin-top: 0.5rem; width: 100%; }
.cancel-refund { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.4rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: #fff4d6; border: 1px solid #f0d68a; color: #5b4a0f; font-weight: 600; cursor: pointer; }
.cancel-refund input { margin-top: 0.2rem; }
.cancel-refund small { display: block; font-weight: 400; margin-top: 0.15rem; }

.booking-note-view { margin-top: 0.7rem; font-size: 0.9rem; }
.booking-note-view > summary { cursor: pointer; font-weight: 600; color: var(--accent-dark); }
.booking-note-view p { margin: 0.35rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.booking-cancel-info { margin-top: 0.7rem; padding: 0.55rem 0.8rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); font-size: 0.9rem; }
.booking-cancel-info.by-venue { background: #fff4f0; border-color: #f3c3b0; }
.booking-refund { margin-top: 0.35rem; font-weight: 600; }
.booking-refund.pending { color: #b3420a; }
.booking-refund.done { color: var(--accent-dark); }

/* ---- Weekly update (copy-and-paste message for a chat group) ---- */
.weekly-update { max-width: 560px; max-height: 90vh; overflow-y: auto; }
.weekly-update textarea { width: 100%; }
.wu-days { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.wu-day { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--brand-tint); font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.wu-day.off { background: var(--surface); color: var(--muted); text-decoration: line-through; }
.wu-footer-actions { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.4rem; }
.wu-preview { font-family: inherit; font-size: 0.92rem; line-height: 1.4; background: var(--surface); }

/* ---- Scorekeeper game timer: deliberately small and quiet ---- */
.sb-timer { display: inline-flex; align-items: center; gap: 0.3rem; color: #9a9a9a; font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.sb-timer .sb-timer-text { font-weight: 600; }
.sb-timer.paused { opacity: 0.7; }
.sb-timer.paused .sb-timer-text { font-style: italic; }
.sb-timer.over { color: #d9a441; }
.sb-timer-btn { appearance: none; border: 1px solid #444; background: #2c2c2c; color: #ccc; border-radius: 6px; width: 1.7rem; height: 1.5rem; padding: 0; font-size: 0.7rem; line-height: 1; cursor: pointer; }
.sb-timer-btn:active { background: #3a3a3a; }

/* ---- Admin: site maintenance ---- */
.mt-status { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-left: 5px solid var(--accent-dark); }
.mt-status.on { border-left-color: #e8590c; background: #fff4ee; }
.mt-status-main { display: flex; align-items: flex-start; gap: 0.7rem; flex: 1 1 280px; }
.mt-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent-dark); margin-top: 0.4rem; flex: none; }
.mt-status.on .mt-dot { background: #e8590c; box-shadow: 0 0 0 4px rgba(232, 89, 12, 0.2); }

/* ---- Scorekeeper: player names under the Team A / Team B labels ---- */
.sb-pick-names { display: block; margin-top: 0.2rem; font-weight: 600; font-size: 0.8rem; opacity: 0.85; overflow-wrap: anywhere; }

/* Timer in the corner opposite the score call: bigger than before, still muted so the score stays the focus */
.sb-call-slot .sb-timer { flex: 1 1 auto; min-width: 0; justify-content: center; gap: 0.45rem; color: #b8b8b8; font-size: 1.5rem; font-weight: 800; line-height: 1.25; }
.sb-call-slot .sb-timer .sb-timer-text { font-weight: 800; letter-spacing: 0.02em; }
.sb-call-slot .sb-timer .sb-timer-btn { width: 2.3rem; height: 2.3rem; font-size: 1rem; border-radius: 10px; }
.sb-call-slot .sb-timer.over { color: #e0a93a; }
/* shares the row with the Switch button before the first point - a little smaller so both fit */
.sb-call-slot .sb-timer.tight { font-size: 1.15rem; gap: 0.3rem; }
.sb-call-slot .sb-timer.tight .sb-timer-btn { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; }

/* ---- Time-limit finish: an unfinished game submitted when time ran out ---- */
.sk-timeup-flag { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.5rem 0 0.8rem; padding: 0.65rem 0.8rem; border-radius: 12px; background: #fff4d6; border: 1px solid #f0d68a; color: #5b4a0f; font-size: 0.9rem; line-height: 1.4; }
.sb-timeup-note { margin: 0.6rem 0 0; padding: 0.55rem 0.7rem; border-radius: 10px; background: #fff4d6; color: #5b4a0f; font-size: 0.85rem; line-height: 1.4; text-align: left; }
.sb .sb-bar-btn.submit.timeup:not(:disabled) { color: #e0a93a; }

/* ---- Team labels (Mixed Doubles team events) and Finish tournament ---- */
.team-switch-card { margin: 0.4rem 0 0.9rem; padding: 0.7rem 0.9rem; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); }
.team-switch-card.on { border-style: solid; border-color: var(--accent-dark); background: #f6f9ea; }
.team-switch-card .settings-row { border-bottom: none; padding: 0.2rem 0; max-width: none; }
.team-switch-card .muted { font-size: 0.78rem; margin-top: 0.15rem; }
.group-entrant-row { display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.4rem; }
.group-entrant-row .group-entrant-chip { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.team-input { flex: 0 0 5.2rem; width: 5.2rem; min-width: 0; padding: 0.3rem 0.4rem; border: 1px solid var(--line); border-radius: 6px; font-size: 0.8rem; background: #fff; }
.team-input:focus { outline: 2px solid var(--accent); outline-offset: 0; }
.team-tag { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; border-radius: 999px; background: var(--brand-tint); color: var(--accent-dark); font-size: 0.7rem; font-weight: 700; vertical-align: middle; }
.finish-card { margin-top: 1rem; padding: 0.8rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.finish-card p { margin: 0; flex: 1 1 260px; font-size: 0.88rem; }
.finish-unscored { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: #fff4d6; border: 1px solid #f0d68a; color: #5b4a0f; font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.finish-unscored input { margin-top: 0.2rem; }

/* ---- Public tournament page (/t/{id}): full screen width, key numbers, live category panels, sidebar ---- */
.app-main:has(.tsp) { max-width: none; }
.tsp, .share-page.tsp { max-width: 2000px; margin: 0 auto; padding-left: 0; padding-right: 0; }
.tsp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.7rem; margin: 1rem 0; }
.tsp-metric { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.7rem 0.95rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.tsp-metric span { font-size: 0.78rem; color: var(--muted); }
.tsp-metric strong { font-size: 1.35rem; line-height: 1.25; overflow-wrap: anywhere; }
.tsp-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); gap: 1rem; align-items: start; }
.tsp-main { min-width: 0; }
.tsp-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.tsp-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.9rem; }
.tsp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 1.05rem 1.2rem; min-width: 0; }
.tsp-card h2 { margin: 0 0 0.6rem; font-size: 1.1rem; }
.tsp-card h3 { margin: 1rem 0 0.35rem; font-size: 0.82rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.tsp-cat { position: relative; overflow: hidden; }
.tsp-cat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--line); }
.tsp-cat.status-active::before { background: var(--accent-dark); }
.tsp-cat.status-upcoming::before { background: #3a86c8; }
.tsp-cat.status-completed::before { background: #c9c3b4; }
.tsp-cat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.tsp-cat-head h2 { margin: 0 0 0.5rem; overflow-wrap: anywhere; }
.tsp-note { font-size: 0.85rem; margin: 0.3rem 0 0; }
.tsp-progress { height: 8px; background: var(--page-bg); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-top: 0.2rem; }
.tsp-progress > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius: 999px; transition: width 0.4s ease; }
.tsp-champion { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--brand-tint); display: flex; flex-direction: column; gap: 0.1rem; }
.tsp-champion span { font-size: 0.78rem; color: var(--accent-dark); font-weight: 700; }
.tsp-matches { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tsp-matches li { display: flex; gap: 0.7rem; align-items: baseline; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; flex-wrap: wrap; }
.tsp-court { flex: 0 0 auto; min-width: 4.8rem; font-weight: 700; color: var(--accent-dark); font-size: 0.85rem; }
.tsp-standings { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 1.2rem; }
.tsp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tsp-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 0.78rem; padding: 0.25rem 0.3rem; border-bottom: 1px solid var(--line); }
.tsp-table td { padding: 0.4rem 0.3rem; border-bottom: 1px solid var(--line); }
.tsp-table th:first-child, .tsp-table td:first-child { width: 1.6rem; }
.tsp-cat-actions { margin-top: 1rem; }
.tsp-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; font-size: 0.92rem; }
.tsp-facts li { display: flex; gap: 0.6rem; align-items: flex-start; }
.tsp-facts li > svg, .tsp-facts li > .meta-icon { flex: none; margin-top: 0.15rem; }
.tsp-fees { list-style: none; margin: 0 0 0.8rem; padding: 0; font-size: 0.92rem; }
.tsp-fees li { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.tsp-share { display: flex; gap: 0.9rem; align-items: center; }
.tsp-qr { flex: none; width: 96px; height: 96px; }
.tsp-qr canvas, .tsp-qr img { width: 96px !important; height: 96px !important; }
@media (max-width: 900px) {
    .tsp-layout { grid-template-columns: minmax(0, 1fr); }
    .tsp-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
    .tsp-card { padding: 0.9rem 0.95rem; }
    .tsp-cat-grid { grid-template-columns: minmax(0, 1fr); }
    .tsp-matches li { flex-direction: column; gap: 0.1rem; }
    .tsp-share { flex-direction: column; align-items: flex-start; }
}

/* ---- Admin: signup invites ---- */
.inv-form { display: grid; gap: 0.2rem; max-width: 560px; }
.inv-check { display: flex; gap: 0.5rem; align-items: center; margin: 0.15rem 0; font-weight: 500; }
.inv-created { border-color: var(--accent-dark); background: #f6f9ea; }
.inv-created-body { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.inv-qr { flex: none; }
.inv-created-side { flex: 1 1 280px; min-width: 0; }
.inv-created-side input { width: 100%; }
.inv-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.inv-table-wrap { overflow-x: auto; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.inv-table th { text-align: left; font-size: 0.78rem; color: var(--muted); font-weight: 600; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--line); }
.inv-table td { padding: 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.inv-row-actions { white-space: nowrap; text-align: right; }
.inv-row-actions .btn { margin-left: 0.25rem; }
.invite-locked { background: var(--page-bg); color: var(--muted); cursor: not-allowed; }
.invite-banner { margin-bottom: 0.8rem; }
@media (max-width: 640px) {
    .inv-table thead { display: none; }
    .inv-table, .inv-table tbody, .inv-table tr, .inv-table td { display: block; width: 100%; }
    .inv-table tr { border-bottom: 1px solid var(--line); padding: 0.4rem 0; }
    .inv-table td { border: none; padding: 0.15rem 0; }
    .inv-table td::before { content: attr(data-label); display: inline-block; min-width: 4.5rem; color: var(--muted); font-size: 0.78rem; }
    .inv-row-actions { text-align: left; }
    .inv-row-actions .btn { margin: 0.3rem 0.25rem 0 0; }
}

/* ---- Admin dashboard (compact) ---- */
.app-main:has(.adm) { max-width: 1500px; }
.adm { display: flex; flex-direction: column; gap: 0.7rem; }
.adm-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
.adm-top h1 { margin: 0; font-size: 1.5rem; }
.adm-nav { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.adm-nav form { margin: 0; }
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.55rem; }
.adm-kpi { display: flex; flex-direction: column; gap: 0.05rem; text-align: left; padding: 0.55rem 0.8rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.adm-kpi.static { cursor: default; }
.adm-kpi:not(.static):hover { border-color: var(--accent-dark); }
.adm-kpi span { font-size: 0.74rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.adm-kpi strong { font-size: 1.45rem; line-height: 1.15; }
.adm-kpi small { font-size: 0.76rem; color: var(--muted); }
.adm-kpi.live { border-color: var(--accent-dark); background: #f6f9ea; }
.adm-attn { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; padding: 0.45rem 0.7rem; border-radius: 12px; background: #fff4d6; border: 1px solid #f0d68a; color: #5b4a0f; font-size: 0.88rem; }
.adm-chip { font: inherit; font-size: 0.82rem; border: 1px solid #e0c36b; background: #fff; color: #5b4a0f; border-radius: 999px; padding: 0.15rem 0.65rem; cursor: pointer; }
.adm-chip:hover { background: #fff9e6; }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); gap: 0.7rem; align-items: start; }
.adm-side { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; }
.adm-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 0.7rem 0.85rem; min-width: 0; }
.adm-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.adm-card-head h2 { margin: 0; font-size: 1rem; }
.adm-link { font-size: 0.82rem; }
.adm-search { flex: 1 1 180px; max-width: 280px; padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; font-size: 0.85rem; }
.adm-filters { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.adm-filter { font: inherit; font-size: 0.8rem; padding: 0.15rem 0.6rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.adm-filter span { color: var(--muted); margin-left: 0.15rem; }
.adm-filter.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.adm-filter.on span { color: #cfd6cb; }
.adm-list { list-style: none; margin: 0; padding: 0; }
.adm-row { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(5rem, 0.9fr) 4.6rem 4.4rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; padding: 0.4rem 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.adm-row:first-child { border-top: none; }
.adm-row.off { background: #fbf4f2; }
.adm-who { min-width: 0; }
.adm-who strong { overflow-wrap: anywhere; }
.adm-sub { font-size: 0.76rem; line-height: 1.3; overflow-wrap: anywhere; }
.adm-tag { margin-left: 0.3rem; font-size: 0.64rem; font-weight: 800; padding: 0 0.35rem; border-radius: 4px; background: var(--brand-tint); color: var(--accent-dark); vertical-align: middle; }
.adm-warn { color: #b3420a; }
.adm-pill { display: inline-block; font-size: 0.74rem; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--page-bg); border: 1px solid var(--line); white-space: nowrap; }
.adm-pill.ok { background: var(--brand-tint); border-color: transparent; color: var(--accent-dark); }
.adm-pill.trial { background: #e8f1fb; border-color: transparent; color: #1d4fc4; }
.adm-pill.bad { background: var(--danger-bg); border-color: transparent; color: var(--danger); }
.adm-state { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.adm-act { position: relative; display: flex; gap: 0.25rem; justify-content: flex-end; }
.adm-more-btn { padding-inline: 0.55rem; font-weight: 800; }
.adm-menu-backdrop { position: fixed; inset: 0; z-index: 20; }
.adm-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 21; min-width: 12rem; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 24px rgba(32, 29, 24, 0.18); padding: 0.25rem; display: flex; flex-direction: column; }
.adm-menu button { font: inherit; font-size: 0.85rem; text-align: left; background: none; border: none; padding: 0.4rem 0.6rem; border-radius: 6px; cursor: pointer; color: var(--ink); }
.adm-menu button:hover { background: var(--page-bg); }
.adm-menu button.danger { color: var(--danger); }
.adm-more { text-align: center; margin-top: 0.5rem; }
.adm-empty { margin: 0.4rem 0; font-size: 0.88rem; }
.adm-hint { font-size: 0.78rem; margin: 0 0 0.3rem; }
.adm-seg { display: flex; gap: 0.15rem; background: var(--page-bg); border-radius: 8px; padding: 0.15rem; }
.adm-seg button { font: inherit; font-size: 0.74rem; border: none; background: none; padding: 0.1rem 0.45rem; border-radius: 6px; cursor: pointer; color: var(--muted); }
.adm-seg button.on { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.adm-mini { list-style: none; margin: 0; padding: 0; }
.adm-mini li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding: 0.35rem 0; border-top: 1px solid var(--line); font-size: 0.86rem; }
.adm-mini li:first-child { border-top: none; }
.adm-mini li > div:first-child { min-width: 0; }
.adm-mini-act { display: flex; gap: 0.25rem; flex: none; }
@media (max-width: 1000px) {
    .adm-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
    .adm-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.15rem; }
    .adm-plan, .adm-use, .adm-when, .adm-state { grid-column: 1; display: inline-flex; gap: 0.4rem; align-items: center; }
    .adm-act { grid-column: 2; grid-row: 1 / span 3; align-self: start; }
    .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.adm-kpi .adm-idle { color: #b3420a; }

/* Booking code + QR on My Bookings */
.booking-code-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.8rem; padding: 0.6rem 0.8rem; background: var(--brand-tint); border: 1px solid var(--line); border-radius: 12px; }
.booking-code-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.booking-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.15rem; font-weight: 700; letter-spacing: 0.08em; }
.booking-qr-panel { margin-top: 0.6rem; text-align: center; }
.booking-qr-panel .qr-code-box { display: inline-block; background: #fff; padding: 0.5rem; border-radius: 12px; }
.booking-qr-panel p { font-size: 0.85rem; margin: 0.5rem 0 0; }

/* Venue-side booking check (what scanning the QR opens) */
.bk-check { max-width: 560px; margin: 0 auto; padding: 1rem 16px 2rem; }
.bk-check-card { margin-top: 1rem; }
.bk-check-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.bk-check-banner { border-radius: 18px; padding: 1.4rem 1rem; text-align: center; color: #fff; }
.bk-check-icon { width: 64px; height: 64px; margin: 0 auto 0.5rem; border-radius: 50%; background: rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center; font-size: 2.2rem; font-weight: 800; line-height: 1; }
.bk-check-state { font-size: 1.8rem; font-weight: 800; letter-spacing: 0.02em; }
.bk-check-sub { margin-top: 0.35rem; font-size: 0.98rem; opacity: 0.95; }
.bk-check-valid { background: #2f8a3d; }
.bk-check-later { background: #1f7a8c; }
.bk-check-pending { background: #c27a06; }
.bk-check-invalid { background: #b3261e; }
.bk-check-notfound { background: #5b6470; }
.bk-check-code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.1em; }
.bk-check-venue { color: var(--muted); margin-bottom: 0.6rem; }
.bk-check-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0.8rem 0 0; }
.bk-check-list dt { color: var(--muted); font-size: 0.9rem; }
.bk-check-list dd { margin: 0; font-weight: 600; }
.bk-check-rows { margin-top: 0.8rem; border-top: 1px solid var(--line); }
.bk-check-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.bk-check-chip { flex: none; font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.6rem; border-radius: 999px; }
.bk-check-chip.ok { background: #dff3e2; color: #1d6b2b; }
.bk-check-chip.later { background: #d9eef2; color: #14606f; }
.bk-check-chip.pending { background: #fdecc8; color: #8a5300; }
.bk-check-chip.bad { background: #f8dad8; color: #8f1d17; }

/* Team totals under a bracket's pair standings */
.team-totals { margin-top: 0.8rem; }
.team-totals-title { margin: 0 0 0.35rem; font-size: 0.85rem; }
.team-totals-title .muted { font-weight: 400; font-size: 0.75rem; }

/* ---- Public info pages: How it works, For court owners, Help ---- */
.info-page { max-width: 980px; margin: 0 auto; }
.info-hero { padding: 2.2rem 1.6rem; margin: 0.5rem 0 1.4rem; border-radius: 20px; text-align: center; background: linear-gradient(135deg, rgba(163, 198, 57, 0.18), rgba(56, 189, 248, 0.10)), var(--surface); border: 1px solid var(--line); }
.info-hero.compact { padding: 1.5rem 1.4rem; }
.info-kicker { display: inline-block; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 0.5rem; }
.info-hero h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 0.6rem; line-height: 1.15; }
.info-hero p { max-width: 640px; margin: 0 auto; color: var(--muted); }
.info-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1.2rem; }
.info-section { margin: 0 0 1.6rem; }
.info-section h2 { font-size: 1.25rem; margin: 0 0 0.3rem; }
.info-sub { color: var(--muted); font-size: 0.9rem; margin: 0.2rem 0 0.8rem; }
.info-note { text-align: center; font-weight: 700; color: var(--accent-dark); margin: 1rem 0 0; }

.info-steps { list-style: none; counter-reset: step; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.55rem; }
.info-steps li { counter-increment: step; position: relative; padding: 0.7rem 0.9rem 0.7rem 3rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 0.93rem; line-height: 1.4; }
.info-steps li::before { content: counter(step); position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%); width: 1.7rem; height: 1.7rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.85rem; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); }
.info-steps a { color: var(--accent-dark); font-weight: 700; }

.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; margin-top: 0.8rem; }
.info-card { padding: 1rem 1.05rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: transform 0.15s, box-shadow 0.15s; }
.info-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }
.info-ic { font-size: 1.5rem; line-height: 1; }
.info-card h3 { font-size: 0.98rem; margin: 0.5rem 0 0.25rem; }
.info-card p { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.4; }

.faq { display: grid; gap: 0.5rem; margin-top: 0.6rem; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0 1rem; }
.faq summary { cursor: pointer; padding: 0.8rem 0; font-weight: 700; font-size: 0.93rem; list-style: none; display: flex; justify-content: space-between; gap: 0.8rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.2rem; line-height: 1; color: var(--accent-dark); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.9rem; line-height: 1.5; }

.info-final { text-align: center; padding: 1.8rem 1.2rem; margin: 1.6rem 0 0.5rem; border-radius: 18px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; }
.info-final h2 { margin: 0 0 0.3rem; color: #fff; }
.info-final p { margin: 0 0 1rem; opacity: 0.92; }
.info-final .btn { margin: 0.2rem; }
.info-final .btn-primary { background: #fff; color: var(--accent-dark); border-color: #fff; }

/* ---- /book: compact venue directory (search + filters + small cards) ---- */
.dk { max-width: 1200px; margin: 0 auto; }
.dk-hero { text-align: center; padding: 1.4rem 1rem 1rem; margin-bottom: 1rem; border-radius: 18px; background: linear-gradient(135deg, rgba(163, 198, 57, 0.16), rgba(56, 189, 248, 0.08)), var(--surface); border: 1px solid var(--line); }
.dk-kicker { display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 0.3rem; }
.dk-hero h1 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); margin: 0 0 0.3rem; line-height: 1.15; }
.dk-hero p { margin: 0 0 0.9rem; color: var(--muted); font-size: 0.92rem; }
.dk-search { position: relative; max-width: 560px; margin: 0 auto; }
.dk-search input { width: 100%; box-sizing: border-box; padding: 0.7rem 2.4rem 0.7rem 2.5rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font-size: 0.95rem; }
.dk-search input:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(163, 198, 57, 0.25); }
.dk-search-icon { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.dk-search-clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; border: none; background: transparent; font-size: 1.2rem; color: var(--muted); cursor: pointer; border-radius: 50%; }
.dk-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 0.8rem; }
.dk-chip { padding: 0.3rem 0.8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.dk-chip:hover { border-color: var(--accent-dark); }
.dk-chip.on { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.dk-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0.4rem 0 0.8rem; }
.dk-results-head strong { display: block; font-size: 1rem; }
.dk-results-head .muted { font-size: 0.8rem; }
.dk-controls { display: flex; align-items: center; gap: 0.6rem; }
.dk-sort { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.dk-sort select { padding: 0.3rem 0.5rem; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 0.82rem; }
.dk-view { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.dk-view button { padding: 0.28rem 0.6rem; border: none; background: var(--surface); cursor: pointer; font-size: 0.95rem; color: var(--muted); }
.dk-view button.on { background: var(--accent-dark); color: #fff; }

.dk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0.8rem; }
.dk-list { display: grid; gap: 0.6rem; }
.dk-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; animation: dash-in 0.35s ease-out both; animation-delay: calc(var(--i, 0) * 40ms); }
.dk-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); border-color: var(--accent-dark); }
.dk-photo { position: relative; height: 112px; background: linear-gradient(135deg, #e7f0cc, #cfe8f7); overflow: hidden; flex: 0 0 auto; }
.dk-photo > img:not(.dk-logo) { width: 100%; height: 100%; object-fit: cover; display: block; }
.dk-photo-fallback { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2rem; }
.dk-tag { position: absolute; top: 0.45rem; left: 0.45rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: rgba(17, 24, 39, 0.78); color: #fff; font-size: 0.65rem; font-weight: 700; }
.dk-logo { position: absolute; right: 0.45rem; bottom: 0.45rem; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #fff; }
.dk-body { padding: 0.55rem 0.7rem 0.7rem; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.dk-badges { display: flex; gap: 0.3rem; }
.dk-badge { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.08rem 0.4rem; border-radius: 4px; background: rgba(163, 198, 57, 0.22); color: var(--accent-dark); }
.dk-name { font-weight: 800; font-size: 0.95rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-addr { font-size: 0.74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-stats { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; color: var(--muted); margin-top: 0.1rem; }
.dk-price strong { color: var(--ink); font-size: 0.9rem; }
.dk-amenities { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.dk-amenities span { font-size: 0.64rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--page-bg); border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.dk-amenities .more { font-weight: 700; }
.dk-cta { margin-top: 0.2rem; font-size: 0.78rem; font-weight: 800; color: var(--accent-dark); }

/* list view: a thin row per venue */
.dk-list .dk-card { flex-direction: row; align-items: stretch; }
.dk-list .dk-photo { width: 130px; height: auto; min-height: 92px; }
.dk-list .dk-body { flex: 1; justify-content: center; padding: 0.5rem 0.8rem; }
.dk-list .dk-stats { justify-content: flex-start; gap: 1rem; }
@media (max-width: 520px) { .dk-list .dk-photo { width: 96px; } }

.dk-skeleton { pointer-events: none; }
.dk-pager { display: flex; justify-content: center; align-items: center; gap: 0.8rem; margin: 1rem 0; }
.dk-promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0.7rem; margin-top: 1.4rem; }
.dk-promo { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.8rem 0.95rem; border-radius: 14px; background: linear-gradient(135deg, rgba(163, 198, 57, 0.14), transparent 80%), var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s; }
.dk-promo:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); }
.dk-promo strong { font-size: 0.92rem; }
.dk-promo span { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.dk-promo em { font-style: normal; font-size: 0.78rem; font-weight: 800; color: var(--accent-dark); margin-top: 0.2rem; }
@media (prefers-reduced-motion: reduce) { .dk-card { animation: none; } .dk-card:hover, .dk-promo:hover { transform: none; } }

/* ===== Venue booking page (/book/{slug}) ===== */
.book-page.vb-page { max-width: 1180px; padding-bottom: 6rem; }
.vb-page .vb-card { background: #fffdf8; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 10px 30px -12px rgba(24,28,26,.14); }
.vb-crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.8rem; color: var(--muted); margin: 0 0 0.8rem; }
.vb-crumbs a { color: inherit; text-decoration: none; }
.vb-crumbs a:hover { color: var(--ink); }
.vb-crumbs strong { color: var(--ink); }
.vb-h2 { font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; margin: 0; }

.vb-venue { overflow: hidden; margin-bottom: 1rem; }
.vb-banner { position: relative; height: 170px; overflow: hidden; background: radial-gradient(420px 220px at 85% 10%, rgba(165,198,57,.35), transparent 65%), radial-gradient(300px 200px at 0 100%, rgba(93,139,55,.5), transparent 70%), var(--ink); }
.vb-banner > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vb-banner.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.35)); }
.vb-banner-court { position: absolute; right: -30px; top: -10px; height: 230px; opacity: .28; }
.vb-ball { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbe98a, var(--energy) 60%, #d9b52c); box-shadow: inset -3px -4px 0 rgba(0,0,0,.08); }
.vb-venue-body { padding: 0 1.5rem 1.4rem; position: relative; }
.vb-logo { width: 100px; height: 100px; border-radius: 50%; border: 5px solid #fffdf8; background: #000; margin-top: -50px; box-shadow: 0 8px 20px -6px rgba(0,0,0,.35); display: block; object-fit: cover; position: relative; }
.vb-logo-fallback { display: grid; place-items: center; background: var(--ink); color: var(--accent); font-family: 'Fraunces', serif; font-weight: 800; font-size: 2.4rem; }
.vb-venue-top { display: flex; gap: 1rem; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-top: 0.7rem; }
.vb-name { font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: 2.1rem; line-height: 1.05; margin: 0; }
.vb-addr { margin: 0.5rem 0 0; color: var(--muted); display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.9rem; }
.vb-addr svg { flex: none; margin-top: 2px; }
.vb-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.vb-btn { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; border: 0; border-radius: 999px; padding: 0.6rem 1.1rem; font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; text-decoration: none; transition: transform .12s, background .15s; }
.vb-btn-line { background: #fff; border: 1px solid var(--line); color: var(--ink); }
.vb-btn-line:hover { border-color: var(--ink); }
.vb-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.1rem; }
.vb-chip { display: flex; align-items: center; gap: 0.65rem; padding: 0.6rem 0.9rem 0.6rem 0.6rem; border-radius: 14px; background: var(--page-bg); border: 1px solid var(--line); }
.vb-chip-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(165,198,57,.28); color: var(--accent-dark); display: grid; place-items: center; flex: none; }
.vb-chip small { display: block; font-size: 0.68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.vb-chip b { font-size: 0.88rem; }

.vb-tabs { display: flex; gap: 0.4rem; margin: 0 0 1rem; }
.vb-tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0.5rem 1.1rem; font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--ink); cursor: pointer; }
.vb-tab:hover { border-color: var(--ink); }
.vb-tab.active { background: var(--ink); border-color: var(--ink); color: var(--page-bg); }

.vb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; align-items: start; }
.vb-book-h { padding: 1.3rem 1.5rem 1rem; border-bottom: 1px solid var(--line); }
.vb-book-h .vb-h2 { font-size: 1.6rem; }
.vb-book-h p { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.88rem; max-width: 52ch; }

.vb-dates { padding: 0.9rem 1.5rem 0.8rem; border-bottom: 1px solid var(--line); }
.vb-strip { display: flex; gap: 0.5rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; padding: 4px 2px 8px; }
.vb-day { flex: none; width: 66px; padding: 0.55rem 0; border-radius: 16px; border: 1px solid var(--line); background: #fff; text-align: center; scroll-snap-align: start; font: inherit; color: var(--ink); cursor: pointer; transition: all .15s; }
.vb-day small { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.vb-day b { display: block; font-size: 0.92rem; margin-top: 1px; }
.vb-day:hover { border-color: var(--accent-dark); }
.vb-day.on { background: var(--ink); border-color: var(--ink); color: var(--page-bg); }
.vb-day.on small { color: var(--accent); }
.vb-dates-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--muted); }
.vb-dates-foot input[type="date"] { width: auto; padding: 0.3rem 0.5rem; border-radius: 10px; font-size: 0.85rem; }

.vb-sched { padding: 1.1rem 1.5rem 1.5rem; }
.vb-sched-h h3 { margin: 0; font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.15rem; }
.vb-sched-h p { margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--muted); }
.vb-legend { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0.9rem 0; font-size: 0.76rem; color: var(--muted); font-weight: 500; }
.vb-legend span { display: flex; align-items: center; gap: 0.45rem; }
.vb-legend i { width: 14px; height: 14px; border-radius: 5px; display: block; }
.vb-lg-a { background: #eaf5dc; border: 1px solid #cfe5b2; }
.vb-lg-s { background: var(--ink); }
.vb-lg-b { background: repeating-linear-gradient(135deg, #efebe1 0 4px, #e4dfd2 4px 8px); border: 1px solid var(--line); }
.vb-lg-x { background: #f1d9d4; border: 1px solid #e4bdb6; }

.vb-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.vb-table { min-width: calc(104px + var(--courts) * 112px); }
.vb-row { display: grid; grid-template-columns: 124px repeat(var(--courts), minmax(0, 1fr)); border-top: 1px solid var(--line); }
.vb-row.vb-head { background: var(--page-bg); border-top: 0; border-bottom: 1px solid var(--line); }
.vb-time-h { padding: 0.75rem 0.9rem; font-size: 0.68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--muted); display: flex; align-items: center; }
.vb-court-h { padding: 0.7rem 0.8rem; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.vb-court-av { width: 34px; height: 34px; border-radius: 10px; background: var(--ink); display: grid; place-items: center; color: var(--accent); flex: none; }
.vb-court-h b { display: block; font-size: 0.86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-court-h small { color: var(--muted); font-size: 0.74rem; }
.vb-time { padding: 0 0.9rem; display: flex; align-items: center; font-size: 0.78rem; font-weight: 600; color: #2a302c; white-space: nowrap; }
.vb-slot { margin: 5px; height: 42px; border: 1px solid transparent; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-weight: 700; font-size: 0.88rem; padding: 0 0.3rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vb-slot.open { background: #eaf5dc; color: var(--accent-dark); cursor: pointer; transition: background .12s, transform .1s, box-shadow .12s; }
.vb-slot.open:hover { background: #dcedc5; transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgba(70,105,42,.55); }
.vb-slot.open.sel { background: var(--ink); color: var(--accent); box-shadow: 0 8px 16px -8px rgba(24,28,26,.6); }
.vb-slot.open.sel:hover { background: #2a302c; }
.vb-slot.booked { background: repeating-linear-gradient(135deg, #efebe1 0 5px, #e6e1d4 5px 10px); color: #a49f92; font-weight: 600; font-size: 0.78rem; }
.vb-slot.blocked { background: #f1d9d4; color: #a3322a; font-weight: 600; font-size: 0.74rem; }
.vb-slot.none { color: #b9bcc2; font-weight: 400; }
.vb-slot:focus-visible, .vb-day:focus-visible, .vb-btn:focus-visible { outline: 3px solid rgba(93,139,55,.55); outline-offset: 2px; }

.vb-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 1rem; }
.vb-sum { padding: 1.3rem; }
.vb-sum .vb-h2 { font-size: 1.35rem; }
.vb-sub { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.82rem; }
.vb-sum-venue { display: flex; gap: 0.7rem; align-items: center; margin: 1rem 0; padding: 0.6rem 0.75rem; border-radius: 14px; background: var(--page-bg); border: 1px solid var(--line); }
.vb-sum-venue img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.vb-sum-venue b { font-size: 0.88rem; }
.vb-sum-venue small { display: block; color: var(--muted); font-size: 0.75rem; }
.vb-empty { padding: 1.3rem 0.6rem; text-align: center; color: var(--muted); font-size: 0.82rem; border: 1.5px dashed var(--line); border-radius: 14px; background: #fff; }
.vb-empty svg { display: block; margin: 0 auto 0.5rem; color: var(--feijoa); }
.vb-sel-list { display: flex; flex-direction: column; gap: 0.45rem; max-height: 290px; overflow: auto; }
.vb-sel-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.4rem 0.55rem 0.75rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.vb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.vb-sel-item > div { flex: 1; min-width: 0; }
.vb-sel-item b { font-size: 0.84rem; display: block; }
.vb-sel-item small { color: var(--muted); font-size: 0.75rem; }
.vb-p { font-weight: 700; font-size: 0.88rem; }
.vb-sel-item button { border: 0; background: transparent; width: 26px; height: 26px; border-radius: 50%; color: var(--muted); cursor: pointer; padding: 0; font-size: 0.75rem; }
.vb-sel-item button:hover { background: rgba(24,28,26,.08); color: var(--ink); }
.vb-total { display: flex; justify-content: space-between; align-items: baseline; margin: 1.1rem 0 0.9rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.vb-total > span { font-weight: 600; color: var(--muted); }
.vb-total small { display: block; font-size: 0.75rem; font-weight: 500; }
.vb-total b { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.8rem; }
.vb-go { width: 100%; justify-content: center; padding: 0.9rem 1.1rem; font-size: 0.95rem; background: var(--ink); color: var(--page-bg); }
.vb-go:hover:not(:disabled) { background: #2a302c; transform: translateY(-1px); }
.vb-go:disabled { background: rgba(165,198,57,.35); color: rgba(24,28,26,.45); cursor: not-allowed; }
.vb-arr { color: var(--accent); }
.vb-clear { display: block; margin: 0.8rem auto 0; border: 0; background: none; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vb-clear:hover { color: var(--ink); }
.vb-perks { padding: 0.3rem 1.2rem; }
.vb-perk { display: flex; gap: 0.75rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.vb-perk:first-child { border-top: 0; }
.vb-perk b { font-size: 0.84rem; display: block; }
.vb-perk p { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--muted); }

.vb-mbar { display: none; }

@media (max-width: 1020px) {
    .vb-grid { grid-template-columns: minmax(0, 1fr); }
    .vb-side { display: none; }
    .vb-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: rgba(255,253,248,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)); align-items: center; gap: 0.8rem; box-shadow: 0 -10px 30px -16px rgba(24,28,26,.3); }
    .vb-m-info { flex: 1; min-width: 0; }
    .vb-m-info small { display: block; font-size: 0.75rem; color: var(--muted); }
    .vb-m-info b { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.3rem; }
    .vb-mbar .vb-go { width: auto; padding: 0.75rem 1.3rem; }
    .vb-m-clear { margin: 0; }
}
@media (max-width: 640px) {
    .book-page.vb-page { padding-left: 0.2rem; padding-right: 0.2rem; }
    .vb-banner { height: 120px; }
    .vb-venue-body { padding: 0 1.1rem 1.1rem; }
    .vb-logo { width: 80px; height: 80px; margin-top: -40px; }
    .vb-name { font-size: 1.65rem; }
    .vb-actions { width: 100%; }
    .vb-actions .vb-btn { flex: 1; justify-content: center; }
    .vb-chip { flex: 1 1 100%; }
    .vb-book-h { padding: 1.1rem; }
    .vb-dates { padding: 0.8rem 0.7rem 0.6rem; }
    .vb-sched { padding: 1rem 0.7rem 1.2rem; }
    .vb-row { grid-template-columns: 78px repeat(var(--courts), minmax(0, 1fr)); }
    .vb-table { min-width: calc(78px + var(--courts) * 96px); }
    .vb-time { padding: 0 0.5rem; font-size: 0.7rem; white-space: normal; line-height: 1.25; }
    .vb-court-h { padding: 0.6rem 0.4rem; gap: 0.4rem; }
    .vb-court-av { display: none; }
    .vb-slot { margin: 4px; height: 40px; font-size: 0.82rem; }
    .vb-slot svg { display: none; }
}

/* ===== Open Play session board (host console) redesign ===== */
.session-head { align-items: flex-start; margin-bottom: 0.9rem; }
.session-head h1 { font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: 2.1rem; line-height: 1.05; margin: 0; }
.session-head .sb-title { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.sb-pill { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.72rem; letter-spacing: .07em; padding: 0.35rem 0.7rem; border-radius: 999px; background: #efebe1; color: var(--muted); }
.sb-pill b { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-dark); animation: sb-pulse 1.8s infinite; }
.sb-pill-active { background: rgba(165,198,57,.25); color: #46692a; }
.sb-pill-completed { background: #e3e6e0; color: #4b514a; }
@keyframes sb-pulse { 0% { box-shadow: 0 0 0 0 rgba(93,139,55,.55); } 70%, 100% { box-shadow: 0 0 0 8px rgba(93,139,55,0); } }
.sb-sub { margin-top: 0.4rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.86rem; }
.sb-sub span { display: inline-flex; align-items: center; gap: 0.35rem; }
.session-head .board-settings { gap: 0.4rem; }
.session-head .btn-sm { background: #fff; border: 1px solid var(--line); color: var(--ink); font-weight: 700; font-size: 0.8rem; padding: 0.45rem 0.85rem; border-radius: 999px; min-height: 36px; }
.session-head .btn-sm:hover { border-color: var(--ink); }
.session-head .head-end { background: #fff; border-color: #e9c4be; color: #c0392b; }
.session-head .head-end:hover { background: #fdf1ef; border-color: #c0392b; }

.sb-hint { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 0.9rem; padding: 0.85rem 1rem; border-radius: 16px; background: linear-gradient(90deg, #eef6dc, #f8f3d9); border: 1px solid #dbe8bf; }
.sb-hint-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; flex: none; }
.sb-hint b { display: block; font-size: 0.95rem; }
.sb-hint span:not(.sb-hint-ic) { color: #2a302c; font-size: 0.86rem; }

.sb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.6fr); gap: 0.75rem; margin: 0 0 1.1rem; }
.sb-stat { background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; padding: 0.8rem 1rem; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 10px 30px -14px rgba(24,28,26,.16); display: flex; gap: 0.75rem; align-items: center; }
.sb-stat-ic { width: 38px; height: 38px; border-radius: 12px; background: rgba(165,198,57,.25); color: #46692a; display: grid; place-items: center; flex: none; }
.sb-stat small { display: block; font-size: 0.68rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.sb-stat b { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.sb-stat b em { font-style: normal; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.88rem; color: var(--muted); }
.sb-venue { background: var(--ink); border-radius: 16px; padding: 0.7rem 1rem; display: flex; align-items: center; background-image: radial-gradient(240px 120px at 100% 0, rgba(165,198,57,.35), transparent 70%); box-shadow: 0 10px 30px -14px rgba(24,28,26,.3); min-width: 0; }
.sb-venue .host-venue-bar { flex: 1; margin: 0; padding: 0; border: 0; background: transparent; color: #faf6ee; }
.sb-venue .host-venue-label { color: var(--accent); font-size: 0.7rem; letter-spacing: .07em; text-transform: uppercase; }
.sb-venue .host-venue-bar .muted { color: #c9cdc4; }
.sb-venue .host-venue-chip { background: rgba(255,255,255,.12); }
.sb-venue .host-venue-bar .btn { background: var(--accent); color: var(--ink); border-color: var(--accent); border-radius: 999px; font-weight: 700; }

.sb-mseg { display: none; }

.session-board.board-layout:has(> .sb-rail) { grid-template-columns: minmax(0, 1fr) 380px; gap: 1.4rem; }
.session-board .panel-title { margin-bottom: 0.9rem; }
.session-board .panel-title h2 { font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: 1.45rem; }
.session-board .panel-title h2 svg { width: 20px; height: 20px; }
.sb-n { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.75rem; background: var(--ink); color: #faf6ee; padding: 0.15rem 0.55rem; border-radius: 999px; }
.session-board .panel-title .btn-sm, .session-board .upnext-section .btn-sm { background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; padding: 0.4rem 0.85rem; }
.session-board .panel-title .btn-sm:hover { border-color: var(--ink); }

/* court cards */
.session-board .court-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.session-board .court-card { position: relative; overflow: hidden; padding: 1.1rem; border-radius: 20px; border: 1px solid var(--line); border-top: 1px solid var(--line); background: #fffdf8; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 10px 30px -14px rgba(24,28,26,.16); }
.session-board .court-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--line); }
.session-board .court-card.status-open::before { background: var(--feijoa); }
.session-board .court-card.status-inuse::before { background: linear-gradient(90deg, var(--accent-dark), var(--accent)); }
.session-board .court-card.status-inuse { border-color: #cfe0a8; box-shadow: 0 0 0 3px rgba(165,198,57,.18), 0 10px 30px -14px rgba(24,28,26,.16); }
.session-board .court-card .court-title { margin-bottom: 0.8rem; font-size: 1.05rem; }
.session-board .court-card .court-title .badge { font-size: 0.68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 0.3rem 0.65rem; border-radius: 999px; background: rgba(163,215,142,.35); color: #46692a; }
.session-board .court-card .court-title .badge-inuse { background: var(--ink); color: var(--accent); }
.session-board .court-card .court-title .badge-closed { background: #efebe1; color: var(--muted); }
.session-board .match-teams { gap: 0.55rem; margin-bottom: 0.8rem; align-items: stretch; }
.session-board .team { padding: 0; border-radius: 14px; border: 1px solid var(--line); background: #fff; overflow: hidden; }
.session-board .team .player { font-size: 0.86rem; font-weight: 600; padding: 0.45rem 0.6rem; line-height: 1.25; }
.session-board .team .player + .player { border-top: 1px solid var(--line); }
.session-board .player-rating { font-size: 0.7rem; font-weight: 600; }
.session-board .team-label { font-size: 0.66rem; letter-spacing: .1em; padding: 0.3rem 0.6rem; margin: 0; }
.session-board .team-label-1 { background: #3b6fd8; }
.session-board .team-label-2 { background: #5d8b37; }
.session-board .vs { font-family: 'Fraunces', serif; font-weight: 800; font-size: 0.8rem; letter-spacing: .05em; align-self: center; }
.sb-live-bar { margin: 0 0 0.6rem; }
.sb-live-bar small { display: block; color: var(--muted); font-weight: 600; font-size: 0.74rem; }
.session-board .timer { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.75rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; margin: 0; }
.session-board .win-buttons { gap: 0.5rem; margin-top: 0.7rem; }
.session-board .win-btn { padding: 0.65rem 0.4rem; font-size: 0.82rem; border-radius: 999px; }
.session-board .win-btn-1 { background: #3b6fd8; }
.session-board .win-btn-2 { background: #5d8b37; }
.session-board .court-card .btn-sm { font-size: 0.82rem; font-weight: 700; padding: 0.55rem 0.9rem; border-radius: 999px; min-height: 40px; }
.session-board .court-card .btn-accent { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.session-board .court-card .btn-accent:hover:not(:disabled) { background: #b3d447; }
.session-board .upnext-badge { background: rgba(163,215,142,.35); color: #46692a; font-weight: 700; letter-spacing: .07em; border-radius: 999px; padding: 0.25rem 0.6rem; margin-bottom: 0.55rem; }
.session-board .court-empty { border: 2px dashed var(--line); border-radius: 14px; padding: 1.2rem 0.8rem; text-align: center; color: var(--muted); font-size: 0.82rem; background: rgba(255,255,255,.5); margin-bottom: 0.6rem; }
.session-board .court-remove { display: block; margin: 0.7rem auto 0; background: none; border: 0; font: inherit; font-size: 0.76rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.session-board .court-remove:hover { color: #c0392b; }

/* up next */
.session-board .upnext-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.session-board .upnext-card { min-width: 0; padding: 1rem; border-radius: 20px; background: linear-gradient(180deg, #f3f8e8, #fffdf8 60%); border: 1px solid #dbe8bf; box-shadow: 0 1px 2px rgba(24,28,26,.05); }
.session-board .upnext-card.placeholder { background: rgba(255,255,255,.6); border: 1px dashed var(--line); }
.sb-nx { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; }
.sb-nx i { font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 0.75rem; }
.session-board .upnext-card .btn-sm { border-radius: 999px; font-weight: 700; }

/* standings */
.session-board .standings-section { padding: 0.5rem 0.7rem 0.8rem; border-radius: 20px; }
.session-board .standings-section .panel-title { padding: 0.5rem 0.4rem 0; margin-bottom: 0.4rem; }
.session-board .standings-section .player-table th { font-size: 0.68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.session-board .standings-section .player-table td { padding: 0.5rem 0.5rem; border-top: 1px solid var(--line); }
.session-board .standings-section .player-table td:nth-child(2) { font-weight: 600; }
.sb-rk { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 0.75rem; background: #efebe1; color: var(--muted); }
.sb-rk-1 { background: var(--energy); color: #6d5600; }
.sb-rk-2 { background: #e3e6e0; color: #4b514a; }
.sb-rk-3 { background: #f0cfa4; color: #7a4a12; }
.sb-winbar { display: inline-block; width: 56px; height: 6px; border-radius: 99px; background: #efebe1; overflow: hidden; vertical-align: middle; margin-right: 0.5rem; }
.sb-winbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); border-radius: 99px; }

/* recent matches */
.session-board .recent-list { display: flex; flex-direction: column; gap: 0.4rem; }
.session-board .recent-row { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0.55rem 0.8rem; }
.session-board h2 { font-family: 'Fraunces', serif; font-weight: 800; }

/* queue sidebar */
.session-board > .sb-rail { display: flex; flex-direction: column; gap: 0.9rem; align-self: start; }
.sb-rail > .queue-card { padding: 0.9rem; border-radius: 20px; }
.sb-tabs { display: flex; gap: 4px; padding: 5px; margin: 0 0 0.7rem; background: #efebe1; border-radius: 14px; }
.sb-tab { flex: 1; border: 0; background: none; border-radius: 10px; padding: 0.55rem 0.4rem; font: inherit; font-weight: 700; font-size: 0.82rem; color: var(--muted); display: flex; gap: 0.45rem; align-items: center; justify-content: center; cursor: pointer; }
.sb-tab em { font-style: normal; font-size: 0.7rem; background: rgba(24,28,26,.1); padding: 1px 7px; border-radius: 99px; }
.sb-tab.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(24,28,26,.12); }
.sb-tab.on em { background: var(--ink); color: var(--accent); }
.sb-side-tools { display: flex; gap: 0.4rem; align-items: center; justify-content: flex-end; margin: 0 0 0.6rem; }
.session-board .queue-card .field input { border-radius: 12px; padding: 0.6rem 0.8rem; font-size: 0.86rem; }
.session-board .queue-card .queue-list { gap: 0.45rem; }
.session-board .queue-card .queue-row { gap: 0.65rem; padding: 0.55rem 0.7rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.session-board .queue-card .queue-position { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; }
.session-board .queue-card .queue-name { font-size: 0.88rem; font-weight: 600; }
.session-board .queue-card .btn-sm { border-radius: 999px; font-weight: 700; background: #fff; border: 1px solid var(--line); font-size: 0.74rem; padding: 0.3rem 0.7rem; }
.session-board .queue-card .btn-primary, .session-board .queue-card .btn-accent { background: var(--ink); color: #faf6ee; border-color: var(--ink); }

@media (max-width: 1180px) {
    .sb-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sb-venue { grid-column: 1 / -1; }
}
@media (max-width: 1020px) {
    .session-board.board-layout:has(> .sb-rail) { grid-template-columns: minmax(0, 1fr); }
    .session-board > .sb-rail { position: static; max-height: none; }
    .sb-rail > .queue-card { position: static; }
    .sb-rail > .queue-card, .sb-rail > .left-card { max-height: none; overflow: visible; flex: none; }
    .sb-mseg { display: flex; gap: 6px; padding: 8px; margin: 0 0 1rem; background: rgba(250,246,238,.92); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 16px; }
    .sb-seg { flex: 1; border: 0; background: none; border-radius: 12px; padding: 0.7rem 0.4rem; font: inherit; font-weight: 700; font-size: 0.86rem; color: var(--muted); cursor: pointer; }
    .sb-seg.on { background: var(--ink); color: #faf6ee; }
    .sb-view-c > .sb-rail { display: none; }
    .sb-view-q > .sb-main { display: none; }
}
@media (max-width: 700px) {
    .session-head h1 { font-size: 1.65rem; }
    .sb-stats { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .sb-stat { padding: 0.65rem 0.75rem; gap: 0.6rem; }
    .sb-stat b { font-size: 1.25rem; }
    .sb-hint { flex-wrap: wrap; }
    .session-board .court-grid, .session-board .upnext-grid { grid-template-columns: 1fr; }
    .session-board .match-teams { flex-direction: column; }
    .session-board .match-teams .team { width: 100%; }
}

.board-header.live-header.session-head h1 { color: var(--ink); }
.board-header.live-header.session-head .sb-sub { color: var(--muted); }

/* ===== Tournaments landing page (/tournaments) ===== */
.tn-page { max-width: 1240px; margin: 0 auto; }
.tn-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; padding-top: 0.6rem; }
.tn-eyebrow { display: inline-flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #46692a; background: rgba(165,198,57,.25); padding: 0.4rem 0.8rem; border-radius: 999px; }
.tn-h1 { margin: 0.9rem 0 0.5rem; font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1; display: flex; align-items: center; gap: 1rem; color: var(--ink); }
.tn-tro { width: clamp(44px, 5vw, 60px); height: clamp(44px, 5vw, 60px); border-radius: 18px; background: var(--ink); color: var(--accent); display: grid; place-items: center; flex: none; transform: rotate(-6deg); box-shadow: 0 10px 24px -10px rgba(24,28,26,.6); }
.tn-h1 em { font-style: italic; font-weight: 600; color: var(--accent-dark); }
.tn-hero p { margin: 0; color: var(--muted); font-size: 1.06rem; max-width: 46ch; }

.tn-btn { white-space: nowrap; border: 1px solid transparent; border-radius: 999px; padding: 0.65rem 1.15rem; min-height: 42px; font: inherit; font-weight: 700; font-size: 0.9rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; text-decoration: none; cursor: pointer; transition: transform .12s, background .15s; }
.tn-btn-ink { background: var(--ink); color: var(--page-bg); }
.tn-btn-ink:hover { background: #2a302c; transform: translateY(-1px); }
.tn-btn-lime { background: var(--accent); color: var(--ink); }
.tn-btn-lime:hover { background: #b3d447; transform: translateY(-1px); }
.tn-btn-danger { background: #fff; border-color: #e9c4be; color: #c0392b; }
.tn-btn-sm { min-height: 36px; padding: 0.4rem 0.9rem; font-size: 0.82rem; }

.tn-stats { display: flex; gap: 0.75rem; margin: 1.6rem 0 0; flex-wrap: wrap; }
.tn-stat { background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; padding: 0.75rem 1.1rem; display: flex; align-items: baseline; gap: 0.6rem; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -16px rgba(24,28,26,.2); }
.tn-stat b { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.75rem; line-height: 1; }
.tn-stat span { font-size: 0.75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.tn-stat.lv b { color: var(--accent-dark); }

.tn-bar { display: flex; gap: 0.9rem; justify-content: space-between; align-items: center; margin: 1.8rem 0 1.3rem; flex-wrap: wrap; }
.tn-bar > * { min-width: 0; }
.tn-seg { display: flex; gap: 4px; padding: 5px; background: #efebe1; border-radius: 999px; }
.tn-seg-mode { display: inline-flex; margin: 1.2rem 0 0; }
.tn-fb { white-space: nowrap; flex: none; border: 0; background: none; border-radius: 999px; padding: 0.5rem 1rem; font: inherit; font-weight: 700; font-size: 0.88rem; color: var(--muted); display: flex; gap: 0.5rem; align-items: center; min-height: 40px; cursor: pointer; }
.tn-fb em { font-style: normal; font-size: 0.72rem; background: rgba(24,28,26,.1); padding: 1px 8px; border-radius: 99px; }
.tn-fb.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(24,28,26,.14); }
.tn-fb.on em { background: var(--ink); color: var(--accent); }
.tn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-dark); }
.tn-search { position: relative; flex: 0 1 320px; width: 100%; }
.tn-search input { width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0.7rem 1rem 0.7rem 2.6rem; min-height: 44px; font: inherit; }
.tn-search input:focus { outline: 2px solid rgba(93,139,55,.5); border-color: var(--accent-dark); }
.tn-search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--muted); }

.tn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.4rem; margin-top: 1.2rem; }
.tn-bar + .tn-grid { margin-top: 0; }
.tn-card { position: relative; background: #fffdf8; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -16px rgba(24,28,26,.2); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; animation: tn-in .35s ease both; }
@keyframes tn-in { from { opacity: 0; transform: translateY(10px); } }
.tn-card:hover { transform: translateY(-4px); box-shadow: 0 2px 3px rgba(24,28,26,.05), 0 22px 44px -18px rgba(24,28,26,.3); }
.tn-poster { position: relative; aspect-ratio: 796 / 300; background-size: cover; background-position: center; background-color: var(--ink); overflow: hidden; }
.tn-poster-ph { background-image: linear-gradient(135deg, #181c1a, #5d8b37 55%, #a5c639); }
.tn-poster-ic { position: absolute; right: -14px; bottom: -22px; opacity: .22; color: #fff; }
.tn-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,28,26,.35) 0, transparent 38%, transparent 70%, rgba(24,28,26,.18)); }
.tn-tags { position: absolute; z-index: 2; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; gap: 8px; }
.tn-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; font-weight: 700; padding: 0.35rem 0.7rem; border-radius: 999px; background: rgba(255,253,248,.96); box-shadow: 0 2px 8px -2px rgba(0,0,0,.25); color: var(--ink); }
.tn-tag.st-live { background: var(--ink); color: var(--accent); }
.tn-tag.st-live b { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: tn-blink 1.3s infinite; }
@keyframes tn-blink { 50% { opacity: .25; } }
.tn-tag.st-up { background: var(--energy); color: #4d3d00; }
.tn-tag.st-done { color: #46692a; }
.tn-body { padding: 1.25rem 1.35rem 1.35rem; display: flex; flex-direction: column; gap: 0.85rem; flex: 1; }
.tn-body h3 { margin: 0; font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: 1.5rem; line-height: 1.12; }
.tn-org { display: flex; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.88rem; }
.tn-org i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 0.68rem; font-weight: 700; flex: none; }
.tn-org b { color: #2a302c; font-weight: 600; }
.tn-cats { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.tn-chip { font-size: 0.78rem; font-weight: 600; padding: 0.35rem 0.75rem; border-radius: 999px; background: #f3eee2; border: 1px solid var(--line); color: #2a302c; }
.tn-chip.more { background: rgba(165,198,57,.28); border-color: transparent; color: #46692a; }
.tn-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: var(--muted); font-weight: 500; }
.tn-meta span { display: flex; gap: 0.4rem; align-items: center; }
.tn-foot { margin-top: auto; padding-top: 0.9rem; border-top: 1px dashed var(--line); display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; }
.tn-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: #46692a; font-size: 0.95rem; text-decoration: none; }
.tn-cta svg { transition: transform .2s; }
.tn-card:hover .tn-cta svg { transform: translateX(4px); }
.tn-stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tn-foot-actions { display: flex; gap: 0.5rem; align-items: center; position: relative; z-index: 3; }
.tn-share { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; color: var(--ink); }
.tn-share:hover { border-color: var(--ink); }

.tn-host { background: var(--ink); color: var(--page-bg); border: 0; justify-content: center; padding: 1.9rem; gap: 1rem; background-image: radial-gradient(320px 200px at 100% 0, rgba(165,198,57,.4), transparent 70%), radial-gradient(260px 200px at 0 100%, rgba(93,139,55,.5), transparent 70%); }
.tn-host-ic { width: 52px; height: 52px; border-radius: 16px; background: var(--accent); color: var(--ink); display: grid; place-items: center; transform: rotate(-6deg); }
.tn-host h3 { margin: 0; font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.75rem; line-height: 1.1; }
.tn-host h3 em { font-style: italic; font-weight: 600; color: var(--accent); }
.tn-host p { margin: 0; color: #c9cdc4; }
.tn-host ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; font-size: 0.88rem; font-weight: 600; }
.tn-host li { display: flex; gap: 0.6rem; align-items: center; }
.tn-host li svg { color: var(--accent); flex: none; }

.tn-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1.2rem; border: 2px dashed var(--line); border-radius: 22px; background: rgba(255,255,255,.5); color: var(--muted); }
.tn-empty b { display: block; font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--ink); margin-bottom: 0.4rem; }

.tn-band { margin-top: 3.4rem; }
.tn-band h2 { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.9rem; margin: 0 0 0.3rem; }
.tn-band > p { margin: 0 0 1.2rem; color: var(--muted); }
.tn-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.tn-feat { background: #fffdf8; border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -16px rgba(24,28,26,.2); }
.tn-feat-ic { width: 42px; height: 42px; border-radius: 13px; background: rgba(165,198,57,.28); color: #46692a; display: grid; place-items: center; margin-bottom: 0.75rem; }
.tn-feat b { display: block; margin-bottom: 0.2rem; }
.tn-feat > span:last-child { color: var(--muted); font-size: 0.85rem; }
.tn-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--ink); color: var(--page-bg); padding: 0.8rem 1.1rem; border-radius: 16px; font-weight: 600; font-size: 0.9rem; z-index: 60; box-shadow: 0 18px 40px -12px rgba(0,0,0,.5); }
.tn-toast i { color: var(--accent); font-style: normal; }

@media (max-width: 1100px) { .tn-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
    .tn-hero .tn-btn { width: 100%; }
    .tn-hero p { font-size: 0.97rem; }
    .tn-stats { gap: 0.5rem; }
    .tn-stat { flex: 1 1 calc(33% - 0.5rem); padding: 0.65rem 0.75rem; flex-direction: column; gap: 0.25rem; }
    .tn-stat b { font-size: 1.5rem; }
    .tn-bar { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
    .tn-seg { overflow-x: auto; scrollbar-width: none; }
    .tn-seg::-webkit-scrollbar { display: none; }
    .tn-search { flex: none; }
    .tn-grid { grid-template-columns: 1fr; }
    .tn-body { padding: 1.1rem; }
    .tn-body h3 { font-size: 1.35rem; }
    .tn-feats { grid-template-columns: 1fr; }
}

.sb-venue .modal-box { color: var(--ink); }

/* ===== Open Play live (spectator) page ===== */
.lv-page { max-width: 1240px; margin: 0 auto; }
.lv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.lv-title { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.lv-title h1 { font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; margin: 0; color: var(--ink); }
.lv-pill { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; font-size: 0.72rem; letter-spacing: .07em; padding: 0.35rem 0.7rem; border-radius: 999px; background: #efebe1; color: var(--muted); }
.lv-pill b { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-dark); animation: sb-pulse 1.8s infinite; }
.lv-pill-active { background: rgba(165,198,57,.25); color: #46692a; }
.lv-pill-completed { background: #e3e6e0; color: #4b514a; }
.lv-sub { margin-top: 0.4rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.88rem; }
.lv-sub span { display: inline-flex; align-items: center; gap: 0.35rem; }
.lv-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 0.55rem 1.1rem; min-height: 40px; font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; }
.lv-btn:hover { border-color: var(--ink); }

.lv-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0 0 1.4rem; }
.lv-stat { background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; padding: 0.8rem 1rem; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 10px 30px -14px rgba(24,28,26,.16); display: flex; gap: 0.75rem; align-items: center; }
.lv-stat-ic { width: 38px; height: 38px; border-radius: 12px; background: rgba(165,198,57,.25); color: #46692a; display: grid; place-items: center; flex: none; }
.lv-stat small { display: block; font-size: 0.68rem; letter-spacing: .07em; text-transform: uppercase; font-weight: 700; color: var(--muted); }
.lv-stat b { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.5rem; line-height: 1.1; }
.lv-stat b em { font-style: normal; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.88rem; color: var(--muted); }

.lv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 1.4rem; align-items: start; }
.lv-layout.lv-solo { grid-template-columns: minmax(0, 1fr) 320px; }
.lv-main, .lv-side { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
.lv-sec-h { margin: 0 0 0.9rem; }
.lv-sec-h h2 { margin: 0; font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: 1.45rem; display: flex; align-items: center; gap: 0.6rem; }
.lv-n { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.75rem; background: var(--ink); color: var(--page-bg); padding: 0.15rem 0.55rem; border-radius: 999px; }
.lv-card { background: #fffdf8; border: 1px solid var(--line); border-radius: 20px; padding: 1.1rem; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 10px 30px -14px rgba(24,28,26,.16); }
.lv-none { padding: 1.6rem 0.5rem; text-align: center; color: var(--muted); font-size: 0.88rem; }

.lv-courts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; }
.lv-court { position: relative; overflow: hidden; padding: 1.1rem; border-radius: 20px; background: #fffdf8; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 10px 30px -14px rgba(24,28,26,.16); }
.lv-court::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--feijoa); }
.lv-court.live::before { background: linear-gradient(90deg, var(--accent-dark), var(--accent)); }
.lv-court.live { border-color: #cfe0a8; box-shadow: 0 0 0 3px rgba(165,198,57,.18), 0 10px 30px -14px rgba(24,28,26,.16); }
.lv-c-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.8rem; }
.lv-c-name { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 0.5rem; }
.lv-lines { width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--accent); display: grid; place-items: center; }
.lv-chip { font-size: 0.68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; padding: 0.3rem 0.65rem; border-radius: 999px; display: inline-flex; gap: 0.4rem; align-items: center; }
.lv-chip.live { background: var(--ink); color: var(--accent); }
.lv-chip.live b { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: tn-blink 1.4s infinite; }
.lv-chip.open { background: #efebe1; color: var(--muted); }
.lv-live-bar { margin: 0 0 0.6rem; }
.lv-live-bar small { display: block; color: var(--muted); font-weight: 600; font-size: 0.74rem; }
.lv-timer { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.9rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.lv-match { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.55rem; align-items: stretch; }
.lv-team { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; min-width: 0; }
.lv-tl { font-size: 0.66rem; letter-spacing: .1em; font-weight: 700; padding: 0.3rem 0.65rem; color: #fff; }
.lv-team.t1 .lv-tl { background: #3b6fd8; }
.lv-team.t2 .lv-tl { background: #5d8b37; }
.lv-pl { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.6rem; font-weight: 600; font-size: 0.9rem; min-width: 0; }
.lv-pl + .lv-pl { border-top: 1px solid var(--line); }
.lv-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; font-weight: 700; color: #fff; flex: none; background: #5d8b37; }
.lv-team.t1 .lv-av { background: #3b6fd8; }
.lv-vs { align-self: center; font-family: 'Fraunces', serif; font-weight: 800; font-size: 0.8rem; color: var(--muted); letter-spacing: .05em; }
.lv-empty-court { border: 2px dashed var(--line); border-radius: 14px; padding: 1.5rem 0.8rem; text-align: center; color: var(--muted); font-size: 0.85rem; background: rgba(255,255,255,.5); }
.lv-empty-court b { display: block; color: var(--ink); font-size: 0.95rem; margin-bottom: 0.2rem; }

.lv-recent ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.lv-recent li { display: grid; grid-template-columns: 1fr auto auto auto 1fr; gap: 0.6rem; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0.6rem 0.9rem; font-size: 0.88rem; }
.lv-rt { color: var(--muted); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-rt:first-child { text-align: right; }
.lv-rt.win { color: var(--ink); font-weight: 700; }
.lv-score { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.15rem; min-width: 1.4rem; text-align: center; }
.lv-dash { color: var(--muted); }

.lv-stand table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.lv-stand th { font-size: 0.68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); text-align: right; padding: 0.4rem 0.4rem; font-weight: 700; }
.lv-stand th:nth-child(1), .lv-stand th:nth-child(2) { text-align: left; }
.lv-stand td { padding: 0.5rem 0.4rem; text-align: right; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.lv-stand td:nth-child(1) { text-align: left; width: 40px; }
.lv-stand td:nth-child(2) { text-align: left; font-weight: 600; }
.lv-rk { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; font-weight: 700; font-size: 0.75rem; background: #efebe1; color: var(--muted); }
.lv-rk-1 { background: var(--energy); color: #6d5600; }
.lv-rk-2 { background: #e3e6e0; color: #4b514a; }
.lv-rk-3 { background: #f0cfa4; color: #7a4a12; }
.lv-bar { display: inline-block; width: 44px; height: 6px; border-radius: 99px; background: #efebe1; overflow: hidden; vertical-align: middle; margin-right: 0.4rem; }
.lv-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); border-radius: 99px; }

.lv-queue ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.lv-queue li { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.7rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.lv-pos { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: var(--accent); font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; flex: none; }
.lv-qn { font-weight: 600; font-size: 0.88rem; }
.lv-more { text-align: center; color: var(--muted); font-size: 0.8rem; margin-top: 0.6rem; }

@media (max-width: 1020px) {
    .lv-layout, .lv-layout.lv-solo { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .lv-stats { gap: 0.5rem; }
    .lv-stat { padding: 0.65rem 0.7rem; gap: 0.5rem; flex-direction: column; align-items: flex-start; }
    .lv-stat b { font-size: 1.3rem; }
    .lv-courts { grid-template-columns: 1fr; }
    .lv-match { grid-template-columns: 1fr; gap: 0.4rem; }
    .lv-vs { text-align: center; }
    .lv-recent li { grid-template-columns: 1fr auto auto auto 1fr; font-size: 0.8rem; padding: 0.5rem 0.6rem; }
}

/* The global a:visited rule would turn these links' text dark once clicked - keep each button's own colours. */
a.tn-btn-ink, a.tn-btn-ink:visited { color: var(--page-bg); }
a.tn-btn-lime, a.tn-btn-lime:visited { color: var(--ink); }
a.tn-btn-danger, a.tn-btn-danger:visited { color: #c0392b; }
a.tn-cta, a.tn-cta:visited { color: #46692a; }
a.vb-go, a.vb-go:visited { color: var(--page-bg); }
a.vb-btn-line, a.vb-btn-line:visited { color: var(--ink); }

/* ===== Open Play sessions landing (/) ===== */
.op-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.op-ghost { background: transparent; border-color: rgba(245,241,230,.3); color: #f5f1e6; }
.op-ghost:hover { border-color: #f5f1e6; }
.op-host-seg { display: inline-flex; margin-top: 0.8rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.op-host-seg::-webkit-scrollbar { display: none; }
.op-waiting { color: #8a6100; }
.tn-card.op-act { border-color: #cfe0a8; box-shadow: 0 0 0 3px rgba(165,198,57,.16), 0 12px 32px -16px rgba(24,28,26,.2); }
.op-banner { position: relative; height: 150px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: linear-gradient(135deg, #181c1a, #2c4a1f 60%, #5d8b37); }
.op-banner.ended { background: linear-gradient(135deg, #2a302c, #4a514a 70%, #6b706a); }
.op-banner.up { background: linear-gradient(135deg, #3a2f00, #8a6d00 60%, #f7d850); }
.op-banner .tn-tags { display: flex; justify-content: space-between; gap: 8px; position: relative; z-index: 2; }
.op-bg { position: absolute; right: -20px; top: -26px; opacity: .12; color: #fff; }
.tn-tag.st-act { background: var(--accent); color: var(--ink); }
.tn-tag.st-act b { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); animation: tn-blink 1.3s infinite; }
.tn-tag.st-end { color: var(--muted); }
.op-cts { display: flex; gap: 8px; position: relative; z-index: 2; align-items: flex-end; }
.op-ct { flex: 1; height: 54px; border-radius: 12px; border: 1.5px solid rgba(245,241,230,.35); background: rgba(245,241,230,.08); display: flex; align-items: center; justify-content: center; color: #f5f1e6; font-size: 0.68rem; font-weight: 700; letter-spacing: .05em; position: relative; }
.op-ct.busy { background: rgba(165,198,57,.28); border-color: var(--accent); }
.op-ct.busy::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: tn-blink 1.3s infinite; }
.op-when { display: flex; gap: 0.75rem; align-items: center; }
.op-when-ic { width: 44px; height: 44px; border-radius: 14px; background: rgba(165,198,57,.25); color: #46692a; display: grid; place-items: center; flex: none; }
.op-when b { display: block; font-size: 0.95rem; }
.op-when small { color: var(--muted); font-size: 0.82rem; }
.op-chip svg { vertical-align: -2px; margin-right: 5px; color: #46692a; }
@media (max-width: 640px) { .op-actions { width: 100%; } .op-actions .tn-btn { flex: 1; } }
/* ===== Home page (visitor landing) - follows the 'home page' design incl. the smaller scale ===== */
.hp{--ink:#181c1a;--ink-2:#2a302c;--muted:#6b706a;--line:#e8e1d2;--paper:#faf6ee;--card:#fffdf8;--white:#fff;--lime:#a5c639;--apple:#5d8b37;--apple-dk:#46692a;--feijoa:#a3d78e;--sahara:#f2e18c;--energy:#f7d850;--red:#d4452f;--r:22px;--shadow:0 1px 2px rgba(24,28,26,.05),0 12px 32px -16px rgba(24,28,26,.2);font-family:'Inter',system-ui,sans-serif;color:var(--ink);line-height:1.45;font-size:14px;overflow-x:hidden}
:where(.hp a),:where(.hp a:visited){color:inherit;text-decoration:none}
.hp .serif{font-family:'Fraunces',Georgia,serif;font-weight:800;letter-spacing:-.01em}
.hp button,.hp input{font:inherit;color:inherit}
.hp button{cursor:pointer}
.hp *{box-sizing:border-box}
.hp h1,.hp h2,.hp h3,.hp h4{color:inherit}
.app-main:has(.hp){max-width:none;padding:0}
@keyframes hp-pulse{0%{box-shadow:0 0 0 0 rgba(93,139,55,.55)}70%,100%{box-shadow:0 0 0 8px rgba(93,139,55,0)}}
@keyframes hp-bob{50%{transform:translateY(-8px)}}
.hp input{font:inherit;color:inherit}
.hp .serif{font-family:"Fraunces",Georgia,serif;font-weight:800;letter-spacing:-.01em}
.hp .hbtn{white-space:nowrap;border:1px solid transparent;border-radius:999px;padding:10px 18px;min-height:42px;font-weight:700;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:none;transition:transform .12s,background .15s,border-color .15s,box-shadow .15s}
.hp .hbtn:focus-visible,.hp .fb:focus-visible,.hp .card a:focus-visible{outline:3px solid rgba(93,139,55,.55);outline-offset:2px}
.hp .hbtn-ink{background:var(--ink);color:var(--paper)}
.hp .hbtn-ink:hover{background:var(--ink-2);transform:translateY(-1px)}
.hp .hbtn-lime{background:var(--lime);color:var(--ink)}
.hp .hbtn-lime:hover{background:#b3d447;transform:translateY(-1px)}
.hp .hbtn-line{background:var(--white);border-color:var(--line)}
.hp .hbtn-line:hover{border-color:var(--ink)}
.hp .container{max-width:1240px;margin:0 auto;padding:0 24px}
.hp .eyebrow{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--apple-dk);background:rgba(165,198,57,.25);padding:6px 12px;border-radius:999px}
.hp .hbtn-lg{padding:15px 26px;font-size:16px;min-height:52px}
.hp .hbtn-outline{background:var(--white);border:2px solid var(--ink)}
.hp .hbtn-outline:hover{background:var(--ink);color:var(--paper)}
.hp .hhero{position:relative;padding:64px 0 70px;overflow:hidden}
.hp .hhero .container{display:grid;grid-template-columns:1.02fr 1fr;gap:48px;align-items:center}
.hp .hhero h1{margin:18px 0 20px;font-size:clamp(46px,6.4vw,84px);line-height:.98}
.hp .hhero h1 em{display:block;font-style:italic;font-weight:600;color:var(--apple)}
.hp .hhero p.lead{font-size:19px;color:var(--ink-2);max-width:50ch;margin:0 0 28px}
.hp .hhero .ctas{display:flex;gap:12px;flex-wrap:wrap}
.hp .hstats{display:flex;gap:34px;margin-top:38px;flex-wrap:wrap}
.hp .hstats div b{display:block;font-family:"Fraunces",serif;font-weight:800;font-size:38px;line-height:1}
.hp .hstats div span{font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hp .blob{position:absolute;border-radius:50%;z-index:-1;filter:blur(2px)}
.hp .blob.b1{width:520px;height:520px;right:-120px;top:-120px;background:radial-gradient(circle,rgba(165,198,57,.35),transparent 68%)}
.hp .blob.b2{width:380px;height:380px;left:-140px;bottom:-160px;background:radial-gradient(circle,rgba(247,216,80,.3),transparent 70%)}
.hp .mock{position:relative;padding:20px 0 44px}
.hp .win{background:var(--card);border:1px solid var(--line);border-radius:26px;box-shadow:0 30px 60px -28px rgba(24,28,26,.45),0 2px 4px rgba(24,28,26,.05);padding:18px;position:relative}
.hp .win-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.hp .win-h b{font-family:"Fraunces",serif;font-weight:800;font-size:19px}
.hp .pillA{display:inline-flex;gap:6px;align-items:center;background:rgba(165,198,57,.28);color:var(--apple-dk);font-size:11px;font-weight:700;letter-spacing:.08em;padding:5px 10px;border-radius:99px}
.hp .pillA i{width:7px;height:7px;border-radius:50%;background:var(--apple);animation:hp-pulse 1.8s infinite}
.hp .cts2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hp .cc{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--white);position:relative;overflow:hidden}
.hp .cc::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--feijoa)}
.hp .cc.lv::before{background:linear-gradient(90deg,var(--apple),var(--lime))}
.hp .cc-h{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:13.5px;margin-bottom:10px}
.hp .cc-h em{font-style:normal;font-size:10px;letter-spacing:.08em;padding:3px 8px;border-radius:99px;background:var(--ink);color:var(--lime)}
.hp .cc-h em.r{background:rgba(163,215,142,.4);color:var(--apple-dk)}
.hp .vsr{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.hp .tm{border-radius:11px;padding:6px 7px;font-size:11.5px;font-weight:600;line-height:1.35}
.hp .tm.a{background:#e8effc;border-left:3px solid #3b6fd8}
.hp .tm.b{background:#eaf5dc;border-left:3px solid var(--apple)}
.hp .sc{font-family:"Fraunces",serif;font-weight:800;font-size:22px;text-align:center;line-height:1}
.hp .sc small{display:block;font-family:Inter;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-top:3px}
.hp .q{display:flex;align-items:center;justify-content:space-between;margin-top:14px;padding:12px 14px;border-radius:16px;background:#f3eee2}
.hp .q span{font-size:12.5px;font-weight:700;color:var(--ink-2)}
.hp .avs{display:flex}
.hp .av{width:30px;height:30px;border-radius:50%;border:2.5px solid #f3eee2;display:grid;place-items:center;font-size:10.5px;font-weight:700;color:#fff;margin-left:-8px;flex:none}
.hp .avs .av:first-child{margin-left:0}
.hp .a1{background:#5d8b37}
.hp .a2{background:#3b6fd8}
.hp .a3{background:#c26a1a}
.hp .a4{background:#7d4fc4}
.hp .a5{background:#1f8a8a}
.hp .a6{background:#b8436b}
.hp .float{position:absolute;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:10px 14px;font-size:13px;font-weight:700;box-shadow:0 16px 34px -14px rgba(24,28,26,.4);display:flex;align-items:center;gap:10px;animation:hp-bob 5s ease-in-out infinite}
.hp .float .d{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--ink);color:var(--lime);flex:none}
.hp .float.f1{left:-26px;bottom:-30px}
.hp .float.f2{right:-16px;top:-6px;background:var(--lime);border-color:var(--lime);animation-delay:-2s}
.hp .float small{display:block;color:var(--muted);font-weight:500;font-size:11.5px}
.hp .ball{position:absolute;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fbe98a,var(--energy) 60%,#d9b52c);box-shadow:inset -4px -5px 0 rgba(0,0,0,.08);z-index:2}
.hp .ball::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(140,110,0,.3) 1.4px,transparent 1.8px) 0 0/9px 9px;opacity:.7}
.hp .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,253,248,.6)}
.hp .trust .container{display:flex;gap:28px;align-items:center;justify-content:space-between;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.hp .trust p{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hp .trust .logos{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hp .trust img{width:46px;height:46px;border-radius:50%;box-shadow:0 4px 10px -4px rgba(0,0,0,.35)}
.hp .trust .hmore{height:46px;padding:0 16px;border-radius:99px;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-weight:700;font-size:13px}
.hp .feat{padding:84px 0}
.hp .feat .container{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.hp .feat.flip .copy{order:2}
.hp .tagline{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--apple-dk);display:flex;gap:10px;align-items:center}
.hp .tagline::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--lime)}
.hp .feat h2{font-size:clamp(32px,3.6vw,46px);line-height:1.04;margin:14px 0 14px}
.hp .feat .copy>p{color:var(--muted);font-size:17px;margin:0 0 22px;max-width:48ch}
.hp .ticks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:12px}
.hp .ticks li{display:flex;gap:12px;align-items:flex-start;font-weight:500;color:var(--ink-2)}
.hp .ticks li::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;margin-top:1px;background:var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23181c1a' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center/13px no-repeat}
.hp .link{display:inline-flex;gap:8px;align-items:center;font-weight:700;color:var(--apple-dk)}
.hp .link svg{transition:transform .2s}
.hp .link:hover svg{transform:translateX(4px)}
.hp .stage{position:relative;border-radius:30px;padding:30px;background:linear-gradient(145deg,#f3eee2,#eef5dd);border:1px solid var(--line);box-shadow:var(--shadow)}
.hp .stage .hbadge{position:absolute;top:-14px;right:22px;background:var(--energy);color:#4d3d00;font-size:12px;font-weight:700;padding:7px 14px;border-radius:99px;box-shadow:0 8px 18px -8px rgba(77,61,0,.5);z-index:3}
.hp .stage.t2{background:linear-gradient(145deg,#f3eee2,#fbf4cf)}
.hp .stage.t3{background:linear-gradient(145deg,#e8effc,#f3eee2 60%,#fdeceb);padding:34px 20px 0;overflow:hidden}
.hp .stage.t4{background:linear-gradient(145deg,#eef5dd,#f3eee2)}
.hp .brk{width:100%;height:auto;display:block}
.hp .qlist{margin-top:12px;display:grid;gap:8px}
.hp .qi{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:9px 12px;font-weight:600;font-size:13.5px}
.hp .qi .n{width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-size:11px;font-weight:700}
.hp .qi small{margin-left:auto;color:var(--muted);font-weight:500}
.hp .qi .av{border-color:#fff;margin:0;width:26px;height:26px;font-size:10px}
.hp .phone{width:250px;margin:0 auto;border-radius:38px;background:#0f1211;padding:9px;box-shadow:0 30px 50px -20px rgba(0,0,0,.6);position:relative;transform:translateY(0)}
.hp .phone .scr{border-radius:30px;background:#fffdf8;overflow:hidden;height:470px;display:flex;flex-direction:column}
.hp .p-st{display:flex;justify-content:space-between;padding:10px 18px 4px;font-size:10px;font-weight:700}
.hp .p-hd{padding:4px 12px 8px;font-size:10px;color:var(--muted);font-weight:600;text-align:center}
.hp .p-top{text-align:center;font-family:"Fraunces",serif;font-weight:800;font-size:25px;padding:2px 0 8px;letter-spacing:.04em}
.hp .p-sc{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 10px}
.hp .p-t{border-radius:16px;padding:10px;color:#fff;text-align:center}
.hp .p-t.a{background:#2f5fc4}
.hp .p-t.b{background:#c93a34}
.hp .p-t b{display:block;font-size:10px;letter-spacing:.08em}
.hp .p-t span{display:block;font-size:10px;opacity:.85;margin:2px 0 4px}
.hp .p-t i{font-style:normal;font-family:"Fraunces",serif;font-weight:800;font-size:44px;line-height:1;display:block}
.hp .p-srv{text-align:center;font-size:9.5px;color:var(--muted);padding:8px 0;font-weight:600}
.hp .p-btn{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 10px;flex:1;margin-bottom:10px}
.hp .p-btn div{border-radius:18px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:11.5px;text-align:center;padding:8px}
.hp .p-btn div svg{background:rgba(255,255,255,.2);border-radius:50%;padding:9px;width:44px;height:44px}
.hp .p-btn .a{background:#2f5fc4}
.hp .p-btn .b{background:#c93a34}
.hp .p-sub{margin:0 10px 12px;padding:10px;border-radius:14px;background:#efebe1;text-align:center;font-size:10px;font-weight:700;color:var(--muted)}
.hp .bk{background:var(--white);border-radius:20px;border:1px solid var(--line);overflow:hidden;font-size:13px}
.hp .bk-h,.hp .bk-r{display:grid;grid-template-columns:90px 1fr 1fr}
.hp .bk-h{background:#f3eee2;font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.hp .bk-h div,.hp .bk-r>div{padding:11px 12px}
.hp .bk-r{border-top:1px solid var(--line);align-items:center}
.hp .bk-r .t{font-weight:600;font-size:12px;color:var(--ink-2)}
.hp .sl{margin:4px 6px;border-radius:10px;text-align:center;padding:9px 0;font-weight:700;background:#eaf5dc;color:var(--apple-dk)}
.hp .sl.sel{background:var(--ink);color:var(--lime)}
.hp .sl.bkd{background:repeating-linear-gradient(135deg,#efebe1 0 5px,#e6e1d4 5px 10px);color:#a49f92;font-weight:600;font-size:12px}
.hp .bk-f{display:flex;justify-content:space-between;align-items:center;padding:14px;border-top:1px solid var(--line);background:#fffdf8}
.hp .bk-f b{font-family:"Fraunces",serif;font-size:20px}
.hp .steps{background:var(--sahara);position:relative;overflow:hidden;padding:84px 0}
.hp .steps::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;background:rgba(165,198,57,.35);left:-120px;bottom:-200px}
.hp .steps h2{font-size:clamp(30px,3.4vw,44px);max-width:20ch;line-height:1.05;margin:14px 0 36px}
.hp .sgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.hp .step{background:var(--white);border-radius:24px;padding:26px;box-shadow:0 18px 40px -22px rgba(77,61,0,.5)}
.hp .step .no{width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--lime);display:grid;place-items:center;font-family:"Fraunces",serif;font-weight:800;font-size:18px;margin-bottom:16px}
.hp .step:nth-child(2) .no{background:var(--lime);color:var(--ink)}
.hp .step b{font-size:19px;display:block;margin-bottom:6px;font-family:"Fraunces",serif;font-weight:800}
.hp .step p{margin:0;color:var(--muted)}
.hp .clubs{padding:84px 0;text-align:center}
.hp .clubs h2{font-size:clamp(30px,3.6vw,46px);margin:14px auto 12px;max-width:22ch;line-height:1.05}
.hp .clubs>.container>p{color:var(--muted);font-size:17px;max-width:56ch;margin:0 auto 34px}
.hp .cl{display:flex;gap:26px;justify-content:center;flex-wrap:wrap}
.hp .cl figure{margin:0;display:grid;gap:10px;justify-items:center;width:104px}
.hp .cl img{width:84px;height:84px;border-radius:50%;box-shadow:0 14px 26px -12px rgba(0,0,0,.45);transition:transform .25s}
.hp .cl figure:hover img{transform:translateY(-6px) rotate(-4deg)}
.hp .cl figcaption{font-size:13px;font-weight:600;color:var(--ink-2)}
.hp .fmt{margin-top:48px}
.hp .fmt small{display:block;font-size:12px;letter-spacing:.14em;font-weight:700;color:var(--muted);margin-bottom:14px;text-transform:uppercase}
.hp .fmt div{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.hp .fmt span{padding:9px 16px;border-radius:99px;border:1.5px solid var(--lime);background:rgba(255,253,248,.8);font-weight:600;font-size:14px;color:var(--apple-dk)}
.hp .quotes{background:linear-gradient(120deg,#3f6a28,#5d8b37 45%,#a5c639);padding:80px 0;color:#fff}
.hp .quotes .tagline{color:#f2f7d6}
.hp .quotes .tagline::before{background:var(--energy)}
.hp .qg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.hp .qc{background:var(--white);color:var(--ink);border-radius:24px;padding:26px;box-shadow:0 22px 44px -22px rgba(0,0,0,.5);position:relative;display:flex;flex-direction:column;gap:18px}
.hp .qc::before{content:"“";font-family:"Fraunces",serif;font-weight:800;font-size:64px;line-height:.6;color:var(--lime)}
.hp .qc p{margin:0;font-family:"Fraunces",serif;font-weight:600;font-style:italic;font-size:18px;line-height:1.4}
.hp .qc footer{display:flex;gap:10px;align-items:center;margin-top:auto;font-size:13.5px;color:var(--muted);padding:0}
.hp .qc footer b{color:var(--ink);display:block}
.hp .qc .smp{position:absolute;top:16px;right:16px;font-size:10px;font-weight:700;letter-spacing:.08em;background:#f3eee2;color:var(--muted);padding:4px 9px;border-radius:99px}
.hp .cta{display:grid;grid-template-columns:1fr 1fr;background:var(--ink);color:var(--paper)}
.hp .cta .l{padding:80px 56px 80px max(24px,calc((100vw - 1240px)/2 + 24px));background-image:radial-gradient(420px 260px at 0 100%,rgba(93,139,55,.55),transparent 70%),radial-gradient(360px 240px at 100% 0,rgba(165,198,57,.25),transparent 70%)}
.hp .cta .l .eyebrow{background:rgba(165,198,57,.2);color:var(--lime)}
.hp .cta h2{font-size:clamp(34px,4vw,54px);margin:16px 0 14px;line-height:1.02}
.hp .cta h2 em{color:var(--lime);font-style:italic;font-weight:600}
.hp .cta .l p{color:#c9cdc4;font-size:17px;max-width:44ch;margin:0 0 26px}
.hp .cta .r{background:var(--white);color:var(--ink);padding:70px max(24px,calc((100vw - 1240px)/2 + 24px)) 70px 56px;display:flex;align-items:center}
.hp .login{width:100%;max-width:440px}
.hp .login h3{font-family:"Fraunces",serif;font-weight:800;font-size:26px;margin:0 0 4px}
.hp .login p{margin:0 0 18px;color:var(--muted);font-size:14px}
.hp .login label{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:14px 0 6px}
.hp .hfield{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:14px;background:#fffdf8;overflow:hidden}
.hp .hfield:focus-within{border-color:var(--apple);box-shadow:0 0 0 3px rgba(165,198,57,.25)}
.hp .hfield span{padding:0 0 0 14px;color:var(--muted);font-size:14px;font-weight:600}
.hp .hfield input{flex:1;border:0;background:none;padding:13px 14px;font-size:15px;outline:none;min-width:0}
.hp .hfield:not(:has(span)) input{padding-left:14px}
.hp .login .hbtn{width:100%;margin-top:20px}
.hp .login .nt{text-align:center;margin-top:14px;font-size:14px;color:var(--muted)}
.hp .login .nt a{color:var(--apple-dk);font-weight:700}
.hp footer.site{background:var(--ink);color:#c9cdc4;border-top:1px solid #2a302c}
.hp footer.site .container{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding-top:56px;padding-bottom:36px}
.hp footer.site .bn{display:flex;gap:10px;align-items:center;color:#fff;margin-bottom:14px}
.hp footer.site .bn svg{width:36px;height:36px}
.hp footer.site p{margin:0;max-width:36ch;font-size:14px}
.hp footer.site h4{color:var(--lime);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:6px 0 14px}
.hp footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.hp footer.site ul a:hover{color:#fff}
.hp .legal{border-top:1px solid #2a302c;padding:18px 0;font-size:13px;color:#8a8f87}
.hp .legal .container{display:flex;justify-content:space-between;padding-top:0;padding-bottom:0;display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:1000px){
.hp .hhero .container,.hp .feat .container,.hp .cta{grid-template-columns:1fr}
.hp .hhero{padding:40px 0 56px}
.hp .hhero .container{gap:30px}
.hp .feat{padding:56px 0}
.hp .feat .container{gap:40px}
.hp .feat.flip .copy{order:0}
.hp .sgrid,.hp .qg{grid-template-columns:1fr}
.hp .cta .l,.hp .cta .r{padding:56px 24px}
.hp .float.f1{left:-4px}
.hp .float.f2{right:-4px}
.hp footer.site .container{grid-template-columns:1fr 1fr}
.hp footer.site .container>div:first-child{grid-column:1/-1}
}
@media (max-width:640px){
.hp .container{padding:0 16px}
.hp .hhero .ctas .hbtn{flex:1 1 100%}
.hp .hstats{gap:22px}
.hp .hstats div b{font-size:30px}
.hp .cts2{grid-template-columns:1fr}
.hp .stage{padding:20px 16px}
.hp .stage.t3{padding:30px 10px 0}
.hp .win{padding:14px}
.hp .float{padding:8px 11px;font-size:12px}
.hp .float.f2{display:none}
.hp .trust .container{justify-content:center;text-align:center}
.hp .trust .logos{justify-content:center}
.hp .cl{gap:16px}
.hp .cl figure{width:88px}
.hp .cl img{width:72px;height:72px}
.hp .bk-h,.hp .bk-r{grid-template-columns:72px 1fr 1fr}
.hp .bk-h div,.hp .bk-r>div{padding:9px 6px}
}
.hp .container{padding:0 24px}
.hp .hbtn-lg{padding:11px 20px;font-size:14px;min-height:42px}
.hp .eyebrow{font-size:10.5px;padding:5px 10px}
.hp .hhero{padding:44px 0 50px}
.hp .hhero h1{margin:14px 0 14px;font-size:clamp(38px,5vw,64px)}
.hp .hhero p.lead{font-size:16px;margin-bottom:22px;max-width:48ch}
.hp .hstats{margin-top:28px;gap:28px}
.hp .hstats div b{font-size:30px}
.hp .hstats div span{font-size:11px}
.hp .mock{padding:14px 0 36px}
.hp .win{padding:14px;border-radius:22px}
.hp .win-h b{font-size:16px}
.hp .pillA{font-size:10px}
.hp .cc{padding:11px;border-radius:15px}
.hp .cc-h{font-size:12px;margin-bottom:8px}
.hp .cc-h em{font-size:9px}
.hp .tm{font-size:10.5px;padding:5px 6px}
.hp .sc{font-size:19px}
.hp .q{margin-top:11px;padding:9px 12px;border-radius:14px}
.hp .q span{font-size:11.5px}
.hp .av{width:26px;height:26px;font-size:9.5px}
.hp .float{padding:8px 12px;font-size:12px;border-radius:14px}
.hp .float small{font-size:10.5px}
.hp .float .d{width:28px;height:28px}
.hp .trust .container{padding-top:14px;padding-bottom:14px}
.hp .trust p{font-size:11px}
.hp .trust img{width:38px;height:38px}
.hp .trust .hmore{height:38px;font-size:12px;padding:0 13px}
.hp .feat{padding:56px 0}
.hp .feat .container{gap:48px}
.hp .feat h2{font-size:clamp(26px,3vw,36px);margin:10px 0 10px}
.hp .feat .copy>p{font-size:15px;margin-bottom:16px}
.hp .tagline{font-size:11px}
.hp .ticks{gap:9px;margin-bottom:18px;font-size:14px}
.hp .ticks li::before{width:19px;height:19px;background-size:11px}
.hp .link{font-size:14px}
.hp .stage{padding:22px;border-radius:24px}
.hp .stage .hbadge{font-size:11px;padding:6px 12px;top:-12px}
.hp .qlist{margin-top:9px;gap:6px}
.hp .qi{padding:7px 10px;font-size:12.5px;border-radius:12px}
.hp .phone{width:222px;border-radius:34px;padding:8px}
.hp .phone .scr{height:418px;border-radius:27px}
.hp .p-top{font-size:22px}
.hp .p-t i{font-size:38px}
.hp .bk{font-size:12px;border-radius:17px}
.hp .bk-h div,.hp .bk-r>div{padding:9px 10px}
.hp .sl{padding:7px 0;font-size:12px}
.hp .bk-f{padding:11px 14px}
.hp .bk-f b{font-size:17px}
.hp .steps{padding:56px 0}
.hp .steps h2{font-size:clamp(25px,2.8vw,34px);margin:10px 0 24px}
.hp .step{padding:20px;border-radius:20px}
.hp .step .no{width:38px;height:38px;font-size:15px;margin-bottom:12px}
.hp .step b{font-size:17px}
.hp .step p{font-size:13.5px}
.hp .clubs{padding:56px 0}
.hp .clubs h2{font-size:clamp(25px,3vw,36px);margin:10px auto}
.hp .clubs>.container>p{font-size:15px;margin-bottom:24px}
.hp .cl{gap:20px}
.hp .cl figure{width:90px;gap:8px}
.hp .cl img{width:68px;height:68px}
.hp .cl figcaption{font-size:12px}
.hp .fmt{margin-top:34px}
.hp .fmt span{padding:7px 13px;font-size:12.5px}
.hp .quotes{padding:54px 0}
.hp .qg{margin-top:18px;gap:14px}
.hp .qc{padding:20px;border-radius:20px;gap:12px}
.hp .qc p{font-size:15.5px}
.hp .qc::before{font-size:50px}
.hp .qc footer{font-size:12.5px}
.hp .cta .l{padding:56px 44px 56px max(24px,calc((100vw - 1240px)/2 + 24px))}
.hp .cta h2{font-size:clamp(28px,3.2vw,42px);margin:12px 0 10px}
.hp .cta .l p{font-size:15px;margin-bottom:20px}
.hp .cta .r{padding:48px max(24px,calc((100vw - 1240px)/2 + 24px)) 48px 44px}
.hp .login{max-width:400px}
.hp .login h3{font-size:22px}
.hp .login p{font-size:13px;margin-bottom:12px}
.hp .login label{margin:10px 0 5px;font-size:10px}
.hp .hfield input{padding:10px 12px;font-size:14px}
.hp .login .hbtn{margin-top:16px}
.hp footer.site .container{padding-top:36px;padding-bottom:24px}
.hp footer.site p{font-size:13px}
.hp footer.site ul{font-size:13px;gap:8px}
@media (max-width:1000px){
.hp .hhero{padding:32px 0 40px}
.hp .feat{padding:42px 0}
.hp .steps,.hp .clubs,.hp .quotes{padding:42px 0}
.hp .cta .l,.hp .cta .r{padding:42px 24px}
}
@media (max-width:640px){
.hp .container{padding:0 16px}
.hp .hhero h1{font-size:40px}
.hp .hstats div b{font-size:26px}
}

/* ===== Design update: smaller scale, main menu and tournament detail ===== */

/* ---- Main menu (header) + ticker ---- */
.marketing-ticker { padding: 0; height: 32px; display: flex; align-items: center; }
.marketing-ticker-track span { font-size: 12.5px; }
.app-header { padding: 0.5rem 1.5rem; gap: 0.4rem 1.1rem; align-items: center; background: rgba(250, 246, 238, 0.92); }
.app-header.member-header { align-items: center; }
.brand { font-size: 1.3rem; gap: 0.5rem; }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; }
.app-nav { gap: 2px; }
.app-nav a, .app-nav a:visited { padding: 0.45rem 0.7rem; border-radius: 999px; border-bottom: none; font-size: 0.86rem; font-weight: 600; color: #2a302c; }
.app-nav a:hover { background: rgba(24, 28, 26, 0.06); color: #2a302c; }
.app-nav a.active, .app-nav a.active:visited { background: var(--ink); color: var(--page-bg); border-bottom: none; }
.member-nav { gap: 2px; }
.member-nav a, .member-nav a:visited { padding: 0.4rem 0.7rem; border-radius: 999px; font-size: 0.84rem; }
.member-nav a:hover { background: rgba(24, 28, 26, 0.06); color: #2a302c; }
.member-nav a.active, .member-nav a.active:visited { background: var(--ink); color: var(--page-bg); }
.live-pill { margin-top: 0; background: rgba(165, 198, 57, 0.22); padding: 0.38rem 0.75rem; border-radius: 999px; font-size: 0.76rem; letter-spacing: 0.04em; }
.header-cta { gap: 0.4rem; }
.header-cta .btn, .header-cta .btn:visited { border-radius: 999px; padding: 0.4rem 0.9rem; min-height: 34px; font-size: 0.8rem; font-weight: 700; }
.header-book-btn, .header-book-btn:visited { background: #fff; border-color: var(--line); color: var(--ink); }
.header-login-btn, .header-login-btn:visited { background: #fff; border-color: var(--line); color: var(--ink); }
.header-book-btn:hover, .header-login-btn:hover { background: #fff; border-color: var(--ink); color: var(--ink); }
.profile-btn { padding: 0.2rem 0.6rem 0.2rem 0.25rem; }
.profile-avatar { width: 28px; height: 28px; }

/* ---- Tournaments + Open Play sessions pages (smaller scale) ---- */
.tn-eyebrow { font-size: 0.66rem; padding: 0.3rem 0.65rem; }
.tn-hero { padding-top: 0; }
.tn-h1 { margin: 0.6rem 0 0.4rem; font-size: clamp(2rem, 4vw, 2.75rem); gap: 0.75rem; }
.tn-tro { width: clamp(36px, 4vw, 46px); height: clamp(36px, 4vw, 46px); border-radius: 14px; }
.tn-tro svg { width: 23px; height: 23px; }
.tn-hero p { font-size: 0.91rem; max-width: 44ch; }
.tn-btn { min-height: 38px; padding: 0.5rem 1rem; font-size: 0.81rem; }
.tn-btn-sm { min-height: 32px; padding: 0.35rem 0.8rem; font-size: 0.76rem; }
.tn-stats { margin-top: 1rem; gap: 0.5rem; }
.tn-stat { padding: 0.5rem 0.9rem; border-radius: 13px; gap: 0.5rem; }
.tn-stat b { font-size: 1.31rem; }
.tn-stat span { font-size: 0.66rem; }
.tn-bar { margin: 1.1rem 0 0.9rem; }
.tn-seg { padding: 4px; }
.tn-fb { padding: 0.38rem 0.8rem; min-height: 34px; font-size: 0.81rem; }
.tn-fb em { font-size: 0.69rem; }
.tn-search { flex-basis: 270px; }
.tn-search input { min-height: 38px; padding: 0.5rem 0.85rem 0.5rem 2.4rem; font-size: 0.85rem; }
.tn-search svg { left: 13px; }
.tn-grid { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0.9rem; }
.tn-card { border-radius: 16px; }
.tn-card:hover { transform: translateY(-3px); }
.tn-tags { left: 10px; right: 10px; top: 10px; }
.tn-tag { font-size: 0.66rem; padding: 0.25rem 0.55rem; }
.tn-body { padding: 0.8rem 0.95rem 0.9rem; gap: 0.55rem; }
.tn-body h3 { font-size: 1.16rem; }
.tn-org { font-size: 0.78rem; gap: 0.5rem; }
.tn-org i { width: 22px; height: 22px; font-size: 0.56rem; }
.tn-chip { font-size: 0.69rem; padding: 0.25rem 0.55rem; }
.tn-cats { gap: 6px; }
.tn-meta { font-size: 0.72rem; gap: 0.75rem; }
.tn-foot { padding-top: 0.6rem; }
.tn-cta { font-size: 0.81rem; }
.tn-share { width: 32px; height: 32px; }
.tn-host { padding: 1.25rem; gap: 0.7rem; }
.tn-host-ic { width: 40px; height: 40px; border-radius: 13px; }
.tn-host-ic svg { width: 21px; height: 21px; }
.tn-host h3 { font-size: 1.31rem; }
.tn-host p { font-size: 0.81rem; }
.tn-host ul { font-size: 0.78rem; gap: 0.4rem; }
.tn-band { margin-top: 2.1rem; }
.tn-band h2 { font-size: 1.38rem; }
.tn-band > p { font-size: 0.81rem; margin-bottom: 0.75rem; }
.tn-feats { gap: 0.6rem; }
.tn-feat { padding: 0.8rem; border-radius: 14px; }
.tn-feat-ic { width: 34px; height: 34px; border-radius: 11px; margin-bottom: 0.5rem; }
.tn-feat-ic svg { width: 17px; height: 17px; }
.tn-feat b { font-size: 0.85rem; }
.tn-feat > span:last-child { font-size: 0.75rem; }
.op-banner { height: 118px; padding: 10px; }
.op-ct { height: 42px; font-size: 0.6rem; border-radius: 10px; }
.op-when { gap: 0.6rem; }
.op-when-ic { width: 36px; height: 36px; border-radius: 11px; }
.op-when-ic svg { width: 17px; height: 17px; }
.op-when b { font-size: 0.85rem; }
.op-when small { font-size: 0.75rem; }
@media (max-width: 640px) {
    .tn-h1 { font-size: 1.9rem; }
    .tn-grid { grid-template-columns: 1fr; }
    .tn-stats { display: flex; }
    .tn-stat { flex: 1 1 30%; padding: 0.5rem 0.6rem; flex-direction: column; gap: 0.15rem; }
}

/* ---- Open Play host console (smaller scale) ---- */
.session-head h1 { font-size: 1.75rem; }
.sb-pill { font-size: 0.69rem; padding: 0.3rem 0.62rem; }
.sb-sub { font-size: 0.78rem; margin-top: 0.25rem; }
.session-head .btn-sm { min-height: 32px; padding: 0.35rem 0.75rem; font-size: 0.75rem; }
.sb-hint { margin-bottom: 0.7rem; padding: 0.6rem 0.85rem; gap: 0.75rem; border-radius: 14px; }
.sb-hint-ic { width: 34px; height: 34px; }
.sb-hint b { font-size: 0.875rem; }
.sb-hint span:not(.sb-hint-ic) { font-size: 0.78rem; }
.sb-stats { gap: 0.5rem; margin-bottom: 0.9rem; }
.sb-stat { padding: 0.55rem 0.75rem; border-radius: 14px; gap: 0.6rem; }
.sb-stat-ic { width: 32px; height: 32px; border-radius: 10px; }
.sb-stat small { font-size: 0.62rem; }
.sb-stat b { font-size: 1.25rem; }
.sb-venue { padding: 0.6rem 0.85rem; border-radius: 14px; }
.session-board.board-layout:has(> .sb-rail) { grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; }
.session-board .panel-title h2 { font-size: 1.19rem; }
.sb-n { font-size: 0.7rem; }
.session-board .court-grid { grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 0.75rem; }
.session-board .court-card { padding: 0.85rem; border-radius: 16px; }
.session-board .court-card .court-title { font-size: 0.94rem; margin-bottom: 0.6rem; }
.session-board .court-card .court-title .badge { font-size: 0.62rem; padding: 0.25rem 0.55rem; }
.session-board .team-label { font-size: 0.6rem; padding: 0.25rem 0.55rem; }
.session-board .team .player { font-size: 0.78rem; padding: 0.38rem 0.55rem; }
.session-board .timer { font-size: 1.45rem; }
.session-board .win-btn { padding: 0.5rem 0.4rem; font-size: 0.76rem; }
.session-board .court-card .btn-sm { font-size: 0.75rem; padding: 0.4rem 0.75rem; min-height: 34px; }
.session-board .court-empty { padding: 1.1rem 0.7rem; font-size: 0.78rem; }
.session-board .upnext-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 0.75rem; }
.session-board .upnext-card { padding: 0.8rem; border-radius: 16px; }
.sb-nx { font-size: 0.875rem; }
.session-board .standings-section { border-radius: 16px; }
.session-board .standings-section .player-table { font-size: 0.78rem; }
.session-board .standings-section .player-table th { font-size: 0.62rem; }
.sb-rk { width: 22px; height: 22px; font-size: 0.68rem; }
.sb-rail > .queue-card { top: 68px; }
.sb-rail > .queue-card { border-radius: 16px; padding: 0.7rem; }
.sb-tab { padding: 0.45rem 0.35rem; font-size: 0.75rem; }
.session-board .queue-card .queue-row { padding: 0.45rem 0.6rem; border-radius: 12px; }
.session-board .queue-card .queue-name { font-size: 0.8rem; }

/* ---- Open Play live page (smaller scale) ---- */
.lv-title h1 { font-size: clamp(1.6rem, 3.5vw, 2.1rem); }
.lv-sub { font-size: 0.78rem; }
.lv-btn { min-height: 34px; padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.lv-stats { gap: 0.5rem; margin-bottom: 1rem; }
.lv-stat { padding: 0.55rem 0.75rem; border-radius: 14px; gap: 0.6rem; }
.lv-stat-ic { width: 32px; height: 32px; border-radius: 10px; }
.lv-stat small { font-size: 0.62rem; }
.lv-stat b { font-size: 1.25rem; }
.lv-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; }
.lv-main, .lv-side { gap: 1rem; }
.lv-sec-h h2 { font-size: 1.19rem; }
.lv-courts { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0.75rem; }
.lv-court { padding: 0.85rem; border-radius: 16px; }
.lv-c-name { font-size: 0.94rem; }
.lv-timer { font-size: 1.5rem; }
.lv-pl { padding: 0.38rem 0.5rem; font-size: 0.8rem; }
.lv-av { width: 22px; height: 22px; font-size: 0.6rem; }
.lv-card { border-radius: 16px; padding: 0.85rem; }

/* ---- Tournament detail (/t/{id}) ---- */
.tsp { max-width: 1240px; margin: 0 auto; }
.td-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 700; color: #2a302c; background: #fff; border: 1px solid var(--line); padding: 0.35rem 0.75rem 0.35rem 0.55rem; border-radius: 999px; margin-bottom: 0.85rem; text-decoration: none; }
.td-crumb:hover { border-color: var(--ink); }
a.td-crumb, a.td-crumb:visited { color: #2a302c; }
.tsp-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 1.2rem; align-items: start; }
.td-banner { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -16px rgba(24,28,26,.2); border: 1px solid var(--line); background: var(--ink); }
.td-poster { position: relative; aspect-ratio: 796 / 300; width: 100%; background: var(--ink); overflow: hidden; }
.td-poster > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td-poster-ph { background-image: linear-gradient(135deg, #181c1a, #5d8b37 55%, #a5c639); }
.td-poster-ic { position: absolute; right: -14px; bottom: -22px; opacity: .22; color: #fff; }
.td-poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,28,26,.35) 0, transparent 40%); pointer-events: none; }
.td-tags { position: absolute; z-index: 2; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; gap: 8px; }
.td-tag { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.66rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: 999px; background: rgba(255,253,248,.96); box-shadow: 0 2px 8px -2px rgba(0,0,0,.25); color: var(--ink); }
.td-tag.st-live { background: var(--ink); color: var(--accent); }
.td-tag.st-live b { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: tn-blink 1.3s infinite; }
.td-tag.st-up { background: var(--energy); color: #4d3d00; }
.td-tag.st-done { color: #46692a; }
.td-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 1.1rem 0 0; }
.td-head h1 { margin: 0 0 0.5rem; font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: clamp(1.75rem, 3.6vw, 2.5rem); line-height: 1.04; color: var(--ink); }
.td-head h1 em { font-style: italic; font-weight: 600; color: var(--accent-dark); }
.td-org { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.84rem; }
.td-org i { font-style: normal; width: 26px; height: 26px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 0.62rem; font-weight: 700; flex: none; }
.td-org b { color: #2a302c; font-weight: 600; }
.td-facts { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }
.td-fact { display: inline-flex; gap: 0.45rem; align-items: center; font-size: 0.75rem; font-weight: 600; color: #2a302c; background: #f3eee2; border: 1px solid var(--line); padding: 0.3rem 0.7rem; border-radius: 999px; }
.td-fact svg { color: #46692a; }
.td-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 1.4rem 0 0.6rem; }
.td-sec-h h2 { margin: 0; font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: 1.38rem; }
.td-sec-h span { font-size: 0.78rem; color: var(--muted); font-weight: 600; }
.td-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.td-stat { background: #fffdf8; border: 1px solid var(--line); border-radius: 14px; padding: 0.75rem 0.9rem; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -16px rgba(24,28,26,.2); display: flex; flex-direction: column; gap: 0.3rem; }
.td-stat b { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.6rem; line-height: 1; white-space: nowrap; }
.td-stat span { font-size: 0.66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.td-stat.hot { background: var(--ink); border-color: var(--ink); }
.td-stat.hot b { color: var(--accent); }
.td-stat.hot span { color: #c9cdc4; }
.td-seg { margin: 0 0 0.75rem; max-width: 100%; overflow-x: auto; scrollbar-width: none; display: inline-flex; }
.td-seg::-webkit-scrollbar { display: none; }

/* category cards */
.tsp-cat-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 0.75rem; }
.tsp-card { background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -16px rgba(24,28,26,.2); padding: 0.9rem 0.95rem; }
.tsp-card h2 { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.06rem; margin: 0 0 0.6rem; letter-spacing: -0.01em; }
.tsp-card h3 { font-size: 0.68rem; letter-spacing: .08em; margin: 0.8rem 0 0.3rem; }
.tsp-cat { display: flex; flex-direction: column; gap: 0.2rem; transition: transform .2s, box-shadow .2s; }
.tsp-cat:hover { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(24,28,26,.05), 0 20px 40px -18px rgba(24,28,26,.3); }
.tsp-cat::before { display: none; }
.tsp-cat-head h2 { margin: 0 0 0.5rem; }
.tsp-cat-head .badge { font-size: 0.6rem; padding: 0.2rem 0.5rem; border-radius: 999px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.tsp-cat.status-active .tsp-cat-head .badge { background: var(--ink); color: var(--accent); }
.tsp-cat.status-upcoming .tsp-cat-head .badge { background: var(--energy); color: #4d3d00; }
.tsp-cat.status-completed .tsp-cat-head .badge { background: #efebe1; color: #46692a; }
.tsp-progress { height: 7px; background: #ece6d7; border: 0; border-radius: 99px; }
.tsp-progress > div { background: linear-gradient(90deg, var(--accent-dark), var(--accent)); }
.tsp-note { font-size: 0.78rem; }
.tsp-champion { display: flex; gap: 0.65rem; align-items: center; background: linear-gradient(135deg, rgba(165,198,57,.28), rgba(242,225,140,.4)); border: 1px solid rgba(93,139,55,.25); border-radius: 12px; padding: 0.55rem 0.7rem; margin-top: 0.6rem; flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.tsp-champion span { font-size: 0.6rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark); }
.tsp-champion strong { font-size: 0.85rem; line-height: 1.2; }
.tsp-cat-actions { margin-top: auto; padding-top: 0.6rem; border-top: 1px dashed var(--line); }
.tsp-cat-actions .btn { background: none; border: 0; padding: 0; color: #46692a; font-weight: 700; font-size: 0.81rem; }
.tsp-cat-actions .btn:hover { background: none; }

/* sidebar panels */
.tsp-side { position: sticky; top: 76px; gap: 0.75rem; }
.td-ic { width: 30px; height: 30px; border-radius: 10px; background: rgba(165,198,57,.28); color: #46692a; display: grid; place-items: center; flex: none; }
.td-k { display: block; font-style: normal; font-size: 0.64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tsp-facts { gap: 0.7rem; font-size: 0.84rem; }
.tsp-facts li { align-items: center; }
.tsp-facts li > span:last-child { line-height: 1.3; font-weight: 600; }
.tsp-fees li { font-size: 0.84rem; }
@media (max-width: 980px) {
    .tsp-layout { grid-template-columns: minmax(0, 1fr); }
    .tsp-side { position: static; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 640px) {
    .td-stats { gap: 0.5rem; }
    .td-stat { padding: 0.6rem; }
    .td-stat b { font-size: 1.2rem; }
    .tsp-cat-grid { grid-template-columns: minmax(0, 1fr); }
    .tsp-side { grid-template-columns: minmax(0, 1fr); }
    .td-head .tn-btn { width: 100%; }
    .td-sec-h { flex-wrap: wrap; }
}

/* ===== For court owners (/court-owners) ===== */
.co-page { max-width: 1240px; margin: 0 auto; }
.co-hero { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -16px rgba(24,28,26,.2); padding: 2rem 2.2rem; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 1.8rem; align-items: center; background: radial-gradient(420px 260px at 0 0, rgba(165,198,57,.35), transparent 70%), radial-gradient(380px 260px at 100% 100%, rgba(242,225,140,.55), transparent 70%), #fffdf8; }
.co-hero h1 { margin: 0.8rem 0 0.6rem; font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.02; color: var(--ink); }
.co-hero h1 em { font-style: italic; font-weight: 600; color: var(--accent-dark); }
.co-hero p { margin: 0 0 1.1rem; color: var(--muted); font-size: 0.95rem; max-width: 46ch; }
.co-ctas { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.co-proof { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; font-size: 0.75rem; font-weight: 600; color: #2a302c; }
.co-proof span { display: inline-flex; gap: 0.4rem; align-items: center; }
.co-proof svg { color: var(--accent-dark); }
.co-pv { justify-self: center; width: 100%; max-width: 360px; transform: rotate(1.5deg); }
.co-pv.vb-page { padding: 0; }
.co-pv-card { padding: 0.8rem; box-shadow: 0 24px 50px -22px rgba(24,28,26,.45); }
.co-pv-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.co-pv-logo { width: 34px; height: 34px; border-radius: 50%; font-size: 1rem; border: 0; margin: 0; box-shadow: none; }
.co-pv-head b { display: block; font-size: 0.85rem; line-height: 1.1; }
.co-pv-head small { font-size: 0.68rem; color: var(--muted); }
.co-pv-days { display: flex; gap: 0.35rem; margin-bottom: 0.6rem; }
.co-pv-days .vb-day { width: 58px; padding: 0.35rem 0; border-radius: 12px; cursor: default; }
.co-pv .vb-slot { height: 34px; margin: 4px; font-size: 0.76rem; }
.co-pv .vb-time { font-size: 0.68rem; padding: 0 0.5rem; white-space: normal; }
.co-pv .vb-time-h { padding: 0.55rem 0.5rem; }
.co-pv .vb-court-h { padding: 0.5rem 0.5rem; }
.co-pv-total { display: flex; justify-content: space-between; align-items: center; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px dashed var(--line); gap: 0.6rem; }
.co-pv-total small { display: block; font-size: 0.68rem; color: var(--muted); font-weight: 600; }
.co-pv-total b { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.3rem; }
.co-pv-total .vb-go { width: auto; padding: 0.55rem 1rem; font-size: 0.8rem; pointer-events: none; }

.co-sh { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin: 2.1rem 0 0.75rem; }
.co-sh h2 { margin: 0; font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: 1.38rem; }
.co-sh span { font-size: 0.78rem; color: var(--muted); font-weight: 500; }
.co-f8 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.co-fc { background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -16px rgba(24,28,26,.2); padding: 0.95rem; transition: transform .2s, box-shadow .2s; }
.co-fc:hover { transform: translateY(-3px); box-shadow: 0 2px 3px rgba(24,28,26,.05), 0 20px 40px -18px rgba(24,28,26,.3); }
.co-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 0.6rem; background: rgba(165,198,57,.28); color: #46692a; }
.co-fc:nth-child(4n+2) .co-ic { background: rgba(247,216,80,.4); color: #7a5f00; }
.co-fc:nth-child(4n+3) .co-ic { background: rgba(163,215,142,.45); color: #46692a; }
.co-fc:nth-child(4n) .co-ic { background: var(--ink); color: var(--accent); }
.co-fc h3 { margin: 0 0 0.25rem; font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.03rem; letter-spacing: -0.01em; }
.co-fc p { margin: 0; color: var(--muted); font-size: 0.78rem; line-height: 1.5; }
.co-free { display: flex; justify-content: center; margin-top: 1rem; }
.co-free span { display: inline-flex; gap: 0.5rem; align-items: center; background: var(--ink); color: var(--page-bg); font-weight: 700; font-size: 0.81rem; padding: 0.55rem 1.1rem; border-radius: 999px; }
.co-free svg { color: var(--accent); }
.co-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.co-stp { background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -16px rgba(24,28,26,.2); padding: 0.95rem; }
.co-n { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; font-family: 'Fraunces', serif; font-weight: 800; font-size: 0.95rem; display: grid; place-items: center; margin-bottom: 0.6rem; box-shadow: 0 6px 14px -6px rgba(93,139,55,.7); }
.co-stp b { display: block; font-size: 0.88rem; margin-bottom: 0.2rem; }
.co-stp > span:last-child { font-size: 0.78rem; color: var(--muted); line-height: 1.5; }
.co-stp em { font-style: italic; color: #2a302c; }
.co-sn { margin: 0.75rem 0 0; font-size: 0.78rem; color: var(--muted); text-align: center; }
.co-final { margin-top: 2.1rem; border-radius: 20px; padding: 2.1rem 1.5rem; text-align: center; color: #fff; background: radial-gradient(360px 200px at 0 0, rgba(255,255,255,.22), transparent 70%), linear-gradient(135deg, var(--accent), var(--accent-dark) 70%, #46692a); box-shadow: 0 12px 32px -16px rgba(24,28,26,.2); position: relative; overflow: hidden; }
.co-final::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 200px; height: 200px; border-radius: 50%; border: 30px solid rgba(255,255,255,.1); }
.co-final h2 { margin: 0 0 0.4rem; font-family: 'Fraunces', serif; font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2rem); position: relative; z-index: 1; color: #fff; }
.co-final h2 em { font-style: italic; font-weight: 600; color: var(--ink); }
.co-final p { margin: 0 0 1rem; opacity: .95; font-size: 0.88rem; position: relative; z-index: 1; }
.co-final .co-ctas { position: relative; z-index: 1; }
a.co-white, a.co-white:visited { background: #fff; color: var(--ink); border-color: transparent; }
@media (max-width: 1000px) {
    .co-f8, .co-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-hero { grid-template-columns: 1fr; padding: 1.75rem; }
    .co-pv { transform: none; max-width: 420px; justify-self: start; }
}
@media (max-width: 640px) {
    .co-hero { padding: 1.35rem 1.1rem; border-radius: 18px; }
    .co-f8, .co-steps { grid-template-columns: 1fr; }
    .co-ctas .tn-btn { flex: 1 1 100%; }
    .co-final { padding: 1.6rem 1.1rem; }
    .co-sh span { display: none; }
}

/* ===== How it works (/how-it-works) ===== */
.hiw-page { max-width: 1240px; margin: 0 auto; }
.hiw-hero { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -16px rgba(24,28,26,.2); padding: 2.1rem 1.75rem 1.9rem; text-align: center; background: radial-gradient(420px 260px at 0 0, rgba(165,198,57,.35), transparent 70%), radial-gradient(380px 260px at 100% 100%, rgba(242,225,140,.55), transparent 70%), #fffdf8; }
.hiw-hero h1 { margin: 0.8rem 0 0.6rem; font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.02; color: var(--ink); }
.hiw-hero h1 em { font-style: italic; font-weight: 600; color: var(--accent-dark); }
.hiw-hero p { margin: 0 auto 1.1rem; color: var(--muted); font-size: 0.94rem; max-width: 52ch; }
.hiw-ctas { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }
a.hiw-line, a.hiw-line:visited { background: #fff; border-color: var(--line); color: var(--ink); }
a.hiw-line:hover { border-color: var(--ink); }
.hiw-pick { display: flex; justify-content: center; margin: 1.25rem 0 0.9rem; }
.hiw-pick .tn-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.hiw-pick .tn-seg::-webkit-scrollbar { display: none; }
.hiw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; align-items: start; }
.hiw-grid.one { grid-template-columns: minmax(0, 760px); justify-content: center; }
.hiw-card { background: #fffdf8; border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -16px rgba(24,28,26,.2); padding: 1.1rem; animation: tn-in .35s ease both; }
.hiw-h { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.85rem; }
.hiw-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: rgba(165,198,57,.28); color: #46692a; }
.hiw-card.c2 .hiw-ic { background: var(--ink); color: var(--accent); }
.hiw-card.c3 .hiw-ic { background: rgba(247,216,80,.45); color: #7a5f00; }
.hiw-card.c4 .hiw-ic { background: rgba(163,215,142,.5); color: #46692a; }
.hiw-h h2 { margin: 0; font-family: 'Fraunces', serif; font-weight: 800; letter-spacing: -0.01em; font-size: 1.25rem; line-height: 1.1; }
.hiw-h p { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--muted); }
.hiw-h p a, .hiw-tl a { color: #46692a; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.hiw-tl { list-style: none; margin: 0; padding: 0; display: grid; position: relative; }
.hiw-tl li { display: grid; grid-template-columns: 30px 1fr; gap: 0.75rem; padding-bottom: 0.85rem; position: relative; font-size: 0.81rem; line-height: 1.5; color: var(--muted); }
.hiw-tl li:last-child { padding-bottom: 0; }
.hiw-tl li::before { content: ""; position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, var(--line) 0 4px, transparent 4px 8px); }
.hiw-tl li:last-child::before { display: none; }
.hiw-tl .n { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; font-family: 'Fraunces', serif; font-weight: 800; font-size: 0.88rem; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(93,139,55,.7); }
.hiw-tl b { color: var(--ink); font-weight: 700; }
.hiw-tl div { padding-top: 5px; }
.hiw-final { margin-top: 1.6rem; border-radius: 20px; padding: 2.1rem 1.5rem; text-align: center; color: #fff; background: radial-gradient(360px 200px at 0 0, rgba(255,255,255,.22), transparent 70%), linear-gradient(135deg, var(--accent), var(--accent-dark) 70%, #46692a); box-shadow: 0 12px 32px -16px rgba(24,28,26,.2); position: relative; overflow: hidden; }
.hiw-final::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 200px; height: 200px; border-radius: 50%; border: 30px solid rgba(255,255,255,.1); }
.hiw-final h2 { margin: 0 0 0.4rem; font-family: 'Fraunces', serif; font-weight: 800; font-size: clamp(1.5rem, 3.2vw, 2rem); position: relative; z-index: 1; color: #fff; }
.hiw-final h2 em { font-style: italic; font-weight: 600; color: var(--ink); }
.hiw-final p { margin: 0 0 1rem; font-size: 0.88rem; position: relative; z-index: 1; }
a.hiw-white, a.hiw-white:visited { background: #fff; color: var(--ink); border-color: transparent; }
@media (max-width: 900px) { .hiw-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .hiw-hero { padding: 1.5rem 1.1rem; border-radius: 18px; } .hiw-ctas .tn-btn { flex: 1 1 100%; } .hiw-card { padding: 0.95rem; } .hiw-final { padding: 1.6rem 1.1rem; } .hiw-pick { justify-content: flex-start; } }

/* Up Next: the white pill style for small buttons must not cover the coloured ones (Start match / Pick). */
.session-board .upnext-section .btn-accent, .session-board .upnext-section .btn-accent:visited { background: var(--accent); border-color: var(--accent); color: var(--ink); font-weight: 700; }
.session-board .upnext-section .btn-accent:hover:not(:disabled) { background: #b3d447; }
.session-board .upnext-section .btn-accent:disabled { opacity: .5; cursor: not-allowed; }
.session-board .upnext-section .btn-primary { background: var(--ink); border-color: var(--ink); color: var(--page-bg); }

.session-board .btn-ic { flex: none; }
.session-board .upnext-card .btn-sm { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; }

/* A match being played right now: the whole card (match number, court, scorekeeper, teams, "Playing now" bar) sits in a soft green glow.
   Drawn with a pseudo-element behind the content, so the card keeps exactly the same size and position - nothing in the layout moves. It is a static glow (no animation), so it costs no extra CPU or memory. */
.bracket-match-wrap.is-playing { isolation: isolate; }
.bracket-match-wrap.is-playing::before { content: ""; position: absolute; inset: -6px -7px; z-index: -1; pointer-events: none; border-radius: 16px; background: #fff; border: 2px solid var(--accent); box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.32), 0 0 14px 2px rgba(93, 139, 55, 0.4); }

/* Choose players: the search box sits inside a narrow team box, so keep it compact (the page's general input sizing made it tall). */
.session-board .player-slot .manual-search-input { min-height: 0; height: 30px; padding: 0.2rem 0.5rem; font-size: 0.78rem; line-height: 1.2; border-radius: 8px; width: auto; }
.session-board .player-slot .upnext-dismiss { flex: none; width: 24px; height: 24px; padding: 0; font-size: 0.85rem; }
.session-board .player-slot .manual-search-results .queue-row { padding: 0.3rem 0.5rem; }
.session-board .player-slot .manual-search-results .btn-sm { min-height: 28px; padding: 0.2rem 0.6rem; font-size: 0.72rem; }

.session-board .upnext-empty { grid-column: 1 / -1; }

/* ===== Help centre (/help) + help assistant (chat widget) ===== */
.hl-page .tn-bar { margin-bottom: 1rem; }
.hl-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hl-tabs::-webkit-scrollbar { display: none; }
.hl-link { margin-top: auto; padding-top: 0.2rem; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.84rem; color: var(--accent-dark); text-decoration: none; }
.hl-link:hover { text-decoration: underline; }
.hl-empty { background: #fffdf8; border: 1px dashed var(--line); border-radius: 16px; padding: 1.6rem 1.2rem; text-align: center; display: grid; gap: 0.3rem; color: var(--muted); }
.hl-empty strong { color: var(--ink); overflow-wrap: anywhere; }


.hl-final { margin: 1.6rem 0 0.5rem; background: #fffdf8; border: 1px solid var(--line); border-radius: 18px; padding: 1.2rem 1.4rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hl-final h2 { margin: 0 0 0.2rem; font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.35rem; }
.hl-final p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.hl-final-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
a.tn-btn-lime, a.tn-btn-lime:visited { color: var(--ink); }
a.tn-btn-ink, a.tn-btn-ink:visited { color: var(--page-bg); }
.hl-btn-line { background: #fff; border-color: var(--line); color: var(--ink); }
a.hl-btn-line, a.hl-btn-line:visited { color: var(--ink); }

/* The chat itself */
.hc { display: flex; flex-direction: column; background: #fffdf8; color: var(--ink); border-radius: 16px; overflow: hidden; min-width: 0; }
.hc-log { height: 360px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0.9rem; display: flex; flex-direction: column; gap: 0.6rem; background: #faf6ee; }
.hc-msg { display: flex; gap: 0.5rem; align-items: flex-end; max-width: 100%; }
.hc-msg.me { justify-content: flex-end; }
.hc-av { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--ink); display: grid; place-items: center; font-size: 0.8rem; }
.hc-bubble { max-width: min(86%, 560px); min-width: 0; padding: 0.6rem 0.85rem; border-radius: 16px; font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.hc-msg.bot .hc-bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.hc-msg.me .hc-bubble { background: var(--ink); color: #f6f2e6; border-bottom-right-radius: 5px; }
.hc-text { white-space: pre-line; }
.hc-link { display: inline-block; margin-top: 0.4rem; font-weight: 700; font-size: 0.84rem; color: var(--accent-dark); text-decoration: none; }
.hc-note { margin-top: 0.5rem; font-size: 0.72rem; color: var(--muted); }
.hc-note a { color: var(--accent-dark); }
.hc-related { margin-top: 0.55rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.hc-related > span { font-size: 0.7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); width: 100%; }
.hc-suggest { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 0.9rem 0; background: #faf6ee; }
.hc-chip { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.4rem 0.8rem; min-height: 36px; font: inherit; font-size: 0.8rem; font-weight: 600; text-align: left; cursor: pointer; max-width: 100%; overflow-wrap: anywhere; }
.hc-chip:hover { border-color: var(--accent-dark); background: rgba(165,198,57,.18); }
.hc-form { display: flex; gap: 0.5rem; padding: 0.7rem 0.8rem; border-top: 1px solid var(--line); background: #fffdf8; }
.hc-input { flex: 1; min-width: 0; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 0.6rem 1rem; min-height: 44px; font: inherit; font-size: 16px; color: var(--ink); }
.hc-input:focus { outline: 2px solid rgba(93,139,55,.5); border-color: var(--accent-dark); }
.hc-send { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--accent); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.hc-send:disabled { opacity: .45; cursor: default; }
.hc-foot { padding: 0 0.9rem 0.7rem; font-size: 0.7rem; color: var(--muted); background: #fffdf8; }
.hc-foot a { color: var(--accent-dark); }
.hc-typing { display: inline-flex; gap: 4px; align-items: center; padding: 0.8rem 0.9rem; }
.hc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: hc-dot 1.1s infinite ease-in-out; }
.hc-typing i:nth-child(2) { animation-delay: .15s; }
.hc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hc-dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* Floating chat button + panel (bottom-right, every public page) */
.hc-fab-wrap { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none; }
.hc-fab-wrap > * { pointer-events: auto; }
.hc-fab { border: 0; cursor: pointer; background: var(--ink); color: var(--accent); height: 52px; min-width: 52px; padding: 0 1.1rem 0 0.95rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font: inherit; font-weight: 700; font-size: 0.88rem; box-shadow: 0 10px 28px -8px rgba(24,28,26,.6); transition: transform .15s; -webkit-tap-highlight-color: transparent; }
.hc-fab:hover { transform: translateY(-2px); }
.hc-fab.open { padding: 0; width: 52px; }
.hc-fab-label { color: #f6f2e6; }
.hc-panel { width: min(380px, calc(100vw - 32px)); max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); display: flex; flex-direction: column; background: #fffdf8; border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 60px -16px rgba(24,28,26,.5); overflow: hidden; animation: tn-in .2s ease both; }
.hc-panel.hc-closed { display: none; }
.hc-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.8rem 0.9rem 0.8rem 1.1rem; background: var(--ink); color: #fff; flex: none; }
.hc-panel-head div { display: grid; gap: 1px; min-width: 0; }
.hc-panel-head strong { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.05rem; }
.hc-panel-head span { font-size: 0.72rem; color: #cfcabb; }
.hc-close { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.hc-compact { flex: 1; min-height: 0; border-radius: 0; }
.hc-compact .hc-log { height: auto; flex: 1; min-height: 200px; max-height: 340px; }

/* Phones: the panel becomes a bottom sheet, the button sits clear of fixed bottom bars */
@media (max-width: 1020px) { body:has(.vb-mbar) .hc-fab-wrap { bottom: 84px; } }
@media (max-width: 640px) {
    .hc-fab-wrap { right: 12px; bottom: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
    body:has(.vb-mbar) .hc-fab-wrap { bottom: 84px; }
    .hc-fab { height: 48px; min-width: 48px; }
    .hc-fab.open { width: 48px; }
    .hc-fab-wrap:has(.hc-panel:not(.hc-closed)) { left: 0; right: 0; bottom: 0; align-items: stretch; gap: 0; }
    .hc-fab-wrap:has(.hc-panel:not(.hc-closed)) .hc-fab { display: none; }
    .hc-panel { width: 100%; max-height: 86vh; max-height: 86dvh; border-radius: 20px 20px 0 0; border-bottom: 0; }
    .hc-compact .hc-log { max-height: none; min-height: 0; }
    .hc-form { padding-bottom: calc(0.7rem + env(safe-area-inset-bottom)); }
    .hc-log { height: 320px; }
    .hl-final { padding: 1rem; }
    .hl-final-actions { width: 100%; }
    .hl-final-actions .tn-btn { flex: 1 1 auto; }
    .hl-page .tn-search { flex-basis: 100%; }
}
@media (max-width: 640px) and (max-height: 520px) {
    .hc-panel { max-height: 100vh; max-height: 100dvh; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hc-fab, .hc-panel, .hc-typing i { animation: none; transition: none; }
}

/* Club login: which kind of account this page is for */
.club-who { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0.2rem 0 1rem; }
.club-who-card { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.65rem 0.75rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
.club-who-card strong { font-size: 0.84rem; line-height: 1.25; }
.club-who-card span { font-size: 0.76rem; color: var(--muted); line-height: 1.3; }
.club-who-card.on { border-color: var(--accent-dark); background: rgba(165,198,57,.2); }
a.club-who-card, a.club-who-card:visited { color: var(--ink); }
a.club-who-card:hover { border-color: var(--accent-dark); }
a.club-who-card span { color: var(--accent-dark); font-weight: 700; }
.club-google-note { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--muted); text-align: center; }
.club-hint { font-size: 0.8rem; margin: 0 0 0.4rem; }
@media (max-width: 420px) { .club-who { grid-template-columns: minmax(0, 1fr); } }

/* Help centre: compact question rows (tap to open the answer) */
.hl-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.9rem; align-items: start; }
.hl-row { background: #fffdf8; border: 1px solid var(--line); border-radius: 14px; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.hl-row:hover { border-color: #d8cfba; }
.hl-row.open { border-color: var(--accent-dark); box-shadow: 0 10px 26px -18px rgba(24,28,26,.35); }
.hl-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; text-align: left; border: 0; background: none; padding: 0.8rem 0.95rem; min-height: 48px; font: inherit; font-weight: 700; font-size: 0.92rem; line-height: 1.3; color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hl-q span { min-width: 0; overflow-wrap: anywhere; }
.hl-q svg { flex: none; color: var(--muted); transition: transform .2s; }
.hl-row.open .hl-q svg { transform: rotate(180deg); color: var(--accent-dark); }
.hl-a { padding: 0 0.95rem 0.9rem; }
.hl-a p { margin: 0; color: #4a4e47; font-size: 0.88rem; line-height: 1.55; overflow-wrap: anywhere; }
.hl-a .hl-link { margin-top: 0.5rem; }
@media (max-width: 820px) { .hl-list { grid-template-columns: minmax(0, 1fr); } }

/* Floating help button: can be hidden with its small close badge, and stays away from the session board */
.hc-fab-wrap.hc-away { display: none; }
.hc-fab-holder { position: relative; }
.hc-fab-dismiss { position: absolute; top: -8px; right: -4px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--page-bg); background: #4a4e47; color: #fff; display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 2px 6px rgba(24,28,26,.35); -webkit-tap-highlight-color: transparent; }
.hc-fab-dismiss::after { content: ""; position: absolute; inset: -8px; }
.hc-fab-dismiss:hover { background: #c0392b; }

/* Session board on tablets and phones: one column (the Courts / Queue & Check-in tabs switch the view). Kept last so the compact desktop two-column rule above cannot win. */
@media (max-width: 1020px) {
    .session-board.board-layout:has(> .sb-rail) { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
}
.session-board .court-grid { grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); }
.session-board .upnext-grid { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }

/* Open Play: correct a finished match, and the "add the score?" reminder after a quick win */
.recent-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.4rem; }
.recent-edit { margin-left: auto; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.25rem 0.7rem; min-height: 32px; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.recent-edit:hover { border-color: var(--accent-dark); background: rgba(165,198,57,.18); }
.score-prompt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: rgba(247,216,80,.22); border: 1px solid rgba(190,160,30,.45); font-size: 0.88rem; }
.score-prompt-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.edit-winner-note { margin: 0; padding: 0.55rem 0.8rem; border-radius: 10px; background: rgba(165,198,57,.2); font-weight: 600; font-size: 0.9rem; overflow-wrap: anywhere; }

/* Court owners: finish setting up a venue (card + login dialog) and the court page note */
.vsh { margin: 0 0 1.2rem; padding: 1.1rem 1.2rem; border-radius: 18px; background: linear-gradient(135deg, rgba(247,216,80,.22), rgba(165,198,57,.2)); border: 1px solid rgba(190,160,30,.4); }
.vsh-head { display: flex; gap: 0.8rem; align-items: flex-start; }
.vsh-ic { font-size: 1.6rem; line-height: 1; }
.vsh-head h2 { margin: 0; font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.25rem; }
.vsh-head p { margin: 0.2rem 0 0; color: #4a4e47; font-size: 0.9rem; }
.vsh-list { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.vsh-item { background: #fffdf8; border: 1px solid var(--line); border-radius: 14px; padding: 0.8rem 0.95rem; min-width: 0; }
.vsh-venue { font-weight: 800; margin-bottom: 0.4rem; overflow-wrap: anywhere; }
.vsh-court + .vsh-court { margin-top: 0.8rem; padding-top: 0.8rem; border-top: 1px dashed var(--line); }
.vsh-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.35rem 0; }
.vsh-step { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; padding: 0.25rem 0.65rem 0.25rem 0.3rem; border-radius: 999px; background: #fff; border: 1px solid var(--accent-dark); color: var(--ink); }
.vsh-step i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--accent); display: grid; place-items: center; font-size: 0.7rem; }
.vsh-step.done { border-color: var(--line); color: var(--muted); }
.vsh-step.done i { background: #e3f4e8; color: #2e9e55; }
.vsh-step.off { border-color: var(--line); color: var(--muted); }
.vsh-step.off i { background: #efebe1; color: var(--muted); }
.vsh-why { margin: 0.35rem 0 0.6rem; font-size: 0.88rem; color: #4a4e47; line-height: 1.5; }
.vsh-popup-ic { font-size: 1.9rem; background: rgba(247,216,80,.3); animation: none; }
.vsh-more { font-size: 0.85rem; margin-top: 0; }
a.btn.btn-primary.btn-block, a.vsh-item .btn-primary { text-decoration: none; }
.court-setup-note { margin: 0 0 1rem; padding: 0.9rem 1.05rem; border-radius: 14px; background: rgba(247,216,80,.22); border: 1px solid rgba(190,160,30,.45); }
.court-setup-note p { margin: 0.25rem 0 0.4rem; font-size: 0.88rem; color: #4a4e47; }
.court-setup-note ul { margin: 0; padding: 0; list-style: none; font-size: 0.9rem; display: grid; gap: 0.2rem; }
.court-setup-note li.done { color: #2e9e55; }
.court-next { margin: 0.6rem 0 0.9rem; padding: 0.6rem 0.8rem; border-radius: 10px; background: rgba(247,216,80,.25); font-size: 0.88rem; text-align: left; }

/* Admin: a club's venues and courts */
.adm-venue + .adm-venue { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.adm-venue-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.rem-modal { max-width: 640px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; }
.rem-to { background: #f3eee2; color: var(--muted); }
.rem-body { width: 100%; font: inherit; font-size: 0.9rem; line-height: 1.5; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 12px; resize: vertical; min-height: 180px; }
.rem-hint { font-size: 0.78rem; margin: 0.3rem 0 0; }
.rem-actions { justify-content: flex-end; flex-wrap: wrap; gap: 0.5rem; }

/* Standings (host board + public live page): four calm columns - rank, player, W-L, +/-. Form dots and points sit under the name;
   Strength / Games / Win % only appear on wider screens. */
.st-player { min-width: 0; }
.st-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.55rem; margin-top: 2px; font-size: 0.72rem; font-weight: 600; color: var(--muted); line-height: 1.2; }
.st-dots { display: inline-flex; gap: 3px; align-items: center; }
.st-d { width: 8px; height: 8px; border-radius: 50%; background: #d8d2c2; display: inline-block; }
.st-d.win { background: var(--accent-dark); }
.st-d.loss { background: #d9695a; }
.st-d.none { background: #d8d2c2; }
.st-pts { font-variant-numeric: tabular-nums; }
.st-wl { white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-pd { display: inline-block; min-width: 2.6em; text-align: center; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; font-variant-numeric: tabular-nums; background: #efebe1; color: var(--muted); }
.st-pd.pos { background: rgba(93,139,55,.16); color: #3d6a24; }
.st-pd.neg { background: rgba(217,105,90,.16); color: #b3463a; }
.st-note { margin: 0.6rem 0 0; font-size: 0.74rem; color: var(--muted); }
@media (max-width: 900px) { .st-wide { display: none; } }

/* Open Play live page on tablets and phones: one column. Kept last so the compact two-column rule above cannot override it (it left the main column 0px wide). */
@media (max-width: 1020px) {
    .lv-layout, .lv-layout.lv-solo { grid-template-columns: minmax(0, 1fr); }
}

/* Recent matches: a quiet mark when a saved result was later corrected */
.recent-edited { font-size: 0.68rem; font-weight: 700; color: var(--muted); background: #efebe1; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.recent-edit-note { flex-basis: 100%; font-size: 0.72rem; color: var(--muted); overflow-wrap: anywhere; }
.lv-edited { font-size: 0.8rem; color: var(--muted); margin-left: 0.15rem; cursor: help; }
.lv-edited-note { margin: 0.5rem 0 0; font-size: 0.72rem; color: var(--muted); }

/* Open Play check-in panel: clearer "where do I add a player" */
.sb-add-label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.3rem 0.2rem; }
.session-board .queue-card .sb-empty-guide { display: grid; gap: 0.4rem; justify-items: start; text-align: left; padding: 0.9rem 1rem; border: 1px dashed var(--accent-dark); border-radius: 14px; background: rgba(165,198,57,.12); color: var(--ink); }
.session-board .sb-empty-guide strong { font-size: 0.95rem; }
.session-board .sb-empty-guide p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: #4a4e47; }
.sb-empty-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Match timer on a live court card */
.mt-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.6rem; padding: 0.35rem 0.5rem; }
.mt-bar.warn .timer { color: #b07a00; }
.mt-bar.over .timer { color: #c0392b; }
.mt-bar.over { background: rgba(217,105,90,.12); border-radius: 10px; }
.mt-bar.warn { background: rgba(247,216,80,.2); border-radius: 10px; }
.mt-actions { display: inline-flex; gap: 0.35rem; margin-left: auto; }
.mt-btn { border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 0.2rem 0.65rem; min-height: 30px; font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.mt-btn:hover { border-color: var(--accent-dark); background: rgba(165,198,57,.18); }
.mt-btn { white-space: nowrap; flex: none; }
@media (max-width: 600px) { .mt-actions { flex-basis: 100%; margin-left: 0; } }

/* Header match-timer picker: a small dropdown on desktop, a bottom sheet on phones */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.mt-pick { position: relative; display: inline-flex; }
.mt-trigger { display: inline-flex; align-items: center; gap: 0.25rem; opacity: .75; }
.mt-trigger.on { opacity: 1; border-color: var(--accent-dark); background: rgba(165,198,57,.22); }
.mt-trigger-min { font-size: 0.78rem; font-weight: 800; line-height: 1; color: #3d6a24; }
.mt-backdrop { position: fixed; inset: 0; z-index: 70; background: transparent; }
.mt-pop { position: absolute; z-index: 71; top: calc(100% + 8px); right: 0; width: min(300px, calc(100vw - 24px)); padding: 0.9rem 1rem 1rem; background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px -14px rgba(24,28,26,.45); }
.mt-pop-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.mt-pop-head strong { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.05rem; }
.mt-pop-close { border: 0; background: #efebe1; color: var(--ink); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 0.85rem; }
.mt-pop-sub { margin: 0.25rem 0 0.7rem; font-size: 0.8rem; color: var(--muted); }
.mt-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mt-chip { min-height: 40px; min-width: 56px; padding: 0.35rem 0.8rem; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.mt-chip:hover { border-color: var(--accent-dark); }
.mt-chip.active { background: var(--ink); color: var(--accent); border-color: var(--ink); }
.mt-pop-row { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--line); font-size: 0.88rem; font-weight: 600; }
.mt-pop-note { margin: 0.5rem 0 0; font-size: 0.76rem; color: var(--muted); }
.mt-pop-more { margin-top: 0.7rem; font-size: 0.8rem; }
@media (max-width: 600px) {
    .mt-backdrop { background: rgba(15,18,26,.45); }
    .mt-pop { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: 20px 20px 0 0; border-bottom: 0; padding: 1rem 1rem calc(1.1rem + env(safe-area-inset-bottom)); box-shadow: 0 -18px 44px -14px rgba(24,28,26,.45); animation: tn-in .18s ease both; }
    .mt-chip { flex: 1 1 28%; min-height: 46px; font-size: 0.95rem; }
}

/* Court hours / prices: "until midnight" tick box under the closing time */
.rule-midnight { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.rule-midnight input { width: 18px; height: 18px; accent-color: var(--accent-dark); }

/* ===== Court setup page (/club/venues/{id}/courts/{id}): compact, mobile-first ===== */
.cs-page { max-width: 760px; margin: 0 auto; display: grid; gap: 0.8rem; }
.cs-head { display: grid; gap: 0.1rem; }
.cs-back { font-size: 0.82rem; font-weight: 700; color: var(--accent-dark); text-decoration: none; overflow-wrap: anywhere; }
.cs-head h1 { margin: 0; font-family: 'Fraunces', serif; font-weight: 800; font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.1; overflow-wrap: anywhere; }

.cs-steps { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cs-step { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.75rem 0.25rem 0.3rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.cs-step i { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; background: #efebe1; color: var(--muted); }
.cs-step.done { border-color: rgba(93,139,55,.5); color: var(--ink); }
.cs-step.done i { background: #e3f4e8; color: #2e9e55; }
.cs-step.todo { border-color: rgba(190,160,30,.55); background: rgba(247,216,80,.2); color: var(--ink); }
.cs-step.todo i { background: var(--ink); color: var(--accent); }
.cs-warn { margin: 0; padding: 0.6rem 0.8rem; border-radius: 12px; background: rgba(247,216,80,.22); border: 1px solid rgba(190,160,30,.45); font-size: 0.86rem; line-height: 1.45; }

.cs-card { background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; padding: 0.9rem 1rem 1rem; display: grid; gap: 0.5rem; min-width: 0; }
.cs-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; }
.cs-card-head h2 { margin: 0; font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.1rem; }
.cs-count { font-size: 0.72rem; font-weight: 700; color: var(--muted); background: #efebe1; padding: 0.1rem 0.55rem; border-radius: 999px; white-space: nowrap; }
.cs-hint { margin: 0; font-size: 0.8rem; color: var(--muted); line-height: 1.4; }
.cs-empty { margin: 0; font-size: 0.86rem; color: var(--muted); }

.cs-page label { display: block; margin: 0 0 0.2rem; font-size: 0.74rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.cs-page input:not([type="checkbox"]), .cs-page select { width: 100%; min-height: 44px; padding: 0.4rem 0.7rem; font: inherit; font-size: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); box-sizing: border-box; }
.cs-page input:focus, .cs-page select:focus { outline: 2px solid rgba(93,139,55,.5); border-color: var(--accent-dark); }

.cs-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 0.7rem; }
.cs-f { min-width: 0; }
.cs-span2 { grid-column: 1 / -1; }
.cs-seg { display: flex; gap: 3px; padding: 3px; min-height: 44px; background: #efebe1; border-radius: 12px; box-sizing: border-box; }
.cs-seg-btn { flex: 1; min-width: 0; border: 0; border-radius: 9px; background: transparent; font: inherit; font-size: 0.88rem; font-weight: 700; color: var(--muted); cursor: pointer; }
.cs-seg { border: 1px solid var(--line); background: var(--surface); }
.cs-seg-btn:not(.active):hover { background: var(--brand-tint); color: var(--accent-dark); }
.cs-seg-btn { padding: 0 4px; }
@media (max-width: 420px) { .cs-seg-btn.active::before { content: none; } }
.cs-seg-btn.active { background: var(--accent-dark); color: #fff; box-shadow: none; }
.cs-seg-btn.active::before { content: "✓ "; }
.cs-seg-btn.cs-st-maintenance.active { background: #b45309; }
.cs-seg-btn.cs-st-inactive.active { background: #6b7280; }
.cs-save { justify-self: start; min-height: 44px; }

/* Rules: one calm line per window */
.cs-rules { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.cs-rule { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.4rem 0.5rem 0.8rem; }
.cs-rule + .cs-rule { border-top: 1px solid var(--line); }
.cs-rule-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.6rem; }
.cs-rule-text strong { font-size: 0.92rem; color: var(--accent-dark); }
.cs-rule-text span { font-size: 0.92rem; font-weight: 600; }
.cs-rule-text em { font-style: normal; font-size: 0.78rem; color: var(--muted); }
.cs-del { flex: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: transparent; color: #b3463a; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.cs-del:hover { background: #fdeaea; }

/* Add forms */
.cs-add { display: grid; gap: 0.6rem; padding-top: 0.7rem; border-top: 1px dashed var(--line); }
.cs-add-title { font-size: 0.78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
.cs-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; align-items: end; }
.cs-check { display: flex; align-items: center; gap: 0.55rem; margin: 0; padding: 0.35rem 0; font-size: 0.88rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); cursor: pointer; }
.cs-page .cs-check { text-transform: none; font-size: 0.88rem; letter-spacing: 0; color: var(--ink); margin: 0; }
.cs-check input { width: 22px; height: 22px; flex: none; accent-color: var(--accent-dark); }
.cs-check small { color: var(--muted); font-weight: 500; }
.cs-checks { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; }
.cs-addbtn { min-height: 44px; justify-self: start; }

/* Day chips: seven in one row, even on a phone */
.cs-page .day-picker { margin: 0; }
.cs-page .day-chips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.3rem; }
.cs-page .day-chip { min-width: 0; padding: 0; min-height: 40px; font-size: 0.8rem; }
.cs-page .day-presets { gap: 1rem; margin-top: 0.3rem; font-size: 0.8rem; }

/* Collapsible extras */
.cs-fold { background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.cs-fold > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.85rem 1rem; min-height: 48px; font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.02rem; cursor: pointer; }
.cs-fold > summary::-webkit-details-marker { display: none; }
.cs-fold > summary::after { content: "▾"; margin-left: auto; color: var(--muted); font-family: 'Inter', sans-serif; font-size: 0.9rem; transition: transform .15s; }
.cs-fold[open] > summary::after { transform: rotate(180deg); }
.cs-fold-body { display: grid; gap: 0.6rem; padding: 0 1rem 1rem; }

@media (max-width: 520px) {
    .cs-page { gap: 0.65rem; }
    .cs-card { padding: 0.8rem 0.85rem 0.9rem; border-radius: 14px; }
    .cs-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-fields > :nth-child(3) { grid-column: 1 / -1; }
    .cs-save, .cs-addbtn { justify-self: stretch; width: 100%; }
}
.cs-err { margin: 0; scroll-margin-top: 5rem; scroll-margin-bottom: 6rem; }
.cs-page input:disabled { background: #efebe1; color: var(--muted); cursor: not-allowed; opacity: 1; }

/* Book a Court listing: venues that cannot be booked yet ("Coming soon") */
.dk-card.dk-soon { cursor: default; pointer-events: none; opacity: .88; filter: saturate(.7); }
.dk-card.dk-soon:hover { transform: none; box-shadow: inherit; }
.dk-card.dk-soon .dk-photo { filter: grayscale(.35); }
.dk-tag.dk-tag-soon { background: var(--ink); color: var(--accent); }
.dk-badge.dk-badge-soon { background: rgba(247,216,80,.35); color: #6b5400; }
.dk-cta.dk-cta-soon { color: var(--muted); font-weight: 600; }

/* Venue page for a venue with nothing to book yet */
.vb-soon { text-align: center; padding: 1.6rem 1.2rem; display: grid; gap: 0.6rem; justify-items: center; max-width: 560px; margin: 0 auto; }
.vb-soon-ic { width: 56px; height: 56px; border-radius: 50%; background: rgba(247,216,80,.3); display: grid; place-items: center; font-size: 1.6rem; }
.vb-soon p { margin: 0; color: #4a4e47; line-height: 1.55; }
.vb-soon-sub { font-size: 0.9rem; color: var(--muted); }
.vb-soon-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.vb-soon-link { margin-top: 0.2rem; }

.dash-start-hint { margin: 0.2rem 0 0.7rem; padding: 0.55rem 0.75rem; border-radius: 10px; background: rgba(165,198,57,.16); font-size: 0.84rem; line-height: 1.45; color: #3f4a37; }

/* Reclub: fill the New Session form from a meet link, grouped import review, host-venue suggestion */
.reclub-fill { margin: 0 0 0.9rem; padding: 0.65rem 0.75rem; border-radius: 12px; background: rgba(165,198,57,.14); border: 1px dashed var(--accent-dark); }
.reclub-fill label { display: block; margin: 0 0 0.35rem; font-size: 0.86rem; font-weight: 700; }
.reclub-fill-row { display: flex; gap: 0.5rem; align-items: center; }
.reclub-fill-row input { flex: 1 1 auto; min-width: 0; margin: 0; }
.reclub-fill-row .btn { flex: none; white-space: nowrap; }
.reclub-fill-msg { margin-top: 0.45rem; font-size: 0.82rem; line-height: 1.4; }
.reclub-fill-msg.ok { color: #3f4a37; }
.reclub-fill-msg.bad { color: var(--danger); }

.import-summary { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.7rem; }
.import-count { padding: 0.22rem 0.65rem; border-radius: 999px; font-size: 0.8rem; background: var(--page-bg); border: 1px solid var(--line); }
.import-count.known { background: #eaf4dc; border-color: #c9e0a8; }
.import-count.new { background: var(--info-bg); border-color: #cfe2f7; }
.import-count.check { background: #fff3cd; border-color: #f0d68a; color: #5b4a0f; }
.import-group-title { display: flex; align-items: center; gap: 0.4rem; margin: 0.9rem 0 0.35rem; font-size: 0.88rem; font-weight: 800; }
.import-group-title span { padding: 0 0.5rem; border-radius: 999px; background: var(--page-bg); border: 1px solid var(--line); font-size: 0.75rem; font-weight: 700; }
.import-group-title.check { color: #7a5a00; }
.import-group-hint { margin: 0 0 0.45rem; font-size: 0.78rem; line-height: 1.4; color: var(--muted); }
.import-was { margin: 0.25rem 0 0 2.1rem; font-size: 0.76rem; color: var(--muted); }
.import-name-static { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-gone { cursor: pointer; display: block; }

.host-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; margin: 0.5rem 0; padding: 0.55rem 0.75rem; border-radius: 12px; background: rgba(165,198,57,.16); border: 1px solid #c9e0a8; font-size: 0.88rem; }
.host-suggest-actions { display: inline-flex; gap: 0.4rem; }

@media (max-width: 560px) {
    .reclub-fill-row { flex-wrap: wrap; }
    .reclub-fill-row .btn { width: 100%; }
}
.import-review-list.import-gone-list { max-height: none; overflow: visible; }

/* Host-venue suggestion inside the dark session-board tile: stack under the bar instead of beside it */
.sb-venue { flex-direction: column; align-items: stretch; gap: 0.5rem; }
.sb-venue .host-venue-bar { flex: none; }
.sb-venue .host-suggest { margin: 0; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); color: #faf6ee; }
.sb-venue .host-suggest .btn-primary { background: var(--accent); color: var(--ink); border-color: var(--accent); border-radius: 999px; font-weight: 700; }
.sb-venue .host-suggest .btn:not(.btn-primary) { background: transparent; color: #faf6ee; border-color: rgba(255,255,255,.35); border-radius: 999px; }

/* Dashboard: "Get bookings" - the owner's booking link, ready to send to customers */
.bk-link { margin-top: 0.8rem; padding: 0.9rem 1rem; border-radius: 16px; background: var(--ink); color: #faf6ee; background-image: radial-gradient(260px 140px at 100% 0, rgba(165,198,57,.35), transparent 70%); display: flex; flex-direction: column; gap: 0.6rem; }
.bk-link-head { display: flex; gap: 0.75rem; align-items: flex-start; }
.bk-link-ic { flex: none; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--accent); color: var(--ink); display: grid; place-items: center; font-size: 1.15rem; }
.bk-link h2 { margin: 0; font-size: 1.05rem; line-height: 1.25; color: #fff; }
.bk-link p { margin: 0.2rem 0 0; font-size: 0.86rem; line-height: 1.4; color: #d9ddd2; }
.bk-link-venue { font-size: 0.8rem; font-weight: 700; color: var(--accent); }
.bk-link-pick { max-width: 100%; padding: 0.4rem 0.6rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 0.88rem; }
.bk-link-pick option { color: var(--ink); }
.bk-link-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.bk-link-row input { flex: 1 1 220px; min-width: 0; margin: 0; padding: 0.55rem 0.75rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; font: inherit; font-size: 0.88rem; }
.bk-link-row .btn { border-radius: 999px; font-weight: 700; text-decoration: none; background: transparent; color: #faf6ee; border: 1px solid rgba(255,255,255,.4); white-space: nowrap; }
.bk-link-row .btn.btn-primary { background: var(--accent); color: var(--ink); border-color: var(--accent); }
.bk-link.compact { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.55rem 0.9rem; border-radius: 14px; }
.bk-link.compact .bk-link-label { font-weight: 800; font-size: 0.9rem; }
.bk-link.compact .bk-link-row { flex: 1 1 auto; justify-content: flex-end; }
.bk-link.compact .bk-link-row .btn { padding: 0.3rem 0.7rem; font-size: 0.82rem; }
@media (max-width: 560px) {
    .bk-link-row .btn { flex: 1 1 100%; text-align: center; }
    .bk-link.compact .bk-link-row { justify-content: stretch; }
    .bk-link.compact .bk-link-row .btn { flex: 1 1 auto; }
}

/* Admin: email the booking link to a court owner */
.adm-venue-share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin: 0.5rem 0 0.2rem; font-size: 0.85rem; }
.bl-placeholders { display: flex; flex-direction: column; gap: 0.2rem; margin: 0 0 0.8rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: var(--page-bg); border: 1px solid var(--line); font-size: 0.82rem; }
.bl-placeholders code { padding: 0 0.3rem; border-radius: 6px; background: var(--brand-tint); font-weight: 700; }

/* Public QR code page for a venue's booking link */
.qrpage { display: flex; justify-content: center; padding: 1.5rem 1rem 2.5rem; }
.qrpage-card { width: 100%; max-width: 460px; text-align: center; padding: 1.4rem 1.2rem; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(32, 29, 24, 0.08); }
.qrpage-card h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.qrpage-lead { margin: 0.3rem 0 0; font-weight: 700; color: var(--accent-dark); }
.qrpage-card .qr-code-box img { width: min(100%, 320px); height: auto; image-rendering: pixelated; }
.qrpage-link { margin: 0; word-break: break-all; font-size: 0.85rem; color: var(--muted); }
.qrpage-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 1rem 0 0.6rem; }
.qrpage-tip { margin: 0; font-size: 0.82rem; line-height: 1.45; }
@media print {
    body:has(.qrpage) header, body:has(.qrpage) nav, body:has(.qrpage) footer, body:has(.qrpage) .qrpage-actions, body:has(.qrpage) .qrpage-tip { display: none !important; }
    .qrpage-card { box-shadow: none; border: 0; }
}

/* Reclub link box: a roomier input with a link icon and a clear focus ring */
.reclub-fill-row { gap: 0.6rem; }
.reclub-fill-row input {
    height: 2.9rem;
    padding: 0 0.9rem 0 2.6rem;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235d8b37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13a5 5 0 0 0 7.07 0l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.07 0l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/%3E%3C/svg%3E") no-repeat 0.85rem center;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(32, 29, 24, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.reclub-fill-row input::placeholder { color: #9a9486; }
.reclub-fill-row input:hover { border-color: #cfc6b2; }
.reclub-fill-row input:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 4px rgba(93, 139, 55, 0.18); }
.reclub-fill-row .btn { height: 2.9rem; padding: 0 1.2rem; border-radius: 12px; font-size: 0.95rem; font-weight: 700; }
@media (max-width: 560px) {
    .reclub-fill-row .btn { height: 2.7rem; }
}

/* New Session popup: compact, with a pinned header and footer so only the middle scrolls */
.ns-modal { display: flex; flex-direction: column; max-width: 520px; max-height: min(92vh, 780px); padding: 0; overflow: hidden; }
.ns-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.9rem 1.1rem 0.7rem; border-bottom: 1px solid var(--line); }
.ns-head h3 { margin: 0; font-size: 1.2rem; }
.ns-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.9rem 1.1rem 0.4rem; overscroll-behavior: contain; }
.ns-foot { display: flex; gap: 0.6rem; padding: 0.7rem 1.1rem; border-top: 1px solid var(--line); background: var(--surface); }
.ns-foot .btn { height: 2.8rem; border-radius: 12px; font-weight: 700; }
.ns-foot .btn-block { flex: 1; }
.ns-guest { margin: 0 0 0.7rem; font-size: 0.8rem; line-height: 1.4; color: var(--muted); }
.ns-modal .field { margin-bottom: 0.65rem; gap: 0.25rem; }
.ns-modal .field label, .ns-label { font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.ns-label { display: block; margin-bottom: 0.25rem; }
.ns-modal .field input { height: 2.6rem; padding: 0 0.7rem; border-radius: 10px; min-width: 0; }
.ns-modal .field input:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(93, 139, 55, 0.18); }
.ns-times { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 0.5rem; }
.ns-times .field { margin-bottom: 0.3rem; }
.ns-hint { margin: 0 0 0.7rem; font-size: 0.76rem; color: var(--muted); }
.ns-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.7rem; }
.ns-block { min-width: 0; }
.ns-stepper { padding: 0; gap: 0.6rem; }
.ns-modal .upgrade-inline-hint { margin: -0.3rem 0 0.6rem; font-size: 0.8rem; }

.mm-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mm-chip { padding: 0.4rem 0.85rem; border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.mm-chip:hover { border-color: var(--accent-dark); }
.mm-chip.selected { background: var(--brand-tint); border-color: var(--accent-dark); color: var(--brand-dark); }
.mm-chip-desc { margin: 0.5rem 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--muted); }
.mm-chip-desc .badge-tag { margin-right: 0.35rem; vertical-align: 1px; }

.ns-chip { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.7rem; padding: 0.55rem 0.75rem; border-radius: 12px; background: rgba(165,198,57,.16); border: 1px solid #c9e0a8; }
.ns-chip-text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.ns-chip-text strong { font-size: 0.88rem; color: #3f4a37; }
.ns-chip-text small { font-size: 0.75rem; line-height: 1.35; color: var(--muted); }
.ns-chip-change { flex: none; background: none; border: none; padding: 0.2rem 0.3rem; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--accent-dark); text-decoration: underline; cursor: pointer; }
.ns-modal .reclub-fill { margin-bottom: 0.7rem; padding: 0.55rem 0.7rem; }
.ns-modal .reclub-fill label { font-size: 0.82rem; }

.ns-more { margin: 0.2rem 0 0.7rem; border: 1px solid var(--line); border-radius: 12px; background: var(--page-bg); }
.ns-more > summary { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.6rem 0.85rem; cursor: pointer; list-style: none; }
.ns-more > summary::-webkit-details-marker { display: none; }
.ns-more-title { font-size: 0.88rem; font-weight: 800; }
.ns-more-title::after { content: "▾"; margin-left: 0.4rem; color: var(--muted); }
.ns-more[open] .ns-more-title::after { content: "▴"; }
.ns-more-sum { font-size: 0.76rem; color: var(--muted); }
.ns-more[open] .ns-more-sum { display: none; }
.ns-more-body { padding: 0 0.85rem 0.5rem; }
.ns-more-body .settings-row { padding: 0.55rem 0; }

@media (max-width: 560px) {
    .ns-backdrop { padding: 0; align-items: stretch; }
    .ns-modal { max-width: none; max-height: none; height: 100dvh; border-radius: 0; }
    .ns-times { grid-template-columns: 1fr 1fr; }
    .ns-times .ns-date { grid-column: 1 / -1; }
    .ns-modal .field input { font-size: 16px; } /* keeps iOS from zooming into the field */
    .ns-foot { padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); }
}
.ns-two { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
@media (max-width: 560px) { .ns-two { grid-template-columns: 1fr; gap: 0; } }

/* Venue setup: "How long is a slot held?" steps */
.hold-info { margin-top: 1rem; font-size: 0.85rem; }
.hold-steps { margin: 0.6rem 0 0; padding: 0; list-style: none; counter-reset: hold; display: flex; flex-direction: column; gap: 0.55rem; }
.hold-steps li { counter-increment: hold; position: relative; padding-left: 2rem; line-height: 1.45; }
.hold-steps li::before { content: counter(hold); position: absolute; left: 0; top: 0.05rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: rgba(32, 29, 24, 0.85); color: #fff; font-size: 0.75rem; font-weight: 800; display: grid; place-items: center; }
.hold-steps li b { display: block; }

/* Scorekeepers: a request waiting for approval is highlighted so it can't be missed */
.sk-attn { border-color: #f0b429; box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.45), 0 10px 28px rgba(240, 180, 41, 0.25); animation: sk-attn-pulse 2.2s ease-in-out infinite; }
@keyframes sk-attn-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(240, 180, 41, 0.45), 0 10px 28px rgba(240, 180, 41, 0.25); } 50% { box-shadow: 0 0 0 6px rgba(240, 180, 41, 0.25), 0 10px 28px rgba(240, 180, 41, 0.35); } }
.sk-alert { margin: 0.6rem 0 0.9rem; padding: 0.8rem 0.9rem; border-radius: 14px; background: #fff4d6; border: 1.5px solid #f0b429; color: #5b4000; }
.sk-alert-head { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; }
.sk-alert-bell { display: inline-block; animation: sk-bell 1.6s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes sk-bell { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(14deg); } 20%, 40% { transform: rotate(-14deg); } }
.sk-alert-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sk-alert-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 0.75rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: #fff; border: 1px solid #f3dca0; }
.sk-alert-name { font-size: 1.02rem; font-weight: 800; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.sk-alert-actions { display: inline-flex; gap: 0.45rem; }
.sk-alert-actions .btn { height: 2.5rem; padding: 0 1.1rem; border-radius: 10px; font-weight: 800; }
@media (max-width: 560px) { .sk-alert-actions { width: 100%; } .sk-alert-actions .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .sk-attn, .sk-alert-bell { animation: none; } }

/* The join pop-up is larger and pulses so the organizer notices it */
.sk-toast { max-width: 26rem; border-width: 2px; border-color: #f0b429; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28), 0 0 0 4px rgba(240, 180, 41, 0.3); }
.sk-toast-body { font-size: 1rem; }
.sk-toast-actions .btn { height: 2.4rem; padding: 0 1rem; font-weight: 800; }

/* Signature pad (scorekeeper: the winner signs to submit) */
.sigpad { margin: 0.4rem 0 0; }
.sigpad-wrap { position: relative; height: 200px; border: 2px dashed #b9b29f; border-radius: 14px; background: #fff; overflow: hidden; transition: border-color 0.15s ease, background 0.15s ease; }
.sigpad-wrap:not(.empty) { border-style: solid; border-color: var(--accent-dark); }
.sigpad-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.sigpad-line { position: absolute; left: 7%; right: 7%; bottom: 3.1rem; border-bottom: 1.5px solid #d8d2c2; pointer-events: none; }
.sigpad-line::before { content: "✕"; position: absolute; left: -0.1rem; bottom: 0.15rem; font-size: 0.8rem; color: #b9b29f; }
.sigpad-hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0.5rem; color: #9a9486; font-size: 1.05rem; font-weight: 700; pointer-events: none; padding-bottom: 1.5rem; }
.sigpad-hint-icon { font-size: 1.4rem; }
.sigpad-tools { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.5rem; }
.sigpad-state { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.sigpad-state.ok { color: var(--accent-dark); }
.sigpad-btns { display: inline-flex; gap: 0.5rem; }
.sigpad-btn { min-height: 2.7rem; padding: 0 1.1rem; border-radius: 12px; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.95rem; font-weight: 800; cursor: pointer; }
.sigpad-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sigpad-btn:not(:disabled):active { transform: scale(0.97); }
.sb-sign-who { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.2rem 0 0.7rem; padding: 0.6rem 0.75rem; border-radius: 12px; background: #fff4d6; border: 1px solid #f0d68a; color: #5b4000; font-size: 0.92rem; line-height: 1.4; }

/* The signature as the organizer sees it (review and history pop-ups) */
.sk-signature { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.8rem 0 0.2rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: #fff; border: 1px solid var(--line); }
.sk-signature img { display: block; width: 100%; max-width: 340px; height: auto; max-height: 140px; object-fit: contain; align-self: center; background: #fff; border-bottom: 1.5px solid #d8d2c2; }
.sk-signature small { font-size: 0.76rem; }
.sk-signature-none { font-size: 0.82rem; margin: 0.6rem 0 0; }

/* Tournament setup: the scorekeeper offer after saving */
.saved-modal-wide { max-width: 440px; text-align: left; }
.saved-modal-wide .saved-modal-icon, .saved-modal-wide h3, .saved-modal-wide > p { text-align: center; }
.sk-offer { margin: 0.9rem 0; padding: 0.8rem 0.9rem; border-radius: 14px; background: #eef7dc; border: 1.5px solid #c9e0a8; }
.sk-offer strong { display: block; font-size: 1rem; }
.sk-offer p { margin: 0.4rem 0 0; font-size: 0.88rem; line-height: 1.45; color: #3f4a37; }
.sk-offer .sk-offer-note { color: #7a5a00; font-weight: 700; }
.sk-guide { margin: 0.4rem 0 0.6rem; padding: 0; list-style: none; counter-reset: skg; display: flex; flex-direction: column; gap: 0.5rem; }
.sk-guide li { counter-increment: skg; position: relative; padding-left: 2rem; font-size: 0.88rem; line-height: 1.45; }
.sk-guide li::before { content: counter(skg); position: absolute; left: 0; top: 0.05rem; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--accent-dark); color: #fff; font-size: 0.75rem; font-weight: 800; display: grid; place-items: center; }

/* Open Play match timer: paused state */
.mt-bar.paused { background: rgba(32, 29, 24, 0.07); border-radius: 10px; }
.mt-bar.paused .timer { color: var(--muted); opacity: 0.75; }
.mt-bar.paused small { font-weight: 800; color: #7a5a00; }
.mt-pause.on { background: var(--accent); border-color: var(--accent-dark); color: var(--ink); }
.lv-live-bar.paused .lv-timer { opacity: 0.6; }
.lv-live-bar.paused small { font-weight: 800; color: #7a5a00; }

/* Open Play board: the "Live page" menu (open here / share / show on a TV) */
.lp-wrap { position: relative; display: inline-block; }
.lp-trigger { gap: 0.3rem; }
.lp-backdrop { position: fixed; inset: 0; z-index: 70; background: transparent; }
.lp-menu { position: absolute; z-index: 71; top: calc(100% + 8px); left: 0; width: min(330px, calc(100vw - 24px)); padding: 0.4rem; background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 44px -14px rgba(24, 28, 26, 0.45); }
.lp-head { padding: 0.55rem 0.75rem 0.35rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; color: var(--muted); }
.lp-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.7rem 0.75rem; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; text-decoration: none; font: inherit; cursor: pointer; }
.lp-item:hover, .lp-item:focus-visible { background: rgba(165, 198, 57, 0.18); outline: none; }
.lp-ic { flex: none; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 10px; background: #eef2e4; color: var(--accent-dark); }
.lp-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.lp-text b { font-size: 0.95rem; }
.lp-text small { font-size: 0.78rem; line-height: 1.3; color: var(--muted); }
.lp-go { flex: none; color: var(--muted); font-size: 1rem; }
.lp-item + .lp-item { border-top: 1px solid rgba(231, 223, 207, 0.6); }
@media (max-width: 600px) {
    .lp-backdrop { background: rgba(15, 18, 26, 0.45); }
    .lp-menu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: 20px 20px 0 0; padding: 0.5rem 0.6rem calc(0.8rem + env(safe-area-inset-bottom, 0px)); }
    .lp-item { padding: 0.9rem 0.75rem; }
}
.tv-modal-steps { margin: 0.4rem 0 0.8rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; font-size: 0.9rem; line-height: 1.45; }

/* Live page opened for a TV: tap-to-start card */
.tv-start { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; background: rgba(15, 18, 26, 0.72); }
.tv-start-card { width: min(460px, 100%); padding: 1.6rem 1.4rem; text-align: center; border-radius: 22px; background: #fffdf8; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4); }
.tv-start-icon { font-size: 2.6rem; }
.tv-start-card h2 { margin: 0.3rem 0 0.2rem; font-size: 1.5rem; }
.tv-start-card p { margin: 0 0 1rem; color: var(--muted); font-size: 0.95rem; }
.tv-start-actions { display: flex; flex-direction: column; gap: 0.6rem; }
.tv-start-actions .btn { min-height: 3.2rem; font-size: 1.05rem; font-weight: 800; border-radius: 14px; }
.tv-start-skip { margin-top: 0.8rem; background: none; border: none; color: var(--muted); font: inherit; font-size: 0.85rem; text-decoration: underline; cursor: pointer; }

/* Scorekeeper submit pop-up: the winner stands out */
.sb-winner { margin-top: 0.6rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.9rem 0.8rem; border-radius: 16px; background: var(--team); color: #fff; text-align: center; box-shadow: 0 8px 22px -10px var(--team); }
.sb-winner-badge { padding: 0.2rem 0.75rem; border-radius: 999px; background: #ffd54a; color: #4a3600; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; }
.sb-winner-team { margin-top: 0.25rem; font-size: 1.6rem; line-height: 1.1; }
.sb-winner-names { font-size: 1rem; font-weight: 700; opacity: 0.95; overflow-wrap: anywhere; }
.sb-winner-score { margin-top: 0.2rem; font-size: 2.2rem; font-weight: 900; line-height: 1.1; letter-spacing: 0.02em; }
.sb-loser { margin: 0.45rem 0 0.7rem; text-align: center; font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.sb-sign-ask { margin: 0 0 0.3rem; font-size: 0.98rem; line-height: 1.4; color: var(--ink); }
.sk-guide-tip { margin: 0.6rem 0 0.9rem; padding: 0.55rem 0.75rem; border-radius: 10px; background: #fff4d6; border: 1px solid #f0d68a; color: #5b4000; font-size: 0.84rem; line-height: 1.4; }
.sk-guide-link { display: block; width: 100%; margin-top: 0.6rem; padding: 0.3rem; background: none; border: none; color: var(--accent-dark); font: inherit; font-size: 0.88rem; font-weight: 700; text-decoration: underline; cursor: pointer; }
.sb-submit-title { text-align: center; }

/* Checkout price breakdown (court, add-ons, thePickleChamp booking fee, total) */
.checkout-breakdown { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.2rem 0 0.9rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--page-bg); border: 1px solid var(--line); font-size: 0.92rem; }
.cb-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; }
.cb-row small { display: block; margin-top: 0.05rem; font-size: 0.74rem; color: var(--muted); }
.cb-row > span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-total { margin-top: 0.3rem; padding-top: 0.45rem; border-top: 1px dashed #cfc6b2; font-size: 1.05rem; font-weight: 800; }
.vb-fee { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding: 0.5rem 0 0; font-size: 0.88rem; color: var(--muted); }
.vb-fee small { display: block; font-size: 0.72rem; }
.vb-fee b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Venue setup: the thePickleChamp booking fee note */
.booking-fee-note { display: flex; flex-direction: column; gap: 0.25rem; margin: 0 0 1rem; padding: 0.65rem 0.85rem; border-radius: 12px; background: #fff4d6; border: 1px solid #f0d68a; color: #5b4000; font-size: 0.86rem; line-height: 1.45; }
.booking-fee-note strong { font-size: 0.95rem; }
.booking-fee-note a { color: inherit; font-weight: 700; }

/* Owner's "Booking fees" page */
.bal-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1rem; margin: 0.9rem 0; padding: 1.1rem 1.2rem; border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface); }
.bal-hero.owing { background: #fff4d6; border-color: #f0b429; }
.bal-hero.clear { background: #eef7dc; border-color: #c9e0a8; }
.bal-hero-main { display: flex; flex-direction: column; gap: 0.2rem; }
.bal-hero-main small { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.bal-hero-main b { font-size: 2.4rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bal-hero-main span { font-size: 0.84rem; color: var(--muted); line-height: 1.4; }
.bal-how { padding: 0.75rem 0.9rem; border-radius: 12px; background: rgba(255, 255, 255, 0.7); }
.bal-instructions { margin: 0.3rem 0 0; white-space: pre-line; font-size: 0.92rem; line-height: 1.45; }
.bal-how-note { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--muted); }
.bal-explain { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--page-bg); border: 1px solid var(--line); font-size: 0.86rem; line-height: 1.5; }
.bal-month { display: flex; align-items: center; justify-content: center; gap: 0.8rem; margin: 0.4rem 0 0.8rem; }
.bal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 1rem; }
.bal-card { padding: 0.8rem 0.9rem; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.25rem; }
.bal-card small { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.bal-card small em { display: block; font-style: normal; font-weight: 500; font-size: 0.72rem; }
.bal-card b { font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.bal-card.fee { background: #fff4d6; border-color: #f0d68a; }
.bal-table .num, .bal-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bal-details > summary { cursor: pointer; list-style: none; }
.bal-details > summary::-webkit-details-marker { display: none; }
.bal-details > summary h2 { margin: 0; display: inline; }
.bal-details[open] > summary { margin-bottom: 0.6rem; }
.bal-entries { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.bal-entries li { display: grid; grid-template-columns: 7rem 1fr auto; gap: 0.6rem; align-items: baseline; padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: 0.9rem; }
.bal-entries li:first-child { border-top: 0; }
.bal-entry-text small { display: inline-block; margin-left: 0.25rem; }
.bal-entry-amount { font-weight: 800; font-variant-numeric: tabular-nums; }
.bal-entry-amount.good { color: var(--accent-dark); }
.bal-foot { margin-top: 1rem; font-size: 0.8rem; }
@media (max-width: 720px) {
    .bal-hero { grid-template-columns: 1fr; }
    .bal-cards { grid-template-columns: 1fr; }
    .bal-entries li { grid-template-columns: 1fr auto; }
    .bal-entry-date { grid-column: 1 / -1; font-size: 0.78rem; color: var(--muted); }
}
.adm-venue-fee { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; margin: 0.5rem 0 0.2rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: #fff4d6; border: 1px solid #f0d68a; font-size: 0.85rem; }
.adm-venue-fee label { font-weight: 800; }
.adm-fee-input { display: inline-flex; align-items: center; gap: 0.25rem; }
.adm-fee-input input { width: 5.5rem; padding: 0.3rem 0.45rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.adm-fee-last { flex-basis: 100%; }

/* Booking terms (owner-written waiver) */
.checkout-agree { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.9rem 0; padding: 0.8rem 0.9rem; border: 1px solid var(--border, #e2e8f0); border-radius: 12px; background: var(--card-bg, #fff); }
.agree-row { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; font-size: 0.92rem; line-height: 1.4; }
.agree-row input[type="checkbox"] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; }
.agree-link { background: none; border: 0; padding: 0; font: inherit; color: var(--primary, #16a34a); font-weight: 600; text-decoration: underline; cursor: pointer; }
.terms-modal { max-width: 520px; width: calc(100% - 2rem); }
.terms-modal h2 { margin: 0; }
.terms-modal-venue { margin-bottom: 0.6rem; font-size: 0.9rem; }
.terms-modal-text { white-space: pre-wrap; max-height: 50vh; overflow-y: auto; padding: 0.75rem; border: 1px solid var(--border, #e2e8f0); border-radius: 10px; background: rgba(0,0,0,0.03); font-size: 0.9rem; line-height: 1.5; }
.terms-modal-actions { display: flex; justify-content: flex-end; gap: 0.6rem; margin-top: 0.9rem; }
.accepted-terms { max-height: 30vh; font-size: 0.85rem; }
.terms-box { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.92rem; line-height: 1.45; padding: 0.7rem; border-radius: 10px; border: 1px solid var(--border, #cbd5e1); resize: vertical; }
.terms-meta { text-align: right; font-size: 0.78rem; margin-top: 0.2rem; }
.terms-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }
.terms-saved { color: #15803d; font-weight: 600; font-size: 0.9rem; }
.terms-note { font-size: 0.82rem; margin: 0.7rem 0 0; }
.club-who-lead { margin: -0.4rem 0 0.9rem; }
.club-who-pick { margin-bottom: 0.9rem; }
.club-who-pick .club-who-card { text-align: left; font: inherit; cursor: pointer; }
.club-who-pick .club-who-card:hover { border-color: var(--accent-dark); }
.club-who-switch { margin: -0.3rem 0 1rem; font-size: 0.85rem; color: var(--muted); }
.club-who-switch button { background: none; border: 0; padding: 0; font: inherit; color: var(--accent-dark); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---- Checkout redesign: booking summary on the side, the steps on the left ---- */
.checkout-page { max-width: 1040px; }
.co-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (min-width: 880px) {
    .co-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 1.25rem; }
    .co-summary { order: 2; position: sticky; top: 1rem; }
    .co-main { order: 1; }
}
.co-summary { padding: 1.1rem 1.15rem !important; border-radius: 18px !important; }
.co-summary .checkout-head { margin-bottom: 0.8rem; }
.co-slots { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.co-slots li { display: flex; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 10px; background: var(--brand-tint); font-size: 0.88rem; }
.co-slot-court { font-weight: 700; }
.co-slot-time { color: var(--accent-dark); font-weight: 600; white-space: nowrap; }
.co-change { display: inline-block; margin-top: 0.7rem; font-size: 0.82rem; font-weight: 600; color: var(--accent-dark); text-decoration: none; }
.co-change:hover { text-decoration: underline; }

.co-main { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.co-step { padding: 1rem 1.1rem !important; border-radius: 18px !important; }
.checkout-page .co-h { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.75rem !important; font-size: 1.05rem !important; }
.co-h em { margin-left: auto; font-style: normal; font-size: 0.74rem; font-weight: 600; color: var(--muted); background: var(--page-bg); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.55rem; }
.co-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: 0.82rem; font-weight: 700; }
.co-lead { margin: 0 0 0.8rem; font-size: 0.9rem; color: var(--ink); }

.co-status { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.9rem 1rem; border-radius: 16px; background: #fef3c7; color: #78350f; }
.co-status.ok { background: #dcfce7; color: #14532d; }
.co-status-ic { font-size: 1.3rem; line-height: 1.2; }
.co-status strong { display: block; font-size: 0.98rem; }
.co-status span:not(.co-status-ic) { display: block; margin-top: 0.15rem; font-size: 0.85rem; opacity: 0.9; }

.co-extra { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0; border-top: 1px solid var(--line); }
.co-extra:first-of-type { border-top: 0; padding-top: 0; }
.co-extra-name { display: flex; flex-direction: column; font-size: 0.92rem; font-weight: 600; }
.co-extra-name small { font-weight: 500; color: var(--muted); font-size: 0.78rem; }
.co-extra-check { flex-direction: row; align-items: center; gap: 0.6rem; cursor: pointer; margin: 0; }
.co-extra-check span { display: flex; flex-direction: column; }
.co-extra-check input { width: 1.15rem; height: 1.15rem; }
.co-machine-hours { margin: 0.2rem 0 0; padding: 0.7rem 0.8rem; border-radius: 10px; background: var(--page-bg); }
.co-machine-hours p { margin: 0 0 0.4rem; }
.co-machine-hours label { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0; font-size: 0.88rem; font-weight: 500; }
.co-machine-note { margin: 0.3rem 0 0 !important; }

.co-pay-main { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: var(--page-bg); }
.co-pay-qr { width: 190px; max-width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: #fff; padding: 0.4rem; border: 1px solid var(--line); }
.co-pay-details { flex: 1 1 200px; margin: 0; white-space: pre-wrap; font-size: 0.92rem; line-height: 1.5; }
.co-pay .pay-options > p { margin: 0.9rem 0 0.2rem !important; }

.co-drop { position: relative; display: flex; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border: 2px dashed var(--line); border-radius: 14px; background: var(--page-bg); cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.co-drop:hover { border-color: var(--accent-dark); background: var(--brand-tint); }
.co-drop.has { border-style: solid; border-color: var(--accent-dark); background: var(--brand-tint); }
.co-drop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.co-drop-ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: #fff; border: 1px solid var(--line); font-size: 1.05rem; }
.co-drop.has .co-drop-ic { background: var(--accent-dark); color: #fff; border-color: var(--accent-dark); }
.co-drop-text { display: flex; flex-direction: column; min-width: 0; }
.co-drop-text strong { font-size: 0.92rem; overflow-wrap: anywhere; }
.co-drop-text small { color: var(--muted); font-size: 0.78rem; }
.co-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.8rem; margin-top: 0.8rem; }

.co-main .checkout-agree { margin: 0.8rem 0 0; }
.co-cta { display: flex; flex-direction: column; gap: 0.5rem; }
.co-cta-btn { min-height: 52px; font-size: 1.02rem; border-radius: 14px; }
.co-hint { margin: 0; text-align: center; font-size: 0.84rem; color: #92400e; }
.co-fine { margin: 0; text-align: center; font-size: 0.78rem; color: var(--muted); }

/* "Proof received" success panel */
.co-done { text-align: center; padding: 1.6rem 1.25rem 1.3rem; border-radius: 20px; background: linear-gradient(180deg, #ecfdf3 0%, #fff 70%); border: 1px solid #86d7a5; box-shadow: 0 8px 24px rgba(21, 128, 61, 0.1); }
.co-done-ic { width: 4.2rem; height: 4.2rem; margin: 0 auto 0.8rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #16a34a; color: #fff; font-size: 2.2rem; font-weight: 700; box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.15); }
.checkout-page .co-done h2 { margin: 0 0 0.6rem; font-size: 1.5rem; line-height: 1.25; color: #14532d; }
.co-done-lead { margin: 0 auto 0.9rem; max-width: 34rem; font-size: 1.02rem; line-height: 1.5; color: var(--ink); }
.co-done-code { display: inline-block; margin: 0 0 1.1rem; padding: 0.4rem 0.9rem; border-radius: 999px; background: #fff; border: 1px dashed #86d7a5; font-size: 0.9rem; color: var(--muted); }
.co-done-code strong { color: var(--ink); letter-spacing: 0.04em; margin-left: 0.3rem; }
.co-next { list-style: none; margin: 0 auto 1.2rem; padding: 0; max-width: 34rem; text-align: left; display: flex; flex-direction: column; gap: 0.7rem; }
.co-next li { display: flex; gap: 0.8rem; align-items: flex-start; padding: 0.75rem 0.9rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.co-next li.now { border-color: #f59e0b; background: #fffbeb; }
.co-next-n { flex: none; width: 1.8rem; height: 1.8rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #16a34a; color: #fff; font-weight: 700; font-size: 0.9rem; }
.co-next li.now .co-next-n { background: #f59e0b; }
.co-next b { display: block; font-size: 0.98rem; }
.co-next small { display: block; margin-top: 0.15rem; font-size: 0.86rem; line-height: 1.45; color: var(--muted); }
.co-next small b { display: inline; font-size: inherit; color: var(--ink); }
.co-done-actions { justify-content: center; margin-top: 0; }
.co-done-actions .btn { min-width: 12rem; min-height: 48px; font-size: 1rem; }
.co-done-fine { margin: 1rem 0 0; font-size: 0.84rem; color: var(--muted); }
.co-more { padding: 0.8rem 1rem !important; border-radius: 16px !important; }
.co-more summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--muted); }
.co-more[open] summary { margin-bottom: 0.8rem; }

/* My Courts: owners have only a few venues, so the cards are bigger and easier to tap */
.venue-grid.my-venues { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 460px)); gap: 1.5rem; }
.my-venues .venue-card-photo { height: 240px; }
.my-venues .venue-card-logo { top: 14px; left: 14px; width: 56px; height: 56px; }
.my-venues .venue-card-court-count { font-size: 0.9rem; padding: 0.35rem 0.8rem; bottom: 14px; right: 14px; }
.my-venues .venue-card-court-count svg { width: 1.05rem; height: 1.05rem; }
.my-venues .venue-card-status { font-size: 0.85rem; padding: 0.35rem 0.8rem; top: 14px; right: 14px; }
.my-venues .venue-card-body { padding: 1.2rem 1.4rem 1.3rem; }
.my-venues .venue-card-name { font-size: 1.45rem; margin-bottom: 0.25rem; }
.my-venues .venue-card-body .session-info { font-size: 0.98rem; margin-top: 0.6rem; }
.my-venues .venue-card-actions { padding: 1rem 1.4rem 1.2rem; gap: 0.7rem; }
.my-venues .venue-card-action-link { padding: 0.8rem 1rem; font-size: 1rem; border-radius: 12px; gap: 0.5rem; }
.my-venues .venue-card-action-link svg { width: 18px; height: 18px; }
.my-venues .venue-card-qr-btn { width: 48px; height: 48px; border-radius: 12px; }
.my-venues .venue-card-qr-btn svg { width: 22px; height: 22px; }
.vs-back { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 0 0 0.5rem; }
.map-suggest { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; } .map-suggest-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Save errors: big, centred and above the sticky Save bar so they cannot be missed or hidden behind it */
.save-toast.error-toast { bottom: 5.5rem; left: 0; right: 0; margin: 0 auto; width: min(92vw, 540px); max-width: none; font-size: 1rem; line-height: 1.4; padding: 0.9rem 1.1rem; align-items: flex-start; animation: none; }
.field-error-box { display: flex; gap: 0.6rem; align-items: flex-start; margin: 0.4rem 0 0.9rem; padding: 0.8rem 1rem; border-radius: 12px; border: 2px solid #dc2626; background: #fef2f2; color: #7f1d1d; font-size: 0.95rem; line-height: 1.45; }
.field-error-box strong { display: block; }

/* ---- Admin: Booking fees (compact dashboard) ---- */
.afd-head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }
.afd-head h1 { margin: 0; font-size: 1.5rem; }
.afd-head p { margin: 0.15rem 0 0; font-size: 0.85rem; max-width: 46rem; }
.afd-head-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.afd-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 0.8rem; }
.afd-kpi { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.65rem 0.8rem; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--line); min-width: 0; }
.afd-kpi small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.afd-kpi b { font-size: 1.25rem; font-variant-numeric: tabular-nums; line-height: 1.2; }
.afd-kpi em { font-style: normal; font-size: 0.72rem; color: var(--muted); }
.afd-kpi.main { background: var(--ink); border-color: var(--ink); }
.afd-kpi.main small, .afd-kpi.main em { color: rgba(255, 255, 255, 0.7); }
.afd-kpi.main b { color: #fff; }
.afd-kpi.bad { background: #fef2f2; border-color: #fca5a5; }
.afd-kpi.bad b { color: #b91c1c; }
.afd-kpi.good b { color: #15803d; }
.afd-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin-bottom: 0.8rem; }
.afd-card { padding: 0.8rem 0.9rem; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--line); min-width: 0; }
.afd-card h2 { margin: 0 0 0.55rem; font-size: 0.92rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.afd-note { margin: 0.45rem 0 0; font-size: 0.74rem; color: var(--muted); }
.afd-empty { margin: 0.4rem 0; font-size: 0.85rem; color: var(--muted); }
.afd-bar-row { display: grid; grid-template-columns: 5.2rem 1fr auto; align-items: center; gap: 0.5rem; margin: 0.35rem 0; font-size: 0.78rem; }
.afd-bar { height: 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.07); overflow: hidden; }
.afd-bar i { display: block; height: 100%; background: var(--accent-dark); border-radius: 6px; }
.afd-bar-row b { font-variant-numeric: tabular-nums; }
.afd-legend { margin-left: auto; font-size: 0.68rem; font-weight: 600; color: var(--muted); display: inline-flex; gap: 0.35rem; align-items: center; }
.afd-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.afd-legend i.fees, .afd-chart i.fees { background: #d4a72c; }
.afd-legend i.paid, .afd-chart i.paid { background: var(--accent-dark); }
.afd-chart { display: flex; align-items: flex-end; gap: 0.4rem; height: 96px; }
.afd-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.25rem; height: 100%; }
.afd-chart-bars { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.afd-chart-bars i { display: block; width: 38%; min-height: 2px; border-radius: 3px 3px 0 0; }
.afd-chart-col span { font-size: 0.68rem; color: var(--muted); }
.afd-list { list-style: none; margin: 0; padding: 0; }
.afd-list li { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; padding: 0.35rem 0; border-top: 1px solid var(--line); font-size: 0.82rem; }
.afd-list li:first-child { border-top: 0; }
.afd-list li span { display: flex; flex-direction: column; min-width: 0; }
.afd-list li small { color: var(--muted); font-size: 0.72rem; overflow-wrap: anywhere; }
.afd-list li strong { font-variant-numeric: tabular-nums; white-space: nowrap; }
.afd-list li strong.good { color: #15803d; }
.afd-auto { display: flex; align-items: center; gap: 0.6rem; }
.afd-auto-state { font-weight: 700; font-size: 0.9rem; }
.afd-auto-state.on { color: #15803d; }
.afd-auto-state.off { color: var(--muted); }
.afd-more { margin-top: 0.4rem; font-size: 0.78rem; }
.afd-more summary { cursor: pointer; color: var(--accent-dark); font-weight: 600; }
.afd-more p { margin: 0.35rem 0 0; color: var(--muted); line-height: 1.45; }

.afd-owners { padding: 0.8rem 0.9rem 0.6rem; }
.afd-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.5rem; }
.afd-toolbar h2 { margin: 0; }
.afd-count { font-size: 0.72rem; font-weight: 700; padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--page-bg); border: 1px solid var(--line); }
.afd-search { flex: 1 1 200px; max-width: 280px; padding: 0.4rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; font: inherit; font-size: 0.85rem; }
.afd-filters { display: inline-flex; gap: 0.3rem; margin-left: auto; }
.afd-pill { font: inherit; font-size: 0.8rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface, #fff); color: var(--ink); cursor: pointer; }
.afd-pill span { margin-left: 0.2rem; color: var(--muted); font-weight: 500; }
.afd-pill.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.afd-pill.on span { color: rgba(255, 255, 255, 0.75); }
.afd-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.afd-table th { text-align: left; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.afd-table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.afd-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.afd-table td small { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 400; }
.afd-row { cursor: pointer; }
.afd-row:hover, .afd-row.open { background: var(--brand-tint); }
.afd-owes { color: #b91c1c; }
.afd-chip { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.afd-chip.ok { background: #dcfce7; color: #166534; }
.afd-chip.credit { background: #dbeafe; color: #1e40af; }
.afd-chip.due { background: #fef3c7; color: #92400e; }
.afd-chip.overdue { background: #fee2e2; color: #991b1b; }
.afd-detail > td { background: var(--page-bg); padding: 0.7rem 0.8rem; }
.afd-panel-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.6rem; }
.afd-panel-sum { display: flex; gap: 1.1rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--muted); }
.afd-panel-sum b { color: var(--ink); margin-left: 0.2rem; }
.afd-panel-links { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.afd-tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--line); margin-bottom: 0.7rem; }
.afd-tabs button { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 0.4rem 0.8rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer; }
.afd-tabs button.on { color: var(--ink); border-bottom-color: var(--accent-dark); }
.afd-tabs button span { font-size: 0.7rem; margin-left: 0.2rem; padding: 0 0.4rem; border-radius: 999px; background: var(--surface, #fff); border: 1px solid var(--line); }
.afd-form { display: flex; flex-direction: column; gap: 0.5rem; max-width: 52rem; }
.afd-form label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.afd-form input { padding: 0.4rem 0.55rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 0.88rem; font-weight: 400; color: var(--ink); background: #fff; }
.afd-form-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.afd-form-row .wide { grid-column: span 2; }
.afd-form-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
@media (max-width: 960px) {
    .afd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .afd-kpi.main { grid-column: span 2; }
    .afd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .afd-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .afd-filters { margin-left: 0; }
}
@media (max-width: 560px) {
    .afd-grid { grid-template-columns: minmax(0, 1fr); }
    .afd-search { max-width: none; flex-basis: 100%; }
}

/* Owner-only banner on the public venue page, and its dashboard twin */
.owner-banner { display: flex; align-items: flex-start; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 0.9rem; padding: 0.9rem 1rem; border-radius: 16px; border: 2px solid #f59e0b; background: #fffbeb; color: #78350f; }
.owner-banner-ic { font-size: 1.5rem; line-height: 1.2; }
.owner-banner-body { flex: 1 1 260px; display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.owner-banner-body strong { font-size: 1.02rem; }
.owner-banner-body span { font-size: 0.85rem; opacity: 0.85; }
.owner-banner-body ul { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; }
.owner-banner-body a { color: #92400e; font-weight: 700; }
.owner-banner-go { align-self: center; }

/* ---- Venue setup: one readable column, checklist first, courts as cards ---- */
.vs-page { max-width: 920px; margin: 0 auto; }
.vs-wrap { display: flex; flex-direction: column; gap: 1rem; }
.vs-stack { display: flex; flex-direction: column; gap: 1rem; }
.vs-optional { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 0.8rem; padding: 0.55rem 0.9rem; border-radius: 12px; background: var(--surface, #fff); border: 1px solid var(--line); font-size: 0.88rem; }
.vs-optional-actions { display: flex; gap: 0.4rem; }
.vs-check { margin: 0 0 0.8rem; padding: 0.9rem 1rem; border-radius: 16px; background: #fffbeb; border: 1px solid #f5d98b; }
.vs-check.ready { background: #ecfdf3; border-color: #86d7a5; }
.vs-check-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.vs-check-head strong { font-size: 1.02rem; }
.vs-check-head .muted { font-size: 0.82rem; }
.vs-check-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.vs-step { width: 100%; display: flex; align-items: center; gap: 0.55rem; text-align: left; font: inherit; padding: 0.55rem 0.65rem; border-radius: 12px; border: 1px solid var(--line); background: #fff; cursor: pointer; }
.vs-step:hover { border-color: var(--accent-dark); }
.vs-step-mark { flex: none; width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 700; font-size: 0.85rem; background: #f59e0b; color: #fff; }
.vs-step.done .vs-step-mark { background: #16a34a; }
.vs-step-text { display: flex; flex-direction: column; min-width: 0; }
.vs-step-text b { font-size: 0.88rem; }
.vs-step-text small { font-size: 0.72rem; color: var(--muted); }
.vs-empty { margin: 0.4rem 0 0.8rem; padding: 0.8rem; border-radius: 12px; background: var(--page-bg); color: var(--muted); text-align: center; }
.vs-court-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.8rem; }
.vs-court { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.7rem; padding: 0.8rem 0.9rem; border-radius: 14px; border: 1px solid #f5d98b; background: #fffbeb; }
.vs-court.complete { border-color: var(--line); background: var(--surface, #fff); }
.vs-court-main { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.vs-court-name { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 1.02rem; }
.vs-court-meta { font-size: 0.8rem; }
.vs-court-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.vs-chip { font-size: 0.75rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px; }
.vs-chip.ok { background: #dcfce7; color: #166534; }
.vs-chip.warn { background: #fef3c7; color: #92400e; }
.vs-court-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.vs-add { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.vs-add summary { cursor: pointer; font-weight: 700; color: var(--accent-dark); margin-bottom: 0.6rem; }
@media (max-width: 760px) {
    .vs-check-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.vs-page [id$="-section"] { scroll-margin-top: 5rem; }

/* Venue setup tabs */
.vs-hidden { display: none !important; }
.vs-save-hint { font-size: 0.82rem; color: var(--muted); }

/* Default venue covers are wide illustrations - show more of them in the venue banner */
.vb-banner { height: 210px; }
.vb-banner > img { object-position: 50% 45%; }
@media (max-width: 760px) { .vb-banner { height: 130px; } }
.vs-tabs { display: flex; gap: 0.35rem; overflow-x: auto; margin: 0 0 1rem; padding: 0.35rem; border-radius: 14px; background: #efebe1; border: 1px solid var(--line); }
.vs-tabs button { flex: none; font: inherit; font-size: 0.95rem; font-weight: 700; padding: 0.6rem 1.1rem; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.vs-tabs button:hover { background: rgba(255, 255, 255, 0.7); color: var(--ink); }
.vs-tabs button.on { background: var(--accent-dark); color: #fff; box-shadow: 0 2px 6px rgba(32, 29, 24, 0.2); }
.help-modal-pairs { margin: 0 0 0.5rem; padding-left: 1.2rem; columns: 2; font-variant-numeric: tabular-nums; } .help-modal-pairs li { margin: 0.1rem 0; }

/* Admin: unconfirmed sign-ups */
.asu-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.asu-type { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
.asu-type.club { background: #e0f2fe; color: #075985; }
.asu-type.player { background: #ede9fe; color: #5b21b6; }
.asu-copy { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 0.9rem; padding: 0 0.25rem; }
.asu-copy:hover { color: var(--accent-dark); }
@media (max-width: 760px) { .asu-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* "Check your spam or junk folder" callout shown after sign-up */
.spam-callout { display: flex; gap: 0.7rem; align-items: flex-start; text-align: left; margin: 0.9rem 0; padding: 0.85rem 1rem; border-radius: 14px; border: 2px solid #f59e0b; background: #fffbeb; color: #78350f; font-size: 0.95rem; line-height: 1.45; }
.spam-callout-ic { font-size: 1.5rem; line-height: 1.1; }
.spam-callout strong { display: block; font-size: 1rem; margin-bottom: 0.15rem; }

/* Open Play: "waiting for the first round to fill" card laid over the courts */
.court-zone { position: relative; }
.court-zone.held { min-height: 24rem; }
.court-zone.held .court-grid { filter: blur(3px); opacity: 0.5; pointer-events: none; user-select: none; }
.hold-overlay { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-start; justify-content: center; padding: 1rem; border-radius: 18px; background: rgba(250, 247, 240, 0.6); }
.hold-card { position: sticky; top: 5rem; width: min(100%, 26rem); text-align: center; padding: 1.4rem 1.3rem 1.2rem; border-radius: 20px; background: var(--surface, #fff); border: 1px solid var(--line); box-shadow: 0 18px 44px rgba(32, 29, 24, 0.22); }
.hold-ic { width: 3.2rem; height: 3.2rem; margin: 0 auto 0.6rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--brand-tint); font-size: 1.5rem; }
.hold-card h3 { margin: 0 0 0.8rem; font-size: 1.2rem; line-height: 1.25; }
.hold-progress { height: 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); overflow: hidden; }
.hold-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-dark), #a5c639); transition: width 0.4s ease; }
.hold-count { margin: 0.6rem 0 0.2rem; font-size: 1.05rem; }
.hold-why { margin: 0 0 1rem; font-size: 0.88rem; line-height: 1.45; color: var(--muted); }
.hold-start { width: 100%; min-height: 3.1rem; font-size: 1.05rem; border-radius: 14px; }
.hold-need { margin: 0.6rem 0 0; font-size: 0.82rem; color: #92400e; }
.hold-link { display: inline-block; margin-top: 0.8rem; padding: 0.4rem 0.6rem; border: 0; background: none; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--accent-dark); text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) {
    .hold-overlay { padding: 0.6rem; }
    .hold-card { top: 4rem; padding: 1.1rem 1rem 1rem; }
    .hold-start { min-height: 3.4rem; }
}

/* Open Play: leaving the queue, and the "Left the session" card */
.queue-remove-choice { flex: 1 0 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; padding: 0.55rem 0.7rem; border-radius: 12px; background: var(--page-bg); border: 1px solid var(--line); font-size: 0.85rem; }
.queue-remove-choice > span { flex: 1 0 100%; }
.queue-remove-cancel { border: 0; background: none; font: inherit; font-size: 0.82rem; color: var(--muted); text-decoration: underline; cursor: pointer; padding: 0.3rem 0.4rem; }
.left-card { margin-top: 1rem; padding: 0.8rem 0.9rem !important; border-radius: 14px !important; }
.left-note { margin: 0.2rem 0 0.6rem; font-size: 0.8rem; }
.left-row { align-items: center; }
.st-left { margin-left: 0.4rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 0.68rem; font-weight: 700; white-space: nowrap; }
.queue-row.qr-wrap { flex-wrap: wrap; }
.left-card.empty { padding: 0.65rem 0.9rem !important; }
.left-card.empty .left-note { margin: 0.1rem 0 0; }

/* "Left the session" is its own card under the queue, floating with it */
.sb-rail > .left-card { margin-top: 0; padding: 0.9rem !important; border-radius: 20px !important; flex: none; }
.sb-rail .left-card .panel-title h3 { font-size: 0.95rem; }
.sb-rail .left-card .queue-list { gap: 0.45rem; }
.sb-rail .left-card .queue-row { gap: 0.65rem; padding: 0.55rem 0.7rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.sb-rail .left-card .queue-name { font-size: 0.88rem; font-weight: 600; }
.sb-rail .left-card .queue-meta { font-size: 0.72rem; color: var(--muted); }
.sb-rail .left-card .btn-sm { border-radius: 999px; font-weight: 700; font-size: 0.74rem; padding: 0.3rem 0.7rem; }
.sb-rail .left-card .btn-primary { background: var(--ink); color: #faf6ee; border-color: var(--ink); }
.sb-rail .left-card .muted { font-size: 0.78rem; }

/* Each card in the floating column scrolls on its own: the queue takes the space, "Left the session" stays visible underneath */
@media (min-width: 1021px) {
    .sb-rail > .queue-card { flex: 0 1 auto; min-height: 12rem; overflow: auto; }
    .sb-rail > .left-card { flex: 0 0 auto; max-height: 13rem; overflow: auto; }
}

/* Compact "Left the session" card so the queue keeps its room */
.sb-rail > .left-card { padding: 0.6rem 0.8rem !important; border-radius: 16px !important; }
.sb-rail .left-card .panel-title { margin-bottom: 0.25rem; }
.sb-rail .left-card .panel-title h3 { font-size: 0.88rem; }
.sb-rail .left-card .left-note { margin: 0; font-size: 0.74rem; }
.sb-rail .left-card .queue-list { gap: 0.3rem; }
.sb-rail .left-card .queue-row { padding: 0.35rem 0.6rem; gap: 0.5rem; border-radius: 12px; }
.sb-rail .left-card .queue-name { font-size: 0.82rem; }
.sb-rail .left-card .queue-meta { font-size: 0.68rem; }
@media (min-width: 1021px) {
    .sb-rail > .queue-card { max-height: max(20rem, calc(100vh - 7rem)); }
    .sb-rail > .left-card { max-height: 9.5rem; }
}

/* Queue: dense one-line rows so many players are visible without scrolling */
@media (min-width: 1021px) {
    .sb-rail .queue-card .queue-list { gap: 0.2rem; }
    .sb-rail .queue-card .queue-row.qr-wrap { padding: 0.12rem 0.45rem; gap: 0.4rem; border-radius: 9px; align-items: center; }
    .sb-rail .queue-card .queue-row.qr-wrap .queue-position { width: 20px; height: 20px; min-width: 20px; font-size: 0.68rem; }
    .sb-rail .queue-card .queue-row.qr-wrap .queue-info { display: flex; flex-direction: row; align-items: baseline; gap: 0.1rem 0.5rem; flex-wrap: wrap; flex: 1 1 0; min-width: 0; }
    .sb-rail .queue-card .queue-row.qr-wrap .queue-name { font-size: 0.84rem; }
    .sb-rail .queue-card .queue-row.qr-wrap .queue-meta { font-size: 0.66rem; white-space: normal; overflow-wrap: anywhere; }
    .sb-rail .queue-card .queue-row.qr-wrap .btn-sm { padding: 0.12rem 0.5rem; font-size: 0.68rem; }
    .sb-rail .queue-card .sb-tabs { margin-bottom: 0.45rem; }
    .sb-rail .queue-card .sb-side-tools { margin-bottom: 0.4rem; }
}

/* ---- Contact page ---- */
.ct-page { max-width: 1060px; margin: 0 auto; padding: 0 0.5rem 2rem; }
.ct-hero { position: relative; overflow: hidden; margin: 0 0 1.2rem; padding: 2rem 1.6rem 1.8rem; border-radius: 24px; color: #faf6ee; background: radial-gradient(420px 220px at 90% 0%, rgba(165, 198, 57, 0.45), transparent 65%), radial-gradient(320px 200px at 0% 100%, rgba(93, 139, 55, 0.55), transparent 70%), var(--ink); }
.ct-hero h1 { margin: 0 0 0.4rem; font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.15; color: #fff; }
.ct-hero p { margin: 0; max-width: 34rem; font-size: 1.02rem; line-height: 1.5; color: rgba(250, 246, 238, 0.85); }
.ct-hero-ball { position: absolute; right: 1.6rem; top: 1.2rem; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff59a, #f5d730 60%, #d9b300); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); opacity: 0.95; }
.ct-hero-ball::after { content: ""; position: absolute; right: -52px; bottom: -34px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff59a, #f5d730 60%, #d9b300); opacity: 0.8; }

.ct-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr); gap: 1.1rem; align-items: start; }
.ct-side { display: flex; flex-direction: column; gap: 0.9rem; }
.ct-card { padding: 1rem 1.1rem; border-radius: 18px; background: var(--surface, #fff); border: 1px solid var(--line); }
.ct-card h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.ct-mail { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ct-ic { width: 2.6rem; height: 2.6rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--brand-tint); color: var(--accent-dark); }
.ct-ic svg { width: 1.3rem; height: 1.3rem; }
.ct-mail small { display: block; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.ct-mail a { font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.ct-mail a:hover { color: var(--accent-dark); text-decoration: underline; }
.ct-copy { margin-left: auto; padding: 0.35rem 0.8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--page-bg); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.ct-copy:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
.ct-faq { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.ct-faq li > b { display: block; font-size: 0.92rem; margin-bottom: 0.15rem; }
.ct-faq li span { display: block; font-size: 0.84rem; line-height: 1.45; color: var(--muted); }
.ct-link { font-weight: 700; font-size: 0.9rem; color: var(--accent-dark); text-decoration: none; }
.ct-link:hover { text-decoration: underline; }
.ct-owners { background: linear-gradient(135deg, var(--brand-tint), #fff); }
.ct-owners p { margin: 0 0 0.6rem; font-size: 0.88rem; line-height: 1.45; color: var(--muted); }

.ct-form-card { padding: 1.3rem 1.3rem 1.2rem; border-radius: 22px; background: var(--surface, #fff); border: 1px solid var(--line); box-shadow: 0 12px 34px rgba(32, 29, 24, 0.08); }
.ct-form-card h2 { margin: 0 0 0.9rem; font-size: 1.3rem; }
.ct-label { display: block; margin-bottom: 0.4rem; font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.ct-topics { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.ct-topics .ct-label { flex: 1 0 100%; margin-bottom: 0.1rem; }
.ct-chip { padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--line); background: var(--page-bg); font: inherit; font-size: 0.84rem; font-weight: 600; color: var(--ink); cursor: pointer; }
.ct-chip:hover { border-color: var(--accent-dark); }
.ct-chip.on { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; box-shadow: 0 2px 8px rgba(93, 139, 55, 0.35); }
.ct-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.ct-human { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; margin: 0.2rem 0 1rem; padding: 0.6rem 0.8rem; border-radius: 12px; background: var(--page-bg); font-size: 0.88rem; }
.ct-human input { width: 5.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.ct-send { min-height: 3rem; font-size: 1.02rem; border-radius: 14px; }
.ct-fine { margin: 0.6rem 0 0; text-align: center; font-size: 0.78rem; color: var(--muted); }

.ct-done { text-align: center; padding: 1.5rem 0.5rem; }
.ct-done-ic { width: 4rem; height: 4rem; margin: 0 auto 0.8rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #16a34a; color: #fff; font-size: 2rem; font-weight: 700; box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.15); }
.ct-done h2 { margin: 0 0 0.5rem; }
.ct-done p { margin: 0 auto 0.6rem; max-width: 28rem; line-height: 1.5; }
.ct-done-tip { font-size: 0.86rem; color: var(--muted); }
.ct-done-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

@media (max-width: 860px) {
    .ct-grid { grid-template-columns: minmax(0, 1fr); }
    .ct-form-card { order: -1; }
    .ct-hero { padding: 1.5rem 1.2rem 1.4rem; border-radius: 20px; }
    .ct-hero-ball { width: 34px; height: 34px; right: 1rem; top: auto; bottom: 1rem; }
    .ct-hero-ball::after { display: none; }
    .ct-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Closed court (Open Play): kept for its results, takes no more matches */
.court-card.status-closed { opacity: 0.8; border-top-color: var(--line); }
.session-board .court-card.status-closed::before { background: var(--line); }
.session-board .court-card.status-closed .court-title .badge-closed { background: #ececea; color: var(--muted); }
.lv-court.closed { opacity: 0.75; }
.lv-court.closed::before { background: var(--line); }
.lv-chip.closed { background: #ececea; color: var(--muted); }

/* ---- Bookings tabs + Sales page ---- */

.sl-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; }
.sl-venue { padding: 0.35rem 0.6rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface, #fff); font: inherit; font-size: 0.86rem; }
.sl-hero { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.8rem; margin: 0 0 0.8rem; padding: 1.1rem 1.3rem; border-radius: 20px; color: #faf6ee; background: radial-gradient(360px 200px at 95% 0%, rgba(165, 198, 57, 0.4), transparent 65%), var(--ink); }
.sl-hero small { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(250, 246, 238, 0.7); }
.sl-hero b { display: block; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.1; color: #fff; }
.sl-sub { display: block; margin-top: 0.2rem; font-size: 0.82rem; color: rgba(250, 246, 238, 0.75); }
.sl-change { padding: 0.4rem 0.8rem; border-radius: 999px; font-weight: 800; font-size: 0.95rem; background: rgba(255, 255, 255, 0.12); white-space: nowrap; }
.sl-change small { display: inline; margin-left: 0.25rem; font-size: 0.72rem; text-transform: none; letter-spacing: 0; font-weight: 600; }
.sl-change.up { color: #b7e36b; }
.sl-change.down { color: #fda4af; }
.sl-change.new { color: #fde68a; }

.sl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; margin: 0 0 0.8rem; }
.sl-kpi { padding: 0.7rem 0.85rem; border-radius: 14px; background: var(--surface, #fff); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.1rem; }
.sl-kpi small { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.sl-kpi b { font-size: 1.25rem; line-height: 1.2; }
.sl-kpi em { font-style: normal; font-size: 0.75rem; color: var(--muted); }
.sl-kpi em.warn { color: #b45309; font-weight: 700; }
.sl-kpi em a { color: var(--accent-dark); font-weight: 700; text-decoration: none; }
.sl-kpi.fee b { color: #92600a; }
.sl-kpi.refund b { color: #be123c; }

.sl-card { padding: 0.9rem 1rem; margin: 0 0 0.8rem; }
.sl-card-h { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.6rem; }
.sl-card-h h2, .sl-details summary h2 { margin: 0; font-size: 1.02rem; }
.sl-card-h .muted { font-size: 0.8rem; }
.sl-chart { display: block; width: 100%; height: 150px; }
.sl-axis { stroke: var(--line); stroke-width: 1; }
.sl-bar { fill: var(--accent-dark); opacity: 0.9; }
.sl-bar:hover { opacity: 1; fill: var(--accent); }
.sl-bar.zero { fill: var(--line); }
.sl-bar.today { fill: var(--ink); }
.sl-xaxis { display: flex; justify-content: space-between; margin-top: 0.2rem; font-size: 0.72rem; color: var(--muted); }
.sl-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.8rem; }
.sl-two .sl-card { margin: 0; }
.sl-progress { height: 14px; border-radius: 999px; background: #efebe1; overflow: hidden; }
.sl-progress i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-dark), var(--accent)); }
.sl-note { margin: 0.55rem 0 0; font-size: 0.8rem; line-height: 1.45; }
.sl-courts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.sl-courts li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.sl-cn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-cbar { height: 10px; border-radius: 999px; background: #efebe1; overflow: hidden; }
.sl-cbar i { display: block; height: 100%; border-radius: 999px; background: var(--accent-dark); }
.sl-details { margin-top: 0.8rem; }
.sl-details summary { cursor: pointer; list-style: none; }
.sl-details summary::-webkit-details-marker { display: none; }
.sl-details summary h2::before { content: "▸ "; color: var(--muted); }
.sl-details[open] summary h2::before { content: "▾ "; }
.sl-empty { display: flex; flex-direction: column; gap: 0.2rem; padding: 1.2rem 1rem; text-align: center; }

@media (max-width: 760px) {
    .sl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sl-two { grid-template-columns: minmax(0, 1fr); }
    .sl-courts li { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) auto; }
}

/* ---- Bookings menu in the main nav: Schedule / Sales / Booking fees ---- */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.75rem; border: none; border-radius: 10px; background: none; font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.nav-drop-btn:hover, .nav-drop-btn.active { background: var(--brand-tint); color: var(--accent-dark); }
.nav-caret { font-size: 0.7em; opacity: 0.7; }
.nav-drop-backdrop { position: fixed; inset: 0; z-index: 19; }
.nav-drop-menu { position: absolute; left: 0; top: calc(100% + 6px); min-width: 13rem; z-index: 20; padding: 0.35rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16); animation: pm-in 0.12s ease-out; }
.member-nav .nav-drop-menu a { display: flex; align-items: center; gap: 0.6rem; width: 100%; padding: 0.55rem 0.7rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; color: var(--ink); text-decoration: none; }
.member-nav .nav-drop-menu a:hover, .member-nav .nav-drop-menu a.on { background: var(--brand-tint); color: var(--accent-dark); }
.nav-drop-menu .badge-count { margin-left: auto; }

@media (max-width: 720px) {
    .nav-drop { flex: 1 1 0; min-width: 0; }
    .nav-drop-btn { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 0.12rem; padding: 0.3rem 0.15rem; border-radius: 8px; font-size: 0.66rem; }
    .nav-drop-backdrop { z-index: 14; background: rgba(24, 28, 26, 0.25); }
    /* Opens above the bottom tab bar as a full-width sheet with large tap targets */
    .nav-drop-menu { position: fixed; left: 0.75rem; right: 0.75rem; top: auto; bottom: calc(4.4rem + env(safe-area-inset-bottom)); z-index: 16; min-width: 0; padding: 0.4rem; border-radius: 16px; }
    .member-nav .nav-drop-menu a { padding: 0.85rem 0.9rem; font-size: 1rem; border-radius: 12px; flex-direction: row; gap: 0.75rem; }
}
.nav-drop-btn .nav-label { white-space: nowrap; }
.member-nav .nav-drop-menu a { justify-content: flex-start; text-align: left; }
@media (max-width: 720px) {
    .nav-caret { font-size: 0.6rem; margin-left: 0.05rem; }
}

/* ---- Admin: own header/menu (AdminLayout) ---- */
.admin-header .brand-block { display: flex; align-items: center; gap: 0.5rem; }
.admin-badge { padding: 0.1rem 0.5rem; border-radius: 999px; background: #1b2108; color: #ccff00; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; }
.admin-avatar { background: linear-gradient(135deg, #1b2108, #4d6a1f) !important; color: #ccff00 !important; }
.admin-nav .nav-ic { font-size: 1.05rem; }
.adm-mob { display: none !important; }
@media (max-width: 720px) {
    .adm-desk { display: none !important; }
    .adm-mob { display: flex !important; }
}

/* ---- Admin dashboard: colourful, compact ---- */
.adm-top { gap: 0.6rem 1rem; padding: 0.75rem 1rem; border-radius: 18px; color: #faf6ee; background: radial-gradient(420px 160px at 100% 0%, rgba(165, 198, 57, 0.42), transparent 70%), radial-gradient(300px 140px at 0% 100%, rgba(56, 189, 248, 0.2), transparent 70%), var(--ink); }
.adm-title { display: flex; flex-direction: column; line-height: 1.15; }
.adm-top h1 { color: #fff; font-size: 1.35rem; }
.adm-sub-title { font-size: 0.78rem; color: rgba(250, 246, 238, 0.7); }
.adm-top .adm-n-email { background: var(--accent); color: #1b2108; border-color: transparent; font-weight: 800; border-radius: 999px; }
.adm-top .adm-n-email:hover { background: #c3e05a; color: #1b2108; }
.adm-notice { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; margin: 0; }
.adm-notice-x { border: none; background: none; font-size: 1.2rem; line-height: 1; color: inherit; cursor: pointer; }

.adm-kpi { --tone: #a5c639; --tone-bg: #f3f9df; --tone-line: #dfe9b8; position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.65rem; align-items: center; padding: 0.55rem 0.75rem; border-radius: 14px; background: linear-gradient(135deg, var(--tone-bg), var(--surface, #fff) 75%); border: 1px solid var(--tone-line); }
.adm-kpi:not(.static):hover { border-color: var(--tone); transform: translateY(-1px); }
.adm-kpi-ic { grid-row: 1 / span 3; width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font-style: normal; font-size: 1.2rem; background: var(--tone); box-shadow: 0 4px 10px color-mix(in srgb, var(--tone) 45%, transparent); }
.adm-kpi span:not(.adm-idle), .adm-kpi strong, .adm-kpi small { grid-column: 2; }
.adm-kpi.k-clubs { --tone: #a5c639; --tone-bg: #f3f9df; --tone-line: #dfe9b8; }
.adm-kpi.k-paid { --tone: #fbbf24; --tone-bg: #fff6dc; --tone-line: #f4dd9c; }
.adm-kpi.k-cust { --tone: #38bdf8; --tone-bg: #e6f6fe; --tone-line: #bfe6f8; }
.adm-kpi.k-venues { --tone: #a78bfa; --tone-bg: #f0ebfe; --tone-line: #d9cffb; }
.adm-kpi.k-live { --tone: #fb7185; --tone-bg: #ffecef; --tone-line: #fbc6cd; }
.adm-kpi.k-guest { --tone: #2dd4bf; --tone-bg: #e3faf6; --tone-line: #b6ebe3; }
.adm-kpi.live { background: linear-gradient(135deg, var(--tone-bg), var(--surface, #fff) 75%); border-color: var(--tone); }
.adm-kpi.live .adm-kpi-ic { animation: dash-pulse 2.2s ease-in-out infinite; }
.adm-clubs { border-top: 3px solid var(--accent); }
.adm-side .adm-card:nth-child(1) { border-top: 3px solid #fbbf24; }
.adm-side .adm-card:nth-child(2) { border-top: 3px solid #a78bfa; }
.adm-side .adm-card:nth-child(3) { border-top: 3px solid #38bdf8; }
.adm-menu a.adm-menu-link { display: block; font: inherit; font-size: 0.85rem; text-align: left; padding: 0.4rem 0.6rem; border-radius: 6px; color: var(--ink); text-decoration: none; font-weight: 700; }
.adm-menu a.adm-menu-link:hover { background: var(--page-bg); color: var(--accent-dark); }

/* ---- Admin: Email page ---- */
.em-page { display: flex; flex-direction: column; gap: 0.8rem; max-width: 1100px; margin: 0 auto; }
.em-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; padding: 0.9rem 1.1rem; border-radius: 18px; color: #faf6ee; background: radial-gradient(380px 150px at 100% 0%, rgba(165, 198, 57, 0.42), transparent 70%), var(--ink); }
.em-head h1 { margin: 0 0 0.15rem; font-size: 1.35rem; color: #fff; }
.em-head p { margin: 0; font-size: 0.84rem; color: rgba(250, 246, 238, 0.78); max-width: 40rem; }
.em-head .btn { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.25); }
.em-grid { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.em-side, .em-main { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.em-card { padding: 0.85rem 0.95rem; border-radius: 16px; background: var(--surface, #fff); border: 1px solid var(--line); }
.em-card h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 1rem; }
.em-step { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--accent); color: #1b2108; font-size: 0.78rem; font-weight: 800; }
.em-input { width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 0.9rem; background: #fff; }
.em-input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); border-color: var(--accent-dark); }
.em-body { resize: vertical; line-height: 1.5; min-height: 14rem; }
.em-label { display: block; margin: 0.7rem 0 0.25rem; font-size: 0.8rem; font-weight: 700; color: var(--muted); }
.em-label:first-of-type { margin-top: 0; }
.em-note { margin: 0.5rem 0 0; font-size: 0.82rem; }
.em-or { display: flex; align-items: center; gap: 0.5rem; margin: 0.7rem 0 0.5rem; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.em-or::before, .em-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.em-manual { display: flex; gap: 0.4rem; }
.em-results { list-style: none; margin: 0.4rem 0 0; padding: 0.2rem; border: 1px solid var(--line); border-radius: 12px; max-height: 17rem; overflow-y: auto; }
.em-results button { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.4rem 0.5rem; border: none; border-radius: 9px; background: none; font: inherit; text-align: left; cursor: pointer; }
.em-results button:hover { background: var(--brand-tint); }
.em-r-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.em-r-text strong, .em-who-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.em-r-text small, .em-who-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.76rem; color: var(--muted); }
.em-avatar { flex: none; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 800; background: #64748b; }
.em-avatar.sm { width: 1.9rem; height: 1.9rem; font-size: 0.82rem; }
.em-avatar.club { background: linear-gradient(135deg, #a5c639, #5d8b37); }
.em-avatar.player { background: linear-gradient(135deg, #38bdf8, #2563eb); }
.em-avatar.other { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.em-who { display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.6rem; border-radius: 14px; background: var(--page-bg); }
.em-who-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.em-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.15rem; }
.em-tag { display: inline-block; padding: 0 0.45rem; border-radius: 999px; font-size: 0.68rem; font-weight: 800; background: #e2e8f0; color: #475569; }
.em-tag.club { background: #e7f3c9; color: #3f6212; }
.em-tag.player { background: #dbeafe; color: #1d4ed8; }
.em-tag.other, .em-tag.mine { background: #ede9fe; color: #6d28d9; }
.em-tag.ok { background: #dcfce7; color: #166534; }
.em-tag.warn { background: #fef3c7; color: #92400e; }
.em-tag.edited { background: #ffedd5; color: #9a3412; }
.em-x { border: none; background: none; font-size: 1rem; color: var(--muted); cursor: pointer; border-radius: 50%; width: 1.8rem; height: 1.8rem; }
.em-x:hover { background: rgba(0, 0, 0, 0.08); color: var(--ink); }
.em-templates { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.em-templates button { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 11px; background: #fff; font: inherit; font-size: 0.86rem; font-weight: 600; text-align: left; cursor: pointer; }
.em-templates button:hover { border-color: var(--accent-dark); }
.em-templates button.on { background: var(--brand-tint); border-color: var(--accent-dark); color: var(--accent-dark); box-shadow: inset 3px 0 0 var(--accent-dark); }
.em-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.55rem; font-size: 0.78rem; }
.em-chip { padding: 0.15rem 0.55rem; border: 1px dashed var(--accent-dark); border-radius: 999px; background: #f6f9ea; font: inherit; font-size: 0.76rem; font-weight: 700; color: var(--accent-dark); cursor: pointer; }
.em-chip:hover { background: var(--brand-tint); }
.em-tpl-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px dashed var(--line); }
.em-mail { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #f4f5f7; max-width: 560px; }
.em-mail-top { padding: 0.55rem 1rem; background: #181a15; }
.em-brand { font-size: 1rem; font-weight: 800; color: #fff; }
.em-brand b { color: #ccff00; }
.em-mail-body { margin: 0.8rem; padding: 1rem 1.1rem; border-radius: 10px; background: #fff; }
.em-mail-subject { margin-bottom: 0.7rem; font-size: 1.02rem; font-weight: 800; color: #1a1f29; }
.em-mail-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9rem; line-height: 1.55; color: #1a1f29; }
.em-problems { margin: 0.7rem 0 0; padding: 0.55rem 0.8rem 0.55rem 1.6rem; border-radius: 10px; background: #fff4d6; border: 1px solid #f0d68a; color: #5b4000; font-size: 0.84rem; }
.em-send-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.8rem; }
.em-send-to { font-size: 0.84rem; overflow-wrap: anywhere; }
.em-send { min-width: 9rem; min-height: 2.6rem; border-radius: 12px; font-size: 0.98rem; }
.em-log ul { list-style: none; margin: 0; padding: 0; }
.em-log li { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; border-top: 1px solid var(--line); }
.em-log li:first-child { border-top: none; }
.em-dot { flex: none; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: #94a3b8; }
.em-dot.ok { background: #22c55e; }
.em-dot.bad { background: #e11d48; }
.em-log-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.em-log-text strong { font-size: 0.88rem; }
.em-log-text small { font-size: 0.76rem; color: var(--muted); overflow-wrap: anywhere; }
.em-log-text small.em-err { color: #be123c; font-weight: 700; }
.em-log-when { font-size: 0.78rem; white-space: nowrap; }
@media (max-width: 860px) {
    .em-grid { grid-template-columns: minmax(0, 1fr); }
    .em-send-row { flex-direction: column; align-items: stretch; }
    .em-send { width: 100%; }
}
@media (max-width: 720px) {
    .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .adm-kpi-ic { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
}

/* ---- Tournaments page: "new and growing", champions, how it works, host CTA ---- */
.tn-new { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0 0; padding: 1rem 1.2rem; border-radius: 20px; background: linear-gradient(135deg, #f3f9df, #fffdf8 70%); border: 1px solid #dfe9b8; box-shadow: 0 1px 2px rgba(24,28,26,.05), 0 12px 32px -18px rgba(24,28,26,.22); }
.tn-new-ic { flex: none; width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 16px; background: rgba(165, 198, 57, 0.35); font-size: 1.5rem; }
.tn-new-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
.tn-new-text b { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.15rem; }
.tn-new-text span { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.tn-new .tn-btn { flex: none; }

.tn-champs { margin-top: 2.2rem; }
.tn-champs h2, .tn-steps h2, .tn-cta-band h2 { font-family: 'Fraunces', serif; font-weight: 800; font-size: 1.5rem; margin: 0 0 0.7rem; }
.tn-champ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0.8rem; }
.tn-champ { display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; border-radius: 18px; background: linear-gradient(135deg, #fff6dc, #fffdf8 70%); border: 1px solid #f4dd9c; text-decoration: none; color: var(--ink); transition: transform 0.15s, box-shadow 0.15s; }
.tn-champ:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(180, 120, 10, 0.5); }
.tn-champ-medal { flex: none; font-size: 1.9rem; }
.tn-champ-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.tn-champ-text b { overflow-wrap: anywhere; }
.tn-champ-text small { color: var(--muted); font-size: 0.78rem; }

.tn-steps { display: flex; align-items: center; justify-content: space-between; gap: 1.2rem; flex-wrap: wrap; margin-top: 2.4rem; padding: 1.2rem 1.3rem; border-radius: 22px; background: var(--ink); color: #faf6ee; }
.tn-steps h2 { color: #fff; }
.tn-steps ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; flex-wrap: wrap; }
.tn-steps li { display: flex; align-items: flex-start; gap: 0.6rem; max-width: 15rem; }
.tn-steps li > span { flex: none; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--ink); font-weight: 800; }
.tn-steps li b { display: block; }
.tn-steps li small { display: block; color: rgba(250, 246, 238, 0.7); font-size: 0.82rem; line-height: 1.35; }
.tn-steps .tn-btn-ink { background: var(--accent); color: var(--ink); }
.tn-steps .tn-btn-ink:hover { background: #b3d447; }

.tn-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem; padding: 1.2rem 1.3rem; border-radius: 22px; background: radial-gradient(360px 200px at 100% 0%, rgba(165, 198, 57, 0.4), transparent 70%), #f3f9df; border: 1px solid #dfe9b8; }
.tn-cta-band h2 { margin-bottom: 0.2rem; }
.tn-cta-band p { margin: 0; color: var(--muted); max-width: 38rem; }
.tn-cta-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.tn-btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.tn-btn-ghost:hover { background: rgba(24, 28, 26, 0.07); }

@media (max-width: 700px) {
    .tn-new { flex-direction: column; align-items: flex-start; }
    .tn-new .tn-btn, .tn-steps .tn-btn, .tn-cta-actions, .tn-cta-actions .tn-btn { width: 100%; justify-content: center; }
    .tn-steps ol { flex-direction: column; gap: 0.8rem; }
    .tn-steps li { max-width: none; }
}

/* ---- Admin Email: confirmation next to Send + pop-up ---- */
.em-result { margin-top: 0.7rem; padding: 0.6rem 0.85rem; border-radius: 12px; font-weight: 700; font-size: 0.92rem; overflow-wrap: anywhere; }
.em-result.ok { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
.em-result.bad { background: #ffe4e6; color: #9f1239; border: 1px solid #fda4af; }
.em-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 60; max-width: min(92vw, 34rem); display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.15rem; border-radius: 16px; color: #fff; font-weight: 700; font-size: 0.95rem; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); animation: em-toast-in 0.25s ease-out; overflow-wrap: anywhere; }
.em-toast.ok { background: #15803d; }
.em-toast.bad { background: #be123c; }
@keyframes em-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 720px) { .em-toast { bottom: 5.2rem; } }
@media (prefers-reduced-motion: reduce) { .em-toast { animation: none; } }

/* ---- Host requests: price and payment ---- */
.hr-price { margin-top: 0.8rem; padding: 0.7rem 0.85rem; border-radius: 12px; background: #f3f9df; border: 1px solid #dfe9b8; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.86rem; }
.hr-price-row { display: flex; align-items: center; gap: 0.5rem; }
.hr-price-row input { width: 9rem; padding: 0.4rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }

/* ---- Admin: read-only tournament view + public badges ---- */
.atv { display: flex; flex-direction: column; gap: 0.8rem; }
.atv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; padding: 0.9rem 1.1rem; border-radius: 18px; background: linear-gradient(135deg, #f0ebfe, #fffdf8 70%); border: 1px solid #d9cffb; }
.atv-head h1 { margin: 0.2rem 0 0.25rem; font-size: 1.4rem; }
.atv-head p { margin: 0.1rem 0; font-size: 0.86rem; }
.atv-ro { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; background: #6d28d9; color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; }
.atv-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.atv-champ { padding: 0.6rem 0.9rem; border-radius: 14px; background: #fff6dc; border: 1px solid #f4dd9c; font-size: 0.95rem; }
.atv-card { padding: 0.85rem 1rem; }
.atv-card h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.atv-side { margin: 0.8rem 0 0.3rem; font-size: 0.9rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.atv-matches td, .atv-matches th { font-size: 0.84rem; }
.atv-win { font-weight: 800; color: var(--accent-dark); }
.atv-pub { display: inline-block; padding: 0 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 800; }
.atv-pub.yes { background: #dcfce7; color: #166534; }
.atv-pub.no { background: #ffe4e6; color: #9f1239; }

/* Court setup: the step the guided flow is pointing at */
.cs-card.cs-focus { box-shadow: 0 0 0 3px var(--accent); transition: box-shadow .2s ease; }

/* Venue setup: make the Save changes controls on the Details and Payment tabs hard to miss */
.vs-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.vs-card-head h2 { margin: 0; }
.venue-save-bar .vs-save-btn { margin-left: auto; padding: 0.65rem 1.6rem; font-size: 1rem; }
.venue-save-bar.unsaved { background: var(--brand-tint); border-top: 2px solid var(--accent); }
.venue-save-bar.unsaved .vs-save-hint { color: var(--accent-dark); font-size: 0.95rem; }
.venue-save-bar.unsaved .vs-save-btn { animation: vs-save-pulse 1.6s ease-in-out infinite; }
@keyframes vs-save-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent); } }
@media (prefers-reduced-motion: reduce) { .venue-save-bar.unsaved .vs-save-btn { animation: none; } }

/* Booking page: extras (paddles, balls, ball machine) next to the court time */
.vb-extras { margin: 0.9rem 0 0.4rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--brand-tint); }
.vb-extras h4 { margin: 0 0 0.4rem; font-size: 0.9rem; }
.vb-extras h4 em { font-weight: 500; font-style: normal; color: var(--muted); font-size: 0.78rem; margin-left: 0.35rem; }
.vb-extra { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0; }
.vb-extra > span { display: flex; flex-direction: column; font-weight: 600; font-size: 0.9rem; }
.vb-extra small { font-weight: 400; color: var(--muted); font-size: 0.78rem; }
.vb-extra-check { cursor: pointer; }
.vb-extra-check input { width: 1.2rem; height: 1.2rem; flex: none; }

/* The floating "Need help?" bubble sits bottom-right - keep the save bar's button clear of it */
.venue-save-bar { padding-right: 12rem; }
@media (max-width: 640px) { .venue-save-bar { padding-right: 1.25rem; padding-bottom: 4.25rem; } }

/* Court setup: what the venue still needs before customers can book */
.cs-gap-list { text-align: left; margin: 0.4rem 0 1rem; padding-left: 1.2rem; }
.cs-gap-list li { margin: 0.25rem 0; }

/* New-venue guidance: the step the owner is on */
.vs-guide { margin: 0.8rem 0; padding: 0.75rem 1rem; border-radius: 12px; background: var(--brand-tint); border: 1px solid var(--accent); color: var(--ink); }
.vs-guide b:first-child { display: block; margin-bottom: 0.15rem; color: var(--accent-dark); }

/* New-venue setup popups: one focused step at a time */
.vs-wizard { max-width: 520px; }
.vs-wizard-step { display: inline-block; margin-bottom: 0.4rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--brand-tint); color: var(--accent-dark); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.vs-wizard h3 { margin: 0 0 0.3rem; }
.vs-wizard-sub { margin: 1rem 0 0.2rem; }
.vs-wizard-sub em { font-weight: 500; font-style: normal; color: var(--muted); font-size: 0.8rem; margin-left: 0.35rem; }
.vs-guide { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }

/* Setup popups on phones: the buttons stay in view, and the popup stays clear of the bottom menu and help bubble */
.vs-wizard-actions { position: sticky; bottom: -1.25rem; margin: 0.9rem -1.25rem -1.25rem; padding: 0.75rem 1.25rem 1.25rem; background: var(--surface); border-top: 1px solid var(--line); }
@media (max-width: 640px) {
    .modal-backdrop:has(.vs-wizard) { align-items: flex-start; padding: 0.75rem; }
    .vs-wizard { max-height: calc(100dvh - 6.75rem); }
}

/* Court setup: days are real checkboxes (still shaped like chips), and the add forms read as forms, not as list rows */
.day-check { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0 0.8rem 0 0.6rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--muted); font-size: 0.88rem; font-weight: 700; cursor: pointer; user-select: none; }
.day-check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--accent-dark); cursor: pointer; }
.day-check.on { background: var(--brand-tint); border-color: var(--accent); color: var(--ink); }
.day-check:not(.on):hover { background: var(--brand-tint); }
.cs-add { background: var(--brand-tint); border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem; }
.cs-add .cs-f input, .cs-add .cs-f select { background: #fff; }
.cs-add .day-presets { margin-top: 0.45rem; }
@media (max-width: 480px) { .day-check { min-height: 44px; flex: 1 1 calc(25% - 0.35rem); justify-content: center; padding: 0 0.4rem; } }

/* Open Play board: click a player (on a court or in the waiting list) to edit their name, rating and notes */
.player-edit, .queue-name-edit { cursor: pointer; }
.player-edit:hover > div:first-child, .queue-name-edit:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.player-edit:focus-visible, .queue-name-edit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.player-edit { border-radius: 8px; transition: background .12s ease; }
.player-edit:hover { background: var(--brand-tint); }

/* Tournament categories: a clear label for the public-visibility switch (the status sits under it, so it is never mistaken for the label) */
.group-cat-public-text { display: flex; flex-direction: column; line-height: 1.25; }
.group-cat-public-text b { font-size: 0.85rem; color: var(--ink); }
.group-cat-public-text small { font-size: 0.78rem; color: var(--accent-dark); font-weight: 600; }
.group-cat-public-text small.is-hidden { color: #b3420a; }

/* Organizer tournament page: a player's name is a plain-looking button that opens the Edit player popup */
.player-link { display: inline; padding: 0; margin: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; text-align: inherit; cursor: pointer; }
.player-link:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.player-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* Host venue picker: the "venue not listed" free-text option */
.venue-manual { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.venue-manual label { display: block; margin-bottom: 0.35rem; font-weight: 700; font-size: 0.88rem; }

/* Open Play: the Add players popup */
.sb-add-btn { margin-bottom: 0.9rem; min-height: 46px; font-size: 1rem; }
.add-players-box { max-width: 520px; padding: 1.25rem; }
.add-players-box .ap-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.add-players-box h3 { margin: 0 0 0.25rem; font-size: 1.35rem; }
.add-players-box .ap-head p { margin: 0 0 0.9rem; }
.add-players-box .ap-search { width: 100%; box-sizing: border-box; min-height: 52px; padding: 0 1rem; font-size: 1.05rem; border: 2px solid #22c55e; border-radius: 14px; background: #fff; }
.add-players-box .ap-search:focus { outline: none; box-shadow: 0 0 0 3px rgba(34,197,94,0.2); }
.ap-notice { margin-top: 0.7rem; padding: 0.65rem 0.9rem; border-radius: 12px; font-size: 0.92rem; font-weight: 600; }
.ap-notice.ok { background: #e7f6ea; color: #1d6b2b; }
.ap-notice.warn { background: #fef6dc; color: #b45309; }
.ap-tile { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; margin-top: 0.9rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: #f8f9fb; text-align: left; cursor: pointer; font: inherit; }
.ap-tile b { display: block; font-size: 1rem; }
.ap-tile small { display: block; color: var(--muted); font-size: 0.84rem; margin-top: 0.1rem; }
.ap-tile-go { color: #15803d; font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.ap-tile-go i { font-style: normal; font-size: 1.3rem; margin-left: 0.2rem; }
.ap-panel { margin-top: 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.ap-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 1rem; background: #f8f9fb; border-bottom: 1px solid var(--line); }
.ap-panel-head b { display: block; }
.ap-panel-head small { display: block; color: var(--muted); font-size: 0.82rem; }
.ap-link { border: 0; background: none; color: #15803d; font-weight: 700; cursor: pointer; font: inherit; }
.ap-list { list-style: none; margin: 0; padding: 0; max-height: 16rem; overflow-x: hidden; overflow-y: auto; }
.ap-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; width: 100%; min-height: 48px; padding: 0.55rem 1rem; border: 0; border-top: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer; font: inherit; }
.ap-list li:first-child .ap-row { border-top: 0; }
.ap-row:hover, .ap-row:focus-visible { background: #f1f8f3; }
.ap-name { font-weight: 700; }
.ap-meta { color: var(--muted); font-size: 0.88rem; white-space: nowrap; }
.ap-hint { margin: 0.9rem 0 0; }
.ap-new { margin-top: 0.7rem; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.ap-new h4 { margin: 0 0 0.5rem; font-size: 0.98rem; overflow-wrap: anywhere; }
.ap-new-hint { margin: -0.25rem 0 0.5rem; font-size: 0.84rem; }
.ap-new-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ap-new-actions .btn { min-height: 44px; padding-left: 0.4rem; padding-right: 0.4rem; white-space: nowrap; }
.ap-new .import-stars { margin: 0.45rem 0 0; font-size: 0.85rem; gap: 0.05rem; }
.ap-new .import-star { font-size: 1.25rem; }
.ap-new + .ap-panel { margin-top: 0.7rem; }
.ap-footer { margin-top: 1rem; }
@media (max-width: 640px) {
    .modal-backdrop:has(.add-players-box) { align-items: flex-start; padding: 0.6rem; }
    .add-players-box { max-height: calc(100dvh - 6.5rem); }
    .add-players-box .ap-search { font-size: 1rem; }
    .ap-list { max-height: 24dvh; }
    .add-players-box .ap-head p { display: none; }
    .ap-footer { margin-top: 0.7rem; }
    .ap-new-actions .btn { font-size: 0.9rem; }
}

/* Open Play list: with nothing to show, the message sits in the first grid cell next to the Quick Start card instead of stretching across the page */
.tn-empty-cell { grid-column: auto; display: flex; flex-direction: column; justify-content: center; padding: 1.9rem 1.4rem; }

/* Setup: Start Round Robin with a small Preview button beside it (about a quarter of the Start button's width) */
.start-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1fr); gap: 0.6rem; align-items: stretch; }
.start-row > .btn { min-width: 0; }
.start-row .btn { margin: 0; }
.start-main-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; }
.start-ic { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); transition: transform 0.15s ease; }
.start-ic svg { margin-left: 1px; }
.start-main-btn:not(:disabled) .start-ic { animation: start-ic-pulse 2.4s ease-out infinite; }
@keyframes start-ic-pulse { 0% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 0 0 0 rgba(255,255,255,0.55); } 70%, 100% { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 0 0 10px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .start-main-btn:not(:disabled) .start-ic { animation: none; } }
.start-main-btn:not(:disabled):hover .start-ic { transform: scale(1.12); }
.start-preview-btn { white-space: normal; overflow-wrap: anywhere; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.4rem 0.3rem; font-size: 0.78rem; font-weight: 700; line-height: 1.1; text-align: center; border-color: var(--brand); color: var(--brand); background: var(--brand-tint); transition: transform 0.15s ease, background 0.15s ease; }
.start-preview-btn svg { flex: none; }
.start-preview-btn:not(:disabled):hover { background: #fff; transform: translateY(-1px); }
@media (max-width: 640px) { .start-row { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 0.5rem; } .start-preview-btn { font-size: 0.7rem; padding-left: 0.15rem; padding-right: 0.15rem; } .start-main-btn { gap: 0.45rem; } }

/* Setup: full-screen match preview */
.mp-overlay { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; background: var(--page-bg, #faf6ee); overscroll-behavior: contain; }
.mp-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.2rem; background: var(--surface, #fff); border-bottom: 1px solid var(--line); }
.mp-title h2 { margin: 0; font-size: 1.35rem; }
.mp-title p { margin: 0.2rem 0 0; font-size: 0.9rem; }
.mp-close { flex: none; min-height: 46px; padding: 0 1.3rem; border: 0; border-radius: 999px; background: var(--ink, #1d211f); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.mp-close:hover, .mp-close:focus-visible { background: var(--danger, #c0392b); }
.mp-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.7rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--surface, #fff); }
.mp-search { flex: 1 1 14rem; min-width: 0; max-width: 24rem; padding: 0.55rem 0.8rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.mp-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mp-chip { min-width: 2.4rem; min-height: 38px; padding: 0 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.mp-chip.on { background: var(--brand, #2f7d4a); border-color: var(--brand, #2f7d4a); color: #fff; }
.mp-body { flex: 1; overflow-y: auto; padding: 1rem 1.2rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr)); gap: 1rem; align-content: start; }
.mp-group { background: var(--surface, #fff); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mp-group h3 { margin: 0; padding: 0.7rem 1rem; background: var(--brand-tint, #eef6ef); border-bottom: 1px solid var(--line); font-size: 1.02rem; }
.mp-group h3 small { margin-left: 0.4rem; color: var(--muted); font-weight: 500; font-size: 0.82rem; }
.mp-list { list-style: none; margin: 0; padding: 0; }
.mp-list li { display: grid; grid-template-columns: 2rem 1fr auto; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; border-top: 1px solid var(--line); }
.mp-list li:first-child { border-top: 0; }
.mp-no { font-weight: 800; color: var(--muted); text-align: right; }
.mp-vs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.5rem; min-width: 0; overflow-wrap: anywhere; }
.mp-vs i { font-style: normal; color: var(--muted); font-size: 0.8rem; }
.mp-side { font-weight: 600; }
.mp-round { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.mp-foot { padding: 0.7rem 1.2rem calc(0.7rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface, #fff); }
@media (max-width: 640px) {
    .mp-top { padding: 0.7rem 0.9rem; }
    .mp-title h2 { font-size: 1.15rem; }
    .mp-title p { font-size: 0.82rem; }
    .mp-close { padding: 0 1rem; }
    .mp-tools, .mp-body, .mp-foot { padding-left: 0.9rem; padding-right: 0.9rem; }
    .mp-list li { padding-left: 0.8rem; padding-right: 0.8rem; }
}

/* Start round robin confirmation: richer body, play icon on the confirm button, link to the preview */
.confirm-body p { margin: 0 0 0.6rem; }
.confirm-link { display: inline-block; margin: 0.1rem 0 0; padding: 0; border: 0; background: none; color: var(--brand); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.modal-box .btn-accent:has(.start-ic) { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; }

/* Add players popup: anchored to the top with a fixed height, so the search box never moves while the match list grows and shrinks as you type */
.modal-backdrop:has(.add-players-box) { align-items: flex-start; padding-top: clamp(0.6rem, 7vh, 3.5rem); }
.add-players-box { display: flex; flex-direction: column; height: min(37rem, calc(100dvh - 4.5rem)); max-height: none; overflow: hidden; }
.add-players-box > * { flex: none; }
.add-players-box .ap-panel { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; }
.add-players-box .ap-list { flex: 1 1 auto; min-height: 0; max-height: none; }
.add-players-box .ap-footer { margin-top: auto; padding-top: 0.8rem; }
@media (max-width: 640px) {
    .modal-backdrop:has(.add-players-box) { padding-top: 0.6rem; }
    .add-players-box { height: calc(100dvh - 1.2rem); }
    .add-players-box .ap-list { max-height: none; }
}

/* The copy-link icon turns into a green tick for a moment after it copies */
.tn-share.copied { border-color: var(--accent); background: var(--brand-tint); color: var(--accent-dark); }


/* ===== Tournament TV display (/t/{id}/tv) ===== */
.tv { --tv-bg: #06120d; --tv-card: rgba(255,255,255,0.07); --tv-card-2: rgba(255,255,255,0.11); --tv-line: rgba(255,255,255,0.14); --tv-text: #f3f8ef; --tv-muted: #9db4a6;
    --tv-lime: #c6f135; --tv-lime-deep: #8fc41a; --tv-live: #ff5252; --tv-gold: #ffd45c;
    position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; overflow: hidden; color: var(--tv-text); background: var(--tv-bg);
    font-size: clamp(13px, calc(0.62vw + 1.1vh), 40px); line-height: 1.25; cursor: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.tv.show-ctl { cursor: auto; }
.tv *, .tv *::before, .tv *::after { box-sizing: border-box; }
.tv h1, .tv h2, .tv h3, .tv h4, .tv p { margin: 0; }
.tv a { color: inherit; text-decoration: none; }
.tv-glow { position: absolute; inset: -20%; z-index: 0; pointer-events: none; background:
    radial-gradient(40% 35% at 15% 10%, rgba(198,241,53,0.20), transparent 70%),
    radial-gradient(35% 40% at 90% 85%, rgba(34,197,94,0.22), transparent 70%),
    radial-gradient(30% 30% at 70% 15%, rgba(20,184,166,0.14), transparent 70%);
    animation: tv-drift 24s ease-in-out infinite alternate; }
@keyframes tv-drift { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-3%, 2%, 0) scale(1.08); } }

.tv-center { position: relative; z-index: 1; margin: auto; text-align: center; display: grid; gap: 1rem; place-items: center; padding: 2rem; }
.tv-spinner { width: 3rem; height: 3rem; border-radius: 50%; border: 0.3rem solid var(--tv-line); border-top-color: var(--tv-lime); animation: tv-spin 0.9s linear infinite; }
@keyframes tv-spin { to { transform: rotate(360deg); } }

.tv-head { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(11em, 1fr) minmax(0, 2.4fr) minmax(max-content, 1fr); align-items: center; gap: 1rem; padding: 1.1rem 1.8rem 0.4rem; }
.tv-brand { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 600; letter-spacing: 0.01em; color: var(--tv-muted); font-size: 1.05em; }
.tv-brand b { color: var(--tv-lime); font-weight: 800; }
.tv-brand svg { width: 1.9em; height: 1.9em; }
.tv-title { text-align: center; min-width: 0; }
.tv-title h1 { font-size: 2.1em; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-title p { margin-top: 0.15rem; color: var(--tv-lime); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.82em; }
.tv-live-pill { justify-self: end; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.95rem; border-radius: 999px; background: rgba(255,82,82,0.14); border: 1px solid rgba(255,82,82,0.5); color: #ffb4b4; font-weight: 800; letter-spacing: 0.14em; font-size: 0.85em; }
.tv-dot { display: inline-block; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--tv-live); box-shadow: 0 0 0 0 rgba(255,82,82,0.7); animation: tv-pulse 1.6s infinite; }
@keyframes tv-pulse { 70% { box-shadow: 0 0 0 0.7em rgba(255,82,82,0); } 100% { box-shadow: 0 0 0 0 rgba(255,82,82,0); } }

.tv-stage { position: relative; z-index: 2; flex: 1; min-height: 0; padding: 0.8rem 1.8rem 0.4rem; display: flex; }
.tv-slide { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; animation: tv-in 0.7s cubic-bezier(.2,.7,.2,1) both; }
@keyframes tv-in { from { opacity: 0; transform: translateY(1.2rem) scale(0.985); } to { opacity: 1; transform: none; } }

.tv-foot { position: relative; z-index: 2; padding: 0.4rem 1.8rem 1rem; display: grid; gap: 0.6rem; justify-items: center; }
.tv-dots { display: flex; gap: 0.45rem; flex-wrap: wrap; justify-content: center; max-width: 100%; }
.tv-pip { width: 0.65rem; height: 0.65rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,0.25); cursor: pointer; transition: width 0.3s, background 0.3s; }
.tv-pip.on { width: 2rem; background: var(--tv-lime); }
.tv-progress { width: min(40rem, 100%); height: 0.28rem; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.tv-progress i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--tv-lime-deep), var(--tv-lime)); transform-origin: left; animation: tv-fill linear both; }
.tv.is-paused .tv-progress i { animation-play-state: paused; opacity: 0.45; }
@keyframes tv-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tv-controls { position: absolute; z-index: 5; left: 50%; bottom: 3.2rem; transform: translate(-50%, 1rem); display: flex; align-items: center; gap: 0.4rem; padding: 0.4rem; border-radius: 999px; background: rgba(8,20,14,0.82); border: 1px solid var(--tv-line); backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; }
.tv.show-ctl .tv-controls, .tv.is-paused .tv-controls { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.tv-ctl { display: inline-grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 0; border-radius: 50%; background: transparent; color: var(--tv-text); font-size: 1.15em; cursor: pointer; font-family: inherit; }
.tv-ctl:hover { background: var(--tv-card-2); }
.tv-ctl.big { width: 3.4rem; height: 3.4rem; background: var(--tv-lime); color: #10200a; font-size: 1.3em; }
.tv-ctl.big:hover { background: #d8ff55; }

.tv-eyebrow { color: var(--tv-lime); font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.85em; }
.tv-tbd { color: var(--tv-muted); font-style: italic; font-weight: 500; }
.tv-pair { overflow-wrap: anywhere; }

/* overview */
.tv-overview { display: grid; gap: 1.6rem; align-content: center; max-width: 80rem; width: 100%; margin: 0 auto; }
.tv-hero h2 { font-size: 3.6em; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin-top: 0.3rem; background: linear-gradient(90deg, #fff, #d9f98b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tv-meta { margin-top: 0.7rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; color: #cfe3d6; font-size: 1.15em; }
.tv-tiles { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 1rem; }
.tv-tile { padding: 1.1rem 1.3rem; border-radius: 1.2rem; background: var(--tv-card); border: 1px solid var(--tv-line); display: grid; gap: 0.2rem; align-content: center; }
.tv-tile span { color: var(--tv-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78em; }
.tv-tile strong { font-size: 3em; font-weight: 800; line-height: 1; }
.tv-tile strong small { font-size: 0.45em; color: var(--tv-muted); font-weight: 600; }
.tv-tile.hot { background: linear-gradient(135deg, rgba(198,241,53,0.2), rgba(198,241,53,0.05)); border-color: rgba(198,241,53,0.6); }
.tv-tile.hot strong { color: var(--tv-lime); }
.tv-tile.ring { grid-auto-flow: column; justify-content: start; align-items: center; gap: 1.1rem; }
.tv-ring { --size: 5.2rem; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, #0b1d15 74%, transparent 76% 100%), conic-gradient(var(--tv-lime) calc(var(--p) * 1%), rgba(255,255,255,0.12) 0); }
.tv-ring b { font-size: 1.5em; font-weight: 800; } .tv-ring b small { font-size: 0.55em; color: var(--tv-muted); }
.tv-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.7rem 1rem; }
.tv-cat { padding: 0.8rem 1rem; border-radius: 1rem; background: var(--tv-card); border: 1px solid var(--tv-line); display: grid; gap: 0.5rem; }
.tv-cat > div:first-child { display: grid; gap: 0.1rem; }
.tv-cat b { font-size: 1.1em; } .tv-cat span { color: var(--tv-muted); font-size: 0.85em; }
.tv-cat.status-inprogress { border-color: rgba(198,241,53,0.5); }
.tv-cat.status-completed b::after { content: " ✓"; color: var(--tv-lime); }
.tv-bar { height: 0.4rem; border-radius: 999px; background: rgba(255,255,255,0.12); overflow: hidden; }
.tv-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--tv-lime-deep), var(--tv-lime)); border-radius: inherit; transition: width 1s; }

/* courts */
.tv-courts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 1.6rem; width: 100%; max-width: 90rem; margin: 0 auto; align-content: center; }
.tv-courts.single { grid-template-columns: 1fr; max-width: 62rem; }
.tv-col { display: grid; gap: 0.9rem; align-content: start; min-width: 0; }
.tv-col h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.5em; font-weight: 800; }
.tv-col h3 .tv-dot { font-size: 0.5em; }
.tv-cardgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0.9rem; }
.tv-card { padding: 1rem 1.2rem; border-radius: 1.2rem; background: var(--tv-card); border: 1px solid var(--tv-line); display: grid; gap: 0.7rem; min-width: 0; }
.tv-card > header { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.tv-card > header b { font-size: 1.15em; } .tv-card > header span { color: var(--tv-muted); font-size: 0.85em; }
.tv-card > header em { margin-left: auto; font-style: normal; font-weight: 800; letter-spacing: 0.12em; font-size: 0.7em; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--tv-live); color: #fff; animation: tv-blink 1.6s infinite; }
@keyframes tv-blink { 50% { opacity: 0.6; } }
.tv-card.live { border-color: rgba(198,241,53,0.6); background: linear-gradient(160deg, rgba(198,241,53,0.16), rgba(255,255,255,0.05)); box-shadow: 0 0 2.4rem -0.8rem rgba(198,241,53,0.6); }
.tv-vs { display: grid; gap: 0.35rem; font-size: 1.3em; font-weight: 700; }
.tv-vs i { font-style: normal; font-size: 0.6em; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tv-lime); font-weight: 800; }
.tv-vs.small { font-size: 1.05em; gap: 0.15rem; }
.tv-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.tv-queue li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; padding: 0.7rem 0.9rem; border-radius: 1rem; background: var(--tv-card); border: 1px solid var(--tv-line); }
.tv-queue small { color: var(--tv-muted); }
.tv-no { display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--tv-lime); color: #10200a; font-weight: 800; font-size: 1.1em; }

/* results */
.tv-cardgrid.results { grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr)); width: 100%; max-width: 90rem; margin: 0 auto; align-content: center; }
.tv-card.result > header span { margin-left: auto; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--tv-card-2); }
.tv-line { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.8rem; border-radius: 0.8rem; font-size: 1.2em; font-weight: 600; color: #c9d8cf; background: rgba(255,255,255,0.04); }
.tv-line strong { font-size: 1.5em; font-weight: 800; min-width: 1.6em; text-align: right; }
.tv-line.won { background: linear-gradient(90deg, rgba(198,241,53,0.28), rgba(198,241,53,0.1)); color: #fff; box-shadow: inset 0.25rem 0 0 var(--tv-lime); }
.tv-line.won strong { color: var(--tv-lime); }
.tv-line.lost { opacity: 0.6; }

/* standings */
.tv-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 1.4rem; width: 100%; max-width: 86rem; margin: 0 auto; align-content: center; }
.tv-table-card { padding: 1.1rem 1.3rem; border-radius: 1.3rem; background: var(--tv-card); border: 1px solid var(--tv-line); display: grid; gap: 0.7rem; align-content: start; min-width: 0; }
.tv-table-card > header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.tv-table-card h3 { font-size: 1.6em; font-weight: 800; } .tv-table-card > header span { color: var(--tv-muted); }
.tv-table-card table { width: 100%; border-collapse: separate; border-spacing: 0 0.35rem; font-size: 1.15em; }
.tv-table-card th { text-align: center; color: var(--tv-muted); font-weight: 700; font-size: 0.7em; letter-spacing: 0.14em; text-transform: uppercase; padding: 0 0.4rem; }
.tv-table-card th:nth-child(2) { text-align: left; }
.tv-table-card td { text-align: center; padding: 0.55rem 0.5rem; background: rgba(255,255,255,0.05); font-weight: 700; }
.tv-table-card td:first-child { border-radius: 0.8rem 0 0 0.8rem; width: 3rem; } .tv-table-card td:last-child { border-radius: 0 0.8rem 0.8rem 0; }
.tv-table-card td:nth-child(2) { text-align: left; font-weight: 600; }
.tv-table-card tr.adv td { background: rgba(198,241,53,0.12); }
.tv-table-card footer { color: var(--tv-lime); font-weight: 700; font-size: 0.85em; }
.tv-rank { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--tv-card-2); font-size: 0.9em; }
.tv-rank.r1 { background: var(--tv-gold); color: #3a2a00; } .tv-rank.r2 { background: #d8e0e6; color: #1b2a33; } .tv-rank.r3 { background: #e0a371; color: #3a1d06; }

/* bracket */
.tv-bracket { display: flex; gap: 1.2rem; align-items: stretch; width: 100%; max-width: 100rem; margin: 0 auto; overflow-x: auto; padding-bottom: 0.4rem; scrollbar-width: none; max-height: 100%; }
.tv-bracket::-webkit-scrollbar { display: none; }
.tv-round { flex: 1 0 17rem; display: flex; flex-direction: column; gap: 0.6rem; min-width: 0; }
.tv-round h4 { text-align: center; color: var(--tv-lime); font-size: 0.85em; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 800; }
.tv-round-cards { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 0.6rem; }
.tv-bcard { position: relative; display: grid; gap: 0.25rem; padding: 0.4rem; border-radius: 1rem; background: var(--tv-card); border: 1px solid var(--tv-line); }
.tv-bcard .tv-line { font-size: 1em; padding: 0.4rem 0.6rem; } .tv-bcard .tv-line strong { font-size: 1.2em; }
.tv-bcard.live { border-color: var(--tv-lime); box-shadow: 0 0 1.6rem -0.5rem var(--tv-lime); }
.tv-bcard em { position: absolute; top: -0.55rem; right: 0.7rem; font-style: normal; font-size: 0.6em; font-weight: 800; letter-spacing: 0.12em; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--tv-live); color: #fff; }

/* champions */
.tv-champs { display: grid; gap: 1.4rem; text-align: center; width: 100%; max-width: 86rem; margin: 0 auto; }
.tv-champs .tv-eyebrow { font-size: 1.1em; color: var(--tv-gold); }
.tv-champ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.2rem; }
.tv-champ { position: relative; overflow: hidden; padding: 1.6rem 1.2rem 1.4rem; border-radius: 1.5rem; display: grid; gap: 0.6rem; justify-items: center; background: linear-gradient(170deg, rgba(255,212,92,0.22), rgba(255,255,255,0.05)); border: 1px solid rgba(255,212,92,0.55); box-shadow: 0 0 3rem -1rem rgba(255,212,92,0.7); }
.tv-champ::before { content: ""; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(255,212,92,0.18), transparent 30%); animation: tv-spin 9s linear infinite; }
.tv-champ > * { position: relative; }
.tv-cat-name { color: #ffe9a8; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.9em; }
.tv-trophy { font-size: 4.2em; line-height: 1; filter: drop-shadow(0 0.4rem 1rem rgba(255,212,92,0.6)); animation: tv-float 3s ease-in-out infinite; }
@keyframes tv-float { 50% { transform: translateY(-0.5rem); } }
.tv-champ strong { font-size: 1.9em; font-weight: 800; line-height: 1.1; } .tv-champ small { color: var(--tv-gold); font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; }

/* follow live (QR) */
/* The QR and the text are sized to their content and the pair is centred on the screen (a stretched second column left everything leaning left). */
.tv-follow { display: grid; grid-template-columns: auto minmax(0, auto); justify-content: center; gap: 3.5rem; align-items: center; width: 100%; max-width: 84rem; margin: 0 auto; padding: 0.5rem 0.6rem; }
.tv-qr-wrap { display: grid; gap: 1rem; justify-items: center; text-align: center; color: var(--tv-muted); font-weight: 600; }
.tv-qr-frame { position: relative; padding: 1.1rem; border-radius: 1.8rem; background: #fff; box-shadow: 0 0 0 0.4rem var(--tv-lime), 0 0 4rem -0.5rem rgba(198,241,53,0.75); overflow: hidden; animation: tv-breathe 3.2s ease-in-out infinite; }
@keyframes tv-breathe { 50% { transform: scale(1.025); } }
.tv-qr { width: min(26rem, 44vh, 38vw); aspect-ratio: 1; display: grid; place-items: center; }
.tv-qr img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.tv-scanline { position: absolute; left: 0; right: 0; height: 0.35rem; background: linear-gradient(90deg, transparent, var(--tv-lime), transparent); box-shadow: 0 0 1rem var(--tv-lime); animation: tv-scan 2.8s ease-in-out infinite; }
@keyframes tv-scan { 0%, 100% { top: 4%; } 50% { top: 94%; } }
.tv-follow-copy { display: grid; gap: 1.1rem; min-width: 0; }
.tv-follow-copy h2 { font-size: 3.2em; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.tv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; font-size: 0.9rem; line-height: 1.45; }
.tv-steps li { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: center; font-size: 1.25em; font-weight: 600; }
.tv-steps b { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--tv-lime); color: #10200a; font-weight: 800; }
.tv-link { display: inline-block; justify-self: start; max-width: 100%; padding: 0.7rem 1.3rem; border-radius: 999px; background: var(--tv-card-2); border: 1px dashed rgba(198,241,53,0.7); color: var(--tv-lime); font-weight: 800; font-size: 1.5em; letter-spacing: 0.01em; overflow-wrap: anywhere; }
.tv-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.tv-chips li { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem; border-radius: 999px; background: var(--tv-card); border: 1px solid var(--tv-line); font-size: 0.9em; font-weight: 600; }
.tv-chips i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--tv-muted); }
.tv-chips li.status-inprogress i { background: var(--tv-lime); box-shadow: 0 0 0.6em var(--tv-lime); } .tv-chips li.status-completed i { background: var(--tv-gold); }

/* phones and other narrow / portrait screens */
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
    .tv { font-size: clamp(13px, 3.4vw, 20px); }
    .tv-head { grid-template-columns: 1fr auto; padding: 0.8rem 1rem 0.2rem; gap: 0.4rem 0.8rem; }
    .tv-title { grid-column: 1 / -1; grid-row: 2; text-align: left; }
    .tv-title h1 { font-size: 1.7em; white-space: normal; }
    .tv-stage { padding: 0.6rem 1rem 0.3rem; overflow-y: auto; scrollbar-width: none; }
    .tv-stage::-webkit-scrollbar { display: none; }
    .tv-slide { justify-content: flex-start; }
    .tv-foot { padding: 0.3rem 1rem 0.9rem; }
    .tv-overview { gap: 1.1rem; } .tv-hero h2 { font-size: 2.5em; }
    .tv-tiles { grid-template-columns: 1fr 1fr; } .tv-tile.ring { grid-column: 1 / -1; } .tv-tile strong { font-size: 2.3em; }
    .tv-courts { grid-template-columns: 1fr; } .tv-cardgrid, .tv-cardgrid.results, .tv-tables, .tv-champ-grid { grid-template-columns: 1fr; }
    .tv-follow { grid-template-columns: 1fr; gap: 1.4rem; justify-items: center; text-align: center; }
    .tv-follow-copy { justify-items: center; } .tv-follow-copy h2 { font-size: 2.2em; } .tv-steps li { text-align: left; } .tv-link { justify-self: center; font-size: 1.15em; }
    .tv-qr { width: min(70vw, 38vh); } .tv-chips { justify-content: center; }
    .tv-controls { bottom: 2.6rem; } .tv-pip.on { width: 1.4rem; }
    .tv-bracket { padding-bottom: 0.8rem; } .tv-round { flex-basis: 15rem; }
}
@media (prefers-reduced-motion: reduce) { .tv-glow, .tv-champ::before, .tv-trophy, .tv-qr-frame, .tv-scanline, .tv-dot, .tv-card > header em { animation: none; } .tv-slide { animation-duration: 0.01s; } }
.tv[data-kind="overview"] .tv-title h1 { display: none; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
    .tv-tiles { grid-template-columns: repeat(3, 1fr); }
    .tv-tile { padding: 0.8rem 0.9rem; } .tv-tile span { font-size: 0.65em; letter-spacing: 0.06em; }
    .tv-tile.ring { grid-column: 1 / -1; }
    .tv-kind-champions, .tv-kind-follow { justify-content: center; }
}

/* TV display: use the width of a big screen */
.tv-overview { max-width: 104rem; }
.tv-tile.ring > div:last-child { display: grid; gap: 0.2rem; }
.tv-tile.ring strong { white-space: nowrap; }
.tv-courts, .tv-cardgrid.results, .tv-tables, .tv-champs, .tv-follow, .tv-bracket { max-width: 112rem; }

/* ===== Page loader: a bouncing pickleball in the middle of the page (Components/Shared/PageLoader.razor) ===== */
.pc-loader { min-height: min(62vh, 30rem); width: 100%; display: grid; place-items: center; align-content: center; gap: 0.6rem; text-align: center; padding: 2rem 1rem; }
.pc-ball-wrap { position: relative; width: 6rem; height: 7.2rem; display: grid; justify-items: center; align-items: start; }
.pc-ball { width: 3.6rem; height: 3.6rem; transform-origin: 50% 100%; animation: pc-bounce 1s infinite; filter: drop-shadow(0 0.15rem 0.2rem rgba(60, 90, 10, 0.25)); }
.pc-ball svg { width: 100%; height: 100%; display: block; }
.pc-shadow { position: absolute; left: 50%; bottom: 0.2rem; width: 3.2rem; height: 0.7rem; margin-left: -1.6rem; border-radius: 50%; background: rgba(30, 45, 10, 0.32); filter: blur(0.15rem); animation: pc-shadow 1s infinite; }
@keyframes pc-bounce {
    0%   { transform: translateY(0) scale(1, 1) rotate(0deg);        animation-timing-function: cubic-bezier(0.5, 0, 1, 0.6); }
    46%  { transform: translateY(3.3rem) scale(1, 1) rotate(200deg);  animation-timing-function: ease-out; }
    50%  { transform: translateY(3.45rem) scale(1.22, 0.74) rotate(230deg); animation-timing-function: ease-out; }
    56%  { transform: translateY(3.3rem) scale(0.94, 1.08) rotate(260deg); animation-timing-function: cubic-bezier(0, 0.4, 0.5, 1); }
    100% { transform: translateY(0) scale(1, 1) rotate(360deg); }
}
@keyframes pc-shadow {
    0%, 100% { transform: scale(0.45); opacity: 0.12; }
    48%      { transform: scale(1.1); opacity: 0.38; }
}
.pc-loader-text { margin: 0; color: var(--muted, #6b7a70); font-weight: 600; font-size: 1.02rem; letter-spacing: 0.01em; }
.pc-dots i { font-style: normal; display: inline-block; animation: pc-dot 1.2s infinite; }
.pc-dots i:nth-child(2) { animation-delay: 0.2s; }
.pc-dots i:nth-child(3) { animation-delay: 0.4s; }
@keyframes pc-dot { 0%, 60%, 100% { opacity: 0.2; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-0.18em); } }
.tv .pc-loader { min-height: 0; }
.tv .pc-loader-text { color: var(--tv-muted); }
.tv .pc-shadow { background: rgba(0, 0, 0, 0.45); }
@media (prefers-reduced-motion: reduce) { .pc-ball, .pc-shadow, .pc-dots i { animation: none; } .pc-shadow { opacity: 0.25; transform: scale(0.8); } }

/* "Show on TV" pill on the tournament cover photo (bottom right) */

/* ===== Follow live: the phone-first tournament page the TV QR code opens (/t/{id}/live) ===== */
.fl { --fl-bg: #f8f4ea; --fl-card: #ffffff; --fl-soft: #f0ebdd; --fl-ink: #16201a; --fl-muted: #667569; --fl-line: #e4dece; --fl-lime: #9dc22b; --fl-lime-bright: #c6f135; --fl-on-lime: #11200a;
    --fl-live: #e5484d; --fl-gold: #d99f00; --fl-shadow: 0 6px 20px -12px rgba(30, 45, 20, 0.35);
    position: relative; min-height: 100vh; min-height: 100dvh; max-width: 46rem; margin: 0 auto; background: var(--fl-bg); color: var(--fl-ink);
    padding-bottom: calc(5.2rem + env(safe-area-inset-bottom)); -webkit-tap-highlight-color: transparent; }
@media (prefers-color-scheme: dark) {
    .fl { --fl-bg: #07130e; --fl-card: #10211a; --fl-soft: #162b22; --fl-ink: #f1f6ee; --fl-muted: #9db3a5; --fl-line: #21382d; --fl-lime: #c6f135; --fl-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.8); }
}
html:has(.fl), body:has(.fl) { background: #f8f4ea; }
@media (prefers-color-scheme: dark) { html:has(.fl), body:has(.fl) { background: #07130e; } }
.fl *, .fl *::before, .fl *::after { box-sizing: border-box; }
.fl h1, .fl h2, .fl h3, .fl h4, .fl p { margin: 0; }
.fl a { color: inherit; text-decoration: none; }
.fl button { font-family: inherit; }
.fl-empty.big { padding: 4rem 1.5rem; text-align: center; }

/* header */
.fl-head { position: sticky; top: 0; z-index: 20; padding: 0.55rem 1rem 0; background: color-mix(in srgb, var(--fl-bg) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--fl-line); }
.fl-head-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.fl-brand { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--fl-muted); font-size: 0.92rem; }
.fl-brand b { color: var(--fl-lime); font-weight: 800; }
.fl-icon-btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--fl-line); background: var(--fl-card); color: var(--fl-ink); cursor: pointer; transition: transform 0.15s; }
.fl-icon-btn:active { transform: scale(0.92); }
.fl-title { padding: 0.35rem 0 0.55rem; }
.fl-title h1 { font-size: 1.55rem; font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.fl-title p { margin-top: 0.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; color: var(--fl-muted); font-size: 0.86rem; font-weight: 600; }
.fl-live, .fl-done, .fl-soon { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; }
.fl-live { background: rgba(229, 72, 77, 0.14); color: var(--fl-live); }
.fl-live i, .fl-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--fl-live); animation: fl-pulse 1.6s infinite; }
.fl-done { background: rgba(157, 194, 43, 0.2); color: var(--fl-lime); } .fl-soon { background: var(--fl-soft); color: var(--fl-muted); }
@keyframes fl-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.55); } 70% { box-shadow: 0 0 0 0.5rem rgba(229, 72, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); } }

/* category chips */
.fl-rail-wrap { position: relative; display: flex; align-items: center; gap: 0.4rem; margin: 0 -1rem; padding: 0 1rem 0.65rem; }
.fl-rail { flex: 1; min-width: 0; display: flex; gap: 0.45rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 0.15rem 0.2rem; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 0.8rem, #000 calc(100% - 1.4rem), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 0.8rem, #000 calc(100% - 1.4rem), transparent); }
.fl-rail::-webkit-scrollbar { display: none; }
.fl-chip { flex: none; scroll-snap-align: center; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; border-radius: 999px; border: 1px solid var(--fl-line); background: var(--fl-card); color: var(--fl-ink); font-size: 0.86rem; font-weight: 700; cursor: pointer; white-space: nowrap; transition: transform 0.15s, background 0.2s, border-color 0.2s; }
.fl-chip small { opacity: 0.6; font-weight: 700; }
.fl-chip i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fl-line); }
.fl-chip.status-inprogress i { background: var(--fl-live); } .fl-chip.status-completed i { background: var(--fl-lime); }
.fl-chip:active { transform: scale(0.95); }
.fl-chip.on { background: var(--fl-ink); border-color: var(--fl-ink); color: var(--fl-bg); }
.fl-all-btn { flex: none; display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--fl-line); background: var(--fl-card); color: var(--fl-ink); cursor: pointer; }

/* body */
.fl-main { padding: 1rem 1rem 0; display: grid; gap: 0.9rem; animation: fl-in 0.35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fl-in { from { opacity: 0; transform: translateY(0.6rem); } to { opacity: 1; transform: none; } }
.fl-h { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fl-muted); }
.fl-h small { margin-left: auto; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--fl-soft); letter-spacing: 0; }
.fl-quiet { padding: 1rem; border-radius: 1rem; border: 1px dashed var(--fl-line); color: var(--fl-muted); font-size: 0.92rem; text-align: center; }
.fl-cards { display: grid; gap: 0.7rem; } .fl-cards.tight { gap: 0.5rem; }
.fl-pair { overflow-wrap: anywhere; } .fl-tbd { color: var(--fl-muted); font-style: italic; font-weight: 500; }

/* stats strip */
.fl-stats { display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 1rem; padding: 0.9rem 1rem; border-radius: 1.2rem; background: var(--fl-card); border: 1px solid var(--fl-line); box-shadow: var(--fl-shadow); }
.fl-ring { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--fl-card) 74%, transparent 77% 100%), conic-gradient(var(--fl-lime) calc(var(--p) * 1%), var(--fl-soft) 0); }
.fl-ring b { font-size: 0.95rem; font-weight: 800; } .fl-ring small { font-size: 0.6em; color: var(--fl-muted); }
.fl-stat { display: grid; gap: 0.1rem; } .fl-stat strong { font-size: 1.7rem; font-weight: 800; line-height: 1; } .fl-stat strong small { font-size: 0.55em; color: var(--fl-muted); font-weight: 700; }
.fl-stat span { color: var(--fl-muted); font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.fl-stat.hot strong { color: var(--fl-live); }

/* match cards */
.fl-card { padding: 0.8rem 0.9rem; border-radius: 1.1rem; background: var(--fl-card); border: 1px solid var(--fl-line); display: grid; gap: 0.55rem; box-shadow: var(--fl-shadow); }
.fl-card > header { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-size: 0.82rem; color: var(--fl-muted); }
.fl-card > header b { color: var(--fl-ink); font-size: 0.95rem; }
.fl-card.result > header span { margin-left: auto; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--fl-soft); font-weight: 700; }
.fl-card.live { border-color: color-mix(in srgb, var(--fl-live) 55%, var(--fl-line)); background: linear-gradient(160deg, color-mix(in srgb, var(--fl-live) 9%, var(--fl-card)), var(--fl-card)); }
.fl-card.live > header em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 0.68rem; letter-spacing: 0.12em; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--fl-live); color: #fff; animation: fl-blink 1.6s infinite; }
@keyframes fl-blink { 50% { opacity: 0.65; } }
.fl-vs { display: grid; gap: 0.2rem; font-weight: 700; font-size: 1.05rem; }
.fl-vs i { font-style: normal; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fl-lime); }
.fl-vs.small { font-size: 0.95rem; gap: 0.1rem; }
.fl-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.5rem 0.7rem; border-radius: 0.75rem; background: var(--fl-soft); font-weight: 600; font-size: 0.98rem; }
.fl-row strong { font-size: 1.25rem; font-weight: 800; min-width: 1.4em; text-align: right; }
.fl-row.won { background: color-mix(in srgb, var(--fl-lime) 30%, var(--fl-card)); box-shadow: inset 0.25rem 0 0 var(--fl-lime); font-weight: 800; }
.fl-row.lost { opacity: 0.62; }
.fl-queue { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.fl-queue li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: center; padding: 0.65rem 0.8rem; border-radius: 1rem; background: var(--fl-card); border: 1px solid var(--fl-line); }
.fl-queue small { color: var(--fl-muted); }
.fl-no { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--fl-lime-bright); color: var(--fl-on-lime); font-weight: 800; }
.fl-more { justify-self: center; padding: 0.65rem 1.4rem; border-radius: 999px; border: 1px solid var(--fl-line); background: var(--fl-card); color: var(--fl-ink); font-weight: 700; cursor: pointer; }

/* empty states */
.fl-empty { display: grid; justify-items: center; gap: 0.5rem; text-align: center; padding: 2.4rem 1rem; color: var(--fl-muted); }
.fl-empty-ic { font-size: 2.6rem; filter: grayscale(0.1); animation: fl-float 3s ease-in-out infinite; }
@keyframes fl-float { 50% { transform: translateY(-0.35rem); } }
.fl-empty h3 { color: var(--fl-ink); font-size: 1.15rem; }
.fl-empty p { max-width: 24rem; font-size: 0.95rem; line-height: 1.4; }

/* find me / teams search */
.fl-searchbar { display: flex; align-items: center; gap: 0.6rem; padding: 0 1rem; height: 3.2rem; border-radius: 999px; background: var(--fl-card); border: 1px solid var(--fl-line); box-shadow: var(--fl-shadow); color: var(--fl-muted); }
.fl-searchbar:focus-within { border-color: var(--fl-lime); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fl-lime) 30%, transparent); }
.fl-searchbar input, .fl-search { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--fl-ink); font: inherit; font-size: 1rem; }
.fl-search { display: block; width: 100%; height: 2.8rem; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--fl-line); background: var(--fl-soft); }
.fl-me { display: grid; gap: 0.6rem; padding: 0.9rem; border-radius: 1.2rem; background: var(--fl-card); border: 1px solid var(--fl-line); box-shadow: var(--fl-shadow); }
.fl-me > header { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.fl-me h3 { font-size: 1.1rem; font-weight: 800; overflow-wrap: anywhere; } .fl-me > header span { color: var(--fl-muted); font-size: 0.84rem; }
.fl-record { flex: none; display: inline-flex; align-items: baseline; gap: 0.15rem; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--fl-soft); font-size: 1.1rem; font-weight: 800; }
.fl-banner { padding: 0.65rem 0.9rem; border-radius: 0.9rem; font-weight: 800; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; }
.fl-banner.live { background: rgba(229, 72, 77, 0.13); color: var(--fl-live); }
.fl-banner.next { background: color-mix(in srgb, var(--fl-lime) 28%, var(--fl-card)); }
.fl-banner.gold { background: rgba(217, 159, 0, 0.18); color: var(--fl-gold); }
.fl-banner.quiet { background: var(--fl-soft); color: var(--fl-muted); font-weight: 700; }
.fl-mini { padding: 0.6rem 0.8rem; border-radius: 0.9rem; background: var(--fl-soft); display: grid; gap: 0.2rem; border-left: 0.3rem solid var(--fl-line); }
.fl-mini.won { border-left-color: var(--fl-lime); } .fl-mini.lost { border-left-color: var(--fl-live); } .fl-mini.live { border-left-color: var(--fl-live); background: rgba(229, 72, 77, 0.1); }
.fl-mini-top { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fl-muted); }
.fl-mini-body { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font-weight: 700; } .fl-mini-body strong { font-size: 1.05rem; white-space: nowrap; }

/* brackets: standings and playoffs */
.fl-cat { display: grid; gap: 0.7rem; }
.fl-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-top: 0.4rem; }
.fl-cat-head h2 { font-size: 1.15rem; font-weight: 800; }
.fl-status, .fl-count { padding: 0.15rem 0.65rem; border-radius: 999px; background: var(--fl-soft); color: var(--fl-muted); font-size: 0.74rem; font-weight: 800; }
.fl-status.status-inprogress { background: rgba(229, 72, 77, 0.13); color: var(--fl-live); } .fl-status.status-completed { background: rgba(157, 194, 43, 0.22); color: var(--fl-lime); }
.fl-table { border-radius: 1.2rem; background: var(--fl-card); border: 1px solid var(--fl-line); box-shadow: var(--fl-shadow); overflow: hidden; }
.fl-table > header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; background: var(--fl-soft); }
.fl-table h3 { font-size: 1rem; font-weight: 800; } .fl-table > header span { color: var(--fl-muted); font-size: 0.78rem; font-weight: 700; }
.fl-table ol { list-style: none; margin: 0; padding: 0; }
.fl-table li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr) 2.7rem 2.5rem 2.6rem; align-items: center; gap: 0.7rem; padding: 0.65rem 1rem; border-top: 1px solid var(--fl-line); font-weight: 600; }
.fl-table li.adv { background: color-mix(in srgb, var(--fl-lime) 12%, transparent); }
.fl-rank { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--fl-soft); font-size: 0.85rem; font-weight: 800; }
.fl-rank.r1 { background: #ffd45c; color: #3a2a00; } .fl-rank.r2 { background: #d7dfe5; color: #1b2a33; } .fl-rank.r3 { background: #e2a778; color: #3a1d06; }
.fl-wl { font-weight: 700; color: var(--fl-muted); text-align: center; } .fl-wl b { color: var(--fl-ink); font-size: 1.05rem; }
.fl-tot { text-align: center; font-weight: 700; font-size: 0.95rem; }
.fl-diff { text-align: right; font-weight: 800; font-size: 0.9rem; }
.fl-diff.neg { color: var(--fl-live); }
.fl-table li.fl-th { padding-top: 0.35rem; padding-bottom: 0.35rem; border-top: 0; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fl-muted); }
.fl-table li.fl-th span:nth-child(n+3) { text-align: center; } .fl-table li.fl-th span:last-child { text-align: right; }
.fl-sub { margin-top: 0.4rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fl-muted); }
.fl-bracket { display: flex; gap: 0.8rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -1rem; padding: 0.2rem 1rem 0.8rem; scrollbar-width: none; }
.fl-bracket::-webkit-scrollbar { display: none; }
.fl-round { flex: 0 0 min(17rem, 78%); scroll-snap-align: start; display: grid; gap: 0.6rem; align-content: start; }
.fl-round h4 { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fl-lime); }
.fl-bcard { position: relative; display: grid; gap: 0.25rem; padding: 0.35rem; border-radius: 1rem; background: var(--fl-card); border: 1px solid var(--fl-line); box-shadow: var(--fl-shadow); }
.fl-bcard .fl-row { font-size: 0.92rem; padding: 0.4rem 0.6rem; } .fl-bcard .fl-row strong { font-size: 1.1rem; }
.fl-bcard.live { border-color: var(--fl-live); }
.fl-bcard em { position: absolute; top: -0.5rem; right: 0.7rem; font-style: normal; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.1em; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--fl-live); color: #fff; }

/* winners */
.fl-podium { display: grid; gap: 0.5rem; padding: 0.9rem; border-radius: 1.3rem; background: linear-gradient(170deg, color-mix(in srgb, var(--fl-gold) 14%, var(--fl-card)), var(--fl-card)); border: 1px solid color-mix(in srgb, var(--fl-gold) 45%, var(--fl-line)); box-shadow: var(--fl-shadow); }
.fl-podium > header h2 { font-size: 1.05rem; font-weight: 800; }
.fl-place { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.8rem; padding: 0.6rem 0.8rem; border-radius: 1rem; background: color-mix(in srgb, var(--fl-card) 70%, transparent); }
.fl-place small { color: var(--fl-muted); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.68rem; }
.fl-place strong { display: block; font-size: 1.1rem; font-weight: 800; }
.fl-place.gold strong { font-size: 1.3rem; } .fl-medal { font-size: 2rem; line-height: 1; }
.fl-place.gold { box-shadow: inset 0.25rem 0 0 var(--fl-gold); }

/* teams */
.fl-teams { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.fl-teams li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.7rem; padding: 0.6rem 0.8rem; border-radius: 0.9rem; background: var(--fl-card); border: 1px solid var(--fl-line); font-weight: 600; }
.fl-seed { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--fl-soft); color: var(--fl-muted); font-size: 0.78rem; font-weight: 800; }
.fl-tag { padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--fl-soft); color: var(--fl-muted); font-size: 0.74rem; font-weight: 800; }

/* bottom navigation */
.fl-nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; max-width: 46rem; margin: 0 auto; display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--fl-card) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--fl-line); }
.fl-nav-btn { display: grid; justify-items: center; gap: 0.15rem; padding: 0.45rem 0.2rem; border: 0; border-radius: 0.9rem; background: transparent; color: var(--fl-muted); font-size: 0.7rem; font-weight: 700; cursor: pointer; transition: color 0.2s, background 0.2s, transform 0.15s; }
.fl-nav-btn:active { transform: scale(0.94); }
.fl-nav-btn.on { color: var(--fl-ink); background: color-mix(in srgb, var(--fl-lime-bright) 40%, transparent); }
.fl-nav-btn.on svg { color: var(--fl-lime); filter: drop-shadow(0 0 0.35rem color-mix(in srgb, var(--fl-lime) 60%, transparent)); }

/* category picker sheet */
.fl-sheet-backdrop { position: fixed; z-index: 50; inset: 0; background: rgba(5, 12, 8, 0.55); display: flex; align-items: flex-end; justify-content: center; animation: fl-fade 0.2s both; }
@keyframes fl-fade { from { opacity: 0; } to { opacity: 1; } }
.fl-sheet { width: 100%; max-width: 46rem; max-height: 78dvh; overflow-y: auto; padding: 0.6rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 1.6rem 1.6rem 0 0; background: var(--fl-bg); color: var(--fl-ink); display: grid; gap: 0.7rem; align-content: start; animation: fl-sheet 0.3s cubic-bezier(.2,.8,.2,1) both; }
@keyframes fl-sheet { from { transform: translateY(100%); } to { transform: none; } }
.fl-sheet-grip { width: 2.6rem; height: 0.3rem; border-radius: 999px; background: var(--fl-line); justify-self: center; }
.fl-sheet h2 { font-size: 1.2rem; font-weight: 800; } .fl-sheet h2 small { color: var(--fl-muted); margin-left: 0.3rem; }
.fl-sheet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.fl-sheet li button { width: 100%; display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.9rem; border-radius: 1rem; border: 1px solid var(--fl-line); background: var(--fl-card); color: inherit; font-size: 0.98rem; text-align: left; cursor: pointer; }
.fl-sheet li button b { flex: 1; } .fl-sheet li button span { color: var(--fl-muted); font-size: 0.8rem; font-weight: 700; }
.fl-sheet li button.on { border-color: var(--fl-lime); background: color-mix(in srgb, var(--fl-lime) 18%, var(--fl-card)); }
.fl-sheet li i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--fl-line); } .fl-sheet li i.status-inprogress { background: var(--fl-live); } .fl-sheet li i.status-completed { background: var(--fl-lime); }

/* wider screens: keep it a comfortable single column, a little more breathing room */
@media (min-width: 720px) { .fl { border-left: 1px solid var(--fl-line); border-right: 1px solid var(--fl-line); } .fl-cards { grid-template-columns: 1fr 1fr; } .fl-cards.tight { grid-template-columns: 1fr; } .fl-title h1 { font-size: 1.9rem; } }
@media (prefers-reduced-motion: reduce) { .fl-main, .fl-sheet, .fl-sheet-backdrop, .fl-empty-ic, .fl-live i, .fl-dot, .fl-card.live > header em { animation: none; } }
.fl-where { color: var(--fl-muted); font-size: 0.84rem; font-weight: 600; margin-top: -0.25rem; }
.fl-card.live > header { flex-wrap: nowrap; align-items: center; justify-content: space-between; }
.fl-card.live > header em { margin-left: 0; }

/* ===== Live display: tappable bracket rows on the first slide (touch screens jump straight to a bracket) ===== */
.tv-cat-li { display: contents; }
.tv-cat.tap { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; position: relative; transition: transform 0.15s, border-color 0.2s, background 0.2s; }
.tv-cat.tap::after { content: "›"; position: absolute; right: 0.9rem; top: 0.55rem; font-size: 1.6em; line-height: 1; color: var(--tv-lime); opacity: 0.8; }
.tv-cat.tap:disabled { cursor: default; opacity: 0.75; } .tv-cat.tap:disabled::after { content: none; }
.tv-cat.tap:not(:disabled):hover { background: var(--tv-card-2); border-color: rgba(198,241,53,0.6); }
.tv-cat.tap:not(:disabled):active { transform: scale(0.98); }
.tv-cat.tap.status-completed b::after { content: " ✓"; color: var(--tv-lime); }
.tv-cat.tap.status-inprogress { border-color: rgba(198,241,53,0.5); }
.tv[data-kind="overview"] .tv-cat.tap { cursor: pointer; }

/* The global a:visited rule turns link text dark once a link has been opened - keep the Show on TV buttons white on their dark background. */

/* ===== Tournament page: the "View live" link on each category card - reads as a link (accent text, underline that grows, arrow chip), not a button ===== */
.tsp-cat-actions a.tsp-live-link, .tsp-cat-actions a.tsp-live-link:visited { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.15rem 0; color: #2f6b12; font-weight: 800; font-size: 0.92rem; letter-spacing: 0.005em; text-decoration: none; }
.tsp-live-text { background: linear-gradient(90deg, #8fc41a, #c6f135) left bottom / 100% 3px no-repeat; padding-bottom: 0.12rem; transition: background-size 0.25s ease, color 0.2s ease; }
.tsp-live-arrow { display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: #c6f135; color: #10200a; box-shadow: 0 0 0 0 rgba(143, 196, 26, 0.45); transition: transform 0.2s ease, box-shadow 0.25s ease; }
.tsp-live-link:hover .tsp-live-text, .tsp-live-link:focus-visible .tsp-live-text { background-size: 100% 100%; color: #10200a; }
.tsp-live-link:hover .tsp-live-arrow, .tsp-live-link:focus-visible .tsp-live-arrow { transform: translateX(4px); box-shadow: 0 0 0 5px rgba(198, 241, 53, 0.35); }
.tsp-live-link:focus-visible { outline: 3px solid #c6f135; outline-offset: 4px; border-radius: 6px; }
.tsp-live-link.is-live .tsp-live-text::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.45rem; border-radius: 50%; background: #e5484d; vertical-align: 0.05em; animation: tsp-live-pulse 1.6s infinite; }
@keyframes tsp-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.6); } 70%, 100% { box-shadow: 0 0 0 7px rgba(229, 72, 77, 0); } }
@media (prefers-reduced-motion: reduce) { .tsp-live-link.is-live .tsp-live-text::before { animation: none; } .tsp-live-arrow, .tsp-live-text { transition: none; } }

/* ===== Live display: a small "scan to follow" QR code in the header of every slide except the big QR one ===== */
.tv-head-right { justify-self: end; display: flex; align-items: center; gap: 1rem; }
.tv-miniqr { display: flex; align-items: center; gap: 0.7rem; animation: tv-in 0.6s ease both; }
.tv-miniqr > span { text-align: right; color: var(--tv-muted); font-weight: 700; font-size: 0.7em; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.35; }
.tv-miniqr-box { width: 5.6em; height: 5.6em; border-radius: 0.6em; background: #fff; box-shadow: 0 0 0 0.16em var(--tv-lime), 0 0 1.4em -0.3em rgba(198, 241, 53, 0.55); overflow: hidden; display: grid; place-items: center; }
.tv-miniqr-box img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) { .tv-miniqr { display: none; } }

/* ===== Open Play player pages: "my game" (SessionPlayer.razor) and the night recap (SessionRecap.razor) - phone first, light and dark ===== */
.pm { --pm-bg: #f6f3ea; --pm-card: #fffdf8; --pm-ink: #17201b; --pm-muted: #66746b; --pm-line: #e6e1d3; --pm-lime: #c6f135; --pm-lime-deep: #3d6a12; --pm-live: #e5484d; --pm-gold: #f5b938;
    min-height: 100vh; min-height: 100dvh; box-sizing: border-box; background: var(--pm-bg); color: var(--pm-ink); padding: 14px 16px calc(36px + env(safe-area-inset-bottom)); font-size: 16px; line-height: 1.35; -webkit-tap-highlight-color: transparent; }
@media (prefers-color-scheme: dark) { .pm { --pm-bg: #07130d; --pm-card: #0f2018; --pm-ink: #eef6ea; --pm-muted: #9db4a6; --pm-line: rgba(255, 255, 255, 0.12); --pm-lime-deep: #c6f135; } }
.pm *, .pm *::before, .pm *::after { box-sizing: border-box; }
.pm > * { max-width: 560px; margin-left: auto; margin-right: auto; }
.pm h1, .pm h2, .pm p { margin: 0; }
.pm a { color: inherit; text-decoration: none; }
.pm-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.pm-brand { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--pm-muted); }
.pm-brand b { color: var(--pm-lime-deep); font-weight: 800; }
.pm-pill { padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; background: var(--pm-line); color: var(--pm-muted); }
.pm-pill.live { background: rgba(229, 72, 77, 0.14); color: var(--pm-live); }
.pm-title { margin-top: 0.7rem; font-family: "Fraunces", Georgia, serif; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; overflow-wrap: anywhere; }
.pm-card { margin-top: 0.9rem; padding: 1.1rem 1.1rem 1.2rem; border-radius: 22px; background: var(--pm-card); border: 1px solid var(--pm-line); box-shadow: 0 1px 2px rgba(20, 30, 20, 0.04), 0 14px 30px -22px rgba(20, 30, 20, 0.35); }
.pm-card h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.5rem; }
.pm-muted { color: var(--pm-muted); font-size: 0.95rem; }
.pm-fine { color: var(--pm-muted); font-size: 0.8rem; margin-top: 0.6rem; }
.pm-error { margin-top: 0.8rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: rgba(229, 72, 77, 0.12); color: var(--pm-live); font-weight: 600; font-size: 0.92rem; }

.pm-search { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.9rem; padding: 0 1rem; height: 3.3rem; border-radius: 999px; background: var(--pm-bg); border: 2px solid var(--pm-line); color: var(--pm-muted); }
.pm-search:focus-within { border-color: var(--pm-lime-deep); }
.pm-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1.05rem; color: var(--pm-ink); }
.pm-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.pm-list button { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; min-height: 3.2rem; padding: 0.6rem 1rem; border-radius: 16px; border: 1px solid var(--pm-line); background: var(--pm-bg); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pm-list button:active { transform: scale(0.985); }
.pm-chip { flex: none; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; background: var(--pm-line); color: var(--pm-muted); }
.pm-chip.live { background: var(--pm-lime); color: #14230a; } .pm-chip.wait { background: rgba(245, 185, 56, 0.25); color: #8a5a00; }

.pm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 3rem; padding: 0 1.2rem; border-radius: 999px; border: 0; background: var(--pm-lime); color: #14230a; font: inherit; font-weight: 800; cursor: pointer; text-align: center; }
.pm-btn:disabled { opacity: 0.6; cursor: default; }
.pm-btn.ghost { background: transparent; border: 1.5px solid var(--pm-line); color: var(--pm-ink); }
.pm-btn.danger { background: var(--pm-live); color: #fff; }
.pm-pick .pm-btn { margin-top: 0.9rem; width: 100%; }
.pm-link { border: 0; background: none; padding: 0.3rem 0; color: var(--pm-muted); font: inherit; font-size: 0.9rem; text-decoration: underline; cursor: pointer; }
.pm-link.danger { color: var(--pm-live); }

.pm-me { margin-top: 0.7rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; border-radius: 18px; background: var(--pm-card); border: 1px solid var(--pm-line); }
.pm-me small { display: block; color: var(--pm-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pm-me b { font-size: 1.25rem; font-weight: 800; overflow-wrap: anywhere; }

.pm-status { margin-top: 0.9rem; padding: 1.3rem 1.2rem 1.4rem; border-radius: 26px; background: var(--pm-card); border: 1px solid var(--pm-line); text-align: center; display: grid; gap: 0.55rem; justify-items: center; }
.pm-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pm-muted); }
.pm-eyebrow i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--pm-live); animation: pm-pulse 1.6s infinite; }
.pm-big { font-family: "Fraunces", Georgia, serif; font-size: 2.4rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.01em; }
.pm-big small { font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--pm-muted); letter-spacing: 0; }
.pm-status p { color: var(--pm-muted); }
.pm-status.playing { background: linear-gradient(160deg, #d8ff55, #a9dc1d); border-color: transparent; color: #12210a; box-shadow: 0 20px 40px -22px rgba(143, 196, 26, 0.9); animation: pm-pop 0.5s cubic-bezier(.2, .9, .3, 1.3) both; }
.pm-status.playing .pm-eyebrow, .pm-status.playing p { color: rgba(18, 33, 10, 0.75); }
.pm-timer { font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 800; display: grid; }
.pm-timer small { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; } .pm-timer.paused { opacity: 0.6; }
.pm-teams { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; margin-top: 0.4rem; padding: 0.8rem; border-radius: 18px; background: rgba(255, 255, 255, 0.45); }
.pm-teams small { display: block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }
.pm-teams span { font-weight: 800; overflow-wrap: anywhere; } .pm-teams em { font-style: normal; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; opacity: 0.6; }
.pm-status.next { background: linear-gradient(160deg, #ffe38a, #ffc43d); border-color: transparent; color: #3a2700; animation: pm-pulse-card 1.8s ease-in-out infinite; }
.pm-status.next .pm-eyebrow, .pm-status.next p { color: rgba(58, 39, 0, 0.8); }
.pm-status.waiting .pm-wait { font-size: 1.05rem; } .pm-status.waiting .pm-wait b { color: var(--pm-lime-deep); font-size: 1.25rem; }
.pm-dots { display: flex; gap: 0.35rem; flex-wrap: wrap; justify-content: center; margin-top: 0.3rem; }
.pm-dots i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--pm-line); } .pm-dots i.me { background: var(--pm-lime); box-shadow: 0 0 0 3px rgba(198, 241, 53, 0.35); }
.pm-status .pm-btn { margin-top: 0.4rem; }

.pm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.pm-tiles div { padding: 0.8rem 0.4rem; border-radius: 16px; background: var(--pm-bg); text-align: center; }
.pm-tiles b { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1; } .pm-tiles b span { opacity: 0.4; margin: 0 0.1em; }
.pm-tiles small { display: block; margin-top: 0.3rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pm-muted); }
.pm-form { display: flex; gap: 0.4rem; margin-top: 0.8rem; }
.pm-form i { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 0.78rem; font-weight: 800; background: var(--pm-line); color: var(--pm-muted); }
.pm-form i.w { background: var(--pm-lime); color: #14230a; } .pm-form i.l { background: rgba(229, 72, 77, 0.18); color: var(--pm-live); }
.pm-games { list-style: none; margin: 0.2rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.pm-games li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: center; padding: 0.65rem 0.8rem; border-radius: 16px; background: var(--pm-bg); border-left: 4px solid var(--pm-line); }
.pm-games li.won { border-left-color: var(--pm-lime-deep); } .pm-games li.lost { border-left-color: var(--pm-live); }
.pm-res { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 0.82rem; background: var(--pm-line); }
.pm-games li.won .pm-res { background: var(--pm-lime); color: #14230a; } .pm-games li.lost .pm-res { background: rgba(229, 72, 77, 0.18); color: var(--pm-live); }
.pm-games b { display: block; font-size: 0.95rem; overflow-wrap: anywhere; } .pm-games small { display: block; color: var(--pm-muted); font-size: 0.8rem; overflow-wrap: anywhere; }
.pm-games strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.pm-actions { margin-top: 1rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.pm-actions .pm-btn { flex: 1 1 8rem; }
.pm-foot { margin-top: 1rem; display: grid; gap: 0.7rem; justify-items: start; }
.pm-switch { display: flex; align-items: center; gap: 0.6rem; font-size: 0.92rem; font-weight: 600; cursor: pointer; }
.pm-switch input { width: 1.2rem; height: 1.2rem; accent-color: var(--pm-lime-deep); }
.pm-confirm { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .pm-confirm .pm-btn { min-height: 2.6rem; }

.pm-tabs { margin-top: 0.9rem; display: grid; grid-template-columns: 1fr 1fr; padding: 0.25rem; border-radius: 999px; background: var(--pm-line); }
.pm-tabs button { min-height: 2.6rem; border: 0; border-radius: 999px; background: transparent; color: var(--pm-muted); font: inherit; font-weight: 800; cursor: pointer; }
.pm-tabs button.on { background: var(--pm-card); color: var(--pm-ink); box-shadow: 0 2px 8px rgba(20, 30, 20, 0.12); }
.pm-recap-fig { margin: 0.9rem auto 0; border-radius: 22px; overflow: hidden; background: #0b2217; box-shadow: 0 24px 48px -28px rgba(0, 0, 0, 0.7); aspect-ratio: 1080 / 1350; }
.pm-recap-fig img { display: block; width: 100%; height: auto; }
.pm-share { margin-top: 0.9rem; display: flex; gap: 0.6rem; flex-wrap: wrap; } .pm-share .pm-btn { flex: 1 1 9rem; }
.pm-podium { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pm-podium li { display: grid; grid-template-columns: auto 1fr auto; gap: 0.8rem; align-items: center; padding: 0.6rem 0.8rem; border-radius: 16px; background: var(--pm-bg); }
.pm-podium li.r1 { background: rgba(245, 185, 56, 0.2); }
.pm-rk { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 50%; font-weight: 800; background: var(--pm-line); }
.pm-podium li.r1 .pm-rk { background: var(--pm-gold); color: #3a2700; } .pm-podium li.r2 .pm-rk { background: #d8e0e6; color: #1b2a33; } .pm-podium li.r3 .pm-rk { background: #e0a371; color: #3a1d06; }
.pm-podium em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.pm-facts li { display: grid; padding: 0.6rem 0.8rem; border-radius: 16px; background: var(--pm-bg); }
.pm-facts small { color: var(--pm-muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .pm-facts b { font-size: 1.05rem; overflow-wrap: anywhere; } .pm-facts span { color: var(--pm-lime-deep); font-weight: 700; font-size: 0.9rem; }

@keyframes pm-pulse { 0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0.6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(229, 72, 77, 0); } }
@keyframes pm-pulse-card { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes pm-pop { from { transform: scale(0.94); opacity: 0.4; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pm-eyebrow i, .pm-status.next, .pm-status.playing { animation: none; } }

/* ===== Open Play partners (SessionPlayer.razor): the request banner and the pair card ===== */
.pm-ask { margin-top: 0.9rem; padding: 1rem 1.1rem; border-radius: 22px; background: linear-gradient(160deg, #ffe38a, #ffc43d); color: #3a2700; display: grid; gap: 0.7rem; animation: pm-pop 0.5s cubic-bezier(.2, .9, .3, 1.3) both; }
.pm-ask small { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.75; }
.pm-ask b { display: block; font-size: 1.1rem; font-weight: 800; overflow-wrap: anywhere; } .pm-ask span { font-size: 0.9rem; opacity: 0.8; }
.pm-ask-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; } .pm-ask-btns .pm-btn { flex: 1 1 7rem; background: #17201b; color: #fff; } .pm-ask-btns .pm-btn.ghost { background: transparent; color: #3a2700; border-color: rgba(58, 39, 0, 0.35); }
.pm-pair { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem 0.9rem; border-radius: 18px; background: rgba(198, 241, 53, 0.22); border: 1px solid rgba(143, 196, 26, 0.5); }
.pm-pair.pending { background: rgba(245, 185, 56, 0.16); border-color: rgba(245, 185, 56, 0.5); }
.pm-pair-ic { font-size: 1.7rem; line-height: 1; } .pm-pair b { display: block; font-size: 1.1rem; overflow-wrap: anywhere; } .pm-pair small { display: block; color: var(--pm-muted); font-size: 0.82rem; }
.pm-partner .pm-link { margin-top: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .pm-ask { animation: none; } }

/* The player page asks for one tap to switch the alert sound on (browsers keep audio muted until a tap). */
.pm-sound { margin-top: 0.8rem; width: 100%; display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1rem; border-radius: 18px; border: 1.5px dashed var(--pm-lime-deep); background: rgba(198, 241, 53, 0.2); color: var(--pm-ink); font: inherit; text-align: left; cursor: pointer; }
.pm-sound > span:first-child { font-size: 1.6rem; line-height: 1; animation: pm-ring 1.8s ease-in-out infinite; transform-origin: 50% 0; }
.pm-sound b { display: block; } .pm-sound small { display: block; color: var(--pm-muted); font-size: 0.8rem; }
@keyframes pm-ring { 0%, 55%, 100% { transform: rotate(0); } 10% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); } 30% { transform: rotate(8deg); } 40% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .pm-sound > span:first-child { animation: none; } }


/* Live display: matches the organizer has called to a court ("go") and queued matches */
.tv-called-h { margin-top: 0.4rem; color: #ffd45c; }
.tv-card.called { border-color: rgba(255, 212, 92, 0.75); background: linear-gradient(160deg, rgba(255, 212, 92, 0.22), rgba(255, 255, 255, 0.05)); box-shadow: 0 0 2.4rem -0.8rem rgba(255, 212, 92, 0.7); }
.tv-card.called > header em { background: #ffc43d; color: #3a2700; }
.tv-queue li.queued { border-color: rgba(198, 241, 53, 0.45); }

/* Phone follow page: matches called to a court and queued matches */
.fl-h.called { color: #8a5a00; }
.fl-card.called { border-color: #f5b938; background: linear-gradient(160deg, #ffe38a, #ffc43d); color: #3a2700; }
.fl-card.called > header em { font-style: normal; font-weight: 800; letter-spacing: 0.12em; font-size: 0.7em; padding: 0.2rem 0.55rem; border-radius: 999px; background: #3a2700; color: #ffe38a; }
.fl-card.called .fl-where, .fl-card.called .fl-vs i { color: rgba(58, 39, 0, 0.75); }
.fl-queue li.queued .fl-no { background: #c6f135; color: #14230a; }

/* Phone follow page: follow a team to be alerted when the organizer calls it */
.fl-pin { flex: none; align-self: center; margin-left: 0.5rem; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1.5px solid var(--fl-line); background: var(--fl-soft); color: var(--fl-ink); font: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.fl-pin.on { background: var(--fl-lime-bright); border-color: transparent; color: var(--fl-on-lime); }
.fl-banner.called { background: linear-gradient(160deg, #ffe38a, #ffc43d); color: #3a2700; font-weight: 800; animation: fl-nudge 1.8s ease-in-out infinite; }
@keyframes fl-nudge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
.fl-mine { display: grid; gap: 0.6rem; margin-bottom: 0.4rem; }
.fl-mine-card { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.8rem 1rem; border-radius: 18px; background: var(--fl-card); border: 1px solid var(--fl-line); }
.fl-mine-card b { display: block; overflow-wrap: anywhere; } .fl-mine-card span { display: block; color: var(--fl-muted); font-size: 0.8rem; } .fl-mine-card p { margin: 0.25rem 0 0; font-weight: 800; }
.fl-mine-card.playing { background: linear-gradient(160deg, #d8ff55, #a9dc1d); border-color: transparent; color: #12210a; } .fl-mine-card.playing span { color: rgba(18, 33, 10, 0.7); }
.fl-mine-card.called { background: linear-gradient(160deg, #ffe38a, #ffc43d); border-color: transparent; color: #3a2700; } .fl-mine-card.called span { color: rgba(58, 39, 0, 0.7); }
.fl-mine-card.ondeck { border-color: var(--fl-lime); }
.fl-sound { display: flex; align-items: center; gap: 0.8rem; width: 100%; padding: 0.8rem 1rem; border-radius: 18px; border: 1.5px dashed var(--fl-lime); background: rgba(198, 241, 53, 0.18); color: var(--fl-ink); font: inherit; text-align: left; cursor: pointer; }
.fl-sound > span:first-child { font-size: 1.5rem; } .fl-sound b { display: block; } .fl-sound small { display: block; color: var(--fl-muted); font-size: 0.8rem; }
@media (prefers-reduced-motion: reduce) { .fl-banner.called { animation: none; } }

/* Category cards on the tournament page: Show on TV, View live and the QR code */
.tsp-cat-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.1rem; }
.tsp-qr-btn { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; color: #2f6b12; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.15s; }
.tsp-qr-btn:hover, .tsp-qr-btn:focus-visible { background: #c6f135; border-color: transparent; color: #10200a; transform: translateY(-1px); }
.tsp-qr-btn:focus-visible { outline: 3px solid #c6f135; outline-offset: 2px; }
.tsp-cat-actions { gap: 0.4rem 0.8rem; justify-content: space-between; }
.tsp-cat-actions a.tsp-live-link, .tsp-cat-actions a.tsp-live-link:visited { gap: 0.4rem; font-size: 0.85rem; }
.tsp-cat-actions .tsp-live-arrow { width: 1.4rem; height: 1.4rem; }
.tsp-qr-btn { width: 1.9rem; height: 1.9rem; }

/* "Your court payments go straight to you..." sits right under Create your account in the hero, a little larger */
.co-free.in-hero { justify-content: flex-start; margin: 0.9rem 0 1rem; }
.co-free.in-hero span { font-size: 1rem; padding: 0.65rem 1.25rem; line-height: 1.3; }
.co-free.in-hero svg { flex: none; width: 19px; height: 19px; }
@media (max-width: 520px) { .co-free.in-hero span { font-size: 0.95rem; border-radius: 18px; padding: 0.65rem 1rem; } }

/* ===== "Next" button on the organizer's match cards and the Up next panel on the category page ===== */
.match-next-btn { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.25rem; padding: 0 0.5rem 0 0.4rem; border-radius: 999px; border: 1px solid #c3cfc7; background: transparent; color: #5f6e64; font: inherit; font-size: 0.66rem; font-weight: 800; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s; }
.match-next-btn svg { width: 10px; height: 10px; }
.match-next-btn:hover { border-color: #3d6a12; color: #3d6a12; background: rgba(198, 241, 53, 0.25); }
.match-next-btn.on { background: #c6f135; border-color: #8fc41a; color: #14230a; }

/* The organizer's "Live page" popup: Show on TV or the QR for players and spectators */
.live-opts { display: grid; gap: 0.6rem; margin-top: 0.6rem; }
.live-opt { display: flex; align-items: center; gap: 0.9rem; width: 100%; padding: 0.85rem 1rem; border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface, #fffdf8); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: transform 0.15s, border-color 0.2s, background 0.2s; }
.live-opt:hover, .live-opt:focus-visible { border-color: #8fc41a; background: rgba(198, 241, 53, 0.14); transform: translateY(-1px); }
.live-opt-ic { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: #17201b; color: #c6f135; font-size: 1.2rem; }
.live-opt b { display: block; } .live-opt small { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.3; margin-top: 0.1rem; }

/* Next Matches page: one block per court */
.next-court { margin-bottom: 1rem; border-left: 5px solid var(--line); }
.next-court.playing { border-left-color: #8fc41a; } .next-court.called { border-left-color: #f5b938; }
.next-court-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.next-court-head h2 { margin: 0; }
.next-court-tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.2rem 0.7rem; border-radius: 999px; background: var(--line); color: var(--muted); }
.next-court.playing .next-court-tag { background: #c6f135; color: #14230a; } .next-court.called .next-court-tag { background: #ffc43d; color: #3a2700; }
.next-row { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.5rem; }
.next-label { flex: none; width: 3.2rem; text-align: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.3rem 0.4rem; border-radius: 999px; background: var(--line); color: var(--muted); }
.next-label.live { background: #e5484d; color: #fff; } .next-label.go { background: #ffc43d; color: #3a2700; }
.next-card { flex: 1; min-width: 0; }

/* ===== Next Match: the right-hand column on the category page, the court picker and the courts editor ===== */
.nm-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: start; }
.nm-main { min-width: 0; }
.nm-wrap { position: sticky; top: 4.6rem; }
.nm-col.open .nm-body { overflow-x: hidden; width: 300px; max-height: calc(100vh - 6rem); overflow-y: auto; padding: 0.8rem 0.9rem 1rem; border-radius: 18px; background: var(--surface, #fffdf8); border: 1px solid var(--line); border-top: 4px solid #c6f135; box-shadow: 0 10px 28px -20px rgba(24, 28, 26, 0.5); display: grid; gap: 0.7rem; align-content: start; }
.nm-tab { display: grid; justify-items: center; gap: 0.5rem; padding: 0.8rem 0.45rem; border-radius: 14px; border: 1px solid var(--line); border-top: 4px solid #c6f135; background: var(--surface, #fffdf8); color: inherit; font: inherit; cursor: pointer; }
.nm-tab-text { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 800; letter-spacing: 0.04em; }
.nm-tab-n, .nm-n { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.35rem; border-radius: 999px; background: #c6f135; color: #14230a; font-size: 0.75rem; font-weight: 800; }
.nm-head { display: flex; align-items: center; gap: 0.3rem; }
.nm-head h2 { margin: 0 auto 0 0; font-size: 1.05rem; display: flex; align-items: center; gap: 0.4rem; }
.nm-icon { display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 9px; border: 1px solid var(--line); background: var(--surface, #fff); color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.nm-icon:disabled { opacity: 0.35; cursor: default; }
.nm-icon:not(:disabled):hover { border-color: var(--ink, #17201b); }
.nm-notes { position: relative; padding: 0.6rem 1.8rem 0.6rem 0.7rem; border-radius: 12px; background: rgba(198, 241, 53, 0.18); font-size: 0.8rem; line-height: 1.35; }
.nm-notes ol { margin: 0.3rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.15rem; }
.nm-notes b { font-weight: 800; }
.nm-x { position: absolute; top: 0.25rem; right: 0.3rem; border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 0.8rem; }
.nm-error { margin: 0; font-size: 0.82rem; padding: 0.5rem 0.7rem; }
.nm-empty { padding: 0.9rem; border-radius: 14px; background: var(--bg, #f6f3ea); text-align: center; display: grid; gap: 0.4rem; justify-items: center; }
.nm-empty p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.nm-court { padding: 0.6rem 0.7rem 0.7rem; border-radius: 14px; border: 1.5px dashed var(--line); background: var(--bg, #f6f3ea); display: grid; gap: 0.4rem; }
.nm-court > header { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.nm-court > header b { font-size: 0.95rem; }
.nm-court > header span { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--line); color: var(--muted); }
.nm-court.playing { border: 1.5px solid #8fc41a; background: rgba(198, 241, 53, 0.14); }
.nm-court.playing > header span { background: #c6f135; color: #14230a; }
.nm-court.called { border: 1.5px solid #f5b938; background: rgba(255, 227, 138, 0.3); }
.nm-court.called > header span { background: #ffc43d; color: #3a2700; }
.nm-now { font-size: 0.8rem; font-weight: 700; color: #3d6a12; overflow-wrap: anywhere; }
.nm-none { margin: 0; font-size: 0.8rem; color: var(--muted); }
.nm-lane { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.nm-lane li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.45rem 0.5rem; border-radius: 11px; background: var(--surface, #fff); border: 1px solid var(--line); }
.nm-lane li.go { border-color: #f5b938; }
.nm-pos { flex: none; display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #c6f135; color: #14230a; font-size: 0.78rem; font-weight: 800; }
.nm-match { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.nm-teams { font-size: 0.82rem; font-weight: 700; overflow-wrap: anywhere; line-height: 1.25; }
.nm-match small { color: var(--muted); font-size: 0.72rem; }
/* "Showing on the TV now": the read-only list of what the TV and live page list while matches follow the match number. */
.nm-preview { margin-top: 0.7rem; display: grid; gap: 0.4rem; }
.nm-preview header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.8rem; }
.nm-preview header span { padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--page-bg); color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.nm-preview .nm-none { margin: 0; color: var(--muted); font-size: 0.8rem; }
.nm-warn { display: block; margin: 0.1rem 0 0; font-size: 0.72rem; font-weight: 700; color: #b3261e; }
.nm-acts { flex: none; display: grid; gap: 0.2rem; }
.nm-acts .nm-icon { width: 1.55rem; height: 1.55rem; border-radius: 8px; font-size: 0.8rem; }
.nm-chips { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.25rem; }
.nm-chip { padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface, #fff); font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; }
.nm-chip:hover:not(:disabled) { background: #c6f135; border-color: transparent; }
.nm-fab { display: none; }
.nm-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; border-left: 5px solid #f5b938; background: linear-gradient(160deg, rgba(255, 227, 138, 0.35), transparent); }
.nm-banner b { display: block; }
.nm-banner p { margin: 0.2rem 0 0; }
.nm-banner-act { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.ce-stepper-inline, .ce-stepper > div { display: inline-flex; align-items: center; gap: 0.6rem; }
.ce-stepper-inline b, .ce-stepper b { min-width: 1.6rem; text-align: center; font-size: 1.2rem; }
.ce-step { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface, #fff); font: inherit; font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.ce-step:disabled { opacity: 0.35; cursor: default; }
.ce-stepper { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.7rem 0.9rem; border-radius: 14px; background: var(--bg, #f6f3ea); margin: 0.6rem 0; font-weight: 700; }
.ce-list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.ce-list li { display: flex; align-items: center; gap: 0.6rem; }
.ce-list input { flex: 1; min-width: 0; padding: 0.45rem 0.7rem; border-radius: 10px; border: 1px solid var(--line); font: inherit; }
.ce-list small { color: var(--muted); white-space: nowrap; font-size: 0.78rem; }
.ce-move { margin-top: 0.7rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: rgba(255, 227, 138, 0.3); display: grid; gap: 0.5rem; }
.ce-move select { margin-left: 0.4rem; }
.np-teams { margin: 0.2rem 0 0.4rem; overflow-wrap: anywhere; }
.np-courts { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.5rem; }
.np-court { display: grid; gap: 0.1rem; padding: 0.7rem 0.8rem; border-radius: 14px; border: 1.5px solid var(--line); background: var(--surface, #fff); font: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.15s; }
.np-court:hover:not(:disabled), .np-court.on { border-color: #8fc41a; background: rgba(198, 241, 53, 0.2); }
.np-court:hover:not(:disabled) { transform: translateY(-1px); }
.np-court small { color: var(--muted); font-size: 0.75rem; }
.np-remove { margin-top: 0.8rem; color: #b3261e; }
@media (max-width: 1000px) {
    .nm-layout { grid-template-columns: minmax(0, 1fr); }
    .nm-wrap { display: none; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: auto; padding: 0.5rem; background: rgba(0, 0, 0, 0.35); }
    .nm-wrap.sheet { display: block; }
    .nm-col.open .nm-body { width: auto; max-height: 72vh; border-radius: 18px 18px 0 0; }
    .nm-fab { display: inline-flex; align-items: center; gap: 0.5rem; position: fixed; z-index: 61; right: 1rem; bottom: 1rem; padding: 0.7rem 1.1rem; border-radius: 999px; border: 0; background: #17201b; color: #fff; font: inherit; font-weight: 800; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5); cursor: pointer; }
    .nm-fab span { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; border-radius: 999px; background: #c6f135; color: #14230a; font-size: 0.78rem; }
}
.match-next-btn { display: inline-flex; align-items: center; gap: 0.25rem; height: 1.25rem; padding: 0 0.55rem 0 0.4rem; border-radius: 999px; border: 1px solid #c3cfc7; background: transparent; color: #5f6e64; font: inherit; font-size: 0.66rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.tv-queue-wide { grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr)); gap: 0.7rem 1rem; }
@media (max-width: 760px), (max-aspect-ratio: 1/1) { .tv-queue-wide { grid-template-columns: 1fr; } }
.nm-optional { display: grid; gap: 0.4rem; padding: 0.45rem 0.6rem; border-radius: 0.6rem; background: var(--bg-soft, rgba(128,128,128,0.1)); border-left: 3px solid var(--accent, #9dc22b); color: var(--muted); font-size: 0.78rem; line-height: 1.35; }
.nm-optional b { color: inherit; font-weight: 800; }
.nm-optional p { margin: 0; }.nm-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--ink, inherit); font: inherit; font-size: 0.78rem; font-weight: 700; text-align: left; text-decoration: underline; cursor: pointer; }.nm-link.on { text-decoration: none; } .nm-link.on u { font-weight: 800; }.nm-confirm { display: grid; gap: 0.45rem; padding: 0.5rem 0.6rem; border-radius: 0.6rem; background: var(--surface, #fff); border: 1px solid var(--line); }.nm-confirm-acts { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.nm-tip-link { justify-self: start; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.78rem; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Scorekeepers popup: the close button sits alone in the top-right corner, apart from the On/Off switch, so the two are not confused */
.sk-modal { position: relative; }
.sk-embedded .panel-title { padding-right: 3.4rem; }
.sk-embedded .sk-close { position: absolute; top: 0.9rem; right: 0.9rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--bg, #f6f3ea); border: 1px solid var(--line); font-size: 1rem; }
.sk-embedded .sk-close:hover { background: var(--ink, #17201b); color: #fff; border-color: transparent; }
.sk-embedded .sk-enable { margin-left: auto; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--bg, #f6f3ea); }

/* TV: a slide taller than the screen grows downward (never up under the header), and the Next matches list uses one line per match so ten of them fit */
.tv-slide { justify-content: safe center; }
@media (min-width: 761px) and (min-aspect-ratio: 1/1) { .tv-stage { overflow: hidden; } }
.tv-queue-wide li { padding: 0.55rem 0.9rem; }
.tv-queue-wide .tv-vs.small { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.7rem; font-size: 1.15em; }
.tv-queue-wide .tv-vs.small i { font-size: 0.55em; }
.tv-queue-wide .tv-no { width: 2.2rem; height: 2.2rem; font-size: 1em; }

/* Next Match column, more compact: the move/remove buttons sit in a row, rows and courts are tighter, so many matches need less height */
.nm-col.open .nm-body { gap: 0.5rem; padding: 0.7rem 0.75rem 0.8rem; }
.nm-court { padding: 0.4rem 0.5rem 0.5rem; gap: 0.25rem; border-radius: 12px; }
.nm-court > header b { font-size: 0.88rem; }
.nm-none { font-size: 0.74rem; }
.nm-lane { gap: 0.25rem; }
.nm-lane li { padding: 0.3rem 0.4rem; gap: 0.4rem; align-items: center; border-radius: 9px; flex-wrap: wrap; }
.nm-pos { width: 1.25rem; height: 1.25rem; font-size: 0.7rem; }
.nm-teams { font-size: 0.78rem; line-height: 1.2; }
.nm-match small { font-size: 0.68rem; line-height: 1.15; }
.nm-acts { display: flex; gap: 0.15rem; }
.nm-acts .nm-icon { width: 1.35rem; height: 1.35rem; border-radius: 7px; font-size: 0.72rem; }
.nm-warn { font-size: 0.68rem; line-height: 1.15; }
.nm-chips { margin-top: 0.15rem; }
.nm-now { font-size: 0.74rem; }

/* ===== Next matches board (TournamentNext.razor): a compact, TV-style screen with one card per court ===== */
.nx { --nx-bg: #06120d; --nx-card: rgba(255, 255, 255, 0.07); --nx-line: rgba(255, 255, 255, 0.13); --nx-text: #f3f8ef; --nx-muted: #9db4a6; --nx-lime: #c6f135; --nx-gold: #ffd45c; --nx-live: #ff5252;
    min-height: 100vh; min-height: 100dvh; box-sizing: border-box; padding: 0.9rem 1rem 1.4rem; color: var(--nx-text); background: radial-gradient(120% 80% at 85% -10%, rgba(198, 241, 53, 0.16), transparent 55%), radial-gradient(90% 70% at 0% 110%, rgba(40, 170, 110, 0.18), transparent 60%), var(--nx-bg); line-height: 1.25; }
.nx *, .nx *::before, .nx *::after { box-sizing: border-box; }
.nx h1, .nx h2, .nx p { margin: 0; }
.nx a { color: inherit; text-decoration: none; }
.nx-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.8rem; }
.nx-eyebrow { color: var(--nx-lime); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.nx-head h1 { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.3rem, 3.2vw, 2rem); font-weight: 800; letter-spacing: -0.01em; }
.nx-head-r { display: flex; align-items: center; gap: 0.6rem; flex: none; }
.nx-left { color: var(--nx-muted); font-size: 0.82rem; font-weight: 700; }
.nx-live { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.7rem; border-radius: 999px; background: rgba(255, 82, 82, 0.14); border: 1px solid rgba(255, 82, 82, 0.5); color: #ffb4b4; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; }
.nx-live i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--nx-live); animation: nx-pulse 1.6s infinite; }
.nx-back { display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--nx-line); color: var(--nx-muted); font-size: 0.85rem; }
.nx-back:hover { background: var(--nx-card); color: var(--nx-text); }
.nx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 0.7rem; align-items: start; }
.nx-card { padding: 0.65rem 0.75rem 0.7rem; border-radius: 16px; background: var(--nx-card); border: 1px solid var(--nx-line); display: grid; gap: 0.45rem; min-width: 0; }
.nx-card > header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.nx-card h2 { font-size: 1rem; font-weight: 800; }
.nx-card > header > span:not(.nx-chip) { color: var(--nx-muted); font-size: 0.8rem; font-weight: 700; }
.nx-chip { padding: 0.12rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: var(--nx-muted); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.nx-card.playing { border-color: rgba(198, 241, 53, 0.55); background: linear-gradient(160deg, rgba(198, 241, 53, 0.14), rgba(255, 255, 255, 0.05)); }
.nx-card.playing .nx-chip { background: var(--nx-lime); color: #10200a; }
.nx-card.called { border-color: rgba(255, 212, 92, 0.65); background: linear-gradient(160deg, rgba(255, 212, 92, 0.16), rgba(255, 255, 255, 0.05)); }
.nx-card.called .nx-chip { background: var(--nx-gold); color: #3a2700; }
.nx-wide { grid-column: 1 / -1; }
.nx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.nx-cols { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 0.3rem 0.7rem; }
.nx-row { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.5rem; border-radius: 10px; background: rgba(255, 255, 255, 0.05); min-width: 0; }
.nx-tag { flex: none; min-width: 2.4rem; text-align: center; padding: 0.15rem 0.35rem; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: var(--nx-muted); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; }
.nx-row.now { background: rgba(198, 241, 53, 0.16); } .nx-row.now .nx-tag { background: var(--nx-live); color: #fff; }
.nx-row.go { background: rgba(255, 212, 92, 0.16); box-shadow: inset 0.2rem 0 0 var(--nx-gold); } .nx-row.go .nx-tag { background: var(--nx-gold); color: #3a2700; }
.nx-m { min-width: 0; }
.nx-teams { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45rem; font-size: 0.88rem; overflow-wrap: anywhere; }
.nx-teams b { font-weight: 700; } .nx-teams i { font-style: normal; color: var(--nx-lime); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.nx-m small { display: block; color: var(--nx-muted); font-size: 0.68rem; margin-top: 0.05rem; }
.nx-none { padding: 0.3rem 0.5rem; color: var(--nx-muted); font-size: 0.78rem; }
.nx-empty { margin: 4rem auto; max-width: 26rem; text-align: center; display: grid; gap: 0.4rem; justify-items: center; }
.nx-empty span { font-size: 2.4rem; } .nx-empty b { font-size: 1.2rem; } .nx-empty p { color: var(--nx-muted); }
@keyframes nx-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 82, 82, 0.7); } 70%, 100% { box-shadow: 0 0 0 7px rgba(255, 82, 82, 0); } }
@media (max-width: 520px) { .nx-grid, .nx-cols { grid-template-columns: 1fr; } .nx-head-r .nx-left { display: none; } }
@media (prefers-reduced-motion: reduce) { .nx-live i { animation: none; } }

/* Phone follow page, more compact: smaller names, the two teams of a match on one line, tighter cards - so a long list needs much less scrolling */
.fl-cards { gap: 0.45rem; } .fl-cards.tight { gap: 0.35rem; }
.fl-card { padding: 0.55rem 0.7rem; gap: 0.3rem; border-radius: 0.9rem; }
.fl-card > header { font-size: 0.74rem; } .fl-card > header b { font-size: 0.85rem; }
.fl-vs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.45rem; font-size: 0.9rem; line-height: 1.3; }
.fl-vs i { font-size: 0.58rem; letter-spacing: 0.14em; }
.fl-vs.small { font-size: 0.86rem; gap: 0 0.4rem; }
.fl-row { padding: 0.28rem 0.6rem; border-radius: 0.6rem; font-size: 0.86rem; gap: 0.6rem; }
.fl-row strong { font-size: 1.05rem; }
.fl-queue { gap: 0.35rem; }
.fl-queue li { padding: 0.45rem 0.65rem; gap: 0.6rem; border-radius: 0.8rem; }
.fl-queue small { font-size: 0.72rem; }
.fl-no { width: 1.8rem; height: 1.8rem; font-size: 0.85rem; }
.fl-stats { padding: 0.6rem 0.8rem; gap: 0.8rem; border-radius: 1rem; }
.fl-stat strong { font-size: 1.35rem; } .fl-stat span { font-size: 0.66rem; }
.fl-h { font-size: 0.72rem; margin-top: 0.2rem; }
.fl-me { padding: 0.7rem; gap: 0.45rem; border-radius: 1rem; } .fl-me h3 { font-size: 1rem; }
.fl-mini { padding: 0.4rem 0.65rem; border-radius: 0.7rem; gap: 0.1rem; } .fl-mini-top { font-size: 0.66rem; } .fl-mini-body { font-size: 0.86rem; } .fl-mini-body strong { font-size: 0.95rem; }
.fl-mine-card { padding: 0.55rem 0.8rem; border-radius: 14px; } .fl-mine-card p { font-size: 0.9rem; }
.fl-table li { padding: 0.45rem 0.8rem; gap: 0.55rem; font-size: 0.9rem; } .fl-table > header { padding: 0.5rem 0.8rem; }
.fl-teams li { padding: 0.45rem 0.7rem; font-size: 0.9rem; }
.fl-bcard .fl-row { font-size: 0.84rem; padding: 0.3rem 0.5rem; }
.fl-rh { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0 0; font-size: 0.82rem; font-weight: 800; color: var(--fl-ink); }
.fl-rh small { padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--fl-soft); color: var(--fl-muted); font-size: 0.7rem; }

/* TV standings: every row must fit on screen (nobody scrolls a TV), so a long bracket gets tighter rows */
.tv-tables.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tv-tables.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-tables.c3 .tv-table-card, .tv-tables.c2 .tv-table-card.dense { padding: 0.9rem 1rem; }
.tv-table-card.dense h3 { font-size: 1.35em; }
.tv-table-card.dense table { font-size: 1.02em; border-spacing: 0 0.22rem; }
.tv-table-card.dense td { padding: 0.32rem 0.45rem; }
.tv-table-card.dense .tv-rank { width: 1.6rem; height: 1.6rem; font-size: 0.82em; }

/* TV: nothing scrolls - the slide content sits in a wrapper that the page scales down to fit the screen (see pcTv.fit) */
.tv-fit { width: 100%; flex: 0 0 auto; }
@media (min-width: 761px) and (min-aspect-ratio: 1/1) { .tv-bracket { overflow: visible; max-height: none; } .tv-slide { overflow: hidden; } }
.tv-queue li.go { border-color: rgba(255, 212, 92, 0.75); background: linear-gradient(160deg, rgba(255, 212, 92, 0.2), rgba(255, 255, 255, 0.05)); }
.tv-queue li.go .tv-no { background: var(--tv-gold); color: #3a2700; font-size: 0.8em; letter-spacing: 0.04em; }

/* Playing now: a court-lines stage behind the cards with a ball rallying across it, and bigger "spotlight" cards when only one or two matches are on court. */
.tv-arena { position: relative; isolation: isolate; overflow: hidden; padding: 1.6rem 1.8rem; border-radius: 2rem; border: 1px solid var(--tv-line);
    background: radial-gradient(120% 90% at 50% 0%, rgba(198,241,53,0.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); }
.tv-arena > .tv-col { position: relative; z-index: 1; }
.tv-ball { position: absolute; z-index: 0; left: 8%; bottom: 14%; width: 1.5rem; height: 1.5rem; pointer-events: none; animation: tv-rally-x 4.8s linear infinite alternate; }
.tv-ball::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f4ff9a, #c6f135 60%, #8fb31a); box-shadow: 0 0 1.4rem rgba(198,241,53,0.8); animation: tv-rally-y 0.8s cubic-bezier(.3,.6,.4,1) infinite alternate; }
.tv-ball::after { content: ""; position: absolute; left: 10%; right: 10%; bottom: -0.5rem; height: 0.35rem; border-radius: 50%; background: rgba(0,0,0,0.35); filter: blur(2px); }
@keyframes tv-rally-x { from { left: 8%; } to { left: 88%; } }
@keyframes tv-rally-y { from { transform: translateY(0); } to { transform: translateY(-5.5rem); } }
.tv-arena.few { max-width: 80rem; min-height: 26rem; padding: 2.2rem 2.4rem; }
.tv-arena.few .tv-cardgrid { grid-template-columns: 1fr; gap: 1.2rem; }
.tv-arena.few .tv-card { padding: 1.5rem 2rem; gap: 1rem; border-radius: 1.6rem; }
.tv-arena.few .tv-card > header b { font-size: 1.6em; }
.tv-arena.few .tv-vs { grid-template-columns: 1fr auto 1fr; align-items: center; text-align: center; gap: 1.2rem; font-size: 2.3em; }
.tv-arena.few .tv-vs i { font-size: 0.5em; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(198,241,53,0.16); }
@media (prefers-reduced-motion: reduce) { .tv-ball, .tv-ball::before { animation: none; } }
.nm-bynumber { display: grid; gap: 0.5rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: rgba(198, 241, 53, 0.18); border-left: 3px solid #9dc22b; font-size: 0.82rem; line-height: 1.4; }
.nm-bynumber p { margin: 0; }
.nm-bynumber .btn { justify-self: start; max-width: 100%; height: auto; white-space: normal; text-align: left; line-height: 1.3; padding-top: 0.4rem; padding-bottom: 0.4rem; }

/* Host venue on the tournament page: a small, quiet row (title, short note, Find a venue button) instead of a full-size section. */
.group-venue { padding: 0.65rem 1rem; }
.group-venue-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.group-venue-title { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.95rem; font-weight: 800; }
.group-venue-title svg { width: 1rem; height: 1rem; color: var(--accent-dark); }
.group-venue-note { margin: 0.2rem 0 0; font-size: 0.8rem; line-height: 1.35; }
.group-venue .alert { margin: 0.5rem 0 0; }

/* Courts popup: the "move to" picker looks like the court name boxes above it (rounded, soft border, own chevron) instead of the browser's plain select. */
.ce-move select { width: 100%; margin: 0; padding: 0.5rem 2.2rem 0.5rem 0.75rem; border-radius: 10px; border: 1px solid var(--line); background-color: var(--surface, #fff); color: inherit; font: inherit; font-size: 1rem; font-weight: 500; appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667569' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.8rem center; }
.ce-move select:focus { outline: none; border-color: #8fc41a; box-shadow: 0 0 0 3px rgba(198, 241, 53, 0.35); }
.ce-move label { display: grid; gap: 0.3rem; font-weight: 700; }

/* Live page, Highlights tab: headline numbers, then fun-fact cards (biggest win, closest game, leaders, unbeaten teams). */
.fl-hl-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-bottom: 0.7rem; }
.fl-hl-hero > div { display: grid; gap: 0.1rem; justify-items: center; padding: 0.7rem 0.4rem; border-radius: 1rem; background: linear-gradient(160deg, color-mix(in srgb, var(--fl-lime-bright) 30%, transparent), var(--fl-card)); border: 1px solid var(--fl-line); text-align: center; }
.fl-hl-hero strong { font-size: 1.5rem; line-height: 1.1; font-weight: 800; }
.fl-hl-hero span { font-size: 0.7rem; font-weight: 700; color: var(--fl-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.fl-hl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; }
.fl-hl-card { display: grid; gap: 0.5rem; align-content: start; padding: 0.8rem 0.9rem; border-radius: 1.1rem; background: var(--fl-card); border: 1px solid var(--fl-line); box-shadow: var(--fl-shadow); min-width: 0; }
.fl-hl-card > header { display: flex; align-items: center; gap: 0.5rem; }
.fl-hl-card > header span { font-size: 1.15rem; }
.fl-hl-card h3 { margin: 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fl-muted); }
.fl-hl-game { display: grid; gap: 0.25rem; }
.fl-hl-game > div { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; padding: 0.35rem 0.6rem; border-radius: 0.7rem; background: var(--fl-soft); color: var(--fl-muted); font-weight: 600; }
.fl-hl-game > div.won { background: color-mix(in srgb, var(--fl-lime-bright) 28%, transparent); color: var(--fl-ink); font-weight: 800; }
.fl-hl-game strong { font-size: 1.15rem; }
.fl-hl-note { margin: 0; font-size: 0.78rem; font-weight: 700; color: var(--fl-muted); }
.fl-hl-rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.fl-hl-rank li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; font-weight: 600; }
.fl-hl-rank b { font-size: 1rem; }
.fl-hl-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.fl-hl-chip { padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--fl-soft); font-size: 0.82rem; font-weight: 700; }
.fl-hl-chip b { color: var(--fl-lime); margin-left: 0.2rem; }
.fl-hl-chip.more { color: var(--fl-muted); }

/* ---- Category page refresh (.tb-page): header, section titles, standings and option rows ----
   Page chrome only. The match cards and the round robin / winners bracket layout (.match-card, .round-robin-grid,
   .bracket-*) are deliberately not touched here, so the header-row spacing tuned for the court / play icons stays as is. */
.tb-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.7rem 1rem; margin-bottom: 0.9rem; }
.tb-title { min-width: 0; flex: 1 1 18rem; }
.tb-back { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0 0 0.3rem -0.3rem; padding: 0.15rem 0.55rem 0.15rem 0.3rem; border-radius: 999px; color: var(--muted); font-size: 0.76rem; font-weight: 700; text-decoration: none; transition: background 0.15s ease, color 0.15s ease; }
.tb-back:hover { background: rgba(32, 29, 24, 0.06); color: var(--ink); }
.tb-back svg { width: 0.9rem; height: 0.9rem; }
.tb-rename { display: inline-flex; align-items: center; vertical-align: middle; margin-left: 0.35rem; padding: 0.25rem; border: none; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.tb-rename:hover { background: var(--page-bg); color: var(--accent-dark); }
.tb-rename svg { width: 1rem; height: 1rem; }
.tb-head h1 { margin: 0 0 0.45rem; font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.85rem); line-height: 1.15; overflow-wrap: anywhere; }
.tb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.tb-chip { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.65rem 0.18rem 0.5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.tb-chip svg { width: 0.85rem; height: 0.85rem; color: var(--accent-dark); }
.tb-chip-left { border-color: transparent; background: var(--brand-tint); color: #3f5f22; }
.tb-actions { flex: 0 1 auto; justify-content: flex-end; gap: 0.4rem; }
.tb-actions .btn { gap: 0.4rem; padding: 0.42rem 0.8rem; border-radius: 10px; font-size: 0.8rem; box-shadow: 0 1px 2px rgba(24, 28, 26, 0.05); }
.tb-actions .btn svg { width: 1rem; height: 1rem; flex: none; color: var(--accent-dark); }
.tb-actions .btn-scorekeepers svg { color: #1565c0; }

.tb-page .card { border-radius: 14px; box-shadow: 0 1px 2px rgba(24, 28, 26, 0.04); }
.tb-ptitle { gap: 0.6rem; margin-bottom: 0.7rem; }
.tb-h { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem 0.55rem; margin: 0; font-size: 1.1rem; line-height: 1.2; }
.tb-h-ic { display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 9px; background: var(--brand-tint); color: var(--accent-dark); }
.tb-h-ic svg { width: 1.05rem; height: 1.05rem; }
.tb-count { padding: 0.14rem 0.55rem; border-radius: 999px; background: #fff3cd; color: #8a6100; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0; }
.tb-collapse { display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); }
.tb-collapse:hover { background: #f4efe3; color: var(--ink); }
.tb-bracket-h { display: flex; align-items: center; gap: 0.45rem; margin: 0.15rem 0 0.6rem; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); }
.tb-bracket-letter { padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.tb-note { margin: -0.2rem 0 0.75rem; color: var(--muted); font-size: 0.78rem; }

/* Standings: one tidy panel per bracket, a rank chip (green when advancing), and a table that fits the card instead of overflowing it. */
.tb-standings { padding: 0.9rem 1rem; }
.tb-page .rr-standings-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: 0.9rem; width: 100%; }
.tb-page .rr-standings-block { min-width: 0; padding: 0.7rem 0.8rem 0.5rem; border: 1px solid var(--line); border-radius: 12px; background: #fffdf8; }
.tb-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tb-page .rr-standings-table { width: 100%; table-layout: auto; font-size: 0.84rem; }
.tb-page .rr-standings-table th, .tb-page .rr-standings-table td { width: auto; padding: 0.42rem 0.45rem; vertical-align: middle; font-variant-numeric: tabular-nums; }
.tb-page .rr-standings-table th { color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.tb-page .rr-standings-table th:nth-child(1), .tb-page .rr-standings-table td:nth-child(1) { width: 2.6rem; }
.tb-page .rr-standings-table th:nth-child(3), .tb-page .rr-standings-table td:nth-child(3),
.tb-page .rr-standings-table th:nth-child(4), .tb-page .rr-standings-table td:nth-child(4),
.tb-page .rr-standings-table th:nth-child(5), .tb-page .rr-standings-table td:nth-child(5) { width: 3.2rem; white-space: nowrap; }
.tb-page .rr-standings-table th:nth-child(6), .tb-page .rr-standings-table td:nth-child(6) { width: 5.6rem; white-space: nowrap; }
.tb-page .rr-standings-table tbody tr:last-child td { border-bottom: none; }
.tb-page .rr-standings-table tbody tr.adv { background: linear-gradient(90deg, rgba(165, 198, 57, 0.14), transparent 70%); }
.tb-rank { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #eee9dc; color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.adv .tb-rank { background: var(--accent-dark); color: #fff; }

/* Option rows and the "Need to add players / Not using playoffs" notes: lighter, tighter, full width. */
.tb-page .settings-row { max-width: none; padding: 0.55rem 0; }
.tb-page .finish-card { margin-top: 0.8rem; padding: 0.65rem 0.85rem; border-radius: 12px; background: #fbf8f0; border-style: dashed; font-size: 0.82rem; }
.tb-page .finish-card p { flex: 1 1 15rem; font-size: 0.82rem; line-height: 1.4; }
.tb-cta { gap: 0.5rem; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.95rem; }
.tb-cta svg, .tb-page .btn-sm svg { width: 1rem; height: 1rem; flex: none; }
.tb-page .bracket-options-summary { padding: 0.45rem 0.6rem; border-radius: 10px; background: #fbf8f0; }

@media (max-width: 640px) {
    .tb-head { align-items: stretch; margin-bottom: 0.75rem; }
    .tb-actions { flex: 1 1 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
    .tb-actions .btn { justify-content: flex-start; min-height: 2.5rem; padding: 0.45rem 0.7rem; }
    .tb-standings { padding: 0.75rem 0.7rem; }
    .tb-page .rr-standings-block { padding: 0.6rem 0.55rem 0.35rem; }
    /* The advancing badge column makes way for the green rank chip and row tint on a phone. */
    .tb-page .rr-standings-table th:nth-child(6), .tb-page .rr-standings-table td:nth-child(6) { display: none; }
    .tb-page .rr-standings-table th:nth-child(1), .tb-page .rr-standings-table td:nth-child(1) { width: 2.1rem; padding-left: 0.2rem; padding-right: 0.2rem; }
    .tb-page .rr-standings-table th:nth-child(3), .tb-page .rr-standings-table td:nth-child(3),
    .tb-page .rr-standings-table th:nth-child(4), .tb-page .rr-standings-table td:nth-child(4),
    .tb-page .rr-standings-table th:nth-child(5), .tb-page .rr-standings-table td:nth-child(5) { width: 2.7rem; }
    .tb-page .finish-card .btn { width: 100%; justify-content: center; }
}
.tb-note-info { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.8rem; padding: 0.4rem 0.65rem; border-radius: 10px; background: #fbf8f0; }
.tb-note-info svg { width: 0.9rem; height: 0.9rem; flex: none; color: var(--accent-dark); }

/* ---- Tournament setup page refresh (.ts-page): lighter fields, segmented controls, rounded steppers and player rows ----
   Builds on the .venue-setup compact base and the shared .tb-head / .tb-h header and title styles. */
.tb-actions .btn-pickleball svg { color: #fff; }
.ts-page .card { box-shadow: 0 1px 2px rgba(24, 28, 26, 0.04); }
.ts-page .card h2.tb-h { margin: 0 0 0.75rem; font-size: 1.05rem; }
.ts-page .field label { color: var(--muted); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.02em; }
.ts-page .field input, .ts-page .field select, .ts-page .field textarea { border-radius: 10px; background: #fffdf8; }
.ts-page .field input:focus, .ts-page .field select:focus { outline: none; border-color: var(--accent-dark); box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.22); }
.ts-page .settings-row { max-width: none; gap: 0.75rem; padding: 0.55rem 0; }
.ts-page .settings-row strong { font-size: 0.86rem; }
.ts-page .settings-row .muted { margin-top: 0.15rem; font-size: 0.74rem; line-height: 1.35; }
.ts-page .settings-group-highlight { margin-top: 0.6rem; padding: 0 0.85rem; border-color: rgba(93, 139, 55, 0.35); border-radius: 12px; background: linear-gradient(180deg, #f3f9e4, #edf5d9); }
.ts-page .pill-toggle { flex: none; gap: 0.2rem; padding: 0.2rem; border-radius: 999px; background: #efe9db; }
.ts-page .pill-btn { padding: 0.3rem 0.8rem; border: none; background: transparent; font-size: 0.76rem; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; }
.ts-page .pill-btn.selected { background: var(--brand); color: #fff; box-shadow: 0 1px 3px rgba(24, 28, 26, 0.25); }
.ts-page .pill-btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* The − and + are solid brand-coloured circles with a bold white sign (matching the selected pills), so they read as buttons at a glance. */
.ts-page .stepper { flex: none; gap: 0.35rem; padding: 0.2rem; border-radius: 999px; background: #efe9db; }
.ts-page .stepper-btn { width: 34px; height: 34px; background: var(--brand); color: #fff; font-size: 1.35rem; font-weight: 800; line-height: 1; padding: 0 0 0.1rem; box-shadow: 0 1px 3px rgba(24, 28, 26, 0.28); transition: background 0.12s ease, transform 0.08s ease; }
.ts-page .stepper-btn:hover { background: var(--accent-dark); }
.ts-page .stepper-btn:active { transform: scale(0.92); }
.ts-page .stepper-btn:focus-visible { outline: 3px solid var(--brand-tint); outline-offset: 1px; }
.ts-page .stepper-btn[data-at-max="true"] { opacity: 0.4; }
.ts-page .stepper-value { min-width: 2rem; font-size: 1.05rem; font-weight: 800; }
.ts-page .queue-row { background: #fffdf8; }
.ts-page .queue-position { display: inline-grid; place-items: center; flex: none; width: 1.5rem; height: 1.5rem; min-width: 1.5rem; border-radius: 50%; background: var(--brand-tint); color: #3f5f22; font-size: 0.72rem; }
.ts-page .player-name-input { padding: 0.4rem 0.6rem; border-radius: 9px; background: #fff; font-size: 0.85rem; }
.ts-page .group-board { gap: 0.6rem; }
.ts-page .group-column { padding: 0.65rem; border-radius: 12px; background: #fffdf8; }
.ts-page .group-column-header { font-size: 0.82rem; }
.ts-page .group-entrant-chip { border-radius: 9px; }
.ts-page .preview-stat { padding: 0.4rem 0; font-size: 0.84rem; }
.ts-page .wildcard-card, .ts-page .team-switch-card { border-radius: 12px; }
.ts-save { gap: 0.5rem; padding: 0.7rem 1rem; border-radius: 12px; }

@media (max-width: 640px) {
    .ts-page .settings-row { flex-wrap: wrap; }
    .ts-page .settings-row > .pill-toggle { width: 100%; }
    .ts-page .settings-row > .pill-toggle .pill-btn { flex: 1; padding-left: 0.4rem; padding-right: 0.4rem; text-align: center; }
    .ts-page .card { padding: 0.8rem 0.85rem; }
}
/* Hint lines under an option row sit in their own soft box (some carry an inline negative margin that let the row divider cut through them). */
.ts-page .settings-row + p.muted { margin: 0.1rem 0 0.45rem !important; padding: 0.4rem 0.65rem; border-radius: 10px; background: #fbf8f0; font-size: 0.74rem !important; }
@media (max-width: 640px) {
    /* On a phone the info tips open across their row instead of hanging off the screen edge. */
    .ts-page { overflow-x: clip; }
    .ts-page .settings-row { position: relative; }
    .ts-page .info-tip { position: static; }
    .ts-page .info-tip-bubble { left: 0; right: 0; width: auto; max-width: none; transform: none; }
    .ts-page .info-tip-bubble::after { display: none; }
}

/* TV bracket: a round never stretches wider than its cards need (a lone Final used to fill the whole screen), and the rounds sit centred. */
.tv-bracket > .tv-round:first-child { margin-left: auto; } .tv-bracket > .tv-round:last-child { margin-right: auto; }
.tv-round { max-width: 30rem; }

/* Read-only setup (already started): the settings as a grid of small tiles instead of one long list. */
.ts-ro { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem 0.6rem; align-items: start; }
.ts-ro > .alert, .ts-ro > h2 { grid-column: 1 / -1; margin-bottom: 0.1rem; }
.ts-ro > p { display: flex; flex-direction: column; gap: 0.1rem; margin: 0; padding: 0.5rem 0.7rem; border: 1px solid var(--line); border-radius: 10px; background: #fffdf8; font-size: 0.86rem; line-height: 1.35; }
.ts-ro > p strong { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* Standings: a name (or a doubles pair) always stays on one line; the Entrant column takes the spare room and the stat columns stay snug. */
.tb-page .rr-standings-table td:nth-child(2) { font-weight: 600; white-space: nowrap; }
.tb-page .rr-standings-table th:nth-child(2) { width: 100%; }
.tb-page .rr-standings-table th:nth-child(3), .tb-page .rr-standings-table td:nth-child(3),
.tb-page .rr-standings-table th:nth-child(4), .tb-page .rr-standings-table td:nth-child(4),
.tb-page .rr-standings-table th:nth-child(5), .tb-page .rr-standings-table td:nth-child(5) { width: 1%; padding-left: 0.6rem; padding-right: 0.6rem; }
@media (max-width: 640px) {
    .tb-page .rr-standings-table { font-size: 0.8rem; }
    .tb-page .rr-standings-table th, .tb-page .rr-standings-table td { padding-left: 0.3rem; padding-right: 0.3rem; }
    .tb-page .rr-standings-table th:nth-child(3), .tb-page .rr-standings-table td:nth-child(3),
    .tb-page .rr-standings-table th:nth-child(4), .tb-page .rr-standings-table td:nth-child(4),
    .tb-page .rr-standings-table th:nth-child(5), .tb-page .rr-standings-table td:nth-child(5) { padding-left: 0.35rem; padding-right: 0.35rem; }
}
/* On a narrow phone the Total column makes way so a full doubles pair still fits (W-L and Diff say the rest). */
@media (max-width: 480px) {
    .tb-page .rr-standings-table th:nth-child(4), .tb-page .rr-standings-table td:nth-child(4) { display: none; }
}
@media (max-width: 480px) {
    .tb-standings { padding: 0.7rem 0.45rem; }
    .tb-page .rr-standings-block { padding: 0.55rem 0.35rem 0.3rem; }
    .tb-page .rr-standings-table { font-size: 0.74rem; }
    .tb-page .rr-standings-table th { font-size: 0.62rem; letter-spacing: 0.03em; }
    .tb-page .rr-standings-table th, .tb-page .rr-standings-table td { padding-left: 0.2rem; padding-right: 0.2rem; }
    .tb-page .rr-standings-table th:nth-child(1), .tb-page .rr-standings-table td:nth-child(1) { width: 1.9rem; }
    .tb-page .rr-standings-table th:nth-child(3), .tb-page .rr-standings-table td:nth-child(3),
    .tb-page .rr-standings-table th:nth-child(5), .tb-page .rr-standings-table td:nth-child(5) { padding-left: 0.3rem; padding-right: 0.15rem; }
    .tb-rank { width: 1.35rem; height: 1.35rem; font-size: 0.7rem; }
}
@media (max-width: 400px) {
    .tb-page .rr-standings-block { padding: 0.2rem 0 0.2rem; border: none; border-radius: 0; background: transparent; }
    .tb-page .rr-standings-block + .rr-standings-block { padding-top: 0.7rem; border-top: 1px solid var(--line); }
}

/* Standings columns follow the width of their own bracket panel (not the screen): with the Next Match column open the panels get narrow on a laptop too. */
.tb-page .rr-standings-block { container-type: inline-size; }
@container (max-width: 40rem) {
    .tb-page .rr-standings-table th:nth-child(6), .tb-page .rr-standings-table td:nth-child(6) { display: none; }
    .tb-page .rr-standings-table th:nth-child(3), .tb-page .rr-standings-table td:nth-child(3),
    .tb-page .rr-standings-table th:nth-child(4), .tb-page .rr-standings-table td:nth-child(4),
    .tb-page .rr-standings-table th:nth-child(5), .tb-page .rr-standings-table td:nth-child(5) { padding-left: 0.4rem; padding-right: 0.4rem; }
}
@container (max-width: 25rem) {
    .tb-page .rr-standings-table th:nth-child(4), .tb-page .rr-standings-table td:nth-child(4) { display: none; }
}
@container (max-width: 25rem) {
    .tb-page .rr-standings-table th:nth-child(3), .tb-page .rr-standings-table td:nth-child(3),
    .tb-page .rr-standings-table th:nth-child(5), .tb-page .rr-standings-table td:nth-child(5) { padding-left: 0.3rem; padding-right: 0.15rem; }
}

/* TV header: the tournament name sits above the category name on every slide of a single category's screen. */
.tv-tourney { display: block; margin-bottom: 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tv-muted); font-size: 0.9em; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

/* Partners popup: the two player pickers share a row and shrink with it; on a narrow phone they stack. */
.pair-pick > .field { min-width: 0; margin-bottom: 0; }
.pair-pick .dd-field { padding: 0.5rem 0.75rem; font-size: 0.9rem; }
@media (max-width: 420px) { .pair-pick { flex-direction: column; gap: 0.5rem; } }

/* Setup page, before the first save: a greyed "Select participants" box shows where the players will go, and the save step says what comes next. */
.ts-locked { border-style: dashed; background: #fbf8f0; }
.ts-locked h2.tb-h { margin-bottom: 0.4rem; }
.ts-locked .tb-h-ic { background: #eee9dc; color: var(--muted); }
.ts-locked p { margin: 0; }
.ts-lock-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: #fff3cd; color: #8a6100; font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0; }
.ts-lock-tag svg { width: 0.8rem; height: 0.8rem; }
/* "Next matches on the TV and live page": label, the two-way pill, and a one-line hint underneath. */
.ts-next-row { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 0.5rem; }
.ts-next-row .pill-toggle { align-self: flex-start; max-width: 100%; flex-wrap: wrap; }
.ts-next-hint { font-size: 0.82rem; line-height: 1.4; }
.ts-step { margin: 0 0 0.65rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: var(--brand-tint); color: #3f5f22; font-size: 0.82rem; line-height: 1.4; }

/* Review players popup (Open Play import): one scrollbar. The heading, summary, quick-set and buttons stay put; only .import-scroll scrolls. */
.modal-box.import-review { display: flex; flex-direction: column; overflow: hidden; }
.modal-box.import-review > * { flex: none; }
.modal-box.import-review > .import-scroll { flex: 1 1 auto; min-height: 7rem; overflow-y: auto; margin: 0 -0.25rem 0.6rem 0; padding-right: 0.25rem; }
.modal-box.import-review .import-review-list { max-height: none; overflow: visible; padding-right: 0; }
/* A short screen (a small phone, or one on its side): everything scrolls together instead, so the buttons are never squeezed out. */
@media (max-height: 700px) {
    .modal-box.import-review { display: block; overflow-y: auto; }
    .modal-box.import-review > .import-scroll { overflow: visible; margin: 0 0 0.6rem; padding: 0; }
}

/* ===== TV: made to read on a big screen from across the venue ===== (one block: tweak or delete to go back)
   A richer deep-green stage instead of near-black, cards that stand out from it, brighter secondary text and larger small captions. */
.tv { --tv-bg: #08301f; --tv-card: rgba(255,255,255,0.13); --tv-card-2: rgba(255,255,255,0.2); --tv-line: rgba(255,255,255,0.3); --tv-text: #ffffff; --tv-muted: #d3e3d9;
    background: radial-gradient(120% 90% at 18% 0%, #13663f 0%, #0b3d27 45%, #062116 100%); }
.tv-glow { background:
    radial-gradient(40% 35% at 15% 10%, rgba(198,241,53,0.26), transparent 70%),
    radial-gradient(35% 40% at 90% 85%, rgba(34,197,94,0.30), transparent 70%),
    radial-gradient(30% 30% at 70% 15%, rgba(20,184,166,0.20), transparent 70%); }
.tv-line { background: rgba(255,255,255,0.1); color: #eef6f0; }
.tv-line.lost { opacity: 0.75; }
.tv-title p { font-size: 0.95em; }
.tv-eyebrow { font-size: 0.95em; }
.tv-tile span { font-size: 0.9em; }
.tv-card > header span { font-size: 0.95em; }
.tv-queue small { font-size: 0.95em; }
.tv-table-card th { font-size: 0.82em; }
.tv-table-card footer { font-size: 0.95em; }
.tv-round h4 { font-size: 1em; }
.tv-miniqr > span { font-size: 0.8em; }

/* ===== TV colour theme: blue (the default is the green above). The lime accents stay; only the stage, cards and glow change. ===== */
.tv.theme-blue { --tv-bg: #0a2468; --tv-card: rgba(255,255,255,0.15); --tv-card-2: rgba(255,255,255,0.22); --tv-line: rgba(255,255,255,0.32); --tv-muted: #d4e0fb;
    background: radial-gradient(120% 90% at 18% 0%, #2457d6 0%, #12399b 45%, #08205e 100%); }
.tv.theme-blue .tv-glow { background:
    radial-gradient(40% 35% at 15% 10%, rgba(198,241,53,0.18), transparent 70%),
    radial-gradient(35% 40% at 90% 85%, rgba(96,165,250,0.34), transparent 70%),
    radial-gradient(30% 30% at 70% 15%, rgba(129,140,248,0.26), transparent 70%); }
.tv-ctl svg { display: block; }

/* ===== More TV themes: purple, crimson, orange, teal, midnight (the lime accents stay on all of them) ===== */
.tv.theme-purple { --tv-bg: #2a1068; --tv-card: rgba(255,255,255,0.15); --tv-card-2: rgba(255,255,255,0.22); --tv-line: rgba(255,255,255,0.32); --tv-muted: #e4dbfb;
    background: radial-gradient(120% 90% at 18% 0%, #7c3aed 0%, #4c1d95 45%, #1e0b4f 100%); }
.tv.theme-purple .tv-glow { background:
    radial-gradient(40% 35% at 15% 10%, rgba(198,241,53,0.16), transparent 70%),
    radial-gradient(35% 40% at 90% 85%, rgba(167,139,250,0.34), transparent 70%),
    radial-gradient(30% 30% at 70% 15%, rgba(244,114,182,0.22), transparent 70%); }

.tv.theme-crimson { --tv-bg: #8f1428; --tv-card: rgba(0,0,0,0.24); --tv-card-2: rgba(0,0,0,0.34); --tv-line: rgba(255,255,255,0.36); --tv-muted: #fbe1e1;
    background: radial-gradient(120% 90% at 18% 0%, #d7263d 0%, #92162b 45%, #3d0713 100%); }
.tv.theme-crimson .tv-glow { background:
    radial-gradient(40% 35% at 15% 10%, rgba(198,241,53,0.14), transparent 70%),
    radial-gradient(35% 40% at 90% 85%, rgba(255,138,138,0.30), transparent 70%),
    radial-gradient(30% 30% at 70% 15%, rgba(251,191,36,0.18), transparent 70%); }

.tv.theme-orange { --tv-bg: #b8400a; --tv-card: rgba(0,0,0,0.24); --tv-card-2: rgba(0,0,0,0.34); --tv-line: rgba(255,255,255,0.38); --tv-muted: #ffe9d6;
    background: radial-gradient(120% 90% at 18% 0%, #e0600f 0%, #b23c08 45%, #561a06 100%); }
.tv.theme-orange .tv-glow { background:
    radial-gradient(40% 35% at 15% 10%, rgba(198,241,53,0.14), transparent 70%),
    radial-gradient(35% 40% at 90% 85%, rgba(253,186,116,0.30), transparent 70%),
    radial-gradient(30% 30% at 70% 15%, rgba(251,146,60,0.24), transparent 70%); }

.tv.theme-teal { --tv-bg: #0b6b64; --tv-card: rgba(0,0,0,0.2); --tv-card-2: rgba(0,0,0,0.3); --tv-line: rgba(255,255,255,0.34); --tv-muted: #d6f6f1;
    background: radial-gradient(120% 90% at 18% 0%, #0e9f93 0%, #0b6b64 45%, #04302f 100%); }
.tv.theme-teal .tv-glow { background:
    radial-gradient(40% 35% at 15% 10%, rgba(198,241,53,0.16), transparent 70%),
    radial-gradient(35% 40% at 90% 85%, rgba(94,234,212,0.30), transparent 70%),
    radial-gradient(30% 30% at 70% 15%, rgba(56,189,248,0.20), transparent 70%); }

.tv.theme-midnight { --tv-bg: #0b0f15; --tv-card: rgba(255,255,255,0.1); --tv-card-2: rgba(255,255,255,0.16); --tv-line: rgba(255,255,255,0.28); --tv-muted: #c9d1dc;
    background: radial-gradient(120% 90% at 18% 0%, #1c2431 0%, #0c1119 50%, #030507 100%); }
.tv.theme-midnight .tv-glow { background:
    radial-gradient(40% 35% at 15% 10%, rgba(198,241,53,0.16), transparent 70%),
    radial-gradient(35% 40% at 90% 85%, rgba(148,163,184,0.16), transparent 70%),
    radial-gradient(30% 30% at 70% 15%, rgba(255,255,255,0.06), transparent 70%); }

/* On the warm themes the rows sit on dark glass, and the red LIVE pill would vanish into the background. */
.tv.theme-crimson .tv-line, .tv.theme-orange .tv-line, .tv.theme-teal .tv-line { background: rgba(0,0,0,0.22); }
.tv.theme-crimson .tv-live-pill, .tv.theme-orange .tv-live-pill { background: rgba(0,0,0,0.38); border-color: rgba(255,255,255,0.55); color: #fff; }

/* The colour picker: opens above the controls bar, one round swatch per theme. */
.tv-ctl { position: relative; }
.tv-themes { position: absolute; bottom: calc(100% + 0.9rem); left: 50%; transform: translateX(-50%); display: flex; gap: 0.6rem; padding: 0.6rem 0.8rem; border-radius: 999px; background: rgba(8,14,12,0.9); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(12px); box-shadow: 0 0.6rem 2rem rgba(0,0,0,0.45); cursor: default; }
.tv-swatch { display: block; width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 2px solid rgba(255,255,255,0.4); cursor: pointer; transition: transform 0.12s ease; }
.tv-swatch:hover { transform: scale(1.12); }
.tv-swatch.on { border-color: #fff; box-shadow: 0 0 0 0.2rem rgba(198,241,53,0.95); }
.tv-swatch.sw-green { background: linear-gradient(135deg, #13663f, #062116); }
.tv-swatch.sw-blue { background: linear-gradient(135deg, #2457d6, #08205e); }
.tv-swatch.sw-purple { background: linear-gradient(135deg, #7c3aed, #1e0b4f); }
.tv-swatch.sw-crimson { background: linear-gradient(135deg, #d7263d, #3d0713); }
.tv-swatch.sw-orange { background: linear-gradient(135deg, #e0600f, #561a06); }
.tv-swatch.sw-teal { background: linear-gradient(135deg, #0e9f93, #04302f); }
.tv-swatch.sw-midnight { background: linear-gradient(135deg, #1c2431, #030507); }

/* Site admin only: a tournament the public cannot see (club switched off, category hidden, leftover) carries this tag on the Tournaments list. */
.tn-notpublic { display: inline-block; margin-left: 0.4rem; padding: 0.12rem 0.55rem; border-radius: 999px; background: #fff3cd; color: #8a6100; font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }

/* Site admin: what the public can see. A line on each tournament card (green Public / yellow Not public + why), a filter row, and a marker on hidden categories. */
.tn-vis-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: -0.1rem 0 0.5rem; padding: 0.25rem 0.6rem; border-radius: 999px; width: fit-content; max-width: 100%; font-size: 0.74rem; line-height: 1.3; }
.tn-vis-line svg { width: 0.9rem; height: 0.9rem; flex: none; }
.tn-vis-line b { font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; font-size: 0.68rem; }
.tn-vis-line.yes { background: #e3f4d3; color: #2f6a1b; }
.tn-vis-line.no { background: #fff0c2; color: #8a5a00; }
.tn-chip.hid { display: inline-flex; align-items: center; gap: 0.25rem; border-style: dashed; color: #8a5a00; }
.tn-chip.hid svg { width: 0.8rem; height: 0.8rem; }
.tn-vis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0 0 1rem; }
.tn-vis-label { display: inline-flex; align-items: center; gap: 0.35rem; margin-right: 0.3rem; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.tn-vis-label svg { width: 1rem; height: 1rem; }
.tn-vb { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.tn-vb em { font-style: normal; padding: 0 0.4rem; border-radius: 999px; background: rgba(0,0,0,0.07); font-size: 0.72rem; }
.tn-vb.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.tn-vb.on em { background: rgba(255,255,255,0.22); }
.tn-vb.yes:not(.on) { color: #2f6a1b; }
.tn-vb.no:not(.on) { color: #8a5a00; }
.fl-chip.hid { border-style: dashed; }
.fl-chip svg { width: 0.9rem; height: 0.9rem; flex: none; vertical-align: -0.15em; margin-right: 0.15rem; }

/* ---- Print: a category's standings and bracket on a landscape page (the menus, buttons, side panels and chat are left off). Scoped to the category page so other pages print as before. ---- */
@media print {
    @page { size: landscape; margin: 10mm; }
    body:has(.tb-page) { background: #fff !important; }
    body:has(.tb-page) .marketing-ticker,
    body:has(.tb-page) .app-header,
    body:has(.tb-page) .hc-fab-wrap,
    body:has(.tb-page) .nm-col,
    body:has(.tb-page) .nm-fab,
    body:has(.tb-page) .tb-actions,
    body:has(.tb-page) .tb-back,
    body:has(.tb-page) .tb-rename,
    body:has(.tb-page) .tb-cta,
    body:has(.tb-page) .modal-backdrop,
    body:has(.tb-page) .bye-seed-link,
    body:has(.tb-page) .icon-btn,
    body:has(.tb-page) .settings-row.bracket-options-summary,
    body:has(.tb-page) .seed-pairing-row,
    body:has(.tb-page) .alert,
    body:has(.tb-page) .confetti,
    body:has(.tb-page) .sparkles { display: none !important; }
    /* Controls on the match cards keep their space (so the bracket's connector lines stay put) but print nothing. */
    body:has(.tb-page) .match-sk-group,
    body:has(.tb-page) .match-sk-floating,
    body:has(.tb-page) .bracket-head > * { visibility: hidden !important; }
    body:has(.tb-page) .bracket-score-hint { background: transparent !important; }
    body:has(.tb-page) .bracket-score-hint .bar-text { visibility: hidden; }
    body:has(.tb-page) .app-main, body:has(.tb-page) .nm-layout, body:has(.tb-page) .nm-main { display: block !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
    body:has(.tb-page) .card { box-shadow: none !important; break-inside: avoid-page; }
    body:has(.tb-page) .bracket-scroll { overflow: visible !important; }
    body:has(.tb-page) .tb-page * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* The bracket picture keeps a readable size: on a narrow screen it scrolls sideways instead of shrinking the text. */
.bye-diagram { overflow-x: auto; }
.bye-diagram svg { min-width: 500px; }

/* Wildcard picker: the pick order (1st, 2nd), the TIED tag for players level on record, and the coin-toss hint. */
.wc-hint { margin: 0.4rem 0 0; font-size: 0.8rem; line-height: 1.4; }
.wc-order { margin-left: 0.3rem; padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--brand); color: #fff; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.03em; vertical-align: middle; }
.wc-tie { margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: #fff1d6; color: #8a5a00; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; vertical-align: middle; }

/* organizer category page: "Find me" search in the Round Robin Matches / Standings headers */
.tb-find-actions { flex: 1; justify-content: flex-end; min-width: 0; }
.tb-find { display: flex; align-items: center; gap: 0.4rem; flex: 1; max-width: 14rem; min-width: 7rem; height: 2.1rem; padding: 0 0.65rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: text; }
.tb-find:focus-within { border-color: var(--accent-dark); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-dark) 18%, transparent); }
.tb-find svg { flex: none; }
.tb-find input { flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.88rem; padding: 0; }
.tb-find-clear { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 0.8rem; line-height: 1; padding: 0.15rem; cursor: pointer; }
.rr-standings-table tr.found td { background: #fff3b8; }
@media (max-width: 600px) {
    .tb-ptitle:has(.tb-find) { flex-wrap: wrap; }
    .tb-ptitle .tb-find-actions { flex: 1 1 100%; justify-content: stretch; }
    .tb-ptitle .tb-find { max-width: none; }
}

/* Courts popup: default bracket per court (Court 1 = Bracket A) */
.ce-list select.ce-bracket { flex: none; max-width: 9rem; padding: 0.4rem 0.5rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 0.85rem; }
.ce-list select.ce-bracket:has(option[value=""]:not(:checked)) { border-color: var(--accent-dark); background: var(--brand-tint); font-weight: 700; }
.np-court .np-default, .mc-court .np-default { display: inline-block; margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--brand-tint); color: var(--accent-dark); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.03em; vertical-align: middle; }
.np-court .np-default { display: block; width: fit-content; margin: 0.1rem auto 0.1rem 0; }

/* Tournament page: Sponsors card (replaces the per-category scorekeeper list) */
.sponsors-card .field { margin-bottom: 0.4rem; }
.sponsors-caption-row { margin-bottom: 0.6rem; }
.sponsors-grid { list-style: none; margin: 0.6rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 0.5rem; }
.sponsors-grid li { position: relative; display: block; height: 4.6rem; padding: 0.4rem; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.sponsors-grid img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sponsors-x { position: absolute; top: -0.4rem; right: -0.4rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 0.7rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.sponsors-x:hover { background: #fde4e4; color: var(--danger); }
.sponsors-empty { margin: 0.4rem 0; }
.sponsors-actions { margin-top: 0.4rem; flex-wrap: wrap; }
.sponsors-actions label.btn { position: relative; overflow: hidden; cursor: pointer; }
.sponsors-actions label.btn.disabled { opacity: 0.55; pointer-events: none; }
.sponsors-actions label.btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.sponsors-hint { margin: 0.5rem 0 0; font-size: 0.8rem; }

/* TV: the sponsors slide (caption on top, then the logos on white tiles) */
.tv-sponsors { display: grid; gap: 2rem; justify-items: center; text-align: center; width: 100%; max-width: 90rem; margin: 0 auto; }
.tv-sponsors-caption { margin: 0; font-size: 2.4em; line-height: 1.2; font-weight: 800; max-width: 60rem; text-wrap: balance; }
.tv-sponsors-empty { font-size: 1.3em; opacity: 0.8; }
.tv-sponsors-grid { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.tv-sponsors-grid li { display: block; overflow: hidden; width: 17rem; height: 9.5rem; padding: 1rem 1.2rem; border-radius: 1.4rem; background: #fff; box-shadow: 0 0 2.4rem -1rem rgba(0,0,0,0.6); }
.tv-sponsors-grid img { display: block; width: 100%; height: 100%; object-fit: contain; }
.tv-sponsors.big .tv-sponsors-grid li { width: 26rem; height: 14.5rem; padding: 1.6rem 2rem; }
@media (max-width: 700px) {
    .tv-sponsors-grid li, .tv-sponsors.big .tv-sponsors-grid li { width: 9rem; height: 5.5rem; padding: 0.6rem; }
    .tv-sponsors-caption { font-size: 1.6em; }
}

/* Tournament waiver: setup (Registration Details), the registration form and the admin template editor */
.ts-waiver-box, .waiver-text { max-height: 12rem; overflow-y: auto; padding: 0.7rem 0.85rem; border-radius: 12px; border: 1px solid var(--line); background: var(--page-bg, #faf7f0); font-size: 0.84rem; line-height: 1.45; white-space: pre-wrap; text-align: left; }
.ts-waiver-box:focus, .waiver-text:focus { outline: 2px solid var(--accent-dark); outline-offset: 1px; }
.waiver-agree { display: grid; gap: 0.5rem; margin-top: 1rem; }
.waiver-title { font-weight: 700; }
.waiver-pdf-link { text-align: center; }
.waiver-check { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.6rem 0.75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-weight: 600; }
.waiver-check input { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; flex: none; }
.waiver-admin .terms-box { width: 100%; font-family: inherit; line-height: 1.45; }

/* ===== Public tournament registration (all categories): a pickleball-themed page ===== */
body:has(.rg-page) {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360' fill='none' stroke='%23fff' stroke-opacity='.13' stroke-width='2'%3E%3Cg transform='translate(56 62)'%3E%3Ccircle r='24'/%3E%3Ccircle cx='-9' cy='-10' r='3.2'/%3E%3Ccircle cx='9' cy='-9' r='3.2'/%3E%3Ccircle cx='0' cy='1' r='3.2'/%3E%3Ccircle cx='-11' cy='11' r='3.2'/%3E%3Ccircle cx='11' cy='12' r='3.2'/%3E%3C/g%3E%3Cg transform='translate(262 70) rotate(32)'%3E%3Crect x='-20' y='-30' width='40' height='52' rx='18'/%3E%3Crect x='-5.5' y='22' width='11' height='30' rx='5'/%3E%3C/g%3E%3Cg transform='translate(214 236) scale(.72)'%3E%3Ccircle r='24'/%3E%3Ccircle cx='-9' cy='-10' r='3.2'/%3E%3Ccircle cx='9' cy='-9' r='3.2'/%3E%3Ccircle cx='0' cy='1' r='3.2'/%3E%3Ccircle cx='-11' cy='11' r='3.2'/%3E%3Ccircle cx='11' cy='12' r='3.2'/%3E%3C/g%3E%3Cg transform='translate(84 282) rotate(-28)'%3E%3Crect x='-20' y='-30' width='40' height='52' rx='18'/%3E%3Crect x='-5.5' y='22' width='11' height='30' rx='5'/%3E%3C/g%3E%3Cpath d='M0 176H360M180 0V128' stroke-dasharray='6 12' stroke-opacity='.06'/%3E%3C/svg%3E"),
        radial-gradient(900px 520px at 88% -6%, rgba(198, 241, 53, 0.32), transparent 62%),
        radial-gradient(760px 520px at -12% 34%, rgba(93, 139, 55, 0.5), transparent 62%),
        linear-gradient(165deg, #0c3b2a 0%, #13553a 48%, #1d6b3b 100%);
    background-size: 360px 360px, auto, auto, auto;
}

.register-hero.rg-page { margin: 0 auto; padding: 1.1rem 1rem 2.5rem; max-width: none; overflow: visible; }
.rg-wrap { max-width: 640px; margin: 0 auto; display: grid; gap: 1rem; }

/* banner */
.rg-hero { position: relative; overflow: hidden; border-radius: 22px; min-height: 150px; display: flex; align-items: flex-end; background: linear-gradient(135deg, #1c7a43, #0f4b2f); box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.7); }
.rg-hero.no-photo { min-height: 130px; }
.rg-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rg-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 30, 20, 0.88) 8%, rgba(6, 30, 20, 0.25) 62%, rgba(6, 30, 20, 0.05)); }
.rg-hero:not(.no-photo) { min-height: clamp(190px, 38vw, 260px); }
.rg-hero-text { position: relative; padding: 1rem 1.2rem 1.15rem; color: #fff; display: grid; gap: 0.35rem; width: 100%; }
.rg-eyebrow { justify-self: start; padding: 0.22rem 0.65rem; border-radius: 999px; background: rgba(198, 241, 53, 0.95); color: #17350c; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.rg-hero h1 { margin: 0; font-size: clamp(1.5rem, 5.5vw, 2.3rem); line-height: 1.1; color: #fff; overflow-wrap: anywhere; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35); }
.rg-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; font-size: 0.88rem; font-weight: 600; color: rgba(255, 255, 255, 0.92); }

/* the form card */
.rg-card { position: relative; border: 0; border-radius: 22px; padding: 1.3rem 1.3rem 1.2rem; background: #fff; box-shadow: 0 26px 60px -26px rgba(0, 0, 0, 0.65); }
.rg-card::before { display: none; }
.rg-card.rg-center { text-align: center; padding: 1.8rem 1.4rem; }
.rg-top { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.rg-top h2 { margin: 0; font-size: 1.45rem; }
.rg-fee { flex: none; padding: 0.35rem 0.85rem; border-radius: 999px; background: #c6f135; color: #17350c; font-weight: 800; font-size: 0.95rem; box-shadow: 0 6px 14px -8px rgba(130, 170, 20, 0.9); }
.rg-fee.free { background: #e4f4cf; color: #3d6b1f; box-shadow: none; }
.rg-intro { margin: 0.5rem 0 0.9rem; color: var(--muted); font-size: 0.92rem; line-height: 1.45; }

.rg-sec { display: grid; gap: 0 0.8rem; margin: 0 0 0.3rem; padding: 0.95rem 0 0.2rem; border-top: 1px dashed var(--line); }
.rg-sec-h { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.65rem; font-size: 1rem; font-weight: 800; }
.rg-num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #c6f135; color: #17350c; font-size: 0.82rem; font-weight: 800; }
.rg-sec .field { margin-bottom: 0.8rem; min-width: 0; }
.rg-sec .field label { color: var(--ink); font-size: 0.82rem; }
.rg-sec .field input:not([type=file]), .rg-sec .field select { width: 100%; min-height: 3rem; padding: 0.55rem 0.85rem; border: 1.5px solid #e2dccb; border-radius: 12px; background: #fbfaf6; color: var(--ink); font-size: 1rem; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; }
.rg-sec .field input:focus, .rg-sec .field select:focus { outline: none; border-color: #7fb83a; background: #fff; box-shadow: 0 0 0 4px rgba(165, 198, 57, 0.28); }
.rg-sec .field input::placeholder { color: #a8a291; }
.rg-sec .field select { appearance: none; -webkit-appearance: none; padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235d8b37' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; }
@media (min-width: 560px) {
    .rg-sec:nth-of-type(2), .rg-sec:nth-of-type(3) { grid-template-columns: 1fr 1fr; }
    .rg-sec:nth-of-type(2) .field:only-of-type, .rg-sec:nth-of-type(3) .field:only-of-type { grid-column: 1 / -1; }
}

/* the submit bar stays at the bottom of the card while the form is long (mobile friendly) */
.rg-submit { position: sticky; bottom: 0; z-index: 2; margin: 1rem -1.3rem -1.2rem; padding: 0.9rem 1.3rem 1.1rem; border-radius: 0 0 22px 22px; background: linear-gradient(to top, #fff 72%, rgba(255, 255, 255, 0)); }
.rg-go { min-height: 3.4rem; border: 0; border-radius: 14px; background: linear-gradient(135deg, #c6f135, #9ad21d); color: #14300a; font-size: 1.05rem; font-weight: 800; letter-spacing: 0.01em; box-shadow: 0 14px 26px -14px rgba(120, 165, 20, 0.95); transition: transform 0.12s, box-shadow 0.12s, filter 0.12s; }
.rg-go:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }
.rg-go:active:not(:disabled) { transform: translateY(0); }
.rg-go:disabled { background: #e7e3d6; color: #8b8672; box-shadow: none; cursor: not-allowed; }
.rg-hint { margin: 0.45rem 0 0; font-size: 0.8rem; text-align: center; }

/* waiver block inside this page */
.rg-card .waiver-agree { margin-top: 0.8rem; padding-top: 0.95rem; border-top: 1px dashed var(--line); }
.rg-card .waiver-title { font-size: 1rem; font-weight: 800; }
.rg-card .waiver-text { border-radius: 12px; max-height: 10rem; }
.rg-card .waiver-check { border-radius: 12px; background: #f6fbe9; border-color: #cfe5a0; }

/* done */
.rg-done h2 { margin: 0.4rem 0 0.2rem; }
.rg-check { width: 4.2rem; height: 4.2rem; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: #c6f135; color: #17350c; box-shadow: 0 0 0 10px rgba(198, 241, 53, 0.25); }
.rg-again { margin-top: 0.6rem; }

.rg-foot { margin: 0.2rem 0 0; text-align: center; font-size: 0.8rem; color: rgba(255, 255, 255, 0.7); }
.rg-foot b { color: #fff; }
.rg-foot span { color: #c6f135; }

@media (max-width: 480px) {
    .register-hero.rg-page { padding: 0.75rem 0.7rem 2rem; }
    .rg-card { padding: 1.1rem 1rem 1rem; }
    .rg-submit { margin: 1rem -1rem -1rem; padding: 0.8rem 1rem 1rem; }
    .rg-top h2 { font-size: 1.3rem; }
}

/* registration page: a section can opt into two columns on wider screens, and the category line under the banner title */
@media (min-width: 560px) {
    .rg-sec.rg-two { grid-template-columns: 1fr 1fr; }
    .rg-sec.rg-two .field:only-of-type { grid-column: 1 / -1; }
}
.rg-cat { margin: 0; font-size: 1.05rem; font-weight: 700; color: #d9f58a; }
.rg-cat-info { margin: 0.45rem 0 0.2rem; display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; font-size: 0.85rem; font-weight: 700; color: #3d6b1f; }

/* TV sponsors slide: more room above the tournament name, and the caption sits right under it (the content starts at the top instead of floating in the middle) */
.tv[data-kind="sponsors"] .tv-head { padding-top: 2.6rem; }
.tv-slide.tv-kind-sponsors { justify-content: flex-start; padding-top: 1.6rem; }
.tv-kind-sponsors .tv-sponsors { gap: 1.8rem; }

/* Dashboard: ask the site admin for permission to create tournaments */
.dash-request { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.8rem 1.2rem; margin: 0.9rem 0; padding: 1rem 1.2rem; border-radius: 16px; border: 1px solid #cfe5a0; background: linear-gradient(135deg, #f6fbe9, #eaf5cf); }
.dash-request-text { display: grid; gap: 0.2rem; flex: 1 1 18rem; min-width: 0; }
.dash-request-text span { color: var(--muted); font-size: 0.9rem; }
.dash-request-sent { font-weight: 700; color: #3d6b1f; }
.demo-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.8rem; }
.demo-banner > div { flex: 1 1 20rem; min-width: 0; font-size: 0.9rem; }
/* A demo tournament has no registration, live or TV links: they stay on the page, greyed out */
.demo-off { opacity: 0.45; filter: grayscale(1); pointer-events: none; user-select: none; }
.match-start-btn:disabled { opacity: 0.35; cursor: not-allowed; background: transparent; color: #5fb07a; }
.match-start-btn:disabled:hover { background: transparent; color: #5fb07a; }
.play-error { margin: 0.5rem 0; }

/* A demo / test tournament's card carries a faint diagonal "DEMO" watermark across it. */
.tn-card.tn-demo::after { content: "DEMO"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-24deg); z-index: 3; pointer-events: none; font-weight: 900; font-size: 3.2rem; letter-spacing: 0.14em; color: rgba(24,28,26,.13); border: 5px solid rgba(24,28,26,.13); border-radius: 14px; padding: 0 0.7rem 0 0.9rem; line-height: 1.15; white-space: nowrap; text-shadow: 0 0 1px rgba(255,255,255,.4); }
@media (max-width: 640px) { .tn-card.tn-demo::after { font-size: 2.6rem; border-width: 4px; } }

/* TV sponsors slide: a livelier header - the tournament name in a lime-to-gold shine with a ball-and-line flourish under it, and the caption between lime flourishes with a glowing underline */
.tv[data-kind="sponsors"] .tv-title h1 { font-size: 2.3em; letter-spacing: 0.03em; white-space: normal; text-wrap: balance; line-height: 1.15; text-transform: uppercase; background: linear-gradient(90deg, #ffffff 0%, #e8ff9a 40%, #ffd45c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.12em 0.35em rgba(0,0,0,0.35)); padding-bottom: 0.08em; }
.tv[data-kind="sponsors"] .tv-title::after { content: ""; display: block; width: 11rem; height: 0.28rem; margin: 0.55rem auto 0; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--tv-lime) 25%, var(--tv-gold) 75%, transparent); box-shadow: 0 0 1rem rgba(198,241,53,0.55); }
.tv-kind-sponsors .tv-sponsors-caption { position: relative; display: flex; align-items: center; justify-content: center; gap: 1.4rem; max-width: 80rem; padding-bottom: 0.9rem; font-size: 2.7em; letter-spacing: 0.01em; color: #fff; text-shadow: 0 0.08em 0.5em rgba(0,0,0,0.35), 0 0 1.2rem rgba(198,241,53,0.28); }
.tv-kind-sponsors .tv-sponsors-caption::before, .tv-kind-sponsors .tv-sponsors-caption::after { content: ""; flex: 0 0 auto; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f4ffb8, var(--tv-lime) 55%, var(--tv-lime-deep)); box-shadow: 0 0 1rem rgba(198,241,53,0.7); }
@media (max-width: 700px) {
    .tv[data-kind="sponsors"] .tv-title h1 { font-size: 1.8em; }
    .tv-kind-sponsors .tv-sponsors-caption { font-size: 1.7em; gap: 0.8rem; }
}

/* TV sponsors caption: a flowing script font (Pacifico) in a warm lime glow, so it never looks like the tournament name above it */
.tv-kind-sponsors .tv-sponsors-caption { font-family: 'Pacifico', 'Brush Script MT', cursive; font-weight: 400; font-size: 3.1em; line-height: 1.25; letter-spacing: 0.01em; color: #f4ffb8; text-shadow: 0 0.06em 0 rgba(0,0,0,0.25), 0 0 0.9rem rgba(198,241,53,0.55), 0 0 2.4rem rgba(198,241,53,0.3); transform: rotate(-1.5deg); padding-bottom: 1.1rem; }
@media (max-width: 700px) { .tv-kind-sponsors .tv-sponsors-caption { font-size: 1.9em; } }

/* Sponsors slide: a fixed grid of 4 columns (up to 4 x 3 = 12 logos on a slide). A last row with fewer logos is centered; with 4 logos or fewer they are larger, 2 across. */
@media (min-width: 701px) {
    .tv-sponsors-grid { width: 100%; gap: 1.2rem; }
    .tv-sponsors-grid li { box-sizing: border-box; flex: 0 0 calc((100% - 3.6rem) / 4); width: auto; height: clamp(5rem, 17vh, 14rem); }
    .tv-sponsors.big .tv-sponsors-grid { max-width: 54rem; }
    .tv-sponsors.big .tv-sponsors-grid li { flex: 0 0 calc((100% - 1.2rem) / 2); width: auto; height: clamp(8rem, 26vh, 16rem); }
}

/* "Need to add players?" note on the category page: a close button in its corner; minimized it becomes a small chip in the header (no space used) */
.reset-note { position: relative; padding-right: 2.4rem; }
.reset-note-x { position: absolute; top: 0.35rem; right: 0.4rem; width: 1.7rem; height: 1.7rem; line-height: 1; font-size: 0.85rem; color: var(--muted); }
.tb-chip.tb-chip-btn { cursor: pointer; font: inherit; border: 1px dashed #c9d3cc; background: #fbf8f0; }
.tb-chip.tb-chip-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Coaches: the venue page's Coaches tab and the owner's Coaches page ---------- */
.coach-note { margin: 0 0 0.9rem; font-size: 0.9rem; }
.coach-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.coach-card { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.1rem 1.15rem; border-radius: 18px; }
.coach-card-head { display: flex; align-items: center; gap: 0.85rem; }
.coach-card-head h3 { margin: 0; font-size: 1.1rem; line-height: 1.2; }
.coach-headline { margin-top: 0.15rem; font-size: 0.82rem; font-weight: 600; color: var(--accent-dark, #4d7a16); }
.coach-avatar-lg, .coach-avatar { flex: none; display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; background: #1f2a24; color: #c6f135; font-weight: 800; }
.coach-avatar-lg { width: 4.2rem; height: 4.2rem; font-size: 1.35rem; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(24,28,26,.18); }
.coach-avatar { width: 3rem; height: 3rem; font-size: 1rem; }
.coach-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.coach-tags span { padding: 0.18rem 0.6rem; border-radius: 999px; background: #eef5dc; color: #3f5f12; font-size: 0.74rem; font-weight: 700; }
.coach-bio { margin: 0; font-size: 0.88rem; line-height: 1.5; white-space: pre-line; color: var(--ink); }
.coach-facts { margin: 0; display: grid; gap: 0.35rem; padding: 0.7rem 0.8rem; border-radius: 12px; background: #fbf8f0; border: 1px solid var(--line); }
.coach-facts div { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.84rem; }
.coach-facts dt { color: var(--muted); font-weight: 600; }
.coach-facts dd { margin: 0; font-weight: 700; text-align: right; }
.coach-call { margin-top: auto; justify-content: center; text-align: center; }

.coach-admin .coach-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.coach-row { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.95rem; margin: 0; flex-wrap: wrap; }
.coach-row.hidden-coach { opacity: 0.7; }
.coach-row-main { flex: 1 1 12rem; min-width: 0; }
.coach-row-actions { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.coach-form { margin-bottom: 1rem; }
.coach-photo-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.coach-two { display: grid; gap: 0.8rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .coach-two { grid-template-columns: 1fr 1fr; } }
.coach-check { display: flex; align-items: center; gap: 0.5rem; margin: 0.4rem 0 1rem; font-weight: 600; }
.coach-form-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

/* Book a lesson */
.coach-book { margin-top: auto; justify-content: center; background: #1f2a24; color: #c6f135; }
.coach-book:hover { transform: translateY(-1px); background: #29372f; }
.coach-call-link { text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.coach-call-link:hover { color: var(--ink); text-decoration: underline; }
.lesson-box { max-width: 30rem; width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); overflow: auto; position: relative; }
.lesson-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.4rem; }
.lesson-head h3 { margin: 0; font-size: 1.1rem; }
.lesson-three { display: grid; gap: 0.7rem; grid-template-columns: 1.4fr 1fr 0.7fr; }
@media (max-width: 480px) { .lesson-three { grid-template-columns: 1fr 1fr; } .lesson-three .field:first-child { grid-column: 1 / -1; } }
.lesson-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.4rem; }
.lesson-done { text-align: center; padding: 0.6rem 0.4rem; }
.lesson-done-icon { width: 3.4rem; height: 3.4rem; margin: 0 auto 0.6rem; border-radius: 50%; display: grid; place-items: center; background: #c6f135; color: #1f2a24; font-size: 1.6rem; font-weight: 800; }
.lesson-done h3 { margin: 0 0 0.4rem; }
.lesson-done p { margin: 0 0 1rem; font-size: 0.92rem; line-height: 1.5; }
.lesson-requests { margin-bottom: 1rem; }
.lesson-req-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.lesson-req { display: flex; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.lesson-req.pending { background: #fbfcf3; border-color: #cfe0a8; }
.lesson-req-main { flex: 1 1 14rem; min-width: 0; font-size: 0.9rem; }
.lesson-req-when { margin-top: 0.15rem; font-weight: 700; font-size: 0.84rem; }
.lesson-req-contact, .lesson-req-note { margin-top: 0.15rem; font-size: 0.82rem; color: var(--muted); }
.lesson-req-note { font-style: italic; }
.lesson-req-actions { display: flex; align-items: center; gap: 0.4rem; }

/* Demo tournament: the standings numbers (W-L, Total, Diff) are blurred so only the real thing shows results. */
.rr-standings-table.demo-blur tbody td:nth-child(3), .rr-standings-table.demo-blur tbody td:nth-child(4), .rr-standings-table.demo-blur tbody td:nth-child(5) { filter: blur(6px); user-select: none; pointer-events: none; }

/* Venue page tabs on a phone: five tabs stay on one line (tighter), and scroll sideways if a screen is still too narrow. */
.vb-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.vb-tabs::-webkit-scrollbar { display: none; }
.vb-tab { white-space: nowrap; flex: 0 0 auto; }
@media (max-width: 520px) {
    .vb-tabs { gap: 0.25rem; }
    .vb-tab { padding: 0.42rem 0.46rem; font-size: 0.78rem; }
}

/* Connection lost on the organizer's category page: a slim banner instead of a full-screen dialog, so the page stays readable and Print (a plain browser button) keeps working. */
.components-offline-print { display: none; }
dialog#components-reconnect-modal.offline-banner { position: fixed; top: 0; left: 0; right: 0; width: auto; max-width: none; margin: 0; padding: 0.55rem 1rem; border: 0; border-bottom: 2px solid #f0c24b; border-radius: 0 0 12px 12px; background: #fff7e0; box-shadow: 0 6px 18px rgba(0,0,0,.15); opacity: 1; animation: none; z-index: 2000; }
dialog#components-reconnect-modal.offline-banner .components-reconnect-container { display: flex; align-items: center; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }
dialog#components-reconnect-modal.offline-banner .components-reconnect-container > p:not(.components-offline-print):not(.components-offline-print-session),
dialog#components-reconnect-modal.offline-banner .components-rejoining-animation { display: none !important; }
dialog#components-reconnect-modal.offline-banner .components-offline-print { display: block !important; margin: 0; font-size: 0.88rem; font-weight: 600; color: #6b4e00; text-align: center; }
.components-offline-print-session, .components-offline-actions { display: none; }
dialog#components-reconnect-modal.offline-banner.offline-session .components-offline-print { display: none !important; }
dialog#components-reconnect-modal.offline-banner.offline-session .components-offline-print-session { display: block !important; margin: 0; font-size: 0.88rem; font-weight: 600; color: #6b4e00; text-align: center; }
dialog#components-reconnect-modal.offline-banner .components-offline-actions { display: flex; gap: 0.5rem; }
dialog#components-reconnect-modal.offline-banner:not(.offline-session) #components-offline-print-board { display: none; }
.components-offline-actions button { min-height: 2.3rem; padding: 0.3rem 0.95rem; border: 0; border-radius: 999px; background: #1f2a24; color: #c6f135; font-weight: 800; font-size: 0.85rem; font-family: inherit; cursor: pointer; }
.components-offline-actions button#components-offline-retry { background: transparent; color: #1f2a24; box-shadow: inset 0 0 0 2px #1f2a24; }
/* "Print standings" on the Open Play board (offline only): prints the standings and the recent matches, nothing else. */
@media print {
    body.pc-print-board *:not(.pc-print-path):not(.pc-print-target):not(.pc-print-target *) { display: none !important; }
    body.pc-print-board .pc-print-path { display: block !important; position: static !important; width: auto !important; max-width: none !important; height: auto !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; background: none !important; }
    body.pc-print-board { background: #fff !important; }
    body.pc-print-board .pc-print-target { box-shadow: none !important; margin: 0 0 1rem !important; }
    body.pc-print-board .pc-print-title { margin: 0 0 1rem !important; padding-bottom: 0.6rem !important; border-bottom: 2px solid #1f2a24 !important; }
    body.pc-print-board .pc-print-title h1 { margin: 0 !important; font-size: 1.5rem !important; }
    body.pc-print-board .pc-print-title p { margin: 0.2rem 0 0 !important; font-size: 0.95rem !important; color: #333 !important; }
    body.pc-print-board .pc-print-title .pc-print-note { font-size: 0.8rem !important; font-style: italic; color: #666 !important; }
    body.pc-print-board .pc-print-target .recent-edit, body.pc-print-board .pc-print-target .link-btn { display: none !important; }
    body.pc-print-board .pc-print-target * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media print { dialog#components-reconnect-modal { display: none !important; } }

/* Receipt picker on the registration forms: upload progress and the attached file */
.rcp-status { margin: 0.45rem 0 0; font-size: 0.84rem; font-weight: 600; line-height: 1.4; }
.rcp-status.busy { color: #6b4e00; }
.rcp-status.ok { color: #2f6b12; }
.rcp-status.err { color: var(--danger, #b3261e); }
.rcp-name { font-weight: 500; word-break: break-all; }
.rcp-remove { border: 0; background: none; padding: 0 0.2rem; font: inherit; font-weight: 700; color: var(--muted); text-decoration: underline; cursor: pointer; }
.rcp-spin { display: inline-block; width: 0.8rem; height: 0.8rem; margin-right: 0.3rem; vertical-align: -0.1rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rcp-spin 0.8s linear infinite; }
@keyframes rcp-spin { to { transform: rotate(360deg); } }

/* Waiver reader on the registration forms: a full-screen page with the PDF's pages, a Close button that is always in view, and the agree box in the footer. */
.waiver-pdf-link { text-align: center; cursor: pointer; font-weight: 700; }
.wv-modal { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; height: 100vh; height: 100dvh; background: #e9e6dc; outline: none; }
.wv-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.6rem 1rem; padding-top: calc(0.6rem + env(safe-area-inset-top, 0px)); background: #fff; border-bottom: 1px solid var(--line); }
.wv-title { font-size: 1.1rem; }
.wv-close { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0.4rem 1.1rem; border: 0; border-radius: 999px; background: var(--ink, #1f2a24); color: #fff; font: inherit; font-weight: 800; font-size: 0.95rem; cursor: pointer; }
.wv-close:hover { background: #33423a; }
.wv-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0.8rem; }
.wv-pages { max-width: 52rem; margin: 0 auto; }
.wv-page { display: block; width: 100%; height: auto; margin: 0 auto 0.8rem; background: #fff; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.wv-status { max-width: 52rem; margin: 2rem auto; text-align: center; font-weight: 600; color: var(--muted); }
.wv-failed p { margin: 0 0 0.8rem; color: var(--ink); }
.wv-end { text-align: center; margin: 0.4rem 0 1rem; font-size: 0.85rem; }
.wv-spin { display: inline-block; width: 1rem; height: 1rem; margin-right: 0.4rem; vertical-align: -0.15rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rcp-spin 0.8s linear infinite; }
.wv-foot { flex: none; display: grid; gap: 0.6rem; padding: 0.7rem 1rem; padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08); }
.wv-check { margin: 0; }
.wv-done { min-height: 3rem; font-size: 1rem; font-weight: 800; justify-content: center; }
@media (min-width: 720px) {
    .wv-foot { grid-template-columns: 1fr auto; align-items: center; }
    .wv-done { padding-inline: 2rem; }
}

/* Time dropdown (TimeSelect): same look as the other form fields. */
select.time-select { width: 100%; }

/* Tournaments page: "+ New Tournament" and "Demo Tournament" side by side. */
.tn-hero-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.tn-btn-ghost:disabled { opacity: 0.5; cursor: not-allowed; }

/* Demo tournament: a greyed-out box carries a visible "Demo - switched off" tag, so it is clear why it is off. The tag itself is not greyed. */
.demo-off-card { position: relative; user-select: none; }
.demo-off-card > :not(.demo-off-chip) { opacity: 0.45; filter: grayscale(1); pointer-events: none; }
.demo-off-chip { position: absolute; top: -0.7rem; right: 1rem; z-index: 3; box-shadow: 0 2px 6px rgba(107, 78, 0, 0.18); display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.65rem; border-radius: 999px; background: #fff3c4; border: 1px solid #f0d27a; color: #6b4e00; font-size: 0.72rem; font-weight: 800; white-space: nowrap; cursor: help; }
.demo-note { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0 0 1rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: #fff8dc; border: 1px solid #f0d27a; color: #5c4400; font-size: 0.88rem; line-height: 1.45; }
.demo-note b { color: #3f2f00; }

/* Change password pop-up (account menu) */
.cp-backdrop { position: fixed; inset: 0; z-index: 3500; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 18, 26, 0.55); backdrop-filter: blur(3px); animation: cp-fade 0.18s ease-out; }
.cp-box { width: 100%; max-width: 26rem; max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.4rem 1.4rem 1.2rem; border-radius: 22px; background: #fffdf8; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45); animation: cp-pop 0.24s cubic-bezier(.2, .9, .3, 1.1); }
.cp-head { display: flex; align-items: flex-start; gap: 0.8rem; margin-bottom: 1rem; }
.cp-head h2 { margin: 0; font-size: 1.25rem; line-height: 1.2; }
.cp-head p { margin: 0.2rem 0 0; font-size: 0.84rem; color: var(--muted); line-height: 1.4; }
.cp-lock { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 14px; background: #e8f3cf; font-size: 1.3rem; }
.cp-x { flex: none; margin-left: auto; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer; }
.cp-x:hover { background: #efeadb; color: var(--ink); }
.cp-error { margin: 0 0 0.9rem; padding: 0.6rem 0.8rem; border-radius: 12px; background: #fdecea; border: 1px solid #f3b9b2; color: #8c2018; font-size: 0.86rem; font-weight: 600; animation: cp-shake 0.35s; }
.cp-field { margin-bottom: 0.85rem; }
.cp-field label { display: block; margin-bottom: 0.3rem; font-size: 0.82rem; font-weight: 700; color: var(--ink); }
.cp-input { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s, box-shadow .15s; }
.cp-input:focus-within { border-color: var(--accent-dark, #6f9a1c); box-shadow: 0 0 0 3px rgba(165, 198, 57, 0.28); }
.cp-input.bad { border-color: #d9534f; }
.cp-input input { flex: 1; min-width: 0; padding: 0.7rem 0.8rem; border: 0; background: transparent; font: inherit; font-size: 1rem; outline: none; }
.cp-eye { flex: none; padding: 0 0.7rem; height: 2.6rem; border: 0; background: transparent; font-size: 1.05rem; cursor: pointer; opacity: 0.7; }
.cp-eye:hover { opacity: 1; }
.cp-meter { height: 6px; margin-top: 0.5rem; border-radius: 999px; background: #ece6d6; overflow: hidden; }
.cp-meter span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .25s, background .25s; }
.cp-meter span.s0 { width: 12%; background: #d9534f; }
.cp-meter span.s1 { width: 35%; background: #e8a33d; }
.cp-meter span.s2 { width: 68%; background: #a5c639; }
.cp-meter span.s3 { width: 100%; background: #3f8f2a; }
.cp-meter-label { margin-top: 0.25rem; font-size: 0.76rem; font-weight: 700; }
.cp-meter-label.s0 { color: #c0392b; } .cp-meter-label.s1 { color: #b9741a; } .cp-meter-label.s2 { color: #6b8a12; } .cp-meter-label.s3 { color: #2f6b12; }
.cp-rules { list-style: none; margin: 0 0 1rem; padding: 0.6rem 0.8rem; border-radius: 12px; background: #f6f2e6; display: grid; gap: 0.25rem; font-size: 0.82rem; color: var(--muted); }
.cp-rules li span { display: inline-block; width: 1.1rem; font-weight: 800; }
.cp-rules li.ok { color: #2f6b12; font-weight: 600; }
.cp-actions { display: flex; gap: 0.6rem; }
.cp-actions .cp-btn { flex: 1; justify-content: center; }
.cp-btn { min-height: 2.9rem; font-weight: 800; }
.cp-done { text-align: center; padding: 0.8rem 0.4rem 0.2rem; }
.cp-done h2 { margin: 0.2rem 0 0.4rem; font-size: 1.3rem; }
.cp-done p { margin: 0 0 1.2rem; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }
.cp-done-ic { width: 4rem; height: 4rem; margin: 0 auto 0.6rem; border-radius: 50%; display: grid; place-items: center; background: #c6f135; color: #1f2a24; font-size: 2rem; font-weight: 800; animation: cp-pop 0.4s cubic-bezier(.2, .9, .3, 1.3); }
.cp-done .cp-btn { min-width: 9rem; }
@keyframes cp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cp-pop { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes cp-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (max-width: 480px) { .cp-backdrop { align-items: flex-end; padding: 0; } .cp-box { max-width: none; border-radius: 22px 22px 0 0; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .cp-backdrop, .cp-box, .cp-error, .cp-done-ic { animation: none; } }

/* "Add a court" reads as a button, not a link: a dashed, tinted bar with a + badge that turns into a - when it is open. */
.vs-add { border-top: 0; padding-top: 0.2rem; }
.vs-add summary { list-style: none; display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin: 0.6rem 0 0.8rem; padding: 0.85rem 1rem; min-height: 3rem; border: 2px dashed #a5c639; border-radius: 14px; background: var(--brand-tint); color: #3f5f12; font-size: 1rem; font-weight: 800; cursor: pointer; transition: background .15s, border-color .15s, transform .12s; user-select: none; }
.vs-add summary::-webkit-details-marker { display: none; }
.vs-add summary::before { content: "+"; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #1f2a24; color: #c6f135; font-size: 1.25rem; line-height: 1; font-weight: 800; }
.vs-add[open] summary::before { content: "−"; }
.vs-add summary:hover { background: #dcecb8; border-style: solid; transform: translateY(-1px); }
.vs-add summary:focus-visible { outline: 3px solid rgba(165, 198, 57, 0.55); outline-offset: 2px; }
.vs-add[open] summary { border-style: solid; background: #fff; }

/* Opening hours / price confirmation: the days that will be added, and a clear warning for days that clash with an existing entry. */
.confirm-body .confirm-line { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--ink); }
.confirm-body .confirm-clash { margin: 0; padding: 0.6rem 0.75rem; border-radius: 10px; background: #fff3c4; border: 1px solid #f0d27a; color: #5c4400; font-size: 0.88rem; line-height: 1.45; }

/* Add hours / Add price pop-ups (court page): a centred dialog on a computer, a full-width bottom sheet on a phone, with the buttons always in reach. */
.cs-pop-back { position: fixed; inset: 0; z-index: 3200; display: flex; align-items: center; justify-content: center; padding: 1rem; background: rgba(15, 18, 26, 0.55); backdrop-filter: blur(3px); animation: cp-fade 0.18s ease-out; }
.cs-pop { display: flex; flex-direction: column; width: 100%; max-width: 34rem; max-height: calc(100dvh - 2rem); border-radius: 22px; background: #fffdf8; box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45); animation: cp-pop 0.24s cubic-bezier(.2, .9, .3, 1.1); outline: none; }
.cs-pop-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 1rem 1.2rem 0.6rem; }
.cs-pop-head h3 { margin: 0; font-size: 1.2rem; }
.cs-pop-x { flex: none; width: 2.4rem; height: 2.4rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.05rem; cursor: pointer; }
.cs-pop-x:hover { background: #efeadb; color: var(--ink); }
.cs-pop-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0.2rem 1.2rem 1rem; display: grid; gap: 0.7rem; align-content: start; }
.cs-pop-label { font-size: 0.78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); margin-bottom: -0.3rem; }
.cs-pop-preview { padding: 0.7rem 0.85rem; border-radius: 12px; background: #f1f6e3; border: 1px solid #d6e5b0; }
.cs-pop-preview .confirm-line, .cs-pop-preview .confirm-clash { margin: 0; }
.cs-pop-preview .confirm-clash { margin-top: 0.5rem; }
.cs-pop-foot { flex: none; display: flex; gap: 0.6rem; justify-content: flex-end; padding: 0.8rem 1.2rem; padding-bottom: calc(0.8rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: #fffdf8; border-radius: 0 0 22px 22px; }
.cs-pop-foot .btn { min-height: 3rem; min-width: 7rem; font-weight: 800; justify-content: center; }
.cs-pop-foot .btn-primary { flex: 1 1 auto; }
.cs-pop .cs-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 560px) {
    .cs-pop-back { align-items: flex-end; padding: 0; }
    .cs-pop { max-width: none; max-height: 92dvh; border-radius: 22px 22px 0 0; }
    .cs-pop .cs-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-pop .cs-fields > :nth-child(3) { grid-column: 1 / -1; }
    .cs-pop-foot { border-radius: 0; }
    .cs-pop-foot .btn:first-child { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .cs-pop-back, .cs-pop { animation: none; } }

/* ===== Add hours / Add price pop-ups: roomy layout (these rules replace the first, tighter version above) ===== */
.cs-pop { max-width: 36rem; }
.cs-pop-head { align-items: flex-start; padding: 1.3rem 1.5rem 0.9rem; border-bottom: 1px solid var(--line); }
.cs-pop-head h3 { font-size: 1.3rem; line-height: 1.2; }
.cs-pop-sub { margin: 0.25rem 0 0; font-size: 0.92rem; color: var(--muted); }
.cs-pop-close { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.6rem; padding: 0.4rem 1rem; border: 0; border-radius: 999px; background: var(--ink, #1f2a24); color: #fff; font: inherit; font-size: 0.9rem; font-weight: 800; cursor: pointer; }
.cs-pop-close:hover { background: #33423a; }
.cs-pop-body { padding: 1.2rem 1.5rem 1.4rem; gap: 1.5rem; }
.cs-pop-sec { display: grid; gap: 0.75rem; }
.cs-pop-sec h4 { margin: 0; display: flex; align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 800; color: var(--ink); }
.cs-pop-sec h4 span { flex: none; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #1f2a24; color: #c6f135; font-size: 0.85rem; font-weight: 800; }

/* days: seven in a row on a computer, a tidy 4 + 3 grid on a phone */
.cs-pop .day-picker { margin: 0; }
.cs-pop .day-chips { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.5rem; }
.cs-pop .day-check { min-height: 48px; padding: 0 0.3rem; justify-content: center; gap: 0.35rem; font-size: 0.9rem; font-weight: 700; flex: none; }
.cs-pop .day-presets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; font-size: 0.85rem; }
.cs-pop .day-presets .link-btn { padding: 0.45rem 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 700; text-decoration: none; cursor: pointer; }
.cs-pop .day-presets .link-btn:hover { background: var(--brand-tint); border-color: var(--accent); }

/* fields: label above, big readable box */
.cs-pop-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.cs-pop-field { display: grid; gap: 0.4rem; min-width: 0; }
.cs-pop-field label { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--ink); text-transform: none; letter-spacing: 0; }
.cs-pop-field input:not([type="checkbox"]) { width: 100%; min-height: 3rem; padding: 0.5rem 0.8rem; font: inherit; font-size: 1rem; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); }
.cs-pop-field input:focus { outline: 3px solid rgba(165, 198, 57, 0.4); border-color: var(--accent-dark); }
.cs-pop-field input:disabled { background: #efebe1; color: var(--muted); cursor: not-allowed; }
.cs-pop-small { max-width: 14rem; }
.cs-pop-money { max-width: 16rem; }
.cs-pop-peso { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; }
.cs-pop-peso:focus-within { outline: 3px solid rgba(165, 198, 57, 0.4); border-color: var(--accent-dark); }
.cs-pop-peso span { padding-left: 0.9rem; font-size: 1.1rem; font-weight: 800; color: var(--muted); }
.cs-pop-peso input:not([type="checkbox"]) { border: 0; min-height: 3rem; outline: none; border-radius: 12px; font-size: 1.1rem; font-weight: 700; }
.cs-pop-check { display: flex; align-items: flex-start; gap: 0.7rem; margin: 0; padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 0.92rem; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; cursor: pointer; }
.cs-pop-check input { flex: none; width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; accent-color: var(--accent-dark); }
.cs-pop-check small { display: block; color: var(--muted); font-weight: 500; }
.cs-pop-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cs-pop-chip { min-height: 2.8rem; padding: 0.4rem 1.1rem; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 0.92rem; font-weight: 700; cursor: pointer; }
.cs-pop-chip:hover { border-color: var(--accent-dark); }
.cs-pop-chip.on { background: var(--ink, #1f2a24); border-color: var(--ink, #1f2a24); color: #c6f135; }

/* what will happen, and the warning when days clash */
.cs-pop-preview { padding: 1rem 1.1rem; border-radius: 14px; background: #f1f6e3; border: 1px solid #d6e5b0; font-size: 0.95rem; line-height: 1.5; }
.cs-pop-preview:empty { display: none; }
.cs-pop-preview .confirm-line { margin: 0; }
.cs-pop-preview .confirm-clash { margin: 0.7rem 0 0; padding: 0.8rem 0.9rem; font-size: 0.9rem; line-height: 1.55; }
.cs-pop-preview .confirm-clash:first-child { margin-top: 0; }
.cs-pop .cs-err { margin: 0; }
.cs-pop-foot { gap: 0.8rem; padding: 1rem 1.5rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
.cs-pop-foot .btn { min-height: 3.2rem; font-size: 1rem; }

/* phone */
@media (max-width: 560px) {
    .cs-pop-back { padding: 0; }
    .cs-pop { max-width: none; }
    .cs-pop-head { padding: 1rem 1rem 0.8rem; }
    .cs-pop-head h3 { font-size: 1.2rem; }
    .cs-pop-body { padding: 1rem 1rem 1.2rem; gap: 1.3rem; }
    .cs-pop .day-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .cs-pop .day-check { min-height: 50px; font-size: 0.95rem; }
    .cs-pop-pair { gap: 0.7rem; }
    .cs-pop-small, .cs-pop-money { max-width: none; }
    .cs-pop-foot { padding: 0.9rem 1rem; padding-bottom: calc(0.9rem + env(safe-area-inset-bottom, 0px)); }
    .cs-pop-close { padding: 0.4rem 0.85rem; }
}

/* the Remove button in the hours / price / blocked-time lists */
.cs-remove { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0.35rem 1rem; border: 1px solid #e3b5ae; border-radius: 999px; background: #fff; color: #b3261e; font: inherit; font-size: 0.88rem; font-weight: 800; cursor: pointer; }
.cs-remove:hover { background: #fdeceb; border-color: #d9857b; }
.cs-remove:focus-visible { outline: 3px solid rgba(217, 83, 79, 0.35); outline-offset: 2px; }

/* ===== modern time and booking-length controls inside the Add hours / Add price pop-ups ===== */
.cs-pop select.time-select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 3.2rem; padding: 0.5rem 2.6rem 0.5rem 1rem; font: inherit; font-size: 1.15rem; font-weight: 800; color: var(--ink); border: 1.5px solid var(--line); border-radius: 14px; background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23566' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 0.9rem center; cursor: pointer; box-shadow: 0 1px 2px rgba(24, 28, 26, 0.05); }
.cs-pop select.time-select:hover { border-color: var(--accent-dark); }
.cs-pop select.time-select:focus { outline: 3px solid rgba(165, 198, 57, 0.4); border-color: var(--accent-dark); }
.cs-pop-midnight { display: flex; align-items: center; min-height: 3.2rem; padding: 0.5rem 1rem; border: 1.5px dashed #c9d3cc; border-radius: 14px; background: #f6f2e6; font-size: 1.05rem; font-weight: 800; color: var(--ink); }
.cs-pop-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cs-pop-qchip { min-height: 2.4rem; padding: 0.25rem 0.8rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: background .12s, border-color .12s; }
.cs-pop-qchip:hover { border-color: var(--accent-dark); background: var(--brand-tint); }
.cs-pop-qchip.on { background: var(--ink, #1f2a24); border-color: var(--ink, #1f2a24); color: #c6f135; }

/* booking length: one segmented control */
.cs-pop-seg { display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0.35rem; border-radius: 16px; background: #efeadb; }
.cs-pop-segbtn { flex: 1 1 auto; min-height: 2.9rem; padding: 0.4rem 0.9rem; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 0.95rem; font-weight: 800; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.cs-pop-segbtn:hover { color: var(--ink); }
.cs-pop-segbtn.on { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(24, 28, 26, 0.18); }
.cs-pop-stepper { display: flex; align-items: center; gap: 0.7rem; }
.cs-pop-step { flex: none; width: 3.2rem; height: 3.2rem; border: 1.5px solid var(--line); border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.5rem; font-weight: 800; line-height: 1; cursor: pointer; }
.cs-pop-step:hover:not(:disabled) { border-color: var(--accent-dark); background: var(--brand-tint); }
.cs-pop-step:disabled { opacity: 0.4; cursor: not-allowed; }
.cs-pop-stepval { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; min-height: 3.2rem; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; font-size: 0.95rem; font-weight: 700; color: var(--muted); text-transform: none; letter-spacing: 0; }
.cs-pop-stepval input { width: 4.5rem; min-height: 0 !important; padding: 0 !important; border: 0 !important; outline: none !important; text-align: right; font-size: 1.3rem !important; font-weight: 800 !important; color: var(--ink); background: transparent !important; -moz-appearance: textfield; }
.cs-pop-stepval input::-webkit-outer-spin-button, .cs-pop-stepval input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-pop-stepval:focus-within { outline: 3px solid rgba(165, 198, 57, 0.4); border-color: var(--accent-dark); }
@media (max-width: 560px) {
    .cs-pop-pair { grid-template-columns: 1fr; gap: 1.1rem; }
    .cs-pop-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Live page, Next matches: the court each match is on, as a clear tag at the end of the row */
.fl-court { justify-self: end; align-self: center; max-width: 7.5rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: #14230a; color: #c6f135; font-size: 0.78rem; font-weight: 800; line-height: 1.2; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 380px) { .fl-court { max-width: 5.5rem; padding: 0.3rem 0.6rem; } }

/* Next Match panel, "Showing on the TV now": the court each match is on */
.nm-courtchip { flex: none; margin-left: auto; max-width: 6.5rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: #14230a; color: #c6f135; font-size: 0.72rem; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* TV, Next matches: no number badge any more - the row is the match, with the court as a big tag at the end */
.tv-queue-wide li { grid-template-columns: 1fr auto; }
.tv-court { justify-self: end; align-self: center; padding: 0.35em 0.9em; border-radius: 999px; background: var(--tv-lime, #c6f135); color: #14230a; font-size: 1.05em; font-weight: 800; line-height: 1.15; white-space: nowrap; }
.tv-queue li.go .tv-court { background: var(--tv-gold, #ffd45c); color: #3a2700; }

/* TV header: the real thePickleChamp logo and wordmark (the + Champ in the brand lime), not a drawn ball */
.tv-brand { gap: 0.6rem; color: #fff; }
.tv-brand-mark { flex: none; width: 3.7em; height: 3.7em; border-radius: 22%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2), 0 4px 14px rgba(0, 0, 0, 0.35); }
.tv-brand-text { font-weight: 800; font-size: 1.4em; letter-spacing: 0.01em; color: #fff; }
.tv-brand-text i { font-style: normal; color: var(--tv-lime, #c6f135); }
@media (max-width: 760px), (max-aspect-ratio: 1/1) { .tv-brand-mark { width: 2.7em; height: 2.7em; } .tv-brand-text { font-size: 1.15em; } }

/* TV header on every slide: the tournament name and the category name use the look of the sponsors slide - uppercase, a white-to-lime-to-gold shine and a thin accent line under the title. */
.tv .tv-title h1 { letter-spacing: 0.03em; text-transform: uppercase; background: linear-gradient(90deg, #ffffff 0%, #e8ff9a 40%, #ffd45c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.12em 0.35em rgba(0, 0, 0, 0.35)); padding-bottom: 0.08em; }
.tv .tv-tourney { letter-spacing: 0.18em; font-weight: 800; background: linear-gradient(90deg, #e8ff9a 0%, #ffd45c 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0.1em 0.25em rgba(0, 0, 0, 0.3)); }
.tv .tv-title::after { content: ""; display: block; width: 9rem; height: 0.24rem; margin: 0.45rem auto 0; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--tv-lime) 25%, var(--tv-gold) 75%, transparent); box-shadow: 0 0 1rem rgba(198, 241, 53, 0.5); }
@media (max-width: 760px), (max-aspect-ratio: 1/1) { .tv .tv-title::after { margin-left: 0; width: 6rem; } }
/* The uppercase category name wraps to two lines (balanced) instead of being cut off with "...". */
.tv .tv-title h1 { white-space: normal; text-wrap: balance; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.12; letter-spacing: 0.02em; }

/* TV standings: the note under the tables when there are more brackets than fit on one slide */
.tv .tv-bracket-note { width: fit-content; max-width: 100%; margin: 1.4rem auto 0; flex: none; padding: 0.5em 1.2em; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid var(--tv-line, rgba(255, 255, 255, 0.2)); color: #fff; font-size: 1em; font-weight: 700; letter-spacing: 0.01em; text-align: center; }

/* Court page: "No hours yet" / "No prices yet" is a warning - customers cannot book the court until both are set. */
.cs-empty.cs-empty-alert { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border-radius: 12px; background: #fff3c4; border: 1.5px solid #f0b429; color: #6b3f00; font-size: 0.95rem; font-weight: 800; line-height: 1.35; }
.cs-empty.cs-empty-alert span { flex: none; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: #f0b429; color: #3f2600; font-size: 1rem; }