/* ==========================================================================
   SCRIM HUB REDESIGN (scrims.html only)
   Rebuilds the page to match the provided scrims-new-design.html mockup.
   Loaded AFTER css/style.css and css/scrim-style.css (both stay linked, on
   purpose - see CHANGELOG "assumption"): this file overrides their visual
   presentation for every element on this page, but leaves the two base
   files' shared utilities intact (scrollbar theme, #loader mechanics,
   .mono, body.mode-theme-sf/br, the nav's floating-pill layout/media
   queries) rather than re-implementing all of that from zero.

   Every legacy class name below (.sc-head, .br-lb-row, .bracket-node,
   .season-standing-row, .idle-team-row, .qual-badge, .reg-field-row, etc.)
   is NOT decorative naming I chose - it's the exact class name js/scrim-
   tournament.js, js/seasons.js, and js/scrim-logic.js hardcode into the
   HTML they inject via innerHTML. None of those .js files were touched for
   this rebuild, so every one of those class names had to be re-skinned in
   place rather than renamed.
   ========================================================================== */

:root {
    /* mockup's own token names */
    --void: #09090f;
    --slate: #13141c;
    --steel: #1c1e2a;
    --rim: rgba(255, 255, 255, .07);
    --ice: #00c4cc;
    --red2: #f03a5a;
    --gold: #f5b731;
    --cloud: #e4e8f0;
    --mist: #8892a4;
    --dust: #454d5e;
    --green2: #22c55e;
    --r-card: 16px;
    --r-btn: 12px;
    --gap: 18px; /* TASK: "it looks cramped" - was 14px, more breathing room between every section */

    /* TASK: alias every legacy token still referenced elsewhere - both by
       css/style.css (nav border/glow, loader spinner, scrollbar) and by
       inline styles hardcoded inside js/scrim-tournament.js and
       js/scrim-logic.js template strings (var(--neon), var(--red)) - so
       everything picks up the new palette automatically with no HTML/JS
       edits. */
    --neon-blue: var(--ice);
    --neon: var(--ice);
    --red: var(--red2);
    --tactical-orange: var(--gold);
    --active-glow: var(--green2);
    --hud-border: var(--rim);
    --dark-bg: var(--void);
    --font-orbitron: 'Orbitron', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-sans: 'Outfit', sans-serif;
}

/* TASK: plain black + the site's existing animated particle canvas instead
   of an image/gradient background - no grid texture, no radial glow. */
body {
    background: var(--void);
    color: var(--cloud);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.5;
}
body::before, body::after { display: none; }
/* TASK: particles change color with the live mode theme - --particle-rgb is
   read by js/script.js's animate() every frame (currentParticleRGB()); that
   function falls back to the original fixed cyan on every other page that
   never sets this variable, so index.html/contact.html are unaffected. */
body { --particle-rgb: 0, 196, 204; --particle-scale: 2.2; } /* ice - default/idle, bigger particles than the original */
body.mode-theme-sf { --particle-rgb: 0, 196, 204; } /* ice */
body.mode-theme-br { --particle-rgb: 240, 58, 90; } /* red */
body.mode-theme-sf, body.mode-theme-br {
    background-color: var(--void);
    background-image: none;
    box-shadow: none;
}

/* #particleCanvas (js/script.js - the same particle system index.html and
   contact.html already use, reused as-is rather than writing a second one)
   sits behind every card. */
#particleCanvas { position: fixed; inset: 0; z-index: -1; pointer-events: none; }

.mono { font-family: var(--font-mono); }

/* ── LAYOUT ──
   TASK: fix responsiveness for PC, not just phone - the mockup's own
   breakpoint (max-width:600px at >=640px) never grows past that, so on an
   actual desktop monitor the whole page stays a narrow phone-width column
   with a huge empty margin either side. Widens progressively past tablet
   width instead of capping there; still a single centered column (matching
   the mockup's own card-feed layout), just sized for the viewport it's
   actually on. */
.page { max-width: 480px; margin: 0 auto; padding: 0 16px 80px; }
.stack { display: flex; flex-direction: column; gap: var(--gap); }
@media (min-width: 640px) {
    .page { max-width: 700px; }
}
/* TASK: "fill them, no space, full screen mode" - a fixed max-width always
   leaves a growing dead margin as the monitor gets wider. Past tablet width
   .page instead scales with the actual viewport (a wide percentage, not a
   fixed px cap) up to a sane ceiling, so a real desktop/ultrawide window
   uses the screen instead of floating a narrow column in the middle of it. */
@media (min-width: 900px) {
    .page { max-width: 96vw; padding-left: 28px; padding-right: 28px; }
}
@media (min-width: 1400px) {
    .page { max-width: 92vw; }
}
@media (min-width: 1800px) {
    .page { max-width: 1700px; } /* ceiling - stops individual cards/text lines from getting absurdly wide on a 3440px ultrawide */
}

/* TASK: "do 2 by 2 for pc view" / "3 by 3 if possible" - each section
   (sec-label + its card) is wrapped in .grid-section in scrims.html.
   display:contents on mobile makes that wrapper invisible to layout - its
   children fall straight into .stack's normal single-column flex flow, so
   phone/tablet is completely unchanged. At >=900px .stack switches to a
   grid (2 columns, 3 from 1400px up) and each .grid-section becomes one
   real cell (its own internal children still stacked top-to-bottom via
   flex); .grid-section.full spans every column for the hero, the bracket/
   leaderboard/registered-teams view, and the footer, since those need the
   full row's width, not a fraction of it. */
@media (min-width: 900px) {
    .stack { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap) 20px; align-items: start; }
    .grid-section { display: flex; flex-direction: column; gap: var(--gap); }
    .grid-section.full { grid-column: 1 / -1; }
}
@media (min-width: 1400px) {
    .stack { grid-template-columns: 1fr 1fr 1fr; }
}

/* Reserve-slot widget + team dashboard box pair up side-by-side once there's
   room (matches the pairing the pre-redesign page had at this same
   breakpoint) - #team-dashboard-box is set to innerHTML='' by
   renderTeamDashboardBox() for a signed-out visitor, so :empty lets the
   reserve widget alone take the full row instead of leaving a dead blank
   column next to it. */
.reserve-widget-row { display: flex; flex-direction: column; gap: var(--gap); }
@media (min-width: 640px) {
    .reserve-widget-row { flex-direction: row; align-items: stretch; }
    .reserve-widget-row > * { flex: 1; min-width: 0; }
    #team-dashboard-box:empty { display: none; }
}

.sec-label {
    font-size: .68rem; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--mist);
    padding: 6px 0 2px;
}

.card {
    background: var(--slate);
    border: 1px solid var(--rim);
    border-radius: var(--r-card);
    overflow: hidden;
}
.card-pad { padding: 16px; }

/* ── SUBTITLE / META ROW (replaces the old hud-header's brand block - the
   real page identity + season/date + connection/role status) ──
   TASK: "the whole thing from logo down" boxed - wraps the brand row +
   both status rows in one visible card instead of floating bare text/pills
   over the particle background. */
.hub-identity-box { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.hub-subtitle-row {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 10px;
}
/* Plain logo image, no bordered/background box around it - just the mark
   itself, same as the loader logo above it. */
.hub-brand-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hub-logo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
/* TASK: "FRX x ZY is small, make it visible, add a box" - bigger, higher-
   contrast (was --mist gray at .72rem, easy to lose against the particle
   background), plus a bordered pill so it reads as its own label instead of
   blending into the page. */
.hub-kicker {
    display: inline-flex; align-items: center;
    font-size: .85rem; font-weight: 700; color: var(--ice);
    letter-spacing: 1.5px; text-transform: uppercase;
    padding: 4px 10px; border-radius: 20px;
    border: 1px solid rgba(0, 196, 204, .3); background: rgba(0, 196, 204, .08);
}
/* Outfit, not Orbitron - Orbitron's geometric letterforms read as heavy/
   bold even set lighter (and only 700/900 are loaded at all), so this
   switches family entirely for a genuinely lighter title, not just a
   smaller font-weight number on the same bold-looking face. */
.hub-title { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; color: #fff; letter-spacing: .3px; margin-top: 2px; }
.hub-meta-right { text-align: right; }
.hub-meta-line { font-size: .65rem; color: var(--mist); }
.hub-meta-line + .hub-meta-line { margin-top: 2px; font-size: .72rem; color: var(--cloud); }

.hub-status-row {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px;
    font-family: var(--font-mono); font-size: .68rem; color: var(--mist);
}
.hub-status-row .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green2); display: inline-block; margin-right: 5px; }
.hub-role-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 10px; border-radius: 20px;
    border: 1px solid var(--rim); background: var(--steel);
    color: var(--mist);
}
.hub-role-pill.is-commander { color: var(--ice); border-color: rgba(0, 196, 204, .3); }
.hub-admin-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 20px;
    border: 1px solid rgba(0, 196, 204, .35); background: rgba(0, 196, 204, .08);
    color: var(--ice); text-decoration: none; font-weight: 600; font-size: .68rem;
    letter-spacing: .5px; text-transform: uppercase;
}

/* ── MODE BADGE (class assigned by JS: mode-badge mode-sf|mode-br|mode-off) ── */
.mode-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 14px; border-radius: 20px;
    font-family: var(--font-orbitron); font-weight: 700; font-size: .65rem;
    letter-spacing: 1.5px; text-transform: uppercase;
    border: 1px solid var(--rim); background: var(--steel); color: var(--mist);
}
.mode-badge.mode-br { background: rgba(240, 58, 90, .14); color: var(--red2); border-color: rgba(240, 58, 90, .3); }
.mode-badge.mode-sf { background: rgba(0, 196, 204, .1); color: var(--ice); border-color: rgba(0, 196, 204, .25); }
.mode-badge.mode-off { background: var(--steel); color: var(--mist); border-color: var(--rim); }
/* Applied directly via classList.add() in renderModeAndCountdown() - not
   combined with any other class, so these must stand alone. */
.mode-sf-text { color: var(--ice); }
.mode-br-text { color: var(--red2); }

/* ── TONIGHT'S SCRIM (renderReserveSlotWidget() innerHTML lands directly
   inside #reserve-slot-widget, which gets the "tonight" hero-card treatment
   here) ── */
#reserve-slot-widget {
    padding: 22px 18px 18px;
    background: linear-gradient(160deg, var(--slate) 0%, #0f1018 100%);
    border: 1px solid var(--rim);
    border-radius: var(--r-card);
}
.sc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.sc-head h3 { font-family: var(--font-orbitron); font-weight: 900; font-size: 1.3rem; color: #fff; letter-spacing: .5px; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red2); box-shadow: 0 0 8px var(--red2); flex: 0 0 auto; }
.live-dot.off { background: var(--dust); box-shadow: none; }

.sc-meta {
    display: flex; flex-direction: column; gap: 7px;
    padding: 12px; margin-bottom: 14px; border-radius: 10px;
    background: rgba(0, 0, 0, .3); border-left: 2px solid var(--ice);
}
.sc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sc-key { font-size: .6rem; letter-spacing: 1.5px; color: var(--dust); text-transform: uppercase; }
.sc-val { font-family: var(--font-orbitron); font-weight: 700; font-size: .82rem; color: var(--cloud); letter-spacing: .5px; }
.sc-val.mode { color: var(--red2); }

.slotbar-wrap { margin-bottom: 14px; }
.slotbar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.slotbar-top .lbl { font-size: .7rem; color: var(--mist); }
.slotbar-top .cnt { font-family: var(--font-mono); font-weight: 600; font-size: .82rem; color: var(--ice); }
.slotbar-top .cnt.low { color: var(--gold); }
.slotbar-top .cnt.full { color: var(--red2); }
.slotbar { display: flex; gap: 3px; }
.slot {
    flex: 1; height: 20px; border-radius: 4px;
    background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .06);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: .5rem; color: var(--dust);
}
.slot.taken { background: rgba(0, 196, 204, .18); border-color: rgba(0, 196, 204, .35); }
.slot.mine { background: var(--ice); border-color: var(--ice); color: #001a1b; font-weight: 700; }
.slot.taken.red { background: rgba(240, 58, 90, .18); border-color: rgba(240, 58, 90, .35); }

.btn-primary, .btn-danger-ghost, .btn-disabled {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 44px; padding: 14px;
    border: none; border-radius: var(--r-btn);
    font-family: var(--font-sans); font-weight: 700; font-size: .85rem;
    letter-spacing: .3px; cursor: pointer; transition: opacity .15s, transform .1s;
    box-sizing: border-box; text-transform: none;
}
.btn-primary:active, .btn-danger-ghost:active { transform: scale(.98); opacity: .9; }
.btn-primary { background: var(--ice); color: #001a1b; }
.btn-danger-ghost { background: transparent; color: var(--red2); border: 1px solid rgba(240, 58, 90, .35); font-size: .78rem; }
.btn-disabled { background: rgba(255, 255, 255, .05); color: var(--dust); cursor: not-allowed; border: 1px solid var(--rim); }

.confirmed-box, .confirmed {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; border-radius: 10px; margin-bottom: 12px;
    background: rgba(0, 196, 204, .07); border: 1px solid rgba(0, 196, 204, .25);
}
.confirmed .tick {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
    background: var(--ice); color: #001a1b; font-weight: 700; font-size: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.confirmed .txt .t1 { font-weight: 600; color: #fff; font-size: .9rem; }
.confirmed .txt .t2 { font-size: .72rem; color: var(--mist); margin-top: 1px; }

.lineup { margin-bottom: 12px; padding: 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); border: 1px solid var(--rim); }
.lineup .lh { font-size: .58rem; letter-spacing: 1.5px; color: var(--dust); text-transform: uppercase; margin-bottom: 9px; display: flex; justify-content: space-between; }
.lineup .lh a { color: var(--ice); text-decoration: none; cursor: pointer; }
.plr { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: .78rem; }
.plr .n { font-family: var(--font-mono); font-size: .58rem; color: var(--dust); width: 16px; }
.plr .ign { color: var(--cloud); flex: 1; }
.plr.sub .ign { color: var(--mist); }

.hint { font-size: .68rem; color: var(--mist); text-align: center; margin-top: 9px; }
.hint b { color: var(--gold); }

.prompt { text-align: center; padding: 16px 10px 6px; }
.prompt .ic { font-size: 1.8rem; margin-bottom: 8px; opacity: .5; color: var(--ice); }
.prompt h4 { font-family: var(--font-orbitron); font-weight: 700; font-size: .85rem; letter-spacing: .5px; color: #fff; margin-bottom: 6px; }
.prompt p { font-size: .75rem; color: var(--mist); line-height: 1.6; margin-bottom: 14px; }

/* ── TEAM DASHBOARD BOX (renderTeamDashboardBox()) ──
   renderTeamDashboardBox() in js/scrim-tournament.js toggles this exact
   class name (classList.add/remove('slot-card')) on #team-dashboard-box -
   css/scrim-style.css (still linked) already defines .slot-card with the
   OLD cyan-gradient/corner-bracket HUD look; this override (loaded after
   it, same specificity, so it wins on cascade order) replaces that with
   the new flat card look instead of re-styling a class name JS doesn't use. */
.slot-card {
    width: 100%;
    background: var(--slate);
    border: 1px solid var(--rim);
    border-radius: var(--r-card);
    padding: 18px 16px 16px;
    margin-top: 10px;
}
.slot-card::before, .slot-card::after { display: none; }

.team-dashboard-row { display: flex; align-items: stretch; gap: 8px; width: 100%; }
.team-dashboard-box {
    display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0;
    padding: 14px 16px; border-radius: var(--r-card);
    background: var(--slate); border: 1px solid var(--rim);
    text-decoration: none; transition: .2s;
}
.team-dashboard-box:hover { border-color: rgba(0, 196, 204, .4); }
.team-dashboard-box i {
    flex: 0 0 auto; width: 34px; height: 34px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 196, 204, .1); color: var(--ice); font-size: .85rem;
}
.team-dashboard-box-text { flex: 1; min-width: 0; }
.team-dashboard-box span { display: block; font-weight: 700; font-size: .8rem; color: #fff; }
.team-dashboard-box small { display: block; font-size: .65rem; color: var(--mist); margin-top: 3px; }
.team-dashboard-logout-icon {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 56px; border-radius: var(--r-card);
    background: transparent; border: 1px solid rgba(240, 58, 90, .25);
    color: var(--red2); font-size: .9rem; cursor: pointer; transition: .2s;
}
.team-dashboard-logout-icon:hover { background: rgba(240, 58, 90, .08); border-color: rgba(240, 58, 90, .5); }

/* ── SCHEDULE ── */
.schedule-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.sched-empty { font-family: var(--font-mono); font-size: .7rem; color: var(--mist); padding: 10px; }
.sched-pill {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 10px;
    border: 1px solid var(--rim); background: var(--steel);
    font-family: var(--font-mono); font-size: .68rem; color: var(--mist);
}
.sched-pill.active { border-color: var(--ice); background: rgba(0, 196, 204, .08); }
.sched-pill .sched-day { color: #fff; font-weight: 700; }
.sched-pill .sched-time { color: var(--mist); }
.sched-pill .sched-tag { font-size: .58rem; font-weight: 700; padding: 2px 6px; border-radius: 3px; }
.sched-pill.sf .sched-tag { color: var(--ice); background: rgba(0, 196, 204, .1); }
.sched-pill.br .sched-tag { color: var(--red2); background: rgba(240, 58, 90, .1); }
.sched-pill .sched-label { color: var(--dust); }

/* ── IDLE TEAM LIST / TOP PLAYERS (shared row style) ── */
.idle-team-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .04);
    font-size: .82rem;
}
.idle-team-row:first-child { border-top: none; }
.idle-team-slot { width: 32px; font-family: var(--font-mono); font-weight: 600; font-size: .8rem; color: var(--dust); flex: 0 0 auto; }
.idle-team-name { color: var(--cloud); font-weight: 600; flex: 1; padding: 0 10px; }
/* TASK: fix responsiveness - a long captainContact string (a full WhatsApp
   number + country code, or a long Discord username) had no truncation and
   could push this row wider than its card at narrow widths; flex:0 1 auto
   (was 0 0 auto) plus the ellipsis lets it shrink and truncate instead. */
.idle-team-mode { color: var(--mist); font-size: .72rem; font-family: var(--font-mono); flex: 0 1 auto; max-width: 40%; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* TASK: squad country flags on the public Registered Teams row - only that
   row nests .idle-team-name inside this wrapper (Top Players still uses it
   bare, unaffected by the padding override below). */
.idle-team-main { flex: 1; min-width: 0; padding: 0 10px; }
.idle-team-main .idle-team-name { padding: 0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.idle-team-flags { margin-top: 3px; font-size: .8rem; letter-spacing: 3px; opacity: .85; }
.lb-rank.gold { color: var(--gold); }
.lb-rank.silver { color: var(--ice); }
.lb-rank.bronze { color: #b07a4c; }

/* ── BRACKET (JS emits .bracket-column > .bracket-round-label + N ×
   .bracket-node, each .bracket-node containing a .bracket-node-header +
   two .bracket-team-row - re-skinned here to read as the mockup's
   .bracket-match card without touching that structure). ── */
.bracket-scroll { overflow-x: auto; padding: 4px 2px 8px; }
.bracket-columns { display: flex; gap: 30px; min-width: 600px; align-items: center; }
.bracket-column { display: flex; flex-direction: column; gap: 14px; }
.bracket-column.sf { justify-content: space-around; height: 100%; }
.bracket-round-label {
    font-size: .62rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--dust); padding: 8px 0 6px;
}
.bracket-node {
    background: var(--steel); border: 1px solid var(--rim); border-radius: 10px;
    overflow: hidden; width: 210px;
}
.bracket-node.is-live { border-color: rgba(240, 58, 90, .4); }
.bracket-node.has-winner { border-color: rgba(34, 197, 94, .35); }
.bracket-node-header {
    display: flex; justify-content: space-between; padding: 8px 12px;
    font-family: var(--font-mono); font-size: .58rem; color: var(--dust);
    text-transform: uppercase; background: rgba(255, 255, 255, .02);
    border-bottom: 1px solid var(--rim);
}
.bracket-node-header .live-tag { color: var(--red2); font-weight: 900; }
.bracket-node-header .winner-tag { color: var(--green2); font-weight: 900; }
/* TASK: color-mode coding brought back, but scoped to individual entry rows
   only (SF=ice, BR=red, same convention as .mode-badge above) - not a
   page-wide tint like the old design had. Bracket rows are always SF
   content (the bracket only renders while SF is live). */
.bracket-team-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 11px 12px; font-size: .82rem; color: var(--mist);
    border-left: 3px solid rgba(0, 196, 204, .35);
}
.bracket-team-row + .bracket-team-row { border-top: 1px solid var(--rim); }
.bracket-team-row.winner { background: rgba(34, 197, 94, .08); color: #fff; }
.bracket-team-row .team-name { font-weight: 700; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; color: inherit; }
.bracket-team-row .team-score { font-family: var(--font-mono); font-weight: 700; font-size: 1rem; color: var(--dust); }
.bracket-team-row.winner .team-score { color: var(--ice); }

.champion-box {
    margin-top: 14px; padding: 12px; border-radius: 10px;
    background: rgba(245, 183, 49, .07); border: 1px solid rgba(245, 183, 49, .3);
    display: flex; align-items: center; gap: 10px;
}
.champion-box .label { font-size: .55rem; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; display: block; }
.champion-box .name { font-family: var(--font-orbitron); font-weight: 800; color: #fff; font-size: .8rem; }

/* ── BR LEADERBOARD ── (always BR content, same "entries only" mode coding) */
.br-lb-list { display: flex; flex-direction: column; overflow-x: auto; }
.br-lb-row {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 8px 16px; padding: 12px 16px 12px 13px; border-top: 1px solid rgba(255, 255, 255, .04);
    border-left: 3px solid rgba(240, 58, 90, .35);
}
.br-lb-row:first-child { border-top: none; }
.br-lb-row.gold { background: rgba(245, 183, 49, .05); }
.br-lb-identity { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 180px; }
.br-lb-rank { font-family: var(--font-mono); font-weight: 700; font-size: .8rem; color: var(--dust); flex-shrink: 0; }
.br-lb-row.gold .br-lb-rank { color: var(--gold); }
.br-lb-team-name { font-weight: 700; font-size: .82rem; color: var(--cloud); letter-spacing: .3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-lb-stats { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 1 auto; }
.br-lb-stat { display: flex; flex-direction: column; align-items: center; background: rgba(255, 255, 255, .03); border: 1px solid var(--rim); border-radius: 8px; padding: 4px 10px; min-width: 44px; }
.br-lb-stat-label { font-family: var(--font-mono); font-size: .5rem; color: var(--dust); text-transform: uppercase; letter-spacing: .5px; }
.br-lb-stat-value { font-family: var(--font-mono); font-size: .78rem; color: var(--cloud); font-weight: 700; }
.br-lb-stat-wide .br-lb-stat-value { color: var(--mist); font-size: .68rem; white-space: nowrap; }

/* ── REGION / LOCATIONS ── */
.region-stat-panel { padding: 4px; }
.region-pill-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.region-pill {
    font-family: var(--font-mono); font-size: .58rem; padding: 6px 12px; border-radius: 20px;
    border: 1px solid var(--rim); color: var(--mist); cursor: pointer; background: transparent; transition: .2s;
}
.region-pill.active { border-color: var(--ice); color: var(--ice); background: rgba(0, 196, 204, .08); }
.region-stat-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .75rem; color: var(--mist); padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .04); }
.region-stat-row b { color: var(--ice); }

/* ── SEASON STANDINGS ── */
.tabs { display: flex; border-bottom: 1px solid var(--rim); padding: 0 16px; }
.tab {
    padding: 12px 16px; font-size: .8rem; font-weight: 600; color: var(--mist);
    cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent;
    margin-bottom: -1px; transition: color .15s; font-family: var(--font-sans);
}
.tab.active { color: var(--ice); border-bottom-color: var(--ice); }

.season-standings-grid { padding-top: 4px; }
.season-col-label { display: none; } /* the mode is now a tab label, not a repeated column header - see scrims.html */
.season-standing-row {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, .04);
    font-size: .78rem; flex-wrap: wrap;
}
.season-standing-row:first-child { border-top: none; }
.season-standing-row.top-cut { background: rgba(0, 196, 204, .03); }
/* Entry-level mode coding - the mount itself (#season-standings-br/-sf) says
   which mode a row belongs to, no per-row class needed. */
#season-standings-sf .season-standing-row { border-left: 3px solid rgba(0, 196, 204, .3); padding-left: 13px; }
#season-standings-br .season-standing-row { border-left: 3px solid rgba(240, 58, 90, .3); padding-left: 13px; }
.season-standing-team { flex: 1; min-width: 100px; font-weight: 700; color: var(--cloud); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.season-standing-progress { flex: 0 0 auto; color: var(--dust); font-size: .65rem; }
.season-standing-points { flex: 0 0 auto; font-family: var(--font-mono); font-weight: 700; color: var(--ice); }
.qual-badge { flex: 0 0 auto; font-family: var(--font-mono); font-size: .55rem; letter-spacing: .5px; padding: 3px 8px; border-radius: 20px; white-space: nowrap; }
.qual-yes { background: rgba(34, 197, 94, .12); color: var(--green2); border: 1px solid rgba(34, 197, 94, .35); }
.qual-no { background: rgba(245, 183, 49, .1); color: var(--gold); border: 1px solid rgba(245, 183, 49, .3); }

/* ── FINALISTS ── */
.finalist-row {
    padding: 12px 16px 12px 13px; border-top: 1px solid rgba(255, 255, 255, .04);
    border-left: 3px solid rgba(0, 196, 204, .3); /* SF finalists is always SF content */
    font-weight: 700; font-size: .82rem; color: #fff;
}
.finalist-row:first-child { border-top: none; }
.finalist-tie-warning {
    padding: 12px 16px; background: rgba(240, 58, 90, .08); border-bottom: 1px solid rgba(240, 58, 90, .25);
    color: var(--red2); font-size: .68rem; letter-spacing: .3px;
}

/* ── NIGHT BREAKDOWN ── */
.night-week-group { border-top: 1px solid rgba(255, 255, 255, .04); }
.night-week-group:first-child { border-top: none; }
.night-week-toggle {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
    padding: 12px 16px; background: none; border: none; color: #fff;
    font-family: var(--font-sans); font-weight: 700; font-size: .78rem; cursor: pointer; text-align: left;
}
.night-week-toggle:hover { background: rgba(255, 255, 255, .02); }
.night-week-count { margin-left: auto; margin-right: 8px; font-family: var(--font-mono); font-size: .6rem; color: var(--dust); }
.night-week-body { padding: 0 16px 12px; }
.night-card { margin-bottom: 10px; padding: 10px 12px 10px 11px; background: rgba(255, 255, 255, .02); border: 1px solid var(--rim); border-left: 3px solid rgba(240, 58, 90, .3); border-radius: 8px; }
.night-week-body .night-card:last-child { margin-bottom: 0; }
.night-card-header { font-family: var(--font-mono); font-size: .62rem; color: var(--mist); margin-bottom: 6px; padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.friendly-tag { color: var(--gold); font-weight: 700; }
.corrected-tag { color: var(--gold); font-weight: 700; font-size: .58rem; cursor: help; border-bottom: 1px dotted var(--gold); }
.night-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: .72rem; color: var(--mist); padding: 3px 0; }

/* ── CALENDAR ── */
.cal-row {
    display: flex; justify-content: space-between; align-items: center;
    font-family: var(--font-mono); font-size: .68rem; color: var(--mist);
    padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, .04);
}
.cal-row:first-child { border-top: none; }
.cal-row a { color: var(--ice); text-decoration: none; margin-left: 6px; }
.cal-row.completed { color: var(--green2); }
.cal-row.next { background: rgba(0, 196, 204, .06); color: var(--ice); }
.cal-row.cancelled { opacity: .5; text-decoration: line-through; }

/* ── TAG / BADGE (used by scrim-logic.js for RULES/INFO/BANNED WEAPONS/
   BLACKLIST headers + banned-weapon chips) ── */
.tag {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-orbitron); font-size: .68rem; font-weight: 700;
    color: var(--ice); letter-spacing: 1.5px; text-transform: uppercase;
    padding: 14px 16px 10px;
}
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--font-mono); font-size: .65rem; font-weight: 700; letter-spacing: .5px;
    padding: 6px 12px; margin: 4px 6px 4px 0; border-radius: 8px;
    border: 1px solid rgba(240, 58, 90, .25); background: rgba(240, 58, 90, .1); color: var(--red2);
}
.badge i { font-size: .6rem; }
#js-info, #js-rules, #js-banned-guns { padding-bottom: 14px; }
#js-info p, #js-rules > div.mono, #js-banned-guns > p, #js-banned-guns > div { padding-left: 16px; padding-right: 16px; }
#js-blacklist > div.mono { padding-left: 16px; padding-right: 16px; }

/* ── EMPTY STATES (mockup's .empty, applied where scrim-logic.js/scrim-
   tournament.js already write their own inline-styled empty text - this
   just aligns the surrounding padding/typography) ── */
.empty { text-align: center; padding: 24px 16px; color: var(--mist); font-size: .78rem; }

/* ── REGISTRATION WIZARD + LINEUP PICKER (task 46d/47 IDs unchanged -
   reg-form-overlay, reg-step-*, reg-field-*, lineup-picker-* etc.) ── */
.reg-form-overlay {
    display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .8);
    z-index: 10000; align-items: center; justify-content: center; padding: 16px;
    overflow-y: auto; backdrop-filter: blur(4px);
}
.reg-form-overlay.active { display: flex; }
.reg-form-box {
    width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; margin: auto;
    background: var(--slate); border: 1px solid var(--rim); border-radius: var(--r-card);
    padding: 18px 18px 20px;
}
.reg-form-box .tag { padding: 0 0 14px; }
.reg-form-close { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: none; border: none; color: var(--mist); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.reg-form-close:hover { color: var(--red2); }

.reg-form-error {
    background: rgba(240, 58, 90, .1); border: 1px solid rgba(240, 58, 90, .35);
    color: var(--red2); padding: 10px 12px; border-radius: 8px; font-size: .72rem;
    margin-bottom: 12px; display: none;
}
.reg-form-error.active { display: block; }

.reg-step-indicator { display: flex; align-items: center; gap: 6px; margin: 0 0 18px; }
.reg-step-dot { display: flex; align-items: center; gap: 7px; color: var(--dust); }
.reg-step-num {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    border: 1px solid var(--rim); font-family: var(--font-orbitron); font-size: .65rem; font-weight: 700;
}
.reg-step-label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .5px; text-transform: uppercase; display: none; }
@media (min-width: 420px) { .reg-step-label { display: inline; } }
.reg-step-dot.active { color: var(--ice); }
.reg-step-dot.active .reg-step-num { border-color: var(--ice); background: rgba(0, 196, 204, .1); }
.reg-step-dot.done { color: var(--green2); }
.reg-step-dot.done .reg-step-num { border-color: var(--green2); background: rgba(34, 197, 94, .1); }
.reg-step-line { flex: 1; height: 1px; background: var(--rim); }

.reg-field-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.reg-field-block { flex: 1 1 140px; min-width: 0; }
.reg-field-block.reg-field-device, .reg-field-block.reg-field-country { flex: 1 1 96px; }
.reg-field-block label {
    display: block; font-family: var(--font-mono); font-size: .58rem; color: var(--mist);
    letter-spacing: .5px; text-transform: uppercase; margin-bottom: 5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reg-field-block input, .reg-field-block select {
    width: 100%; padding: 10px 10px; background: var(--void); border: 1px solid var(--rim);
    color: var(--cloud); border-radius: 8px; font-size: .8rem; font-family: var(--font-sans);
}
.reg-field-block input:focus, .reg-field-block select:focus { outline: none; border-color: var(--ice); }
.reg-field-block input[type="file"] { padding: 6px; font-size: .68rem; color: var(--mist); }
/* TASK: fix responsiveness - custom-select.js's themed trigger button (used
   for every select including the new per-player country ones, now as
   narrow as ~110px next to name+device) never had overflow handling for a
   long selected value ("United Arab Emirates") - it would wrap or spill out
   of the box instead of truncating like a native <select> already does on
   its own. */
.custom-select-trigger { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reg-field-hint { display: block; margin-top: 5px; font-size: .62rem; color: var(--dust); line-height: 1.5; }
/* TASK: per-player country - the row went from 2 to 3 fields (name/device/
   country), so on a real phone width the name gets its own full-width line
   and device+country share the next line 50/50, instead of squeezing three
   columns into ~340px. */
@media (max-width: 480px) {
    .reg-field-row { flex-wrap: wrap; }
    .reg-field-row .reg-field-block:first-child { flex: 1 1 100%; }
    .reg-field-block.reg-field-device, .reg-field-block.reg-field-country { flex: 1 1 calc(50% - 5px); }
    /* A sub row's remove button is a 4th item (name already wrapped to its
       own line above) - device+country already claim the full width of
       this line between them, so the button needs its own line too rather
       than trying to also fit alongside them. */
    .reg-sub-row .reg-sub-remove-btn { flex-basis: 100%; }
}

#reg-form .field-error { border-color: var(--red2) !important; box-shadow: 0 0 0 2px rgba(240, 58, 90, .25); }
#reg-form input[type="checkbox"].field-error { outline: 2px solid var(--red2); outline-offset: 2px; }

.reg-add-sub-btn {
    width: 100%; min-height: 44px; margin-bottom: 12px;
    background: transparent; border: 1px dashed rgba(0, 196, 204, .3); color: var(--ice);
    border-radius: var(--r-btn); font-weight: 700; font-size: .72rem; letter-spacing: .5px; cursor: pointer; transition: .2s;
}
.reg-add-sub-btn:hover { background: rgba(0, 196, 204, .06); border-color: var(--ice); }
.reg-sub-row { align-items: flex-end; }
.reg-sub-remove-btn {
    flex: 0 0 auto; width: 44px; height: 44px; background: none;
    border: 1px solid rgba(240, 58, 90, .35); color: var(--red2); border-radius: var(--r-btn);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.reg-sub-remove-btn:hover { background: rgba(240, 58, 90, .08); }

.reg-review-box { margin: 4px 0 14px; padding: 12px 14px; border-radius: 10px; background: rgba(0, 196, 204, .04); border: 1px solid var(--rim); }
.reg-review-title { font-family: var(--font-mono); font-size: .6rem; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ice); margin-bottom: 8px; }
.reg-review-row { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: .72rem; color: var(--mist); border-top: 1px solid rgba(255, 255, 255, .05); }
.reg-review-row:first-child { border-top: none; }
.reg-review-row span { flex: 0 0 auto; }
.reg-review-row b { flex: 1 1 auto; min-width: 0; color: var(--cloud); font-weight: 700; text-align: right; overflow-wrap: anywhere; }

.reg-step-nav { display: flex; gap: 10px; margin-top: 16px; }
.reg-help-link {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
    margin-top: 12px; color: var(--mist); text-decoration: none; font-family: var(--font-mono); font-size: .65rem;
}
.reg-help-link:hover { color: var(--ice); }

.admin-checkbox-label { display: flex !important; align-items: center; gap: 6px; font-size: .7rem !important; color: var(--mist) !important; text-transform: none !important; margin-top: 12px !important; }

.lineup-pick-row {
    display: flex; align-items: center; gap: 10px; padding: 10px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: .78rem; color: var(--cloud); cursor: pointer;
}
.lineup-pick-row:last-child { border-bottom: none; }
.lineup-pick-row input { flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--ice); }
.lineup-pick-row .n { font-family: var(--font-mono); font-size: .58rem; color: var(--dust); width: 20px; flex: 0 0 auto; }
.lineup-pick-row .ign { flex: 1; }
.lineup-pick-row small { color: var(--mist); font-size: .62rem; }

/* ── GENERIC .btn (reg wizard NEXT/BACK/SUBMIT, lineup CONFIRM) ── */
.btn {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 20px; border: none; border-radius: var(--r-btn);
    font-family: var(--font-sans); font-weight: 700; font-size: .82rem; letter-spacing: .3px;
    cursor: pointer; transition: opacity .15s, transform .1s; box-sizing: border-box;
}
.btn:active { transform: scale(.98); opacity: .9; }
.btn.primary { background: var(--ice); color: #001a1b; }
.btn.secondary { background: transparent; color: var(--cloud); border: 1px solid var(--rim); }
.btn.full { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.reg-step-nav .btn { flex: 1; }

/* ── LOADER / LIVE-UPDATING BADGE (aliased --neon already retints the
   spinner/logo glow defined in css/scrim-style.css - just the backdrop
   color needs matching here) ── */
#loader { background: var(--void); }
.live-updating-badge {
    background: rgba(19, 20, 28, .95); border-color: var(--ice); color: var(--ice);
}
.live-updating-dot { background: var(--ice); box-shadow: 0 0 8px var(--ice); }

/* ── FOOTER ── */
.footer, .scrim-footer {
    text-align: center; padding: 32px 0 16px; margin-top: 8px;
    font-size: .72rem; color: var(--dust); line-height: 2; border-top: 1px solid var(--rim);
}
.scrim-footer-inner { font-family: var(--font-mono); }
.footer a, .scrim-footer-inner a { color: var(--mist); text-decoration: none; }
.footer a:hover, .scrim-footer-inner a:hover { color: var(--ice); }
.scrim-footer-inner .dot { margin: 0 10px; }