/* SportyPants design system — shared across landing/web/admin */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
    color-scheme: light dark;

    /* Brand */
    --brand-50:  #ecfdf5;
    --brand-100: #d1fae5;
    --brand-300: #6ee7b7;
    --brand-400: #34d399;
    --brand-500: #10b981;
    --brand-600: #059669;
    --brand-700: #047857;
    --brand-grad: linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%);

    /* Neutrals — light */
    --bg: #f8fafc;
    --bg-elev: #ffffff;
    --bg-soft: #f1f5f9;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --text: #0f172a;
    --text-muted: #475569;
    --text-soft: #64748b;

    /* Status */
    --danger: #dc2626;
    --danger-bg: #fef2f2;
    --warn: #d97706;
    --success: #16a34a;
    --info: #0284c7;

    /* Pick state — deliberately neutral, so a made pick reads as
       "selected" rather than as a second brand accent. */
    --pick-tint: rgba(15, 23, 42, 0.07);
    --pick-edge: rgba(15, 23, 42, 0.20);
    --pick-solid: #334155;
    --pick-solid-fg: #f8fafc;

    /* Misc */
    --radius-sm: 0.4rem;
    --radius: 0.75rem;
    --radius-lg: 1rem;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);
    --container: 64rem;
    --container-wide: 76rem;
    --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #060b14;
        --bg-elev: #0f172a;
        --bg-soft: #111c2f;
        --border: #1e293b;
        --border-strong: #334155;
        --text: #f1f5f9;
        --text-muted: #cbd5e1;
        --text-soft: #94a3b8;
        --danger-bg: #2a1010;
        --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);
        --pick-tint: rgba(226, 232, 240, 0.10);
        --pick-edge: rgba(226, 232, 240, 0.26);
        --pick-solid: #64748b;
        --pick-solid-fg: #f8fafc;
    }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    background-image:
        radial-gradient(1200px 600px at 90% -10%, rgba(16, 185, 129, 0.10), transparent 60%),
        radial-gradient(800px 500px at -10% 20%, rgba(6, 182, 212, 0.08), transparent 60%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }
code, pre, kbd { font-family: var(--font-mono); font-size: 0.85em; }
code { background: var(--bg-soft); padding: 0.1rem 0.35rem; border-radius: 0.3rem; border: 1px solid var(--border); }
pre {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    overflow: auto;
    box-shadow: var(--shadow-sm);
}

/* Typography */
h1, h2, h3, h4 { margin: 0 0 0.5rem; line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; }
h1 { font-size: clamp(1.75rem, 2.4vw, 2.5rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 0.75rem; }
small, .text-sm { font-size: 0.85rem; }
.muted { color: var(--text-muted); }
.soft { color: var(--text-soft); font-size: 0.9rem; }
.eyebrow {
    display: inline-block;
    color: var(--brand-600);
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
@media (prefers-color-scheme: dark) {
    .eyebrow { color: var(--brand-300); }
}

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
    a { color: var(--brand-300); }
}

/* Layout */
.container, .container-wide { width: 100%; margin: 0 auto; padding: 0 1.25rem; }
.container { max-width: var(--container); }
.container-wide { max-width: var(--container-wide); }
.stack > * + * { margin-top: 1rem; }
.stack-tight > * + * { margin-top: 0.5rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.row.between { justify-content: space-between; }
.grid { display: grid; gap: 1rem; }
.grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }

/* Top nav */
.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    background: color-mix(in oklab, var(--bg) 80%, transparent);
    border-bottom: 1px solid var(--border);
}
.site-header .inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    gap: 1rem;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 800;
    color: var(--text);
    font-size: 1.05rem;
    letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--brand-grad);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.35);
    display: inline-grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 14px;
}
.brand .pill { margin-left: 0.25rem; }
.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav a, .nav button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.7rem;
    border-radius: 0.55rem;
    color: var(--text-muted);
    font-weight: 500;
    background: transparent;
    border: 0;
    cursor: pointer;
    font: inherit;
}
.nav a:hover, .nav button:hover { background: var(--bg-soft); color: var(--text); text-decoration: none; }
.nav .who {
    color: var(--text-soft);
    font-size: 0.85rem;
    padding: 0 0.5rem;
    border-left: 1px solid var(--border);
    margin-left: 0.25rem;
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav .nav-signout { display: inline-flex; border-left: 1px solid var(--border); margin-left: 0.25rem; padding-left: 0.25rem; }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    border: 1px solid var(--border);
    border-radius: 0.55rem;
    background: var(--bg-elev);
    color: var(--text);
    cursor: pointer;
    flex-shrink: 0;
}
.nav-toggle:hover { background: var(--bg-soft); border-color: var(--border-strong); }
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 160ms ease, opacity 160ms ease;
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }
.site-header.is-nav-open .nav-toggle-bars { background: transparent; }
.site-header.is-nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.site-header.is-nav-open .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
    .site-header .inner {
        flex-wrap: wrap;
        height: auto;
        min-height: 56px;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .nav-toggle { display: inline-flex; }
    .nav {
        display: none;
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
        margin-top: 0.35rem;
    }
    .site-header.is-nav-open .nav { display: flex; }
    .nav a, .nav button, .nav .btn {
        width: 100%;
        justify-content: flex-start;
        padding: 0.7rem 0.85rem;
    }
    .nav .who {
        border-left: 0;
        margin-left: 0;
        max-width: none;
        padding: 0.55rem 0.85rem;
        white-space: normal;
    }
    .nav .nav-signout {
        display: block;
        border-left: 0;
        margin-left: 0;
        padding-left: 0;
        margin-top: 0.25rem;
        padding-top: 0.35rem;
        border-top: 1px solid var(--border);
    }
    .nav .nav-signout .btn { width: 100%; justify-content: flex-start; }
}

/* Footer */
.site-footer {
    margin-top: 4rem;
    border-top: 1px solid var(--border);
    color: var(--text-soft);
    font-size: 0.85rem;
    padding: 1.25rem 0 2rem;
}

/* Cards */
.card {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}
.card.hover { transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease; }
.card.hover:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; }
.card-head h2, .card-head h3 { margin: 0; }

/* Collapsible card — a <details> that keeps the card look but folds its body away. */
details.card-collapse { padding: 0; }
details.card-collapse > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius);
    transition: background 120ms ease;
}
details.card-collapse > summary::-webkit-details-marker { display: none; }
details.card-collapse > summary:hover { background: var(--bg-soft); }
details.card-collapse > summary:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
details.card-collapse[open] > summary {
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: 1px solid var(--border);
}
.collapse-title { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.collapse-title h2, .collapse-title h3 { margin: 0; }
.collapse-meta { display: flex; align-items: center; gap: 0.75rem; flex: none; }
.collapse-chevron {
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1;
    transition: transform 150ms ease;
}
details.card-collapse[open] .collapse-chevron { transform: rotate(180deg); }
.collapse-body { padding: 1.25rem; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.95rem;
    border-radius: 0.55rem;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border-strong);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
    text-decoration: none;
}
.btn:hover { background: var(--bg-soft); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.btn-primary {
    background: var(--brand-grad);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.25);
}
.btn-primary:hover { filter: brightness(1.05); background: var(--brand-grad); color: #fff; }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { color: var(--text); background: var(--bg-soft); }
.btn-danger { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.btn-sm { padding: 0.35rem 0.6rem; font-size: 0.8rem; }
.btn-lg { padding: 0.75rem 1.25rem; font-size: 1rem; }
.btn-block { width: 100%; }

/* Forms */
.field { display: block; margin-bottom: 0.75rem; }
.field > label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.35rem; }
.input, .select, .textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 0.55rem;
    font-size: 0.95rem;
    font: inherit;
    line-height: 1.4;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.select { appearance: none; padding-right: 2.5rem; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>"); background-repeat: no-repeat; background-position: right 0.75rem center; }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.20); }
.input[readonly], .select[readonly] { background: var(--bg-soft); color: var(--text-muted); }
.help { color: var(--text-soft); font-size: 0.8rem; margin-top: 0.3rem; }
/* Input paired with a trailing action button (e.g. "Surprise me" next to a name). */
.input-with-action { display: flex; gap: 0.5rem; align-items: center; }
.input-with-action > .input { flex: 1 1 auto; min-width: 0; }
.input-with-action > .btn { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 520px) {
    .input-with-action { flex-wrap: wrap; }
    .input-with-action > .btn { width: 100%; }
}

/* Stat tiles — a row of headline counts, not a chart. The lead tile carries the
   number the page is about; the others are context at a smaller size. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem;
}
.stat {
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.stat-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
}
/* Proportional figures on purpose: tabular-nums makes a large value look loose. */
.stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--text);
}
.stat-note { font-size: 0.75rem; color: var(--text-soft); }
.stat-lead { border-color: var(--brand-100); box-shadow: var(--shadow-sm); }
.stat-lead .stat-value { font-size: 2.75rem; color: var(--brand-700); }

/* Filter chips — one left-aligned row directly above the rows they scope. */
.filter-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    background: var(--bg-elev);
    color: var(--text-muted);
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.chip:hover:not(:disabled) { background: var(--bg-soft); color: var(--text); }
.chip:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.20); }
.chip.is-active { background: var(--brand-600); color: #fff; border-color: var(--brand-600); }
.chip:disabled { opacity: 0.45; cursor: default; }
.chip-count {
    font-variant-numeric: tabular-nums;
    font-size: 0.72rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: var(--bg-soft);
    color: var(--text-soft);
}
.chip.is-active .chip-count { background: rgba(255, 255, 255, 0.22); color: #fff; }
@media (prefers-color-scheme: dark) {
    .stat-lead { border-color: rgba(16, 185, 129, 0.30); }
    .stat-lead .stat-value { color: var(--brand-300); }
    .chip.is-active { background: var(--brand-500); border-color: var(--brand-500); color: #04231a; }
    .chip.is-active .chip-count { background: rgba(4, 35, 26, 0.22); color: #04231a; }
}

/* Pills / badges */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    background: var(--bg-soft);
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pill-brand { background: var(--brand-50); color: var(--brand-700); border-color: var(--brand-100); }
.pill-success { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.pill-info { background: #e0f2fe; color: #075985; border-color: #bae6fd; }
.pill-warn { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.pill-danger { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
@media (prefers-color-scheme: dark) {
    .pill-brand { background: rgba(16, 185, 129, 0.12); color: var(--brand-300); border-color: rgba(16, 185, 129, 0.30); }
    .pill-success { background: rgba(34, 197, 94, 0.12); color: #86efac; border-color: rgba(34, 197, 94, 0.3); }
    .pill-info { background: rgba(2, 132, 199, 0.15); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.3); }
    .pill-warn { background: rgba(245, 158, 11, 0.15); color: #fcd34d; border-color: rgba(245, 158, 11, 0.3); }
    .pill-danger { background: rgba(220, 38, 38, 0.15); color: #fca5a5; border-color: rgba(220, 38, 38, 0.3); }
}

/* Alerts */
.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg-soft);
    color: var(--text);
    font-size: 0.9rem;
}
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: rgba(220,38,38,0.25); }
.alert-info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.alert-warn { background: #fffbeb; color: #92400e; border-color: #fde68a; }
@media (prefers-color-scheme: dark) {
    .alert-error { color: #fca5a5; }
    .alert-info  { background: rgba(59,130,246,0.10); color: #93c5fd; border-color: rgba(59,130,246,0.25); }
    .alert-warn  { background: rgba(245,158,11,0.10); color: #fcd34d; border-color: rgba(245,158,11,0.25); }
}

/* Tables */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.table th, .table td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--border); }
.table th { color: var(--text-soft); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--bg-soft); }

/* Stepper */
.stepper { display: flex; gap: 0.5rem; align-items: center; margin: 0 0 1.25rem; flex-wrap: wrap; }
.step { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; border-radius: 999px; background: var(--bg-soft); color: var(--text-muted); font-size: 0.8rem; font-weight: 600; border: 1px solid var(--border); }
.step .num { width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--bg-elev); color: var(--text-soft); font-size: 0.75rem; display: inline-grid; place-items: center; border: 1px solid var(--border-strong); }
.step.is-current { color: var(--brand-700); background: var(--brand-50); border-color: var(--brand-100); }
.step.is-current .num { background: var(--brand-grad); color: #fff; border-color: transparent; }
.step.is-done { color: var(--text); }
.step.is-done .num { background: var(--brand-500); color: #fff; border-color: transparent; }
@media (prefers-color-scheme: dark) {
    .step.is-current { color: var(--brand-300); background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); }
}
.step-sep { color: var(--text-soft); }

/* Hero (landing) */
.hero { padding: 4rem 0 3rem; text-align: center; }
.hero h1 { font-size: clamp(2.25rem, 4vw, 3.6rem); margin-bottom: 1rem; }
.hero .lede { color: var(--text-muted); font-size: 1.15rem; max-width: 38rem; margin: 0 auto 1.5rem; }
.hero .gradient-text {
    background: var(--brand-grad);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-cta { display: inline-flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }

/* Selectable list (create wizard) */
.choice-list { display: grid; gap: 0.5rem; grid-template-columns: 1fr; }
.choice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    text-decoration: none;
    transition: border-color 120ms ease, transform 120ms ease, background 120ms ease;
}
.choice:hover { border-color: var(--brand-500); background: var(--bg-soft); text-decoration: none; transform: translateY(-1px); }
.choice .arrow { color: var(--text-soft); transition: transform 120ms ease, color 120ms ease; }
.choice:hover .arrow { color: var(--brand-600); transform: translateX(2px); }
.choice .meta { color: var(--text-soft); font-size: 0.85rem; }
/* A choice that exists but can't be taken -- a league with no season open to new pools, or a
   season that has started or finished. Shown rather than hidden so the reason can be read. */
.choice.is-disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
}
.choice.is-disabled:hover { border-color: var(--border); background: transparent; transform: none; }
@media (prefers-color-scheme: dark) {
    .choice:hover .arrow { color: var(--brand-300); }
}

/* Match card (game dashboard) */
.match {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem 1.2rem 1.2rem;
    background: var(--bg-elev);
    display: grid;
    gap: 0.9rem;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}
.match-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; color: var(--text-soft); font-size: 0.8rem; }
.match-section { margin-top: 1.25rem; }
.match-section:first-of-type { margin-top: 0; }
.match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
    gap: 0.85rem;
}
.match-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.match-section-title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text);
}
.match-teams {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.match-teams--stack {
    grid-template-columns: 1fr;
    gap: 0.45rem;
    justify-items: stretch;
}
.match-team {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.match-team.away { justify-content: flex-end; }
.match-teams--stack .match-team.away { justify-content: flex-start; }
.match-team .team-name {
    min-width: 0;
    flex: 1;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-teams--stack .match-team .team-name {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.match-vs {
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-align: center;
    padding: 0.1rem 0;
}
.match-teams--stack .match-vs {
    justify-self: start;
    padding-left: 2.3rem;
    font-size: 0.68rem;
}

/* Monogram (matches admin: primary fill, secondary text) */
.team-badge {
    --team-bg: var(--bg-soft);
    --team-fg: var(--text-muted);
    --team-size: 2.25rem;
    display: inline-grid;
    place-items: center;
    width: var(--team-size);
    height: var(--team-size);
    border-radius: 999px;
    background: var(--team-bg);
    color: var(--team-fg);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: calc(var(--team-size) * 0.36);
    letter-spacing: 0.02em;
    line-height: 1;
    text-transform: uppercase;
    border: 1px solid color-mix(in oklab, var(--team-bg) 70%, #000 30%);
    box-shadow:
        inset 0 0 0 2px color-mix(in oklab, var(--team-fg) 30%, transparent),
        0 1px 2px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
    user-select: none;
}
.team-badge.sm { --team-size: 1.75rem; }
.team-badge.lg { --team-size: 3rem; }
/* Where the fixture is played: name links out to Google Maps, city sits underneath. */
.match-venue {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
    font-size: 0.8rem;
    color: var(--text-soft);
    line-height: 1.3;
}
.match-venue-pin { flex-shrink: 0; font-size: 0.75rem; }
.match-venue-name { color: var(--text); font-weight: 600; text-decoration: none; }
a.match-venue-name:hover { text-decoration: underline; }
.match-venue-ext { margin-left: 0.15rem; font-size: 0.7rem; opacity: 0.7; }
.match-venue-city { flex-basis: 100%; padding-left: 1.15rem; }

.match-actions { display: flex; gap: 0.5rem; min-width: 0; }
.match-actions form { flex: 1; min-width: 0; }
.match-actions .btn { width: 100%; }

.match-actions--three {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.45rem;
    align-items: stretch;
    min-width: 0;
    width: 100%;
}
.match-actions--two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
    align-items: stretch;
    min-width: 0;
    width: 100%;
}
.match-actions--two .pick-choice,
.match-actions--three .pick-choice { min-width: 0; }
.match-actions--two .btn-pick,
.match-actions--three .btn-pick {
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}
.match-actions--three .btn-pick-tie {
    white-space: nowrap;
    line-height: 1.2;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
    min-width: 3.25rem;
}
/* ------------------------------------------------------------------
   Your pick, made obvious
   ------------------------------------------------------------------
   A tick beside a team name is easy to miss when a week is sixteen
   cards long. The state is carried at three levels instead:
     · the card       — brand edge stripe + wash, so a scan of the
                        week shows which fixtures are done
     · the team row   — selected chip with a ring and a "Your pick" flag
     · the button     — solid brand fill, not a faint tint
   ------------------------------------------------------------------ */
.match--has-pick {
    border-color: var(--pick-edge);
    /* Half-strength wash: the card should read as marked, not dimmed —
       the oval and the stripe carry the weight. */
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--pick-tint) 45%, transparent), transparent 55%),
        var(--bg-elev);
    position: relative;
}
.match--has-pick::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--pick-solid);
}
/* A locked fixture stays muted; the stripe still says "you picked this". */
.match--locked.match--has-pick,
.match--upcoming.match--has-pick {
    background: var(--bg-soft);
    border-style: dashed;
    border-color: var(--pick-edge);
}
.match--locked.match--has-pick::before { opacity: 0.55; }

/* Both rows carry the padding so the picked one does not shift the layout. */
.match-teams--stack .match-team {
    padding: 0.32rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    transition: background 140ms ease, border-color 140ms ease;
}
.match-teams--stack .match-vs { padding-left: 2.8rem; }

/* The pick sits inside a shaded oval. */
.match-team--picked {
    background: var(--pick-tint);
    border-color: var(--pick-edge);
}
.match-team--picked .team-name { color: var(--text); font-weight: 700; }
.match-team--picked .team-badge {
    outline: 2px solid var(--pick-edge);
    outline-offset: 2px;
}

/* "Your pick" flag on the chosen team row: a raised neutral chip whose
   tick gets its own shaded circle, set apart from the label. */
.pick-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.16rem 0.6rem 0.16rem 0.22rem;
    border-radius: 999px;
    background: var(--bg-elev);
    border: 1px solid var(--pick-edge);
    color: var(--text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.45;
    white-space: nowrap;
    box-shadow: var(--shadow-sm);
}
.pick-flag__mark {
    display: inline-grid;
    place-items: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 999px;
    background: var(--pick-solid);
    color: var(--pick-solid-fg);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
}

/* The chosen button reads as filled-in, not merely tinted. */
.pick-choice--active .btn-pick {
    background: var(--pick-solid);
    border-color: transparent;
    color: var(--pick-solid-fg);
    font-weight: 800;
    box-shadow: var(--shadow-sm);
}
.pick-choice--active .btn-pick:hover {
    background: var(--pick-solid);
    color: var(--pick-solid-fg);
    filter: brightness(1.12);
}
.pick-inline { font-weight: 900; margin-right: 0.35rem; }

/* Locked week: the note becomes the highlight instead of grey small print. */
.match-note--picked {
    color: var(--text);
    background: var(--pick-tint);
    border: 1px solid var(--pick-edge);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    font-weight: 600;
}
.match-note--picked strong { color: inherit; }

/* Brief flourish when a pick lands, so the eye follows the change.
   play.js adds .is-just-picked and drops it once the animation ends. */
.match.is-just-picked .pick-flag { animation: pick-pop 260ms ease-out; }
.match.is-just-picked .pick-choice--active .btn-pick { animation: pick-pop 260ms ease-out; }
@keyframes pick-pop {
    0%   { transform: scale(0.82); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .match.is-just-picked .pick-flag,
    .match.is-just-picked .pick-choice--active .btn-pick { animation: none; }
    .match-teams--stack .match-team { transition: none; }
}

.match.is-busy { opacity: 0.72; pointer-events: none; }
.match.is-busy .btn-pick { cursor: wait; }

.play-toast-host {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 80;
    display: grid;
    gap: 0.5rem;
    max-width: min(22rem, calc(100vw - 2rem));
}
.play-toast {
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    font-size: 0.9rem;
    color: var(--text);
    animation: play-toast-in 0.18s ease-out;
}
.play-toast--success { border-color: color-mix(in srgb, var(--brand-500) 45%, var(--border)); }
.play-toast--error { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); color: var(--danger); }
.play-toast.is-out { opacity: 0; transform: translateY(6px); transition: 0.25s ease; }
@keyframes play-toast-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Rank cells */
.rank { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--bg-soft); color: var(--text-muted); font-size: 0.75rem; font-weight: 700; border: 1px solid var(--border); }
.rank.gold   { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.rank.silver { background: #e2e8f0; color: #334155; border-color: #cbd5e1; }
.rank.bronze { background: #fed7aa; color: #9a3412; border-color: #fdba74; }

/* Empty state */
.empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-soft);
}
.empty .ico {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--bg-soft); border: 1px solid var(--border);
    display: inline-grid; place-items: center; margin-bottom: 0.5rem;
}

/* Utilities */
.flex { display: flex; gap: 0.5rem; align-items: center; }
.flex.col { flex-direction: column; align-items: stretch; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.no-underline { text-decoration: none; }

/* Focus */
:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.40); border-radius: 0.4rem; }

/* ============================================================
   Brand & sport / league / mode iconography
   ============================================================
   Replaces the gradient SP square with the Sporty Pants splash.
   .brand-mark.image keeps the same footprint but renders the PNG.
   .sport-icon / .league-icon / .mode-icon are reusable rounded
   square thumbnails sized for inline lists, choice rows, and
   marketing hero callouts.
*/
.brand-logo {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 9px;
    object-fit: contain;
    background: transparent;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.18);
}
.brand-logo.sm { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 3px 10px rgba(15, 23, 42, 0.16); }
.brand-logo.lg { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 8px 22px rgba(15, 23, 42, 0.20); }
@media (prefers-color-scheme: dark) {
    .brand-logo { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55); }
}

.sport-icon, .league-icon, .mode-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 7px;
    object-fit: contain;
    flex-shrink: 0;
    background: transparent;
}
.sport-icon.sm, .league-icon.sm, .mode-icon.sm { width: 22px; height: 22px; border-radius: 6px; }
.sport-icon.md, .league-icon.md, .mode-icon.md { width: 40px; height: 40px; border-radius: 9px; }
.sport-icon.lg, .league-icon.lg, .mode-icon.lg { width: 64px; height: 64px; border-radius: 12px; }
.sport-icon.xl, .league-icon.xl, .mode-icon.xl { width: 96px; height: 96px; border-radius: 18px; box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18); }

/* Round-card wrappers when you want a soft tinted background behind
   an icon (looks great in choice lists / mode pickers). */
.icon-tile {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}
.icon-tile img { width: 44px; height: 44px; object-fit: contain; }
.icon-tile.lg { width: 84px; height: 84px; border-radius: 18px; }
.icon-tile.lg img { width: 68px; height: 68px; }

/* Choice-row variant for the create-pool wizard sport / mode lists. */
.choice .choice-icon {
    margin-right: 0.65rem;
}

/* Hero illustration (landing page). The splash already has its own
   shadow baked into the artwork, so we don't add another one. */
.hero-illustration {
    width: clamp(180px, 22vw, 280px);
    height: auto;
    display: block;
    margin: 0 auto 1rem;
    filter: drop-shadow(0 18px 40px rgba(15, 23, 42, 0.25));
}
@media (prefers-color-scheme: dark) {
    .hero-illustration { filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.6)); }
}

/* Subtle hover on icon list rows (catalog, teams page header). */
.with-icon { display: inline-flex; align-items: center; gap: 0.55rem; }
.with-icon img { vertical-align: middle; }
/* Mode tile (create-pool wizard step 4 — radio group styled as cards) */
.mode-grid { gap: 0.7rem; }
.mode-tile {
    cursor: pointer;
    align-items: center;
    gap: 1rem;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.mode-tile input[type=radio] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}
.mode-tile .mode-tile-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}
.mode-tile .mode-tile-body strong { font-size: 1.05rem; line-height: 1.25; }
.mode-tile .mode-tile-body .meta { color: var(--text-soft); font-size: 0.88rem; margin-top: 0.15rem; }
.mode-tile:hover { border-color: var(--brand-500); background: var(--bg-soft); }
.mode-tile:has(input[type=radio]:checked) {
    border-color: var(--brand-500);
    background: var(--brand-50);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
@media (prefers-color-scheme: dark) {
    .mode-tile:has(input[type=radio]:checked) {
        background: rgba(16, 185, 129, 0.10);
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.28);
    }
}

/* Notifications */
.nav-alerts { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
.nav-alerts .pill { padding: 0 0.45rem; min-width: 1.1rem; text-align: center; }
.notif { cursor: pointer; }
.notif:hover { border-color: var(--brand-500); }
.notif-unread { border-left: 3px solid var(--brand-500); background: var(--brand-50); }
@media (prefers-color-scheme: dark) {
    .notif-unread { background: rgba(16, 185, 129, 0.08); }
}

/* Auth — Firebase federated */
.hidden { display: none !important; }
.auth-firebase { display: block; }
.btn-google {
    background: #fff;
    color: #1f2937;
    border: 1px solid var(--border, #e2e8f0);
    font-weight: 600;
}
.btn-google:hover { background: var(--bg-soft, #f8fafc); filter: none; }
.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border, #e2e8f0);
}
.auth-divider span { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ---------------------------------------------------------------------------
   Game weeks — deadlines, lock state, and the dashboard to-do list
   --------------------------------------------------------------------------- */

.pill-muted { background: var(--bg-soft); color: var(--text-soft); border-color: var(--border); }

.round-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.deadline { font-variant-numeric: tabular-nums; }
.deadline-countdown { opacity: 0.75; }
.deadline-countdown:not(:empty)::before { content: " · "; }
.deadline.is-urgent { background: var(--danger-bg); color: var(--danger); border-color: rgba(220, 38, 38, 0.3); }
.deadline.is-past { opacity: 0.6; }
@media (prefers-color-scheme: dark) {
    .deadline.is-urgent { background: rgba(220, 38, 38, 0.15); color: #fca5a5; border-color: rgba(220, 38, 38, 0.3); }
}

.progress {
    height: 0.4rem;
    border-radius: 999px;
    background: var(--bg-soft);
    overflow: hidden;
}
.progress-bar {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-grad);
    transition: width 240ms ease;
}

/* ---------------------------------------------------------------------------
   Week bar — the pool's cockpit: which week, how to move between weeks, its
   state, and what you still owe. One card, because the picker used to float
   between two others repeating what the card above it already said.
   --------------------------------------------------------------------------- */
.week-bar {
    position: relative;
    display: grid;
    gap: 0.85rem;
    overflow: hidden;
    border-left: 3px solid var(--week-accent, var(--border-strong));
}
/* A tint of the state colour, strongest at the accented edge. */
.week-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, var(--week-tint, transparent) 0%, transparent 55%);
    pointer-events: none;
}
.week-bar > * { position: relative; }

.week-bar--open     { --week-accent: var(--warn);      --week-tint: rgba(217, 119, 6, 0.07); }
.week-bar--done     { --week-accent: var(--brand-500); --week-tint: rgba(16, 185, 129, 0.08); }
.week-bar--locked   { --week-accent: var(--border-strong); --week-tint: transparent; }
.week-bar--upcoming { --week-accent: var(--info);      --week-tint: rgba(2, 132, 199, 0.06); }

.week-bar-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}
.week-bar-title h2 {
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}
.week-bar-summary p { margin: 0; }
.week-bar-summary .btn { margin-top: 0.6rem; }

/* Week picker. A select rather than a row of chips: 38 EPL matchweeks wrap into a
   wall of links on a phone, while one control stays one control at any length.
   Laid out as a segmented control so the steppers and the select share a baseline
   and never wrap onto a second line. */
.week-nav {
    --week-nav-height: 2.75rem;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.4rem;
    min-width: 0;
}
.week-nav > * {
    height: var(--week-nav-height);
    box-sizing: border-box;
}
.week-select-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
/* Own chevron: the native one is inconsistent across platforms and sits too far in. */
.week-select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0.9rem;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: -0.32rem;
    border-right: 2px solid var(--text-soft);
    border-bottom: 2px solid var(--text-soft);
    transform: rotate(45deg);
    pointer-events: none;
}
.week-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 2.25rem 0 0.9rem;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 0.55rem;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    text-overflow: ellipsis;
    cursor: pointer;
}
.week-select:hover { border-color: var(--brand-500); }
.week-select:focus-visible {
    outline: 0;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.20);
}
.week-nav-step,
.week-nav-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0 0.8rem;
    background: var(--bg-elev);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 0.55rem;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.week-nav-step {
    min-width: var(--week-nav-height);
    font-size: 1.35rem;
    line-height: 1;
    color: var(--text-muted);
}
.week-nav-step:hover,
.week-nav-go:hover {
    border-color: var(--brand-500);
    color: var(--brand-700);
    text-decoration: none;
}
.week-nav-step.is-disabled {
    opacity: 0.28;
    pointer-events: none;
}
@media (prefers-color-scheme: dark) {
    .week-nav-step:hover,
    .week-nav-go:hover { color: var(--brand-300); }
}
/* Visible to screen readers only. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.match-section--current { scroll-margin-top: 5rem; }
.match-section--current > .match-section-head { border-bottom-color: var(--brand-500); }

/* A fixture that cannot take a pick shows its state instead of a control the API
   would refuse. Muted rather than hidden — seeing the schedule ahead is the point. */
.match--locked,
.match--upcoming {
    background: var(--bg-soft);
    border-style: dashed;
}
.match--locked .team-name,
.match--upcoming .team-name { color: var(--text-muted); }
.match--locked .team-badge,
.match--upcoming .team-badge { filter: saturate(0.45); }
.match-note {
    font-size: 0.82rem;
    color: var(--text-soft);
    border-top: 1px dashed var(--border);
    padding-top: 0.6rem;
}
.match-note strong { color: var(--text-muted); }
.match-kickoff {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-muted);
}

/* Pick controls: full-width targets, so a thumb hits them on a phone. */
.match-actions { display: grid; gap: 0.4rem; }
.match-actions--two   { grid-template-columns: 1fr 1fr; }
.match-actions--three { grid-template-columns: 1fr 1fr 1fr; }
.match-actions .pick-choice { display: block; min-width: 0; }
.match-actions .btn-pick { width: 100%; }

/* Fixture name in the "my picks" table, in place of the raw id it used to print. */
.pick-fixture { font-weight: 600; }

/* Survivor */
.survivor-banner {
    margin-top: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.9rem;
}
.survivor-banner--alive { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.survivor-banner--out { background: var(--danger-bg); border-color: rgba(220, 38, 38, 0.25); color: var(--danger); }
@media (prefers-color-scheme: dark) {
    .survivor-banner--alive { background: rgba(16, 185, 129, 0.1); border-color: rgba(16, 185, 129, 0.3); color: var(--brand-300); }
}
.team-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* display:flex outranks the UA's [hidden] { display: none }, so the empty strip needs saying twice. */
.team-strip[hidden] { display: none; }
.round-pick-line { margin: 0 0 0.75rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* A survivor team the player has already ridden. Faded rather than hidden: knowing which of
   this week's fixtures you have burnt is half the decision. */
.team-strip-item { display: inline-flex; }
.match-team--spent { opacity: 0.55; }
.match-team--spent .team-name { text-decoration: line-through; text-decoration-thickness: 1px; }
.pick-flag--spent {
    border-color: var(--border);
    padding-left: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pick-choice--spent .btn-pick {
    text-decoration: line-through;
    opacity: 0.5;
    cursor: not-allowed;
}

/* The one-time revival. Brand-edged so it reads as an offer, not another status line. */
.card-second-chance { border-left: 4px solid var(--brand-500); }

/* Dashboard: everything still waiting on you */
.todo-card { border-left: 4px solid var(--warn); }
.todo-card--clear { border-left-color: var(--brand-500); }
.todo-card--clear .ico { font-size: 1.5rem; }
.todo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.todo-item { margin: 0; }
.todo-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elev);
    color: inherit;
}
.todo-link:hover { border-color: var(--brand-500); text-decoration: none; }
.todo-body { display: grid; gap: 0.15rem; min-width: 0; flex: 1; }
.todo-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-meta { font-size: 0.82rem; }
.todo-when { margin-left: auto; white-space: nowrap; }
@media (max-width: 34rem) {
    .todo-link { flex-wrap: wrap; }
    .todo-when { margin-left: 0; width: 100%; }
}

/* Standings row for the signed-in player */
.row-me { background: var(--brand-50); }
@media (prefers-color-scheme: dark) {
    .row-me { background: rgba(16, 185, 129, 0.08); }
}

/* ---- Celebrations ----------------------------------------------------------
   Four skins on one chassis: three wins and one knockout. Losing keeps the same
   layout on purpose -- one code path in play.js, and a card that settles rather
   than pops reads as respectful instead of mocking. Intensity escalates with the
   moment (survived < top score < champion), or winning the pool feels like
   nothing. Each skin sets --celebrate-* and the shared rules do the rest. */

.celebration {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 200ms ease;
}
.celebration.is-in { opacity: 1; }
.celebration.is-out { opacity: 0; }
body.has-celebration { overflow: hidden; }

.celebration__confetti {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.celebration__card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    width: min(24rem, 100%);
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
    border-radius: var(--radius-lg);
    border: 1px solid var(--celebrate-edge, var(--border));
    background: var(--bg-elev);
    box-shadow: var(--shadow-lg);
    transform: scale(0.9) translateY(12px);
    transition: transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.25);
}
.celebration.is-in .celebration__card { transform: scale(1) translateY(0); }

/* A tinted wash behind the emblem rather than a filled header, so the card stays
   part of the same surface family as every other card in the app. */
.celebration__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 8rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    background: radial-gradient(
        60% 100% at 50% 0%,
        var(--celebrate-tint, transparent) 0%,
        transparent 100%
    );
    pointer-events: none;
}

.celebration__emblem {
    position: relative;
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
    color: var(--celebrate-accent, var(--brand-500));
}
.celebration__emblem > svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.celebration__subject {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.celebration__headline {
    margin: 0;
    font-size: 1.65rem;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
}
.celebration__detail {
    margin: 0;
    max-width: 20rem;
    color: var(--text-muted);
}
.celebration__dismiss { margin-top: 0.6rem; min-width: 7rem; }

/* Sparkles for the two trophy skins. Decorative only -- play.js marks the wrapper
   aria-hidden, and the SVG underneath carries the meaning. */
.celebration__stars {
    position: absolute;
    inset: -18%;
    pointer-events: none;
}
.celebration__stars i {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--celebrate-accent, var(--brand-500));
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    opacity: 0;
    animation: celebrate-star 1.5s ease-out infinite;
}
.celebration__stars i:nth-child(1) { top: 6%;  left: 10%; animation-delay: 0.05s; }
.celebration__stars i:nth-child(2) { top: 0;   left: 62%; animation-delay: 0.35s; }
.celebration__stars i:nth-child(3) { top: 40%; left: 92%; animation-delay: 0.6s; }
.celebration__stars i:nth-child(4) { top: 78%; left: 74%; animation-delay: 0.9s; }
.celebration__stars i:nth-child(5) { top: 82%; left: 16%; animation-delay: 0.2s; }
.celebration__stars i:nth-child(6) { top: 34%; left: 0;   animation-delay: 0.75s; }

@keyframes celebrate-star {
    0%   { opacity: 0; transform: scale(0.3) rotate(0deg); }
    35%  { opacity: 1; transform: scale(1.15) rotate(45deg); }
    100% { opacity: 0; transform: scale(0.5) rotate(120deg); }
}

/* A light sweep travelling across the metal, so the trophy reads as polished
   rather than as a flat glyph. */
.celebration__sweep {
    clip-path: inset(0 100% 0 0);
    animation: celebrate-sweep 1.4s ease-in-out 0.35s;
}
@keyframes celebrate-sweep {
    0%   { clip-path: inset(0 100% 0 0); }
    55%  { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 100%); }
}

/* 1. Survived the week — the small one. */
.celebration--week-survived {
    --celebrate-accent: var(--brand-500);
    --celebrate-mark: #ffffff;
    --celebrate-tint: rgba(16, 185, 129, 0.18);
    --celebrate-edge: color-mix(in srgb, var(--brand-500) 40%, var(--border));
}
.celebration--week-survived .celebration__emblem {
    animation: celebrate-rise 460ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both;
}

/* 2. Top score of the week — the middle one. */
.celebration--week-top-score {
    --celebrate-accent: #f59e0b;
    --celebrate-mark: rgba(255, 255, 255, 0.75);
    --celebrate-tint: rgba(245, 158, 11, 0.2);
    --celebrate-edge: color-mix(in srgb, #f59e0b 45%, var(--border));
}
.celebration--week-top-score .celebration__emblem {
    animation: celebrate-rise 520ms cubic-bezier(0.2, 0.9, 0.3, 1.35) both;
}

/* 3. Won the pool — the big one. Larger card, longer rise, brighter wash. */
.celebration--mode-won {
    --celebrate-accent: #f59e0b;
    --celebrate-mark: rgba(255, 255, 255, 0.85);
    --celebrate-tint: rgba(245, 158, 11, 0.28);
    --celebrate-edge: color-mix(in srgb, #f59e0b 60%, var(--border));
}
.celebration--mode-won .celebration__card {
    width: min(27rem, 100%);
    padding-top: 2.5rem;
}
.celebration--mode-won .celebration__emblem {
    width: 7.5rem;
    height: 7.5rem;
    animation: celebrate-rise 760ms cubic-bezier(0.2, 0.9, 0.28, 1.2) both;
}
.celebration--mode-won .celebration__headline { font-size: 2.1rem; }
.celebration--mode-won .celebration__stars i { animation-duration: 1.9s; }

/* 4. Eliminated — same chassis, no confetti, and the card settles downward
   instead of popping up. Muted rather than alarming: it is the end of a run,
   not an error. */
.celebration--eliminated {
    --celebrate-accent: var(--text-soft);
    --celebrate-mark: var(--text-soft);
    --celebrate-tint: rgba(220, 38, 38, 0.1);
    --celebrate-edge: var(--border-strong);
}
.celebration--eliminated .celebration__card {
    transform: scale(1) translateY(-10px);
    transition: transform 420ms ease-out;
}
.celebration.is-in.celebration--eliminated .celebration__card { transform: translateY(0); }
.celebration--eliminated .celebration__emblem {
    animation: celebrate-crack 700ms ease-out both;
}
.celebration--eliminated .celebration__headline { color: var(--text-muted); }

@keyframes celebrate-rise {
    0%   { opacity: 0; transform: translateY(24px) scale(0.6); }
    60%  { opacity: 1; transform: translateY(-4px) scale(1.08); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes celebrate-crack {
    0%   { opacity: 0; transform: translateY(-8px) scale(1.06); filter: saturate(1); }
    45%  { opacity: 1; transform: translateY(2px) scale(1); }
    60%  { transform: translateX(-3px); }
    72%  { transform: translateX(3px); }
    84%  { transform: translateX(-2px); }
    100% { opacity: 1; transform: translateX(0); filter: saturate(0.35); }
}

@media (max-width: 30rem) {
    .celebration__headline { font-size: 1.4rem; }
    .celebration--mode-won .celebration__headline { font-size: 1.7rem; }
    .celebration--mode-won .celebration__emblem { width: 6rem; height: 6rem; }
}

/* Same moment, same copy, no motion. play.js skips the confetti canvas entirely
   under this preference, so there is nothing here to switch off. */
@media (prefers-reduced-motion: reduce) {
    .celebration,
    .celebration__card,
    .celebration--eliminated .celebration__card { transition: opacity 200ms ease; }
    .celebration__card,
    .celebration.is-in .celebration__card,
    .celebration--eliminated .celebration__card,
    .celebration.is-in.celebration--eliminated .celebration__card { transform: none; }
    .celebration__emblem,
    .celebration__stars i,
    .celebration__sweep { animation: none; }
    .celebration__stars i { opacity: 0.9; }
    .celebration__sweep { clip-path: inset(0 100% 0 0); }
}

/* --- Party sessions -------------------------------------------------------
   A room code is read aloud across a room with a game on, and typed by someone
   holding a drink. Both the input and the host's display of it are oversized and
   wide-tracked so the characters stay distinct at a glance and from a few feet away. */
.room-code-input {
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-size: 1.5rem;
    text-align: center;
    font-weight: 700;
}
.room-code {
    display: inline-block;
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: 0.28em;
    /* Trailing letter-spacing would push the text off-centre inside its own box. */
    text-indent: 0.28em;
    line-height: 1.1;
    color: var(--brand-500);
    background: var(--bg-soft);
    border: 1px dashed var(--border-strong);
    border-radius: 0.6rem;
    padding: 0.5rem 1rem;
}
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain > li + li { border-top: 1px solid var(--border); margin-top: 0.5rem; padding-top: 0.5rem; }
.session-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; }
.session-card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.session-item-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
@media (max-width: 30rem) {
    .room-code { font-size: 1.6rem; letter-spacing: 0.2em; text-indent: 0.2em; }
}