/* ============================================================
   Site Stylesheet
   Full-width modern layout — Maroon & Cyan palette

   To re-theme for another community, update the CSS variables
   below. The rest of the stylesheet derives from these values.
   ============================================================ */

/* --- CSS Variables (Theme) --- */
:root {
    /* ── Brand ─────────────────────────────────────────────── */
    --color-primary: #7A1530;
    --color-primary-light: #9B2847;
    --color-primary-dark: #5C0F24;
    --color-primary-tint: rgba(122, 21, 48, 0.08);
    --color-primary-tint-light: rgba(122, 21, 48, 0.04);
    --color-primary-border: rgba(122, 21, 48, 0.15);
    --color-accent: #00AEEF;
    --color-accent-hover: #008DC0;
    --color-accent-tint: rgba(0, 174, 239, 0.08);
    --color-accent-tint-light: rgba(0, 174, 239, 0.04);
    --color-accent-border: rgba(0, 174, 239, 0.40);
    --color-accent-focus: rgba(0, 174, 239, 0.12);
    --color-highlight: #D4A843;
    --color-highlight-dark: #B8922F;
    --color-highlight-tint: rgba(212, 168, 67, 0.10);
    /* ── Surfaces ──────────────────────────────────────────── */
    --color-bg: #F5F3F0;
    --color-surface: #FFFFFF;
    --color-surface-alt: #FCFAF7;
    --color-card-bg: #FFF8F0;
    --color-card-hover: #FDEEDD;
    --color-overlay: rgba(0, 0, 0, 0.45);
    /* ── Text ──────────────────────────────────────────────── */
    --color-text: #2C2C2C;
    --color-text-muted: #666666;
    --color-text-subtle: #8A8A8A;
    --color-text-inverse: #FFFFFF;
    --color-heading: #1F1F1F;
    --color-link: var(--color-accent);
    --color-link-hover: var(--color-accent-hover);
    /* ── Borders ───────────────────────────────────────────── */
    --color-border: rgba(44, 44, 44, 0.12);
    --color-border-strong: rgba(44, 44, 44, 0.20);
    --color-divider: rgba(44, 44, 44, 0.08);
    /* ── Buttons ───────────────────────────────────────────── */
    --color-button-primary-bg: #7A1530;
    --color-button-primary-text: #FFFFFF;
    --color-button-primary-hover: #5C0F24;
    --color-button-primary-border: #7A1530;
    --color-button-secondary-bg: #00AEEF;
    --color-button-secondary-text: #FFFFFF;
    --color-button-secondary-hover: #008DC0;
    --color-button-secondary-border: #00AEEF;
    --color-button-outline-bg: transparent;
    --color-button-outline-text: #7A1530;
    --color-button-outline-border: #7A1530;
    --color-button-outline-hover-bg: rgba(122, 21, 48, 0.08);
    --color-button-danger-bg: #C0392B;
    --color-button-danger-text: #FFFFFF;
    --color-button-danger-hover: #A73125;
    --color-button-danger-border: #C0392B;
    --color-button-disabled-bg: #D8D8D8;
    --color-button-disabled-text: #8C8C8C;
    --color-button-disabled-border: #D0D0D0;
    /* ── Forms ─────────────────────────────────────────────── */
    --color-input-bg: #FFFFFF;
    --color-input-border: #D1D5DB;
    --color-input-text: #2C2C2C;
    --color-input-placeholder: #8A8A8A;
    --color-input-focus: #00AEEF;
    --color-input-focus-ring: rgba(0, 174, 239, 0.15);
    --color-input-label: #1F1F1F;
    --color-input-help-text: #666666;
    --color-input-disabled-bg: #F3F3F3;
    --color-input-disabled-text: #8A8A8A;
    --color-input-disabled-border: rgba(44, 44, 44, 0.10);
    /* ── Layout ────────────────────────────────────────────── */
    --color-navbar-bg: #1A1A2E;
    --color-navbar-text: #FFFFFF;
    --color-navbar-link: rgba(255, 255, 255, 0.88);
    --color-navbar-link-hover: #FFFFFF;
    --color-navbar-border: rgba(255, 255, 255, 0.08);
    --color-header-bg: #FFFFFF;
    --color-header-text: #1F1F1F;
    --color-header-border: rgba(0, 0, 0, 0.08);
    --color-footer-bg: #1E1118;
    --color-footer-text: #D4C5C9;
    --color-footer-link: #FFFFFF;
    --color-footer-link-hover: var(--color-highlight);
    /* ── Hero ──────────────────────────────────────────────── */
    --color-hero-overlay-start: rgba(122, 21, 48, 0.65);
    --color-hero-overlay-mid: rgba(90, 15, 36, 0.58);
    --color-hero-overlay-end: rgba(30, 5, 15, 0.75);
    /* ── Cards ─────────────────────────────────────────────── */
    /* Card variant v1 */
    --color-card-v1-header-bg: #017ED1;
    --color-card-v1-header-bg-dark: #016BB2;
    --color-card-v1-header-text: #FFFFFF;
    --color-card-v1-accent: #017ED1;
    --color-card-v1-accent-tint: rgba(1, 126, 209, 0.10);
    /* Card variant v2 */
    --color-card-v2-header-bg: #8B1A2A;
    --color-card-v2-header-bg-dark: #761623;
    --color-card-v2-header-text: #FFFFFF;
    --color-card-v2-accent: #8B1A2A;
    --color-card-v2-accent-tint: rgba(139, 26, 42, 0.10);
    /* Card variant v3 */
    --color-card-v3-header-bg: #2A5A6B;
    --color-card-v3-header-bg-dark: #244C5B;
    --color-card-v3-header-text: #FFFFFF;
    --color-card-v3-accent: #2A5A6B;
    --color-card-v3-accent-tint: rgba(42, 90, 107, 0.10);
    /* ── Badges / Status ───────────────────────────────────── */
    --color-badge-open: #088F8F;
    --color-badge-open-bg: rgba(10, 173, 173, 0.10);
    --color-badge-flex: #9A7C28;
    --color-badge-flex-bg: rgba(212, 168, 67, 0.12);
    --color-success: #1F8A4C;
    --color-success-bg: rgba(31, 138, 76, 0.10);
    --color-success-border: rgba(31, 138, 76, 0.22);
    --color-warning: #B7791F;
    --color-warning-bg: rgba(183, 121, 31, 0.12);
    --color-warning-border: rgba(183, 121, 31, 0.24);
    --color-danger: #C0392B;
    --color-danger-bg: rgba(192, 57, 43, 0.10);
    --color-danger-border: rgba(192, 57, 43, 0.22);
    --color-info: var(--color-accent);
    --color-info-bg: var(--color-accent-tint);
    --color-info-border: var(--color-accent-border);
    /* Match result stats — standings W/L/D, result indicators.
       Vivid and universal across palettes by default; tenant-overridable. */
    --color-stat-win: #38B000;
    --color-stat-loss: #D32F2F;
    --color-stat-draw: #FF8C00;
    /* Registration lifecycle — open, confirmed, pending, cancelled pills.
       Used on league cards, tournament partner chips, registration status pills.
       Vivid signaling palette; tenant-overridable. */
    --color-reg-status-open: #3B82F6;
    --color-reg-status-confirmed: #22C55E;
    --color-reg-status-pending: #FBBF24;
    --color-reg-status-cancelled: #EF4444;
    /* ── Misc / Social ─────────────────────────────────────── */
    --color-facebook: #1877F2;
    --color-facebook-hover: #145EC0;
    /* ── Layout / scale ────────────────────────────────────── */
    --content-width: 1440px;
    --nav-height: 60px;
    --section-padding: 2rem;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 28px rgba(0, 0, 0, 0.16);
    /* Brand-tinted shadows for primary CTAs (check-in button, sponsor buttons,
       league/tournament CTA cards). Reuse across components that want the
       lift-off effect to carry the tenant's primary brand color. */
    --shadow-primary-md: 0 4px 16px color-mix(in srgb, var(--color-primary) 25%, transparent);
    --shadow-primary-lg: 0 8px 24px color-mix(in srgb, var(--color-primary) 35%, transparent);
    --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-family-heading: var(--font-family-base);
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 3rem;
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-loose: 1.7;
    --letter-spacing-tight: -0.02em;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.03em;
    --text-body-size: 1rem;
    --text-page-title-size: 2rem;
    --text-section-title-size: 1.5rem;
    --text-card-title-size: 1.125rem;
    --text-button-size: 0.95rem;
    --text-nav-size: 0.92rem;
    --text-body-weight: var(--font-weight-regular);
    --text-page-title-weight: var(--font-weight-bold);
    --text-section-title-weight: var(--font-weight-semibold);
    --text-card-title-weight: var(--font-weight-semibold);
    --text-button-weight: var(--font-weight-semibold);
    --text-nav-weight: var(--font-weight-medium);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    /* ── Legacy aliases for migration only ─────────────────── */
}

/* --- Reset & Base --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: light;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 18px;
    line-height: var(--line-height-normal);
    background: var(--color-bg);
    color: var(--color-text);
    text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea {
    font: inherit;
}

::selection {
    background: var(--color-accent-tint);
    color: var(--color-text);
}

.signup-honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    tab-index: -1;
}

/* --- Global typography --- */
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0 0 var(--space-3);
    color: var(--color-heading);
    line-height: var(--line-height-tight);
}

h1 {
    font-size: var(--font-size-2xl);
}

h2 {
    font-size: var(--font-size-xl);
}

h3 {
    font-size: calc(var(--font-size-lg) + 0.05rem);
}

p,
ul,
ol {
    margin: 0 0 var(--space-4);
}

small {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

a {
    color: var(--color-link);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

    a:hover {
        color: var(--color-link-hover);
        text-decoration: underline;
    }

strong {
    color: var(--color-heading);
}

/* --- Content Width Utility --- */
.content-width {
    max-width: var(--content-width);
    margin: 0 auto;
    padding-left: var(--section-padding);
    padding-right: var(--section-padding);
}

/* --- Page Layout --- */
.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    position: relative;
    background: var(--color-surface);
    padding-top: var(--section-padding);
    padding-bottom: var(--section-padding);
}

    .main-content::before {
        content: "";
        position: fixed;
        inset: 50% auto auto 50%;
        transform: translate(-50%, -50%);
        width: 80%;
        height: 80%;
        background: var(--watermark-url, url('../content/logo-watermark.svg')) center / contain no-repeat;
        opacity: 0.04;
        pointer-events: none;
        z-index: 0;
    }

    .main-content > * {
        position: relative;
        z-index: 1;
    }

.page-header,
.section-header {
    margin-bottom: var(--space-5);
}

.page-title {
    margin-bottom: var(--space-2);
    color: var(--color-heading);
    font-size: var(--font-size-2xl);
}

.page-description,
.section-description {
    margin: 0;
    color: var(--color-text-muted);
    line-height: var(--line-height-loose);
}

/* ============================================================
   Navbar
   ============================================================ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 200;
    background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-navbar-bg) 100%);
    color: var(--color-navbar-text);
    border-bottom: 1px solid var(--color-navbar-border);
    box-shadow: var(--shadow-md);
}

.navbar-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: var(--content-width);
    min-height: var(--nav-height);
    margin: 0 auto;
    padding: 0 var(--section-padding);
}

/* Drawer header + backdrop live in the DOM at all widths, but are hidden
   on desktop; mobile media query shows them as part of the flyout drawer. */
.navbar-drawer-header,
.navbar-backdrop {
    display: none;
}

.navbar-brand {
    display: none;
    color: var(--color-navbar-text);
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

    .navbar-links a {
        color: var(--color-navbar-link);
        padding: 6px 12px;
        border-radius: var(--radius-sm);
        font-size: 0.92rem;
        font-weight: 500;
        white-space: nowrap;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

        .navbar-links a:hover,
        .navbar-links a.active {
            color: var(--color-navbar-link-hover);
            background: rgba(255, 255, 255, 0.15);
            text-decoration: none;
        }

        .navbar-links a.active {
            font-weight: 600;
        }

        .navbar-links a.nav-brand-link {
            font-size: 1rem;
            font-weight: 800;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            font-style: italic;
            opacity: 0.88;
            background: rgba(255, 255, 255, 0.12);
        }

            .navbar-links a.nav-brand-link:hover,
            .navbar-links a.nav-brand-link.active {
                opacity: 1;
                background: transparent;
            }

.nav-home-mobile {
    display: none;
}

.nav-divider {
    width: 1px;
    height: 18px;
    margin: 0 8px;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.25);
}

.navbar-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    border: none;
    background: none;
    cursor: pointer;
    padding: var(--space-2);
}

.toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 1px;
    background: var(--color-navbar-text);
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    margin-top: calc(-1 * var(--section-padding));
    margin-bottom: var(--section-padding);
    padding: 4.5rem 0;
    text-align: center;
    color: var(--color-text-inverse);
    background: linear-gradient( to bottom, var(--color-hero-overlay-start) 0%, var(--color-hero-overlay-mid) 50%, var(--color-hero-overlay-end) 100% ), var(--hero-image-url, url('../content/hero.jpg')) center 42% / cover no-repeat;
}

.hero-logo {
    position: relative;
    z-index: 1;
    width: auto;
    height: 180px;
    margin: 0 auto 1.25rem;
    filter: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.5));
}

.hero h1,
.hero h2,
.hero h3 {
    position: relative;
    z-index: 1;
    color: var(--color-text-inverse);
}

.hero h1 {
    margin-bottom: var(--space-2);
    font-size: 2.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.hero .lead {
    position: relative;
    z-index: 1;
    margin-bottom: var(--space-5);
    color: rgba(255, 255, 255, 0.95);
    font-size: 1.15rem;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn,
button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 42px;
    padding: 0.65rem 1.3rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

    .btn:active {
        transform: scale(0.98);
    }

    .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--color-input-focus-ring);
    }

.btn-primary {
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    border-color: var(--color-button-primary-border);
}

    .btn-primary:hover {
        background: var(--color-button-primary-hover);
        color: var(--color-button-primary-text);
        text-decoration: none;
    }

.btn-secondary,
.btn-accent {
    background: var(--color-button-secondary-bg);
    color: var(--color-button-secondary-text);
    border-color: var(--color-button-secondary-border);
}

    .btn-secondary:hover,
    .btn-accent:hover {
        background: var(--color-button-secondary-hover);
        color: var(--color-button-secondary-text);
        text-decoration: none;
    }

.btn-outline {
    background: var(--color-button-outline-bg);
    color: var(--color-button-outline-text);
    border-color: var(--color-button-outline-border);
}

    .btn-outline:hover {
        background: var(--color-button-outline-hover-bg);
        color: var(--color-button-outline-text);
        text-decoration: none;
    }

.btn-danger {
    background: var(--color-button-danger-bg);
    color: var(--color-button-danger-text);
    border-color: var(--color-button-danger-border);
}

    .btn-danger:hover {
        background: var(--color-button-danger-hover);
        color: var(--color-button-danger-text);
        text-decoration: none;
    }

.btn:disabled,
.btn.disabled,
button:disabled {
    background: var(--color-button-disabled-bg);
    color: var(--color-button-disabled-text);
    border-color: var(--color-button-disabled-border);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.btn-facebook {
    background: var(--color-facebook);
    color: var(--color-text-inverse);
    border-color: var(--color-facebook);
}

    .btn-facebook:hover {
        background: var(--color-facebook-hover);
        color: var(--color-text-inverse);
    }

/* ============================================================
   Forms
   ============================================================ */
label,
.form-label {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--color-input-label);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
select,
textarea,
.form-control {
    width: 100%;
    background: var(--color-input-bg);
    color: var(--color-input-text);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

    input::placeholder,
    textarea::placeholder {
        color: var(--color-input-placeholder);
    }

    input:hover,
    select:hover,
    textarea:hover,
    .form-control:hover {
        border-color: var(--color-border-strong);
    }

    input:focus,
    select:focus,
    textarea:focus,
    .form-control:focus {
        outline: none;
        border-color: var(--color-input-focus);
        box-shadow: 0 0 0 3px var(--color-input-focus-ring);
    }

    input:disabled,
    select:disabled,
    textarea:disabled,
    .form-control:disabled {
        background: var(--color-input-disabled-bg);
        color: var(--color-input-disabled-text);
        border-color: var(--color-input-disabled-border);
        cursor: not-allowed;
    }

.form-help,
.help-text {
    margin-top: var(--space-2);
    color: var(--color-input-help-text);
    font-size: var(--font-size-sm);
}

.form-group,
.form-field {
    margin-bottom: var(--space-4);
}

/* ── Frontend-scoped compact input & muted text
   Use on public-facing components where .admin-input would leak
   the admin token system. Smaller and tighter than the default
   full-width form control. ── */
.frontend-input {
    width: 100%;
    padding: 0.45rem 0.7rem;
    background: var(--color-input-bg);
    color: var(--color-input-text);
    border: 1px solid var(--color-input-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .frontend-input:hover {
        border-color: var(--color-border-strong);
    }

    .frontend-input:focus {
        outline: none;
        border-color: var(--color-input-focus);
        box-shadow: 0 0 0 3px var(--color-input-focus-ring);
    }

    .frontend-input:disabled {
        background: var(--color-input-disabled-bg);
        color: var(--color-input-disabled-text);
        border-color: var(--color-input-disabled-border);
        cursor: not-allowed;
    }

.frontend-text-muted {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ============================================================
   Shared surfaces / cards / tables
   ============================================================ */
.card,
.panel,
.surface-card,
.account-card,
.register-card,
.quick-link-card,
.event-card,
.album-card,
.faq-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.card,
.panel,
.surface-card {
    padding: var(--space-5);
}

.quick-link-card:hover,
.event-card:hover,
.album-card:hover,
.connect-card:hover {
    box-shadow: var(--shadow-md);
}
.quick-link-card:hover,
.event-card:hover,
.album-card:hover,
.connect-card:hover {
    box-shadow: var(--shadow-md);
}
.table,
table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
}

    .table th,
    .table td,
    table th,
    table td {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--color-divider);
        text-align: left;
    }

    .table th,
    table th {
        color: var(--color-heading);
        background: var(--color-primary-tint-light);
        font-weight: 700;
    }

    .table tbody tr:hover,
    table tbody tr:hover {
        background: var(--color-accent-tint-light);
    }

/* ============================================================
   Badges / alerts / state
   ============================================================ */
/* ── Card composition — header / body / footer / title / subtitle / arrow ── */

.card-header {
    position: relative;
    overflow: hidden;
    padding: 1.5rem 1.75rem 1.25rem;
    background: linear-gradient(135deg, var(--card-header-bg, var(--color-primary)) 0%, var(--card-header-bg-dark, var(--color-primary-dark)) 100%);
}

/* Decorative translucent-white circles over colored gradient headers.
   Kept as literal rgba(255,255,255,...) — this is a glass/gloss effect over
   a brand gradient, not a reusable surface color. (ui-rules §5.3.) */
.card-header-decor-1 {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.card-header-decor-2 {
    position: absolute;
    bottom: -30px;
    right: 40px;
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
}

.card-header-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.card-icon-wrap-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2); /* glass overlay on gradient header — ui-rules §5.3 */
    border-radius: var(--radius-md);
    font-size: 1.5rem;
}

.card-title {
    display: block;
    color: var(--card-header-text, var(--color-text-inverse));
    font-size: var(--text-card-title-size);
    font-weight: var(--text-card-title-weight);
    line-height: var(--line-height-tight);
}

.card-subtitle {
    display: block;
    margin-top: 2px;
    color: var(--card-header-text, var(--color-text-inverse));
    opacity: 0.75;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.02em;
}

.card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.25rem 1.75rem 1.5rem;
}

    .card-body p {
        flex: 1;
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--text-body-size);
        line-height: var(--line-height-loose);
    }

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.25rem;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-divider);
}

.card-arrow {
    font-size: 1.2rem;
    font-weight: var(--font-weight-semibold);
    color: var(--card-accent, var(--color-primary));
    transition: transform 0.2s;
}

/* ── Card variant wrappers — set scoped local vars on the wrapper. ── */
.card-v1 {
    --card-header-bg: var(--color-card-v1-header-bg);
    --card-header-bg-dark: var(--color-card-v1-header-bg-dark);
    --card-header-text: var(--color-card-v1-header-text);
    --card-accent: var(--color-card-v1-accent);
    --card-accent-tint: var(--color-card-v1-accent-tint);
}

.card-v2 {
    --card-header-bg: var(--color-card-v2-header-bg);
    --card-header-bg-dark: var(--color-card-v2-header-bg-dark);
    --card-header-text: var(--color-card-v2-header-text);
    --card-accent: var(--color-card-v2-accent);
    --card-accent-tint: var(--color-card-v2-accent-tint);
}

.card-v3 {
    --card-header-bg: var(--color-card-v3-header-bg);
    --card-header-bg-dark: var(--color-card-v3-header-bg-dark);
    --card-header-text: var(--color-card-v3-header-text);
    --card-accent: var(--color-card-v3-accent);
    --card-accent-tint: var(--color-card-v3-accent-tint);
}
.badge,
.tag,
.schedule-badge,
.card-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: var(--font-size-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
}

.badge-open {
    background: var(--color-badge-open-bg);
    color: var(--color-badge-open);
}

.badge-flex {
    background: var(--color-badge-flex-bg);
    color: var(--color-badge-flex);
}

/* ── Card badge (reads local accent from parent card variant wrapper) ── */
.card-badge {
    padding: 4px 12px;
    text-transform: uppercase;
    background: var(--card-accent-tint, var(--color-primary-tint));
    color: var(--card-accent, var(--color-primary));
}

.alert,
.callout {
    border-radius: var(--radius-md);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
}

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

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

.alert-danger,
.error-panel {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border-color: var(--color-danger-border);
}

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

/* ============================================================
   Footer
   ============================================================ */
.footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    font-size: 0.9rem;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 1.25rem var(--section-padding);
}

.footer a,
.footer-links a {
    color: var(--color-footer-link);
}

    .footer a:hover,
    .footer-links a:hover {
        color: var(--color-footer-link-hover);
    }

.footer-divider {
    margin: 0 0.5rem;
    color: var(--color-text-subtle);
}

/* ── Footer: "Powered by Picklly" platform badge ── */
.footer-powered {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--space-3) var(--section-padding) var(--space-4);
    border-top: 1px solid var(--color-navbar-border);
}

.footer-powered-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-footer-text);
    text-decoration: none;
    opacity: 0.75;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

    .footer-powered-link:hover {
        opacity: 1;
        color: var(--color-footer-link);
        background-color: rgba(255, 255, 255, 0.06); /* translucent-white glass hover — ui-rules §5.3 */
        text-decoration: none;
    }

.footer-powered-text {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.footer-powered-logo {
    height: 40px;
    width: auto;
    display: block;
}

/* ============================================================
   Responsive baseline
   ============================================================ */

/* ============================================================
   Video Grid & Cards
   ============================================================ */
.video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: var(--space-4);
}

.video-card {
    overflow: hidden;
    background-color: var(--color-card-bg);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    transition: transform 0.15s, box-shadow 0.2s;
}

    .video-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

.video-card-info {
    padding: 0.75rem var(--space-4);
}

    .video-card-info h3 {
        display: -webkit-box;
        overflow: hidden;
        margin: 0;
        color: var(--color-primary);
        font-size: 0.95rem;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

.video-date {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ── Media Tagger inside Video Cards ── */
.video-card .media-tagger {
    margin: 0;
    padding: 0.6rem 0.75rem;
    background: var(--color-bg);
    border-top: 1px solid var(--color-divider);
}

.video-card .media-tags-list {
    gap: 0.3rem;
    margin-bottom: 0.35rem;
}

.video-card .media-tag-chip {
    padding: 3px 9px;
    font-size: 0.72rem;
}

.video-card .media-tag-actions {
    gap: 0.35rem;
    margin-top: 0.35rem;
}

.video-card .btn-media-tag {
    padding: 5px 12px;
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
}

.video-card .btn-media-tag-secondary {
    padding: 4px 10px;
    font-size: 0.75rem;
}

.video-card .media-tag-picker {
    margin-top: 0.35rem;
}

.video-card .media-tag-search {
    padding: 6px 10px;
    font-size: 0.82rem;
}

.video-card .media-tag-results {
    max-height: 160px;
}

.video-card .media-tag-result {
    padding: 6px 10px;
    font-size: 0.82rem;
}

.video-card-clickable {
    cursor: pointer;
}

.video-thumb-wrapper {
    position: relative;
    overflow: hidden;
}

.video-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.video-card-clickable:hover .video-thumb {
    transform: scale(1.04);
}

.video-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-overlay);
    color: var(--color-text-inverse);
    border-radius: 50%;
    font-size: 1.2rem;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s;
}

.video-card-clickable:hover .video-play-icon {
    opacity: 1;
}

.video-lightbox-content {
    width: 90vw;
    max-width: 1280px;
}

.video-loading,
.video-empty {
    padding: 2rem 0;
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
}

/* ============================================================
   Responsive Video Container (16:9)
   ============================================================ */
.video-container {
    position: relative;
    overflow: hidden;
    height: 0;
    padding-bottom: 56.25%;
}

    .video-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

/* ============================================================
   Map Container
   ============================================================ */
.map-container {
    margin-top: 1rem;
    border-radius: 10px;
    overflow: hidden;
}

    .map-container iframe {
        display: block;
        border: 0;
    }

/* ============================================================
   When & Where — Zoned Layout
   ============================================================
   Five horizontal bands (title, venue, features, schedule, body)
   stacked top-to-bottom. Each band is visually distinct rather than
   crammed into a sidebar; see WhenAndWhere.razor for matching markup.

   Layout philosophy: tight horizontal pairings (map/photo,
   features/amenities) keep the page from sprawling vertically. The
   schedule is intentionally constrained to a reading width so it
   doesn't span the full content area and create dead space to the right.

   Design tokens come from ui-rules.md — no hard-coded colors or
   spacing. The schedule band reuses .schedule-* styles from the
   legacy block below this section.
   ============================================================ */
.waw-page {
    margin-top: var(--space-5);
}

/* ── Zone 1: Title band ── */
.waw-title-band {
    margin-bottom: var(--space-5);
}

.waw-title {
    font-size: var(--text-page-title-size);
    font-weight: var(--text-page-title-weight);
    color: var(--color-heading);
    margin: 0 0 var(--space-3);
    line-height: var(--line-height-tight);
}

/* Quick-facts row — inline pills with icon + label. Wraps gracefully
   on narrow viewports so a venue with both a count and a cost doesn't
   force a horizontal scroll. */
.waw-quick-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin-bottom: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
}

.waw-quick-fact {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.waw-quick-fact-icon {
    font-size: 1.125rem;
    line-height: 1;
}

/* Stat cards — above-the-fold venue KPIs. Replaces an earlier
   inline pill row. Each card is a horizontal flex with a tinted
   icon chip on the left and a value/label stack on the right.
   flex: 1 1 200px + max-width: 280px lets cards expand to share row
   width when there are few of them, but caps each card so a single
   card doesn't stretch across the whole content area. Cards wrap
   to a new row when the viewport can't fit them side-by-side. */
.waw-stat-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.waw-stat-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1 1 200px;
    max-width: 280px;
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.waw-stat-icon-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: var(--color-primary-tint);
    border-radius: var(--radius-md);
    font-size: 1.4rem;
    line-height: 1;
}

.waw-stat-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: var(--line-height-tight);
}

.waw-stat-value {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-heading);
    line-height: 1.15;
}

.waw-stat-label {
    margin-top: 2px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
}

.waw-description {
    color: var(--color-text);
    line-height: var(--line-height-normal);
    max-width: 70ch;
}

.waw-description p {
    margin: 0 0 var(--space-3);
}

.waw-description p:last-child {
    margin-bottom: 0;
}

/* ── Zone 2: Hero band ──
   Full content-width photo with a capped height so it stays a short
   identity banner rather than dominating the fold. Height is fluid:
   `clamp` ramps from ~180px on narrow viewports to a hard cap of
   320px on wide ones, with viewport-width as the middle term so the
   photo scales smoothly across breakpoints. */
.waw-hero {
    margin-bottom: var(--space-5);
}

.waw-hero-photo {
    display: block;
    width: 100%;
    height: clamp(180px, 22vw, 320px);
    object-fit: cover;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ── Zone 3: Venue band (schedule | map+address) ──
   1:3 split per the layout decision — schedule sits compactly on
   the left (25%), map+address gets the visual weight on the right
   (75%). DOM order matches visual order (schedule first, map
   second) so natural grid placement handles column assignment
   without needing explicit grid-column overrides on each child.
   align-items: start keeps both columns top-aligned even when one
   is shorter than the other. */
.waw-venue-band {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    align-items: start;
}

.waw-venue-map-col {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.waw-map-frame {
    border-radius: var(--radius-md);
    overflow: hidden;
    aspect-ratio: 3 / 1;
    box-shadow: var(--shadow-sm);
    background: var(--color-surface-alt);
}

.waw-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.waw-venue-info {
    /* Compact info block below the map. Parent column gap (--space-4)
       provides separation from the map. */
}

.waw-venue-name {
    font-size: var(--text-section-title-size);
    font-weight: var(--text-section-title-weight);
    color: var(--color-heading);
    margin: 0 0 var(--space-3);
    line-height: var(--line-height-tight);
}

/* Icon-prefixed address & phone. Display: flex aligns the icon to the
   first line of text without baseline drift, which a plain inline
   approach would cause when the street address wraps. */
.waw-venue-address,
.waw-venue-phone {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-style: normal;
    color: var(--color-text);
    line-height: var(--line-height-normal);
    margin: 0 0 var(--space-2);
}

.waw-venue-phone {
    margin-bottom: 0;
}

.waw-address-icon {
    flex-shrink: 0;
    width: 1.25rem;
    font-size: 1rem;
    line-height: var(--line-height-normal);
    color: var(--color-text-muted);
}

.waw-venue-phone a {
    color: var(--color-link);
    text-decoration: none;
}

.waw-venue-phone a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.waw-venue-schedule {
    /* Bordered card around the schedule with a subtle surface-alt
       tint matching the feature card below. Makes the schedule read
       as a structured info card rather than free-floating text.
       align-self: start defensively pins the card to its content
       height — the parent .waw-venue-band already has align-items:
       start, but stating it on the child too prevents any inherited
       stretch from a different rule taking precedence.
       min-width: 0 prevents the schedule's inner grid (with fixed
       140px+160px+1fr columns from the global .schedule-row rule)
       from forcing this venue-band track wider than its 1fr share. */
    align-self: start;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-5);
    min-width: 0;
}

/* Tighter section title for the schedule card — sits visually below
   the larger venue-name h2 on the left, reading as a panel header
   rather than another top-level section title. */
.waw-venue-schedule .waw-section-title {
    font-size: var(--font-size-md);
    margin: 0 0 var(--space-3);
}

/* Compact schedule rows for the narrow venue-schedule column.
   The global .schedule-row uses 140px + 160px + 1fr which overflows
   a ~25%-wide column and would force the parent grid wider than its
   tracks allow. Inside this context we stack the day above the time
   on the left and put the badge on the right, all flowing within a
   1fr + auto grid that fits any column width. Padding kept tight so
   the card hugs its content rather than padding out vertically. */
.waw-venue-schedule .schedule-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    padding: var(--space-2) 0;
    gap: 2px var(--space-3);
    background: transparent;
    border-bottom: 1px solid var(--color-divider);
    position: relative;
}

/* Open Play rows — the days where structured play actually happens.
   A thin badge-open colored bar runs down the left edge inside the
   card padding, drawn via ::before so the row content doesn't shift.
   Together with the bolder time below, this gives Open Play rows
   meaningful visual weight against the muted Flex rows so a visitor
   can scan the schedule in a glance and see "the action is on Mon
   and Thu."

   Bar width (3px) is a one-off design value with no matching token
   per ui-rules §5.3 — kept literal with this comment. border-radius
   uses 999px to produce a full pill shape regardless of the bar
   width, which is the canonical "pill" pattern used elsewhere in
   the schedule badges. */
.waw-venue-schedule .schedule-row-open::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-3));
    top: var(--space-2);
    bottom: var(--space-2);
    width: 3px;
    border-radius: 999px;
    background: var(--color-badge-open);
}

.waw-venue-schedule .schedule-row-open .schedule-time {
    color: var(--color-heading);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

/* Today indicator — overrides the open-play accent (or stands alone
   on a flex day) with a thicker primary-color bar plus a soft
   primary background tint that extends the row visually beyond the
   normal divider. The bar wins by being wider (4px vs 3px) and using
   the primary color rather than the open-play green.

   Bar width (4px) is a one-off design value, same rationale as the
   open-play bar above. border-radius: 999px produces the full pill
   shape regardless of width. */
.waw-venue-schedule .schedule-row-today::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-3));
    top: var(--space-2);
    bottom: var(--space-2);
    width: 4px;
    border-radius: 999px;
    background: var(--color-primary);
}

/* Background tint extends the today row visually — stretches past the
   row's normal width with a negative margin so the tint reaches the
   schedule card's inner edges. Uses the stronger primary-border tint
   (15% alpha) rather than the lighter primary-tint (8%) so the today
   row is genuinely noticeable rather than a barely-perceptible wash.

   The today row also reads physically larger than its siblings: padding
   bumps from --space-2 (used by every other row) up to --space-3 on
   the vertical axis, adding ~8px of height. Combined with the larger
   day-name font below, this gives today clear visual hierarchy — it
   sits taller in the list and reads at a glance as the most important
   row, the way a calendar's current date does in a week view. */
.waw-venue-schedule .schedule-row-today {
    background: var(--color-primary-border);
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4);
    border-bottom-color: transparent;
}

/* Day name on the today row reads in primary brand color and one
   step up in font size (md vs sm on other rows) for an additional
   cue that this is the current day — reinforces the left bar and
   pill so the row reads as "today" from any glance angle, including
   in screenshots where the pill might get cropped. */
.waw-venue-schedule .schedule-row-today .schedule-day > span:first-child {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
}

/* If today happens to be a Flex day, restore full opacity so the
   today highlight isn't washed out by the flex muting. */
.waw-venue-schedule .schedule-row-today.schedule-row-flex {
    opacity: 1;
}

/* Flex rows visually de-emphasized so the days with actual scheduled
   play (Open Play) stand out. Opacity drops the whole row including
   the badge; italic time signals that the slot isn't on a clock. */
.waw-venue-schedule .schedule-row-flex {
    opacity: 0.55;
}

.waw-venue-schedule .schedule-row-flex .schedule-time {
    font-style: italic;
}

.waw-venue-schedule .schedule-row:first-child {
    padding-top: 0;
}

.waw-venue-schedule .schedule-row.schedule-row-open.schedule-row-today:first-child {
    padding-top: 10px;
}

.waw-venue-schedule .schedule-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.waw-venue-schedule .schedule-day {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-heading);
}

/* "Today" pill on the day name. Hidden by default; revealed only on
   .schedule-row-today (applied server-side, optionally refined by the
   browser-side script). Token-driven sizing throughout per ui-rules
   §5.1: --space-1/--space-2 for padding, --font-size-xs for text,
   --letter-spacing-wide for the uppercase tracking, --line-height-tight
   for the compact pill rhythm. */
.waw-venue-schedule .schedule-today-pill {
    display: none;
    padding: var(--space-1) var(--space-2);
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-wide);
    line-height: var(--line-height-tight);
}

.waw-venue-schedule .schedule-row-today .schedule-today-pill {
    display: inline-block;
}

.waw-venue-schedule .schedule-time {
    grid-column: 1;
    grid-row: 2;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
}

.waw-venue-schedule .schedule-badge-wrap {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
}

.waw-venue-schedule .schedule-badge {
    font-size: var(--font-size-xs);
    padding: 2px 8px;
}

.waw-venue-schedule .schedule-empty {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* ── Zone 4: Content band (description | features+amenities) ──
   2:1 split per the layout decision — description gets the
   reading-width column on the left (66%); features/amenities share a
   single bordered card on the right (33%). align-items: start
   prevents the sidebar card from stretching when description is
   shorter than the card. */
.waw-content-band {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-6);
    align-items: start;
}

/* min-width: 0 on grid items is critical — CSS grid items default to
   min-width: auto, which means they refuse to shrink below their
   content's intrinsic min-width. If a long unbreakable token (URL,
   inline code, etc.) lives inside the description, it can force the
   description column wider than its 2fr share, breaking the grid and
   pushing the sidebar to the next row. Setting min-width: 0 lets the
   tracks honor their fr ratios regardless of content. */
.waw-content-description,
.waw-content-sidebar {
    min-width: 0;
}

/* When only one side has content, the surviving child spans the full
   row. Description case: no width cap — user preference is to let the
   description fill 100% of its container. Sidebar case: cap the width
   so a lone features/amenities card doesn't stretch awkwardly across
   the full content area, which would look unbalanced for a compact
   card of bullet points. */
.waw-content-band > .waw-content-description:only-child {
    grid-column: 1 / -1;
}

.waw-content-band > .waw-content-sidebar:only-child {
    grid-column: 1 / -1;
    max-width: 400px;
}

.waw-content-description {
    color: var(--color-text);
    line-height: var(--line-height-normal);
    text-align: justify;
}

.waw-content-description p {
    margin: 0 0 var(--space-3);
}

.waw-content-description p:last-child {
    margin-bottom: 0;
}

.waw-content-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Feature card — borderless container that visually groups the
   Surface & Features and Amenities sections via the shared
   surface-alt background. overflow: hidden keeps the internal
   divider's top-border inside the rounded corners. The internal
   divider line between the two panels (rendered via the + selector
   on .waw-feature-panel below) still provides clear separation
   between Features and Amenities. */
.waw-feature-card {
    background: var(--color-surface-alt);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* Inner section — padding only, no border/bg. When two panels stack
   inside the card, the second one gets a top border from the +
   selector below, providing the divider between them. */
.waw-feature-panel {
    padding: var(--space-4) var(--space-5);
}

.waw-feature-panel + .waw-feature-panel {
    border-top: 1px solid var(--color-border);
}

/* Uppercase + tracked label — reads as a section eyebrow rather than
   competing with the H1 above. */
.waw-feature-panel-title {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-muted);
    margin: 0 0 var(--space-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.waw-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Flex layout per row keeps the icon and label aligned to the first
   text line. Fixed icon width prevents misalignment when icons render
   at slightly different visual widths across platforms (iOS vs Windows
   emoji metrics differ). */
.waw-feature-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-text);
    line-height: var(--line-height-normal);
    padding: 0;
}

.waw-feature-icon {
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
    font-size: 1rem;
    line-height: 1;
}

.waw-feature-label {
    flex: 1;
}

.waw-section-title {
    font-size: var(--text-section-title-size);
    font-weight: var(--text-section-title-weight);
    color: var(--color-heading);
    margin: 0 0 var(--space-4);
}

/* ── Zone 4: Body band ── */
.waw-body-band {
    margin-bottom: var(--space-7);
    line-height: var(--line-height-normal);
}

/* ── Tablet/mobile collapse ──
   Both 3/4 split bands collapse to single column below 900px. Hero
   photo stays full width but shrinks via the clamp() height. Source
   order already puts the most important content first, so stacking
   preserves the intended reading order. */
@media (max-width: 900px) {
    .waw-venue-band {
        grid-template-columns: 1fr;
    }

    .waw-content-band {
        grid-template-columns: 1fr;
    }

    .waw-content-band > :only-child {
        max-width: none;
    }
}

/* ============================================================
   Schedule Card & Location
   ============================================================ */
.location-section {
    margin-top: 1.5rem;
}

/* ── Court/Facility Photo ── */
.court-photo-wrap {
    margin: 1rem 0 1.5rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.court-photo {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    display: block;
}

/* ── Court Amenities ── */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.amenity-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.amenity-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.amenity-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .amenity-text strong {
        font-size: 0.95rem;
        color: var(--color-primary);
    }

    .amenity-text span {
        font-size: 0.82rem;
        color: var(--color-text-muted);
        line-height: 1.4;
    }

.schedule-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-top: 1rem;
}

.schedule-row {
    display: grid;
    grid-template-columns: 140px 160px 1fr;
    align-items: center;
    padding: 1rem 1.5rem;
    gap: 1rem;
}

.schedule-row-primary {
    background: var(--color-surface);
}

.schedule-row-alt {
    background: var(--color-card-bg);
}

.schedule-day {
    font-weight: 700;
    font-size: 1rem;
    color: var(--color-primary);
}

.schedule-time {
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: 500;
}

.schedule-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.badge-open {
    background: var(--color-badge-open-bg);
    color: var(--color-badge-open);
}

.badge-flex {
    background: var(--color-badge-flex-bg);
    color: var(--color-badge-flex);
}

/* GroupMe note callout */
.schedule-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-primary-tint-light);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
    line-height: 1.6;
}

.schedule-note-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.schedule-disclaimer {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 1rem;
}

/* Events callout banner */
.events-callout {
    margin-top: 2.5rem;
}

.events-callout-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 12px;
    color: var(--color-text-inverse);
}

.events-callout h2 {
    color: var(--color-text-inverse);
    margin: 0 0 0.25rem;
    font-size: 1.2rem;
}

.events-callout p {
    margin: 0;
    opacity: 0.85;
    font-size: 0.9rem;
}

.events-callout .btn-event {
    background: var(--color-text-inverse);
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

    .events-callout .btn-event:hover {
        background: var(--color-card-bg);
    }

/* ============================================================
   Facebook Page Embed
   ============================================================ */
.fb-page-embed {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.photo-cta {
    margin-top: 1.5rem;
    text-align: center;
}

/* ============================================================
   Callout Boxes — reusable styled highlights
   ============================================================ */
.callout {
    border-radius: 10px;
    padding: 1.5rem 1.75rem;
    margin: 1.5rem 0;
}

.callout-accent {
    background-color: var(--color-card-bg);
    border-left: 4px solid var(--color-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.callout-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

    .callout-header h3 {
        margin: 0;
        font-size: 1.2rem;
        color: var(--color-primary);
    }

.callout-icon {
    font-size: 1.4rem;
}

.callout p {
    margin: 0 0 0.75rem;
}

.callout ul {
    margin: 0;
    padding-left: 1.25rem;
}

.callout li {
    margin-bottom: 0.35rem;
}

/* ============================================================
   Photo Gallery — Grid + Lightbox
   ============================================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.gallery-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    aspect-ratio: 1;
    background-color: var(--color-bg);
}

.gallery-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery-item:hover .gallery-thumb {
    transform: scale(1.06);
    filter: brightness(1.08);
}

.gallery-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.15) 0%, transparent 40%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.gallery-item:hover::after {
    opacity: 1;
}

.gallery-empty,
.gallery-loading,
.gallery-error {
    text-align: center;
    color: var(--color-text-muted);
    padding: 2rem 0;
    font-style: italic;
}

.section-error {
    text-align: center;
    color: var(--color-text-muted);
    padding: 1.5rem 0 0.75rem;
    font-style: italic;
}

/* Load More button */
.gallery-load-more {
    text-align: center;
    margin-top: 2rem;
}

.btn-load-more {
    display: inline-block;
    padding: 0.75rem 2rem;
    background: var(--color-surface);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.1s;
}

    .btn-load-more:hover {
        background: var(--color-primary);
        color: #fff;
        transform: translateY(-1px);
    }

.load-more-count {
    font-weight: 400;
    opacity: 0.7;
    margin-left: 0.25rem;
    font-size: 0.85rem;
}

/* ── Lightbox Overlay ── */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: lightbox-fade-in 0.2s ease;
}

@keyframes lightbox-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Lightbox content styles consolidated at end of file */

.lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    z-index: 1001;
    line-height: 1;
    padding: 0.25rem;
    opacity: 0.7;
    transition: opacity 0.2s;
}

    .lightbox-close:hover {
        opacity: 1;
    }

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    z-index: 1001;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.2s, background-color 0.2s;
}

    .lightbox-nav:hover {
        opacity: 1;
        background: rgba(255, 255, 255, 0.2);
    }

.lightbox-prev {
    left: 1rem;
}

.lightbox-next {
    right: 1rem;
}

/* ── Gallery Toolbar (tabs + filter) ── */
.gallery-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.gallery-view-tabs {
    display: flex;
    gap: 4px;
    background: var(--color-bg);
    border-radius: 10px;
    padding: 4px;
}

.gallery-tab {
    padding: 0.5rem 1.25rem;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

    .gallery-tab:hover {
        background: rgba(0, 0, 0, 0.04);
        color: var(--color-text);
    }

.gallery-tab-active {
    background: var(--color-surface) !important;
    color: var(--color-primary) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.gallery-player-filter {
    flex-shrink: 0;
}

.gallery-filter-select {
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: var(--color-surface);
    font-size: 0.9rem;
    color: var(--color-text);
    cursor: pointer;
    appearance: auto;
}

/* ── Album Grid ── */
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.album-card {
    background: var(--color-surface);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .album-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
    }

.album-cover-wrap {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg);
}

.album-cover-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.album-card:hover .album-cover-img {
    transform: scale(1.04);
}

.album-cover-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    opacity: 0.3;
    background: var(--color-bg);
}

.album-photo-count {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    background: rgba(0, 0, 0, 0.65);
    color: var(--color-text-inverse);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
}

.album-card-info {
    padding: 1rem 1.25rem 1.25rem;
}

    .album-card-info h3 {
        margin: 0 0 0.25rem;
        font-size: 1.05rem;
        color: var(--color-primary);
        line-height: 1.3;
    }

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

.album-desc {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.album-uncategorized-link {
    text-align: center;
    margin-top: 2rem;
}

/* ── Album Detail ── */
.album-detail-header {
    margin-bottom: 1.5rem;
}

.btn-album-back {
    background: none;
    border: none;
    color: var(--color-accent-hover);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0;
    margin-bottom: 0.5rem;
}

    .btn-album-back:hover {
        text-decoration: underline;
        color: var(--color-accent);
    }

.album-detail-header h2 {
    margin: 0.25rem 0 0;
}

.album-detail-desc {
    color: var(--color-text-muted);
    margin: 0.5rem 0 0;
}

/* ── Timeline View ── */
.timeline-group {
    margin-bottom: 2.5rem;
}

.timeline-month-header {
    font-size: 1.15rem;
    color: var(--color-primary);
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
    display: inline-block;
    position: sticky;
    top: calc(var(--nav-height) + 8px);
    background: var(--color-surface);
    z-index: 10;
    padding-right: 1rem;
}

/* ── Infinite Scroll ── */
.gallery-scroll-sentinel {
    height: 1px;
    margin-top: 1rem;
}

.gallery-loading {
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
    padding: 1.5rem 0;
}

.gallery-photo-count {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-top: 1rem;
    padding: 0.5rem 0;
}

/* ── Lightbox Caption ── */
.lightbox-caption {
    color: #fff;
    text-align: center;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
    opacity: 0.85;
}

/* ── Lightbox Action Buttons (Download, Profile Image) ── */
.lightbox-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
}

.lightbox-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    white-space: nowrap;
}

    .lightbox-action-btn:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
    }

.lightbox-action-profile {
    border-color: var(--color-accent-border);
    background: var(--color-accent-tint);
}

    .lightbox-action-profile:hover {
        background: var(--color-accent-focus);
        border-color: var(--color-accent-border);
    }

.lightbox-action-status {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

.lightbox-action-error {
    color: #ff6b6b;
}

/* ============================================================
   Admin — Album Manager
   ============================================================ */
.admin-album-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.admin-album-card {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem;
    background: var(--color-surface);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.admin-album-cover {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg);
}

    .admin-album-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.admin-album-cover-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    opacity: 0.3;
}

.admin-album-info h3 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
}

.admin-album-meta {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    display: block;
}

.admin-album-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* ── Photo Assignment Modal ── */
.admin-modal-wide {
    max-width: 900px;
    width: 95vw;
}

.admin-photo-assign-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 1rem;
    max-height: 60vh;
    overflow-y: auto;
}

.admin-photo-assign-col h4 {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--color-primary);
}

.admin-photo-assign-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
}

.admin-photo-assign-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s;
}

    .admin-photo-assign-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .admin-photo-assign-item.selected {
        border-color: var(--color-accent);
    }

.admin-photo-assign-check {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    background: var(--color-accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    .gallery-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .gallery-view-tabs {
        justify-content: center;
    }

    .gallery-filter-select {
        width: 100%;
    }

    .album-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .album-card-info {
        padding: 0.75rem 1rem;
    }

        .album-card-info h3 {
            font-size: 0.95rem;
        }

    .timeline-month-header {
        font-size: 1rem;
    }

    .admin-album-card {
        grid-template-columns: 80px 1fr;
        gap: 0.75rem;
    }

    .admin-album-actions {
        grid-column: 1 / -1;
    }

    .admin-photo-assign-layout {
        grid-template-columns: 1fr;
    }

    .admin-modal-wide {
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================================
   Contact Page — Connect Cards
   ============================================================ */
.connect-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.connect-card {
    display: flex;
    flex-direction: column;
    padding: 2rem;
    border-radius: 14px;
    text-decoration: none;
    color: var(--color-text-inverse);
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}

    .connect-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 32px rgba(0, 0, 0, 0.15);
    }

.connect-card-groupme {
    background: linear-gradient(135deg, #00aff0 0%, #0090c8 100%);
}

.connect-card-facebook {
    background: linear-gradient(135deg, #1877F2 0%, #1260cc 100%);
}

.connect-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.connect-card h3 {
    color: var(--color-text-inverse);
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
}

.connect-card p {
    margin: 0;
    opacity: 0.9;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ── FAQ Section ── */
.contact-faq {
    margin-top: 3rem;
}

    .contact-faq h2 {
        margin-bottom: 1.25rem;
    }

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.faq-item {
    padding: 1.5rem;
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04);
}

    .faq-item h3 {
        margin: 0 0 0.5rem;
        font-size: 1rem;
        color: var(--color-primary);
    }

    .faq-item p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--color-text-muted);
        line-height: 1.6;
    }

    .faq-item a {
        color: var(--color-accent);
        font-weight: 600;
    }

/* ============================================================
   Events Page
   ============================================================ */
.events-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 1.5rem;
}

.event-card {
    display: grid;
    grid-template-columns: 400px 1fr;
    background: var(--color-surface);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}

    .event-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
    }

.event-image-wrap {
    position: relative;
    overflow: hidden;
}

.event-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Date badge overlay */
.event-date-badge {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    text-align: center;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.event-date-month {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
}

.event-date-day {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    margin-top: 2px;
}

.event-details {
    padding: 1.75rem 2rem;
    display: flex;
    flex-direction: column;
}

    .event-details h2 {
        margin: 0 0 1rem;
        font-size: 1.35rem;
        color: var(--color-primary);
    }

.event-meta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.event-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

.event-meta-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.event-description {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 0.75rem;
}

.event-register {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0 0 1rem;
}

    .event-register a {
        color: var(--color-accent);
        font-weight: 600;
    }

.event-actions {
    margin-top: auto;
    padding-top: 0.5rem;
}

.btn-event {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.2s, transform 0.1s;
}

    .btn-event:hover {
        background: var(--color-primary-dark);
        transform: translateY(-1px);
    }

.see-more-wrap {
    text-align: center;
    margin-top: 1.5rem;
}

.events-cta {
    margin-top: 3rem;
    padding: 2rem;
    background: var(--color-card-bg);
    border-radius: 12px;
    text-align: center;
}

    .events-cta h2 {
        margin-top: 0;
        font-size: 1.2rem;
    }

    .events-cta p {
        margin-bottom: 0;
        color: var(--color-text-muted);
    }

/* ============================================================
   Error Panel
   ============================================================ */
.error-panel {
    text-align: center;
    padding: 3rem 1rem;
}

    .error-panel h2 {
        color: var(--color-danger);
    }

/* ============================================================
   Responsive — Mobile (< 768px)
   ============================================================ */
@media (max-width: 767px) {
    :root {
        --section-padding: 1.25rem;
    }

    /* Show hamburger */
    .navbar-toggle {
        display: flex;
    }

    /* Show brand on mobile */
    .navbar-brand {
        display: block;
        text-transform: uppercase;
        font-style: italic;
        font-weight: 800;
        letter-spacing: 0.02em;
    }

    .navbar-inner {
        justify-content: space-between;
    }

    /* ── Mobile drawer (left-side flyout) ──
       Slides in from the left as a fixed-position panel covering ~80% of the
       viewport. A backdrop fills the remainder and closes the menu on tap. */
    .navbar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 299;
        background: var(--color-overlay);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

        .navbar-backdrop.open {
            opacity: 1;
            visibility: visible;
        }

    .navbar-links {
        display: flex; /* always flex; visibility controlled via transform */
        flex-direction: column;
        align-items: stretch;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 80%;
        max-width: 340px;
        padding: 0;
        background: var(--color-navbar-bg);
        box-shadow: var(--shadow-lg);
        z-index: 300;
        overflow-y: auto;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        gap: 0;
    }

        .navbar-links.open {
            transform: translateX(0);
        }

        /* Links inside the drawer: left-aligned, full-width tap targets */
        .navbar-links a {
            display: block;
            padding: var(--space-3) var(--space-5);
            border-radius: 0;
            font-size: var(--font-size-md);
            text-align: left;
        }

            /* Hide desktop wordmark in the drawer (replaced by drawer header) */
            .navbar-links a.nav-brand-desktop {
                display: none;
            }

    /* Drawer header: site name + X close button */
    .navbar-drawer-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--color-navbar-border);
    }

    .navbar-drawer-brand {
        color: var(--color-navbar-text);
        font-size: var(--font-size-md);
        font-weight: var(--font-weight-extrabold);
        font-style: italic;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .navbar-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        border: none;
        background: transparent;
        color: var(--color-navbar-text);
        font-size: 1.25rem;
        line-height: 1;
        border-radius: var(--radius-sm);
        cursor: pointer;
        transition: background-color 0.2s ease;
    }

        .navbar-drawer-close:hover {
            background: rgba(255, 255, 255, 0.12); /* glass hover on dark drawer — ui-rules §5.3 */
        }

    /* Show simple Home link in drawer */
    .nav-home-mobile {
        display: block;
        padding: var(--space-3) var(--space-5);
        font-size: var(--font-size-md);
    }

    /* Hide the divider on mobile (the drawer header provides visual separation) */
    .nav-divider {
        display: none;
    }

    /* Smaller hero on mobile */
    .hero {
        padding: 3rem 0;
    }

        .hero h1 {
            font-size: 1.6rem;
        }

    .hero-logo {
        height: 120px;
    }

    /* Stack cards */
    .quick-link-grid {
        grid-template-columns: 1fr;
    }

    /* Stack videos on mobile */
    .video-grid {
        grid-template-columns: 1fr;
    }

    /* Stack event cards vertically */
    .event-card {
        grid-template-columns: 1fr;
    }

    .event-image-wrap {
        max-height: 220px;
    }

    .event-details {
        padding: 1.25rem 1.5rem;
    }

    /* Schedule card stacks on mobile */
    .schedule-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
        padding: 0.75rem 1.25rem;
    }

    /* Amenities 2 columns on mobile */
    .amenities-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .schedule-note {
        padding: 1rem 1.25rem;
    }

    /* Events callout stacks on mobile */
    .events-callout-inner {
        flex-direction: column;
        text-align: center;
        padding: 1.5rem;
    }

    /* Connect cards stack on mobile */
    .connect-grid {
        grid-template-columns: 1fr;
    }

    /* FAQ stacks on mobile */
    .faq-grid {
        grid-template-columns: 1fr;
    }

    /* Gallery — 2 columns on mobile */

    .lightbox-nav {
        font-size: 2rem;
        padding: 0.4rem 0.75rem;
    }

    .lightbox-prev {
        left: 0.5rem;
    }

    .lightbox-next {
        right: 0.5rem;
    }

    /* Footer stacks centered */
    .footer-inner {
        flex-direction: column;
        text-align: center;
    }

    /* ── Mobile drawer: flyout group becomes an accordion ── */
    .navbar-links .nav-group {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .navbar-links .nav-group-trigger {
        justify-content: space-between; /* push chevron to the right edge */
        width: 100%;
        padding: var(--space-3) var(--space-5);
        color: var(--color-navbar-link);
        font-size: var(--font-size-md);
        font-weight: var(--text-nav-weight);
        text-transform: none;
        letter-spacing: normal;
        opacity: 1;
        cursor: pointer;
        text-align: left;
    }

        .navbar-links .nav-group-trigger:hover {
            background: rgba(255, 255, 255, 0.08); /* subtle glass on dark drawer — ui-rules §5.3 */
            color: var(--color-navbar-link-hover);
        }

    /* Chevron: points right by default, rotates 180° when expanded.
       Overrides the desktop transform-on-hover behaviour (which doesn't
       apply at this breakpoint since there's no hover state on the
       fixed-position drawer). */
    .navbar-links .nav-group-chevron {
        display: inline-block;
        font-size: 0.9em;
        opacity: 0.7;
        transform: rotate(-90deg);
        transition: transform 0.2s ease;
    }

    .navbar-links .nav-group-expanded .nav-group-chevron {
        transform: rotate(0deg);
    }

    .navbar-links .nav-group-menu {
        display: none;
        position: static;
        flex-direction: column;
        min-width: 0;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    /* Children visible only when the parent group is expanded */
    .navbar-links .nav-group-expanded .nav-group-menu {
        display: flex;
    }

        .navbar-links .nav-group-menu a {
            padding: var(--space-3) var(--space-5) var(--space-3) var(--space-6);
            border-radius: 0;
            font-size: var(--font-size-md);
        }
}

/* ============================================================
   Responsive — Tablet (768px–1024px)
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
    .navbar-links a {
        padding: 5px 8px;
        font-size: 0.82rem;
    }

    .video-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .quick-link-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .quick-link-card {
        padding: 1.5rem 1.25rem 1.25rem;
    }
}


/* ============================================================
   Sponsor Buttons (per-event)
   Append this to the end of your site.css
   ============================================================ */

.event-sponsor {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(0, 0, 0, 0.1);
}

    .event-sponsor h4 {
        margin: 0 0 0.6rem;
        font-size: 0.85rem;
        font-weight: 700;
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

.sponsor-buttons {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-sponsor {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text-inverse);
    transition: transform 0.15s, box-shadow 0.2s;
}

    .btn-sponsor:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        color: var(--color-text-inverse);
        text-decoration: none;
    }

.btn-cashapp {
    background: #00D632;
}

    .btn-cashapp:hover {
        background: #00b82b;
    }

.btn-venmo {
    background: #3D95CE;
}

    .btn-venmo:hover {
        background: #2f7eb5;
    }

.sponsor-icon {
    font-size: 1rem;
}

/* Events empty state */
.events-empty {
    text-align: center;
    padding: 3rem;
    background: var(--color-card-bg);
    border-radius: 12px;
    color: var(--color-text-muted);
    margin-top: 1.5rem;
}

/* ── Message Header ── */
.msg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

    .msg-header h1 {
        margin: 0;
    }

/* ── Tabs ── */
.msg-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 1.5rem;
}

.msg-tab {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .msg-tab:hover {
        color: var(--color-primary);
    }

.msg-tab-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.msg-unread-badge {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
}

/* ── Message List ── */
.msg-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.msg-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    text-decoration: none;
    color: var(--color-text);
    transition: background-color 0.15s;
    position: relative;
}

    .msg-item:hover {
        background: var(--color-card-bg);
    }

.msg-item-unread {
    background: var(--color-accent-tint-light);
}

    .msg-item-unread .msg-item-subject {
        font-weight: 700;
    }

.msg-item-avatar {
    flex-shrink: 0;
}

    /* Scale down the player card inside message list */
    .msg-item-avatar .player-card-sm {
        width: 50px;
        height: 72px;
    }

.msg-item-content {
    flex: 1;
    min-width: 0;
}

.msg-item-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 2px;
}

.msg-item-from {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-primary);
}

.msg-item-date {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.msg-item-subject {
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-item-preview {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.msg-item-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-accent);
    flex-shrink: 0;
}

.msg-loading,
.msg-empty {
    text-align: center;
    color: var(--color-text-muted);
    padding: 3rem 0;
    font-style: italic;
}

.msg-auth-notice {
    text-align: center;
    padding: 3rem 0;
}

/* ── Thread ── */
.msg-thread-header {
    margin-bottom: 1.5rem;
}

.msg-back-link {
    font-size: 0.85rem;
    color: var(--color-accent-hover);
    text-decoration: none;
}

    .msg-back-link:hover {
        text-decoration: underline;
    }

.msg-thread-header h1 {
    margin: 0.5rem 0 0;
    font-size: 1.4rem;
}

.msg-thread {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.msg-bubble {
    max-width: 80%;
    padding: 1rem 1.25rem;
    border-radius: 16px;
    position: relative;
}

.msg-bubble-theirs {
    background: var(--color-card-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.msg-bubble-mine {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

.msg-bubble-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
    gap: 1rem;
}

.msg-bubble-sender {
    font-weight: 700;
    font-size: 0.85rem;
    text-decoration: none;
}

.msg-bubble-theirs .msg-bubble-sender {
    color: var(--color-primary);
}

.msg-bubble-mine .msg-bubble-sender {
    color: rgba(255, 255, 255, 0.8);
}

.msg-bubble-date {
    font-size: 0.72rem;
    opacity: 0.6;
    flex-shrink: 0;
}

.msg-bubble-body {
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
}

/* ── Reply Section ── */
.msg-reply-section {
    border-top: 1px solid var(--color-border);
    padding-top: 1.5rem;
}

    .msg-reply-section h3 {
        margin: 0 0 0.75rem;
        font-size: 1rem;
    }

.msg-reply-input {
    width: 100%;
    margin-bottom: 0.75rem;
}

.msg-reply-actions {
    display: flex;
    gap: 0.75rem;
}

/* ── Compose Form ── */
.msg-compose-form {
    max-width: 600px;
}

/* ============================================================
   Registration Page
   ============================================================ */
.register-page {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.register-card {
    max-width: 640px;
    width: 100%;
}

    .register-card h1 {
        margin: 0 0 0.25rem;
    }

.register-subtitle {
    color: var(--color-text-muted);
    margin: 0 0 2rem;
    font-size: 1rem;
}

.register-card h3 {
    font-size: 1.05rem;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-divider);
}

.register-success {
    text-align: center;
    padding: 2rem 0;
}

.register-success-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.register-success h2 {
    margin: 0 0 0.75rem;
}

.register-success p {
    color: var(--color-text-muted);
    margin: 0 0 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.register-success-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.register-login-link {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

    .register-login-link a {
        color: var(--color-accent-hover);
        font-weight: 600;
    }

/* ── Responsive ── */
@media (max-width: 767px) {
    .msg-bubble {
        max-width: 95%;
    }

    .msg-item-avatar .player-card-sm {
        width: 40px;
        height: 58px;
    }

    .msg-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
}
/* ============================================================
   Account Pages — Login, Profile, Change Password, Delete
   ============================================================ */

/* ── Shared Account Layout ── */
.account-page {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
}

.account-card {
    width: 100%;
    max-width: 520px;
    background: var(--color-surface);
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.account-card-wide {
    max-width: 800px;
}

.account-card h1 {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
}

.account-subtitle {
    color: var(--color-text-muted);
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
}

/* ── Login Form Options ── */
.account-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0.75rem 0 1.25rem;
    font-size: 0.9rem;
}

.account-remember {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
}

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

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

/* ── External Login Providers ── */
.account-divider {
    display: flex;
    align-items: center;
    margin: 1.5rem 0;
    gap: 1rem;
}

    .account-divider::before,
    .account-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: rgba(0, 0, 0, 0.1);
    }

    .account-divider span {
        font-size: 0.85rem;
        color: var(--color-text-muted);
        white-space: nowrap;
    }

.account-external-providers {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

    .account-external-providers form {
        display: contents;
    }

.btn-external {
    width: 100%;
    justify-content: center;
    padding: 0.7rem 1.25rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background-color 0.2s, box-shadow 0.2s;
}

    .btn-external:hover {
        background: var(--color-bg);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

.btn-external-google {
    border-color: #4285f4;
}

.btn-external-facebook {
    border-color: var(--color-facebook);
}

/* ── Account Links ── */
.account-links {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-text-muted);
}

    .account-links a {
        color: var(--color-accent-hover);
        font-weight: 600;
    }

/* ── My Account Profile Header ── */
.account-profile-header {
    display: flex;
    gap: 2rem;
    align-items: center;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.account-card-preview {
    flex-shrink: 0;
}

.account-profile-summary h2 {
    margin: 0 0 0.25rem;
    font-size: 1.3rem;
}

.account-email {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}

.account-quick-links {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

/* ── Checkbox Labels ── */
.account-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.95rem;
}

    .account-checkbox input[type="checkbox"] {
        accent-color: var(--color-primary);
        width: 18px;
        height: 18px;
    }

/* ── Secondary Actions (change pw, delete) ── */
.account-secondary-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.3rem;
    border-radius: 8px;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

    .btn-outline:hover {
        background: var(--color-primary);
        color: var(--color-text-inverse);
    }

.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.3rem;
    border-radius: 8px;
    border: 2px solid var(--color-danger);
    color: var(--color-danger);
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

    .btn-danger-outline:hover {
        background: var(--color-danger);
        color: var(--color-text-inverse);
    }

/* ── Delete Account Danger Zone ── */
.account-danger-zone {
    text-align: center;
}

    .account-danger-zone h2 {
        color: var(--color-danger);
        margin: 0.5rem 0;
    }

    .account-danger-zone p {
        color: var(--color-text-muted);
    }

    .account-danger-zone ul {
        text-align: left;
        max-width: 400px;
        margin: 1rem auto;
        color: var(--color-text-muted);
        font-size: 0.9rem;
    }

    .account-danger-zone li {
        margin-bottom: 0.4rem;
    }

.danger-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    border-radius: 8px;
    border: none;
    background: var(--color-danger);
    color: var(--color-text-inverse);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.2s;
}

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

/* ── Info & Success Boxes ── */
.account-info-box {
    background: var(--color-accent-tint);
    border-left: 4px solid var(--color-accent);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.admin-success {
    background: var(--color-success-bg);
    border-left: 4px solid var(--color-success);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    color: var(--color-success);
}

/* ── No Profile State ── */
.account-no-profile {
    text-align: center;
    padding: 2rem 0;
}

    .account-no-profile p {
        color: var(--color-text-muted);
        margin-bottom: 1rem;
    }

/* ── Responsive ── */
@media (max-width: 767px) {
    .account-card {
        padding: 1.5rem;
        border-radius: 12px;
    }

    .account-profile-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .account-quick-links {
        justify-content: center;
    }

    .account-secondary-actions {
        flex-direction: column;
    }

        .account-secondary-actions .btn-outline,
        .account-secondary-actions .btn-danger-outline {
            width: 100%;
            justify-content: center;
        }

    .account-danger-zone ul {
        text-align: left;
        padding-left: 1.25rem;
    }
}

/* ── Admin: Account Linking ── */
.admin-linked-account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: 8px;
    font-size: 0.9rem;
}

.admin-linked-badge {
    font-weight: 600;
    color: var(--color-success);
    white-space: nowrap;
}

.admin-link-account-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

    .admin-link-account-row .admin-input {
        flex: 1;
    }

.btn-admin-danger-sm {
    background: var(--color-danger);
    color: var(--color-text-inverse);
    border: none;
    padding: 0.3rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
}

    .btn-admin-danger-sm:hover {
        background: var(--color-button-danger-hover);
    }

/* ── Navbar Message Badge ── */
.nav-messages-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--color-navbar-text);
    border-radius: var(--radius-sm);
    font-size: var(--text-nav-size);
    font-weight: var(--text-nav-weight);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s;
}

    .nav-messages-link:hover {
        background-color: rgba(255, 255, 255, 0.15); /* translucent-white glass hover — ui-rules §5.3 */
    }

.nav-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--color-danger);
    color: var(--color-text-inverse);
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    line-height: 1;
    animation: badge-pop 0.3s ease;
}

@keyframes badge-pop {
    0% {
        transform: scale(0);
    }

    60% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* ── Navbar Logout Link ── */
.nav-logout {
    padding: 6px 12px;
    color: var(--color-navbar-link) !important;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm) !important;
    opacity: 0.7;
    transition: color 0.2s, opacity 0.2s, background-color 0.2s;
}

    .nav-logout:hover {
        color: var(--color-navbar-link-hover) !important;
        background-color: rgba(255, 255, 255, 0.1); /* translucent-white glass hover — ui-rules §5.3 */
        opacity: 1;
    }

/* ── Navbar: My Account link (mirrors nav-messages-link pattern for
   inline badge support) ── */
.nav-account-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--color-navbar-text);
    border-radius: var(--radius-sm);
    font-size: var(--text-nav-size);
    font-weight: var(--text-nav-weight);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s;
}

    .nav-account-link:hover {
        background-color: rgba(255, 255, 255, 0.15); /* translucent-white glass hover — ui-rules §5.3 */
    }

/* ── Navbar: grouped link flyout (Compete, etc.) ──
   Desktop: shows as a dropdown panel on hover/focus-within.
   Mobile: trigger + children are rendered inline inside the expanded
   mobile dropdown (see mobile overrides below). */
.nav-group {
    position: relative;
    display: flex;
    align-items: center;
}

.nav-group-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: none;
    border: none;
    color: var(--color-navbar-link);
    border-radius: var(--radius-sm);
    font-size: var(--text-nav-size);
    font-weight: var(--text-nav-weight);
    line-height: inherit;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

    .nav-group-trigger:hover,
    .nav-group:hover .nav-group-trigger,
    .nav-group:focus-within .nav-group-trigger {
        color: var(--color-navbar-link-hover);
        background: rgba(255, 255, 255, 0.15); /* translucent-white glass hover — ui-rules §5.3 */
    }

.nav-group-chevron {
    font-size: 0.7em;
    line-height: 1;
    opacity: 0.8;
    transition: transform 0.15s ease;
}

.nav-group:hover .nav-group-chevron,
.nav-group:focus-within .nav-group-chevron {
    transform: translateY(1px);
}

.nav-group-menu {
    display: none;
    position: absolute;
    top: 100%; /* flush with trigger bottom — any gap breaks :hover continuity */
    left: 0;
    min-width: 180px;
    padding: var(--space-2);
    background: var(--color-navbar-bg);
    border: 1px solid var(--color-navbar-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 201;
}

.nav-group:hover .nav-group-menu,
.nav-group:focus-within .nav-group-menu {
    display: flex;
    flex-direction: column;
}

/* Links inside the flyout — override the default navbar link padding so they
   stack cleanly instead of sitting as row pills. */
.nav-group-menu a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
}

/* ── League Admin Links (on public pages) ── */
.league-admin-links {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* ── Doubles partner name in matches ── */
.match-partner {
    font-size: 0.85em;
    color: var(--color-text-muted, #666);
    font-weight: 400;
}

/* ── League Card Image ── */
.league-card-image-wrap {
    overflow: hidden;
    border-radius: 14px 14px 0 0;
    max-height: 160px;
}

.league-card-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.league-card:hover .league-card-image {
    transform: scale(1.04);
}

/* When card has an image, remove top border-radius from header */
.league-card-image-wrap + .league-card-header {
    border-radius: 0;
}

/* ── League Header Image (detail page) ── */
.league-header-content {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

.league-header-image {
    max-width: 140px;
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

/* ── Sponsor / Pay Section ── */
.league-sponsor-section {
    margin: 1.5rem 0 2rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, var(--color-primary-tint-light) 0%, var(--color-accent-tint-light) 100%);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    text-align: center;
}

    .league-sponsor-section h3 {
        margin: 0 0 0.5rem;
        font-size: 1.15rem;
    }

.league-sponsor-fee {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

.btn-sponsor:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.sponsor-logo {
    height: 20px;
    width: auto;
    flex-shrink: 0;
}

.btn-cashapp:hover {
    background: linear-gradient(135deg, #00A844 0%, #008F38 100%);
}

.btn-venmo:hover {
    background: #f0f7fc;
}

.btn-zeffy {
    background: #096ad1;
    border: 3px solid #05D4B7;
    color: #05D4B7;
}

    .btn-zeffy:hover {
        background: #f0fdfb;
    }

/* ── Admin Payment Summary Bar ── */
.admin-payment-summary {
    display: flex;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
    padding: 1rem 1.5rem;
    background: #f8f9fa;
    border-radius: 10px;
    border: 1px solid #e9ecef;
}

.payment-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1.5rem;
}

.payment-stat-number {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-text);
}

.payment-stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.25rem;
    color: var(--color-text-muted);
}

.payment-stat-paid .payment-stat-number {
    color: #2E7D32;
}

.payment-stat-unpaid .payment-stat-number {
    color: #E65100;
}

/* ── Admin Payment Badges ── */
.admin-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.admin-badge-success {
    background: #E8F5E9;
    color: #2E7D32;
}

.admin-badge-warning {
    background: #FFF3E0;
    color: #E65100;
}

.admin-badge-muted {
    background: #f0f0f0;
    color: #666;
}

/* Small inline input for payment notes */
.admin-input-sm {
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    min-width: 140px;
    max-width: 200px;
}

/* ── Admin Image Preview ── */
.admin-image-preview {
    margin-top: 0.75rem;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

    .admin-image-preview img {
        max-width: 200px;
        max-height: 120px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #e0e0e0;
    }

/* ── Winner highlight ── */

/* ── Responsive ── */
@media (max-width: 767px) {
    .league-header-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .league-header-image {
        max-width: 100px;
        max-height: 100px;
    }

    .sponsor-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-payment-summary {
        justify-content: center;
    }

    .payment-stat {
        padding: 0.5rem 1rem;
    }
}

/* ============================================================
   Account — Email Change Section
   ============================================================ */
.account-email-section {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.account-email-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: var(--color-card-bg, #FFF8F0);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    gap: 1rem;
    flex-wrap: wrap;
}

.account-email-current {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.account-email-label {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted, #666);
}

.account-email-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text, #2C2C2C);
}

.account-email-form {
    padding: 1.25rem 1.5rem;
    background: var(--color-card-bg, #FFF8F0);
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.account-email-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

@media (max-width: 767px) {
    .account-email-display {
        flex-direction: column;
        align-items: flex-start;
    }

    .account-email-actions {
        flex-direction: column;
    }

        .account-email-actions .btn {
            width: 100%;
            justify-content: center;
        }
}

/* ============================================================
   Printable Score Sheet
   ============================================================ */
.scoresheet {
    max-width: var(--content-width, 1440px);
    margin: 0 auto;
    padding: 1.5rem 2rem;
}

.scoresheet-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 1rem;
    border-bottom: 3px solid var(--color-primary, #7A1530);
    margin-bottom: 1.5rem;
}

.scoresheet-title {
    margin: 0;
    font-size: 1.6rem;
    color: var(--color-primary, #7A1530);
}

.scoresheet-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: #666;
}

.scoresheet-meta {
    text-align: right;
    font-size: 0.8rem;
    color: #888;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scoresheet-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.scoresheet-round-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .scoresheet-round-filter label {
        font-size: 0.9rem;
        font-weight: 600;
        color: #555;
    }

    .scoresheet-round-filter select {
        padding: 0.4rem 0.75rem;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 0.9rem;
    }

.scoresheet-round {
    margin-bottom: 2rem;
    page-break-inside: avoid;
}

.scoresheet-round-title {
    font-size: 1.15rem;
    color: var(--color-primary, #7A1530);
    margin: 0 0 0.75rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid #ddd;
}

/* ── Score Table ── */
.scoresheet-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

    .scoresheet-table th {
        background: var(--color-primary, #7A1530);
        color: #fff;
        padding: 0.5rem 0.75rem;
        text-align: center;
        font-weight: 600;
        font-size: 0.82rem;
        white-space: nowrap;
    }

.scoresheet-sub-header th {
    background: #f0e8eb;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scoresheet-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid #e0e0e0;
    vertical-align: middle;
}

.scoresheet-row-alt td {
    background: #faf8f6;
}

.scoresheet-col-num {
    width: 40px;
    text-align: center;
    font-weight: 600;
    color: #999;
}

.scoresheet-col-team {
    text-align: left;
    font-weight: 600;
    min-width: 140px;
}

.scoresheet-col-vs {
    width: 30px;
    text-align: center;
    color: #bbb;
    font-size: 0.8rem;
    font-style: italic;
}

.scoresheet-col-score {
    text-align: center;
    width: auto;
}

.scoresheet-score-cell {
    text-align: center;
    width: 40px;
    font-weight: 600;
}

.scoresheet-score-blank {
    border-bottom: 2px solid #ccc;
    min-width: 36px;
    height: 28px;
    background: #fefefe;
}

.scoresheet-score-filled {
    color: var(--color-primary, #7A1530);
}

.scoresheet-score-dash {
    width: 16px;
    text-align: center;
    color: #bbb;
    padding: 0 2px;
}

.scoresheet-score-label {
    font-size: 0.68rem;
    text-align: center;
}

.scoresheet-col-winner {
    text-align: center;
    min-width: 100px;
}

.scoresheet-winner-cell {
    text-align: center;
    font-weight: 600;
    color: var(--color-primary, #7A1530);
    min-width: 100px;
}

/* ── Notes area ── */
.scoresheet-notes {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid #ddd;
}

    .scoresheet-notes h3 {
        font-size: 0.95rem;
        color: #555;
        margin: 0 0 0.75rem;
    }

.scoresheet-note-line {
    height: 1.8rem;
    border-bottom: 1px solid #ccc;
    margin-bottom: 0.25rem;
}

/* ── Footer ── */
.scoresheet-footer {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 2rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e0e0e0;
}

/* ============================================================
   Print Styles
   ============================================================ */
@media print {
    /* Hide non-print elements */
    .no-print,
    .navbar,
    .footer,
    .scoresheet-controls {
        display: none !important;
    }

    /* Reset page for print */
    body {
        background: #fff !important;
        font-size: 11pt;
        color: #000;
    }

    .main-content {
        padding: 0 !important;
        background: #fff !important;
    }

        .main-content::before {
            display: none !important;
        }

    .scoresheet {
        padding: 0;
        max-width: 100%;
    }

    .scoresheet-header {
        border-bottom-color: #000;
    }

    .scoresheet-title {
        color: #000;
        font-size: 16pt;
    }

    .scoresheet-round-title {
        color: #000;
    }

    .scoresheet-table th {
        background: #333 !important;
        color: #fff !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .scoresheet-sub-header th {
        background: #eee !important;
        color: #333 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .scoresheet-row-alt td {
        background: #f5f5f5 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .scoresheet-score-blank {
        border-bottom: 2px solid #999;
        background: transparent !important;
    }

    .scoresheet-round {
        page-break-inside: avoid;
    }

    .scoresheet-notes {
        page-break-inside: avoid;
    }

    /* Ensure borders print */
    .scoresheet-table td {
        border-bottom: 1px solid #ccc;
    }

    @page {
        margin: 0.5in;
    }
}


/* ============================================================
   Gallery Cards — Photo with Tagger Below
   Add to site.css. Replaces/extends .gallery-* styles.
   ============================================================ */











/* ── Lightbox tagger styling ── */
.lightbox-content .media-tagger {
    margin-top: 0.75rem;
    padding: 0.75rem 0;
}

.lightbox-content .media-tags-list {
    justify-content: center;
}

.lightbox-content .media-tag-chip {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    color: #fff;
}

    .lightbox-content .media-tag-chip:hover {
        background: rgba(255, 255, 255, 0.25);
    }

.lightbox-content .media-tag-remove:hover {
    color: #fca5a5;
}

.lightbox-content .btn-media-tag {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
}

    .lightbox-content .btn-media-tag:hover {
        background: rgba(255, 255, 255, 0.25);
    }

.lightbox-content .media-tag-actions {
    justify-content: center;
}


.lightbox-content {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .lightbox-content img {
        max-width: 100%;
        max-height: 75vh;
        object-fit: contain;
        border-radius: 6px;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
    }

    .lightbox-content .media-tagger {
        width: 100%;
        max-width: 600px;
        margin-top: 1rem;
        padding: 0.75rem 1rem;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        backdrop-filter: blur(8px);
    }

    .lightbox-content .media-tags-list {
        justify-content: center;
    }

    .lightbox-content .media-tag-chip {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(255, 255, 255, 0.25);
        color: #fff;
    }

        .lightbox-content .media-tag-chip:hover {
            background: rgba(255, 255, 255, 0.25);
        }

    .lightbox-content .media-tag-remove:hover {
        color: #fca5a5;
    }

    .lightbox-content .btn-media-tag {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.3);
    }

        .lightbox-content .btn-media-tag:hover {
            background: rgba(255, 255, 255, 0.25);
        }

    .lightbox-content .media-tag-actions {
        justify-content: center;
    }

    .lightbox-content .media-tag-picker {
        background: rgba(30, 30, 50, 0.85);
        border-color: rgba(255, 255, 255, 0.15);
    }

    .lightbox-content .media-tag-search {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border-color: rgba(255, 255, 255, 0.2);
    }

        .lightbox-content .media-tag-search::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

    .lightbox-content .media-tag-results {
        background: rgba(30, 30, 50, 0.9);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .lightbox-content .media-tag-result {
        color: #e5e5e5;
    }

        .lightbox-content .media-tag-result:hover {
            background: rgba(255, 255, 255, 0.1);
        }



/* ── Responsive ── */
@media (max-width: 767px) {
    .newest-members-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .newest-members-scroll {
        gap: 1rem;
        padding: 0.75rem 0.25rem 1.25rem;
    }

    /* Use small card size on mobile */
    .newest-card-link .player-card {
        width: 140px !important;
        height: 200px !important;
    }

    .newest-cta-card {
        width: 140px;
        min-width: 140px;
        height: 200px;
    }

    .newest-cta-icon {
        width: 44px;
        height: 44px;
        font-size: 1.2rem;
    }

    .newest-cta-text strong {
        font-size: 0.82rem;
    }

    .newest-cta-text span {
        font-size: 0.7rem;
    }
}

.player-cta-card {
    text-decoration: none !important;
}

.player-cta-card-inner {
    width: 140px;
    height: 200px;
    border-radius: var(--radius-lg);
    border: 2px dashed var(--color-primary-border);
    background: var(--color-card-bg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: border-color 0.2s, background-color 0.2s, transform 0.3s;
}

.player-cta-card:hover .player-cta-card-inner {
    border-color: var(--color-primary);
    background: var(--color-card-hover);
    transform: translateY(-4px);
}

.player-cta-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px dashed var(--color-primary-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-primary);
    transition: border-color 0.2s;
}

.player-cta-card:hover .player-cta-icon {
    border-color: var(--color-primary);
}

.player-cta-text {
    text-align: center;
    padding: 0 0.75rem;
}

    .player-cta-text strong {
        display: block;
        font-size: 0.82rem;
        font-weight: 700;
        color: var(--color-primary);
    }

    .player-cta-text span {
        display: block;
        font-size: 0.7rem;
        color: var(--color-text-muted);
        margin-top: 3px;
    }

/* Desktop: scale the CTA card up to match the md PlayerCard variant
   that the directory grid swaps to at 1200px (see
   players-leagues.css — .player-directory-card-narrow/-wide). The CTA
   sits in the same grid as the player cards, so its dimensions need
   to stay locked to whichever PlayerCard size is currently rendering;
   otherwise the dashed-border placeholder reads as a smaller "odd one
   out" tile at the end of the row. Inner icon and text scale
   proportionally (~1.4×) so the visual weight feels consistent with
   the upgraded cards rather than just stretching the box. */
@media (min-width: 1200px) {
    .player-cta-card-inner {
        width: 195px;
        height: 278px;
        gap: 0.85rem;
    }

    .player-cta-icon {
        width: 56px;
        height: 56px;
        font-size: 1.7rem;
    }

    .player-cta-text strong {
        font-size: 1rem;
    }

    .player-cta-text span {
        font-size: 0.82rem;
    }
}


.checkin-card {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    border: 1px solid var(--color-divider);
    box-shadow: var(--shadow-sm);
    text-align: center;
    max-width: 400px;
    margin: 0 auto;
}

/* ── Check-In Button ── */
.checkin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    font-size: 1.1rem;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: var(--shadow-primary-md);
}

    .checkin-btn:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-primary-lg);
    }

    .checkin-btn:active {
        transform: scale(0.98);
    }

    .checkin-btn:disabled {
        opacity: 0.7;
        cursor: not-allowed;
        transform: none;
    }

.checkin-btn-icon {
    font-size: 1.3rem;
}

/* ── Success State ── */
.checkin-success {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md);
    animation: checkin-pop 0.4s cubic-bezier(0.2, 0.8, 0.4, 1.2);
}

@keyframes checkin-pop {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.checkin-success-icon {
    font-size: 2rem;
    animation: checkin-bounce 0.5s ease 0.2s;
}

@keyframes checkin-bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.checkin-success-text {
    display: flex;
    flex-direction: column;
    text-align: left;
}

    .checkin-success-text strong {
        font-size: 1rem;
        color: var(--color-success);
    }

    .checkin-success-text span {
        font-size: 0.85rem;
        color: var(--color-success);
        font-weight: var(--font-weight-semibold);
    }

/* ── Already Checked In ── */
.checkin-done {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem;
    background: var(--color-card-bg);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-divider);
}

.checkin-done-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-success);
    color: var(--color-text-inverse);
    font-size: 0.75rem;
    font-weight: var(--font-weight-extrabold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkin-done-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* ── Stats Row ── */
.checkin-stats {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-divider);
}

.checkin-stat {
    text-align: center;
}

.checkin-stat-val {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-primary);
    display: block;
}

.checkin-stat-lbl {
    font-size: 0.65rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ── Desktop: Inline pill button in navbar ── */
.nav-checkin-desktop {
    display: flex;
    align-items: center;
    margin-left: 0.5rem;
}

.nav-checkin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 1rem;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--color-highlight), var(--color-highlight-dark));
    color: var(--color-primary-dark);
    font-size: 0.78rem;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s;
    box-shadow: var(--shadow-sm);
    white-space: nowrap;
    letter-spacing: 0.02em;
}

    .nav-checkin-btn:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-md);
    }

    .nav-checkin-btn:active {
        transform: scale(0.97);
    }

    .nav-checkin-btn:disabled {
        opacity: 0.7;
        cursor: wait;
        transform: none;
    }

.nav-checkin-done {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.85rem;
    border-radius: 20px;
    background: var(--color-success-bg);
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
}

/* Pop animation for success */
.nav-checkin-pop {
    animation: nav-checkin-pop 0.4s cubic-bezier(0.2, 0.8, 0.4, 1.2);
}

@keyframes nav-checkin-pop {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* ── Mobile: Floating Action Button ── */
.nav-checkin-fab {
    display: none; /* Hidden on desktop */
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 200;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--color-highlight), var(--color-highlight-dark));
    color: var(--color-primary-dark);
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
    transition: transform 0.2s, box-shadow 0.2s;
    align-items: center;
    justify-content: center;
}

    .nav-checkin-fab:hover {
        transform: scale(1.08);
        box-shadow: var(--shadow-lg);
    }

    .nav-checkin-fab:active {
        transform: scale(0.95);
    }

    .nav-checkin-fab:disabled {
        opacity: 0.8;
        cursor: wait;
    }

.nav-checkin-fab-done {
    background: var(--color-success);
    color: var(--color-text-inverse);
    cursor: default;
    font-size: 1.3rem;
}

/* ── Responsive ── */
@media (max-width: 767px) {
    /* Hide desktop button on mobile */
    .nav-checkin-desktop {
        display: none;
    }

    /* Show FAB on mobile */
    .nav-checkin-fab {
        display: flex;
    }
}

/* ── Push FAB above admin bar when present ── */
.page:has(.admin-bar) .nav-checkin-fab {
    bottom: calc(1.25rem + 32px);
}
.join-card {
    max-width: 560px;
    margin: 3rem auto;
    text-align: center;
    background: var(--color-surface);
    border-radius: 20px;
    padding: 2.5rem 2rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

.join-icon {
    font-size: 3.5rem;
    margin-bottom: 0.75rem;
}

.join-card h1 {
    margin: 0 0 0.35rem;
    font-size: 1.6rem;
    color: var(--color-primary);
}

.join-subtitle {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

/* ── Choice: login vs register ── */
.join-choice {
    display: flex;
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 1.5rem;
}

.join-choice-option {
    flex: 1;
    padding: 1.5rem;
    background: var(--color-bg);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

    .join-choice-option h3 {
        margin: 0;
        font-size: 1rem;
        color: var(--color-text);
    }

    .join-choice-option p {
        margin: 0;
        font-size: 0.85rem;
        color: var(--color-text-muted);
        flex: 1;
    }

    .join-choice-option .btn {
        margin-top: 0.75rem;
        width: 100%;
        justify-content: center;
    }

.join-choice-divider {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

    .join-choice-divider span {
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

/* ── Features list (success state) ── */
.join-features {
    text-align: left;
    margin: 1.5rem auto;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.join-feature {
    font-size: 0.88rem;
    color: var(--color-text);
    padding: 0.5rem 0.75rem;
    background: var(--color-bg);
    border-radius: 8px;
}

.join-actions {
    margin-top: 1.5rem;
}

/* ── Responsive ── */
@media (max-width: 600px) {
    .join-card {
        margin: 1.5rem auto;
        padding: 1.75rem 1.25rem;
    }

    .join-choice {
        flex-direction: column;
        gap: 0;
    }

    .join-choice-divider {
        padding: 0.75rem 0;
        justify-content: center;
    }
}


/* ═══════════════════════════════════════════════════════
   Player Challenges — Frontend Styles
   ═══════════════════════════════════════════════════════ */

/* ── Record Summary ── */
.challenge-record {
    display: flex;
    gap: 1.5rem;
    padding: 0.75rem 0;
}

.challenge-record-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.challenge-record-val {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.challenge-record-lbl {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ── Challenge Cards ── */
.challenge-card {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-divider);
    margin-bottom: 0.5rem;
    background: var(--color-surface);
}

.challenge-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.challenge-meta {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.15rem;
}

.challenge-message {
    font-style: italic;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}

.challenge-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ── Game Score Pills ── */
.challenge-scores {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.challenge-game {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.challenge-game-a {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.challenge-game-b {
    background: var(--color-danger-bg);
    color: var(--color-danger);
}

/* ── Proof link (video / photo / post proving the match) ── */
.challenge-proof {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.challenge-proof-link {
    color: var(--color-link);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.challenge-proof-link:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

/* ── Status Badges ── */
.challenge-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}

.challenge-badge-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning);
}

.challenge-badge-accepted {
    background: var(--color-success-bg);
    color: var(--color-success);
}

.challenge-badge-inprogress {
    background: var(--color-info-bg);
    color: var(--color-info);
}

/* ── Win/Loss Result ── */
.challenge-result {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 800;
}

.challenge-result-win {
    background: color-mix(in srgb, var(--color-stat-win) 10%, transparent);
    color: var(--color-stat-win);
}

.challenge-result-loss {
    background: color-mix(in srgb, var(--color-stat-loss) 10%, transparent);
    color: var(--color-stat-loss);
}

/* ── Card Accents ── */
.challenge-won {
    border-left: 3px solid var(--color-stat-win);
}

.challenge-lost {
    border-left: 3px solid var(--color-stat-loss);
}

.challenge-pending {
    border-left: 3px solid var(--color-warning);
}

.challenge-active {
    border-left: 3px solid var(--color-info);
}

/* ── Challenge Form ── */
.challenge-form {
    margin-top: var(--space-3);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
}

.challenge-form-row {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}

.challenge-form-select {
    max-width: 140px;
    flex: 0 1 140px;
}

.challenge-form-select-wide {
    max-width: 200px;
    flex: 0 1 200px;
}

.challenge-form-message-input {
    margin-bottom: var(--space-3);
}

.challenge-form-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
}

.challenge-form-actions {
    display: flex;
    gap: var(--space-2);
}

.challenge-form .frontend-input {
    font-size: var(--font-size-sm);
    padding: 0.4rem 0.6rem;
}

/* ── Challenge confirm box (opponent response to pending score) ── */
.challenge-confirm-box {
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
}

.challenge-confirm-prompt {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-2);
}

.challenge-confirm-actions {
    display: flex;
    gap: var(--space-2);
}

/* ── Challenge score report row (participant reports game score) ── */
.challenge-score-row {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--space-3);
}

.challenge-score-input {
    max-width: 70px;
    flex: 0 0 70px;
}

.challenge-score-separator {
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
}

.challenge-score-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin-top: 0.35rem;
}

/* ── Challenge section wrappers and headers ── */
.challenge-section {
    margin-top: var(--space-4);
}

.challenge-section-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--color-heading);
}

.challenge-confirmation-status {
    font-size: 0.82rem;
    margin-top: 0.4rem;
    color: var(--color-text-muted);
}

.challenge-already-confirmed {
    font-size: var(--font-size-sm);
    color: var(--color-accent);
}

.challenge-action-message {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-accent);
}

.challenge-issue-btn {
    margin-top: var(--space-3);
}

.challenge-report-score-btn {
    margin-top: var(--space-2);
}

.challenge-no-challenges {
    margin-top: var(--space-3);
}

/* ── Small button variant ── */
.btn-sm {
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
}


.page-description {
    margin: 0.25rem 0 1.75rem;
    color: var(--color-text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

    .page-description p {
        margin: 0 0 0.75rem;
    }

        .page-description p:last-child {
            margin-bottom: 0;
        }

    .page-description a {
        color: var(--color-accent);
        font-weight: 500;
    }
.nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    top: var(--nav-height); 
    z-index: 150; 
    background: transparent;
    cursor: default;
}
/* ============================================================
   Media page — player filter banner
   ============================================================ */
.media-player-filter-banner {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    margin-bottom: 1.5rem;
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--color-text);
}

.media-player-filter-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.media-player-filter-banner strong {
    color: var(--color-primary);
}

.media-player-filter-clear {
    margin-left: auto;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 4px;
    transition: background 0.15s;
}

    .media-player-filter-clear:hover {
        background: color-mix(in srgb, var(--color-primary) 10%, transparent);
        color: var(--color-primary);
    }

/* ============================================================
   PlayerChallenges — Fight Poster Style
   ============================================================ */

/* ── Record bar ── */
.ch-record-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.1rem;
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
    border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-radius: 10px;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.ch-record-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
}

.ch-record-num {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 1.8rem;
    line-height: 1;
}

.ch-record-lbl {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--color-text-muted);
}

.ch-record-win .ch-record-num {
    color: var(--color-stat-win);
}

.ch-record-loss .ch-record-num {
    color: var(--color-stat-loss);
}

.ch-record-divider {
    font-size: 1.4rem;
    color: var(--color-text-muted);
    font-weight: 300;
    line-height: 1;
}

.ch-issue-btn {
    margin-left: auto;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: 0.45rem 1.1rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    transition: opacity 0.15s;
    white-space: nowrap;
}

    .ch-issue-btn:hover {
        opacity: 0.85;
    }

/* ── Section labels ── */
.ch-section-label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 1.1rem 0 0.5rem;
}

/* ── Poster card shell ── */
.ch-poster {
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 0.9rem;
    border: 1px solid var(--color-surface);
    transition: transform 0.15s, box-shadow 0.15s;
}

    .ch-poster:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
    }

/* Active challenges — subtle highlight */
.ch-poster-active {
    border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

/* Completed — won / lost tint */
.ch-poster-won {
    background: color-mix(in srgb, var(--color-success) 6%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-success) 25%, transparent);
}

.ch-poster-lost {
    background: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-danger) 20%, transparent);
}

.ch-poster-inner {
    padding: 0.85rem 1rem 0.75rem;
}

/* ── Meta row ── */
.ch-poster-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
    font-size: 0.76rem;
}

.ch-poster-type {
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 2px 9px;
    border-radius: 20px;
}

.ch-type-singles {
    background: color-mix(in srgb, var(--color-primary) 15%, transparent);
    color: var(--color-primary);
}

.ch-type-doubles {
    background: color-mix(in srgb, var(--color-accent) 18%, transparent);
    color: var(--color-accent);
}

.ch-poster-bestof,
.ch-poster-date {
    color: var(--color-text-muted);
}

.ch-status-pill {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 10px;
    border-radius: 20px;
}

.ch-status-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning-border);
}

.ch-status-accepted {
    background: var(--color-info-bg);
    color: var(--color-info);
    border: 1px solid var(--color-info-border);
}

.ch-status-completed {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}

.ch-status-disputed {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-border);
}

.ch-status-declined {
    background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
    color: var(--color-text-muted);
    border: 1px solid color-mix(in srgb, var(--color-text-muted) 25%, transparent);
}

/* ── Matchup layout ── */
.ch-matchup {
    display: grid;
    align-items: center;
    gap: 0.5rem;
    min-height: 90px;
}

.ch-matchup-singles {
    grid-template-columns: 1fr 80px 1fr;
}

.ch-matchup-doubles {
    grid-template-columns: 1fr 80px 1fr;
}

/* ── Side (each team / player) ── */
.ch-side {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    position: relative;
    padding: 0.5rem 0.4rem 0.6rem;
    border-radius: 10px;
    transition: background 0.15s;
}

.ch-side-left {
    text-align: center;
}

.ch-side-right {
    text-align: center;
}

.ch-side-winner {
    background: var(--color-success-bg);
}

.ch-side-loser {
    opacity: 0.62;
    filter: grayscale(0.3);
}

/* ── Avatar ── */
.ch-avatar-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--color-surface);
    box-shadow: 0 2px 10px rgba(0,0,0,0.25);
    flex-shrink: 0;
}

    .ch-avatar-wrap.ch-avatar-you {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 35%, transparent);
    }

.ch-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Player name / rating ── */
.ch-player-name {
    font-size: 0.82rem;
    font-weight: 700;
    text-align: center;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-text);
}

.ch-player-rating {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    background: var(--color-border);
    padding: 1px 7px;
    border-radius: 10px;
}

/* ── Doubles side-by-side duo layout ── */
.ch-duo {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.ch-duo-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

    .ch-duo-slot .ch-avatar-wrap {
        width: 48px;
        height: 48px;
    }

.ch-duo-amp {
    align-self: center;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-weight: 700;
    padding-top: 12px;
}

/* ── Center VS / score ── */
.ch-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

.ch-vs-badge {
    font-family: 'Bebas Neue', 'Impact', sans-serif;
    font-size: 1.9rem;
    color: var(--color-text-muted);
    letter-spacing: 0.05em;
    line-height: 1;
}

.ch-score {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Bebas Neue', 'Impact', sans-serif;
}

.ch-score-num {
    font-size: 2rem;
    line-height: 1;
    color: var(--color-text-muted);
    min-width: 1.2ch;
    text-align: center;
}

    .ch-score-num.ch-score-high {
        color: var(--color-primary);
        text-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 50%, transparent);
    }

.ch-score-sep {
    font-size: 1.5rem;
    color: var(--color-text-muted);
    line-height: 1;
}

.ch-score-label {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
}

/* ── Win/Loss result badge ── */
.ch-result-badge {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    padding: 2px 9px;
    border-radius: 20px;
    pointer-events: none;
    white-space: nowrap;
}

.ch-badge-win {
    background: var(--color-stat-win);
    color: var(--color-text-inverse);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-stat-win) 45%, transparent);
}

.ch-badge-loss {
    background: var(--color-stat-loss);
    color: var(--color-text-inverse);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-stat-loss) 35%, transparent);
}

/* ── Poster action row ── */
.ch-poster-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-divider);
    margin-top: 0.5rem;
}

.ch-action-btn {
    padding: 0.4rem 1.1rem;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: opacity 0.15s;
}

    .ch-action-btn:hover {
        opacity: 0.85;
    }

.ch-action-accept {
    background: var(--color-success);
    color: var(--color-text-inverse);
}

.ch-action-decline {
    background: var(--color-danger);
    color: var(--color-text-inverse);
}

.ch-action-score {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

/* ── Misc ── */
.ch-loading,
.ch-empty {
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 0.9rem;
    padding: 0.75rem 0;
}

.ch-see-all {
    text-align: center;
    font-size: 0.82rem;
    margin-top: -0.25rem;
    margin-bottom: 0.5rem;
}

    .ch-see-all a {
        color: var(--color-primary);
        text-decoration: none;
    }

/* ── Responsive ── */
@media (max-width: 520px) {
    .ch-matchup-singles,
    .ch-matchup-doubles {
        grid-template-columns: 1fr 56px 1fr;
    }

    .ch-avatar-wrap {
        width: 50px;
        height: 50px;
    }

    .ch-duo-slot .ch-avatar-wrap {
        width: 38px;
        height: 38px;
    }

    .ch-score-num {
        font-size: 1.55rem;
    }

    .ch-vs-badge {
        font-size: 1.5rem;
    }

    .ch-player-name {
        font-size: 0.74rem;
        max-width: 90px;
    }
}

/* ============================================================
   Challenge inline form (PlayerProfile.razor)
   ============================================================ */

.ch-form {
    margin-top: 0.85rem;
    padding: 1rem;
    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ch-form-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

    .ch-form-row .frontend-input {
        flex: 1 1 140px;
        min-width: 130px;
    }

.ch-form-msg {
    width: 100%;
}

.ch-form-error {
    font-size: 0.82rem;
    color: var(--color-danger);
}

.ch-form-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ============================================================
   Video — Search Bar
   ============================================================ */
.video-search-bar {
    margin-bottom: 1.25rem;
}

.video-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 420px;
}

.video-search-icon {
    position: absolute;
    left: 10px;
    font-size: 0.9rem;
    pointer-events: none;
    opacity: 0.5;
}

.video-search-input {
    width: 100%;
    padding: 0.55rem 2.5rem 0.55rem 2.2rem;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}

    .video-search-input:focus {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px var(--color-accent-focus);
    }

    .video-search-input::placeholder {
        color: var(--color-text-muted);
        font-size: 0.85rem;
    }

.video-search-clear {
    position: absolute;
    right: 8px;
    background: rgba(0, 0, 0, 0.06);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background-color 0.15s;
    padding: 0;
    line-height: 1;
}

    .video-search-clear:hover {
        background: rgba(0, 0, 0, 0.14);
        color: var(--color-text);
    }

/* ============================================================
   Video — Load More
   ============================================================ */
.video-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.video-load-more-count {
    font-size: 0.8em;
    opacity: 0.65;
    margin-left: 0.4rem;
}

/* ============================================================
   Video — Multi-Playlist section labels
   ============================================================ */
.video-section-label {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

    .video-section-label h3 {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--color-text);
    }

.video-section-count {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    font-weight: 500;
}

.video-playlist-section {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* ============================================================
   Media page — video section spacing
   ============================================================ */
.media-video-section {
    margin-top: 2.5rem;
}

/* ============================================================
   Media Page — Tab Navigation
   ============================================================ */

.media-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 1.75rem;
    /* Sits flush below the page title / player banner */
}

.media-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px; /* overlap the container border */
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

    .media-tab:hover {
        color: var(--color-text);
    }

.media-tab-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.media-tab-icon {
    font-size: 1.05rem;
    line-height: 1;
}

/* ── Tab panels ──
   Both panels stay in the DOM to preserve component state (infinite
   scroll observers, loaded images, etc.). CSS controls visibility.   */
.media-tab-panel {
    display: none;
}

.media-tab-panel-active {
    display: block;
}

/* Intro text inside the photos panel */
.media-panel-intro {
    color: var(--color-text-muted);
    margin-bottom: 1.25rem;
    font-size: 0.95rem;
}

/* ── Mobile: full-width tabs ── */
@media (max-width: 480px) {
    .media-tabs {
        gap: 0;
    }

    .media-tab {
        flex: 1;
        justify-content: center;
        padding: 0.65rem 0.75rem;
        font-size: 0.9rem;
    }
}

/* ============================================================
   Video Card — Match link (when video is ProofUrl of a match)
   Renders below the video title + date on each card. Clicking
   opens /matches/{id} on the frontend or the admin history tab
   with that match expanded on the backend.
   ============================================================ */

.video-match-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.3rem 0.65rem;
    background: var(--color-primary-tint);
    border: 1px solid var(--color-primary-border);
    border-radius: 999px;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

    .video-match-link:hover {
        background: var(--color-primary);
        color: var(--color-text-inverse);
        border-color: var(--color-primary);
        text-decoration: none;
    }

.video-match-link-icon {
    font-size: 0.95rem;
    line-height: 1;
}

.video-match-link-text {
    letter-spacing: 0.01em;
}

/* Admin-variant — slightly different tokens so the icon sits cleanly
   on the admin dark-theme cards in VideoLibrary. */
.video-match-link-admin {
    background: rgba(0, 174, 239, 0.12);
    border-color: rgba(0, 174, 239, 0.28);
    color: #60c5f1;
}

    .video-match-link-admin:hover {
        background: rgba(0, 174, 239, 0.22);
        border-color: rgba(0, 174, 239, 0.45);
        color: #a5dcf5;
    }

/* ============================================================
   Match Detail page (/matches/{id})
   ============================================================ */

.match-detail-header {
    margin: 1rem 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-divider);
}

.match-detail-back {
    margin-bottom: 0.75rem;
    font-size: var(--font-size-sm);
}

    .match-detail-back a {
        color: var(--color-text-muted);
        text-decoration: none;
    }

        .match-detail-back a:hover {
            color: var(--color-primary);
        }

.match-detail-meta-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.match-detail-type {
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
}

.match-detail-dot {
    opacity: 0.4;
}

/* ── Matchup — two sides with a VS separator ── */
.match-detail-matchup {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.match-detail-side {
    position: relative;
    padding: 1.5rem 1.25rem;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s;
}

.match-detail-side-winner {
    border-color: var(--color-stat-win);
    background: color-mix(in srgb, var(--color-stat-win) 6%, var(--color-surface));
}

.match-detail-side-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: 0.5rem;
}

.match-detail-player-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-heading);
    line-height: 1.3;
    margin-bottom: 0.2rem;
}

.match-detail-side-score {
    margin-top: 0.75rem;
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.match-detail-side-winner .match-detail-side-score {
    color: var(--color-stat-win);
}

.match-detail-winner-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-stat-win);
    color: var(--color-text-inverse);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--color-stat-win) 40%, transparent);
}

.match-detail-vs {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-text-muted);
    letter-spacing: 0.1em;
}

/* ── Games breakdown ── */
.match-detail-games {
    margin-bottom: 2rem;
}

    .match-detail-games h2 {
        font-size: var(--font-size-lg);
        margin-bottom: 0.75rem;
    }

.match-detail-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.75rem;
}

.match-detail-game {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
}

.match-detail-game-a-won {
    border-left-color: var(--color-stat-win);
}

.match-detail-game-b-won {
    border-left-color: var(--color-stat-loss);
}

.match-detail-game-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.match-detail-game-score {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-heading);
    font-variant-numeric: tabular-nums;
}

.match-detail-game-dash {
    margin: 0 0.25rem;
    color: var(--color-text-muted);
}

/* ── Video + notes sections ── */
.match-detail-video {
    margin-bottom: 2rem;
}

    .match-detail-video h2 {
        font-size: var(--font-size-lg);
        margin-bottom: 0.75rem;
    }

.match-detail-proof {
    margin: 1rem 0 2rem;
    padding: 0.75rem 1rem;
    background: var(--color-accent-tint-light);
    border: 1px solid var(--color-accent-border);
    border-radius: var(--radius-md);
}

.match-detail-notes {
    margin-bottom: 2rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface-alt);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text);
}

    .match-detail-notes p {
        margin: 0 0 0.5rem;
    }

    .match-detail-notes p:last-child {
        margin-bottom: 0;
    }

.match-detail-not-found {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

    .match-detail-not-found h1 {
        color: var(--color-heading);
    }

    .match-detail-not-found p {
        max-width: 420px;
        margin: 0 auto 1.5rem;
    }

/* ── Mobile ── */
@media (max-width: 600px) {
    .match-detail-matchup {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .match-detail-vs {
        order: 0;
        padding: 0.25rem 0;
    }

    .match-detail-side-score {
        font-size: 2.75rem;
    }
}

/* ============================================================
   Media Page — Playlist sub-tabs (OAuth / full integration mode)
   Rendered inside the Videos panel when the tenant has connected
   YouTube via OAuth. Deliberately styled as pills rather than the
   bordered-underline used by the main .media-tabs, to signal a
   subordinate / filter-like level of navigation.
   ============================================================ */

.media-playlist-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--color-divider);
}

.media-playlist-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 1rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

    .media-playlist-tab:hover {
        background: var(--color-accent-tint-light);
        color: var(--color-text);
        border-color: var(--color-accent-border);
    }

.media-playlist-tab-active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

    .media-playlist-tab-active:hover {
        background: var(--color-primary-dark);
        color: var(--color-text-inverse);
        border-color: var(--color-primary-dark);
    }

/* Narrow viewports — switch to horizontal scroll so long playlist
   names don't push the grid down the page. */
@media (max-width: 640px) {
    .media-playlist-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.75rem;
        /* Hide scrollbar visually but keep scroll functionality */
        scrollbar-width: thin;
    }

    .media-playlist-tab {
        flex-shrink: 0;
        font-size: 0.82rem;
        padding: 0.35rem 0.85rem;
    }
}

/* ============================================================
   VideoInfoPanel — complete vip-* replacement for site.css
   
   INSTRUCTIONS:
   Find and delete ALL existing .vip-* rules in site.css
   (everything from "VideoInfoPanel" comment to the last .vip- rule).
   Paste this entire block in their place.
   ============================================================ */

/* ── Shell ── */
.vip-root {
    display: flex;
    flex-direction: column;
    background: transparent;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* ── Tab strip ── */
.vip-tabs {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.vip-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 1rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    color: rgba(255, 255, 255, 0.45);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

    .vip-tab:hover {
        color: rgba(255, 255, 255, 0.8);
        background: rgba(255, 255, 255, 0.04);
    }

.vip-tab-active {
    color: #fff !important;
    border-bottom-color: var(--color-accent, #00aeef);
}

.vip-tab-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.vip-tab-pip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--color-accent, #00aeef);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
}

/* ── Panel container — scrollable ── */
.vip-panels {
    overflow-y: auto;
    max-height: 320px;
    overscroll-behavior: contain;
}

.vip-panel {
    padding: 0.75rem 1rem 1rem;
}

/* ── State messages ── */
.vip-state-msg {
    text-align: center;
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.75rem 0;
    color: rgba(255, 255, 255, 0.4);
}

/* ── Badge grid (showcase) ── */
.vip-badge-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.vip-badge-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.7rem;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.05);
    border-left: 3px solid rgba(255, 255, 255, 0.12);
}

.vip-rarity-legendary {
    border-left-color: #f59e0b;
}

.vip-rarity-epic {
    border-left-color: #a855f7;
}

.vip-rarity-rare {
    border-left-color: #3b82f6;
}

.vip-rarity-uncommon {
    border-left-color: #22c55e;
}

.vip-rarity-hidden {
    border-left-color: #6b7280;
}

.vip-badge-card-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.vip-badge-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.vip-badge-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}

.vip-badge-card-player {
    font-size: 0.73rem;
    color: rgba(255,255,255,0.45);
}

.vip-badge-card-rarity {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.35);
    flex-shrink: 0;
}

/* ── Report form ── */
.vip-report-intro {
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
    margin: 0 0 0.875rem;
    line-height: 1.55;
}

.vip-form {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

/* Two-column row for timestamp + player */
.vip-form-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    align-items: start;
}

.vip-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vip-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.65);
    letter-spacing: 0.02em;
}

.vip-optional {
    color: rgba(255,255,255,0.3);
    font-weight: 400;
}

.vip-required {
    color: #f87171;
}

/* Shared input base */
.vip-input {
    background: rgba(255,255,255,0.07);
    border: 1.5px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    color: #fff;
    font-family: inherit;
    font-size: 0.85rem;
    padding: 0.38rem 0.6rem;
    transition: border-color 0.2s, background 0.2s;
    width: 100%;
    box-sizing: border-box;
}

    .vip-input::placeholder {
        color: rgba(255,255,255,0.25);
    }

    .vip-input:focus {
        outline: none;
        border-color: var(--color-accent, #00aeef);
        background: rgba(255,255,255,0.1);
    }

.vip-input-err {
    border-color: #f87171 !important;
}

/* Select */
.vip-select option {
    background: #1a1c2e;
    color: #fff;
}

/* Timestamp cluster */
.vip-ts {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.vip-ts-field {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.vip-ts-input {
    width: 56px !important;
    text-align: center;
    padding: 0.38rem 0.3rem;
    -moz-appearance: textfield;
}

    .vip-ts-input::-webkit-inner-spin-button,
    .vip-ts-input::-webkit-outer-spin-button {
        -webkit-appearance: none;
    }

.vip-ts-unit {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
}

.vip-ts-sep {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.3);
}

.vip-ts-preview {
    font-size: 0.76rem;
    color: rgba(255,255,255,0.35);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Textarea */
.vip-textarea {
    resize: vertical;
    min-height: 68px;
    line-height: 1.5;
}

.vip-field-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2px;
}

.vip-char {
    font-size: 0.7rem;
    color: rgba(255,255,255,0.28);
}

.vip-err-msg {
    font-size: 0.72rem;
    color: #f87171;
}

/* Badge description callout */
.vip-badge-desc {
    margin: 0.35rem 0 0;
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    line-height: 1.5;
    font-style: italic;
}

/* Form-level error */
.vip-form-error {
    padding: 0.4rem 0.65rem;
    background: rgba(239,68,68,0.12);
    border: 1px solid rgba(239,68,68,0.3);
    border-radius: 6px;
    font-size: 0.8rem;
    color: #f87171;
}

/* Submit row */
.vip-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 0.2rem;
}

.vip-submit-btn {
    min-width: 120px;
}

/* Success */
.vip-success {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.22);
    border-radius: 8px;
}

.vip-success-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.vip-success strong {
    color: #fff;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 3px;
}

.vip-success p {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.5);
}

/* Mobile */
@media (max-width: 600px) {
    .vip-panels {
        max-height: 280px;
    }

    .vip-form-row {
        grid-template-columns: 1fr;
    }

    .vip-tab {
        padding: 0.5rem 0.7rem;
        font-size: 0.78rem;
    }
}


/* ============================================================
   Shot Reports Admin Page — action area additions for admin.css
   ============================================================ */

.shot-report-action-area {
    border-top: 1px solid var(--adm-border, rgba(255,255,255,0.08));
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.shot-report-action-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.shot-report-action-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-text-muted, #8891aa);
    white-space: nowrap;
    padding-top: 0.45rem; /* align with first input */
    min-width: 80px;
}

.shot-report-badge-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    flex-wrap: wrap;
}

.shot-report-badge-select {
    flex: 1;
    min-width: 200px;
    font-size: 0.82rem !important;
}

.shot-report-badge-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--adm-text, #e2e8f0);
    white-space: nowrap;
}

.shot-report-badge-xp {
    font-size: 0.72rem;
    font-weight: 700;
    color: #22c55e;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 10px;
    padding: 1px 7px;
}

.shot-report-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    flex-wrap: wrap;
}

.shot-report-note-input {
    flex: 1;
    min-width: 180px;
    font-size: 0.82rem !important;
    padding: 0.3rem 0.6rem !important;
}

.shot-report-action-btns {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.shot-report-award-btn {
    background: rgba(250,204,21,0.12) !important;
    color: #eab308 !important;
    border-color: rgba(250,204,21,0.3) !important;
    font-weight: 700 !important;
}

    .shot-report-award-btn:hover:not(:disabled) {
        background: rgba(250,204,21,0.2) !important;
    }

.shot-report-award-hint {
    font-size: 0.75rem;
    color: var(--adm-text-muted);
    font-style: italic;
}
/* ── Close button — replaces the generic .lightbox-close ── */
.vip-close-btn {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    font-family: inherit;
    padding: 0.35rem 0.75rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

    .vip-close-btn:hover {
        background: rgba(0, 0, 0, 0.75);
        border-color: rgba(255, 255, 255, 0.3);
        color: #fff;
    }

.vip-close-x {
    font-size: 1rem;
    line-height: 1;
}

/* Confirming state — expands to show warning */
.vip-close-btn-confirming {
    background: rgba(239, 68, 68, 0.2) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
    color: #fca5a5 !important;
    padding: 0.4rem 1rem;
}

.vip-close-warning {
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.85;
}

.vip-close-confirm {
    font-size: 0.82rem;
    font-weight: 700;
    color: #f87171;
    border-left: 1px solid rgba(239, 68, 68, 0.4);
    padding-left: 0.5rem;
    margin-left: 0.1rem;
}

/* ── Backdrop confirmation bar — slides up from the bottom ── */
.vip-backdrop-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.85rem 1.5rem;
    background: rgba(15, 15, 25, 0.95);
    border-top: 1px solid rgba(239, 68, 68, 0.3);
    backdrop-filter: blur(8px);
    animation: hint-slide-up 0.2s ease;
    flex-wrap: wrap;
}

@keyframes hint-slide-up {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.vip-backdrop-hint > span {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.7);
}

.vip-backdrop-dismiss {
    padding: 0.4rem 1rem;
    border-radius: 6px;
    border: 1px solid rgba(239, 68, 68, 0.4);
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

    .vip-backdrop-dismiss:hover {
        background: rgba(239, 68, 68, 0.28);
    }

.vip-backdrop-cancel {
    padding: 0.4rem 1rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

    .vip-backdrop-cancel:hover {
        background: rgba(255, 255, 255, 0.14);
    }


/* ============================================================
   SHOT REPORTS ADMIN — improved read-only card layout
   Add to admin.css, replacing any previous .shot-report-* rules
   ============================================================ */

.shot-report-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* ── Card shell ── */
.shot-report-card {
    background: var(--adm-surface);
    border: 1px solid var(--adm-border);
    border-radius: var(--adm-radius);
    padding: 1rem 1.125rem;
    transition: border-color 0.15s;
}

/* Left accent stripe by status */
.shot-report-open {
    border-left: 3px solid #3b82f6;
}

.shot-status-card-reviewed {
    border-left: 3px solid rgba(107,114,128,0.5);
    opacity: 0.9;
}

.shot-status-card-awarded {
    border-left: 3px solid #eab308;
}

.shot-status-card-dismissed {
    border-left: 3px solid rgba(107,114,128,0.3);
    opacity: 0.75;
}

/* ── Header row ── */
.shot-report-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.shot-report-video-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
}

    .shot-report-video-link:hover .shot-report-timestamp {
        color: var(--adm-cyan);
        text-decoration: underline;
    }

.shot-report-thumb {
    width: 72px;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-radius: 5px;
    border: 1px solid var(--adm-border);
    flex-shrink: 0;
}

.shot-report-ts-stack {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.shot-report-timestamp {
    font-family: "SF Mono", "Cascadia Code", monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--adm-text);
}

.shot-report-video-id {
    font-size: 0.68rem;
    color: var(--adm-text-dim);
    font-family: "SF Mono", "Cascadia Code", monospace;
    letter-spacing: 0.02em;
}

.shot-report-reporter-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.shot-report-reporter-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--adm-text);
}

.shot-report-date {
    font-size: 0.74rem;
    color: var(--adm-text-muted);
}

/* ── Status pill ── */
.shot-report-status-badge {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.shot-status-open {
    background: rgba(59,130,246,0.12);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,0.25);
}

.shot-status-reviewed {
    background: rgba(107,114,128,0.1);
    color: #9ca3af;
    border: 1px solid rgba(107,114,128,0.2);
}

.shot-status-awarded {
    background: rgba(250,204,21,0.12);
    color: #eab308;
    border: 1px solid rgba(250,204,21,0.25);
}

.shot-status-dismissed {
    background: rgba(107,114,128,0.08);
    color: #6b7280;
    border: 1px solid rgba(107,114,128,0.15);
}

/* ── Note block — main content ── */
.shot-report-note-block {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.625rem;
}

.shot-report-note-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--adm-text-dim);
}

.shot-report-note {
    font-size: 0.92rem;
    color: var(--adm-text);
    line-height: 1.6;
    margin: 0;
}

/* ── Metadata row: player + badge ── */
.shot-report-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-bottom: 0.625rem;
    padding: 0.6rem 0.75rem;
    background: var(--adm-surface-2);
    border-radius: 7px;
}

.shot-report-meta-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shot-report-meta-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--adm-text-dim);
}

.shot-report-meta-value {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--adm-text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.shot-report-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.shot-report-badge-rarity {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 7px;
    border-radius: 10px;
}

.shot-rarity-legendary {
    background: rgba(245,158,11,0.15);
    color: #f59e0b;
}

.shot-rarity-rare {
    background: rgba(59,130,246,0.15);
    color: #3b82f6;
}

.shot-rarity-uncommon {
    background: rgba(34,197,94,0.12);
    color: #22c55e;
}

.shot-rarity-hidden {
    background: rgba(107,114,128,0.15);
    color: #9ca3af;
}

.shot-rarity-common {
    background: rgba(156,163,175,0.12);
    color: #9ca3af;
}

/* ── Resolution block (reviewed/awarded/dismissed) ── */
.shot-report-resolution {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--adm-surface-2);
    border-radius: 7px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.shot-report-resolution-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--adm-text-muted);
    white-space: nowrap;
}

.shot-report-resolution-note {
    font-size: 0.82rem;
    color: var(--adm-text-muted);
    font-style: italic;
    flex: 1;
}

/* ── Action area (Open only) ── */
.shot-report-action-area {
    border-top: 1px solid var(--adm-border);
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.shot-report-action-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.shot-report-action-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--adm-text-dim);
    white-space: nowrap;
    padding-top: 0.42rem;
    min-width: 72px;
}

.shot-report-badge-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1;
    flex-wrap: wrap;
}

.shot-report-badge-select {
    flex: 1;
    min-width: 200px;
    font-size: 0.82rem !important;
}

.shot-report-badge-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--adm-text);
    white-space: nowrap;
}

.shot-report-badge-xp {
    font-size: 0.7rem;
    font-weight: 700;
    color: #22c55e;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: 10px;
    padding: 1px 7px;
}

.shot-report-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    flex-wrap: wrap;
}

.shot-report-note-input {
    flex: 1;
    min-width: 180px;
    font-size: 0.82rem !important;
    padding: 0.3rem 0.6rem !important;
}

.shot-report-action-btns {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    align-items: center;
}

.shot-report-award-btn {
    background: rgba(250,204,21,0.12) !important;
    color: #eab308 !important;
    border-color: rgba(250,204,21,0.3) !important;
    font-weight: 700 !important;
}

    .shot-report-award-btn:hover:not(:disabled) {
        background: rgba(250,204,21,0.2) !important;
    }

.shot-report-award-hint {
    font-size: 0.73rem;
    color: var(--adm-text-muted);
    font-style: italic;
}

/* Status pill */
.shot-status-underreview {
    background: rgba(59, 130, 246, 0.12);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

/* Card left accent stripe */
.shot-status-card-underreview {
    border-left: 3px solid #3b82f6;
}

/* Legacy "reviewed" maps to same visual as under review */
.shot-status-card-reviewed {
    border-left: 3px solid #3b82f6;
    opacity: 0.9;
}

/* Under Review mod note block (tinted blue, not grey like resolution) */
.shot-report-underreview-note {
    background: rgba(59, 130, 246, 0.06) !important;
    border: 1px solid rgba(59, 130, 246, 0.15) !important;
}

/* Under Review action button */
.shot-report-under-review-btn {
    background: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
    font-weight: 600 !important;
}

    .shot-report-under-review-btn:hover {
        background: rgba(59, 130, 246, 0.18) !important;
    }

/* ============================================================
   Compete Page — full replacement for the tournament-cards section
   Replace the existing .tournament-card* rules in site.css
   ============================================================ */

/* ── Tab bar ── */
.compete-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 1.75rem;
}

.compete-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 1.4rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

    .compete-tab:hover {
        color: var(--color-text);
    }

.compete-tab-active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.compete-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: rgba(0, 0, 0, 0.07);
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
}

.compete-tab-active .compete-tab-count {
    background: var(--color-primary);
    color: #fff;
}

/* ── Empty state ── */
.compete-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

.compete-empty-icon {
    display: block;
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

/* ══════════════════════════════════════
   Tournament cards — full width rows
   ══════════════════════════════════════ */

.tournament-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tournament-card {
    display: flex;
    align-items: stretch;
    background: var(--color-surface, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--color-text);
    transition: box-shadow 0.15s, transform 0.15s;
}

    .tournament-card:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transform: translateY(-1px);
    }

/* ── Thumbnail variant (image present) ── */
.tournament-card-thumb {
    position: relative;
    width: 189px;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--color-primary, #7A1530);
}

    .tournament-card-thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.3s ease;
    }

.tournament-card:hover .tournament-card-thumb img {
    transform: scale(1.05);
}

/* Date badge overlaid on thumb */
.tournament-card-thumb-date {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.35rem 0.5rem;
}

/* ── Date badge variant (no image) ── */
.tournament-card-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    flex-shrink: 0;
    background: var(--color-primary, #7A1530);
    padding: 0.75rem 0.5rem;
}

.tournament-card-month {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1;
}

.tournament-card-day {
    font-size: 1.65rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
}

/* ── Card body ── */
.tournament-card-body {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

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

.tournament-card-meta {
    flex: 1;
    min-width: 0;
}

.tournament-card-name {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tournament-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.5rem;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    align-items: center;
}

.tournament-card-dot {
    opacity: 0.35;
}

.tournament-card-status {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.65rem;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tournament-status-open {
    background: rgba(34, 197, 94, 0.12);
    color: #16a34a;
}

.tournament-status-closed {
    background: rgba(234, 179, 8, 0.12);
    color: #a16207;
}

.tournament-status-inprogress {
    background: rgba(0, 174, 239, 0.12);
    color: #0369a1;
}

.tournament-status-draft {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-muted);
}

.tournament-card-desc {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tournament-card-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.tournament-card-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.05);
    color: var(--color-text-muted);
}

.tournament-card-pill-open {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

@media (max-width: 600px) {
    .compete-tab {
        padding: 0.55rem 1rem;
        font-size: 0.88rem;
    }

    .tournament-card-thumb {
        width: 80px;
    }

    .tournament-card-date {
        min-width: 56px;
    }

    .tournament-card-day {
        font-size: 1.35rem;
    }

    .tournament-card-name {
        font-size: 0.95rem;
        white-space: normal;
    }

    .tournament-card-status {
        display: none; /* shown in footer pills on mobile */
    }
}

.tournament-detail-image {
    margin-bottom: 1.75rem;
    border-radius: 12px;
    overflow: hidden;
    max-height: 360px;
    background: rgba(0, 0, 0, 0.04);
}

    .tournament-detail-image img {
        width: 100%;
        height: 100%;
        max-height: 360px;
        object-fit: cover;
        display: block;
    }

@media (max-width: 600px) {
    .tournament-detail-image {
        border-radius: 8px;
        max-height: 220px;
    }

        .tournament-detail-image img {
            max-height: 220px;
        }
}

/* ══════════════════════════════════════════════════════════
   Tournament/League Entry Fee Display
   ══════════════════════════════════════════════════════════ */

.tournament-entry-fee {
    background: var(--color-surface);
    border: 2px solid var(--color-primary);
    border-radius: 8px;
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.fee-label {
    font-weight: 600;
    color: var(--color-text-muted);
}

.fee-amount {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.fee-deadline {
    margin-left: auto;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* ══════════════════════════════════════════════════════════
   Stripe Payment Element Container
   ══════════════════════════════════════════════════════════ */

.stripe-payment-container {
    margin: 1.5rem 0;
}

.stripe-payment-element {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
}

.stripe-pay-btn {
    width: 100%;
    margin-top: 1rem;
    padding: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.stripe-payment-error {
    background: var(--color-danger-bg);
    border: 1px solid var(--color-danger);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    color: var(--color-danger);
}

.stripe-payment-processing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ══════════════════════════════════════════════════════════
   Payment Summary (shown before Stripe element)
   ══════════════════════════════════════════════════════════ */

.payment-summary {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
}

.payment-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    color: var(--color-text);
}

.payment-summary-total {
    border-top: 2px solid var(--color-border);
    margin-top: 0.5rem;
    padding-top: 1rem;
    font-weight: 700;
    font-size: 1.125rem;
}

/* ══════════════════════════════════════════════════════════
   Tournament/League Payment Box
   ══════════════════════════════════════════════════════════ */

.tournament-payment-box {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
}

    .tournament-payment-box h2 {
        margin: 0 0 1rem;
        font-size: 1.5rem;
    }

    .tournament-payment-box p {
        margin: 0 0 1.5rem;
        color: var(--color-text-muted);
    }

/* ══════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
    .tournament-entry-fee {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .fee-deadline {
        margin-left: 0;
    }

    .tournament-payment-box {
        padding: 1.5rem;
    }
}


/* ══════════════════════════════════════
   PAYMENT MODAL
   ══════════════════════════════════════ */
.payment-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 1rem;
    animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.payment-modal-content {
    background: var(--color-surface);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.payment-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .payment-modal-header h2 {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
    }

.payment-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.15s ease;
}

    .payment-modal-close:hover {
        background: var(--color-surface-alt);
        color: var(--color-text);
    }

.payment-modal-body {
    padding: 1.5rem;
}

    .payment-modal-body > p {
        margin-bottom: 1.5rem;
        color: var(--color-text-muted);
    }

.payment-modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Payment summary - keep existing styles */
.payment-summary {
    background: var(--color-surface-alt);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.payment-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.95rem;
}

.payment-summary-total {
    border-top: 1px solid var(--color-border);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    font-weight: 600;
    font-size: 1.1rem;
}

/* ============================================================
   Share Button + Menu
   ============================================================ */

.share-button-wrap {
    position: relative;
    display: inline-block;
}

.share-button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.1s;
}

    .share-button:hover {
        background: var(--color-primary-dark);
        border-color: var(--color-primary-dark);
    }

    .share-button:active {
        transform: translateY(1px);
    }

/* Subtle variant — ghost-outline pill for secondary placement (e.g. the
   PDP title row, where the primary-color filled variant would compete
   with the product H1). Same layout/sizing footprint as .share-button
   but with transparent chrome, muted text, and lighter proportions so
   it reads as a secondary action. The share-button-wrap is shared,
   so the popup menu still positions identically. */
.share-button-subtle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

    .share-button-subtle:hover {
        color: var(--color-text);
        border-color: var(--color-text-muted);
        background: var(--color-surface-alt);
    }

    .share-button-subtle:active {
        transform: translateY(1px);
    }

.share-button-icon {
    font-size: 1rem;
    line-height: 1;
}

/* Click-outside layer. Sits BELOW the menu via z-index so the menu's
   buttons still receive pointer events. */
.share-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: transparent;
}

.share-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 51;
    min-width: 220px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.share-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--color-text);
    text-decoration: none;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.1s;
}

    .share-menu-item:hover {
        background: var(--color-surface-alt);
        color: var(--color-text);
        text-decoration: none;
    }

.share-menu-icon {
    font-size: 1.05rem;
    width: 1.5rem;
    text-align: center;
    line-height: 1;
}

/* Mobile: menu takes the full content width so items are easy to tap. */
@media (max-width: 480px) {
    .share-menu {
        right: auto;
        left: 0;
        width: calc(100vw - 2rem);
        max-width: 320px;
    }
}

/* ============================================================
   Shareable Photo / Video Detail Pages
   /p/{id}, /v/{videoId}
   ============================================================ */

.media-detail-back {
    margin: 1rem 0 1rem;
    font-size: var(--font-size-sm);
}

    .media-detail-back a {
        color: var(--color-text-muted);
        text-decoration: none;
    }

        .media-detail-back a:hover {
            color: var(--color-primary);
        }

.media-detail-not-found {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--color-text-muted);
}

    .media-detail-not-found h1 {
        color: var(--color-heading);
    }

    .media-detail-not-found p {
        max-width: 420px;
        margin: 0 auto 1.5rem;
    }

/* ── Photo ── */
.media-detail-photo {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.media-detail-photo-image {
    width: 100%;
    height: auto;
    max-height: 75vh;
    object-fit: contain;
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.media-detail-photo-meta {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.media-detail-caption {
    font-size: 1.05rem;
    color: var(--color-text);
    margin: 0;
    line-height: 1.5;
}

.media-detail-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.media-detail-date {
    font-weight: 600;
}

.media-detail-dot {
    opacity: 0.4;
}

.media-detail-tagged {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.media-detail-tag {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}

    .media-detail-tag:hover {
        text-decoration: underline;
    }

    .media-detail-tag + .media-detail-tag::before {
        content: ", ";
        margin-right: 0.2rem;
        color: var(--color-text-muted);
        font-weight: normal;
    }

.media-detail-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 0.5rem;
}

/* ── Video (supplements match-detail-video styles) ── */
.media-detail-video-meta {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ── Match detail share button ─ pinned to the bottom of the page ── */
.match-detail-share {
    display: flex;
    justify-content: center;
    margin: 2rem 0 3rem;
}

/* ============================================================
   Nav cart icon — appears in the navbar when Swag Shop is enabled.

   The cart link is rendered TWICE:
     • Inside .navbar-links — visible on desktop alongside the other links
     • Outside .navbar-links (.nav-cart-external) — visible on mobile only,
       sitting between the brand and the hamburger so the cart stays one
       tap away without opening the flyout drawer.
   The 768px breakpoint mirrors nav-menu.js (`min-width: 768px` ⇒ desktop).
   ============================================================ */

/* In-drawer copy — inherits .navbar-links a colors, just tightens padding
   for the icon-only target and enables badge positioning. */
.navbar-links a.nav-cart-link {
    padding: 6px 10px;
    position: relative;
    line-height: 0;
}

/* External (mobile) copy — hidden on desktop. Pushed to the right via
   margin-left: auto so the brand stays left and the cart sits next to the
   hamburger button. */
.nav-cart-external {
    display: none;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-left: auto;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    line-height: 0;
    color: var(--color-navbar-link);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-cart-external:hover,
.nav-cart-external.active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-navbar-link-hover);
    text-decoration: none;
}

.nav-cart-icon {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--color-navbar-link);
    transition: color 0.2s ease;
}

.navbar-links a.nav-cart-link:hover .nav-cart-icon,
.navbar-links a.nav-cart-link.active .nav-cart-icon,
.nav-cart-external:hover .nav-cart-icon,
.nav-cart-external.active .nav-cart-icon {
    color: var(--color-navbar-link-hover);
}

.nav-cart-badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    padding: 0 4px;
    background: var(--color-button-primary-bg);
    color: var(--color-button-primary-text);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: var(--font-weight-bold);
    line-height: 16px;
    text-align: center;
    pointer-events: none;
}

/* Mobile: show the external cart, hide the in-drawer one to avoid duplicates. */
@media (max-width: 767.98px) {
    .nav-cart-external {
        display: inline-flex;
    }

    .navbar-links a.nav-cart-link {
        display: none;
    }
}