/* ============================================================
   HELLBALL — FHTV SPORTS RELAY TERMINAL
   ============================================================
   Industrial broadcast aesthetic.  Deep navy panels, CRT cyan
   accents, condensed industrial headers, monospace data.
   Every existing flavor class is preserved by name so the
   commentary / weather / mood / momentum / etc. systems keep
   rendering — they're just retuned to this palette.
   ============================================================ */

:root {
    --bg-deep:     #050810;
    --bg-panel:    #0a1426;
    --bg-panel-2:  #0e1a30;
    --bg-rail:     #122140;
    --bg-rail-2:   #1a2c4e;
    --bg-card:     #0d1830;

    --ink:         #d8e3f0;
    --ink-soft:    #a5b4c8;
    --ink-dim:     #7e8ea8;   /* was #6a7a95 — slight lift for body-secondary */
    --ink-faint:   #6a7a95;   /* was #3a4860 — major lift for labels/utility text (~5.1:1 AA) */
    --ink-ghost:   #3a4860;   /* preserved former tone for grid rules only */

    --grid:        #1d2a44;
    --rule:        #25334e;
    --rule-strong: #344768;

    --cyan:        #4dd0e1;
    --cyan-dim:    #2a8a99;
    --teal:        #4a90a0;
    --signal:      #6a9ad0;
    --phosphor:    #5fffaa;
    --gold:        #ffd966;

    --amber:       #ffb84d;
    --orange:      #ff8a3d;
    --alert-red:   #ff4a4a;
    --emergency:   #ff2a2a;

    /* Legacy aliases — existing classes reference these */
    --bg:       var(--bg-deep);
    --bg-2:     var(--bg-panel);
    --fg:       var(--ink);
    --muted:    var(--ink-dim);
    --accent:   var(--cyan);
    --accent-2: var(--amber);

    --s-1: 4px; --s-2: 8px; --s-3: 12px;
    --s-4: 16px; --s-5: 24px; --s-6: 32px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    min-height: 100vh;
    background: var(--bg-deep);
    color: var(--ink);
    font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0.01em;
}

/* CRT atmosphere — VERY subtle. */
body::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 998;
    background: repeating-linear-gradient(to bottom,
        transparent 0 2px,
        rgba(77, 208, 225, 0.02) 3px,
        transparent 3px 4px);
}
body::after {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 997;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.5) 100%);
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--phosphor); }
::selection { background: rgba(77, 208, 225, 0.3); color: var(--ink); }

/* Industrial header type — applied to brand, headers, all labels */
.brand, h1, h2, h3, h4,
.panel-title, .panel-rail .title, .panel-rail .label,
.signal-status .label, .signal-header,
nav a, .nav-divider, .nav-coins, .nav-user, .nav-admin,
.section-heading, .label, .badge, .badge-large,
.fhtv-tag, .vesper-tag, .ad-tag, .current-tag,
.fhtv-headline-label, .crowd-mood-label, .momentum-label, .tension-label,
.incident-label, .flavor-label, .chant-label, .rivalry-label,
.reaction-label, .stadium-label, .history-label,
.fan-label, .featured-label, .current-line-label,
.commentary-speaker, .player-flavor-tag,
.severe-alert .label, .interruption,
.live-indicator, .champion-banner {
    font-family: "Barlow Condensed", "Inter", "Helvetica Neue", system-ui,
                 -apple-system, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---------- Signal header (top strip) ---------- */
.signal-header {
    background: var(--bg-deep);
    border-bottom: 1px solid var(--rule);
    color: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.18em;
    padding: 5px 0;
}
.signal-header .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); flex-wrap: wrap;
}
.signal-status {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ink-dim);
}
.signal-status .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--phosphor);
    box-shadow: 0 0 4px var(--phosphor);
}
.signal-status .dot.pulse { animation: signal-pulse 2.4s ease-in-out infinite; }
.signal-status .dot.amber { background: var(--amber); box-shadow: 0 0 4px var(--amber); }
.signal-status .dot.red   { background: var(--alert-red); box-shadow: 0 0 4px var(--alert-red); }
.signal-status .label { color: var(--ink-faint); }
.signal-status .value { color: var(--ink-soft); }
@keyframes signal-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ---------- Network bar (main nav) ---------- */
.site-header {
    background: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-deep) 100%);
    border-bottom: 2px solid var(--cyan);
    padding: var(--s-3) 0 var(--s-2);
}
.site-header .wrap {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--s-3);
}
.brand-group { display: flex; flex-direction: column; }
.brand {
    font-size: 28px;
    color: var(--cyan);
    letter-spacing: 0.22em;
    line-height: 1;
    padding: 2px 0;
    text-shadow: 0 0 7px rgba(77, 208, 225, 0.22);
}
.brand:hover { color: var(--phosphor); }
.brand-sub {
    color: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-top: 3px;
    font-family: "Barlow Condensed", sans-serif;
}

nav { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
nav a {
    color: var(--ink-soft);
    font-size: 13px;
    letter-spacing: 0.14em;
    border-bottom: 2px solid transparent;
    padding: 2px 0;
    transition: color 0.15s, border-color 0.15s;
}
nav a:hover { color: var(--cyan); border-bottom-color: var(--cyan); }
.nav-divider { color: var(--ink-faint); user-select: none; }
nav a.nav-active {
    color: var(--cyan) !important;
    border-bottom-color: var(--cyan) !important;
}
.nav-signup {
    color: var(--phosphor) !important;
    border: 1px solid var(--phosphor);
    padding: 1px 8px !important;
    font-size: 11px !important;
}
.nav-signup:hover {
    background: rgba(95, 255, 170, 0.1);
    color: var(--phosphor) !important;
    border-bottom-color: transparent !important;
}
.nav-coins {
    color: var(--gold) !important;
    font-family: ui-monospace, monospace !important;
    text-transform: none !important;
    letter-spacing: 0.04em !important;
}
.nav-coins:hover { color: var(--amber) !important; border-bottom-color: var(--amber) !important; }
.nav-admin { color: var(--alert-red) !important; }
.nav-admin:hover { color: var(--emergency) !important; border-bottom-color: var(--emergency) !important; }

/* Live game indicator dot on SCHEDULE nav link */
.nav-live-dot {
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--phosphor);
    border-radius: 50%;
    margin-left: 4px;
    vertical-align: middle;
    position: relative;
    top: -1px;
    box-shadow: 0 0 5px var(--phosphor);
    animation: signal-pulse 1.8s ease-in-out infinite;
}

/* ---------- Layout ---------- */
.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--s-4);
}
main.wrap { padding-top: var(--s-4); padding-bottom: var(--s-5); }
section { margin: var(--s-4) 0; }
section + section { margin-top: var(--s-5); }

/* ---------- Panels ---------- */
.panel {
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    margin: var(--s-3) 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset;
}
.panel-rail {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3);
    background: var(--bg-rail);
    border-bottom: 1px solid var(--rule);
    padding: 6px var(--s-3);
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    line-height: 1.4;
}
.panel-rail .title {
    color: var(--cyan);
    letter-spacing: 0.2em;
    font-size: 12px;
}
.panel-rail .meta { display: inline-flex; align-items: center; gap: var(--s-3); }
.panel-rail .meta .value { color: var(--ink-soft); margin-left: 4px; }
.panel-body { padding: var(--s-3) var(--s-4); }

/* ---------- Hero tag (inner pages) ---------- */
.hero-tag {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--s-2);
}

/* ---------- Hero ---------- */
.hero {
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--cyan);
    padding: var(--s-4);
    margin: var(--s-3) 0 var(--s-4);
}
.hero h1 {
    font-size: 32px;
    color: var(--ink);
    margin: 0 0 var(--s-2);
    letter-spacing: 0.08em;
    line-height: 1.05;
}
.hero h2 { margin-top: var(--s-3); }
.hero p { margin: 6px 0; }
.hero .park {
    color: var(--ink-dim);
    letter-spacing: 0.16em;
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: var(--s-2);
}
.hero .record { font-size: 13px; color: var(--ink-soft); }
.hero .lore {
    color: var(--ink-soft);
    border-left: 2px solid var(--rule);
    padding-left: var(--s-3);
    margin-top: var(--s-3);
    line-height: 1.55;
}

h1, h2, h3 { color: var(--ink); line-height: 1.15; }
h1 { font-size: 28px; }
h2 {
    font-size: 16px;
    color: var(--cyan);
    border-bottom: 1px solid var(--rule);
    padding-bottom: 4px;
    margin: var(--s-4) 0 var(--s-3);
    letter-spacing: 0.14em;
}
h3 { font-size: 14px; color: var(--cyan); letter-spacing: 0.12em; }

.muted { color: var(--ink-dim); }
.small { font-size: 11px; }
code { font-family: ui-monospace, monospace; color: var(--phosphor); }

/* ---------- Buttons ---------- */
button, input[type="submit"], .btn {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 13px;
    background: var(--bg-rail);
    color: var(--cyan);
    border: 1px solid var(--cyan-dim);
    padding: 6px var(--s-4);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
button:hover, .btn:hover {
    background: var(--cyan-dim);
    color: var(--ink);
    border-color: var(--cyan);
}
button:disabled {
    opacity: 0.4; cursor: not-allowed;
    background: var(--bg-rail); color: var(--ink-faint);
}
button.retract-btn { color: var(--amber); border-color: var(--amber); }
button.retract-btn:hover { background: rgba(255,184,77,0.15); color: var(--amber); }

input[type="number"], input[type="text"], input[type="password"] {
    font-family: ui-monospace, monospace;
    background: var(--bg-deep);
    color: var(--ink);
    border: 1px solid var(--rule);
    padding: 5px var(--s-2);
    font-size: 13px;
}
input:focus { outline: none; border-color: var(--cyan); }

/* ---------- Tables ---------- */
table.standings, table.roster {
    width: 100%;
    border-collapse: collapse;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    background: var(--bg-panel);
    border: 1px solid var(--rule);
}
table.standings thead, table.roster thead {
    background: var(--bg-rail);
    color: var(--ink-faint);
}
table.standings th, table.roster th {
    text-align: left;
    padding: 6px var(--s-2);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule-strong);
    color: var(--ink-soft);
}
table.standings td, table.roster td {
    padding: 5px var(--s-2);
    border-bottom: 1px solid var(--grid);
    color: var(--ink-soft);
}
table.standings tbody tr:hover, table.roster tbody tr:hover {
    background: rgba(77, 208, 225, 0.04);
}
table.standings tbody tr:last-child td,
table.roster tbody tr:last-child td { border-bottom: none; }
.rd-pos { color: var(--phosphor); }
.rd-neg { color: var(--alert-red); }
/* Played games: muted and greyed out — history, not action */
.sched-played td { color: var(--ink-dim); opacity: 0.7; }
.sched-played a { color: var(--ink-soft); }

/* Pending games: full brightness + left accent — these are bettable */
.sched-pending td { color: var(--ink); }
.sched-pending:hover td { background: rgba(77, 208, 225, 0.04); }
.sched-pending td:first-child { border-left: 2px solid var(--amber); padding-left: 6px; }

/* Live games: phosphor pulse + glowing border */
.sched-live td { color: var(--ink); }
.sched-live td:first-child {
    border-left: 2px solid var(--phosphor);
    padding-left: 6px;
}
.sched-live { animation: row-live-pulse 2.5s ease-in-out infinite; }
@keyframes row-live-pulse {
    0%, 100% { background: transparent; }
    50%       { background: rgba(95, 255, 170, 0.04); }
}
.sched-live:hover td { background: rgba(95, 255, 170, 0.07); }

/* LIVE link + dot inside schedule table */
.sched-live-link {
    color: var(--phosphor) !important;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.sched-live-link:hover { color: var(--phosphor) !important; text-decoration: underline; }
.sched-live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    background: var(--phosphor);
    border-radius: 50%;
    box-shadow: 0 0 6px var(--phosphor);
    animation: signal-pulse 1.8s ease-in-out infinite;
    flex-shrink: 0;
}

/* ── Schedule: NOW LIVE callout bar ────────────────────────────── */
.now-live-bar {
    display: flex;
    align-items: center;
    gap: var(--s-4);
    padding: var(--s-2) var(--s-4);
    margin-bottom: var(--s-3);
    background: var(--bg-panel);
    border: 1px solid var(--phosphor);
    border-left: 3px solid var(--phosphor);
    box-shadow: 0 0 16px rgba(95, 255, 170, 0.06);
    animation: row-live-pulse 2.5s ease-in-out infinite;
    flex-wrap: wrap;
}
.now-live-pulse {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    color: var(--phosphor);
    white-space: nowrap;
    flex-shrink: 0;
}
.now-live-games {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-3);
}
.now-live-game {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-decoration: none;
    color: var(--ink-soft);
    padding: 3px 10px;
    border: 1px solid var(--rule-strong);
    transition: border-color 0.12s, color 0.12s;
}
.now-live-game:hover {
    border-color: var(--phosphor);
    color: var(--ink);
}
.now-live-sep { color: var(--ink-faint); font-size: 10px; }
.now-live-arrow { color: var(--phosphor); font-size: 11px; }

/* ---------- Game / event lists ---------- */
ul.game-list, ul.event-list {
    list-style: none; padding: 0; margin: var(--s-2) 0;
    border: 1px solid var(--rule);
    background: var(--bg-panel);
}
ul.game-list li, ul.event-list li {
    padding: 6px var(--s-3);
    border-bottom: 1px solid var(--grid);
    font-family: ui-monospace, monospace;
    font-size: 13px;
    color: var(--ink-soft);
}
ul.game-list li:last-child, ul.event-list li:last-child { border-bottom: none; }
ul.game-list li:hover, ul.event-list li:hover { background: rgba(77,208,225,0.03); }

.badge, .badge-large {
    display: inline-block;
    background: var(--bg-rail-2);
    color: var(--gold);
    border: 1px solid var(--rule-strong);
    padding: 1px 6px;
    font-size: 9px;
    letter-spacing: 0.18em;
    margin-left: 4px;
}
.badge-large { font-size: 11px; padding: 3px var(--s-2); }
/* Weather pill inherits its color from the per-type class below.
   The base just ensures the font renders right on small badges. */
.weather-pill { color: var(--cyan); border-color: var(--cyan-dim); font-size: 9.5px; }

/* ---------- Two-col ---------- */
.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
    margin: var(--s-4) 0;
}
@media (max-width: 720px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Broadcast cards (Vesper / FHTV / Current / Sponsored) ---------- */
.vesper-card, .fhtv-card, .current-card, .ad-card {
    margin: 0 0 var(--s-2);
    padding: 6px var(--s-3);
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    border-left-width: 3px;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    font-size: 13px;
    line-height: 1.3;
}
.vesper-card  { border-left-color: var(--alert-red); }
.fhtv-card    { border-left-color: var(--amber); }
.current-card { border-left-color: var(--signal); }
.ad-card      { border-left-color: var(--ink-faint); background: var(--bg-deep); }

.vesper-tag, .fhtv-tag, .current-tag, .ad-tag {
    flex-shrink: 0;
    padding: 3px 8px;
    font-size: 10px;
    background: var(--bg-rail);
    color: var(--ink-dim);
    border: 1px solid var(--rule-strong);
}
.vesper-tag  { color: var(--alert-red); border-color: var(--alert-red); }
.fhtv-tag    { color: var(--amber);     border-color: var(--amber); }
.current-tag { color: var(--signal);    border-color: var(--signal); }
.ad-tag      { color: var(--ink-faint); }

.vesper-line, .fhtv-line, .current-line, .ad-line { color: var(--ink-soft); }
.fhtv-line, .current-line, .ad-line { font-style: italic; }

/* ---------- Game-page broadcast stack ---------- */
.fhtv-headline, .current-line, .stadium-line, .chant-line, .rivalry-line,
.crowd-mood, .momentum-line, .tension-line, .incident-line,
.reaction-line, .history-line, .fan-line, .featured-line, .flavor-line {
    margin: 3px 0;
    font-size: 13px;
    letter-spacing: 0.01em;
    line-height: 1.45;
}
.fhtv-headline {
    border-left: 2px solid var(--amber);
    padding-left: var(--s-2);
    margin-bottom: var(--s-2);
}
.fhtv-headline-label, .current-line-label, .stadium-label,
.chant-label, .rivalry-label, .crowd-mood-label, .momentum-label,
.tension-label, .incident-label, .reaction-label, .history-label,
.fan-label, .featured-label, .flavor-label {
    color: var(--ink-faint);
    margin-right: 6px;
    font-size: 10px;
    letter-spacing: 0.18em;
}
.fhtv-headline-value, .current-line-value, .stadium-value,
.flavor-value, .chant-value { color: var(--ink); }
.crowd-mood-value { color: var(--amber); letter-spacing: 0.06em; font-weight: bold; }
.momentum-value   { color: var(--ink); }
.tension-value    { color: var(--amber); }
.incident-value   { color: var(--alert-red); font-weight: bold; }
.reaction-value   { color: var(--signal); }
.rivalry-value    { color: var(--alert-red); font-weight: bold; }
.history-value    { color: var(--ink-soft); font-style: italic; }
.history-line {
    margin-top: var(--s-3);
    padding-left: var(--s-2);
    border-left: 1px solid var(--gold);
}
.history-line::before {
    content: "★ ";
    color: var(--gold);
    font-size: 10px;
    margin-right: 2px;
}
.stadium-value.warning { color: var(--amber); }
.fan-value        { color: var(--ink); font-style: italic; }

.live-indicator {
    color: var(--phosphor);
    letter-spacing: 0.22em;
    font-size: 14px;
    margin: 0 0 var(--s-2);
}
.vesper-inline {
    color: var(--alert-red);
    font-style: italic;
    font-size: 13px;
    margin: 4px 0;
    border-left: 2px solid var(--alert-red);
    padding-left: var(--s-2);
}

.severe-alert {
    margin-bottom: var(--s-2);
    padding: 6px var(--s-3);
    background: linear-gradient(180deg, #2a0808 0%, #1a0606 100%);
    border: 1px solid var(--alert-red);
    border-left: 4px solid var(--alert-red);
    color: var(--ink);
    font-size: 12px;
    animation: severe-flash 1.6s ease-in-out infinite;
}
.severe-alert .label {
    background: var(--alert-red);
    color: var(--bg-deep);
    padding: 2px 6px;
    font-size: 10px;
    letter-spacing: 0.18em;
    margin-right: var(--s-2);
}
@keyframes severe-flash {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.18); }
}

.interruption {
    margin: 4px 0;
    padding: 4px var(--s-3);
    border: 1px dashed var(--signal);
    background: var(--bg-deep);
    color: var(--signal);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    letter-spacing: 0.14em;
}
.interruption-emergency_weather   { color: var(--amber); border-color: var(--amber); }
.interruption-public_apology      { color: var(--ink-dim); border-color: var(--rule-strong); }
.interruption-weird_static        { color: var(--phosphor); border-color: var(--phosphor); letter-spacing: 0.22em; }
.interruption-faction_propaganda  { color: var(--gold); border-color: var(--gold); }
.interruption-signal_hijack       { color: var(--alert-red); border-color: var(--alert-red); }

.commentary-block {
    margin: var(--s-3) 0;
    padding: var(--s-2) var(--s-3);
    background: rgba(77, 208, 225, 0.04);
    border-left: 2px solid var(--cyan-dim);
}
.commentary-block.signoff {
    border-left-color: var(--alert-red);
    background: rgba(255, 74, 74, 0.05);
    margin-top: var(--s-4);
}
.commentary-line { margin: 2px 0; font-size: 13px; }
.commentary-speaker {
    color: var(--cyan);
    font-size: 10px;
    margin-right: var(--s-2);
}
.commentary-text { color: var(--ink); font-style: italic; }

.featured-player {
    margin: var(--s-3) 0;
    padding: var(--s-2) var(--s-3);
    background: rgba(106, 154, 208, 0.06);
    border-left: 2px solid var(--signal);
}
.featured-name {
    color: var(--ink);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    font-size: 14px;
    margin-right: 4px;
}
.featured-name:hover { color: var(--cyan); }
.featured-aka    { color: var(--amber); font-style: italic; }
.featured-walkup { color: var(--ink); }
.featured-rep    { color: var(--ink-soft); font-style: italic; }

.player-flavor-row td {
    padding: 2px 8px 8px;
    border-top: none;
    border-bottom: 1px solid var(--rule-strong);
    font-size: 11px;
    color: var(--ink-dim);
}
.player-flavor-tag {
    color: var(--ink-faint);
    margin-right: 3px;
    font-size: 9px;
}
.player-flavor-nick  { color: var(--amber);  font-style: italic; margin-right: 6px; }
.player-flavor-trait { color: var(--ink-soft); margin-right: 6px; }
.player-flavor-rumor { color: var(--ink-dim);  font-style: italic; }
.player-flavor-sep   { color: var(--rule-strong); margin: 0 4px; }

.champion-banner {
    color: var(--gold);
    letter-spacing: 0.18em;
    font-size: 18px;
    background: linear-gradient(90deg, var(--bg-rail), var(--bg-deep));
    border: 1px solid var(--gold);
    border-left: 4px solid var(--gold);
    padding: var(--s-2) var(--s-3);
    margin: var(--s-3) 0;
}
.decree-applied-banner {
    color: var(--cyan);
    background: var(--bg-rail);
    border: 1px solid var(--cyan-dim);
    border-left: 4px solid var(--cyan);
    padding: var(--s-2) var(--s-3);
    font-size: 12px;
    letter-spacing: 0.08em;
}
.ballot-banner {
    color: var(--amber);
    background: var(--bg-rail);
    border: 1px solid var(--amber);
    border-left: 4px solid var(--amber);
    padding: var(--s-2) var(--s-3);
    font-size: 12px;
}
.ballot-banner a { color: var(--amber); text-decoration: underline; }
.ballot-banner a:hover { color: var(--gold); }

.bet-error {
    color: var(--alert-red);
    border: 1px solid var(--alert-red);
    background: rgba(255,74,74,0.07);
    padding: 6px var(--s-3);
    font-size: 12px;
}
.bet-ok {
    color: var(--phosphor);
    border: 1px solid var(--phosphor);
    background: rgba(95,255,170,0.07);
    padding: 6px var(--s-3);
    font-size: 12px;
}

.weather-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--rule-strong);
    background: var(--bg-rail);
    color: var(--cyan);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 11px;
    padding: 5px var(--s-3);
    margin: 4px 0;
    border-radius: 2px;
}

/* Per-type colors — applied to both .weather-banner and .weather-pill */
.weather-brimstone          { color: var(--alert-red); border-color: var(--alert-red); }
.weather-echo               { color: var(--gold);      border-color: var(--gold); }
.weather-curse              { color: var(--alert-red); border-color: var(--alert-red); }
.weather-blessing           { color: var(--phosphor);  border-color: var(--phosphor); }
.weather-raining-hotdogs    { color: var(--orange);    border-color: var(--orange); }
.weather-herds-of-badgers   { color: var(--amber);     border-color: var(--amber); }
.weather-upside-down-rain   { color: var(--signal);    border-color: var(--signal); }
.weather-eclipse            { color: var(--ink-soft);  border-color: var(--ink-soft); background: #0a0a14; }
.weather-haunted            { color: var(--cyan);      border-color: var(--cyan); }
.weather-chaos-monsoon      { color: var(--alert-red); border-color: var(--alert-red); animation: chaosFlicker 1.4s ease-in-out infinite; }
.weather-the-erikzone       { color: #ff4fa3;          border-color: #ff4fa3;        animation: erikzonePulse 2s ease-in-out infinite; }
.weather-bob-war-reignites  { color: var(--orange);    border-color: var(--orange); }
.weather-onion-mist         { color: var(--phosphor);  border-color: var(--phosphor); }
.weather-captains-council   { color: var(--cyan);      border-color: var(--cyan); }
.weather-floor-42-pressing  { color: var(--signal);    border-color: var(--signal); }
.weather-hidden             { color: var(--ink-dim);   border-color: var(--rule); letter-spacing: 0.14em; }

@keyframes chaosFlicker {
    0%, 100% { opacity: 1; }
    25%       { opacity: 0.7; color: var(--gold); border-color: var(--gold); }
    75%       { opacity: 0.85; color: var(--signal); border-color: var(--signal); }
}

@keyframes erikzonePulse {
    0%, 100% { opacity: 1; color: #ff4fa3; border-color: #ff4fa3; }
    33%       { opacity: 0.85; color: #ffe066; border-color: #ffe066; }
    66%       { opacity: 0.9;  color: #a0f0c0; border-color: #a0f0c0; }
}

.weather-live-tag {
    font-size: 8px;
    letter-spacing: 0.2em;
    padding: 1px 5px;
    border: 1px solid currentColor;
    opacity: 0.7;
    margin-left: 4px;
    vertical-align: middle;
}

.consensus-bar {
    width: 100%; height: 6px;
    border: 1px solid var(--rule);
    margin-top: 4px;
    display: flex;
}
.consensus-away, .consensus-home { display: block; height: 100%; }

pre {
    font-family: ui-monospace, monospace;
    background: var(--bg-deep);
    border: 1px solid var(--rule);
    padding: var(--s-3);
    color: var(--phosphor);
    font-size: 13px;
    overflow-x: auto;
    margin: var(--s-2) 0;
}

.civic-notes {
    list-style: none; padding: 0;
    margin: var(--s-3) 0 0;
    border-left: 2px solid var(--cyan-dim);
}
.civic-notes li {
    padding: 3px 0 3px var(--s-3);
    color: var(--ink-dim);
    font-size: 12px;
}
.civic-notes li + li { border-top: 1px dashed var(--grid); }

.about-teams {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
}
@media (max-width: 640px) { .about-teams { grid-template-columns: 1fr; } }
.about-team {
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--cyan-dim);
    padding: var(--s-2) var(--s-3);
}
.about-team h3 { margin: 0 0 2px; }
.about-team h3 a { color: var(--ink); }
.about-team p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-soft); }

/* Weather reference — compact condition cards + park signature callout */
.weather-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-2);
    margin-top: var(--s-3);
}
@media (max-width: 640px) { .weather-grid { grid-template-columns: 1fr; } }
.weather-cell {
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    padding: var(--s-2) var(--s-3);
}
.weather-cell p {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-soft);
}
.weather-rare-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--alert-red);
    border: 1px solid rgba(255, 74, 74, 0.5);
    border-radius: 2px;
    vertical-align: 2px;
}
.weather-park-tag {
    display: block;
    margin-top: 3px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
}
.park-weather-callout {
    margin-top: var(--s-4);
    padding: var(--s-2) var(--s-3);
    background: rgba(255, 199, 87, 0.06);
    border: 1px solid rgba(255, 199, 87, 0.35);
    border-left: 3px solid var(--gold);
}
.park-weather-callout .pw-title {
    display: block;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold);
}
.park-weather-callout p {
    margin: 2px 0 0;
    font-size: 12px;
    color: var(--ink-soft);
}
.about-team h3 a:hover { color: var(--cyan); }
.about-team p { margin: 0; color: var(--ink-soft); font-size: 12px; line-height: 1.5; }

.decree-card {
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--cyan-dim);
    padding: var(--s-3);
    margin: var(--s-3) 0;
}
.decree-card.decree-leader { border-left-color: var(--gold); }
.decree-head {
    display: flex; justify-content: space-between;
    align-items: baseline; gap: var(--s-3);
}
.decree-head h3 { margin: 0; color: var(--cyan); font-size: 14px; }
.decree-votes {
    color: var(--gold);
    font-family: ui-monospace, monospace;
    font-size: 12px;
}
.decree-bar {
    width: 100%; height: 4px;
    background: var(--bg-deep);
    border: 1px solid var(--rule);
    margin-top: var(--s-2);
}
.decree-bar span { display: block; height: 100%; background: var(--gold); }
.decree-preview {
    list-style: none; padding: 0;
    margin: var(--s-2) 0;
    border-left: 2px solid var(--cyan-dim);
}
.decree-preview li {
    padding: 2px 0 2px var(--s-3);
    color: var(--ink-soft);
    font-size: 12px;
}
.vote-controls {
    display: flex; gap: var(--s-3); flex-wrap: wrap;
    margin-top: var(--s-3); align-items: flex-end;
}
.vote-form { display: flex; gap: var(--s-2); align-items: center; }
.vote-form label {
    color: var(--ink-faint);
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-family: "Barlow Condensed", sans-serif;
}

.resurrection {
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    padding: var(--s-3);
    margin: var(--s-3) 0;
}
.fate-incinerated { color: var(--ink-faint); }
.fate-incinerated td { background: rgba(255,74,74,0.025); }

.streak {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    padding: 1px 4px;
    border: 1px solid var(--rule-strong);
    background: var(--bg-rail);
    color: var(--ink-soft);
    letter-spacing: 0.16em;
    font-family: "Barlow Condensed", sans-serif;
}
.streak.streak-HOT { color: var(--amber); border-color: var(--amber); }

/* ---------- Auth forms (login / signup) ---------- */
.auth-form {
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    padding: var(--s-4);
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--cyan-dim);
    margin: var(--s-3) 0;
}
.auth-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.auth-form input[type="text"],
.auth-form input[type="password"] {
    width: 100%;
    font-size: 14px;
    padding: 8px var(--s-3);
    background: var(--bg-deep);
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    letter-spacing: 0.04em;
    transition: border-color 0.12s;
}
.auth-form input:focus {
    outline: none;
    border-color: var(--cyan);
    background: var(--bg-panel);
}
.auth-form button[type="submit"] {
    align-self: flex-start;
    font-size: 13px;
    padding: 8px var(--s-5);
    background: var(--cyan-dim);
    color: var(--ink);
    border-color: var(--cyan);
    letter-spacing: 0.16em;
    margin-top: var(--s-1);
}
.auth-form button[type="submit"]:hover {
    background: var(--cyan);
    color: var(--bg-deep);
}
.auth-hint {
    font-size: 12px;
    color: var(--ink-dim);
    margin: var(--s-2) 0 0;
    letter-spacing: 0.02em;
}
.auth-hint a { color: var(--cyan); }

footer.wrap {
    border-top: 1px solid var(--rule);
    margin-top: var(--s-6);
    padding-top: var(--s-3);
    padding-bottom: var(--s-4);
    color: var(--ink-faint);
}
.network-footer {
    display: flex; justify-content: space-between;
    gap: var(--s-3); flex-wrap: wrap;
    font-size: 10px;
    letter-spacing: 0.16em;
    font-family: "Barlow Condensed", sans-serif;
    text-transform: uppercase;
}
.network-footer .label { color: var(--ink-faint); }
.network-footer .value { color: var(--ink-soft); }

form { margin: var(--s-2) 0; }
form label {
    color: var(--ink-soft);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.vote-form input[type="number"] { width: 80px; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    body { font-size: 13px; }
    .wrap { padding: 0 var(--s-3); }
    .brand { font-size: 22px; letter-spacing: 0.18em; }
    nav { gap: var(--s-2); }
    nav a { font-size: 11px; letter-spacing: 0.1em; }
    .signal-header .wrap { gap: var(--s-2); }
    .signal-status { font-size: 9px; }
    /* Prevent nav from wrapping into a jumbled pile on phones */
    h1 { font-size: 22px; }
    .hero h1 { font-size: 22px; line-height: 1.1; }
    .hero { padding: var(--s-3); }
    table.standings, table.roster { font-size: 11px; }
    table.standings th, table.roster th { font-size: 9px; padding: 4px 5px; }
    table.standings td, table.roster td { padding: 6px 5px; }   /* taller touch targets */
    .panel-body { padding: var(--s-2) var(--s-3); }

    /* Standings: hide RF + RA so W / L / Pct / RD survive */
    table.standings th:nth-child(6),
    table.standings td:nth-child(6),
    table.standings th:nth-child(7),
    table.standings td:nth-child(7) { display: none; }

    /* Schedule: drop the "Type" column (mostly "reg" anyway) */
    table.standings.schedule th:last-child,
    table.standings.schedule td:last-child { display: none; }

    /* Roster: hide Vibe + Item (player flavor sub-row already shows them) */
    table.roster th:nth-child(10),
    table.roster td:nth-child(10),
    table.roster th:nth-child(11),
    table.roster td:nth-child(11) { display: none; }

    /* Flavor labels: keep on same line as their value */
    .crowd-mood-label, .momentum-label, .tension-label, .incident-label,
    .flavor-label, .chant-label, .rivalry-label, .reaction-label,
    .stadium-label, .history-label, .fan-label, .featured-label,
    .current-line-label, .fhtv-headline-label {
        display: inline-block;
        min-width: 64px;
    }
}

/* Narrow phones: nav scrolls horizontally rather than wrapping */
@media (max-width: 540px) {
    .site-header .wrap { flex-wrap: wrap; gap: var(--s-2); }
    nav {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 3px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        border-top: 1px solid var(--rule);
        padding-top: var(--s-2);
        margin-top: 2px;
    }
    nav::-webkit-scrollbar { display: none; }
    nav a, nav span { white-space: nowrap; flex-shrink: 0; }
}

/* ---------- Game hero zone separator ---------- */
.hero-zone-sep {
    margin: var(--s-3) calc(var(--s-4) * -1) var(--s-3);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--rule-strong) 14%,
                                       var(--rule-strong) 86%, transparent 100%);
    border: none;
}

/* ---------- Empty-state monitoring panel (decrees/leaderboard) ---------- */
.monitoring-panel {
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--ink-dim);
    padding: var(--s-3) var(--s-4);
    margin: var(--s-3) 0;
}
.monitoring-panel .row {
    display: flex; gap: var(--s-4); flex-wrap: wrap;
    font-size: 12px; letter-spacing: 0.04em;
    margin: 4px 0;
}
.monitoring-panel .label {
    color: var(--ink-faint);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    min-width: 100px;
    display: inline-block;
}
.monitoring-panel .value { color: var(--ink); }
.monitoring-panel .value.idle    { color: var(--ink-soft); }
.monitoring-panel .value.standby { color: var(--amber); }
.monitoring-panel .value.alive   { color: var(--phosphor); }

/* ============================================================
   LAYOUT GRAMMAR — full-width content shell
   ============================================================ */

.app-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--s-4);
}
.app-main {
    padding-top: var(--s-3);
    padding-bottom: var(--s-5);
    min-width: 0;
}

/* ---------- Telemetry rail ---------- */
.telemetry-rail {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.telemetry-module {
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    position: relative;
}
.module-bar {
    display: flex; justify-content: space-between; align-items: center;
    background: var(--bg-rail);
    border-bottom: 1px solid var(--rule);
    padding: 4px 10px;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--cyan);
    line-height: 1.4;
}
.module-bar .module-id {
    color: var(--ink-faint);
    font-size: 9px;
    letter-spacing: 0.18em;
}
.module-body {
    padding: 8px 10px 9px;
    font-size: 11px;
    line-height: 1.5;
}
.module-row {
    display: flex; justify-content: space-between; gap: 6px;
    margin: 2px 0;
}
.module-row .label {
    color: var(--ink-faint);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.module-row .value {
    color: var(--ink-soft);
    font-family: ui-monospace, monospace;
    font-size: 11px;
    text-align: right;
}
.module-row .value.ok    { color: var(--phosphor); }
.module-row .value.warn  { color: var(--amber); }
.module-row .value.alert { color: var(--alert-red); }
.module-row .value.dim   { color: var(--ink-faint); }

/* Tiny inline status meter — 5 segments, fills based on data-fill */
.meter {
    display: inline-flex; gap: 1px; vertical-align: middle;
    margin-left: 6px;
}
.meter span {
    width: 6px; height: 4px;
    background: var(--rule-strong);
}
.meter span.on { background: var(--cyan); }
.meter span.on.warn { background: var(--amber); }
.meter span.on.alert { background: var(--alert-red); }

.module-link {
    display: block;
    padding: 5px 0 0;
    color: var(--cyan);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-decoration: none;
    border-top: 1px dashed var(--rule);
    margin-top: 4px;
}
.module-link:hover { color: var(--phosphor); }

/* ---------- Hardware details (pseudo-element framing) ---------- */
.panel, .hero, .telemetry-module {
    position: relative;
}
/* Tiny corner brackets — top-left and bottom-right. Subtle. */
.panel::before, .telemetry-module::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px;
    width: 7px; height: 7px;
    border-top: 1px solid var(--cyan-dim);
    border-left: 1px solid var(--cyan-dim);
    pointer-events: none;
}
.panel::after, .telemetry-module::after {
    content: "";
    position: absolute;
    bottom: -1px; right: -1px;
    width: 7px; height: 7px;
    border-bottom: 1px solid var(--cyan-dim);
    border-right: 1px solid var(--cyan-dim);
    pointer-events: none;
}

/* Panel serial number (optional, via data attribute on panel-rail) */
.panel-rail .panel-id {
    color: var(--ink-faint);
    font-family: ui-monospace, monospace;
    font-size: 9px;
    letter-spacing: 0.18em;
    margin-left: var(--s-2);
}

/* Utility strip — narrow horizontal status line between sections */
.utility-strip {
    display: flex; gap: var(--s-3);
    padding: 3px var(--s-3);
    background: var(--bg-rail);
    border: 1px solid var(--rule);
    border-left-width: 3px;
    border-left-color: var(--cyan-dim);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--ink-dim);
    margin: var(--s-3) 0;
    overflow: hidden;
    white-space: nowrap;
}
.utility-strip .label { color: var(--ink-faint); }
.utility-strip .value { color: var(--ink); margin-left: 4px; }

/* Warning strip — diagonal-stripe caution bar */
.warning-strip {
    height: 6px;
    background: repeating-linear-gradient(
        135deg,
        var(--amber) 0 8px,
        #1a0f00 8px 14px
    );
    margin: var(--s-3) 0;
    opacity: 0.55;
}

/* ---------- Game page broadcast-truck grid ---------- */
.broadcast-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--s-4);
}
@media (max-width: 1180px) { .broadcast-grid { grid-template-columns: 1fr; } }

/* ---------- Asymmetric home grid (standings wide, queue narrow) ---------- */
.home-asym {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: var(--s-4);
    margin: var(--s-3) 0;
}
@media (max-width: 720px) { .home-asym { grid-template-columns: 1fr; } }

/* Tweak existing .panel-rail to allow a serial badge on the right */
.panel-rail .meta .panel-id {
    color: var(--ink-faint);
    margin-left: var(--s-3);
}

/* Inactive port indicator — tiny dot row at top-right of telemetry */
.port-strip {
    position: absolute;
    top: 5px; right: 7px;
    display: flex; gap: 2px;
}
.port-strip span {
    width: 3px; height: 3px;
    background: var(--ink-faint);
    border-radius: 50%;
}
.port-strip span.lit { background: var(--phosphor); }

main.app-shell { margin-top: 0; }
footer.wrap { max-width: 1100px; padding: 0 var(--s-4) var(--s-4); }
.network-footer { padding-top: var(--s-3); border-top: 1px solid var(--rule); }

.home-side-stack {
    display: flex; flex-direction: column;
    gap: var(--s-3);
}
.home-side-stack .panel { margin: 0; }

/* ── Account page ────────────────────────────────────────────────── */
.balance-big {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 48px;
    color: var(--gold);
    letter-spacing: 0.04em;
    line-height: 1;
    margin: var(--s-3) 0 var(--s-2);
    text-shadow: 0 0 20px rgba(255, 217, 102, 0.2);
}
.balance-sub {
    font-size: 12px;
    color: var(--ink-faint);
    letter-spacing: 0.14em;
    font-family: "Barlow Condensed", sans-serif;
    text-transform: uppercase;
    margin-bottom: var(--s-2);
}
.nickname-form {
    display: flex;
    gap: var(--s-2);
    align-items: center;
    margin: var(--s-2) 0;
}
.nickname-form input[type="text"] {
    flex: 1;
    max-width: 320px;
    font-size: 14px;
    padding: 6px var(--s-3);
    background: var(--bg-deep);
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    transition: border-color 0.12s;
}
.nickname-form input:focus {
    outline: none;
    border-color: var(--cyan);
}
.nickname-form button {
    font-size: 11px;
    padding: 6px var(--s-3);
    letter-spacing: 0.14em;
    white-space: nowrap;
}

/* ── Player page ─────────────────────────────────────────────────── */
table.stat-line {
    border-collapse: collapse;
    font-family: ui-monospace, monospace;
    font-size: 13px;
    width: auto;
    min-width: 260px;
}
table.stat-line th {
    text-align: left;
    padding: 5px var(--s-4) 5px var(--s-2);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border-bottom: 1px solid var(--grid);
    background: var(--bg-rail);
}
table.stat-line td {
    padding: 5px var(--s-3) 5px var(--s-2);
    border-bottom: 1px solid var(--grid);
    color: var(--ink-soft);
    background: var(--bg-panel);
}
table.stat-line tr:last-child th,
table.stat-line tr:last-child td { border-bottom: none; }
table.stat-line tr:hover td,
table.stat-line tr:hover th { background: rgba(77, 208, 225, 0.04); }

.player-flavor-hero {
    margin: var(--s-3) 0;
    padding: 0 0 var(--s-2);
    background: var(--bg-panel-2);
    border: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.player-flavor-hero .pf-rail {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--s-1) var(--s-3);
    margin-bottom: var(--s-2);
    border-bottom: 1px solid var(--rule);
    background: rgba(106, 154, 208, 0.06);
}
.player-flavor-hero .pf-rail-title,
.player-flavor-hero .pf-rail-meta {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.player-flavor-hero .pf-rail-title { color: var(--signal); }
.player-flavor-hero .pf-rail-meta  { color: var(--ink-faint); }
.player-flavor-hero .pf-sec {
    padding: var(--s-1) var(--s-3);
}
.player-flavor-hero .pf-sec-label {
    display: block;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 2px;
}
.player-flavor-hero .pf-sec-text {
    margin: 0;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 68ch;
}
.player-flavor-hero .pf-signoff {
    margin: var(--s-1) 0 0;
    padding: 0 var(--s-3);
    text-align: right;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    font-style: italic;
    color: var(--ink-faint);
}
/* Projected first-pitch time (slot pacing) */
.first-pitch-line {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--phosphor);
    margin: var(--s-2) 0;
}
a.sched-time { text-decoration: none; border-bottom: 1px dotted var(--rule-strong); }

/* World-wallet link box on the account page */
.wallet-link-box {
    margin-top: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--gold);
    background: var(--bg-panel);
    max-width: 560px;
}
.wallet-link-box form { margin-top: var(--s-2); }
.link-code-display {
    margin: var(--s-2) 0 0;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 15px;
    letter-spacing: 0.2em;
    color: var(--gold);
}

.player-fate-alert {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255, 74, 74, 0.1);
    border: 1px solid var(--alert-red);
    color: var(--alert-red);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: var(--s-2);
}

/* ── Team page — archetype stat bars ─────────────────────────────── */
.archetype-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: var(--s-3) 0;
    max-width: 340px;
}
.archetype-row {
    display: grid;
    grid-template-columns: 56px 1fr 36px;
    gap: var(--s-2);
    align-items: center;
}
.archetype-label {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.archetype-bar {
    height: 6px;
    background: var(--bg-deep);
    border: 1px solid var(--rule);
    position: relative;
    overflow: hidden;
}
.archetype-fill {
    position: absolute;
    top: 0; left: 0; bottom: 0;
    background: var(--cyan-dim);
    transition: width 0.3s ease;
}
.archetype-fill.power { background: var(--alert-red); }
.archetype-fill.glove { background: var(--cyan-dim); }
.archetype-fill.soul  { background: var(--phosphor); }
.archetype-value {
    font-family: ui-monospace, monospace;
    font-size: 11px;
    color: var(--ink-soft);
    text-align: right;
}

/* ── Game page: betting UI ───────────────────────────────────────── */
.game-bet-panel .panel-body { padding: var(--s-4); }

.bet-row {
    display: grid;
    grid-template-columns: 1fr 48px 1fr;
    gap: var(--s-3);
    align-items: start;
}
@media (max-width: 560px) {
    .bet-row { grid-template-columns: 1fr; }
    .bet-vs-divider { display: none; }
}

.bet-card {
    background: var(--bg-panel-2);
    border: 1px solid var(--rule);
    padding: var(--s-3);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    transition: border-color 0.12s;
    position: relative;
}
.bet-card::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px;
    width: 7px; height: 7px;
    border-top: 1px solid var(--cyan-dim);
    border-left: 1px solid var(--cyan-dim);
    pointer-events: none;
}
.bet-card:hover { border-color: var(--cyan-dim); background: var(--bg-rail); }

.bet-team-label {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.1;
}
.bet-odds {
    font-family: ui-monospace, monospace;
    font-size: 22px;
    color: var(--gold);
    letter-spacing: 0.04em;
    line-height: 1;
}
.bet-odds-label {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 10px;
    letter-spacing: 0.18em;
    color: var(--ink-faint);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.bet-form {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin: 0;
}
.bet-form input[type="number"] {
    width: 100%;
    font-size: 14px;
    padding: 6px var(--s-3);
    background: var(--bg-deep);
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    transition: border-color 0.12s;
}
.bet-form input[type="number"]:focus {
    outline: none;
    border-color: var(--cyan);
}
.quick-bets {
    display: flex;
    gap: var(--s-1);
}
.quick-bets button {
    padding: 3px 10px;
    font-size: 10px;
    letter-spacing: 0.12em;
    background: var(--bg-rail);
    border-color: var(--rule-strong);
    color: var(--ink-dim);
    flex: 1;
}
.quick-bets button:hover {
    background: var(--cyan-dim);
    color: var(--ink);
    border-color: var(--cyan);
}
.bet-submit {
    font-size: 12px;
    padding: 6px var(--s-3);
    letter-spacing: 0.16em;
    width: 100%;
}

.bet-vs-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-faint);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.16em;
    padding-top: 48px;
}

.bet-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--rule);
    font-size: 12px;
    color: var(--ink-dim);
}
.bet-balance { color: var(--gold); font-family: ui-monospace, monospace; }

/* Bet status pills */
.bet-status {
    display: inline-block;
    padding: 1px 7px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border: 1px solid;
    margin-left: 4px;
}
.bet-pending  { color: var(--amber);     border-color: var(--amber); }
.bet-won      { color: var(--phosphor);  border-color: var(--phosphor); }
.bet-lost     { color: var(--ink-faint); border-color: var(--rule-strong); }
.bet-void     { color: var(--ink-faint); border-color: var(--rule-strong); }

/* Consensus bar section */
.consensus-section {
    margin: var(--s-3) 0;
    padding: var(--s-3) var(--s-4);
    background: var(--bg-panel);
    border: 1px solid var(--rule);
}
.consensus-label {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    color: var(--ink-faint);
    text-transform: uppercase;
    margin-bottom: var(--s-2);
}
.consensus-teams {
    display: flex;
    justify-content: space-between;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    color: var(--ink-soft);
    margin-bottom: 4px;
}

/* ── Game page: broadcast details (flavor panel) ─────────────────── */
.broadcast-details {
    margin: var(--s-3) 0;
}
.broadcast-details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-rail);
    border-bottom: 1px solid var(--rule);
    padding: 6px var(--s-3);
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--cyan);
    user-select: none;
}
.broadcast-details summary::-webkit-details-marker { display: none; }
.broadcast-details summary::after {
    content: "▸ EXPAND";
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.16em;
}
.broadcast-details[open] summary::after { content: "▾ COLLAPSE"; }
.broadcast-details summary:hover { background: var(--bg-rail-2); }

/* Live score + preview line shown in the collapsed summary bar */
.broadcast-summary-score {
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.06em;
    margin-left: 6px;
    opacity: 0.9;
}
.broadcast-summary-line {
    color: var(--ink-soft);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: 0.03em;
    opacity: 0.75;
}

.broadcast-flavor {
    padding: var(--s-3) var(--s-4);
    background: var(--bg-panel);
    border-top: none;
}

/* Stagger-fade each child in when the panel opens */
@keyframes broadcastLineIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}
.broadcast-details[open] .broadcast-flavor > * {
    opacity: 0;
    animation: broadcastLineIn 0.22s ease-out forwards;
}
.broadcast-details[open] .broadcast-flavor > *:nth-child(1)  { animation-delay: 0.03s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(2)  { animation-delay: 0.07s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(3)  { animation-delay: 0.11s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(4)  { animation-delay: 0.15s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(5)  { animation-delay: 0.19s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(6)  { animation-delay: 0.23s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(7)  { animation-delay: 0.27s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(8)  { animation-delay: 0.31s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(9)  { animation-delay: 0.35s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(10) { animation-delay: 0.38s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(11) { animation-delay: 0.41s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(12) { animation-delay: 0.44s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(13) { animation-delay: 0.47s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(14) { animation-delay: 0.50s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(15) { animation-delay: 0.53s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(16) { animation-delay: 0.55s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(17) { animation-delay: 0.57s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(18) { animation-delay: 0.59s; }
.broadcast-details[open] .broadcast-flavor > *:nth-child(n+19) { animation-delay: 0.61s; }

/* Live inning log pulse dot */
@keyframes logPulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}
.live-pulse {
    color: var(--phosphor);
    animation: logPulse 1.4s ease-in-out infinite;
}

/* ── Inning log embedded inside broadcast panel ─────────────────── */
.broadcast-log-wrap {
    margin-top: var(--s-4);
    border-top: 1px solid var(--rule);
    padding-top: var(--s-3);
}
.broadcast-log-label {
    font-size: 9px;
    letter-spacing: 0.18em;
    color: var(--ink-dim);
    text-transform: uppercase;
    margin: 0 0 var(--s-2);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.broadcast-log-pulse {
    font-size: 8px;
    color: var(--phosphor);
    animation: logPulse 1.4s ease-in-out infinite;
}
pre.log-broadcast {
    max-height: 420px;
    overflow-y: auto;
    font-size: 11px;
    line-height: 1.6;
    background: var(--bg-deep);
    border: 1px solid var(--rule);
    border-radius: 2px;
    padding: var(--s-3) var(--s-3);
    margin: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}

/* ── Game page: linescore + images + log ─────────────────────────── */
pre.linescore {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
    letter-spacing: 0.06em;
    background: var(--bg-deep);
    color: var(--phosphor);
    border: none;
    padding: var(--s-3) var(--s-4);
    overflow-x: auto;
    margin: 0;
    white-space: pre;
}
pre.log {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.6;
    background: var(--bg-deep);
    color: var(--ink-soft);
    border: none;
    padding: var(--s-3) var(--s-4);
    overflow-x: auto;
    margin: 0;
    max-height: 480px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
}
/* Live log: fixed feed window — new lines drip in and auto-scroll to bottom */
pre.log.log-live {
    max-height: 480px;
    overflow-y: auto;
    scroll-behavior: smooth;
}

/* ── Betting explainer strip ─────────────────────────────────────── */
.betting-explainer {
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--amber);
    padding: var(--s-3) var(--s-4);
    margin: 0 0 var(--s-4);
}
.betting-explainer-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}
@media (max-width: 720px) {
    .betting-explainer-row { grid-template-columns: repeat(2, 1fr); }
}
.be-step {
    display: flex; flex-direction: column; gap: 4px;
}
.be-num {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--amber);
    letter-spacing: 0.08em;
    line-height: 1;
}
.be-text {
    font-size: 12px;
    color: var(--ink-soft);
    line-height: 1.4;
}
.be-text a { color: var(--cyan); }
.be-cta {
    display: inline-block;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.2em;
    color: var(--amber);
    text-decoration: none;
    border: 1px solid var(--amber);
    padding: 4px var(--s-3);
    transition: background 0.12s;
}
.be-cta:hover {
    background: rgba(255, 184, 77, 0.12);
    color: var(--amber);
}

/* ── Front-page hero ─────────────────────────────────────────────── */
.front-hero {
    display: flex;
    align-items: flex-start;
    gap: var(--s-5);
    padding: var(--s-5) 0 var(--s-4);
    border-bottom: 1px solid var(--rule);
    margin-bottom: var(--s-4);
}
.front-hero-body {
    flex: 1;
    min-width: 0;
}

/* CRT monitor frame */
.front-hero-screen {
    flex: 0 0 300px;
    position: relative;
    border: 1px solid var(--rule-strong);
    border-radius: 4px;
    background: var(--bg-deep);
    overflow: hidden;
    opacity: 0.72;
    /* red glow matching the logo's flame palette */
    box-shadow: inset 0 0 40px rgba(180, 20, 20, 0.07),
                0 0 24px rgba(180, 20, 20, 0.08),
                0 0 0 1px rgba(77, 208, 225, 0.05);
    /* align with hero title */
    margin-top: var(--s-1);
    align-self: center;
}
.front-hero-screen img {
    display: block;
    width: 100%;
    height: auto;
    /* makes pure black bg transparent — logo floats on the panel */
    mix-blend-mode: lighten;
}
/* Scan-line overlay */
.front-hero-screen::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0, 0, 0, 0.10) 3px,
        rgba(0, 0, 0, 0.10) 4px
    );
    pointer-events: none;
    z-index: 1;
}
/* Corner vignette */
.front-hero-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 50% 50%,
        transparent 50%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
    z-index: 2;
}
/* Hide the screen on smaller viewports */
@media (max-width: 900px) {
    .front-hero { display: block; }
    .front-hero-screen { display: none; }
}
.front-hero-tag {
    display: flex; align-items: center; gap: 8px;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--s-3);
}
.front-hero-title {
    font-size: 64px;
    color: var(--cyan);
    letter-spacing: 0.18em;
    line-height: 1;
    margin: 0 0 var(--s-3);
    text-shadow: 0 0 18px rgba(77, 208, 225, 0.25);
}
.front-hero-sub {
    font-size: 15px;
    color: var(--ink-soft);
    max-width: 560px;
    line-height: 1.6;
    margin: 0 0 var(--s-4);
    letter-spacing: 0.02em;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 500;
}
.front-season-state {
    display: inline-flex; align-items: center; gap: var(--s-2);
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--cyan-dim);
    padding: 5px var(--s-3);
    font-size: 11px;
    letter-spacing: 0.18em;
    font-family: "Barlow Condensed", sans-serif;
    margin-bottom: var(--s-3);
}
.front-season-state .label { color: var(--ink-faint); }
.front-season-state .value { color: var(--ink-soft); }
.front-season-state .value.ok { color: var(--phosphor); }
.front-season-state .value.dim { color: var(--ink-dim); }
.front-sep { color: var(--rule-strong); }

.front-cta {
    display: flex; align-items: center; gap: var(--s-4);
    margin: var(--s-3) 0;
}
.front-cta-btn {
    font-size: 14px !important;
    padding: 8px var(--s-5) !important;
    background: var(--cyan-dim) !important;
    color: var(--ink) !important;
    border-color: var(--cyan) !important;
    letter-spacing: 0.16em;
    text-decoration: none;
    display: inline-block;
    transition: background 0.12s;
}
.front-cta-btn:hover {
    background: var(--cyan) !important;
    color: var(--bg-deep) !important;
}
.front-cta-link {
    color: var(--ink-soft);
    font-size: 12px;
    letter-spacing: 0.08em;
    font-family: "Barlow Condensed", sans-serif;
}
.front-cta-link:hover { color: var(--cyan); }

.front-admin {
    margin-top: var(--s-3);
    display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center;
}

/* ── Team showcase ───────────────────────────────────────────────── */
.front-teams { margin: 0 0 var(--s-4); }
.front-section-label {
    font-family: "Barlow Condensed", sans-serif;
    font-size: 11px;
    letter-spacing: 0.22em;
    color: var(--ink-faint);
    text-transform: uppercase;
    margin-bottom: var(--s-2);
}
.front-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
}
@media (max-width: 720px) {
    .front-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .front-team-grid { grid-template-columns: 1fr; }
}
.front-team-card {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--bg-panel);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--cyan-dim);
    padding: var(--s-3);
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}
.front-team-card:hover {
    background: var(--bg-panel-2);
    color: inherit;
}
.front-team-rank {
    font-size: 10px;
    color: var(--ink-faint);
    letter-spacing: 0.16em;
    font-family: "Barlow Condensed", sans-serif;
}
.front-team-name {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.1;
}
.front-team-record {
    font-family: ui-monospace, monospace;
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 2px;
}

/* ── Quick links strip ───────────────────────────────────────────── */
.front-quicklinks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-3);
    margin: 0 0 var(--s-4);
}
@media (max-width: 720px) {
    .front-quicklinks { grid-template-columns: repeat(2, 1fr); }
}
.front-ql {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--bg-rail);
    border: 1px solid var(--rule);
    padding: var(--s-3) var(--s-3);
    text-decoration: none;
    transition: background 0.12s;
}
.front-ql:hover { background: var(--bg-rail-2); color: inherit; }
.front-ql-icon {
    color: var(--cyan);
    font-size: 14px;
    line-height: 1;
}
.front-ql-title {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.14em;
    color: var(--ink);
    text-transform: uppercase;
}
.front-ql-desc {
    font-size: 11px;
    line-height: 1.4;
}

/* mobile front hero */
@media (max-width: 720px) {
    .front-hero-title { font-size: 44px; }
    .front-hero-sub { font-size: 13px; }
}

/* ── Players list page ───────────────────────────────────────────── */
.player-filter-bar {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    padding-bottom: var(--s-3);
}
.player-filter-bar input[type="text"] {
    background: var(--bg-deep);
    border: 1px solid var(--rule-strong);
    color: var(--ink);
    font-family: ui-monospace, monospace;
    font-size: 12px;
    padding: 5px 10px;
    width: 220px;
    outline: none;
    transition: border-color 0.15s;
}
.player-filter-bar input[type="text"]:focus {
    border-color: var(--cyan);
}
.player-filter-teams {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
}
.filter-team-btn {
    background: transparent;
    border: 1px solid var(--rule-strong);
    color: var(--ink-dim);
    font-family: "Barlow Condensed", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 3px 10px;
    cursor: pointer;
    transition: border-color 0.12s, color 0.12s;
}
.filter-team-btn:hover {
    border-color: var(--team-color, var(--cyan));
    color: var(--team-color, var(--cyan));
}
.filter-team-btn.active {
    border-color: var(--team-color, var(--cyan));
    color: var(--team-color, var(--cyan));
    background: rgba(77, 208, 225, 0.06);
}
.filter-team-btn[data-team=""] { --team-color: var(--cyan); }

/* Sortable table header indicators */
th.sort-col { cursor: pointer; user-select: none; }
th.sort-col:hover { color: var(--cyan); }
th.sort-asc::after  { content: " ↑"; color: var(--cyan); font-size: 10px; }
th.sort-desc::after { content: " ↓"; color: var(--cyan); font-size: 10px; }

/* Team logos and player avatars */
.team-logo { max-height: 80px; max-width: 160px; object-fit: contain; margin-bottom: 0.5rem; display: block; }
.team-logo-sm { height: 20px; width: 20px; object-fit: contain; vertical-align: middle; margin-right: 4px; }
.player-avatar { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; display: block; margin-bottom: 0.5rem; }
.player-avatar-sm { width: 24px; height: 24px; object-fit: cover; border-radius: 50%; vertical-align: middle; margin-right: 4px; }

/* ── Broadcast feed (transcript-style rundown) ─────────────────────── */

.bc-beat {
    margin: 0 0 var(--s-3);
    line-height: 1.55;
    font-size: 13px;
}

/* Booth transcript — the anchor of the feed */
.bc-booth {
    border-left: 2px solid var(--cyan-dim);
    padding: var(--s-1) var(--s-3);
    background: var(--bg-panel-2);
}
.bc-booth-line { margin: 0 0 2px; }
.bc-booth-line:last-child { margin-bottom: 0; }
.bc-speaker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--gold);
    margin-right: var(--s-2);
}
.bc-quote { color: var(--ink); }

/* Non-booth beats: small-caps scene tag + text */
.bc-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 1px 6px;
    margin-right: var(--s-2);
    border: 1px solid var(--rule);
    border-radius: 2px;
    color: var(--ink-faint);
    vertical-align: 1px;
    white-space: nowrap;
}
.bc-text { color: var(--ink-soft); }
a.bc-text { text-decoration: none; border-bottom: 1px dotted var(--rule-strong); }
a.bc-text:hover { color: var(--cyan); }

/* Scene accents */
.bc-tag-desk    { color: var(--gold);      border-color: var(--gold); }
.bc-tag-pa      { color: var(--teal);      border-color: var(--teal); }
.bc-tag-crowd   { color: var(--orange);    border-color: rgba(255, 138, 61, 0.45); }
.bc-tag-wire    { color: var(--signal);    border-color: rgba(106, 154, 208, 0.45); }
.bc-tag-feature { color: var(--cyan);      border-color: var(--cyan-dim); }
.bc-tag-weather { color: var(--alert-red); border-color: rgba(255, 74, 74, 0.5); }

.bc-weather .bc-text { color: var(--ink); }
.bc-crowd .bc-text   { font-style: italic; }
.bc-desk .bc-text    { color: var(--ink); }

/* Saint Static — the ghost in the airwaves */
.bc-static .bc-speaker {
    color: var(--phosphor);
    text-shadow: 0 0 6px rgba(95, 255, 170, 0.45);
}
.bc-static .bc-quote {
    color: var(--phosphor);
    opacity: 0.85;
    font-style: italic;
    letter-spacing: 0.04em;
}

/* Game feed woven into the broadcast — plays the booth reacts to */
.bc-tag-play { color: var(--phosphor); border-color: rgba(95, 255, 170, 0.35); }
.bc-play { padding-left: var(--s-3); }
.bc-play .bc-text { color: var(--ink-soft); }
.bc-play .bc-more { display: block; padding-left: 46px; margin-top: 1px; }

.bc-empty { padding: var(--s-2) 0; }


/* ── Scouting tiers + weather mutation badges (public-facing ratings) ── */

.scouting-line {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: var(--s-2) 0 var(--s-3);
}

.team-pullquote {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin: var(--s-3) 0;
}

.mutation-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 1px 6px;
    margin-left: var(--s-2);
    border-radius: 2px;
    vertical-align: 1px;
}
.mutation-blessed { color: var(--phosphor); border: 1px solid rgba(95, 255, 170, 0.4); }
.mutation-cursed  { color: var(--alert-red); border: 1px solid rgba(255, 74, 74, 0.4); }