/* ============================================================================
   Dart Dawg League Portal — design system (P9 overhaul)
   Self-hosted fonts, CSS-custom-property tokens, one dark theme done well.
   ========================================================================== */

/* ── Fonts (self-hosted, no CDN at runtime) ── */
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(fonts/outfit-600.woff2) format("woff2");
}
@font-face {
    font-family: "Outfit";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(fonts/outfit-800.woff2) format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/inter-400.woff2) format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(fonts/inter-600.woff2) format("woff2");
}

/* ── Design tokens ── */
:root {
    /* Surfaces */
    --bg-0: #0B0E13;   /* page */
    --bg-1: #12161D;   /* cards */
    --bg-2: #1A202A;   /* raised / hover */
    --border: #2A3140;
    --hairline: #1E242E;

    /* Text */
    --text-1: #F2F4F8;
    --text-2: #A8B0BD;
    --text-3: #6B7484;

    /* Accents (dartboard-derived, used sparingly) */
    --green: #22C55E;
    --green-hover: #16A34A;
    --red: #EF4444;
    --gold: #EAB308;
    --silver: #C7CDD6;
    --bronze: #C7863F;
    --focus: rgba(56, 189, 248, 0.4);

    /* Tinted status backgrounds (~15% alpha) */
    --green-tint: rgba(34, 197, 94, 0.15);
    --red-tint: rgba(239, 68, 68, 0.15);
    --gold-tint: rgba(234, 179, 8, 0.15);
    --neutral-tint: rgba(168, 176, 189, 0.12);

    /* Radii */
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;

    /* Elevation */
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.30), 0 6px 16px rgba(0, 0, 0, 0.22);
    --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.35), 0 18px 40px rgba(0, 0, 0, 0.45);

    /* Type scale (px): 13 15 17 20 24 32 44 */
    --fs-13: 0.8125rem;
    --fs-15: 0.9375rem;
    --fs-17: 1.0625rem;
    --fs-20: 1.25rem;
    --fs-24: 1.5rem;
    --fs-32: 2rem;
    --fs-44: 2.75rem;

    /* Legacy aliases (kept so older selectors + inline refs keep resolving) */
    --bg: var(--bg-0);
    --card: var(--bg-1);
    --text: var(--text-1);
    --muted: var(--text-2);
    --accent: var(--green);
    --accent-hover: var(--green-hover);
    --error: var(--red);
    --radius: var(--r-md);
}

* { box-sizing: border-box; }

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg-0);
    color: var(--text-1);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: var(--fs-15);
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: var(--green); text-decoration: none; transition: color 120ms ease; }
a:hover { text-decoration: underline; }

/* FocusOnNavigate programmatically focuses the page h1 for screen readers; it is not
   interactive, so suppress the stray outline box (keyboard users never tab to it). */
h1[tabindex]:focus, h1[tabindex]:focus-visible { outline: none; }

h1, h2, h3, h4 {
    font-family: "Outfit", "Inter", sans-serif;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--text-1);
}
h1 { font-size: var(--fs-32); margin: 0 0 0.5rem; }
h2 { font-size: var(--fs-24); margin: 2rem 0 0.85rem; font-weight: 700; }
h3 { font-size: var(--fs-17); margin: 0 0 0.5rem; font-weight: 700; }
h4 { font-size: var(--fs-15); margin: 0.9rem 0 0.5rem; font-weight: 700; }

p { margin: 0 0 0.85rem; }

.muted { color: var(--text-2); }
.small { font-size: var(--fs-13); }
.lead { font-size: var(--fs-17); color: var(--text-2); max-width: 44rem; line-height: 1.55; }

/* Numeric cells / scoreboard numerals */
.num, .tabular { font-variant-numeric: tabular-nums; }

/* ── Layout shell ── */
.app-shell { display: flex; flex-direction: column; min-height: 100vh; }
.app-main { flex: 1 0 auto; width: 100%; max-width: 1080px; margin: 0 auto; }
.app-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--hairline);
    padding: 1.1rem 1.5rem;
    font-size: var(--fs-13);
    color: var(--text-3);
}
.pad { padding: 2rem 1.5rem; }
.narrow { max-width: 30rem; }

/* ── Top bar / nav ── */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1.5rem;
    background: var(--bg-1);
    border-bottom: 1px solid var(--hairline);
    position: sticky;
    top: 0;
    z-index: 40;
}
.brand {
    font-family: "Outfit", sans-serif;
    font-weight: 800;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    color: var(--text-1);
    display: inline-flex;
    gap: 0.4ch;
    text-transform: uppercase;
}
.brand:hover { text-decoration: none; color: var(--text-1); }
.brand .brand-accent { color: var(--green); }

.nav-right { display: flex; align-items: center; gap: 1.25rem; }
.topnav { display: flex; align-items: center; gap: 0.35rem; }
.topnav a {
    color: var(--text-2);
    font-size: var(--fs-15);
    font-weight: 600;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    border-bottom: 2px solid transparent;
    transition: color 120ms ease, background 120ms ease;
}
.topnav a:hover { color: var(--text-1); text-decoration: none; background: var(--bg-2); }
.topnav a.active { color: var(--text-1); border-bottom-color: var(--green); border-radius: 8px 8px 0 0; }

.linkbtn {
    background: none;
    border: none;
    color: var(--text-2);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    transition: color 120ms ease;
}
.linkbtn:hover { color: var(--green); }

/* User chip */
.user-chip { display: inline-flex; align-items: center; gap: 0.55rem; }
.avatar {
    width: 32px; height: 32px; flex: 0 0 auto;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--green-tint);
    color: var(--green);
    font-weight: 700; font-size: var(--fs-13);
    border: 1px solid rgba(34, 197, 94, 0.35);
    text-transform: uppercase;
    font-family: "Outfit", sans-serif;
}
.user-email { color: var(--text-2); font-size: var(--fs-13); max-width: 15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Hamburger */
.nav-toggle {
    display: none;
    background: none; border: 1px solid var(--border); color: var(--text-1);
    width: 40px; height: 38px; border-radius: 10px; cursor: pointer;
    font-size: 1.2rem; line-height: 1; align-items: center; justify-content: center;
}
.nav-toggle:hover { background: var(--bg-2); }

/* ── Cards ── */
.card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    padding: 1.35rem;
    margin: 0 0 1.25rem;
    box-shadow: var(--shadow-card);
}
.card-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
    margin: -0.25rem 0 1rem;
}
.card-head h3 { margin: 0; }
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.1rem;
    margin-top: 1.25rem;
}
.linkcard {
    display: block; color: var(--text-1);
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.linkcard:hover {
    border-color: rgba(34, 197, 94, 0.5);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}
.linkcard h3 { color: var(--text-1); }
.card-icon {
    width: 42px; height: 42px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--green-tint); color: var(--green);
    font-size: 1.35rem; margin-bottom: 0.85rem;
}

/* Payment panel + reference code */
.payment-panel { border-color: rgba(34, 197, 94, 0.5); }
.ref-code {
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 0.12rem 0.45rem;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--green-tint);
    color: var(--text-1);
}

/* ── Hero / landing ── */
.hero {
    position: relative;
    padding: 3rem 0 2.5rem;
    overflow: hidden;
}
.hero-inner { position: relative; z-index: 1; max-width: 40rem; }
.hero h1 {
    font-size: var(--fs-44);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0 0 1rem;
}
.hero h1 .accent { color: var(--green); }
.hero .lead { margin-bottom: 1.75rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1.25rem; }

/* Decorative dartboard ring motif (pure CSS, low-contrast) */
.dartboard-motif {
    position: absolute;
    top: 50%; right: -120px;
    transform: translateY(-50%);
    width: 460px; height: 460px;
    border-radius: 50%;
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
    background:
        radial-gradient(circle,
            transparent 0, transparent 34px,
            var(--green-tint) 35px, var(--green-tint) 40px,
            transparent 41px, transparent 92px,
            rgba(239, 68, 68, 0.10) 93px, rgba(239, 68, 68, 0.10) 120px,
            transparent 121px, transparent 168px,
            var(--neutral-tint) 169px, var(--neutral-tint) 196px,
            transparent 197px, transparent 210px,
            rgba(234, 179, 8, 0.08) 211px, rgba(234, 179, 8, 0.08) 214px,
            transparent 215px);
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 78%);
    mask-image: radial-gradient(circle, #000 55%, transparent 78%);
}
.dartboard-motif::after {
    content: "";
    position: absolute; inset: 0; border-radius: 50%;
    background:
        repeating-conic-gradient(from -9deg,
            rgba(255, 255, 255, 0.03) 0deg 18deg,
            transparent 18deg 36deg);
    -webkit-mask-image: radial-gradient(circle, transparent 44px, #000 46px, #000 196px, transparent 200px);
    mask-image: radial-gradient(circle, transparent 44px, #000 46px, #000 196px, transparent 200px);
}

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ── Forms ── */
.field { display: block; margin-bottom: 1rem; }
.field > span { display: block; font-size: var(--fs-13); color: var(--text-2); margin-bottom: 0.35rem; font-weight: 600; }
.field input, .field select, .field textarea {
    width: 100%;
    padding: 0.62rem 0.75rem;
    background: var(--bg-0);
    color: var(--text-1);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    font-size: var(--fs-15);
    font-family: inherit;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.field input::placeholder { color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint);
}
.field input:disabled, .field select:disabled { opacity: 0.55; cursor: not-allowed; }
.field-error { color: var(--red); font-size: var(--fs-13); margin: 0.35rem 0 0; }

.readonly-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--hairline);
}
.readonly-row:last-of-type { border-bottom: none; }
.readonly-row .label { color: var(--text-2); }
.readonly-row .value { font-weight: 600; }

/* ── Buttons ── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    min-height: 40px;
    padding: 0.55rem 1.15rem;
    border-radius: var(--r-sm);
    border: 1px solid transparent;
    font-size: var(--fs-15);
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px); }

.btn-primary { background: var(--green); color: #07130B; border-color: var(--green); }
.btn-primary:hover:not(:disabled) { background: var(--green-hover); border-color: var(--green-hover); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(34, 197, 94, 0.28); }

.btn-ghost { background: transparent; color: var(--text-1); border-color: var(--border); }
.btn-ghost:hover:not(:disabled) { border-color: var(--green); color: var(--green); background: var(--bg-2); transform: translateY(-1px); }

.btn-danger { background: transparent; color: var(--red); border-color: rgba(239, 68, 68, 0.5); }
.btn-danger:hover:not(:disabled) { background: var(--red-tint); border-color: var(--red); transform: translateY(-1px); }

.btn-sm { min-height: 32px; padding: 0.3rem 0.75rem; font-size: var(--fs-13); }

/* ── Alerts (form/page-level inline) ── */
.alert {
    padding: 0.75rem 0.9rem;
    border-radius: var(--r-sm);
    font-size: var(--fs-15);
    margin: 0.5rem 0 1rem;
    border: 1px solid transparent;
}
.alert-error { background: var(--red-tint); color: #FCA5A5; border-color: rgba(239, 68, 68, 0.4); }
.alert-success { background: var(--green-tint); color: #86EFAC; border-color: rgba(34, 197, 94, 0.4); }

/* ── Tables ── */
.table-scroll {
    overflow-x: auto; width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-card);
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-15);
    min-width: 520px;
    background: var(--bg-1);
}
.data-table th, .data-table td {
    text-align: left;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--hairline);
    white-space: nowrap;
}
.data-table thead th {
    color: var(--text-3);
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0;
}
.data-table tbody tr:nth-child(even) { background: rgba(26, 32, 42, 0.4); }
.data-table tbody tr:hover { background: var(--bg-2); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .team-mine { color: var(--green); font-weight: 700; }
.data-table tr.row-highlight { background: var(--green-tint) !important; }

/* Rank badges (standings) */
.rank {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.6rem; height: 1.6rem; padding: 0 0.4rem;
    border-radius: 999px; font-weight: 700; font-size: var(--fs-13);
    font-variant-numeric: tabular-nums;
    background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border);
}
.rank-1 { background: var(--gold-tint); color: var(--gold); border-color: rgba(234, 179, 8, 0.5); }
.rank-2 { background: rgba(199, 205, 214, 0.14); color: var(--silver); border-color: rgba(199, 205, 214, 0.4); }
.rank-3 { background: rgba(199, 134, 63, 0.16); color: var(--bronze); border-color: rgba(199, 134, 63, 0.45); }

/* ── Badges / status pills ── */
.badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid var(--border);
    background: var(--neutral-tint);
    color: var(--text-2);
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}
.badge-inprogress { color: var(--green); border-color: rgba(34, 197, 94, 0.4); background: var(--green-tint); }
.badge-scheduled { color: var(--text-1); }
.badge-completed { color: var(--text-2); }
.badge-postponed { color: var(--gold); border-color: rgba(234, 179, 8, 0.45); background: var(--gold-tint); }

.bye-list { list-style: none; padding: 0; margin: 0.5rem 0 1.25rem; }
.bye-list li { padding: 0.45rem 0.1rem; border-bottom: 1px solid var(--hairline); color: var(--text-2); }
.bye-list li:last-child { border-bottom: none; }
.bye-list strong { color: var(--text-1); }

.link { color: var(--green); font-weight: 600; }

/* ── Empty states ── */
.empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0.5rem;
    padding: 2.5rem 1.5rem;
    border: 1px dashed var(--border);
    border-radius: var(--r-md);
    background: rgba(18, 22, 29, 0.5);
    color: var(--text-2);
}
.empty .empty-glyph {
    width: 52px; height: 52px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-2); color: var(--text-3); font-size: 1.6rem;
    margin-bottom: 0.25rem;
}
.empty .empty-title { color: var(--text-1); font-weight: 700; font-size: var(--fs-17); }
.empty p { margin: 0; max-width: 34rem; }
.empty .btn { margin-top: 0.75rem; }

/* ── Skeleton loaders ── */
.skeleton {
    position: relative; overflow: hidden;
    background: var(--bg-2); border-radius: 8px;
}
.skeleton::after {
    content: ""; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
    animation: shimmer 1.3s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.sk-line { height: 0.85rem; margin: 0.55rem 0; }
.sk-line.w-40 { width: 40%; }
.sk-line.w-60 { width: 60%; }
.sk-line.w-80 { width: 80%; }
.sk-title { height: 1.5rem; width: 45%; margin: 0.25rem 0 1.1rem; }
.skeleton-card {
    background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md);
    padding: 1.35rem; margin-bottom: 1.25rem; box-shadow: var(--shadow-card);
}
.sk-rows { display: flex; flex-direction: column; gap: 0.35rem; }
.sk-row { height: 2.6rem; border-radius: 8px; }

/* ── Toasts ── */
.toast-host {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80;
    display: flex; flex-direction: column; gap: 0.6rem;
    max-width: min(24rem, calc(100vw - 2rem));
}
.toast {
    display: flex; align-items: flex-start; gap: 0.6rem;
    padding: 0.8rem 0.9rem;
    border-radius: var(--r-sm);
    background: var(--bg-2);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    color: var(--text-1);
    font-size: var(--fs-15);
    animation: toast-in 160ms ease;
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast .toast-icon {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.85rem; font-weight: 700; margin-top: 1px;
}
.toast-success { border-left: 3px solid var(--green); }
.toast-success .toast-icon { background: var(--green-tint); color: var(--green); }
.toast-error { border-left: 3px solid var(--red); }
.toast-error .toast-icon { background: var(--red-tint); color: var(--red); }
.toast .toast-msg { flex: 1 1 auto; }
.toast .toast-close {
    background: none; border: none; color: var(--text-3); cursor: pointer;
    font-size: 1.1rem; line-height: 1; padding: 0; flex: 0 0 auto;
}
.toast .toast-close:hover { color: var(--text-1); }

/* ── Operator + admin console ── */
.head-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }

.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; flex-wrap: wrap; }
.tab {
    background: none; border: none; color: var(--text-2); font: inherit; font-weight: 600;
    padding: 0.65rem 0.95rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color 120ms ease;
}
.tab:hover { color: var(--text-1); }
.tab.active { color: var(--green); border-bottom-color: var(--green); }

/* Anchor pill nav (operator league dashboard) */
.pill-nav {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    position: sticky; top: 3.4rem; z-index: 20;
    padding: 0.6rem 0; margin-bottom: 1rem;
    background: var(--bg-0);
}
.pill-nav a {
    padding: 0.4rem 0.85rem; border-radius: 999px;
    background: var(--bg-1); border: 1px solid var(--border);
    color: var(--text-2); font-size: var(--fs-13); font-weight: 600;
}
.pill-nav a:hover { color: var(--text-1); border-color: var(--green); text-decoration: none; }

/* Checklist / progress list */
.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; align-items: baseline; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--hairline); }
.checklist li:last-child { border-bottom: none; }
.checklist .tick {
    flex: 0 0 auto;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.8rem; align-self: center;
    border: 1px solid var(--border); background: var(--bg-2); color: var(--text-3);
}
.checklist li.done .tick { color: var(--green); background: var(--green-tint); border-color: rgba(34, 197, 94, 0.4); }
.checklist li.todo .tick { color: var(--text-3); }
.checklist .step-label { font-weight: 600; }
.checklist li.done .step-label { color: var(--text-2); }
.checklist .step-detail { margin-left: auto; text-align: right; }

.perm-row { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin: 0.6rem 0 0.85rem; }
.chk { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-15); }
.chk input { accent-color: var(--green); width: 1rem; height: 1rem; }

.inline-form { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; }
.inline-form input, .inline-form select {
    padding: 0.55rem 0.7rem; background: var(--bg-0); color: var(--text-1);
    border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-15);
    font-family: inherit; transition: border-color 120ms ease, box-shadow 120ms ease;
}
.inline-form input::placeholder { color: var(--text-3); }
.inline-form input:focus, .inline-form select:focus, .field select:focus {
    outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint);
}
.mini { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--text-2); font-size: var(--fs-13); }
.mini input { width: 4.5rem; }

.sub { margin-top: 1.1rem; padding-top: 0.85rem; border-top: 1px solid var(--hairline); }
.sub summary { cursor: pointer; color: var(--text-2); font-weight: 600; padding: 0.3rem 0; }
.sub summary:hover { color: var(--text-1); }
.sub h4 { margin: 0.85rem 0 0.5rem; }

.plain-list { list-style: none; padding: 0; margin: 0.35rem 0 0.85rem; }
.plain-list li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.45rem 0.1rem; border-bottom: 1px solid var(--hairline); }
.plain-list li:last-child { border-bottom: none; }

.linkbtn.danger { color: var(--red); }
.linkbtn.danger:hover { color: var(--red); text-decoration: underline; }
.sep { border: none; border-top: 1px solid var(--hairline); margin: 1.25rem 0; }

/* Two-column dashboard grid */
.grid-2 {
    display: grid; gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    align-items: start;
}

/* ── Schedule views (list / weeks / calendar) ── */
.sched-head {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem 1rem;
}
.sched-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }

/* Segmented view toggle */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--bg-1); }
.seg-btn {
    background: transparent; border: none; color: var(--text-2); font: inherit; font-weight: 600;
    font-size: var(--fs-15); padding: 0.45rem 0.95rem; cursor: pointer; border-right: 1px solid var(--border);
    transition: background 120ms ease, color 120ms ease;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { color: var(--text-1); background: var(--bg-2); }
.seg-btn.active { background: var(--green-tint); color: var(--green); }

.sched-filter { display: inline-flex; align-items: center; gap: 0.4rem; }
.sched-filter select {
    padding: 0.45rem 0.6rem; background: var(--bg-0); color: var(--text-1);
    border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-15);
}
.sched-filter select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }

.filter-note { margin: 0.35rem 0 1rem; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.filter-note .linkbtn { font-size: var(--fs-13); color: var(--green); }
.filter-note .linkbtn:hover { text-decoration: underline; }

/* Home / away markers */
.venue-home { color: var(--green); font-weight: 700; white-space: nowrap; }
.venue-away { color: var(--text-2); white-space: nowrap; }

/* Weeks view */
.week-list { display: flex; flex-direction: column; gap: 1rem; }
.week-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.2rem; box-shadow: var(--shadow-card); }
.week-head { display: flex; align-items: baseline; gap: 0.75rem; margin-bottom: 0.6rem; }
.week-no { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.week-date { font-size: var(--fs-13); }
.week-empty { margin: 0.25rem 0; }
.week-matches { list-style: none; padding: 0; margin: 0; }
.week-match {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.5rem 0; border-bottom: 1px solid var(--hairline);
}
.week-match:last-child { border-bottom: none; }
.week-venue { flex: 0 0 auto; min-width: 4.5rem; }
.week-teams { flex: 1 1 auto; }
.week-match .badge { margin-left: auto; }
.week-bye { margin-top: 0.5rem; padding-top: 0.45rem; border-top: 1px dashed var(--border); }

/* Calendar view */
.cal { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-card); }
.cal-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; padding: 0.6rem 0.85rem; background: var(--bg-1); border-bottom: 1px solid var(--border);
}
.cal-title { font-family: "Outfit", sans-serif; font-weight: 700; font-size: 1.05rem; }
.cal-nav { min-height: 34px; padding: 0.2rem 0.75rem; font-size: 1.2rem; line-height: 1; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow-row { background: var(--bg-1); border-bottom: 1px solid var(--border); }
.cal-dow { padding: 0.45rem 0.55rem; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); font-weight: 700; text-align: left; }
.cal-cell {
    min-height: 5.5rem; padding: 0.35rem 0.4rem; border-right: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 0.2rem; overflow: hidden;
    background: var(--bg-1);
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.other-month { background: rgba(0, 0, 0, 0.22); }
.cal-cell.other-month .cal-daynum { color: var(--text-3); opacity: 0.7; }
.cal-cell.today { background: var(--green-tint); }
.cal-cell.today .cal-daynum { color: var(--green); font-weight: 800; }
.cal-daynum { font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cal-chips { display: flex; flex-direction: column; gap: 0.2rem; }
.chip {
    display: flex; align-items: center; gap: 0.25rem; max-width: 100%;
    padding: 0.15rem 0.4rem; border-radius: 6px; font-size: 0.72rem; line-height: 1.3;
    background: var(--bg-2); border: 1px solid var(--border);
}
.chip .chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .chip-venue { flex: 0 0 auto; }
.chip.home { border-color: rgba(34, 197, 94, 0.45); background: var(--green-tint); color: var(--text-1); }
.chip.away { color: var(--text-2); }
.chip.bye { background: transparent; border-style: dashed; color: var(--text-2); font-style: italic; }

/* Review banner */
.review-banner strong { display: block; margin-bottom: 0.25rem; }

/* ── Responsive ── */
@media (max-width: 760px) {
    .nav-toggle { display: inline-flex; }
    .nav-right {
        position: absolute; top: 100%; right: 0; left: 0;
        flex-direction: column; align-items: stretch; gap: 0.25rem;
        background: var(--bg-1); border-bottom: 1px solid var(--border);
        padding: 0.75rem 1.5rem 1rem;
        box-shadow: var(--shadow-lg);
        display: none;
    }
    .nav-right.open { display: flex; }
    .topbar { position: sticky; flex-wrap: wrap; }
    .topnav { flex-direction: column; align-items: stretch; gap: 0.15rem; }
    .topnav a { padding: 0.6rem 0.5rem; border-bottom: none; border-radius: 8px; }
    .topnav a.active { background: var(--bg-2); border-left: 2px solid var(--green); }
    .user-chip { padding: 0.4rem 0.5rem 0; border-top: 1px solid var(--hairline); margin-top: 0.35rem; }
    .user-email { max-width: none; }
    .pill-nav { top: 0; }
}

@media (max-width: 480px) {
    .pad { padding: 1.5rem 1.1rem; }
    .hero { padding: 2rem 0 1.5rem; }
    .hero h1 { font-size: var(--fs-32); }
    .dartboard-motif { right: -220px; opacity: 0.35; }
    h1 { font-size: var(--fs-24); }
}

/* ── Match-night hub: lineup editor ── */
.lineup-editor { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0 1rem; }
.lineup-slot {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap;
    padding: 0.55rem 0; border-bottom: 1px solid var(--hairline);
}
.lineup-slot:last-child { border-bottom: none; }
.ls-info { display: inline-flex; align-items: center; gap: 0.55rem; min-width: 12rem; }
.ls-label { font-weight: 600; }
.ls-picks { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ls-select {
    padding: 0.45rem 0.6rem; background: var(--bg-0); color: var(--text-1);
    border: 1px solid var(--border); border-radius: var(--r-sm); font-size: var(--fs-15);
    font-family: inherit; min-width: 11rem;
}
.ls-select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint); }
.release-btn { margin-left: 0.4rem; }

/* ── Scorer (x01 + cricket) ── */
.scorer { max-width: 640px; margin: 0 auto; }
.scorer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; }
.scorer-title { margin: 0; }
.scorer-note {
    background: var(--gold-tint); border-color: rgba(234, 179, 8, 0.4); color: var(--text-2);
    font-size: var(--fs-13);
}

.cork-card, .win-card { text-align: center; }
.cork-actions, .scorer-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 1rem; }
.win-glyph { font-size: 2.5rem; display: block; margin-bottom: 0.35rem; }

.scoreboard {
    display: flex; align-items: stretch; gap: 0.75rem; margin: 0.75rem 0 1rem;
}
.match-total { max-width: 640px; margin-left: auto; margin-right: auto; }
.score-side {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: 0.15rem; padding: 0.85rem 0.6rem; border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--bg-1);
}
.score-side.active { border-color: var(--green); box-shadow: 0 0 0 2px var(--green-tint); }
.score-team { font-size: var(--fs-13); color: var(--text-2); font-weight: 600; }
.score-num { font-family: "Outfit", sans-serif; font-weight: 800; font-size: var(--fs-44); line-height: 1; }
.score-players { font-size: var(--fs-13); color: var(--text-3); }
.score-vs { align-self: center; color: var(--text-3); font-weight: 700; }

.turn-strip { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.turn-who { font-weight: 600; color: var(--text-1); }
.pending-count { color: var(--text-2); font-size: var(--fs-13); font-variant-numeric: tabular-nums; }
.darts { display: flex; gap: 0.4rem; }
.dart-bubble {
    min-width: 2.6rem; height: 2.2rem; padding: 0 0.4rem;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid var(--border); background: var(--bg-2);
    font-weight: 700; font-variant-numeric: tabular-nums;
}
.dart-bubble.empty { color: var(--text-3); background: var(--bg-1); }
.bust-banner { text-align: center; }

.mult-toggle { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; margin-bottom: 0.75rem; }
.mult-toggle .seg-btn { flex: 1 1 0; text-align: center; }

.numpad { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.45rem; margin-bottom: 1rem; }
.num-key {
    min-height: 3rem; border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--bg-1); color: var(--text-1); font-weight: 700; font-size: var(--fs-17);
    font-variant-numeric: tabular-nums; cursor: pointer; transition: background 120ms ease, border-color 120ms ease;
}
.num-key:hover:not(:disabled) { background: var(--bg-2); border-color: var(--green); }
.num-key:disabled { opacity: 0.4; cursor: not-allowed; }
.num-key.bull { color: var(--green); }
.num-key.miss { font-size: var(--fs-13); color: var(--text-2); }

/* Cricket board */
.cricket-board { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-bottom: 1rem; }
.cric-row { display: grid; grid-template-columns: 1fr 5rem 1fr; align-items: center; border-bottom: 1px solid var(--hairline); }
.cric-row:last-child { border-bottom: none; }
.cric-head { background: var(--bg-1); }
.cric-head .cric-mark { color: var(--text-2); font-size: var(--fs-13); font-weight: 600; }
.cric-mark { text-align: center; font-size: 1.3rem; font-weight: 800; padding: 0.5rem; color: var(--text-2); }
.cric-mark.closed { color: var(--green); }
.cric-num { text-align: center; font-weight: 700; color: var(--text-3); }
.cric-num-btn {
    align-self: stretch; border: none; border-left: 1px solid var(--hairline); border-right: 1px solid var(--hairline);
    background: var(--bg-1); color: var(--text-1); font-weight: 800; font-size: var(--fs-17);
    cursor: pointer; padding: 0.6rem 0; transition: background 120ms ease;
}
.cric-num-btn:hover:not(:disabled) { background: var(--bg-2); }
.cric-num-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Modal (takeover confirm) */
.modal-backdrop {
    position: fixed; inset: 0; z-index: 90; background: rgba(0, 0, 0, 0.6);
    display: flex; align-items: center; justify-content: center; padding: 1.5rem;
}
.modal {
    background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg); padding: 1.5rem; max-width: 26rem; width: 100%;
}
.modal h3 { margin-top: 0; }

@media (max-width: 480px) {
    .numpad { grid-template-columns: repeat(4, 1fr); }
    .score-num { font-size: var(--fs-32); }
}

/* ── Print: strip chrome, black-on-white, favour list/weeks ── */
@media print {
    :root {
        --bg-0: #fff; --bg-1: #fff; --bg-2: #fff;
        --border: #999; --hairline: #ccc;
        --text-1: #000; --text-2: #333; --text-3: #555;
        --green: #000; --green-tint: #eee;
    }
    html, body { background: #fff; color: #000; }
    .topbar, .app-footer, .no-print, .head-actions, .sched-toolbar,
    .filter-note .linkbtn, .toast-host, .pill-nav, .nav-toggle { display: none !important; }
    .app-main { max-width: none; }
    .card, .week-card, .cal, .table-scroll, .skeleton-card { border-color: #999; box-shadow: none; }
    .badge { border-color: #999; color: #000; background: #fff; }
    .venue-home, .cal-cell.today .cal-daynum, .seg-btn.active, .rank { color: #000; }
    .rank { border-color: #999; background: #fff; }
    .cal-cell.today, .chip.home { background: #eee; }
    .cal-cell.other-month { background: #f5f5f5; }
    .data-table tbody tr:nth-child(even) { background: #f5f5f5; }
    a { color: #000; text-decoration: none; }
    section, .week-card, .cal-cell { break-inside: avoid; }
}

/* ── Format template editor (P11c) ── */
.totals-bar {
    display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline;
    padding: 10px 14px; margin: 10px 0;
    background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
    font-size: var(--fs-15);
}
.totals-bar strong { color: var(--green); }

.alert-warn {
    padding: 10px 12px; border-radius: 8px; margin: 10px 0;
    background: rgba(230, 170, 40, 0.12);
    border: 1px solid rgba(230, 170, 40, 0.4);
    color: #e0b050; font-size: var(--fs-15);
}

.slot-table td { vertical-align: middle; }
.slot-table .cell {
    width: 100%; min-width: 90px; box-sizing: border-box;
    background: var(--bg-0); border: 1px solid var(--border); color: var(--text-1);
    border-radius: 6px; padding: 5px 7px; font-size: var(--fs-15);
}
.slot-table .cell.narrow { min-width: 58px; width: 64px; }
.slot-table .cell:disabled { opacity: 0.55; }
.slot-table .x01-cell { display: flex; align-items: center; gap: 8px; }
.slot-table .head-actions { gap: 6px; }

/* Division group headers on the schedule + standings pages (P11c). */
.division-head {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--accent);
    color: var(--accent);
}
.division-head:first-child { margin-top: 0.25rem; }

/* ── Playoff brackets (P11d) ── */
.bracket-wrap { margin: 0.5rem 0 1.5rem; }
.bracket-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.champion-banner {
    padding: 6px 12px; border-radius: 8px; font-size: var(--fs-15);
    background: rgba(234, 179, 8, 0.14); border: 1px solid rgba(234, 179, 8, 0.45); color: var(--gold);
}
/* Rounds are columns; the row scrolls horizontally on narrow screens (never the page body). */
.bracket-scroll { overflow-x: auto; padding-bottom: 6px; }
.bracket { display: flex; gap: 22px; align-items: stretch; min-width: min-content; }
.bracket-round { display: flex; flex-direction: column; min-width: 200px; }
.bracket-round-label {
    font-size: var(--fs-13, 0.8rem); text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--text-3); margin-bottom: 8px; font-weight: 700;
}
/* Space each round's matches evenly so later rounds line up between their feeders. */
.bracket-round-matches { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 14px; }
.bracket-match {
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px;
    overflow: hidden;
}
.bracket-match.is-tie { border-color: rgba(230, 170, 40, 0.6); }
.bracket-side {
    display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border-bottom: 1px solid var(--hairline);
}
.bracket-side:nth-child(2) { border-bottom: none; }
.bracket-side.is-winner { background: var(--green-tint); }
.bracket-side.is-winner .bracket-team { color: var(--green); font-weight: 700; }
.bracket-side.is-tbd .bracket-team { color: var(--text-3); font-style: italic; }
.seed-badge {
    flex: 0 0 auto; min-width: 20px; text-align: center; font-size: var(--fs-13, 0.78rem);
    color: var(--text-3); font-variant-numeric: tabular-nums;
}
.bracket-team { flex: 1; font-size: var(--fs-15); }
.bracket-foot { padding: 5px 10px; background: var(--bg-0); font-size: var(--fs-13, 0.78rem); }
.bracket-link { color: var(--accent); text-decoration: none; }
.bracket-link:hover { text-decoration: underline; }
.bracket-tie { color: #e0b050; }

/* ─────────────────────────── Public live match center (P12) ─────────────────────────── */
.public-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-0); }
.public-main { flex: 1; }
.public-pad { max-width: 1100px; margin: 0 auto; padding: clamp(1rem, 3vw, 2rem); }
.public-footer { border-top: 1px solid var(--border); padding: 1rem; text-align: center; }
.powered { color: var(--text-3); font-size: var(--fs-13); }
.powered:hover { color: var(--text-2); text-decoration: none; }
.powered-brand { color: var(--green); font-weight: 700; }

.public-empty { text-align: center; padding: clamp(2rem, 8vw, 5rem) 1rem; color: var(--text-2); }
.public-empty .empty-glyph { font-size: 3rem; display: block; margin-bottom: 0.5rem; }
.public-empty h1, .public-empty h2 { margin: 0.25rem 0; }

/* Live header + LIVE pulse */
.live-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.live-league { margin: 0; }
.live-pill { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: 0.6rem; font-size: var(--fs-13); font-weight: 800; letter-spacing: 0.08em; color: #ff5a5a; vertical-align: middle; }
.live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ff3b3b; box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.7); animation: live-pulse 1.6s infinite; }
@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(255, 59, 59, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.live-session { margin-top: 1.5rem; }
.live-session-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.live-links { display: flex; gap: 0.4rem; }

/* Scoreboard cards */
.scoreboards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-top: 0.75rem; }
.scorecard { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-md); padding: 0.9rem 1rem; box-shadow: var(--shadow-card); border-left: 4px solid var(--border); }
.scorecard.is-live { border-left-color: #ff3b3b; }
.scorecard.is-final { border-left-color: var(--green); }
.scorecard.is-scheduled { border-left-color: var(--text-3); }
.scorecard.is-postponed { border-left-color: #e0b050; }
.sc-status { font-size: var(--fs-13); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); margin-bottom: 0.4rem; }
.scorecard.is-live .sc-status { color: #ff5a5a; }
.scorecard.is-final .sc-status { color: var(--green); }
.sc-row { display: flex; justify-content: space-between; align-items: center; padding: 0.35rem 0; gap: 1rem; }
.sc-row + .sc-row { border-top: 1px solid var(--border); }
.sc-team { font-size: var(--fs-17); font-weight: 600; color: var(--text-2); }
.sc-row.leading .sc-team { color: var(--text-1); font-weight: 800; }
.sc-score { font-size: var(--fs-32); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-1); line-height: 1; }
.sc-expand { margin-top: 0.6rem; background: none; border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-13); padding: 0.3rem 0.6rem; cursor: pointer; }
.sc-expand:hover { background: var(--bg-2); color: var(--text-1); }
.sc-breakdown { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.25rem; }
.mu-row { display: grid; grid-template-columns: minmax(52px, 0.8fr) 1fr auto 1fr; gap: 0.4rem; align-items: center; font-size: var(--fs-13); padding: 0.3rem 0.4rem; border-radius: var(--r-sm); background: var(--bg-0); }
.mu-row.mu-live { outline: 1px solid rgba(255, 59, 59, 0.4); }
.mu-label { color: var(--text-3); font-weight: 700; }
.mu-side { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; }
.mu-side.won { color: var(--text-1); font-weight: 700; }
.mu-vs { color: var(--text-3); font-size: 0.72rem; text-align: center; white-space: nowrap; }
.mu-final .mu-vs { color: var(--green); }
.mu-live .mu-vs { color: #ff5a5a; }

/* Operator dashboard: public-live panel */
.public-live-panel .plp-head { display: flex; align-items: center; gap: 0.6rem; }
.public-live-panel .plp-head h3 { margin: 0; }
.plp-link { margin-top: 0.75rem; }
.plp-link .link-row { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.3rem; flex-wrap: wrap; }
.link-input { flex: 1; min-width: 12rem; background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-1); padding: 0.45rem 0.6rem; font-family: ui-monospace, monospace; font-size: var(--fs-13); }

/* ── P12 player card stat tiles ─────────────────────────────────────────── */
.stat-tiles { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.stat-tile {
  flex: 1 1 110px; min-width: 110px; text-align: center;
  background: var(--bg-0); border: 1px solid var(--border, #2A3140);
  border-radius: 14px; padding: 0.9rem 0.5rem;
}
.stat-tile .stat-value {
  display: block; font-family: 'Outfit', system-ui, sans-serif;
  font-size: 1.7rem; font-weight: 800; color: var(--text-1, #F2F4F8);
  font-variant-numeric: tabular-nums;
}
.stat-tile .stat-label {
  display: block; margin-top: 0.15rem; font-size: 0.72rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3, #6B7484);
}