/* ============================================
   KOTT Public Pages — Minimal Tech Design
   True black + frosted glass + cyan accent
   ============================================ */

/* Wave 6 a11y (2026-05-06) — skip-to-content link.
   Hidden offscreen via left:-9999px (NOT display:none — display:none
   removes the element from the focus order entirely; offscreen-shifting
   keeps it in the keyboard tab path). When focused, slides on-screen at
   the top-left corner with high contrast so the user clearly sees where
   keyboard focus is. */
.skip-to-content {
    position: absolute;
    left: -9999px;
    top: -9999px;
    z-index: 10000;
    background: var(--accent, #00e0ff);
    color: #000;
    padding: 10px 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
}
.skip-to-content:focus {
    left: 8px;
    top: 8px;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ============================================
   Wave 5 sub-theme 5.6 (2026-05-06) — canonical breakpoint scale.
   ============================================
   public.css media queries grew organically (480 / 640 / 720 / 768 /
   820 / 900 / 920 / 1024 / 1200 — 9 distinct breakpoints).
   New rules SHOULD use the four-tier scale below; older rules stay
   put for now (refactoring them all in one pass would touch every
   visual surface — sub-theme 5.6's request was to document the scale
   and start migrating).

     375px — minimum supported phone (small Android, iPhone SE).
     640px — large phone landscape / small tablet portrait.
     900px — tablet landscape; admin sidebar threshold.
     1200px — desktop content-column max-width.

   Four-tier matches the most common resolved breakpoints already in
   use; 720/768/820 collapse to 900, 480 collapses to 375 in the
   migration plan.
   ============================================ */

/* --- Design Tokens --- */
:root {
    /* Backgrounds */
    --bg-primary: #000000;
    --bg-panel: rgba(8, 12, 18, 0.65);
    --bg-panel-solid: #060a10;
    --bg-elevated: rgba(12, 18, 26, 0.7);
    --bg-hover: rgba(0, 224, 255, 0.04);
    --bg-input: rgba(0, 0, 0, 0.5);
    --bg-card: rgba(8, 12, 18, 0.65);

    /* Text */
    --text-primary: #e8eaed;
    --text-secondary: #9ca3af;
    --text-tertiary: #8b939f;
    --text-muted: #7a8493; /* 2026-05-06 — bumped from #6b7588 (4.18:1 → 5.58:1 vs #000) for WCAG AA at body text. */

    /* Accent — Cyan */
    --accent: #00e0ff;
    --accent-hover: #33e8ff;
    --accent-dim: rgba(0, 224, 255, 0.12);
    --accent-glow: rgba(0, 224, 255, 0.25);
    --link: #00e0ff;
    --link-hover: #33e8ff;

    /* Accent — Purple (Time Attack) */
    --accent-purple: #b49cff;

    /* Semantic */
    --success: #8aff8a;
    --danger: #ff6b6b;
    --warning: #ffb347;

    /* Semantic dims (for subtle backgrounds + borders) */
    --danger-dim: rgba(255, 107, 107, 0.05);
    --danger-border: rgba(255, 107, 107, 0.3);

    /* Borders */
    --border: rgba(255, 255, 255, 0.06); /* 2026-05-06 Wave 2.4 — was transparent; flipped to subtle visible token so 1px dashed separators (server-description bottom rule, ops-sample top rule, guide-section h2 underline) actually render. Matches admin.css value. */
    --border-hover: rgba(255, 255, 255, 0.10);
    --border-accent: rgba(0, 224, 255, 0.15);
    --border-accent-strong: rgba(0, 224, 255, 0.35);

    /* Tier colors */
    --tier-iron: #5c6370;
    --tier-bronze: #cd7f32;
    --tier-silver: #c0c8d4;
    --tier-gold: #ffd166;
    --tier-platinum: #7ee8fa;
    --tier-diamond: #b9f2ff;
    --tier-champion: #00e0ff;

    /* Fonts */
    --font-display: 'Rajdhani', 'Segoe UI', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Typography scale — 7 steps from micro to hero.
       Adoption is gradual; prefer these over inline px/rem for new styles. */
    --text-xs: 11px;      /* micro labels, tag badges */
    --text-sm: 12px;      /* captions, meta text */
    --text-base: 14px;    /* body default */
    --text-md: 16px;      /* emphasized body */
    --text-lg: 18px;      /* card titles, h3 */
    --text-xl: 24px;      /* page h2, profile h1 */
    --text-2xl: 28px;     /* page titles, mode titles */
    --text-hero: 2.75rem; /* hero only */

    /* Home page content column width — keeps every section (requirements
       panel, mode cards, status band, stats, highlights, recent matches)
       edge-aligned. Change once, applies everywhere. */
    --home-content-width: 900px;
}

/* --- Fallback for no backdrop-filter --- */
@supports not (backdrop-filter: blur(1px)) {
    :root { --bg-panel: var(--bg-panel-solid); --bg-elevated: #0a0e14; }
}

/* --- Base panel utility used across public pages --- */
.glass-panel {
    background: var(--bg-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border);
    border-radius: 8px;
}

/* --- Reset --- */
html, body { margin: 0; padding: 0; border: none; background: #000000; }
.public-shell * { box-sizing: border-box; margin: 0; padding: 0; }
.public-shell { font-family: var(--font-body); background: var(--bg-primary); color: var(--text-primary); font-size: 14px; line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; }
.public-shell a { color: var(--link); text-decoration: none; transition: color 0.12s ease; }
.public-shell a:hover { color: var(--link-hover); }

/* --- Top Nav — Frosted glass --- */
.topnav { background: rgba(8, 12, 18, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.topnav-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; height: 56px; }
.topnav-brand { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--accent) !important; letter-spacing: 3px; text-transform: uppercase; flex-shrink: 0; }
.topnav-brand:hover { color: var(--accent-hover) !important; }
.topnav-links { display: flex; gap: 2px; }
.topnav-links a, .topnav-links a:visited { font-family: var(--font-display); color: var(--text-tertiary); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 4px; transition: all 0.12s ease; text-transform: uppercase; letter-spacing: 0.5px; }
.topnav-links a:hover { color: var(--text-primary); background: var(--bg-hover); }
.topnav-links a.active { color: var(--accent); background: var(--accent-dim); }
.topnav-discord { color: var(--accent) !important; }
.topnav-discord:hover { background: var(--accent-dim) !important; }
.topnav-search { margin-left: auto; position: relative; }
.nav-search-input { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.10); color: var(--text-primary); padding: 6px 14px; border-radius: 4px; font-size: 13px; font-family: var(--font-body); width: 220px; transition: border-color 0.12s ease, width 0.2s ease; }
.nav-search-input:focus { outline: none; border-color: var(--border-accent-strong); width: 280px; box-shadow: 0 0 0 1px var(--border-accent); }
.nav-search-input::placeholder { color: var(--text-muted); }
.search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-panel-solid);  border: 1px solid var(--border-hover); border-radius: 0 0 4px 4px; overflow-y: auto; z-index: 200; margin-top: 2px; max-height: 300px; }
.search-result { display: block; padding: 8px 14px; font-size: 13px; color: var(--text-primary) !important; transition: background 0.1s; }
.search-result:hover { background: var(--bg-hover); }
.topnav-toggle { display: none; background: none; border: none; color: var(--text-tertiary); font-size: 20px; cursor: pointer; padding: 4px 8px; }
.topnav-mobile { display: none; }

/* --- Announcement Banner --- */
.announcement-banner { padding: 10px 24px; text-align: center; font-size: 14px; font-family: var(--font-display); position: relative; color: #fff; }
.announcement-banner strong { font-weight: 700; }
.announcement-info { background: rgba(0, 224, 255, 0.15); border-bottom: 1px solid rgba(0, 224, 255, 0.3); }
.announcement-warning { background: rgba(251, 191, 36, 0.15); border-bottom: 1px solid rgba(251, 191, 36, 0.3); color: #fbbf24; }
.announcement-maintenance { background: rgba(239, 68, 68, 0.15); border-bottom: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; }
.announcement-season { background: rgba(139, 92, 246, 0.15); border-bottom: 1px solid rgba(139, 92, 246, 0.3); color: #a78bfa; }
.announcement-dismiss { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: none; border: none; color: inherit; font-size: 18px; cursor: pointer; opacity: 0.6; }
.announcement-dismiss:hover { opacity: 1; }

/* --- Main Content --- */
.public-content { flex: 1; max-width: 1200px; width: 100%; margin: 0 auto; padding: 28px 24px; }

/* --- Footer --- */
.public-footer { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 20px 24px; color: var(--text-muted); font-size: 12px; border-top: none; flex-wrap: wrap; }
.footer-brand { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-tertiary); }
.footer-links { display: inline-flex; gap: 14px; }
.footer-links a { color: var(--text-muted); font-family: var(--font-display); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.12s ease; }
.footer-links a:hover { color: var(--accent); }
.footer-cookie { flex-basis: 100%; text-align: center; font-size: 11px; color: var(--text-muted); opacity: 0.8; }
.footer-cookie a { color: var(--text-tertiary); text-decoration: underline; }
.footer-cookie a:hover { color: var(--accent); }
.footer-discord { display: inline-flex; align-items: center; gap: 6px; color: var(--text-tertiary); font-family: var(--font-display); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.12s ease; }
.footer-discord:hover { color: #5865F2; }
.footer-discord:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- Page Title --- */
.page-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin-bottom: 20px; display: flex; align-items: center; gap: 10px; letter-spacing: 0.5px; outline: none; }
/* Wave 5 sub-theme 5.7 (visual-design F47) — page subtitle. Sits below
   .page-title on Leaderboard / Matches / etc.; lifts the page title's
   bottom margin so the pair reads as one block. */
.page-subtitle { color: var(--text-secondary); font-size: var(--text-sm); margin: -16px 0 16px; line-height: 1.55; }
.page-title + .page-subtitle { margin-top: -16px; }

/* --- Hero h1 modifier (Home / mode landing pages) — bumps to 44px desktop, 32px mobile.
   Applied to existing hero headings without changing the canonical .page-title rule. */
.h1-hero {
    font-size: 44px;
    letter-spacing: -1px;
    line-height: 1.1;
}
@media (max-width: 640px) {
    .h1-hero { font-size: 32px; }
}

/* --- Buttons --- */
.btn { font-family: var(--font-display); font-weight: 600; font-size: 13px; padding: 7px 16px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; transition: all 0.12s ease; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #000; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { border-color: rgba(248, 113, 113, 0.2); color: var(--danger); }
.btn.danger:hover { background: rgba(248, 113, 113, 0.08); border-color: var(--danger); }
.btn-sm { font-family: var(--font-display); font-size: 11px; padding: 4px 10px; border-radius: 4px; background: transparent; border: 1px solid var(--border-accent); color: var(--accent) !important; font-weight: 600; text-decoration: none; transition: all 0.12s ease; letter-spacing: 0.5px; text-transform: uppercase; }
.btn-sm:hover { background: var(--accent-dim); border-color: var(--accent); }
.btn-sm:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-xs { font-family: var(--font-display); font-size: 9px; padding: 2px 8px; border-radius: 3px; background: transparent; border: 1px solid rgba(255,255,255,0.15); color: var(--text-muted) !important; font-weight: 600; text-decoration: none; transition: all 0.12s ease; letter-spacing: 0.5px; text-transform: uppercase; margin-left: auto; }
.btn-xs:hover { border-color: var(--accent); color: var(--accent) !important; }

/* --- Tables — Hairline borders --- */
.pub-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pub-table thead { position: sticky; top: 56px; z-index: 10; }
.pub-table th { text-align: left; padding: 10px 14px; background: #000000; color: var(--text-tertiary); font-family: var(--font-display); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid var(--border-hover); }
.pub-table td { padding: 10px 14px; border-bottom: 1px solid var(--border); }
.pub-table tr { transition: background 0.1s ease; }
.pub-table tbody tr:hover { background: var(--bg-hover); }
.pub-table th.right, .pub-table td.right { text-align: right; }
.pub-table th.center, .pub-table td.center { text-align: center; }

/* --- Tier Badges — Sharp tags with thin borders --- */
.tier-badge { display: inline-block; font-family: var(--font-display); padding: 2px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; border: 1px solid; }
.tier-iron { background: rgba(92, 99, 112, 0.08); color: var(--tier-iron); border-color: rgba(92, 99, 112, 0.2); }
.tier-bronze { background: rgba(205, 127, 50, 0.08); color: var(--tier-bronze); border-color: rgba(205, 127, 50, 0.2); }
.tier-silver { background: rgba(192, 200, 212, 0.08); color: var(--tier-silver); border-color: rgba(192, 200, 212, 0.2); }
.tier-gold { background: rgba(255, 209, 102, 0.08); color: var(--tier-gold); border-color: rgba(255, 209, 102, 0.2); }
.tier-platinum { background: rgba(126, 232, 250, 0.08); color: var(--tier-platinum); border-color: rgba(126, 232, 250, 0.2); }
.tier-diamond { background: rgba(185, 242, 255, 0.08); color: var(--tier-diamond); border-color: rgba(185, 242, 255, 0.2); }
.tier-champion { background: rgba(0, 224, 255, 0.1); color: var(--tier-champion); border-color: rgba(0, 224, 255, 0.3); }
.tier-unranked { background: rgba(107, 114, 128, 0.08); color: var(--text-tertiary); border-color: rgba(107, 114, 128, 0.15); }

/* --- Rank Number --- */
.rank-num { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-muted); min-width: 28px; display: inline-block; }
.rank-num.top1 { color: var(--tier-champion); }
.rank-num.top2 { color: var(--tier-diamond); }
.rank-num.top3 { color: var(--tier-gold); }

/* --- Rating Display --- */
.rating { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.rating-label { font-size: 11px; color: var(--text-muted); margin-left: 2px; }
.rating-change { font-family: var(--font-display); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.rating-change.positive { color: var(--success); }
.rating-change.negative { color: var(--danger); }

/* --- Win Rate --- */
.winrate { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.winrate.high { color: var(--success); }
.winrate.mid { color: var(--text-primary); }
.winrate.low { color: var(--danger); }

/* --- Match Result --- */
.result-win { color: var(--success); font-weight: 700; }
.result-loss { color: var(--danger); font-weight: 700; }
.vs-text { color: var(--text-muted); font-size: 12px; font-weight: 600; padding: 0 6px; }
.match-ranked { font-family: var(--font-display); font-size: 10px; font-weight: 600; text-transform: uppercase; padding: 1px 6px; border-radius: 4px; border: 1px solid; }
.match-ranked.ranked { background: var(--accent-dim); color: var(--accent); border-color: var(--border-accent); }
.match-ranked.unranked { background: rgba(107, 114, 128, 0.08); color: var(--text-tertiary); border-color: rgba(107, 114, 128, 0.15); }
.match-reason { font-size: 11px; color: var(--text-muted); }
.match-time { font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* --- Player Profile Header — Glass panel --- */
.profile-header { background: var(--bg-panel);  border: none; border-radius: 8px; padding: 28px; margin-bottom: 24px; display: flex; align-items: center; gap: 24px; }
.profile-avatar { width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,0.03); border: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 28px; color: var(--text-muted); flex-shrink: 0; }
.profile-info h1 { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; overflow-wrap: anywhere; min-width: 0; }
.profile-meta { display: flex; gap: 20px; font-size: 13px; color: var(--text-secondary); flex-wrap: wrap; }
.profile-meta strong { color: var(--text-primary); font-family: var(--font-display); }

/* --- Stats Grid — Glass cards --- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 24px; }
.stat-card { background: var(--bg-panel);  border: none; border-radius: 8px; padding: 16px 18px; }
.stat-card .stat-label { font-family: var(--font-display); font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.stat-card .stat-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.stat-card .stat-value.success { color: var(--success); }
.stat-card .stat-value.danger { color: var(--danger); }

/* --- Server Cards — Glass panels --- */
.server-section-label { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; margin-top: 24px; }
.server-section-label:first-of-type { margin-top: 0; }
.section-desc { font-size: 13px; color: var(--text-muted); margin: -4px 0 14px; line-height: 1.5; }
.section-desc a { color: var(--accent); }
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 12px; }

/* Cross-mode footer links — appears at the bottom of every mode page
   (Queue, KOTH, Time Attack) so users always have a one-click path to the
   other two modes without dead-ending. Previously .servers-other-* but
   renamed to .mode-footer-* since it's shared across mode pages now. */
.mode-footer-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: var(--home-content-width);
    margin: 28px auto 32px;
}
.mode-footer-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    background: rgba(255,255,255,0.02);
    text-decoration: none;
    color: inherit !important;
    transition: all 0.15s ease;
}
.mode-footer-link:hover {
    border-color: var(--border-accent-strong);
    background: var(--bg-hover);
    transform: translateY(-1px);
}
.mode-footer-label {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    border: 1px solid;
    flex-shrink: 0;
}
.mode-footer-label.ta { color: var(--accent-purple); border-color: rgba(180, 156, 255, 0.35); background: rgba(180, 156, 255, 0.08); }
.mode-footer-label.mm { color: var(--accent); border-color: var(--border-accent-strong); background: var(--accent-dim); }
.mode-footer-label.koth { color: var(--success); border-color: rgba(138, 255, 138, 0.35); background: rgba(138, 255, 138, 0.08); }
.mode-footer-label.servers { color: var(--accent); border-color: var(--border-accent-strong); background: var(--accent-dim); }
.mode-footer-label.lb { color: var(--text-primary); border-color: rgba(255, 255, 255, 0.20); background: rgba(255, 255, 255, 0.04); }
.mode-footer-text { color: var(--text-secondary); font-size: var(--text-base); }

/* Community-servers block: "see also" section, de-emphasized header */
.servers-community-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 36px 0 6px;
    padding-top: 20px;
    border-top: 1px solid var(--border-hover);
}
.servers-community-sub {
    color: var(--text-muted);
    font-size: var(--text-sm);
    margin: 0 0 14px;
    line-height: 1.5;
}
@media (max-width: 640px) {
    .mode-footer-links { grid-template-columns: 1fr; }
}
.server-card { background: var(--bg-panel);  border: none; border-radius: 8px; padding: 18px; }
.server-card.online { border: 1px solid rgba(52, 211, 153, 0.15); }
.server-card.offline { opacity: 0.55; position: relative; }
.server-card.offline::after { content: "OFFLINE"; position: absolute; top: 12px; right: 12px; font-family: var(--font-display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--danger); background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.15); padding: 2px 8px; border-radius: 4px; }
.server-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.server-card-header .server-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.server-dot.green { background: var(--success); box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
.server-dot.red { background: var(--danger); }
.server-card-header strong { font-family: var(--font-display); font-size: 15px; color: var(--text-primary); }
.server-card-body { font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.server-card-body .label { color: var(--text-muted); }
.server-card-body .king-name { color: var(--accent); font-weight: 600; display: inline-block; max-width: 20ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.server-card-body .player-count { font-family: var(--font-display); font-weight: 600; color: var(--text-primary); }

/* Unified server card — shared between KOTH, Time Attack, and community modes.
   Role modifiers set accent color; the structural layout (header with mode badge,
   label/value rows, footer connect button) is the same across modes so users
   scan one consistent pattern. */
.server-card { display: flex; flex-direction: column; transition: border-color 0.2s; }
.server-card:hover { border-color: var(--border-hover); }
.server-card.role-koth.online { border: 1px solid rgba(0, 224, 255, 0.25); }
.server-card.role-timeattack.online { border: 1px solid rgba(180, 156, 255, 0.30); }
.server-card.role-community.online { border: 1px solid rgba(255, 255, 255, 0.10); }
.server-card-header { justify-content: space-between; }
.server-card-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.server-card-header-left strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.server-mode-badge { font-family: var(--font-display); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 3px 8px; border-radius: 4px; flex-shrink: 0; white-space: nowrap; }
.server-mode-badge.mode-koth { background: rgba(0, 224, 255, 0.12); color: var(--accent, #00e0ff); border: 1px solid rgba(0, 224, 255, 0.25); }
.server-mode-badge.mode-ta { background: rgba(180, 156, 255, 0.12); color: #b49cff; border: 1px solid rgba(180, 156, 255, 0.30); }
/* Wave 5 sub-theme 5.7 (visual-design F42) — was --text-muted (#7a8493);
   bumped to --text-secondary (#9ca3af, ~7.5:1 vs #000) for badge legibility
   on the dark card chrome. */
.server-mode-badge.mode-community { background: rgba(255, 255, 255, 0.05); color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.18); }
.server-card-row { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 13px; line-height: 1.5; flex-wrap: wrap; /* Wave 5 sub-theme 5.7 — weather row wraps on narrow viewports rather than ellipsing the rain/grip suffix off-screen. */ }
.server-card-row .label { color: var(--text-muted); font-family: var(--font-display); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; min-width: 64px; flex-shrink: 0; }
.server-card-row .value { color: var(--text-secondary); flex: 1; min-width: 0; }
.server-card-row.muted .value { color: var(--text-muted); font-style: italic; }
.server-card-row .record-time { color: #b49cff; font-family: var(--font-mono, monospace); font-weight: 600; font-size: 15px; margin-right: 8px; }
.server-card-row .record-holder { color: var(--text-tertiary); font-size: 11px; }
.server-card-row .king-streak { color: var(--text-muted); font-size: 12px; }
.server-card-row .ta-delta { margin-left: 6px; font-size: 12px; font-weight: 600; }
/* 2026-05-05 Tier 1 — server card extras (community + managed). */
.server-flag { font-size: 14px; line-height: 1; flex-shrink: 0; }
.server-lock { margin-left: 4px; font-size: 12px; opacity: 0.85; }
.server-description { font-size: 12px; color: var(--text-tertiary); line-height: 1.45; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px dashed var(--border); font-style: italic; }
.track-layout { color: var(--text-tertiary); font-size: 12px; }

/* --- Phase 5 / Task 5.3 — TA cards live data ---
   Top-3 deltas + recent PB activity sections, refreshed every 30s by
   PollTaLiveDataAsync on Public/Servers.razor. The borders + subtle
   dividers visually separate live data from the static record/PB rows. */
.ta-top3, .ta-activity { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(180, 156, 255, 0.10); font-size: 12px; line-height: 1.5; }
.ta-top3-title, .ta-activity-title { font-family: var(--font-display); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); margin-bottom: 4px; }
.ta-top3-row, .ta-activity-row { display: flex; align-items: baseline; gap: 8px; padding: 1px 0; }
.ta-top3-rank { color: var(--text-tertiary); font-family: var(--font-mono, monospace); font-size: 11px; min-width: 24px; }
.ta-top3-name, .ta-activity-name { color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ta-top3-name:hover, .ta-activity-name:hover { color: #b49cff; }
.ta-top3-time, .ta-activity-time { color: #b49cff; font-family: var(--font-mono, monospace); font-weight: 600; }
.ta-top3-delta { font-size: 11px; font-weight: 600; }
.ta-activity-ago { color: var(--text-muted); font-size: 11px; }

.server-card-footer { margin-top: auto; padding-top: 14px; }
.server-card-connect { display: block; width: 100%; text-align: center; }
.server-card-connect.disabled { opacity: 0.35; pointer-events: none; }
.server-links { margin-top: 10px; display: flex; gap: 8px; }
/* Wave 5 sub-themes 5.4 + 5.7 (2026-05-06) — server-card additions:
   FULL badge for at-capacity servers; per-card freshness line; promoted
   Connect button to the cyan filled style. */
.server-full-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(255, 107, 107, 0.15);
    border: 1px solid rgba(255, 107, 107, 0.45);
    color: var(--danger);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.server-card-meta {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed var(--border);
    font-size: 11px;
    color: var(--text-tertiary);
    line-height: 1.4;
}
.server-card-freshness {
    font-family: var(--font-mono, monospace);
    color: var(--text-tertiary);
}
.server-card-freshness-offline {
    color: var(--danger);
    opacity: 0.85;
}
/* Empty-state compact variant — used when the section has its own header
   (e.g. Community Servers explainer always renders, the empty state under
   it is just one line, not a full hero). */
.empty-state-compact {
    padding: 16px;
    text-align: left;
    color: var(--text-muted);
}

/* --- Operators directory (Phase 4 / Task 4.3) ---
   Public-facing tenant browser at /operators. Lists every active tenant
   that's opted-in via tenants.list_publicly. Card pattern mirrors the
   server-card grid for visual consistency, but each card is a single
   anchor leading to /community/{slug}/. */
.ops-header { margin-bottom: 22px; }
.ops-title { font-family: var(--font-display); font-size: 32px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-primary); margin: 0 0 8px 0; }
.ops-explainer { color: var(--text-secondary); font-size: 14px; line-height: 1.65; max-width: 720px; margin: 0; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-bottom: 24px; }
.ops-card { display: flex; flex-direction: column; padding: 18px; text-decoration: none; transition: border-color 0.18s, transform 0.18s; }
.ops-card:hover { border-color: rgba(0, 224, 255, 0.35); transform: translateY(-1px); }
.ops-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ops-card-header { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.ops-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--text-primary); letter-spacing: 0.3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-slug { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--accent); opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-card-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 12px; color: var(--text-secondary); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.5px; }
.ops-server-count { display: inline-flex; align-items: center; gap: 6px; }
.ops-dot { width: 8px; height: 8px; border-radius: 50%; }
.ops-dot.online { background: var(--success); box-shadow: 0 0 6px rgba(52, 211, 153, 0.4); }
.ops-dot.offline { background: var(--text-muted); opacity: 0.5; }
.ops-blurb { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
/* 2026-05-05 Tier 1 — operator card enrichment from heartbeat info section.
   Wave 5 sub-theme 5.7 (2026-05-06) — explicit font-weight: 400 so the flag
   doesn't inherit the bold weight even if a parent <strong> wrapper sneaks
   back in. */
.ops-flag { font-size: 16px; margin-right: 6px; line-height: 1; vertical-align: -2px; font-weight: 400; }
.ops-name-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
/* Wave 5 sub-theme 5.5 (2026-05-06) — section headers used by the
   First-party / Community split. Match .section-title weight so they
   slot into the page's existing typographic scale. */
.ops-section-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 16px 0 4px;
    letter-spacing: 0.3px;
}
.ops-section-title:first-child { margin-top: 0; }
.ops-section-sub {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0 0 12px;
}
.ops-player-count { color: var(--text-tertiary); font-weight: 500; }
.ops-modes { display: inline-flex; gap: 4px; margin-left: auto; }
.ops-mode-badge { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; border: 1px solid var(--border); color: var(--text-tertiary); }
.ops-mode-matchmaking { color: var(--accent); border-color: rgba(0, 224, 255, 0.4); background: rgba(0, 224, 255, 0.08); }
.ops-mode-koth { color: #ffce5a; border-color: rgba(255, 206, 90, 0.35); background: rgba(255, 206, 90, 0.08); }
.ops-mode-time-attack { color: #b49cff; border-color: rgba(180, 156, 255, 0.35); background: rgba(180, 156, 255, 0.08); }
.ops-sample { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-tertiary); }
.ops-sample-track { font-family: var(--font-mono, monospace); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops-weather-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--text-secondary); }

/* --- Track Selector --- */
.track-selector { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.track-btn { font-family: var(--font-display); background: transparent; border: 1px solid var(--border); color: var(--text-tertiary); padding: 6px 16px; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.12s ease; text-transform: uppercase; letter-spacing: 0.5px; }
.track-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.track-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.track-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* --- Section Title --- */
.section-title { font-family: var(--font-display); font-size: var(--text-base); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 24px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }

/* --- Loading / Empty --- */
.pub-loading { text-align: center; padding: 60px 20px; color: var(--text-muted); font-size: 14px; }
.pub-loading .spinner { display: inline-block; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: pub-spin 0.6s linear infinite; margin-bottom: 10px; }
@keyframes pub-spin { to { transform: rotate(360deg); } }
.pub-empty { background: var(--bg-panel);  border: none; border-radius: 8px; padding: 48px 28px; text-align: center; }
.pub-empty h3 { color: var(--text-secondary); font-family: var(--font-display); font-size: 15px; margin-bottom: 6px; }
.pub-empty p { color: var(--text-muted); font-size: 13px; }

/* --- Player Link --- */
.player-link { color: var(--text-primary) !important; font-weight: 500; transition: color 0.1s; display: inline-block; max-width: 18ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.player-link:hover { color: var(--accent) !important; }
.player-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* On wider match rows / cards, allow more characters. */
.pub-table .player-link, .match-players .player-link { max-width: 28ch; }

/* --- Lap detail links --- */
.lap-link { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(0, 224, 255, 0.4); transition: color 0.1s, border-color 0.1s; }
.lap-link:hover { color: var(--accent, #00e0ff); border-bottom-color: var(--accent, #00e0ff); }

/* --- Auto-refresh indicator --- */
.refresh-indicator { font-family: var(--font-display); font-size: 11px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.refresh-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); animation: pulse-refresh 2s infinite; }
.refresh-dot.pulsing { animation: refresh-spin 0.6s linear infinite; box-shadow: 0 0 6px var(--accent); }
.refresh-text { letter-spacing: 0.5px; }
@keyframes refresh-spin { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.6); opacity: 0.4; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulse-refresh { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* --- Leaderboard Podium --- */
.leaderboard-podium { display: flex; justify-content: center; align-items: flex-end; gap: 16px; margin-bottom: 28px; padding: 20px 0; }
.podium-card { background: var(--bg-panel);  border: none; border-radius: 8px; padding: 20px 24px; text-align: center; flex: 0 0 200px; }
.podium-1 { border: 1px solid var(--border-accent); padding: 28px 24px; }
.podium-1:hover { border-color: var(--accent); }
.podium-rank { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin-bottom: 8px; }
.podium-1 .podium-rank { color: var(--tier-champion); font-size: 36px; }
.podium-2 .podium-rank { color: var(--tier-diamond); }
.podium-3 .podium-rank { color: var(--tier-gold); }
.podium-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-primary) !important; display: block; margin-bottom: 6px; }
.podium-name:hover { color: var(--accent) !important; }
.podium-rating { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 6px; }
.podium-record { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }

/* --- Current Player Row Highlight --- */
.current-player-row { background: var(--accent-dim) !important; border-left: 2px solid var(--accent); }
.current-player-row td:first-child { padding-left: 12px; }

/* --- Pagination --- */
.pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; padding: 16px 0; }
.pagination-info { font-family: var(--font-display); font-size: 13px; color: var(--text-muted); font-weight: 500; }

/* --- Phase 5 / Task 5.5 — leaderboard infinite scroll ---
   Sentinel is intentionally empty (height + width 1px) so it doesn't
   alter the visual layout — the IntersectionObserver in
   /js/infinite-scroll.js fires on it. The status strip below shows
   "Loading more…" / "End of leaderboard" / current count. */
.lb-sentinel { width: 100%; height: 1px; }
.lb-status-strip { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 18px 0 6px 0; font-family: var(--font-display); font-size: 13px; color: var(--text-muted); font-weight: 500; min-height: 28px; }
.lb-status-loading { display: inline-flex; align-items: center; gap: 8px; }
.lb-status-end { color: var(--text-tertiary); font-style: italic; }
.spinner-inline { width: 14px; height: 14px; border: 2px solid var(--text-muted); border-top-color: var(--accent); border-radius: 50%; animation: pub-spin 0.8s linear infinite; display: inline-block; }

/* --- Auth Nav --- */
.topnav-auth { display: flex; align-items: center; gap: 10px; margin-left: 12px; flex-shrink: 0; }
.auth-btn { font-family: var(--font-display); font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 4px; transition: all 0.12s ease; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.5px; }
.steam-btn { background: transparent; color: var(--text-secondary) !important; border: 1px solid rgba(255,255,255,0.15); }
.steam-btn:hover { border-color: var(--accent); color: var(--accent) !important; }
.logout-btn { color: var(--text-muted) !important; border: 1px solid var(--border); background: transparent; }
.logout-btn:hover { color: var(--text-primary) !important; border-color: var(--border-hover); }
.player-name-link { color: var(--text-primary) !important; font-size: 13px; font-weight: 500; }
.player-name-link:hover { color: var(--accent) !important; }

/* --- Queue Discord Link --- */
.queue-discord-link { text-align: center; margin-bottom: 20px; }
.discord-queue-btn { font-family: var(--font-display); display: inline-block; background: transparent; color: #8b9bf7 !important; border: 1px solid rgba(88, 101, 242, 0.3); padding: 8px 20px; border-radius: 4px; font-weight: 600; font-size: 13px; text-decoration: none; transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.5px; }
.discord-queue-btn:hover { background: rgba(88, 101, 242, 0.1); border-color: #5865F2; color: #a4b0fb !important; }

/* --- Queue Page --- */
.queue-status-bar { display: flex; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.queue-stat { background: var(--bg-panel);  border: none; border-radius: 8px; padding: 14px 20px; flex: 1; min-width: 140px; }
.queue-stat-label { display: block; font-family: var(--font-display); font-size: 11px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.queue-stat-value { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--text-primary); }

.queue-card { background: var(--bg-panel);  border: none; border-radius: 8px; padding: 32px; max-width: 560px; margin: 0 auto; }

/* Unified idle-state queue card. Consolidates what used to be four separate
   pieces (stats bar, "queue is open" empty-state, user identity card, buttons)
   into one cohesive panel so the whole queue-join flow reads as one action. */
.queue-card-primary { padding: 28px; max-width: 620px; }
.queue-card-primary .queue-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); flex-wrap: wrap; }
.queue-card-primary .queue-card-head .queue-player-rating { margin-left: auto; }
.queue-card-primary .queue-card-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.queue-card-primary .queue-stat-cell { text-align: center; padding: 4px 12px; border-right: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.queue-card-primary .queue-stat-cell:last-child { border-right: none; }
.queue-card-primary .queue-stat-cell .queue-stat-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.queue-card-primary .queue-stat-cell .queue-stat-label { font-family: var(--font-display); font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.8px; }
.queue-card-primary .queue-stat-cell.queue-stat-disabled { opacity: 0.4; }
.queue-card-primary .queue-stat-cell.queue-stat-disabled .queue-stat-value { color: var(--text-muted); font-size: 14px; font-weight: 600; padding-top: 6px; }

/* "or queue from Discord" secondary link under the join buttons — replaces
   the lonely top-of-page Discord button. Quiet styling: Discord's tinted
   underline on hover, no background box. */
.queue-discord-alt { display: block; text-align: center; margin-top: 14px; color: #8b9bf7 !important; font-family: var(--font-display); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.8px; text-decoration: none; transition: color 0.15s; }
.queue-discord-alt:hover { color: #a4b0fb !important; text-decoration: underline; }

/* Unavailable state */
/* Legacy — kept in case any tests still reference the old class names */
.queue-unavailable { text-align: center; padding: 64px 24px; max-width: 480px; margin: 0 auto; }

/* ===== QUEUE OFFLINE STATE (compact notice + alternatives) ===== */
.queue-offline-card {
    max-width: var(--home-content-width);
    margin: 16px auto 28px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    border: 1px solid rgba(255, 179, 71, 0.25);
    background: rgba(255, 179, 71, 0.04);
    border-radius: 8px;
}
.queue-offline-label {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--warning);
    background: rgba(255, 179, 71, 0.12);
    border: 1px solid rgba(255, 179, 71, 0.35);
    padding: 4px 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.queue-offline-body {
    flex: 1;
    min-width: 220px;
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.5;
    margin: 0;
}
.queue-offline-cta {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent) !important;
    text-decoration: none;
    padding: 8px 16px;
    border: 1px solid var(--border-accent-strong);
    border-radius: 4px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.queue-offline-cta:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
}

.queue-alternatives {
    max-width: var(--home-content-width);
    margin: 0 auto 2rem;
    padding: 0 1rem;
}
.queue-alt-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: 0.5px;
}
.queue-alt-sub {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin: 0 0 1rem;
}
.queue-alt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
.queue-alt-card {
    padding: 18px;
    border-radius: 8px;
    border: 1px solid var(--border-accent);
    text-decoration: none;
    color: inherit !important;
    display: block;
    transition: all 0.15s ease;
}
.queue-alt-card:hover {
    border-color: var(--border-accent-strong);
    transform: translateY(-2px);
}
.queue-alt-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.queue-alt-badge.ta { background: rgba(180, 156, 255, 0.15); color: var(--accent-purple); }
.queue-alt-badge.koth { background: rgba(138, 255, 138, 0.12); color: var(--success); }
.queue-alt-badge.lb { background: var(--accent-dim); color: var(--accent); }
.queue-alt-card-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: 0.5px;
}
.queue-alt-card-desc {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0 0 10px;
}
.queue-alt-card-cta {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
@media (max-width: 820px) {
    .queue-alt-grid { grid-template-columns: 1fr; }
    .queue-offline-card { flex-direction: column; align-items: flex-start; }
    .queue-offline-cta { align-self: stretch; text-align: center; }
}

/* Login card */
.queue-login-card { text-align: center; padding: 48px 32px; }
.queue-card-icon { font-size: 40px; margin-bottom: 12px; }
.queue-login-card h2 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.queue-login-card p { color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; }
.queue-steam-btn { display: inline-block; background: transparent; color: var(--text-secondary) !important; border: 1px solid rgba(255,255,255,0.15); padding: 12px 28px; border-radius: 4px; font-family: var(--font-display); font-size: 14px; font-weight: 600; transition: all 0.15s ease; text-transform: uppercase; letter-spacing: 0.5px; }
.queue-steam-btn:hover { border-color: var(--accent); color: var(--accent) !important; }

/* Player info */
.queue-player-info { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.queue-player-name { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-primary); }
.queue-player-rating { font-family: var(--font-display); font-size: 14px; color: var(--text-secondary); font-weight: 500; }

/* Error */
.queue-error { background: rgba(248, 113, 113, 0.06); border: 1px solid rgba(248, 113, 113, 0.15); color: var(--danger); padding: 10px 14px; border-radius: 4px; font-size: 13px; margin-bottom: 16px; }

/* Optional Discord-link tip — informational, sits under the join buttons.
   Not a gate: web players can queue with Steam-only and rely on browser
   notifications + the page poll loop to learn when matched. */
.queue-link-tip { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 10px 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 4px; }
.queue-link-tip-icon { font-size: 14px; line-height: 1.5; flex-shrink: 0; }
.queue-link-tip-text { font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.queue-link-tip-text a { color: var(--accent); text-decoration: none; }
.queue-link-tip-text a:hover { text-decoration: underline; }

/* Manual-connect fallback shown alongside the Connect Now button — visible even
   when the acmanager:// link works, so a tester whose protocol handler isn't
   registered has an obvious copy-pasteable IP:port without needing to know
   what's broken. Label line gives the failure mode, body line gives the fix. */
.match-connect-fallback-label { display: block; font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 4px; }

/* Join buttons */
.queue-join-buttons { display: flex; gap: 12px; }
.queue-join-btn { font-family: var(--font-display); flex: 1; padding: 14px 20px; border-radius: 4px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.queue-join-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.queue-join-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* Primary CTA — solid accent fill + dark text. Previous version used accent-dim
   (translucent cyan) with accent-colored text: cyan-on-cyan-tint, very low contrast.
   Now reads as a proper "this is the button" call-to-action, matching the welcome-btn. */
.queue-join-btn.ranked { background: var(--accent); border-color: var(--accent); color: #001018; font-weight: 700; box-shadow: 0 0 0 1px rgba(0, 224, 255, 0.25), 0 4px 14px rgba(0, 224, 255, 0.15); }
.queue-join-btn.ranked:hover:not(:disabled) { background: var(--accent-hover, #33e7ff); box-shadow: 0 0 0 1px rgba(0, 224, 255, 0.4), 0 4px 18px rgba(0, 224, 255, 0.25); }
.queue-join-btn.unranked { background: transparent; border-color: rgba(255, 255, 255, 0.20); color: var(--text-secondary); }
.queue-join-btn.unranked:hover:not(:disabled) { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.35); color: var(--text-primary); }
.queue-join-btn-disabled { background: rgba(255,255,255,0.03) !important; border-color: rgba(255,255,255,0.08) !important; color: var(--text-muted) !important; opacity: 0.5; }
.queue-stat-disabled { opacity: 0.45; }
.queue-stat-disabled .queue-stat-value { color: var(--text-muted); }
.queue-both-off-note { margin-top: 12px; font-size: 13px; color: var(--text-muted); text-align: center; }

/* Searching state */
.queue-searching { text-align: center; padding: 48px 32px; }
.queue-searching h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; }
.queue-searching-anim { display: flex; justify-content: center; gap: 6px; margin-bottom: 20px; }
.queue-searching-anim .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: queue-dot 1.4s infinite ease-in-out; }
.queue-searching-anim .dot:nth-child(2) { animation-delay: 0.2s; }
.queue-searching-anim .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes queue-dot { 0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1.2); } }
.queue-position-text { color: var(--text-secondary); font-size: 14px; margin-bottom: 4px; }
.queue-wait-time { color: var(--text-muted); font-size: 13px; margin-bottom: 24px; }
.queue-cancel-btn { font-family: var(--font-display); background: transparent; border: 1px solid rgba(248, 113, 113, 0.15); color: var(--danger); padding: 8px 24px; border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.12s ease; text-transform: uppercase; letter-spacing: 0.5px; }
.queue-cancel-btn:hover { background: rgba(248, 113, 113, 0.08); border-color: var(--danger); }

/* Matched state */
.queue-matched { text-align: center; }
.queue-matched-header { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--accent); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 2px; }
.queue-match-players { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px; font-family: var(--font-display); font-size: 18px; }
.queue-match-you { font-weight: 700; color: var(--text-primary); }
.queue-match-opponent { font-weight: 700; color: var(--accent) !important; }

.queue-match-details { text-align: left; background: rgba(0,0,0,0.3); border: 1px solid var(--border); border-radius: 4px; padding: 16px; margin-bottom: 20px; }
.queue-match-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; }
.queue-match-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.queue-match-row .label { color: var(--text-muted); }
.queue-password { display: flex; align-items: center; gap: 8px; }
.queue-password code { font-family: var(--font-mono); background: rgba(0,0,0,0.5); padding: 3px 10px; border-radius: 4px; font-size: 13px; color: var(--text-primary); letter-spacing: 1px; }

.match-status-badge { font-family: var(--font-display); font-size: 11px; font-weight: 600; text-transform: uppercase; padding: 2px 10px; border-radius: 4px; letter-spacing: 0.5px; border: 1px solid; }
.match-status-badge.assigned { background: rgba(0, 224, 255, 0.06); color: var(--accent); border-color: var(--border-accent); }
.match-status-badge.connecting { background: rgba(251, 191, 36, 0.06); color: var(--warning); border-color: rgba(251, 191, 36, 0.2); }
.match-status-badge.racing { background: rgba(52, 211, 153, 0.06); color: var(--success); border-color: rgba(52, 211, 153, 0.2); }

.queue-cm-btn { display: inline-block; font-family: var(--font-display); background: var(--accent); color: #000 !important; padding: 12px 28px; border-radius: 4px; font-size: 15px; font-weight: 700; transition: background 0.15s ease; margin-bottom: 16px; text-transform: uppercase; letter-spacing: 1px; }
.queue-cm-btn:hover { background: var(--accent-hover); }

.queue-match-step { color: var(--text-muted); font-family: var(--font-display); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.queue-match-hint { color: var(--text-muted); font-size: 12px; margin-top: 4px; margin-bottom: 12px; }
.queue-match-warning { color: var(--text-muted); font-size: 12px; font-style: italic; }

/* --- Queue Season Banner --- */
.queue-season-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 10px 16px; background: var(--bg-panel); border-left: 3px solid var(--accent); border-radius: 4px; }
.queue-season-banner .season-name { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--accent); }
.queue-season-banner .season-since { font-size: 12px; color: var(--text-muted); }

/* --- Queue Estimated Wait --- */
.queue-est-wait { color: var(--text-muted); font-size: 12px; margin-bottom: 16px; font-style: italic; }

/* --- Queue Recent Matches --- */
.queue-recent { max-width: 560px; margin: 24px auto 0; }
.queue-recent h3 { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.recent-match-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; background: var(--bg-panel); border-radius: 4px; margin-bottom: 4px; font-size: 13px; }
.recent-match-row a { color: var(--text-primary); text-decoration: none; }
.recent-match-row a:hover { color: var(--accent); }
.recent-players { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-small { color: var(--text-muted); font-size: 11px; margin: 0 4px; }
.recent-result { color: var(--success); font-family: var(--font-display); font-size: 12px; font-weight: 600; white-space: nowrap; }
.recent-time { color: var(--text-muted); font-size: 11px; white-space: nowrap; }

/* --- Queue Match Result --- */
.queue-result-card { background: var(--bg-panel);  border: none; border-radius: 8px; padding: 32px; text-align: center; max-width: 480px; margin: 0 auto; }
.result-banner { font-family: var(--font-display); font-size: 24px; font-weight: 700; margin: 16px 0; padding: 12px; border-radius: 4px; border: 1px solid; text-transform: uppercase; letter-spacing: 2px; }
.result-banner.win { background: rgba(52, 211, 153, 0.08); color: var(--success); border-color: rgba(52, 211, 153, 0.2); }
.result-banner.loss { background: rgba(248, 113, 113, 0.08); color: var(--danger); border-color: rgba(248, 113, 113, 0.2); }
.result-banner.draw { background: rgba(107, 114, 128, 0.08); color: var(--text-tertiary); border-color: rgba(107, 114, 128, 0.15); }
.result-details { text-align: left; margin: 20px 0; line-height: 2; }
.result-actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }

/* --- My Profile: Welcome Card --- */
/* --- Phase 5 / Task 5.4 — first-login onboarding card ---
   Four-step welcome card on /me. Shows on first /me visit + for 7 days
   after first login if not yet dismissed (then hidden permanently via
   players.onboarding_dismissed_at). The outer .glass-panel + cyan accent
   matches the public-page design tokens; the optional-tag pill is muted
   because Discord linking is a UX convenience, not a queueing gate. */
.onboarding-card { padding: 24px; margin: 0 0 24px 0; border-left: 3px solid var(--accent); }
.onboarding-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 12px; }
.onboarding-card-header h3 { font-family: var(--font-display); color: var(--accent); font-size: 18px; margin: 0; }
.onboarding-dismiss-form { margin: 0; }
.onboarding-dismiss-btn { background: transparent; border: none; color: var(--text-muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 4px; transition: color 0.15s, background 0.15s; }
.onboarding-dismiss-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.onboarding-steps { list-style: decimal inside; padding: 0; margin: 0; counter-reset: onboarding-step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.onboarding-steps li { list-style: none; counter-increment: onboarding-step; padding: 16px; background: rgba(255,255,255,0.02); border-radius: 6px; position: relative; }
.onboarding-steps li::before { content: counter(onboarding-step); position: absolute; top: 12px; right: 12px; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--accent); opacity: 0.25; }
.onboarding-steps li strong { font-family: var(--font-display); color: var(--text-primary); display: block; margin-bottom: 6px; }
.onboarding-steps li p { color: var(--text-secondary); font-size: 13px; margin: 0 0 10px 0; line-height: 1.5; }
.onboarding-step-optional strong { color: var(--text-secondary); }
.onboarding-step-optional-tag { display: inline-block; background: rgba(255,255,255,0.06); color: var(--text-muted); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 3px; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.onboarding-cta { color: var(--accent); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.onboarding-cta-done { color: #8aff8a; cursor: default; }

.welcome-card { background: var(--bg-panel);  border: none; border-radius: 8px; padding: 32px; text-align: center; margin: 24px 0; }
.welcome-card h3 { font-family: var(--font-display); color: var(--accent); font-size: 20px; margin-bottom: 8px; }
.welcome-card p { color: var(--text-secondary); margin-bottom: 20px; }
.welcome-actions { display: flex; gap: 12px; justify-content: center; }
/* `.public-shell a { color: var(--link) }` wins on specificity over `.welcome-btn`
   (0,1,1 vs 0,1,0), which made the primary button's text render in the accent
   color against its accent background — invisible. Prefix with .public-shell to
   tie and let the later rule's color stick. */
.public-shell .welcome-btn { font-family: var(--font-display); display: inline-block; background: var(--accent); color: #000; padding: 10px 24px; border-radius: 4px; font-weight: 700; text-decoration: none; transition: background 0.15s; text-transform: uppercase; letter-spacing: 0.5px; }
.public-shell .welcome-btn:hover { background: var(--accent-hover); color: #000; }
.public-shell .welcome-btn-alt { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.public-shell .welcome-btn-alt:hover { background: var(--accent-dim); color: var(--accent); }

/* --- Discord Linking Section --- */
.discord-section { background: var(--bg-panel);  border: none; border-radius: 8px; padding: 24px; margin: 24px 0; }
.discord-section .section-title { margin-top: 0; }
.discord-prompt { color: var(--text-secondary); margin-bottom: 16px; }
.discord-link-btn { font-family: var(--font-display); display: inline-block; background: transparent; color: #8b9bf7; border: 1px solid rgba(88, 101, 242, 0.3); padding: 10px 24px; border-radius: 4px; font-weight: 600; text-decoration: none; transition: all 0.15s; text-transform: uppercase; letter-spacing: 0.5px; }
.discord-link-btn:hover { background: rgba(88, 101, 242, 0.1); border-color: #5865F2; }
.discord-guide-link { display: inline-block; margin-left: 16px; color: var(--text-tertiary); text-decoration: underline; font-size: 13px; }
.discord-guide-link:hover { color: var(--text-secondary); }
.discord-linked-badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(88, 101, 242, 0.08); border: 1px solid rgba(88, 101, 242, 0.2); color: #8b9bf7; padding: 8px 16px; border-radius: 4px; font-size: 14px; }
.discord-icon { font-size: 16px; }
.discord-id { color: var(--text-tertiary); font-size: 12px; }
.discord-success { background: rgba(52, 211, 153, 0.06); border: 1px solid rgba(52, 211, 153, 0.15); color: var(--success); padding: 10px 16px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; }
.discord-error { background: rgba(248, 113, 113, 0.06); border: 1px solid rgba(248, 113, 113, 0.15); color: var(--danger); padding: 10px 16px; border-radius: 4px; margin-bottom: 16px; font-size: 14px; }

/* --- Link Guide Page --- */
.link-intro { color: var(--text-secondary); margin-bottom: 24px; font-size: 15px; }
.link-methods { display: flex; flex-direction: column; gap: 16px; }
.link-method-card { background: var(--bg-panel);  border: none; border-radius: 8px; padding: 24px; }
.link-method-card h3 { font-family: var(--font-display); color: var(--text-primary); font-size: 17px; margin-bottom: 16px; }
.link-recommended { font-family: var(--font-display); display: inline-block; background: var(--accent); color: #000; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: 8px; vertical-align: middle; text-transform: uppercase; }
.link-steps { color: var(--text-secondary); padding-left: 20px; margin-bottom: 12px; line-height: 1.8; }
.link-steps code { font-family: var(--font-mono); background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 3px; font-size: 13px; color: var(--accent); }
.link-step-action { color: var(--accent); text-decoration: underline; }
.link-step-action:hover { color: var(--accent-hover); }
.link-note { color: var(--text-tertiary); font-size: 13px; font-style: italic; }

/* Wave 5 sub-theme 5.7 (2026-05-06) — colored "pending publication"
   indicator banner on Privacy / Terms when the active legal text is
   still the placeholder seed. Amber-warning palette so it reads as
   "this is a known incomplete state" not "scary error". */
.legal-placeholder-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1.25rem;
    padding: 12px 16px;
    border-radius: 6px;
    background: rgba(255, 179, 71, 0.08);
    border: 1px solid rgba(255, 179, 71, 0.3);
    color: var(--warning);
    font-size: var(--text-sm);
}
.legal-placeholder-icon {
    font-size: 18px;
    line-height: 1;
}
.legal-placeholder-text {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.3px;
}

/* Wave 5 sub-theme 5.8 (2026-05-06) — Account & Privacy section on /me.
   Two-row card: a grid of helper links (Privacy / Terms / Notifications
   / Export) on top, then a danger row with the typed-confirm self-serve
   erasure trigger. */
.account-privacy-card {
    padding: 20px;
    margin-top: 12px;
}
.account-privacy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed var(--border);
    margin-bottom: 16px;
}
.account-privacy-link {
    color: var(--accent) !important;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    padding: 6px 0;
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s;
}
.account-privacy-link:hover { border-bottom-color: var(--accent); }
.account-privacy-danger {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.account-privacy-danger > div:first-child { color: var(--text-secondary); }
.account-privacy-danger strong {
    color: var(--danger);
    display: block;
    margin-bottom: 4px;
    font-family: var(--font-display);
    font-size: var(--text-md);
}
.account-privacy-help { color: var(--text-muted); font-size: var(--text-sm); line-height: 1.5; }
.account-privacy-confirm {
    background: rgba(255, 107, 107, 0.05);
    border: 1px solid rgba(255, 107, 107, 0.3);
    border-radius: 6px;
    padding: 14px 16px;
}
.account-privacy-confirm p { margin: 0 0 10px; color: var(--text-primary); font-size: var(--text-sm); }
.account-privacy-confirm strong { color: var(--accent); display: inline; margin: 0; font-size: inherit; }
.account-privacy-input {
    width: 100%;
    background: var(--bg-input);
    border: 1px solid var(--border-hover);
    border-radius: 4px;
    padding: 8px 12px;
    font-family: var(--font-mono, monospace);
    color: var(--text-primary);
    font-size: var(--text-sm);
    margin-bottom: 8px;
}
.account-privacy-buttons { display: flex; gap: 8px; justify-content: flex-end; }
.account-privacy-error {
    color: var(--danger);
    font-size: var(--text-sm);
    margin-bottom: 8px;
}
.account-privacy-success {
    background: rgba(138, 255, 138, 0.08);
    border: 1px solid rgba(138, 255, 138, 0.3);
    border-radius: 6px;
    padding: 12px 16px;
    color: var(--success);
    font-family: var(--font-display);
    font-weight: 600;
}
.btn.btn-danger {
    background: rgba(255, 107, 107, 0.12);
    border: 1px solid rgba(255, 107, 107, 0.4);
    color: var(--danger);
}
.btn.btn-danger:hover:not(:disabled) {
    background: rgba(255, 107, 107, 0.2);
    border-color: var(--danger);
}
.btn.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* Wave 5 sub-theme 5.10 (2026-05-06) — Help page Table of Contents.
   Sits below the page subtitle, above the first section. Compact list
   of #anchor jumps so readers can scan to a question without scrolling
   past every section. */
.help-toc {
    margin: 0 0 28px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    background: rgba(0, 224, 255, 0.04);
}
.help-toc-title {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 10px;
}
.help-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 4px 16px;
}
.help-toc li { padding: 0; }
.help-toc a {
    display: block;
    padding: 4px 0;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s, color 0.15s;
}
.help-toc a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
/* :target highlight on the landed-on section */
.guide-section:target {
    scroll-margin-top: 80px;
    background: rgba(0, 224, 255, 0.04);
    border-radius: 4px;
    padding: 8px;
    margin-left: -8px;
    margin-right: -8px;
}

/* --- How to Play / Guide (legacy base styles, still used by Privacy/Terms) --- */
.guide-page { max-width: 800px; margin: 0 auto; }
.guide-section { margin-bottom: 32px; }
.guide-section h2 { font-family: var(--font-display); font-size: 18px; margin-bottom: 12px; color: var(--text-primary); border-bottom: 1px solid var(--border); padding-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.guide-section ol, .guide-section ul { padding-left: 24px; line-height: 1.8; }
.guide-section li { margin-bottom: 4px; }
.guide-section code { font-family: var(--font-mono); background: rgba(0,0,0,0.3); padding: 2px 6px; border-radius: 4px; font-size: 13px; }
.guide-table { width: 100%; border-collapse: collapse; }
.guide-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.guide-table td:first-child { white-space: nowrap; width: 160px; font-family: var(--font-mono); color: var(--accent); }
.tier-list { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }

/* =============================================================
   HOW TO PLAY — redesigned card-based guide (replaces .guide-*)
   Each section is a glass-panel card with a display-font header,
   a muted subtitle, and numbered-step content. Mode-specific
   sections (Matchmaking / Time Attack / KOTH) get a left accent
   bar in their mode color so the page scans at a glance.
   ============================================================= */

.htp-hero {
    text-align: center;
    padding: 2.5rem 1rem 1.75rem;
    margin-bottom: 1.25rem;
}
.htp-title {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 0 40px rgba(0, 224, 255, 0.35);
    line-height: 1.1;
    margin: 0;
}
.htp-subtitle {
    color: var(--text-secondary);
    font-size: var(--text-md);
    margin: 0.6rem auto 0;
    max-width: 600px;
    letter-spacing: 0.3px;
}

/* Base section card — one per section */
.htp-card {
    max-width: var(--home-content-width);
    margin: 0 auto 1.5rem;
    padding: 1.75rem 2rem;
    background: var(--bg-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    display: block;
}

/* Mode-accent variants — left border bar in the mode color */
.htp-card-mm { border-left: 3px solid var(--accent); }
.htp-card-ta { border-left: 3px solid var(--accent-purple); }
.htp-card-koth { border-left: 3px solid var(--success); }

.htp-section-head {
    margin-bottom: 1.25rem;
}
.htp-section-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-primary);
    margin: 0 0 0.3rem;
    line-height: 1.2;
}
.htp-title-mm { color: var(--accent); }
.htp-title-ta { color: var(--accent-purple); }
.htp-title-koth { color: var(--success); }

.htp-section-sub {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin: 0;
    line-height: 1.5;
    max-width: 680px;
}
.htp-section-sub strong { color: var(--text-primary); font-weight: 600; }

.htp-section-body {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.7;
}
.htp-section-body p {
    margin: 0 0 0.9rem;
}
.htp-section-body p:last-child { margin-bottom: 0; }
.htp-section-body a {
    color: var(--accent);
    border-bottom: 1px dashed transparent;
    transition: border-color 0.12s;
}
.htp-section-body a:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--accent-hover);
}

/* Small inline mode pill for the "What is KOTT?" intro paragraph */
.htp-pill {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 3px;
    border: 1px solid;
    vertical-align: baseline;
}
.htp-pill-mm { color: var(--accent); border-color: var(--border-accent-strong); background: var(--accent-dim); }
.htp-pill-ta { color: var(--accent-purple); border-color: rgba(180, 156, 255, 0.35); background: rgba(180, 156, 255, 0.08); }
.htp-pill-koth { color: var(--success); border-color: rgba(138, 255, 138, 0.35); background: rgba(138, 255, 138, 0.08); }

/* Mode badge at the top of the section head — louder than .htp-pill */
.htp-mode-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 3px;
    margin-bottom: 0.6rem;
}
.htp-mode-badge.mm { background: var(--accent-dim); color: var(--accent); }
.htp-mode-badge.ta { background: rgba(180, 156, 255, 0.15); color: var(--accent-purple); }
.htp-mode-badge.koth { background: rgba(138, 255, 138, 0.12); color: var(--success); }
/* Wave 5 sub-theme 5.10 (2026-05-06) — htp-pill rendered as <a> anchors;
   the cursor + decoration cues need to read as clickable. Smooth-scroll
   hint via :target highlight on the section landed-on. */
a.htp-pill {
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s, transform 0.05s;
}
a.htp-pill:hover { transform: translateY(-1px); }
a.htp-pill-mm:hover { background: rgba(0, 224, 255, 0.18); color: var(--accent-hover); }
a.htp-pill-ta:hover { background: rgba(180, 156, 255, 0.16); }
a.htp-pill-koth:hover { background: rgba(138, 255, 138, 0.18); }
.htp-card:target {
    outline: 2px solid rgba(0, 224, 255, 0.3);
    outline-offset: 4px;
    scroll-margin-top: 80px;
}
/* Wave 5 sub-theme 5.2 — "← Start here" tag inside the recommended-mode
   badge (Time Attack). Pairs with .home-mode-card-recommended on Home. */
.htp-mode-recommended {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(180, 156, 255, 0.25);
    color: var(--accent-purple);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* Requirements list: numbered circle + name + detail (mirrors Home pattern) */
.htp-req-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.htp-req-list > li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 12px 14px;
    background: rgba(0, 224, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}
.htp-req-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--border-accent-strong);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
}
.htp-req-name {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-primary) !important;
    line-height: 1.2;
    margin-bottom: 2px;
    border-bottom: none !important;
}
.htp-req-name:hover { color: var(--accent) !important; }
.htp-req-detail {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.4;
}

/* Numbered step list — used for Getting Started + Matchmaking + KOTH */
.htp-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.htp-steps > li {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.htp-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--border-accent-strong);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    margin-top: 2px;
}
.htp-step-num.mm { background: var(--accent-dim); color: var(--accent); border-color: var(--border-accent-strong); }
.htp-step-num.koth { background: rgba(138, 255, 138, 0.12); color: var(--success); border-color: rgba(138, 255, 138, 0.4); }
.htp-step-num.ta { background: rgba(180, 156, 255, 0.12); color: var(--accent-purple); border-color: rgba(180, 156, 255, 0.4); }

.htp-step-body {
    flex: 1;
    min-width: 0;
}
.htp-step-body strong {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    margin-bottom: 3px;
}
.htp-step-body p {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.55;
    margin: 0;
}

/* Plain bullet list (Time Attack) */
.htp-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.htp-bullets > li {
    position: relative;
    padding: 10px 14px 10px 28px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    color: var(--text-secondary);
    line-height: 1.55;
}
.htp-bullets > li::before {
    content: "";
    position: absolute;
    left: 12px;
    top: 18px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-purple);
}

/* <kbd> styling — pill with 3D-ish shading */
.htp-section-body kbd,
.htp-key-combo kbd {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    min-width: 20px;
    text-align: center;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom-width: 2px;
    border-radius: 4px;
    line-height: 1.4;
    vertical-align: baseline;
}

/* <code> inline — softer chip */
.htp-section-body code,
.htp-cmd {
    font-family: var(--font-mono);
    font-size: 13px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--accent);
    padding: 2px 7px;
    border-radius: 3px;
    border: 1px solid rgba(0, 224, 255, 0.15);
}

/* Tier ladder — compact grid with range on the right */
.htp-tier-ladder {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
    margin-top: 1rem;
}
.htp-tier-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
}
.htp-tier-range {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}

/* Keybind rows — replaces .guide-table for keybinds */
.htp-keys {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.htp-key-row {
    display: grid;
    grid-template-columns: 160px 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}
.htp-key-combo {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.htp-key-or {
    color: var(--text-muted);
    margin: 0 2px;
}
.htp-key-action {
    color: var(--text-primary);
    font-size: var(--text-base);
}
.htp-key-mode {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Discord command rows */
.htp-cmds {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.htp-cmd-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    align-items: center;
    gap: 1rem;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}
.htp-cmd-desc {
    color: var(--text-secondary);
    font-size: var(--text-base);
}

/* Responsive */
@media (max-width: 720px) {
    .htp-title { font-size: 2rem; letter-spacing: 2px; }
    .htp-card { padding: 1.25rem 1rem; }
    .htp-req-list { grid-template-columns: 1fr; }
    .htp-key-row,
    .htp-cmd-row { grid-template-columns: 1fr; gap: 4px; }
    .htp-key-mode { grid-column: 1; text-align: left; }
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .topnav-links { display: none; }
    .topnav-search { display: none; }
    .topnav-toggle { display: block; margin-left: auto; }
    .topnav-mobile { display: flex; flex-direction: column; padding: 8px 12px; border-top: 1px solid var(--border); }
    .topnav-mobile a { font-family: var(--font-display); color: var(--text-tertiary); padding: 12px 16px; font-size: 14px; font-weight: 600; border-radius: 4px; min-height: 44px; display: flex; align-items: center; text-transform: uppercase; letter-spacing: 0.5px; }
    .topnav-mobile a:hover { background: var(--bg-hover); color: var(--text-primary); }
    .topnav-mobile a.active { color: var(--accent); }

    .btn { min-height: 44px; min-width: 44px; padding: 12px 16px; font-size: 14px; }
    .auth-btn { min-height: 44px; padding: 10px 16px; }

    .public-content { padding: 16px 12px; }
    .profile-header { flex-direction: column; text-align: center; padding: 20px; }
    .profile-meta { justify-content: center; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .server-grid { grid-template-columns: 1fr; }
    .pub-table { font-size: 12px; }
    .pub-table th, .pub-table td { padding: 8px 10px; }
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .leaderboard-podium { flex-direction: column; align-items: center; }
    .podium-card { flex: 0 0 auto; width: 100%; max-width: 300px; }
    .podium-1, .podium-2, .podium-3 { order: unset !important; }
    .topnav-auth { display: none; }
    .queue-join-buttons { flex-direction: column; }
    .queue-status-bar { flex-direction: column; }
    .queue-match-players { flex-direction: column; gap: 6px; }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 12px 14px; }
    .stat-card .stat-value { font-size: 18px; }
    .pub-table .col-hide-xs { display: none; }
    .track-selector { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .queue-searching-anim .dot { animation: none; opacity: 1; }
    .spinner, .pub-loading .spinner { animation: none; }
    .refresh-dot { animation: none; }
}

/* --- Kill all panel borders (override) --- */
.podium-card, .stat-card, .server-card, .queue-stat, .queue-card,
.profile-header, .profile-avatar, .welcome-card, .discord-section,
.link-method-card, .queue-result-card, .pub-empty { border: none !important; }

/* --- Match Detail & Records --- */
.breadcrumb-link { color: var(--text-muted); text-decoration: none; margin-right: 12px; font-size: 0.85rem; }
.breadcrumb-link:hover { color: var(--accent); }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; }
.stat-value-sm { font-size: 0.85rem; }

.clickable-row { cursor: pointer; transition: background 0.15s; }
.clickable-row:hover { background: rgba(0, 224, 255, 0.04); }

/* Wave 6 a11y (2026-05-06) — round-header is now a <button>; reset native
   button chrome (border, default text alignment, font inheritance) so the
   visual treatment is unchanged from the prior <div>. width:100% keeps the
   row spanning the full container the way the div did. */
.round-header { padding: 10px 16px; margin: 16px 0 8px; background: var(--bg-elevated); border: none; color: inherit; font-family: inherit; font-size: inherit; text-align: left; width: 100%; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 10px; font-weight: 600; }
.round-header:hover { background: rgba(12, 18, 26, 0.9); }
.round-toggle { font-size: 0.7rem; color: var(--accent); }
.round-winner { color: var(--accent); font-weight: 600; }

.events-section { margin: 16px 0; }
.events-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-weight: 600; }
.event-filters { display: flex; gap: 4px; }

.events-timeline { background: var(--bg-elevated); border-radius: 4px; padding: 8px; max-height: 400px; overflow-y: auto; }
.event-row { display: flex; align-items: center; gap: 10px; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 0.82rem; }
.event-row:last-child { border-bottom: none; }
.event-time { min-width: 52px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.event-badge { padding: 1px 6px; border-radius: 3px; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.badge-checkpoint { background: rgba(0, 224, 255, 0.12); color: var(--accent); }
.badge-collision { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.badge-offtrack { background: rgba(245, 158, 11, 0.15); color: #f59e0b; }
.badge-lead { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.event-player { color: var(--text-primary); font-weight: 500; }
.event-detail { color: var(--text-muted); }

.record-time { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--accent); }

/* ── Recent Laps table styling (used on MyProfile + PlayerProfile) ── */
.lap-pb-badge {
    display: inline-block; margin-left: 6px; padding: 1px 6px;
    font-family: var(--font-display); font-size: 10px; font-weight: 700;
    letter-spacing: 0.5px; text-transform: uppercase;
    color: var(--tier-champion); border: 1px solid var(--tier-champion);
    border-radius: 3px; vertical-align: middle;
}
.lap-invalid {
    color: var(--text-muted); text-decoration: line-through;
    font-variant-numeric: tabular-nums; font-weight: 500;
}
.lap-detail-link {
    font-size: 12px; color: var(--accent); text-decoration: none;
    padding: 2px 8px; border: 1px solid rgba(0, 224, 255, 0.3);
    border-radius: 3px; transition: background 120ms;
}
.lap-detail-link:hover { background: rgba(0, 224, 255, 0.1); }

/* ── Rating History Chart ── */
.rating-chart {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 80px;
    background: var(--bg-elevated);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
}
.rating-bar {
    flex: 1;
    min-width: 3px;
    max-width: 12px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}
.rating-bar:hover { opacity: 1; }
.rating-bar:last-child { background: var(--accent-hover); opacity: 1; }

.rating-chart-meta {
    display: flex;
    gap: 20px;
    font-size: 12px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.rating-chart-meta strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rating-delta.positive { color: var(--success); }
.rating-delta.negative { color: var(--danger); }

/* ── Head-to-Head ── */
.h2h-section {
    background: var(--bg-panel);
    border-radius: 8px;
    padding: 16px 18px;
    margin-bottom: 24px;
}
.h2h-title {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.h2h-record {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}
.h2h-record .h2h-wins { color: var(--success); }
.h2h-record .h2h-losses { color: var(--danger); }
.h2h-bar {
    display: flex;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--bg-elevated);
}
.h2h-bar-win {
    background: var(--success);
    transition: width 0.3s ease;
}
.h2h-bar-loss {
    background: var(--danger);
    transition: width 0.3s ease;
}

/* ── Car Stats ── */
.car-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px;
    margin-bottom: 24px;
}
.car-stat-card {
    background: var(--bg-panel);
    border-radius: 8px;
    padding: 14px 16px;
}
.car-stat-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.car-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 3px;
}
.car-stat-row strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ── Live Match Widget ── */
.live-widget {
    background: var(--bg-panel);
    border: 1px solid var(--border-accent);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
}
.live-widget-idle {
    text-align: center;
    color: var(--text-muted);
    font-size: 13px;
    padding: 12px;
}
.live-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.live-elapsed { margin-left: auto; }
.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ef4444;
    font-weight: 700;
}
.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    animation: live-pulse 1.5s ease-in-out infinite;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.live-round {
    color: var(--accent);
    font-weight: 600;
}
.live-elapsed {
    font-variant-numeric: tabular-nums;
}
.live-players {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.live-player {
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-player-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.live-player-dot.king {
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
}
.live-player-dot.challenger {
    background: var(--danger);
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.3);
}
.live-player-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}
.live-player.right { text-align: right; }
.live-vs {
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.live-progress {
    position: relative;
    height: 16px;
    background: var(--bg-elevated);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}
.live-player-marker {
    position: absolute;
    top: 1px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transition: left 0.8s ease;
}
.live-marker-king {
    background: var(--accent);
    box-shadow: 0 0 6px var(--accent-glow);
}
.live-marker-challenger {
    background: var(--danger);
    box-shadow: 0 0 6px rgba(248, 113, 113, 0.3);
}
.live-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    font-size: 13px;
    color: var(--text-secondary);
}
.live-state-label {
    font-size: 13px;
}
.live-gap {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.live-state-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(255,255,255,0.06);
    color: var(--text-muted);
}
.live-state-badge.waiting { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.live-state-badge.warmup { background: rgba(251, 191, 36, 0.1); color: #fbbf24; }
.live-state-badge.countdown { background: rgba(0, 224, 255, 0.1); color: var(--accent); }
.live-state-badge.racing { background: rgba(52, 211, 153, 0.1); color: #34d399; }
.live-state-badge.round_result { background: rgba(0, 224, 255, 0.1); color: var(--accent); }
.live-state-badge.finished { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.live-separation {
    margin-top: 2px;
}
.live-sep-header {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 3px;
}
.live-sep-label { text-transform: uppercase; letter-spacing: 0.5px; }
.live-sep-value { font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.live-sep-value.warning { color: #fbbf24; }
.live-sep-value.danger { color: #ef4444; }
.live-sep-bar {
    height: 4px;
    background: var(--bg-elevated);
    border-radius: 2px;
    overflow: hidden;
}
.live-sep-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.8s ease;
}
.live-sep-fill.warning { background: #fbbf24; }
.live-sep-fill.danger { background: #ef4444; animation: sep-pulse 0.8s ease-in-out infinite; }
@keyframes sep-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
.live-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

/* ── Page Controls (pagination) ── */
.page-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-secondary);
}
.page-controls .btn { min-width: 80px; }

@media (max-width: 480px) {
    .car-stats-grid { grid-template-columns: 1fr; }
    .live-player-name { font-size: 14px; }
    .live-gap { font-size: 15px; }
    .h2h-record { font-size: 15px; }
    .rating-chart { height: 60px; }
}

/* ===== HOME PAGE ===== */
.home-hero {
    text-align: center;
    padding: 2.25rem 1rem 1.25rem;
    margin-bottom: 1rem;
}
.home-title {
    font-family: var(--font-display);
    font-size: var(--text-hero);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 0 40px rgba(0, 224, 255, 0.35);
    line-height: 1.1;
}
.home-tagline {
    font-family: var(--font-body);
    color: var(--text-secondary);
    font-size: 1rem;
    margin-top: 0.6rem;
    letter-spacing: 0.5px;
}
/* Mode chips under the hero tagline — one word each, color-coded per mode */
.home-mode-chips {
    display: inline-flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0.75rem auto 1.75rem;
}
.home-mode-chip {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 5px 13px;
    border-radius: 3px;
    border: 1px solid;
}
.home-mode-chip-mm { color: var(--accent); border-color: var(--border-accent-strong); background: var(--accent-dim); }
.home-mode-chip-ta { color: var(--accent-purple); border-color: rgba(180, 156, 255, 0.35); background: rgba(180, 156, 255, 0.08); }
.home-mode-chip-koth { color: var(--success); border-color: rgba(138, 255, 138, 0.35); background: rgba(138, 255, 138, 0.08); }

/* Hero actions — dominant JOIN QUEUE + quiet secondary link */
.home-hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 0.25rem;
}
.home-hero-cta {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 14px 38px;
    border-radius: 4px;
    background: var(--accent);
    color: #000 !important;
    text-decoration: none;
    box-shadow: 0 0 24px rgba(0, 224, 255, 0.25);
    transition: all 0.18s ease;
}
.home-hero-cta:hover {
    background: var(--accent-hover);
    box-shadow: 0 0 40px rgba(0, 224, 255, 0.5);
    transform: translateY(-1px);
}
.home-hero-cta:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 3px; }
.home-hero-link {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-tertiary) !important;
    text-decoration: none;
    transition: color 0.15s;
}
.home-hero-link:hover { color: var(--accent) !important; }

.home-track-chip, .queue-track-chip {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 12px;
    color: rgba(255,255,255,0.7);
}
.home-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    max-width: var(--home-content-width);
    margin: 0 auto 1.5rem;
    padding: 0 1rem;
}
.home-stat {
    text-align: center;
    padding: 1.5rem 1rem;
}
.home-stat-value {
    display: block;
    font-family: var(--font-display);
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.home-stat-label {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
}
.home-section-title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    padding: 0 1rem;
    max-width: var(--home-content-width);
    margin-left: auto;
    margin-right: auto;
}
.home-section-header { display: flex; align-items: baseline; justify-content: space-between; max-width: var(--home-content-width); margin: 0 auto; padding: 0 1rem; margin-bottom: 0.75rem; }
.home-section-header .home-section-title { margin-bottom: 0; padding: 0; }
.home-view-all { font-size: 12px; color: var(--accent); text-decoration: none; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.5px; }
.home-view-all:hover { text-decoration: underline; }
.home-recent {
    max-width: var(--home-content-width);
    margin: 0 auto 1.5rem;
}
.home-recent-list { display: flex; flex-direction: column; gap: 0.5rem; padding: 0 1rem; }
.home-recent-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}
.home-recent-item:hover { background: var(--bg-hover); }
.home-recent-players { display: flex; align-items: center; gap: 0.5rem; }
.home-winner { color: var(--accent); font-weight: 600; }
.home-vs { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; }
.home-recent-meta { display: flex; gap: 0.75rem; font-size: var(--text-sm); color: var(--text-tertiary); }
/* ===== HOME: REQUIREMENTS PANEL ("Before you play") ===== */
.home-requirements {
    max-width: var(--home-content-width);
    margin: 0 auto 1.5rem;
    padding: 1.5rem 1.75rem 1.25rem;
    background: var(--bg-panel);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    text-align: center;
}
.home-req-header {
    margin-bottom: 1.25rem;
}
.home-req-title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-primary);
    margin: 0 0 0.35rem;
}
.home-req-sub {
    color: var(--text-secondary);
    font-size: var(--text-base);
    margin: 0;
    line-height: 1.5;
}
.home-req-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.home-req-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: 100%;
    padding: 14px 14px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    background: rgba(0, 224, 255, 0.02);
    color: inherit !important;
    text-decoration: none;
    transition: all 0.15s ease;
    text-align: left;
}
.home-req-chip:hover {
    border-color: var(--border-accent-strong);
    background: var(--accent-dim);
    transform: translateY(-1px);
}
.home-req-chip-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--border-accent-strong);
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
}
.home-req-chip-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.home-req-chip-title {
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--text-primary);
    line-height: 1.2;
}
.home-req-chip-detail {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: 3px;
    line-height: 1.3;
}
.home-req-details {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent) !important;
    text-decoration: none;
    letter-spacing: 0.5px;
    padding: 4px 0;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s;
}
.home-req-details:hover {
    color: var(--accent-hover) !important;
    border-bottom-color: var(--accent-hover);
}
/* Wave 5 sub-themes 5.1 + 5.9 (2026-05-06) — paired footer links on the
   Requirements section: full setup walkthrough on the left, "Already set
   up?" jump-to-modes anchor on the right. Wraps on narrow screens so the
   "skip" link doesn't push the walkthrough off-screen. */
.home-req-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.home-req-skip {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary) !important;
    text-decoration: none;
    letter-spacing: 0.5px;
    padding: 4px 0;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s, color 0.15s;
}
.home-req-skip:hover {
    color: var(--accent-hover) !important;
    border-bottom-color: var(--accent-hover);
}

/* Wave 5 sub-theme 5.1 (2026-05-06) — anonymous-visitor login CTA in the
   hero. Visible only when AuthState resolves to !IsLoggedIn. Sits between
   the mode chips and the Requirements panel so it dominates the viewport
   above the fold for first-time visitors. */
.home-anon-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 1.25rem auto 0;
    max-width: 540px;
    text-align: center;
}
.home-anon-cta-btn {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #000 !important;
    background: var(--accent);
    padding: 14px 28px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.15s, transform 0.05s;
}
.home-anon-cta-btn:hover {
    background: var(--accent-hover);
    color: #000 !important;
}
.home-anon-cta-btn:active { transform: translateY(1px); }
.home-anon-cta-sub {
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Wave 5 sub-theme 5.2 (2026-05-06) — recommended-mode marker (TA card).
   Pairs with .home-mode-card-featured to lift the canonical first-mode
   pick visually. */
.home-mode-card-recommended {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(180, 156, 255, 0.18);
    color: var(--accent-purple);
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: middle;
}
.home-mode-card-featured {
    border-color: rgba(180, 156, 255, 0.35) !important;
    box-shadow: 0 0 0 1px rgba(180, 156, 255, 0.15);
}

/* ===== HOME: STATUS BAND (one-row season/prelaunch strip) ===== */
.home-status-band {
    max-width: var(--home-content-width);
    margin: 0 auto 1.5rem;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--bg-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    flex-wrap: wrap;
}
.home-status-active { border-color: var(--border-accent); }
.home-status-prelaunch { border-color: rgba(255, 179, 71, 0.25); }
.home-status-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
    flex: 1;
}
.home-status-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    padding: 3px 10px;
    border-radius: 3px;
    background: var(--accent-dim);
    border: 1px solid var(--border-accent-strong);
    flex-shrink: 0;
}
.home-status-prelaunch .home-status-label {
    color: var(--warning);
    background: rgba(255, 179, 71, 0.1);
    border-color: rgba(255, 179, 71, 0.35);
}
.home-status-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.home-status-text {
    color: var(--text-secondary);
    font-size: 13px;
}
.home-status-tracks {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.home-status-cta {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent) !important;
    text-decoration: none;
    padding: 6px 14px;
    border: 1px solid var(--border-accent-strong);
    border-radius: 4px;
    transition: all 0.15s;
    flex-shrink: 0;
}
.home-status-cta:hover {
    background: var(--accent-dim);
    border-color: var(--accent);
}
@media (max-width: 720px) {
    .home-req-list { grid-template-columns: repeat(2, 1fr); }
    .home-status-band { flex-direction: column; align-items: flex-start; }
    .home-status-cta { align-self: stretch; text-align: center; }
}

.queue-track-pool {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

/* ===== LEADERBOARD TABS ===== */
.lb-tab-bar { display: flex; gap: 2px; margin-bottom: 20px; border-bottom: 1px solid var(--border-hover); padding-bottom: 0; }
.lb-tab-btn { font-family: var(--font-display); background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--text-tertiary); padding: 10px 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.12s ease; text-transform: uppercase; letter-spacing: 0.5px; }
.lb-tab-btn:hover { color: var(--text-primary); }
.lb-tab-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.lb-tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ===== RECORD CATEGORY CHIPS ===== */
.record-category-bar { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.record-cat-btn { font-family: var(--font-display); background: transparent; border: 1px solid var(--border); color: var(--text-tertiary); padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 600; cursor: pointer; transition: all 0.12s ease; text-transform: uppercase; letter-spacing: 0.3px; }
.record-cat-btn:hover { border-color: var(--border-hover); color: var(--text-primary); }
.record-cat-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.record-cat-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* ===== LAP LEADERBOARD FILTERS (Phase C.2) ===== */
.lap-filter-bar { display: flex; gap: 24px; align-items: center; margin-bottom: 18px; padding: 12px 16px; background: var(--bg-panel); border-radius: 6px; flex-wrap: wrap; }
.lap-filter-group { display: flex; align-items: center; gap: 6px; }
.lap-filter-group label { font-family: var(--font-display); font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-right: 4px; }
.lap-chip { font-family: var(--font-display); background: transparent; border: 1px solid var(--border); color: var(--text-tertiary); padding: 4px 12px; border-radius: 16px; font-size: 11px; font-weight: 600; cursor: pointer; transition: all 0.12s ease; }
.lap-chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.lap-chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.lap-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); cursor: pointer; text-transform: none; letter-spacing: normal; font-weight: 500; }
.lap-toggle input { accent-color: var(--accent); }
.lap-split { font-family: var(--font-mono, monospace); color: var(--text-secondary); font-size: 12px; }
.lap-source-badge { font-family: var(--font-display); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 3px; text-transform: uppercase; letter-spacing: 0.5px; }
.lap-source-race { background: rgba(0, 224, 255, 0.12); color: #00e0ff; border: 1px solid rgba(0, 224, 255, 0.3); }
.lap-source-time_attack { background: rgba(138, 111, 255, 0.12); color: #b49cff; border: 1px solid rgba(138, 111, 255, 0.3); }
/* Legacy aliases — matched by rows written before migration 35 renamed practice_timed→time_attack */
.lap-source-practice_timed { background: rgba(138, 111, 255, 0.12); color: #b49cff; border: 1px solid rgba(138, 111, 255, 0.3); }
.lap-source-practice_free { background: rgba(150, 150, 150, 0.1); color: #888; border: 1px solid rgba(150, 150, 150, 0.25); }

@media (max-width: 640px) {
    .lap-filter-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
    .col-hide-sm { display: none; }
}

/* ===== NOTIFICATION SETTINGS (moved from inline <style>) ===== */
.notif-card { background: var(--bg-panel); border: 1px solid rgba(255,255,255,0.06); border-radius: 12px; padding: 1.5rem 2rem; max-width: 600px; }
.notif-description { color: var(--text-secondary); margin-bottom: 1.5rem; }
.notif-status { padding: 0.5rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: var(--text-sm, 12px); }
.notif-success { background: var(--accent-dim); color: var(--accent); }
.notif-error { background: var(--danger-dim); color: var(--danger); border: 1px solid var(--danger-border); }
.notif-toggles { display: flex; flex-direction: column; gap: 1rem; }
.notif-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 8px; }
.notif-toggle-info { flex: 1; margin-right: 1rem; }
.notif-toggle-label { font-weight: 600; color: var(--text-primary); }
.notif-toggle-desc { font-size: var(--text-sm, 12px); color: var(--text-muted); margin-top: 2px; }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.1); border-radius: 24px; transition: background 0.2s; }
.toggle-slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s; }
.toggle-switch input:checked + .toggle-slider { background: var(--accent); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* ===== TIME ATTACK DISCOVERY PAGE (Phase D.2) ===== */
.ta-server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 20px; }
.ta-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 16px; display: flex; flex-direction: column; gap: 12px; transition: border-color 0.2s; }
.ta-card:hover { border-color: var(--border-hover); }
.ta-card.online { border-color: rgba(138, 111, 255, 0.35); }
.ta-card.offline { opacity: 0.5; }
.ta-card-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ta-card-track { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--text-primary); }
.ta-card-players { font-size: 11px; color: #b49cff; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.ta-card-body { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ta-card-name { color: var(--text-secondary); font-size: 12px; }
.ta-card-top { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.ta-card-top .label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.ta-card-top-time { color: #b49cff; font-family: var(--font-mono, monospace); font-size: 18px; }
.ta-card-top-holder { color: var(--text-tertiary); font-size: 11px; }
.ta-card-top.muted { color: var(--text-muted); font-style: italic; font-size: 12px; }
.ta-card-connect { width: 100%; text-align: center; }
.ta-card-deltas { font-size: 13px; color: #ccc; display: flex; gap: 12px; align-items: baseline; margin-top: 2px; flex-wrap: wrap; }
.ta-delta-behind { color: #ff6b6b; }
.ta-delta-ahead { color: #8aff8a; }
.ta-hint { color: #888; font-style: italic; font-size: 12px; }

/* ===== SEASON TAB ===== */
.season-selector { margin-bottom: 16px; }
.season-selector select { background: var(--bg-input); border: 1px solid var(--border-hover); color: var(--text-primary); padding: 8px 14px; border-radius: 4px; font-family: var(--font-display); font-size: 13px; cursor: pointer; min-width: 200px; }
.season-selector select:focus { outline: none; border-color: var(--border-accent-strong); }
.season-banner { background: var(--bg-panel); border-radius: 8px; padding: 16px 20px; margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.season-banner-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; color: var(--accent); }
.season-banner-meta { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); flex-wrap: wrap; }
.season-banner-meta span { display: inline-flex; align-items: center; gap: 4px; }
.season-banner-meta .label { color: var(--text-muted); }

/* ===== HOME HIGHLIGHT RECORDS ===== */
.home-highlights-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: var(--home-content-width); margin: 0 auto 1.5rem; padding: 0 1rem; }
.home-highlight { text-align: center; padding: 1rem; text-decoration: none; color: inherit; transition: background 0.15s; border-radius: 8px; }
.home-highlight:hover { background: var(--bg-hover); }
.home-highlight-value { display: block; font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--accent); margin-bottom: 2px; }
.home-highlight-player { display: block; font-size: 13px; color: var(--text-primary); font-weight: 500; }
.home-highlight-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-tertiary); margin-top: 4px; display: block; }
.home-highlight-detail { font-size: var(--text-xs); color: var(--text-secondary); }

@media (max-width: 768px) {
    .home-title { font-size: 2rem; letter-spacing: 2px; }
    .home-stats-row { grid-template-columns: 1fr; max-width: 300px; }
    .home-highlights-row { grid-template-columns: 1fr; max-width: 300px; }
    .home-hero-actions { flex-direction: column; gap: 0.9rem; }
    .home-hero-cta { width: 100%; max-width: 260px; text-align: center; }
    .replay-controls { flex-wrap: wrap; }
    .replay-header { flex-direction: column; gap: 0.5rem; text-align: center; }
    .replay-container { padding: 0.75rem; }
    .replay-viewport { padding: 0.5rem; }
    .replay-btn { min-width: 60px; padding: 6px 14px; }
    .lb-tab-btn { padding: 8px 14px; font-size: 12px; }
    .record-category-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    .season-banner { flex-direction: column; gap: 8px; }
}
@media (max-width: 480px) {
    .home-stat-value { font-size: 1.75rem; }
    .replay-scrubber { min-width: 100px; }
    .replay-speed { font-size: 11px; }
    .lb-tab-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .match-filters .filter-row { flex-direction: column; }
    .filter-toggle { width: 100%; }
    .filter-search { width: 100%; }
}

/* ===== MATCH FILTERS ===== */
.match-filters { margin-bottom: 16px; padding: 12px 16px; }
.filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.filter-select { background: var(--bg-input); border: 1px solid var(--border-hover); color: var(--text-primary); padding: 6px 12px; border-radius: 4px; font-family: var(--font-display); font-size: 12px; cursor: pointer; min-width: 140px; }
.filter-select:focus { outline: none; border-color: var(--border-accent-strong); }
.filter-toggle { display: flex; gap: 4px; }
.filter-search { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-primary); padding: 6px 12px; border-radius: 4px; font-family: var(--font-body); font-size: 13px; min-width: 160px; }
.filter-search::placeholder { color: var(--text-muted); }
.filter-search:focus { outline: none; border-color: var(--border-accent-strong); }
.filter-search-wrap { position: relative; display: inline-block; }
.filter-search-spinner { position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: filter-spin 0.6s linear infinite; pointer-events: none; }
@keyframes filter-spin { to { transform: rotate(360deg); } }

/* ===== STATUS PAGE ===== */
.status-overall { display: flex; align-items: center; gap: 16px; padding: 20px 24px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); margin-bottom: 1.5rem; }
.status-overall-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.status-overall.status-ok .status-overall-dot { background: var(--success); box-shadow: 0 0 10px var(--success); }
.status-overall.status-warn .status-overall-dot { background: var(--warning); box-shadow: 0 0 10px var(--warning); }
.status-overall.status-error .status-overall-dot { background: var(--danger); box-shadow: 0 0 10px var(--danger); }
.status-overall-label { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--text-primary); }
.status-overall-detail { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 1.5rem; }
.status-card { padding: 16px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--text-muted); }
.status-card.status-ok { border-left-color: var(--success); }
.status-card.status-warn { border-left-color: var(--warning); }
.status-card.status-error { border-left-color: var(--danger); }
.status-card-label { font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); }
.status-card-value { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-primary); margin-top: 4px; }
.status-card-sub { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; line-height: 1.5; }
.status-card-sub a { color: var(--accent); }

.status-incidents { display: flex; flex-direction: column; gap: 10px; }
.status-incident { padding: 12px 16px; border-radius: 6px; background: var(--bg-card); border-left: 3px solid var(--text-muted); font-size: 13px; }
.status-incident.incident-warning { border-left-color: var(--warning); }
.status-incident.incident-maintenance { border-left-color: var(--danger); }
.status-incident strong { font-family: var(--font-display); color: var(--text-primary); }
.status-incident-meta { font-size: 11px; color: var(--text-muted); margin-top: 4px; }

.status-footer-note { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.status-footer-note a { color: var(--accent); }

/* ===== STATUS PAGE — Phase 7 Task 7.37 ===== */
/* Top banner rendered by bannerLevel ok|warn|error. Replaces the older
   .status-overall class shown above; kept both for back-compat. */
/* Wave 5 sub-themes 5.5 + 5.8 (2026-05-06) — banner is now an <a>;
   text-decoration suppressed + transition on hover for the click cue.
   Uptime number gets prominence via .status-banner-uptime (was hidden
   in the 90-day grid below). */
.status-banner { display: flex; align-items: center; gap: 16px; padding: 22px 26px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); margin: 12px 0 22px; text-decoration: none !important; color: var(--text-primary); transition: border-color 0.15s, transform 0.05s; }
a.status-banner:hover { border-color: var(--border-hover); transform: translateY(-1px); }
.status-banner-uptime { color: var(--text-secondary); font-family: var(--font-display); font-size: 13px; }
.status-banner-uptime strong { color: var(--text-primary); font-weight: 700; }
.status-banner-refresh { color: var(--text-muted); margin-left: 4px; }
html { scroll-behavior: smooth; }
.status-banner-dot { width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; }
.status-banner.status-banner-ok .status-banner-dot { background: var(--success); box-shadow: 0 0 12px var(--success); }
.status-banner.status-banner-warn .status-banner-dot { background: var(--warning); box-shadow: 0 0 12px var(--warning); }
.status-banner.status-banner-error .status-banner-dot { background: var(--danger); box-shadow: 0 0 12px var(--danger); }
.status-banner.status-banner-ok { border-left: 5px solid var(--success); }
.status-banner.status-banner-warn { border-left: 5px solid var(--warning); }
.status-banner.status-banner-error { border-left: 5px solid var(--danger); }
.status-banner-label { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--text-primary); }
.status-banner-detail { font-size: 12px; color: var(--text-muted); margin-top: 3px; }

.status-component-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.status-component { padding: 14px 16px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--text-muted); }
.status-component.status-ok { border-left-color: var(--success); }
.status-component.status-warn { border-left-color: var(--warning); }
.status-component.status-error { border-left-color: var(--danger); }
.status-component-name { font-family: var(--font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-tertiary); }
.status-component-state { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-top: 4px; color: var(--text-primary); }
.status-component-detail { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

.status-sev-pill { font-family: var(--font-display); font-size: 10px; letter-spacing: 0.5px; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; }
.status-sev-minor { background: rgba(255,179,71,0.15); color: var(--warning); }
.status-sev-major { background: rgba(255,107,107,0.18); color: var(--danger); }
.status-sev-critical { background: rgba(255,107,107,0.28); color: var(--danger); }
.status-sev-maintenance { background: rgba(180,156,255,0.18); color: #b49cff; }

.status-incident-list { display: flex; flex-direction: column; gap: 10px; }
.status-incident-card { padding: 14px 18px; border-radius: 8px; background: var(--bg-card); border: 1px solid var(--border); border-left: 4px solid var(--text-muted); }
.status-incident-card.incident-minor { border-left-color: var(--warning); }
.status-incident-card.incident-major, .status-incident-card.incident-critical { border-left-color: var(--danger); }
.status-incident-card.incident-maintenance { border-left-color: #b49cff; }
.status-incident-card-head { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.status-incident-card-head strong { font-family: var(--font-display); font-size: 15px; color: var(--text-primary); }
.status-incident-summary { margin-top: 6px; font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.status-incident-update { margin-top: 8px; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,0.03); font-size: 13px; }
.status-incident-update-meta { font-size: 11px; color: var(--text-muted); display: block; margin-bottom: 4px; }

.status-uptime-list { display: flex; flex-direction: column; gap: 12px; }
.status-uptime-row { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; }
.status-uptime-label { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-size: 13px; color: var(--text-primary); margin-bottom: 8px; }
.status-uptime-pct { font-size: 12px; color: var(--text-muted); letter-spacing: 0.3px; }
.status-uptime-bar { display: flex; gap: 2px; align-items: stretch; height: 22px; }
.status-uptime-tick { flex: 1; min-width: 3px; border-radius: 1px; background: var(--success); opacity: 0.5; }
.status-uptime-tick.status-uptime-ok { background: var(--success); opacity: 0.55; }
.status-uptime-tick.status-uptime-deg { background: var(--warning); opacity: 0.9; }

.status-history-wrap { overflow-x: auto; }
.status-history { width: 100%; border-collapse: collapse; font-size: 13px; }
.status-history th, .status-history td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.status-history th { color: var(--text-tertiary); font-family: var(--font-display); font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; }

@media (max-width: 640px) {
    .status-banner { flex-direction: column; align-items: flex-start; text-align: left; }
    .status-uptime-tick { min-width: 2px; }
}

/* ===== LOADING SKELETON ===== */
/* Reusable skeleton parts. .skeleton-block stays visible; child .skel-* elements shimmer. */
.skeleton-block { pointer-events: none; }
.skel-line { display: inline-block; height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--bg-hover) 0%, rgba(255,255,255,0.10) 50%, var(--bg-hover) 100%); background-size: 200% 100%; animation: skel-shimmer 1.2s ease-in-out infinite; }
.skel-line-lg { height: 22px; }
.skel-circle { background: linear-gradient(90deg, var(--bg-hover) 0%, rgba(255,255,255,0.10) 50%, var(--bg-hover) 100%); background-size: 200% 100%; animation: skel-shimmer 1.2s ease-in-out infinite; border-radius: 50%; width: 84px; height: 84px; }
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ===== MATCH DETAIL DISPUTE FORM ===== */
.dispute-section { margin-bottom: 1rem; }
.btn-dispute { background: rgba(251,191,36,0.15); color: var(--warning); border: 1px solid rgba(251,191,36,0.3); padding: 6px 16px; border-radius: 6px; cursor: pointer; font-size: 0.85rem; }
.btn-dispute:hover { background: rgba(251,191,36,0.25); }
.dispute-badge { display: inline-block; padding: 4px 12px; border-radius: 6px; font-size: 0.8rem; font-weight: 600; }
.dispute-badge-open { background: rgba(251,191,36,0.15); color: var(--warning); }
.dispute-badge-accepted { background: rgba(52,211,153,0.15); color: var(--success); }
.dispute-badge-rejected { background: rgba(248,113,113,0.15); color: var(--danger); }
.dispute-success { display: block; margin-bottom: 8px; padding: 8px 14px; background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.25); border-radius: 6px; color: var(--success); font-size: 0.85rem; font-weight: 500; max-width: 500px; }
.dispute-form { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; padding: 1rem; max-width: 500px; }
.dispute-form textarea { width: 100%; margin-top: 0.5rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: var(--text-primary); border-radius: 6px; padding: 0.5rem; resize: vertical; font-family: var(--font-body); }
.dispute-error { color: var(--danger); font-size: 0.8rem; margin-top: 0.5rem; }
.dispute-form-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.btn-dispute-submit { background: var(--warning); color: #000; border: none; padding: 6px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; }
.btn-dispute-submit:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== SPEED COMPARISON BARS ===== */
.speed-compare-section { margin: 1.5rem 0; }
.speed-compare-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.speed-compare-player { margin-bottom: 16px; }
.speed-compare-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; margin-bottom: 6px; color: var(--text-primary); }
.speed-bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.speed-bar-label { font-size: 11px; color: var(--text-muted); width: 28px; text-align: right; flex-shrink: 0; }
.speed-bar { flex: 1; height: 18px; background: var(--bg-elevated); border-radius: 4px; overflow: hidden; }
.speed-bar-fill { height: 100%; border-radius: 4px; transition: width 0.4s ease; }
.speed-bar-fill.bar-winner { background: linear-gradient(90deg, var(--accent) 0%, rgba(0,224,255,0.6) 100%); }
.speed-bar-fill.bar-loser { background: linear-gradient(90deg, var(--text-muted) 0%, rgba(107,117,136,0.4) 100%); }
.speed-bar-value { font-size: 12px; color: var(--text-secondary); width: 70px; text-align: right; flex-shrink: 0; }

/* ===== 404 / ERROR PAGE ===== */
.notfound-page, .error-page { text-align: center; padding: 4rem 1rem; }
.notfound-code { font-family: var(--font-display); font-size: 6rem; font-weight: 700; color: var(--accent); line-height: 1; margin-bottom: 0.5rem; text-shadow: 0 0 40px var(--accent-glow); }
.notfound-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--text-primary); margin-bottom: 0.75rem; }
.notfound-text { color: var(--text-secondary); font-size: 14px; margin-bottom: 2rem; }
.notfound-links { display: flex; gap: 12px; justify-content: center; }
.notfound-links .btn { padding: 10px 24px; border-radius: 6px; font-family: var(--font-display); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer; border: none; }
.notfound-links .btn.primary { background: var(--accent); color: #000; }
.notfound-links .btn.primary:hover { background: var(--accent-hover); }
.notfound-links .btn.secondary { background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); }
.notfound-links .btn.secondary:hover { border-color: var(--accent); color: var(--accent); }

/* ===== HEAD-TO-HEAD ===== */
.h2h-search-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 1.5rem; margin-bottom: 1.5rem; }
.h2h-search-row { display: flex; align-items: flex-start; gap: 1rem; }
.h2h-search-col { flex: 1; position: relative; }
.h2h-search-col label { display: block; font-family: var(--font-display); font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.h2h-search-input { width: 100%; padding: 10px 14px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; color: var(--text-primary); font-size: 14px; outline: none; box-sizing: border-box; }
.h2h-search-input:focus { border-color: var(--accent); }
.h2h-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 0 0 6px 6px; z-index: 10; max-height: 200px; overflow-y: auto; }
.h2h-search-option { display: block; width: 100%; padding: 8px 14px; background: none; border: none; color: var(--text-primary); font-size: 14px; text-align: left; cursor: pointer; }
.h2h-search-option:hover { background: rgba(0,224,255,0.1); color: var(--accent); }
.h2h-selected { margin-top: 6px; font-size: 13px; color: var(--accent); font-weight: 600; }
.h2h-vs-label { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--text-muted); padding-top: 24px; flex-shrink: 0; }
.h2h-compare-btn { display: block; margin: 1rem auto 0; padding: 10px 36px; }

.h2h-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 2rem; text-align: center; }
.h2h-versus { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-bottom: 1.5rem; }
.h2h-player { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.h2h-player-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--text-primary); text-decoration: none; display: inline-block; max-width: 16ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.h2h-player-name:hover { color: var(--accent); }
.h2h-win-count { font-family: var(--font-display); font-size: 3rem; font-weight: 700; color: var(--text-secondary); line-height: 1; }
.h2h-win-count.h2h-leading { color: var(--accent); text-shadow: 0 0 20px var(--accent-glow); }
.h2h-dash { font-family: var(--font-display); font-size: 2rem; color: var(--text-muted); }

.h2h-win-bar { display: flex; height: 28px; border-radius: 6px; overflow: hidden; margin-bottom: 0.5rem; }
.h2h-win-bar-p1 { background: linear-gradient(90deg, var(--accent), rgba(0,224,255,0.6)); display: flex; align-items: center; justify-content: center; transition: width 0.4s ease; }
.h2h-win-bar-p2 { background: linear-gradient(90deg, rgba(107,117,136,0.6), var(--text-muted)); display: flex; align-items: center; justify-content: center; transition: width 0.4s ease; }
.h2h-win-bar-p1 span, .h2h-win-bar-p2 span { font-size: 11px; font-weight: 700; color: #000; }
.h2h-total { font-size: 13px; color: var(--text-secondary); }

.match-link { color: var(--accent); text-decoration: none; font-size: 13px; }
.match-link:hover { text-decoration: underline; }

@media (max-width: 768px) {
    .h2h-search-row { flex-direction: column; }
    .h2h-vs-label { padding-top: 0; text-align: center; }
    .h2h-versus { flex-direction: column; gap: 0.5rem; }
    .h2h-win-count { font-size: 2.5rem; }
}

.h2h-detail-link { display: inline-block; margin-top: 8px; color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; }
.h2h-detail-link:hover { text-decoration: underline; }

/* Provisional badge */
.provisional-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-style: italic;
    color: rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.05);
    padding: 1px 8px;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    font-weight: 400;
    cursor: help;
}

/* ── Mode header (Queue page) ─────────────────────────────────── */
.mode-header { padding: 16px 0 8px; }
.mode-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--accent-cyan, #00e0ff); display: flex; align-items: center; gap: 12px; margin: 0; letter-spacing: 0.5px; }
.mode-badge { font-size: 12px; padding: 2px 8px; border: 1px solid #00e0ff; border-radius: 4px; letter-spacing: 0.08em; font-weight: 500; }
.mode-explainer { color: #aaa; font-size: 14px; margin-top: 4px; }
/* Time Attack variant */
.ta-mode-title { color: var(--accent-purple, #b49cff); }
.ta-badge { border-color: var(--accent-purple, #b49cff); color: var(--accent-purple, #b49cff); }
.koth-mode-title { color: var(--success); }
.koth-badge { border-color: var(--success); color: var(--success); }
.mm-mode-title { color: var(--accent); }
.mm-badge { border-color: var(--accent); color: var(--accent); }

/* ── Match-found notification card (Queue page) ───────────────── */
@keyframes kott-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 224, 255, 0.7); }
    50%       { box-shadow: 0 0 0 14px rgba(0, 224, 255, 0); }
}
/* ═══════════ MATCH FOUND CARD ═══════════ */
.match-found-card {
    padding: 28px;
    border: 1px solid rgba(0, 224, 255, 0.35);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(0, 224, 255, 0.08) 0%, rgba(0, 224, 255, 0.03) 100%);
    box-shadow: 0 0 0 1px rgba(0, 224, 255, 0.05), 0 4px 24px rgba(0, 224, 255, 0.08);
    margin: 16px 0;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
.match-found-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(0, 224, 255, 0.12);
}
.match-found-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--accent);
    animation: match-dot-pulse 1.4s ease-in-out infinite;
    flex-shrink: 0;
}
@keyframes match-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.85); }
}
.match-found-label {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--accent);
}
.match-found-countdown {
    margin-left: auto;
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-family: var(--font-display);
}
.match-found-countdown .countdown-seconds {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.match-found-countdown .countdown-unit {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.match-found-opponent {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 20px;
}
.match-found-vs {
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}
.match-found-opponent-name {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary) !important;
    text-decoration: none;
    letter-spacing: 1px;
    transition: color 0.15s;
}
.match-found-opponent-name:hover { color: var(--accent) !important; }

/* Primary CTA — solid fill with dark text, box-shadow glow, pulses gently.
   Prefixed with .public-shell to beat the .public-shell a specificity rule
   that would otherwise paint the label cyan-on-cyan (invisible). */
.public-shell .match-connect-btn {
    display: block;
    width: 100%;
    padding: 18px 20px;
    background: var(--accent);
    color: #001018 !important;
    border: none;
    border-radius: 8px;
    text-align: center;
    text-decoration: none;
    font-family: var(--font-display);
    box-shadow: 0 0 0 1px rgba(0, 224, 255, 0.3), 0 6px 24px rgba(0, 224, 255, 0.22);
    animation: match-connect-pulse 1.6s ease-in-out infinite;
    transition: transform 0.12s, box-shadow 0.15s;
    margin-bottom: 20px;
}
.public-shell .match-connect-btn:hover {
    background: var(--accent-hover, #33e7ff);
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(0, 224, 255, 0.5), 0 8px 28px rgba(0, 224, 255, 0.35);
    color: #001018 !important;
}
.match-connect-btn-label {
    display: block;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    line-height: 1.1;
}
.match-connect-btn-sub {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    opacity: 0.65;
    margin-top: 4px;
}
@keyframes match-connect-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0, 224, 255, 0.3), 0 6px 24px rgba(0, 224, 255, 0.22); }
    50%      { box-shadow: 0 0 0 2px rgba(0, 224, 255, 0.5), 0 8px 34px rgba(0, 224, 255, 0.4); }
}

.match-connect-fallback {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
}
.match-connect-fallback code {
    background: rgba(0, 224, 255, 0.08);
    color: var(--accent);
    padding: 2px 6px;
    border-radius: 3px;
}

.match-found-meta {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 4px 16px;
    margin-bottom: 16px;
}
.match-found-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    font-size: 13px;
}
.match-found-meta-row:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.match-found-meta-label {
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.match-found-meta-value {
    color: var(--text-primary);
    font-weight: 500;
}
.match-found-warning {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
    font-style: italic;
}

/* Legacy classes still referenced elsewhere — kept for backwards-compat. */
.btn-connect-pulse {
    background: var(--accent-cyan, #00e0ff);
    color: #000 !important;
    font-weight: 700;
    padding: 16px 32px;
    border-radius: 6px;
    animation: kott-pulse 1.2s infinite;
    display: inline-block;
    text-decoration: none;
    margin: 12px 0;
    font-size: 1rem;
    letter-spacing: 0.05em;
    cursor: pointer;
}
.btn-connect-pulse:hover { opacity: 0.9; text-decoration: none; }
.connect-countdown { font-size: 14px; color: #aaa; margin: 8px 0 16px 0; }
.countdown-seconds { color: var(--accent-cyan, #00e0ff); font-weight: 700; font-size: 18px; }

/* ============================================
   Operator-admin license + suspension banners.
   Surfaced on /community/{slug}/admin to warn
   the operator before their fleet 401s.
   ============================================ */

.op-license-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 12px 0 18px;
    padding: 12px 16px;
    border: 1px solid var(--border-accent);
    border-radius: 6px;
    font-size: 13.5px;
    line-height: 1.5;
}
.op-license-banner strong { font-weight: 700; }
.op-license-banner .btn {
    margin-left: auto;
}
.op-license-warning {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}
.op-license-warning strong { color: #fde68a; }
.op-license-expired {
    background: rgba(248, 113, 113, 0.10);
    border-color: rgba(248, 113, 113, 0.45);
    color: #fca5a5;
}
.op-license-expired strong { color: #fecaca; }

.op-tenant-banner {
    margin: 12px 0 18px;
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
}
.op-tenant-banner strong { font-weight: 700; display: block; font-size: 15px; margin-bottom: 4px; }
.op-tenant-suspended {
    background: rgba(248, 113, 113, 0.12);
    border: 1px solid rgba(248, 113, 113, 0.5);
    color: #fca5a5;
}
.op-tenant-suspended strong { color: #fecaca; }
.op-tenant-scheduled {
    background: rgba(251, 191, 36, 0.10);
    border: 1px solid rgba(251, 191, 36, 0.45);
    color: #fbbf24;
}
.op-tenant-scheduled strong { color: #fde68a; }

.status-pill {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.status-pill.ok {
    background: rgba(16, 185, 129, 0.10);
    border-color: rgba(16, 185, 129, 0.40);
    color: #10b981;
}
.status-pill.warn {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.40);
    color: #f59e0b;
}
.status-pill.danger {
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.50);
    color: #fca5a5;
}

/* ============================================
   Shared empty / error / loading patterns
   Used across every public page for zero-data
   cards, async loads, and load failures.
   ============================================ */

.empty-state {
    padding: 24px;
    border: 1px dashed var(--border-accent);
    border-radius: 6px;
    background: var(--bg-panel);
    color: var(--text-muted);
    text-align: center;
    font-family: var(--font-body);
    line-height: 1.6;
}
.empty-state h4 {
    color: var(--text-secondary);
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.empty-state p { color: var(--text-muted); font-size: 13px; }
.empty-state .cta {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    background: var(--accent-dim);
    color: var(--accent);
    border: 1px solid var(--border-accent-strong);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
}
.empty-state .cta:hover { background: var(--accent); color: var(--bg-primary); }

.error-state {
    padding: 20px;
    border: 1px solid var(--danger-border);
    border-radius: 6px;
    background: var(--danger-dim);
    color: var(--danger);
    font-family: var(--font-body);
    font-size: 13px;
    text-align: center;
}
.error-state .retry-btn {
    margin-top: 10px;
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--danger);
    color: var(--danger);
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
}
.error-state .retry-btn:hover { background: var(--danger); color: var(--bg-primary); }

.loading-skeleton {
    background: linear-gradient(90deg, var(--bg-panel) 0%, var(--bg-hover) 50%, var(--bg-panel) 100%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: 6px;
    min-height: 60px;
}
@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .loading-skeleton { animation: none; background: var(--bg-panel); }
}

/* ============================================
   Top-nav Play dropdown
   Desktop: CSS hover. Mobile: Blazor click-open.
   ============================================ */

.topnav-dropdown { position: relative; }
.topnav-dropdown-trigger {
    font-family: var(--font-display);
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 600;
    padding: 8px 14px;
    border-radius: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.12s ease;
}
.topnav-dropdown-trigger:hover,
.topnav-dropdown-trigger[aria-expanded="true"] {
    color: var(--text-primary);
    background: var(--bg-hover);
}
.topnav-dropdown-trigger.active {
    color: var(--accent);
    background: var(--accent-dim);
}
.topnav-dropdown-caret {
    font-size: 10px;
    opacity: 0.7;
    transition: transform 0.15s ease;
}
.topnav-dropdown-trigger[aria-expanded="true"] .topnav-dropdown-caret {
    transform: rotate(180deg);
}

.topnav-dropdown-menu {
    position: absolute;
    /* Flush to the trigger — any gap creates a hover dead-zone the cursor
       crosses when heading to a menu item, which kills the hover state and
       makes the dropdown disappear mid-move. Visual spacing is done via
       padding-top on the menu itself (see below). */
    top: 100%;
    left: 0;
    /* Fully opaque + z-index 200, matching .search-dropdown. Earlier the
       translucent rgba(…, 0.95) + blur let page content behind the menu
       bleed through (page <h1> visible through the open dropdown). The
       search dropdown pattern is right: nav menus should fully occlude
       page content below them. */
    background: var(--bg-panel-solid);
    border: 1px solid var(--border-accent);
    border-radius: 6px;
    min-width: 240px;
    padding: 10px 6px 6px;  /* 4px extra top padding = visual gap without breaking hover */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    display: none;
    z-index: 200;
}
.topnav-dropdown:hover .topnav-dropdown-menu,
.topnav-dropdown-menu.open { display: block; }

.topnav-dropdown-item {
    display: block;
    padding: 10px 12px;
    border-radius: 4px;
    text-decoration: none;
    transition: background 0.12s ease;
}
.topnav-dropdown-item:hover { background: var(--bg-hover); }
.topnav-dropdown-item-title {
    display: block;
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}
.topnav-dropdown-item-desc {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

/* Mobile menu: Play group is expandable */
.mobilenav-group-label {
    font-family: var(--font-display);
    color: var(--text-tertiary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 0 4px;
}
.mobilenav-group-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 8px 12px;
    padding-left: 24px;
    min-height: auto;
}
.mobilenav-group-item-desc {
    display: block;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.3;
    font-weight: 400;
    margin-top: 2px;
}

/* ============================================
   Home page — Watch/Learn/Play restructure
   ============================================ */

/* Retained for test compat / misc hero subcopy slot. Not currently used
   by the markup, but keep the rule in case a future iteration needs it. */
.home-subcopy {
    color: var(--text-tertiary);
    font-size: 14px;
    font-family: var(--font-body);
    margin-top: 6px;
    letter-spacing: 0.5px;
}
/* Section label: muted tiny uppercase caption. Replaces the old colored-
   left-border tag (PLAY/LEARN) that read as dev-dashboard chrome. */
.home-section-label {
    display: block;
    font-family: var(--font-display);
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.home-mode-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 auto 24px;
    max-width: var(--home-content-width);
    padding: 0 1rem;
}
.home-mode-card {
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--border-accent);
    text-decoration: none;
    transition: all 0.15s ease;
    display: block;
}
.home-mode-card:hover {
    border-color: var(--border-accent-strong);
    transform: translateY(-2px);
}
.home-mode-card-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.home-mode-card-badge.mm { background: var(--accent-dim); color: var(--accent); }
.home-mode-card-badge.ta { background: rgba(180, 156, 255, 0.15); color: var(--accent-purple); }
.home-mode-card-badge.koth { background: rgba(138, 255, 138, 0.12); color: var(--success); }
.home-mode-card-title {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 18px;
    margin-bottom: 6px;
    letter-spacing: 1px;
}
.home-mode-card-desc {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}
.home-mode-card-cta {
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
}
@media (max-width: 900px) {
    .home-mode-cards { grid-template-columns: 1fr; }
}

.home-modes-docs {
    max-width: var(--home-content-width);
    margin: 0.25rem auto 1.25rem;
    padding: 0 1rem;
    text-align: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.home-modes-docs a {
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.5px;
    border-bottom: 1px dashed transparent;
    transition: border-color 0.15s;
}
.home-modes-docs a:hover {
    color: var(--accent-hover);
    border-bottom-color: var(--accent-hover);
}

/* ============================================
   Home — "Welcome back" strip (logged-in players)
   Compact single-line bar under the hero CTA. Prior iteration was a
   glass card with multiple stat cells which duplicated the profile page.
   ============================================ */

.home-since-card {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.25rem auto 0;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-wrap: wrap;
    justify-content: center;
}
.home-since-text strong {
    font-family: var(--font-display);
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    margin: 0 2px;
}
.home-since-meta {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-right: 2px;
}
.home-since-sep {
    color: var(--text-muted);
    margin: 0 4px;
}
.home-since-view {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--accent) !important;
    text-decoration: none;
}
.home-since-view:hover { color: var(--accent-hover) !important; }

/* ============================================
   Leaderboard podium delta badges
   ============================================ */

.podium-delta {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-top: 6px;
    display: inline-block;
}
.podium-delta.up { color: var(--success); background: rgba(138, 255, 138, 0.08); }
.podium-delta.down { color: var(--danger); background: rgba(255, 107, 107, 0.08); }

/* ============================================
   LinkGuide — "Before you connect" pre-flight
   ============================================ */

.link-preflight {
    padding: 24px;
    margin: 0 auto 24px;
    max-width: 700px;
    border: 1px solid var(--border-accent-strong);
    border-radius: 8px;
    background: var(--accent-dim);
}
.link-preflight-label {
    font-family: var(--font-display);
    color: var(--accent);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: block;
}
.link-preflight h2 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 20px;
    margin-bottom: 8px;
}
.link-preflight-steps {
    padding-left: 20px;
    margin: 12px 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.7;
}
.link-preflight-note {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
}

/* ============================================
   HowToPlay — mode picker (3 card grid)
   ============================================ */

.htp-mode-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 0 auto 32px;
    max-width: 700px;
}
.htp-mode-card {
    padding: 20px;
    border: 1px solid var(--border-accent);
    border-radius: 8px;
    background: var(--bg-panel);
    text-decoration: none;
    transition: all 0.15s ease;
    display: block;
}
.htp-mode-card:hover {
    transform: translateY(-2px);
    border-color: var(--border-accent-strong);
}
.htp-mode-card h3 {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: 20px;
    margin: 10px 0 6px;
    letter-spacing: 1px;
}
.htp-mode-card p { color: var(--text-secondary); font-size: 13px; }
.htp-mode-card-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 3px;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.htp-mode-card-mm .htp-mode-card-badge { background: var(--accent-dim); color: var(--accent); }
.htp-mode-card-ta .htp-mode-card-badge { background: rgba(180, 156, 255, 0.15); color: var(--accent-purple); }
.htp-mode-card-koth .htp-mode-card-badge { background: rgba(138, 255, 138, 0.12); color: var(--success); }
@media (max-width: 900px) {
    .htp-mode-picker { grid-template-columns: 1fr; }
}

/* ============================================
   Servers page — mode explainer chips
   ============================================ */

.servers-mode-chip {
    padding: 10px 16px;
    margin: 16px 0 10px;
    border-radius: 6px;
    font-size: 13px;
    font-family: var(--font-body);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 12px;
    border-left: 3px solid;
}
.servers-chip-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 3px;
    flex-shrink: 0;
}
.servers-mode-chip.koth { border-color: var(--success); background: rgba(138,255,138,0.04); }
.servers-mode-chip.koth .servers-chip-label { background: rgba(138,255,138,0.15); color: var(--success); }
.servers-mode-chip.ta { border-color: var(--accent-purple); background: rgba(180,156,255,0.04); }
.servers-mode-chip.ta .servers-chip-label { background: rgba(180,156,255,0.15); color: var(--accent-purple); }
.servers-mode-chip.community { border-color: var(--text-muted); background: rgba(255,255,255,0.02); }
.servers-mode-chip.community .servers-chip-label { background: rgba(255,255,255,0.08); color: var(--text-secondary); }

/* ============================================
   Queue page — 'Queued via Discord' badge
   ============================================ */

.queue-source-badge {
    display: inline-block;
    padding: 2px 8px;
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #5865F2;
    color: #fff;
    border-radius: 3px;
    margin-left: 6px;
}

/* ============================================
   Player profile — focus pass
   ============================================ */

.profile-form-card, .profile-rankings-card {
    background: var(--bg-panel);
    border-radius: 8px;
    padding: 16px 20px;
    margin: 0 0 16px;
}
.profile-card-title {
    font-family: var(--font-display);
    color: var(--text-tertiary);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.profile-card-title-inline {
    font-family: var(--font-display);
    color: var(--text-tertiary);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-right: 8px;
}
.profile-form-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.form-chip {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    border-radius: 4px;
}
.form-chip.win { background: rgba(138, 255, 138, 0.18); color: var(--success); }
.form-chip.loss { background: rgba(255, 107, 107, 0.15); color: var(--danger); }
.profile-rankings-row { display: flex; gap: 32px; flex-wrap: wrap; }
.ranking-stat { display: flex; flex-direction: column; align-items: flex-start; }
.ranking-value {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ranking-label {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
}
.profile-car-summary {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 12px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   MyProfile — recent activity card + quick actions
   ============================================ */

.my-since-card {
    padding: 16px 20px;
    margin: 0 auto 16px;
    max-width: 700px;
    border-radius: 8px;
    background: var(--bg-panel);
}
.my-since-label {
    display: block;
    font-family: var(--font-display);
    color: var(--text-tertiary);
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.my-since-stats {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    align-items: baseline;
}
.my-since-stats > div {
    display: flex;
    flex-direction: column;
}
.my-since-num {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.my-since-meta {
    color: var(--text-muted);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 2px;
}
.my-actions-strip {
    display: flex;
    gap: 8px;
    max-width: 700px;
    margin: 0 auto 16px;
    flex-wrap: wrap;
}

/* Quick actions now live inside the .profile-header card (top-right) so the
   page has one clean top block instead of a header + detached strip below. */
.profile-header-self { justify-content: space-between; flex-wrap: wrap; }
.profile-header-self .profile-info { flex: 1 1 auto; min-width: 220px; }
.profile-header-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
@media (max-width: 768px) {
    .profile-header-self { flex-direction: column; text-align: center; }
    .profile-header-actions { margin-left: 0; justify-content: center; }
}

/* Rankings card: use a grid that matches the stats-grid pattern so a single
   stat no longer sits forlorn in the left corner of a wide card. */
.profile-rankings-card .profile-rankings-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 18px;
}
.profile-rankings-card .ranking-stat { align-items: flex-start; }

/* Car summary: give "Most driven" its own mini-card so it stops floating as
   loose paragraph text. */
.profile-car-summary {
    background: var(--bg-panel);
    border-radius: 8px;
    padding: 10px 16px;
    max-width: none;
    margin: 0 0 16px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.my-action-btn {
    padding: 6px 14px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    border: 1px solid var(--border-accent);
    border-radius: 4px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.12s ease;
}
.my-action-btn:hover {
    border-color: var(--border-accent-strong);
    color: var(--accent);
}

/* ============================================
   Phase 7 additions — P2 page polish
   ============================================ */

/* Privacy / Terms — cross-link footer line */
.guide-see-also {
    font-size: 13px;
    color: var(--text-muted);
    border-top: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
    padding-top: 0.75rem;
    margin-top: 0;
}
.guide-see-also a {
    color: var(--accent);
    text-decoration: none;
}
.guide-see-also a:hover { text-decoration: underline; }

/* ============================================
   Global responsive floor — prevent horizontal scroll
   These rules are safe to cascade on top of any
   existing @media rules; most classes already have
   per-component breakpoints above, so this only
   catches any gaps.
   ============================================ */

/* Ensure the guide tables (HowToPlay keybinds / bot
   commands) scroll horizontally rather than overflow. */
.guide-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 640px) {
    .pub-table-wrap, .table-wrap { overflow-x: auto; }
    .home-stats-row,
    .home-highlights-row { grid-template-columns: 1fr; }
    .home-mode-cards,
    .htp-mode-picker { grid-template-columns: 1fr; gap: 12px; }
    .my-since-stats,
    .profile-rankings-row { gap: 16px; }
    .servers-mode-chip { flex-wrap: wrap; }
}

/* ──────────────────────────────────────────────
   Reconnect modal
   ──────────────────────────────────────────────
   Targets Blazor's framework-managed element. The framework
   toggles classes on #components-reconnect-modal:
     .components-reconnect-show     — silent retry in progress
     .components-reconnect-hide     — connection restored
     .components-reconnect-failed   — retries exhausted
     .components-reconnect-rejected — server refused the circuit
   We keep the modal hidden during the .show state so the first
   ~3s of automatic retries are silent, and only surface the UI
   on .failed or .rejected. */
.kott-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: var(--font-body);
    color: var(--text-primary);
}

.kott-reconnect-modal.components-reconnect-failed,
.kott-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

.kott-reconnect-card {
    max-width: 420px;
    width: 100%;
    background: var(--bg-panel-solid);
    border: 1px solid var(--border-accent-strong);
    border-radius: 10px;
    padding: 28px 32px;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(0, 224, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.6);
}

.kott-reconnect-spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 18px;
    border: 2px solid rgba(0, 224, 255, 0.18);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: kott-reconnect-spin 0.9s linear infinite;
}

@keyframes kott-reconnect-spin {
    to { transform: rotate(360deg); }
}

.kott-reconnect-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-xl);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 10px;
}

.kott-reconnect-text {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0 0 18px;
    line-height: 1.5;
}

/* Show only the message that matches the current state. */
.kott-reconnect-text-default,
.kott-reconnect-text-failed,
.kott-reconnect-text-rejected { display: none; }

.kott-reconnect-modal.components-reconnect-failed .kott-reconnect-text-failed { display: block; }
.kott-reconnect-modal.components-reconnect-rejected .kott-reconnect-text-rejected { display: block; }

.kott-reconnect-button {
    appearance: none;
    border: 1px solid var(--border-accent-strong);
    background: var(--accent-dim);
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 22px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.kott-reconnect-button:hover,
.kott-reconnect-button:focus-visible {
    background: var(--accent);
    color: #001318;
    border-color: var(--accent);
    outline: none;
}

/* ─────────────────────────────────────────────────────────────────
   ErrorBoundary fallback (App.razor wraps <Routes> in this).
   Renders inline (no overlay) when a render-time exception escapes
   the page itself — distinct from the reconnect modal which is for
   SignalR-circuit disconnects. Both share the cyan/dark aesthetic.
   ───────────────────────────────────────────────────────────────── */
.kott-error-boundary {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    font-family: var(--font-body);
    color: var(--text-primary);
}

.kott-error-card {
    max-width: 480px;
    width: 100%;
    background: var(--bg-panel-solid);
    border: 1px solid var(--border-accent-strong);
    border-radius: 10px;
    padding: 36px 40px;
    text-align: center;
    box-shadow: 0 0 0 1px rgba(0, 224, 255, 0.08), 0 20px 60px rgba(0, 0, 0, 0.6);
}

.kott-error-card h1 {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-2xl);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 14px;
}

.kott-error-card p {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0 0 22px;
    line-height: 1.5;
}

.kott-error-card button {
    appearance: none;
    border: 1px solid var(--border-accent-strong);
    background: var(--accent-dim);
    color: var(--accent);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--text-base);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 22px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.kott-error-card button:hover,
.kott-error-card button:focus-visible {
    background: var(--accent);
    color: #001318;
    border-color: var(--accent);
    outline: none;
}

.kott-error-link {
    margin-top: 18px !important;
    margin-bottom: 0 !important;
    font-size: var(--text-sm) !important;
}

.kott-error-link a {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px dashed var(--border-subtle);
}

.kott-error-link a:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* ─────────────────────────────────────────────────────────────────
   Lap detail — unified telemetry view (LapTelemetryView.razor).
   Three coordinated canvases with shared playhead. Layout pattern
   borrowed from MoTeC i2 / AiM RaceStudio: stacked traces with a
   heatmap track map sidebar, position scrubber underneath.
   ───────────────────────────────────────────────────────────────── */
.lap-telemetry-view {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: var(--bg-panel-solid, #0d1418);
    border: 1px solid var(--border-accent-strong, rgba(0, 224, 255, 0.18));
    border-radius: 10px;
    margin-top: 16px;
    overflow-x: auto;
}

.lap-telemetry-view canvas {
    display: block;
    background: #0a0a0a;
    border-radius: 6px;
    max-width: 100%;
}

.ltv-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 12px;
    align-items: start;
}

.ltv-map {
    cursor: pointer;
    width: 100%;
    aspect-ratio: 900 / 640;
}

.ltv-stack {
    cursor: crosshair;
    width: 100%;
    aspect-ratio: 1232 / 320;
}

.ltv-scrubber {
    cursor: pointer;
    width: 100%;
    aspect-ratio: 1232 / 42;
}

/* Δ-vs-PB strip — the red/green band painted above the trace stack when
   the user has toggled the PB compare overlay on. Hidden when no PB is
   loaded (the canvas element isn't rendered in that case). */
.ltv-delta-strip {
    width: 100%;
    aspect-ratio: 1232 / 32;
    margin-bottom: 4px;
    border-radius: 4px;
    overflow: hidden;
}

@media (max-width: 920px) {
    /* On narrow viewports, drop the stats column underneath the map
       rather than letting the map shrink uselessly. */
    .ltv-hero { grid-template-columns: 1fr; }
}

/* Stats panel — point-in-time HTML readouts that update on every playhead
   scrub. Sits beside the map in the hero row as a vertical sidebar. */
.ltv-stats {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ltv-stats-side {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 224, 255, 0.10);
    border-radius: 6px;
    padding: 14px 14px 16px;
    height: 640px;
    overflow-y: auto;
}

.ltv-stats-block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ltv-stats-title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent, #00e0ff);
    margin: 0 0 4px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ltv-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: baseline;
}

.ltv-stats-row-vert {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
}

.ltv-tyre-grid {
    display: grid;
    grid-template-columns: 50px repeat(4, 1fr);
    gap: 6px 8px;
    align-items: center;
}

.ltv-stat {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 60px;
}

.ltv-stat-label {
    /* Body font (Inter) at 11px reads more clearly than display font at 9px —
       Rajdhani's "G" character became visually ambiguous with "B" at small
       sizes, which made the GEAR readout misread as BEAR. */
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #888);
    line-height: 1;
    margin-bottom: 4px;
    white-space: nowrap;
}

.ltv-stat-value {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    color: var(--text-primary, #f0f0f0);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ltv-stat-unit {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, #888);
    margin-left: 2px;
}

.ltv-stat-suspect .ltv-stat-value {
    color: #c46060;
}

.ltv-stat-warn {
    color: #ff6b6b;
    font-size: 11px;
    margin-right: 2px;
}

.ltv-debug {
    margin-top: 14px;
    border-top: 1px dashed rgba(0, 224, 255, 0.18);
    padding-top: 8px;
}

.ltv-debug-toggle {
    background: transparent;
    border: 1px solid rgba(0, 224, 255, 0.18);
    color: #99c8d6;
    font-family: var(--font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
    font-size: 11px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 3px;
    letter-spacing: 0.04em;
}

.ltv-debug-toggle:hover {
    border-color: rgba(0, 224, 255, 0.4);
    color: #c5e6ed;
}

.ltv-debug-hint {
    color: #5c7480;
    margin-left: 10px;
    font-size: 10px;
    letter-spacing: 0;
}

.ltv-debug-body {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 224, 255, 0.12);
    border-radius: 4px;
}

.ltv-debug-explainer {
    color: #88a0aa;
    font-size: 11px;
    margin-bottom: 8px;
    line-height: 1.5;
}

.ltv-debug-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono, ui-monospace, "Cascadia Code", Consolas, monospace);
    font-size: 11px;
}

.ltv-debug-table th,
.ltv-debug-table td {
    padding: 3px 8px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ltv-debug-table th {
    color: #00e0ff;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 10px;
}

.ltv-debug-table td:nth-child(2),
.ltv-debug-table td:nth-child(3) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: #d6dde0;
}

.ltv-debug-table td:nth-child(4) {
    color: #6f8088;
    font-size: 10px;
}

.ltv-debug-table td:nth-child(5) {
    text-align: center;
    color: #6fbf8f;
}

.ltv-debug-row-suspect {
    background: rgba(255, 100, 100, 0.06);
}

.ltv-debug-row-suspect td:nth-child(2),
.ltv-debug-row-suspect td:nth-child(3) {
    color: #ff8e8e;
}

.ltv-debug-row-suspect td:nth-child(5) {
    color: #ff6b6b;
}

.ltv-stat-group {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent, #00e0ff);
    align-self: center;
    padding-right: 4px;
    min-width: 90px;
}

/* ──────────────────────────────────────────────────────────────────
   Lap-detail trace-stack channel picker (LapTelemetryView.razor)
   "+ Add channel" button + chip row + popover grid + availability
   badges. Sits between the trace-stack canvas and the scrubber.
   ────────────────────────────────────────────────────────────────── */
.ltv-add-channel-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 6px 0;
}

.ltv-add-channel-btn {
    background: rgba(0, 224, 255, 0.08);
    border: 1px dashed rgba(0, 224, 255, 0.4);
    color: var(--accent, #00e0ff);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.ltv-add-channel-btn:hover { background: rgba(0, 224, 255, 0.18); }

.ltv-added-chip {
    background: transparent;
    border: 1px solid;
    font-family: var(--font-display);
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ltv-added-chip-x { font-size: 14px; opacity: 0.7; }
.ltv-added-chip:hover .ltv-added-chip-x { opacity: 1; }

.ltv-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 224, 255, 0.18);
    border-radius: 6px;
    margin-top: 4px;
}

.ltv-picker-item {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #ddd);
    text-align: left;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.ltv-picker-item:hover { background: rgba(0, 224, 255, 0.06); border-color: rgba(0, 224, 255, 0.24); }
.ltv-picker-title { flex: 1; font-weight: 500; }
.ltv-picker-unit { color: #888; font-size: 11px; }

.ltv-badge {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ltv-badge-green { background: #8aff8a; }
.ltv-badge-amber { background: #ffb347; }
.ltv-badge-red   { background: #ff6b6b; }

/* PB-compare toggle (appears in stats sidebar when a PB exists). */
.ltv-compare-block .ltv-stats-title {
    color: #ffb347;
    font-variant-numeric: tabular-nums;
}

.ltv-compare-toggle {
    background: rgba(255, 179, 71, 0.08);
    border: 1px solid rgba(255, 179, 71, 0.4);
    color: #ffb347;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

.ltv-compare-toggle:hover { background: rgba(255, 179, 71, 0.18); }
.ltv-compare-toggle.ltv-compare-on { background: rgba(255, 179, 71, 0.28); border-color: #ffb347; }

/* Topnav "Admin →" pill — appears when the visitor is signed in as admin.
   Distinct accent (orange) so it's obviously not a player feature. Replaces
   the misleading "Login with Steam" button admins were seeing. */
.admin-link {
    background: rgba(255, 179, 71, 0.08);
    color: #ffb347 !important;
    border: 1px solid rgba(255, 179, 71, 0.4);
}
.admin-link:hover {
    background: rgba(255, 179, 71, 0.18);
    border-color: #ffb347;
}

.mobilenav-admin-link {
    color: #ffb347 !important;
    font-weight: 600;
}

/* ============================================================
   Phase 8 — multi-tenant public surface (Task 8.1).

   Branding boundary (spec § 15.2):
     • .tenant-themed scopes operator overrides (--accent, logo) to
       its descendants only. KOTT-central pages and the
       Hosted-on-KOTT badge live OUTSIDE it and inherit :root.
     • .hosted-on-kott-badge ALWAYS uses literal KOTT cyan, never
       var(--accent), so an operator can't recolor or hide it.
   ============================================================ */

.tenant-themed {
    /* Container is purely for scoping the inline --accent / logo
       overrides emitted by the TenantBrandedLayout. No padding/margin
       so it lays out identically to system-tenant pages. */
    display: contents;
}

/* Identity ribbon at the top of /community/<slug>/... pages. Lives
   outside .tenant-themed so its colors are non-overridable. */
.tenant-identity-ribbon {
    background: rgba(0, 0, 0, 0.85);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-family: var(--font-display);
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tenant-identity-ribbon-name {
    color: var(--text-secondary);
    font-weight: 600;
}

.tenant-identity-ribbon-sep {
    opacity: 0.4;
}

/* The mandatory "Hosted on KOTT" badge. Pinned colors — does not
   read --accent and is not stylable from inside .tenant-themed. */
.hosted-on-kott-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(0, 224, 255, 0.30);
    border-radius: 4px;
    font-family: 'Rajdhani', 'Segoe UI', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    /* Hard-coded colors — never use var(--accent) here, the whole point
       is that this badge is never recolored by tenant overrides. */
    color: #9ca3af !important;
    background: rgba(0, 0, 0, 0.4);
    transition: border-color 0.12s ease, color 0.12s ease;
}

.hosted-on-kott-badge:hover {
    border-color: #00e0ff;
    color: #00e0ff !important;
}

.hosted-on-kott-badge-text {
    opacity: 0.7;
}

.hosted-on-kott-badge-brand {
    color: #00e0ff !important;
    letter-spacing: 1.5px;
}

/* Tenant home hero — mirrors the public Home.razor cyan-on-black
   styling but reads --accent so it picks up the operator's color. */
.tenant-home-hero {
    text-align: center;
    padding: 48px 24px 36px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    margin-bottom: 24px;
}

.tenant-home-hero h1 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 8px;
    letter-spacing: 1px;
}

.tenant-home-hero .tagline {
    color: var(--text-secondary);
    font-size: 16px;
    margin-bottom: 12px;
}

.tenant-home-hero .description {
    color: var(--text-tertiary);
    max-width: 640px;
    margin: 0 auto 16px;
    font-size: 14px;
    line-height: 1.7;
}

.tenant-home-hero .join-cta {
    display: inline-block;
    margin-top: 8px;
}

/* ============================================================
   Phase C / Task 2.1 — Mobile bottom navigation bar
   ============================================================ */

/* Hidden on desktop — only shown at ≤768px via the @media block below */
.bottom-nav {
    display: none;
}

.bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: 10px;
    font-family: var(--font-body);
    letter-spacing: 0.02em;
    min-width: 48px;
    min-height: 48px;
    padding: 4px 8px;
    justify-content: center;
    transition: color 0.15s;
    border-radius: 6px;
}

.bottom-nav-item.active,
.bottom-nav-item:hover {
    color: var(--accent);
}

.bottom-nav-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
        background: rgba(8, 10, 16, 0.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        padding: 6px 4px max(6px, env(safe-area-inset-bottom));
        justify-content: space-around;
        align-items: center;
    }

    body {
        padding-bottom: 72px;
    }
}

/* ============================================================
   Phase C / Task 2.2 — Mobile search modal overlay
   ============================================================ */

.mobile-search-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    transition: color 0.12s;
    align-items: center;
}

.mobile-search-btn:hover { color: var(--text-primary); }

@media (max-width: 768px) {
    .mobile-search-btn { display: flex; }
}

.search-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: flex-start;
    padding-top: max(env(safe-area-inset-top, 0px), 0px);
}

.search-modal-panel {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    background: rgba(14, 16, 22, 0.98);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 12px 12px;
    padding: 12px;
}

.search-modal-header {
    display: flex;
    gap: 8px;
    align-items: center;
}

.search-modal-input {
    flex: 1;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 16px; /* 16px prevents iOS auto-zoom */
    font-family: var(--font-body);
}

.search-modal-input:focus {
    outline: none;
    border-color: var(--border-accent);
}

.search-modal-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.search-modal-close:hover { color: var(--text-primary); }

.search-modal-results {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.search-modal-result-item {
    display: block;
    padding: 10px 12px;
    color: var(--text-primary);
    border-radius: 6px;
    transition: background 0.1s;
}

.search-modal-result-item:hover {
    background: var(--bg-hover);
    color: var(--accent);
}

.search-modal-empty {
    padding: 10px 12px;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* ============================================================
   Phase C / Task 2.3 — top-nav Status link (no new rules needed;
   uses existing .topnav-links a styles automatically)
   ============================================================ */

/* ============================================================
   Phase C / Task 2.4 — Discord-link quick modal + first-login toast
   ============================================================ */

.discord-toast {
    position: fixed;
    bottom: 88px; /* above the mobile bottom nav */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(14, 16, 24, 0.97);
    border: 1px solid rgba(114, 137, 218, 0.4); /* Discord blurple tint */
    border-radius: 8px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--text-secondary);
    z-index: 250;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.discord-toast-link {
    color: var(--accent);
    font-weight: 600;
    white-space: nowrap;
}

.discord-toast-dismiss {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 16px;
    padding: 0 2px;
    line-height: 1;
}

.discord-link-overlay { align-items: center; }

.discord-link-panel {
    max-width: 400px;
    text-align: center;
    padding: 28px 24px;
}

.discord-link-icon {
    color: #5865f2;
    margin-bottom: 12px;
}

.discord-link-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.discord-link-body {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.discord-link-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.discord-link-cta {
    background: #5865f2;
    color: #fff;
    border-radius: 6px;
    padding: 10px 20px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.discord-link-cta:hover { background: #4752c4; color: #fff; }

.discord-link-badge {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 600;
}

.btn-ghost {
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-tertiary);
    border-radius: 6px;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 13px;
    transition: border-color 0.12s, color 0.12s;
}

.btn-ghost:hover {
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--text-primary);
}

/* ============================================================
   Phase C / Task 2.5 — First-login welcome card
   ============================================================ */

.welcome-card {
    max-width: 860px;
    margin: 2rem auto;
    padding: 2rem;
}

.welcome-card h2 {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 6px;
    letter-spacing: 1px;
}

.welcome-sub {
    color: var(--text-secondary);
    font-size: 15px;
    margin-bottom: 20px;
}

.welcome-modes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 16px;
}

@media (max-width: 640px) {
    .welcome-modes { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .welcome-modes { grid-template-columns: repeat(2, 1fr); }
}

.mode-card {
    background: var(--glass-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mode-card-featured {
    border-color: var(--accent);
    background: rgba(0, 224, 255, 0.04);
}

.mode-card strong {
    font-family: var(--font-display);
    font-size: 15px;
    color: var(--text-primary);
}

.mode-card p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    flex: 1;
}

.welcome-dismiss {
    margin-top: 16px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    padding: 4px;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.welcome-dismiss:hover { color: var(--text-tertiary); }

/* ============================================================
   Phase C / Task 2.6d — Status page mobile breakpoints
   (also applied as scoped style in Status.razor if needed)
   ============================================================ */

@media (max-width: 640px) {
    .status-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
    .status-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   Phase C / Task 2.6g — Operator community pages mobile guard
   ============================================================ */

@media (max-width: 768px) {
    .tenant-identity-ribbon {
        padding-right: 12px;
    }
}

/* ============================================================
   Phase C / Task 2.6b — Copy IP button on server cards
   ============================================================ */

.btn-copy-ip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-tertiary);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.btn-copy-ip:hover { background: rgba(255, 255, 255, 0.1); color: var(--text-primary); }

/* ============================================================
   Phase C / Task 2.6e — Explicit notification permission card
   ============================================================ */

.queue-notif-card {
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.queue-notif-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 160px;
}

.queue-notif-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-sm {
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 4px;
}

.btn-accent {
    background: var(--accent);
    color: #000;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: opacity 0.12s;
}

/* ============================================================
   Phase 5.7 — Responsive cleanup at tablet (768px) + phone (375px)
   ============================================================
   Targeted, page-scoped overrides for the four high-traffic public
   pages (/leaderboard, /laps, /matches, /time-attack). Each block
   is intentionally narrow so it does NOT cross-contaminate other
   pages — desktop widths see no change.

   Audit (2026-05-04): static analysis of the page DOMs at 768px
   and 375px identified four classes of issue:
     1. Wide tables (records "Fastest Times" 9 columns) push the
        page wider than the viewport at 768px — need tablet-class
        column hiding (existing col-hide-sm only fires at 640px).
     2. Server-card footer (Connect + Copy IP buttons) overflows
        at 375px — the two side-by-side buttons exceed the card
        gutter on narrow phones.
     3. Match-filters filter-row already collapses at 480px but
        not at the canonical 375px iPhone-SE breakpoint, so we
        re-pin the rule at 375px for clarity (defensive — wider
        breakpoint already covers it, but a future refactor that
        nudges 480→500 would silently regress 375 unless pinned).
     4. /laps detail header (lap-title + lap-time) at 375px —
        scoped CSS file already handles 640px stacking, but the
        time value (2.4rem) still overruns ~360px viewports.
   ============================================================ */

/* Phase 5.7 — tablet (≤768px) cleanup */
@media (max-width: 768px) {
    /* /leaderboard records "Fastest Times" — hide Car + Date columns at
       tablet so the 9-column table fits without horizontal scroll. The
       existing col-hide-sm class only fires at 640px and below; this
       extends the hide-set up to the tablet breakpoint by reusing the
       same class so a future column-add inherits the behavior. */
    .pub-table .col-hide-sm { display: none; }

    /* /time-attack server-card footer — Connect + Copy IP buttons stack
       vertically so the Copy IP label never wraps awkwardly mid-button.
       The 8px gap matches the existing flex gap on .server-links. */
    .server-card-footer {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
}

/* Phase 5.7 — phone (≤375px) cleanup, iPhone SE / small Android */
@media (max-width: 375px) {
    /* /matches — collapse filter-row to one-per-row at the canonical
       small-phone width. Existing 480px rule covers this transitively
       but re-pinning at 375px makes the contract explicit. */
    .match-filters .filter-row { flex-direction: column; }
    .filter-select,
    .filter-toggle,
    .filter-search-wrap,
    .filter-search { width: 100%; }

    /* /laps/{id} detail — shrink the giant lap-time-value (2.4rem on
       desktop) to fit alongside the player name on narrow phones.
       The Detail.razor.css scoped sheet stacks the header at 640px;
       this rule additionally shrinks the time digits at 375px so they
       never wrap mid-time (e.g. 2:34.567 across two lines). */
    .lap-time-value { font-size: 1.8rem; }
    .lap-title h1 { font-size: 1.4rem; }

    /* /leaderboard rating tab — reduce horizontal padding on the
       sticky table header so all columns fit inside a 375px viewport.
       The .pub-table 768px rule already drops to 8px/10px; this
       further shrinks at phone width. */
    .pub-table th, .pub-table td { padding: 6px 8px; font-size: 11px; }
}

.btn-accent:hover { opacity: 0.85; }

/* Wave 7 — /coming-soon landing, served by PublicSiteGateMiddleware
   when PublicSiteDisabled flag is on. Minimal-layout: no nav, footer,
   or bottom-nav. */
.minimal-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: 24px;
}
.coming-soon-card {
    max-width: 480px;
    padding: 48px 32px;
    text-align: center;
}
.coming-soon-logo {
    width: 180px;
    height: auto;
    margin-bottom: 24px;
}
.coming-soon-wordmark {
    font-family: 'Rajdhani', sans-serif;
    font-size: 56px;
    letter-spacing: 4px;
    color: var(--accent);
    margin: 0 0 24px 0;
}
.coming-soon-tagline {
    font-size: 16px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}
.coming-soon-status {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 32px;
}
.coming-soon-cta {
    display: inline-block;
    padding: 12px 24px;
}