/* ═══════════════════════════════════════════════════════════════
   SBHL — Sin Bin Hockey League  |  styles.css  v1.0.0
   Design: Broadcast-grade digital sports — sin-bin red + chrome on ice
   ═══════════════════════════════════════════════════════════════ */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  /* Backgrounds — cold charcoal, faint red cast */
  --bg:    #08090c;
  --bg2:   #101116;
  --bg3:   #191a21;
  --bg4:   #24242e;

  /* Borders */
  --border:  #2b2c36;
  --border2: #45303a;

  /* Accent: SBHL Red */
  --accent:  #e01a2a;
  /* Brand red on this near-black measures 4.1:1 — under the 4.5 floor for
     body text, which is why small red labels read as muddy. Fills keep
     --accent; anything that is TEXT uses --accent-text (6.5:1). */
  --accent-text: #ff5a66;
  --accent2: #ff4436;

  /* Secondary: Cracked-ice chrome */
  --blue:    #b8c4d0;
  --ice:     #dfe7ef;

  /* Text */
  --text:  #d3d7de;
  --text1: #f4f6f9;
  --text2: #a6aeba;
  /* #666d79 measured 3.8:1 on the near-black ground — under the floor,
     and it carried dates, sub-labels and hints. 6.4:1 now. */
  --text3: #8a929f;

  /* Status */
  --win:  #27ae60;
  --loss: #e74c3c;
  --otl:  #f39c12;
  --gold: #e01a2a;

  /* Layout */
  --nav-h:  66px;
  --radius: 6px;

  /* ── SIN BIN TYPE SYSTEM ──────────────────────────────────
     Four roles, all drawn from the logo: chrome block letters
     under a red beacon, stencil paint, scratched steel.
       block — signage caps. ONE weight (400). Restraint: the
               hero watermark and featured headlines only.
       head  — the workhorse. ~300 call sites, down to 9px caps.
       read  — news prose. Slab, because a recap is a report.
       led   — penalty-clock numerals, chamfered like the logo. */
  --font-block: 'Bungee', 'Saira Condensed', sans-serif;
  --font-head:  'Saira Condensed', sans-serif;
  --font-body:  'Saira', sans-serif;
  --font-read:  'Zilla Slab', Georgia, serif;
  --font-led:   'Oxanium', ui-monospace, monospace;

  /* Beacon — the light on top of the box. Took over the slot
     EHL gold used to hold; this league has no gold in it. */
  --beacon: #ff3b24;
  --steel:  #8d96a3;

  /* Glow helpers */
  --glow-gold: 0 0 12px rgba(224,26,42,.30);
  --glow-ice:  0 0 12px rgba(184,196,208,.16);

  /* Signature: red penalty-box trace (repeat-x tile) */
  --trace: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='7'%3E%3Cpath d='M0 3.5h88l4-2.5h30l4 2.5h34' fill='none' stroke='%23e01a2a' stroke-width='1'/%3E%3Crect x='86' y='1.5' width='4' height='4' fill='%23e01a2a'/%3E%3C/svg%3E");
}

/* ── RESET ─────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }

/* ── BODY + HEX GRID BACKGROUND ────────────────────────────── */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 20px;
  background-image:
    radial-gradient(ellipse 130% 55% at 50% -5%,  rgba(224,26,42,.05)  0%, transparent 65%),
    radial-gradient(ellipse 70%  50% at 95% 85%,  rgba(184,196,208,.04)  0%, transparent 55%);
}

/* Quality floor: visible keyboard focus, motion respect */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ── TOP BAR ─────────────────────────────────────────────────*/
#topbar {
  background: rgba(8,9,12,.96);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(224,26,42,.18), 0 4px 24px rgba(0,0,0,.5);
  height: 58px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 16px;
  position: sticky;
  top: 0;
  z-index: 500;
}

.topbar-title {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 17px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text1);
}

.brand { display: contents; }
.brand-logo { display: none; }
.brand-accent { color: var(--accent-text); }

.top-meta {
  font-size: 11px;
  color: var(--text3);
  font-family: var(--font-head);
  letter-spacing: .07em;
  white-space: nowrap;
}

.top-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 20px rgba(224,26,42,.5);
  animation: pulse 2.5s ease infinite;
}

@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.55; transform:scale(.82); }
}

/* ── TOPBAR NAV ──────────────────────────────────────────────*/
#topnav {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
}

.topbar-logo-left  { justify-self: start; }
.topbar-logo-right { justify-self: end; margin-left: 0; }

.tnav-item {
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 13px;
  border-radius: 6px;
  transition: color .15s, background .15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tnav-item:hover  { color: #fff; background: rgba(224,26,42,.1); }
.tnav-item.active { color: var(--accent-text); background: rgba(224,26,42,.12); border: none; }
.tnav-live { color: var(--text) !important; }

.topbar-logo {
  height: 36px; width: auto; object-fit: contain; flex-shrink: 0;
}

#topbar-auth {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 680px) {
  #topbar { padding: 0 10px; grid-template-columns: auto 1fr auto; }
  .topbar-logo-right { display: none; }
  #topnav { gap: 0; overflow-x: auto; scrollbar-width: none; min-width: 0; justify-content: flex-start; }
  #topnav::-webkit-scrollbar { display: none; }
  .tnav-item { font-size: 12px; padding: 7px 10px; white-space: nowrap; letter-spacing: .04em; }
}

/* ── NAV PANEL (sidebar if needed) ──────────────────────────*/
.nav-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(224,26,42,.08);
  flex-shrink: 0;
}
.nav-panel-title {
  font-family: var(--font-head); font-weight: 700; font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--text3);
}
.nav-close-btn {
  background: rgba(224,26,42,.05);
  border: 1px solid rgba(224,26,42,.12);
  border-radius: 7px; color: var(--text3); cursor: pointer;
  padding: 7px; display: flex; align-items: center; justify-content: center;
  transition: all .15s; flex-shrink: 0;
}
.nav-close-btn:hover {
  background: rgba(224,26,42,.12);
  border-color: rgba(224,26,42,.3);
  color: var(--accent-text);
}
.nav-section-label {
  font-family: var(--font-head); font-weight: 700; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text3);
  padding: 16px 20px 7px; flex-shrink: 0;
}
.nav-item {
  display: flex; align-items: center; gap: 8px; width: auto;
  border: none; background: transparent; color: var(--text);
  cursor: pointer; font-family: var(--font-head); font-weight: 700;
  font-size: 11px; letter-spacing: .07em; text-transform: uppercase;
  padding: 8px 10px; text-align: left; border-radius: 6px;
  position: relative; transition: color .15s, background .15s;
  flex-shrink: 0; text-decoration: none;
}
.nav-item::before { display: none; }
.nav-item:hover  { color: #fff; background: rgba(224,26,42,.1); }
.nav-item.active { color: var(--accent-text); background: rgba(224,26,42,.14); }
.nav-icon-wrap {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: rgba(224,26,42,.04);
  border: 1px solid rgba(224,26,42,.08);
  flex-shrink: 0; transition: background .15s, border-color .15s, color .15s;
  color: var(--text3);
}
.nav-item:hover .nav-icon-wrap { background: rgba(224,26,42,.1); border-color: rgba(224,26,42,.2); color: var(--text2); }
.nav-item.active .nav-icon-wrap { background: rgba(224,26,42,.15); border-color: rgba(224,26,42,.32); color: var(--accent-text); }
.nav-item-label { flex: 1; }
.nav-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); flex-shrink: 0;
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 2s ease infinite;
}
.nav-divider { height: 1px; background: rgba(224,26,42,.06); margin: 6px 16px; flex-shrink: 0; }
.nav-panel-footer {
  margin-top: auto; padding: 16px 20px;
  border-top: 1px solid rgba(224,26,42,.05); flex-shrink: 0;
}
.nav-footer-text {
  font-family: var(--font-head); font-size: 9px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text3);
}

/* ── SECTION TAB BAR ─────────────────────────────────────────*/
#section-tabs {
  background: rgba(8,9,12,.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: none;
  position: sticky;
  top: 66px;
  z-index: 490;
  overflow-x: auto;
  scrollbar-width: none;
  justify-content: safe center;
  padding: 8px 0;
}
#section-tabs::-webkit-scrollbar { display: none; }
#section-tabs.visible, #section-tabs.active { display: flex; }
.stab-group {
  display: none;
  gap: 8px;
  padding: 0 14px;
  flex-shrink: 0;
}
.stab-group.visible, .stab-group.active { display: flex; }
/* subsection pills — matches the landing-page hero nav (big, centered, gold gradient active) */
.stab {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 11px 22px;
  border: none;
  border-radius: 5px;
  background: transparent;
  color: rgba(238,240,244,.82);
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s, box-shadow .2s;
}
.stab:hover  { color: #fff; background: rgba(255,255,255,.05); }
.stab.active {
  color: #fff;
  background: linear-gradient(135deg, #ff4436, #c00f1e);
  box-shadow: 0 0 22px -6px #c00f1e;
}

/* ── PAGES ────────────────────────────────────────────────── */
.page { display: none; animation: fadeUp .22s ease; position: relative; z-index: 1; }
.page.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-inner { max-width: 1100px; margin: 0 auto; padding: 22px 14px 32px; }

/* ── SECTION HEADER ──────────────────────────────────────────*/
.sec-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding: 20px 0 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sec-title::before {
  content: '';
  width: 4px;
  height: 4px;
  background: var(--accent);
  flex-shrink: 0;
}
.sec-title::after {
  content: '';
  flex: 1;
  height: 7px;
  background: var(--trace) repeat-x left center;
  opacity: .35;
  -webkit-mask: linear-gradient(90deg, #000 55%, transparent 100%);
  mask: linear-gradient(90deg, #000 55%, transparent 100%);
}

/* ── SURFACE ─────────────────────────────────────────────────*/
.surface {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 14px;
}

/* ── CONTROLS ────────────────────────────────────────────────*/
.controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.input-search {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--text1);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 9px 14px;
  outline: none;
  flex: 1;
  min-width: 160px;
  transition: border-color .2s, box-shadow .2s;
}
.input-search:focus { border-color: var(--accent-text); box-shadow: 0 0 0 2px rgba(224,26,42,.12); }
.input-search::placeholder { color: var(--text3); }

.pill {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 3px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.pill:hover  { border-color: var(--text2); color: var(--text1); }
.pill.active { background: var(--accent); border-color: var(--accent-text); color: var(--bg); font-weight: 800; }

/* Period label */
.period-label {
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
  align-self: center;
  white-space: nowrap;
}

/* ── PLAYER TOGGLE ───────────────────────────────────────────*/
.player-toggle {
  display: flex;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 14px;
  width: fit-content;
}
.ptab {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 11px 24px;
  border: none;
  background: transparent;
  color: var(--text2);
  cursor: pointer;
  transition: all .15s;
}
.ptab.active { background: var(--accent); color: var(--bg); font-weight: 900; }

/* ── TABLES ──────────────────────────────────────────────────*/
.stat-table { width: 100%; border-collapse: collapse; }
.stat-table th {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 10px 12px;
  text-align: right;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color .15s;
}
.stat-table th:first-child { text-align: left; }
.stat-table th:hover { color: var(--accent-text); }
.stat-table th.sort-asc::after  { content: ' ↑'; color: var(--accent-text); }
.stat-table th.sort-desc::after { content: ' ↓'; color: var(--accent-text); }

.stat-table td {
  padding: 9px 12px;
  text-align: right;
  border-bottom: 1px solid rgba(43,44,54,.6);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text2);
}
.stat-table td:first-child { text-align: left; color: var(--text1); }
.stat-table tbody tr { transition: background .12s; }
.stat-table tbody tr:hover { background: rgba(224,26,42,.05); }
.stat-table tbody tr:last-child td { border-bottom: none; }

/* Rank cell */
.stat-table td.rank {
  color: var(--text3);
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  width: 32px;
}
/* Highlight top row */
.stat-table tbody tr:first-child td { color: var(--text1); }
.stat-table tbody tr:first-child td.rank { color: var(--accent-text); }

/* Table scroll wrapper */
.tbl-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
.tbl-scroll::-webkit-scrollbar { height: 5px; }
.tbl-scroll::-webkit-scrollbar-track { background: transparent; }
.tbl-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ── STANDINGS TABLE ─────────────────────────────────────────*/
.standings-table { width: 100%; border-collapse: collapse; }
.standings-table th {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
  white-space: nowrap;
}
.standings-table th:first-child { text-align: left; }
.standings-table td {
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(43,44,54,.5);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text2);
  white-space: nowrap;
}
.standings-table td:first-child { text-align: left; }
.standings-table tbody tr:hover { background: rgba(224,26,42,.04); }
.standings-table tbody tr:last-child td { border-bottom: none; }

/* Playoff line */
.standings-table tbody tr.playoff-line td {
  border-bottom: 2px solid rgba(224,26,42,.4);
}

/* Team cell */
.team-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.team-logo { width: 34px; height: 34px; object-fit: contain; flex-shrink: 0; border-radius: 3px; }
.team-logo-sm { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }
.team-logo-lg { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.team-logo-xl { width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; }
.team-logo-placeholder {
  background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700; font-size: 9px; color: var(--text3);
}
.team-logo-placeholder.team-logo    { width: 34px; height: 34px; }
.team-logo-placeholder.team-logo-sm { width: 28px; height: 28px; }
.team-logo-placeholder.team-logo-xl { width: 72px; height: 72px; font-size: 13px; }
.tbl-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border2) transparent; }
.tbl-wrap::-webkit-scrollbar { height: 5px; }
.tbl-wrap::-webkit-scrollbar-track { background: transparent; }
.tbl-wrap::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
.tbl-wrap table { width: 100%; border-collapse: collapse; min-width: 480px; }
.tbl-wrap thead tr { background: var(--bg3); }
.tbl-wrap thead th {
  font-family: var(--font-head); font-weight: 700; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text2);
  padding: 10px 12px; text-align: left; white-space: nowrap;
  border-bottom: 2px solid var(--border2);
}
.tbl-wrap thead th.r { text-align: right; }
.tbl-wrap tbody tr { border-bottom: 1px solid rgba(43,44,54,.5); transition: background .1s; }
.tbl-wrap tbody tr:last-child { border-bottom: none; }
.tbl-wrap tbody tr:hover { background: rgba(224,26,42,.04); }
.tbl-wrap td { padding: 9px 12px; white-space: nowrap; font-size: 14px; color: var(--text); }
.tbl-wrap td.r { text-align: right; color: var(--text2); font-variant-numeric: tabular-nums; }
.tbl-wrap td.hl { color: var(--text1); font-weight: 600; }
.tbl-wrap td.pts { text-align: right; font-family: var(--font-head); font-weight: 800; font-size: 15px; color: var(--accent-text); }
.team-name-str {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--text1);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.team-abbr-str {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .08em;
  display: none;
}

/* Record cells */
.cell-w  { color: var(--win)  !important; font-weight: 700; }
.cell-l  { color: var(--loss) !important; font-weight: 700; }
.cell-otl{ color: var(--otl)  !important; font-weight: 700; }
.cell-pts{ color: var(--accent-text) !important; font-weight: 800; font-family: var(--font-head); }

/* ── PLAYERS PAGE SPLIT LAYOUT ───────────────────────────────*/
.players-page-inner { max-width: none; }
/* leaders stack full-width UNDER the stats table */
.players-split-layout {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.players-main { min-width: 0; }
.players-sidebar { width: 100%; }

/* ── LEADER CARDS ────────────────────────────────────────────*/
.leaders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.players-sidebar .leaders-grid { grid-template-columns: 1fr; }
.leader-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .15s;
  position: relative;
  overflow: hidden;
}
.leader-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  opacity: 0;
  transition: opacity .2s;
}
.leader-card:hover { border-color: var(--border2); background: var(--bg3); transform: translateY(-2px); }
.leader-card:hover::before { opacity: 1; }

.leader-stat {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
}
.leader-val {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 900;
  color: var(--accent-text);
  line-height: 1;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.leader-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text1);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leader-team {
  font-family: var(--font-head);
  font-size: 10px;
  color: var(--text3);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Leader rows (expanded view) */
.leader-rows { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.leader-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
  border-radius: 5px;
  transition: background .12s;
}
.leader-row:hover { background: rgba(224,26,42,.05); }
.lr-rank {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  width: 16px;
  flex-shrink: 0;
  text-align: center;
}
.lr-name { flex: 1; font-size: 12px; color: var(--text1); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-val  { font-family: var(--font-head); font-size: 13px; font-weight: 800; color: var(--accent-text); }
.lr-info { flex: 1; min-width: 0; }
.lr-team { font-size: 11px; color: var(--text3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-bar  { height: 2px; background: var(--border); border-radius: 1px; margin-top: 3px; }
.lr-bar-fill { height: 100%; background: var(--accent); border-radius: 1px; }
.leader-title { font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--text3); margin-bottom: 12px; }

/* Leader dropdown */
.leader-select-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* Leader panel (lb-*) */
.lb-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:18px;}
.lb-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:linear-gradient(90deg,rgba(224,26,42,.07) 0%,transparent 70%);border-bottom:1px solid var(--border);gap:12px;flex-wrap:wrap;}
.lb-header-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0}
.lb-star{color:var(--gold);font-size:16px;flex-shrink:0}
.lb-stat-name{font-family:var(--font-head);font-weight:900;font-size:18px;letter-spacing:.03em;text-transform:uppercase;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-badge{font-family:var(--font-head);font-weight:700;font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:2px 7px;border-radius:3px;background:rgba(224,26,42,.15);color:var(--gold);flex-shrink:0;}
.lb-select{font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.04em;background:var(--bg3);color:var(--text2);border:1px solid var(--border2);border-radius:6px;padding:7px 30px 7px 10px;cursor:pointer;outline:none;transition:border-color .15s,color .15s;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a8aaa'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;max-width:230px;}
.lb-select:hover,.lb-select:focus{border-color: var(--accent-text);color:var(--text)}
.lb-list{padding:4px 0}
.lb-row{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(43,44,54,.4);transition:background .12s;}
.lb-row:last-child{border-bottom:none}
.lb-row:hover{background:rgba(224,26,42,.05)}
.lb-row-top{background:rgba(224,26,42,.04)}
.lb-rank{font-family:var(--font-head);font-weight:800;font-size:16px;width:32px;text-align:center;flex-shrink:0;}
.lb-team-logo{width:22px;height:22px;object-fit:contain;flex-shrink:0;border-radius:2px}
.lb-logo-ph{background:var(--bg3);border:1px solid var(--border)}
.lb-info{flex:1;min-width:0}
.lb-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.lb-row:hover .lb-name{color: var(--accent-text)}
.lb-meta{font-size:11px;color:var(--text3);margin-top:1px;font-family:var(--font-head);letter-spacing:.03em;text-transform:uppercase}
.lb-bar{height:2px;background:var(--border);border-radius:1px;margin-top:5px}
.lb-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:1px}
.lb-val{font-family:var(--font-head);font-weight:900;font-size:24px;color: var(--accent-text);min-width:56px;text-align:right;flex-shrink:0;line-height:1;}
.lb-row-top .lb-val{color:var(--gold)}
.lb-empty{padding:28px;text-align:center;color:var(--text3);font-family:var(--font-head);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.leader-select {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--text1);
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 12px;
  outline: none;
  cursor: pointer;
}
.leader-select:focus { border-color: var(--accent-text); }

/* ── HOME HERO ───────────────────────────────────────────────*/
.home-hero {
  background: linear-gradient(160deg, var(--bg3) 0%, var(--bg4) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 4px;
  padding: 16px 24px 60px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  min-height: 280px;
  overflow: hidden;
}
/* Gold shimmer accent bar at top of hero */
.home-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--blue) 70%, transparent);
}

.home-logo {
  height: 90px;
  width: auto;
  object-fit: contain;
  margin: 20px auto 16px;
  filter: drop-shadow(0 4px 18px rgba(224,26,42,.4));
}

.home-league-name {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 20px rgba(224,26,42,.4);
  margin-bottom: 4px;
}

.home-season-badge {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-text);
  background: rgba(224,26,42,.1);
  border: 1px solid rgba(224,26,42,.25);
  border-radius: 20px;
  padding: 4px 14px;
  display: inline-block;
  margin-bottom: 20px;
}

.home-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  padding: 0 24px;
}

/* ── ACTION BUTTONS ─────────────────────────────────────────*/
.action-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 7px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all .18s;
  white-space: nowrap;
}

.action-btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
  color: #000;
  box-shadow: 0 0 16px rgba(224,26,42,.3);
}
.action-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 22px rgba(224,26,42,.5);
}

.action-btn-secondary {
  background: rgba(224,26,42,.1);
  color: var(--accent-text);
  border: 1px solid rgba(224,26,42,.3);
}
.action-btn-secondary:hover {
  background: rgba(224,26,42,.18);
  border-color: rgba(224,26,42,.5);
}

.action-btn-discord {
  background: rgba(88,101,242,.2);
  color: #8891f0;
  border: 1px solid rgba(88,101,242,.35);
}
.action-btn-discord:hover {
  background: rgba(88,101,242,.3);
  border-color: rgba(88,101,242,.55);
}

.action-btn-twitch {
  background: rgba(145,70,255,.15);
  color: #b380ff;
  border: 1px solid rgba(145,70,255,.3);
}
.action-btn-twitch:hover {
  background: rgba(145,70,255,.25);
  border-color: rgba(145,70,255,.5);
}

/* ── NEWS CARDS ──────────────────────────────────────────────*/
/* .news-grid kept for legacy grid layout if used elsewhere */
.news-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 680px) { .news-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .news-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* ── NEWS TABS ──────────────────────────────────────────────*/
#news-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}
.news-tab {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 30px;
  font-family: var(--font-head); font-weight: 700; font-size: 11px;
  letter-spacing: .09em; text-transform: uppercase;
  border: 1.5px solid var(--border2);
  background: rgba(255,255,255,.04);
  color: var(--text2); cursor: pointer;
  transition: all .2s; white-space: nowrap;
  backdrop-filter: blur(4px);
}
.news-tab:hover {
  border-color: var(--text2); color: var(--text1);
  background: rgba(255,255,255,.08);
  transform: translateY(-1px);
}
.news-tab.active {
  background: var(--accent);
  border-color: var(--accent-text); color: #000;
  box-shadow: 0 3px 12px rgba(224,26,42,.4);
  transform: translateY(-1px);
}

/* ── NEWS LIST + CARDS ──────────────────────────────────────*/
.news-list { display: flex; flex-direction: column; gap: 10px; }
@keyframes card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.news-card-featured {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  animation: card-in .4s ease both;
}
.news-card-featured:hover {
  border-color: rgba(224,26,42,.35);
  box-shadow: 0 6px 28px rgba(0,0,0,.4);
  transform: translateY(-2px);
}
.news-feat-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(8,9,12,.7);
}
.news-feat-title {
  font-family: var(--font-head); font-weight: 900; font-size: 24px;
  letter-spacing: .01em; line-height: 1.15;
  color: var(--text1); padding: 18px 18px 4px;
}
.news-feat-body { padding: 12px 18px 20px; font-size: 14px; line-height: 1.7; color: var(--text2); }
.news-feat-body p { margin-bottom: 8px; }
.news-feat-body p:last-child { margin-bottom: 0; }
.news-feat-body strong { color: var(--text1); font-weight: 600; }
.news-feat-body ul { padding-left: 18px; margin-bottom: 8px; }
.news-feat-body li { margin-bottom: 3px; }

.news-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  animation: card-in .35s ease both;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.news-card:hover {
  border-color: var(--border2);
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  transform: translateY(-1px);
}
.news-card.pinned { border-color: rgba(224,26,42,.3); }
.news-card-hdr {
  padding: 11px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  background: rgba(8,9,12,.6);
}
.news-pin { font-size: 14px; }
.news-cat {
  font-family: var(--font-head); font-weight: 700; font-size: 10px;
  letter-spacing: .09em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px;
  flex-shrink: 0;
}
.nc-announcement { background: rgba(184,196,208,.14); color: var(--ice); }
.nc-transaction   { background: rgba(46,204,113,.14);  color: #2ecc71; }
.nc-suspension    { background: rgba(231,76,60,.14);   color: #e74c3c; }
.nc-results       { background: rgba(224,26,42,.14);  color: var(--accent-text); }
.nc-general       { background: rgba(102,109,121,.12);  color: var(--text2); }
.nc-gameday       { background: rgba(224,26,42,.14);  color: var(--accent-text); }
.nc-weekly        { background: rgba(184,196,208,.14);  color: var(--ice); }
.nc-playoff       { background: rgba(224,26,42,.14);  color: var(--accent-text); }

.news-card-title { font-family: var(--font-head); font-weight: 700; font-size: 15px; flex: 1; letter-spacing: .01em; }
.news-date { font-size: 11px; color: var(--text3); white-space: nowrap; font-family: var(--font-head); letter-spacing: .04em; }
.news-card-body { padding: 13px 16px; font-size: 14px; line-height: 1.68; color: var(--text2); }
.news-card-body p { margin-bottom: 8px; }
.news-card-body p:last-child { margin-bottom: 0; }
.news-card-body strong { color: var(--text1); font-weight: 600; }
.news-card-body ul { padding-left: 18px; margin-bottom: 8px; }
.news-card-body li { margin-bottom: 3px; }
.news-card-img { display: block; width: 100%; max-height: 480px; object-fit: cover; border-radius: 0 0 8px 8px; }

/* ── SCHEDULE ────────────────────────────────────────────────*/
.schedule-week-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.week-nav-btn {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text2);
  font-family: var(--font-head);
  font-size: 16px;
  padding: 6px 14px;
  cursor: pointer;
  transition: all .15s;
}
.week-nav-btn:hover { border-color: var(--accent-text); color: var(--accent-text); }
.week-label {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text1);
  flex: 1;
  text-align: center;
}

.schedule-day { margin-bottom: 16px; }
.schedule-day-hdr {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-text);
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.schedule-game {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.schedule-game:hover { border-color: var(--border2); background: var(--bg3); }
.schedule-game.final { border-color: rgba(224,26,42,.2); }

.sg-time {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .06em;
  width: 60px;
  flex-shrink: 0;
  text-align: center;
}
.sg-teams { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.sg-team {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sg-team-name {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  color: var(--text1);
  letter-spacing: .04em;
  flex: 1;
}
.sg-score {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 900;
  color: var(--text1);
  width: 24px;
  text-align: right;
}
.sg-score.winner { color: var(--accent-text); }
.sg-status {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.sg-status.final   { background: rgba(39,174,96,.12);  color: var(--win); }
.sg-status.live    { background: rgba(224,26,42,.14); color: var(--accent-text); animation: pulse 1.5s ease infinite; }
.sg-status.preview { background: rgba(42,60,100,.4);   color: var(--text3); }

/* ── GAME RESULT MODAL ────────────────────────────────────────*/
.game-modal-teams {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.gmt-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.gmt-logo { width: 56px; height: 56px; object-fit: contain; }
.gmt-name {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text1);
  text-align: center;
}
.gmt-score {
  font-family: var(--font-head);
  font-size: 42px;
  font-weight: 900;
  color: var(--accent-text);
  text-align: center;
  line-height: 1;
}
.gmt-score-sep { font-family: var(--font-head); font-size: 28px; font-weight: 300; color: var(--text3); align-self: center; }
.gmt-period {
  font-family: var(--font-head);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
  text-align: center;
  margin-top: 4px;
}

/* Modal scoring summary */
.scoring-event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.scoring-event:last-child { border-bottom: none; }
.se-period {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  color: var(--text3);
  letter-spacing: .08em;
  width: 28px;
  flex-shrink: 0;
}
.se-time { font-family: var(--font-head); font-size: 11px; color: var(--text3); width: 36px; flex-shrink: 0; }
.se-team-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.se-scorer { font-weight: 600; color: var(--text1); flex: 1; }
.se-assists { color: var(--text2); font-size: 12px; }
.se-type { font-family: var(--font-head); font-size: 9px; color: var(--accent-text); letter-spacing: .08em; }

/* Three stars */
.three-stars {
  display: flex;
  gap: 10px;
  padding: 16px;
  border-top: 1px solid var(--border);
}
.star-card {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s;
}
.star-card:hover { border-color: var(--accent-text); }
.star-rank {
  font-family: var(--font-head);
  font-size: 20px;
  color: var(--accent-text);
  margin-bottom: 4px;
}
.star-name { font-size: 12px; font-weight: 600; color: var(--text1); }
.star-line { font-size: 11px; color: var(--text2); margin-top: 2px; }

/* ── PLAYER CARD MODAL ────────────────────────────────────────*/
#pc-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.85);
  padding: 16px;
  animation: fadeUp .15s ease;
}
@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.pc-box {
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 80px);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(224,26,42,.1);
  animation: slideUp .25s ease;
}
@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.pc-hero {
  position: relative;
  background: linear-gradient(160deg, var(--bg3) 0%, var(--bg4) 100%);
  padding: 24px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  border-bottom: 1px solid var(--border);
}
.pc-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--blue));
}
.pc-close {
  position: absolute;
  top: 10px; right: 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  padding: 5px 9px;
  font-size: 12px;
  transition: all .15s;
}
.pc-close:hover { background: rgba(224,26,42,.15); border-color: rgba(224,26,42,.3); color: var(--accent-text); }

.pc-corner {
  position: absolute;
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(224,26,42,.1);
  color: var(--accent-text);
  border: 1px solid rgba(224,26,42,.2);
}
.pc-corner-l { top: 10px; left: 10px; }
.pc-corner-r { bottom: 10px; right: 10px; }

.pc-hero-logo {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px; object-fit: contain;
  opacity: .2;
}
.pc-avatar-hero {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 3px solid rgba(224,26,42,.4);
  object-fit: cover;
  box-shadow: 0 0 20px rgba(224,26,42,.2);
}
.pc-name-plate {
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--border);
}
.pc-hdr-name {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 900;
  color: var(--text1);
  letter-spacing: .05em;
  text-transform: uppercase;
}
.pc-hdr-team {
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--accent-text);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-top: 2px;
}
.pc-ring-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(224,26,42,.1);
  border: 1px solid rgba(224,26,42,.25);
  border-radius: 4px;
  padding: 2px 8px;
}
.pc-ring-badge-img { width: 14px; height: 14px; object-fit: contain; }

.pc-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: var(--bg3);
}
.pc-tab {
  flex: 1;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 9px 6px;
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.pc-tab.active { color: var(--accent-text); border-bottom-color: var(--accent-text); }
.pc-body { overflow-y: auto; flex: 1; padding: 14px; }

/* Cross-league tabs (home league ↔ sister league) */
.pc-league-tabs {
  display: flex;
  gap: 6px;
  padding: 8px 10px 0;
  background: var(--bg3);
}
.pc-ltab {
  flex: 1;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 9px 6px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.pc-ltab:hover { color: var(--text); }
.pc-ltab.active {
  color: #0b0b0b;
  background: var(--accent);
  border-color: var(--accent-text);
}
.pc-away-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.pc-away-logo { width: 40px; height: 40px; object-fit: contain; }
.pc-away-name { font-family: var(--font-head); font-weight: 800; font-size: 14px; color: var(--text); }
.pc-away-sub  { font-size: 11px; color: var(--text3); margin-top: 2px; }
.pc-away-cta {
  display: inline-block;
  margin-top: 12px;
  padding: 9px 16px;
  background: var(--accent);
  color: #0b0b0b;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 8px;
  text-decoration: none;
}

/* PC stat grid */
.pc-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.pc-stat-box {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 8px;
  text-align: center;
}
.pc-stat-lbl {
  font-family: var(--font-head);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 4px;
}
.pc-stat-val {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 900;
  color: var(--text1);
  line-height: 1;
}
.pc-stat-val.accent { color: var(--accent-text); }

/* ── MODALS ──────────────────────────────────────────────────*/
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8,9,12,.85);
  backdrop-filter: blur(6px);
  z-index: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn .18s ease;
}
.modal-overlay.hidden { display: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal-box {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 32px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(224,26,42,.1);
  animation: modalIn .22s ease;
  position: relative;
}
.thread-modal-box { max-width: 680px; }

@keyframes modalIn {
  from { transform: scale(.96) translateY(8px); opacity: 0; }
  to   { transform: scale(1)   translateY(0);   opacity: 1; }
}

.modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 10;
}
.modal-title {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text1);
}
.modal-close {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: var(--text2);
  cursor: pointer;
  padding: 5px 9px;
  font-size: 12px;
  transition: all .15s;
  position: relative;
  z-index: 11;
  flex-shrink: 0;
}
.modal-close:hover { background: rgba(224,26,42,.12); border-color: rgba(224,26,42,.25); color: var(--accent-text); }

.modal-body { padding: 16px 20px; }

/* Team card modal */
.team-modal-hero {
  background: linear-gradient(160deg, var(--bg3) 0%, var(--bg4) 100%);
  border-bottom: 1px solid var(--border);
  padding: 24px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.team-modal-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--blue));
}
.team-modal-logo { width: 72px; height: 72px; object-fit: contain; }
.team-modal-name {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text1);
}
.team-modal-record {
  font-family: var(--font-head);
  font-size: 13px;
  color: var(--text3);
  margin-top: 4px;
}
.team-modal-pts {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 900;
  color: var(--accent-text);
  margin-left: auto;
}
.team-modal-pts-lbl {
  font-family: var(--font-head);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
  text-align: center;
}

/* ── STATE BOX (loading / empty) ─────────────────────────────*/
.state-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--text3);
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  gap: 10px;
}
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--accent-text);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ROSTERS ────────────────────────────────────────────────*/
.rosters-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.roster-head {
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg4) 100%);
  border-bottom: 1px solid var(--border); padding: 16px 18px;
  display: flex; align-items: center; gap: 14px;
  position: relative; overflow: hidden;
}
.roster-head::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.roster-tname { font-family: var(--font-head); font-weight: 800; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; flex: 1; }
.roster-cnt { font-size: 12px; color: var(--text3); font-family: var(--font-head); font-weight: 600; }
.roster-player {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 18px; border-bottom: 1px solid rgba(43,44,54,.4); font-size: 14px;
  transition: background .1s;
}
.roster-player:last-child { border-bottom: none; }
.roster-player:hover { background: rgba(224,26,42,.04); }
.roster-player[data-nav-player] { cursor: pointer; }
.roster-gp { font-family: var(--font-head); font-weight: 700; font-size: 11px; color: var(--text3); }
.roster-pos-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.roster-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.roster-pname { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.playoff-badge { width: 17px; height: 17px; border-radius: 50%; flex: 0 0 auto; vertical-align: middle; box-shadow: 0 0 0 1px rgba(224,26,42,.55); }
.pos-tag { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; background: rgba(184,196,208,.1); color: var(--blue); }
.pos-tag.C  { background: rgba(231,76,60,.15);   color: #e74c3c; }
.pos-tag.LW { background: rgba(39,174,96,.15);   color: #27ae60; }
.pos-tag.RW { background: rgba(184,196,208,.15);  color: var(--blue); }
.pos-tag.D  { background: rgba(26,188,156,.15);  color: #1abc9c; }
.pos-tag.LD { background: rgba(26,188,156,.15);  color: #1abc9c; }
.pos-tag.RD { background: rgba(241,196,15,.15);  color: #f1c40f; }
.pos-tag.G  { background: rgba(155,89,182,.15);  color: #9b59b6; }
/* Second position: same hue, outlined instead of filled, so a glance reads
   primary first and the pair never looks like two equal positions. */
.pos-tag.alt { background: transparent; box-shadow: inset 0 0 0 1px currentColor; opacity: .75; }

.roster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.roster-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.roster-card:hover { border-color: var(--accent-text); transform: translateY(-2px); }

.roster-card-hdr {
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg4) 100%);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
.roster-card-hdr::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: .5;
}
.roster-team-logo { width: 40px; height: 40px; object-fit: contain; }
.roster-team-name {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text1);
}
.roster-record {
  font-family: var(--font-head);
  font-size: 11px;
  color: var(--text3);
  margin-top: 2px;
}
.roster-pts {
  margin-left: auto;
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 900;
  color: var(--accent-text);
}

.roster-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(43,44,54,.4);
  transition: background .12s;
  cursor: pointer;
}
.roster-player-row:hover { background: rgba(224,26,42,.04); }
.roster-player-row:last-child { border-bottom: none; }
.rp-num {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.rp-name { flex: 1; font-size: 13px; font-weight: 600; color: var(--text1); }
.rp-pos {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text3);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
}
.rp-pos.goalie { color: var(--blue); border-color: rgba(184,196,208,.25); background: rgba(184,196,208,.05); }

/* GM / Captain badges */
.rp-badge {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 4px;
}
.rp-badge-gm  { background: rgba(224,26,42,.12); color: var(--accent-text); border: 1px solid rgba(224,26,42,.25); }
.rp-badge-agm { background: rgba(184,196,208,.1);  color: var(--blue);   border: 1px solid rgba(184,196,208,.2); }

/* ── POWER RANKINGS ───────────────────────────────────────── */
.pr-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 8px;
  transition: border-color .2s;
  cursor: pointer;
}
.pr-card:hover { border-color: var(--border2); }

.pr-rank {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 900;
  color: var(--text3);
  width: 36px;
  text-align: center;
  flex-shrink: 0;
}
.pr-rank.top1 { color: var(--accent-text); }
.pr-rank.top2 { color: var(--text2); }
.pr-rank.top3 { color: #c87533; }
.pr-logo { width: 44px; height: 44px; object-fit: contain; }
.pr-name {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text1);
  flex: 1;
}
.pr-record { font-family: var(--font-head); font-size: 11px; color: var(--text3); margin-top: 2px; }
.pr-pts {
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-text);
  width: 48px;
  text-align: right;
}
.pr-change {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  width: 28px;
  text-align: center;
}
.pr-change.up   { color: var(--win); }
.pr-change.down { color: var(--loss); }
.pr-change.same { color: var(--text3); }

/* ── RULES PAGE ──────────────────────────────────────────────*/
.rules-foreword {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 20px;
  color: var(--text2);
  font-size: 13px;
  line-height: 1.7;
}
.rules-foreword strong { color: var(--text1); }
.rules-section { margin-bottom: 24px; }
.rules-section-title {
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text1);
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rs-icon { font-size: 18px; }
.rules-block {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 8px;
  overflow: hidden;
}
.rules-block-hdr {
  background: var(--bg3);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.rules-block-body {
  padding: 14px 16px;
  color: var(--text2);
  font-size: 14px;
  line-height: 1.7;
}
.rules-block-body p { margin-bottom: 8px; }
.rules-block-body p:last-child { margin-bottom: 0; }
.rules-block-body ul { margin: 6px 0 0 18px; }
.rules-block-body li { margin-bottom: 4px; }
.rules-badge {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(224,26,42,.1);
  color: var(--accent-text);
  border: 1px solid rgba(224,26,42,.2);
}
.rules-badge.red {
  background: rgba(231,76,60,.1);
  color: var(--loss);
  border-color: rgba(231,76,60,.25);
}
.rules-badge.gold {
  background: rgba(224,26,42,.15);
  color: var(--accent-text);
  border-color: rgba(224,26,42,.3);
}
.rules-warning {
  background: rgba(231,76,60,.08);
  border: 1px solid rgba(231,76,60,.2);
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 10px;
  font-weight: 700;
  color: #f08080;
  font-size: 13px;
}

/* ── CONTACT PAGE ────────────────────────────────────────────*/
.contact-hero {
  background: linear-gradient(160deg, var(--bg3) 0%, var(--bg4) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.contact-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 40%, var(--blue) 70%, transparent);
}
.contact-hero-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 8px;
}
.contact-hero-title {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 900;
  color: var(--text1);
  margin-bottom: 8px;
}
.contact-hero-sub { font-size: 14px; color: var(--text2); }

.contact-profile-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.contact-profile-img {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(224,26,42,.3);
}
.contact-profile-name {
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  color: var(--text1);
}
.contact-profile-role {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-top: 4px;
}
.contact-profile-email {
  font-size: 13px;
  color: var(--blue);
  text-decoration: none;
  margin-top: 4px;
  display: block;
}
.contact-profile-email:hover { text-decoration: underline; }
.contact-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.contact-donate-block {
  text-align: center;
  padding: 20px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.contact-donate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #009cde 0%, #003087 100%);
  color: #fff;
  text-decoration: none;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 10px 20px;
  border-radius: 7px;
  transition: opacity .15s;
}
.contact-donate-btn:hover { opacity: .85; }

/* ── SPONSORS PAGE ───────────────────────────────────────────*/
.spon-hero {
  background: linear-gradient(160deg, var(--bg3) 0%, var(--bg4) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 28px;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.spon-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 40%, var(--blue) 70%, transparent);
}
.spon-hero-label {
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px;
}
.spon-hero-title { font-family: var(--font-head); font-size: 28px; font-weight: 900; color: var(--text1); margin-bottom: 8px; }
.spon-hero-sub { font-size: 14px; color: var(--text2); }

.spon-tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.spon-tier {
  background: var(--bg2);
  border-radius: var(--radius);
  padding: 20px;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.spon-tier::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.spon-tier-gold::before  { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.spon-tier-silver::before{ background: linear-gradient(90deg, #8a9bb0, #c4cdd6); }
.spon-tier-bronze::before{ background: linear-gradient(90deg, #c87533, #e0a060); }

.spon-tier-badge {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text1);
  margin-bottom: 12px;
}
.spon-tier-gold .spon-tier-badge   { color: var(--accent-text); }
.spon-tier-silver .spon-tier-badge { color: #c4cdd6; }
.spon-tier-bronze .spon-tier-badge { color: #e0a060; }

.spon-tier-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.spon-tier-perks li {
  font-size: 13px;
  color: var(--text2);
  padding-left: 16px;
  position: relative;
  line-height: 1.4;
}
.spon-tier-perks li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: var(--accent-text);
}

.spon-cta {
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg4) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}
.spon-cta-title { font-family: var(--font-head); font-size: 20px; font-weight: 900; color: var(--text1); margin-bottom: 6px; }
.spon-cta-sub   { font-size: 14px; color: var(--text2); margin-bottom: 16px; }
.spon-cta-btns  { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── FORUMS ──────────────────────────────────────────────────*/
.forum-controls { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

.forum-new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 7px;
  padding: 9px 18px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
  margin-bottom: 12px;
}
.forum-new-btn:hover { transform: translateY(-1px); box-shadow: var(--glow-gold); }

.forum-new-form {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
  display: none;
}
.forum-new-form.open { display: block; }

.forum-input,
.forum-textarea,
.forum-select {
  width: 100%;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--text1);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 10px 14px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  margin-bottom: 10px;
}
.forum-input:focus,
.forum-textarea:focus,
.forum-select:focus { border-color: var(--accent-text); box-shadow: 0 0 0 2px rgba(224,26,42,.1); }
.forum-input::placeholder, .forum-textarea::placeholder { color: var(--text3); }
.forum-select { cursor: pointer; }
.forum-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

.forum-form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.forum-submit-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 7px;
  padding: 9px 20px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
}
.forum-submit-btn:hover { transform: translateY(-1px); box-shadow: var(--glow-gold); }
.forum-cancel-btn {
  background: var(--bg3);
  color: var(--text2);
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 9px 16px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .15s;
}
.forum-cancel-btn:hover { border-color: var(--text2); color: var(--text1); }

/* Thread list */
.forum-thread {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  display: flex;
  gap: 12px;
}
.forum-thread:hover { border-color: var(--border2); background: var(--bg3); }
.ft-icon { font-size: 20px; flex-shrink: 0; }
.ft-body { flex: 1; min-width: 0; }
.ft-title {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ft-meta {
  font-size: 12px;
  color: var(--text3);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ft-cat {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(224,26,42,.1);
  color: var(--accent-text);
  border: 1px solid rgba(224,26,42,.2);
}
.ft-replies { margin-left: auto; font-family: var(--font-head); font-size: 11px; color: var(--text3); }

/* Forum reply */
.forum-reply-bar {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: var(--bg2);
  position: sticky;
  bottom: 0;
}
.forum-reply-input {
  flex: 1;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--text1);
  font-family: var(--font-body);
  font-size: 14px;
  padding: 8px 12px;
  outline: none;
  resize: none;
  transition: border-color .2s;
}
.forum-reply-input:focus { border-color: var(--accent-text); }
.forum-reply-submit {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 7px;
  padding: 9px 16px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  white-space: nowrap;
}

/* ── CLIPS ───────────────────────────────────────────────────*/
.clips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.clip-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, transform .15s;
}
.clip-card:hover { border-color: var(--border2); transform: translateY(-2px); }
.clip-thumb {
  width: 100%; aspect-ratio: 16/9;
  background: var(--bg3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--text3);
  position: relative;
  overflow: hidden;
}
.clip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.clip-thumb::after {
  content: '▶';
  position: absolute;
  font-size: 28px;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.4);
  border-radius: 50%;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.clip-card:hover .clip-thumb::after { background: rgba(224,26,42,.6); }
.clip-info { padding: 12px 14px; }
.clip-title { font-size: 13px; font-weight: 600; color: var(--text1); margin-bottom: 4px; line-height: 1.3; }
.clip-meta { font-size: 11px; color: var(--text3); font-family: var(--font-head); letter-spacing: .04em; }

/* ── TWITCH / LIVE STREAMS ───────────────────────────────────*/
.twitch-live-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
  margin-bottom: 20px;
}
.twitch-feat-embed {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16/9;
}
.twitch-feat-embed iframe { width: 100%; height: 100%; border: none; }
.twitch-feat-info { margin-top: 10px; }
.twitch-feat-title {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--text1);
  margin-bottom: 4px;
}
.twitch-feat-streamer { font-size: 12px; color: var(--text3); }
.twitch-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(224,26,42,.12);
  color: var(--accent-text);
  border: 1px solid rgba(224,26,42,.25);
  border-radius: 4px;
  padding: 3px 9px;
  margin-bottom: 8px;
}
.twitch-sidebar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 420px;
}
.twitch-switcher-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.twitch-switcher-card:hover  { border-color: var(--border2); background: var(--bg3); }
.twitch-switcher-card.active { border-color: rgba(224,26,42,.4); background: rgba(224,26,42,.05); }
.twitch-switcher-thumb {
  width: 80px; height: 45px; border-radius: 5px; overflow: hidden;
  background: var(--bg3); flex-shrink: 0;
}
.twitch-switcher-thumb img { width: 100%; height: 100%; object-fit: cover; }
.twitch-switcher-info { flex: 1; min-width: 0; }
.twitch-switcher-user {
  font-family: var(--font-head); font-size: 12px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.twitch-switcher-title {
  font-size: 11px; color: var(--text2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}

.twitch-offline-state {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 36px 24px; margin-bottom: 28px; text-align: center;
}
.twitch-offline-icon { font-size: 40px; margin-bottom: 12px; }
.twitch-offline-msg  {
  font-family: var(--font-head); font-size: 20px; font-weight: 800;
  color: var(--text1); margin-bottom: 8px;
}
.twitch-offline-sub { font-size: 13px; color: var(--text2); line-height: 1.55; max-width: 420px; margin: 0 auto; }

.twitch-streamers-hdr {
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; color: var(--text3); text-transform: uppercase;
  margin-bottom: 12px; margin-top: 4px;
}
.twitch-streamers-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 24px; }
.twitch-streamer-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; text-decoration: none;
  transition: border-color .15s; flex: 1 1 175px; max-width: 240px;
}
.twitch-streamer-card:hover    { border-color: rgba(145,70,255,.5); }
.twitch-streamer-card.is-live  { border-color: rgba(224,26,42,.4); background: rgba(224,26,42,.04); }
.twitch-streamer-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg3); flex-shrink: 0; overflow: hidden;
}
.twitch-streamer-avatar img { width: 100%; height: 100%; object-fit: cover; }
.twitch-streamer-name  { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--text); flex: 1; }
.twitch-streamer-status {
  font-size: 10px; font-family: var(--font-head); font-weight: 700;
  letter-spacing: .05em; padding: 2px 7px; border-radius: 3px; white-space: nowrap;
}
.twitch-streamer-status.live    { background: rgba(224,26,42,.1); color: var(--accent-text); }
.twitch-streamer-status.offline { color: var(--text3); }

@media (max-width: 820px) {
  .twitch-live-layout { grid-template-columns: 1fr; }
  .twitch-sidebar { flex-direction: row; flex-wrap: wrap; }
  .twitch-switcher-card { flex: 1 1 200px; }
  .twitch-feat-info { order: -1; }
}

/* ── SPONSOR RAIL ─────────────────────────────────────────── */
#sponsor-rail {
  display: flex;
  gap: 14px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
  margin-bottom: 4px;
}
#sponsor-rail::-webkit-scrollbar { display: none; }
.sponsor-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 6px 14px 6px 8px;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s;
}
.sponsor-chip:hover { border-color: var(--accent-text); }
.sponsor-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: contain; }
.sponsor-chip-name { font-family: var(--font-head); font-size: 11px; font-weight: 700; color: var(--text2); letter-spacing: .04em; }

/* ── DRAFT BOARD ─────────────────────────────────────────────*/
.draft-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.draft-card {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  transition: border-color .2s, box-shadow .2s;
}
.draft-card:hover { border-color: var(--border2); box-shadow: 0 4px 20px rgba(0,0,0,.3); }
.draft-card.has-stats { border-left: 3px solid var(--accent); }
.draft-card.is-goalie { border-left: 3px solid var(--gold); }
.draft-card-hdr {
  background: linear-gradient(135deg, var(--bg3) 0%, var(--bg4) 100%);
  padding: 14px 16px; display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--border);
}
.draft-card-name {
  font-family: var(--font-head); font-weight: 800; font-size: 16px;
  letter-spacing: .03em; text-transform: uppercase; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.draft-pos-badge { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: .08em; padding: 3px 8px; border-radius: 3px; flex-shrink: 0; }
.draft-pos-badge.skater { background: rgba(184,196,208,.12); color: var(--blue); }
.draft-pos-badge.goalie { background: rgba(224,26,42,.12); color: var(--gold); }
/* "+RW" — the declared second position on a draft-board card. */
.draft-pos-badge.alt { background: transparent; box-shadow: inset 0 0 0 1px currentColor;
  color: var(--text3); opacity: .9; margin-left: 4px; }
.draft-card-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); }
.draft-stat-cell { background: var(--bg2); padding: 10px 8px; text-align: center; }
.draft-stat-val { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--text1); line-height: 1; }
.draft-stat-val.accent { color: var(--accent-text); }
.draft-stat-val.gold { color: var(--gold); }
.draft-stat-lbl { font-family: var(--font-head); font-size: 9px; letter-spacing: .09em; text-transform: uppercase; color: var(--text3); margin-top: 2px; }
.draft-card-footer {
  padding: 8px 16px; display: flex; align-items: center; justify-content: space-between;
  background: rgba(8,9,12,.4); border-top: 1px solid var(--border);
}
.draft-prev-team { font-size: 11px; color: var(--text3); font-family: var(--font-head); letter-spacing: .04em; }
.draft-no-stats { padding: 14px 16px; font-size: 13px; color: var(--text3); font-family: var(--font-head); letter-spacing: .04em; text-align: center; }
.draft-count { font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: .06em; color: var(--text3); margin-bottom: 12px; }

.draft-player-row {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.draft-player-row:hover { border-color: var(--border2); background: var(--bg3); }
.dp-name { flex: 1; font-size: 14px; font-weight: 600; color: var(--text1); }
.dp-pos {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text3);
  border-radius: 4px;
  padding: 2px 8px;
}
.dp-gp { font-family: var(--font-head); font-size: 12px; color: var(--text3); }
.dp-pts { font-family: var(--font-head); font-size: 15px; font-weight: 800; color: var(--accent-text); }

/* ── CAREER PAGE ─────────────────────────────────────────────*/
.career-hero {
  display: flex; align-items: center; gap: 18px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; margin-bottom: 12px;
}
.career-hero-img { flex-shrink: 0; }
.career-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; border: 2px solid rgba(224,26,42,.3);
}
.career-logo { width: 64px; height: 64px; object-fit: contain; }
.career-avatar-ph {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--bg3); display: flex; align-items: center;
  justify-content: center; font-size: 28px; border: 2px solid var(--border);
}
.career-hero-info { flex: 1; min-width: 0; }
.career-hero-name {
  font-family: var(--font-head); font-size: 22px; font-weight: 900;
  color: var(--text1); letter-spacing: .06em; text-transform: uppercase;
}
.career-hero-pos {
  font-family: var(--font-head); font-size: 12px; color: var(--accent-text);
  letter-spacing: .1em; text-transform: uppercase; margin-top: 2px;
}
.career-hero-discord {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: #5865F2; font-family: var(--font-head);
  font-weight: 600; margin-top: 6px;
}
.career-champ-badge {
  display: inline-block; margin-top: 6px; font-family: var(--font-head);
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  color: var(--gold); background: rgba(224,26,42,.1);
  border: 1px solid rgba(224,26,42,.25); border-radius: 4px; padding: 2px 8px;
}
.career-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.career-role-badge {
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  background: rgba(88,101,242,.12); border: 1px solid rgba(88,101,242,.25);
  color: #8891f0; border-radius: 4px; padding: 2px 7px;
}
.career-tabs-bar {
  display: flex; gap: 4px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.career-tab {
  background: none; border: none; border-bottom: 2px solid transparent;
  padding: 8px 14px; font-family: var(--font-head); font-size: 11px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text3); cursor: pointer; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.career-tab.active { color: var(--accent-text); border-bottom-color: var(--accent-text); }

/* ── NEWS REACTIONS ──────────────────────────────────────────*/
.news-reactions {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border);
}
.rxn-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px; cursor: pointer;
  font-size: 13px; color: var(--text3);
  transition: background .15s, border-color .15s;
}
.rxn-btn:hover { background: rgba(224,26,42,.08); border-color: rgba(224,26,42,.3); }
.rxn-btn.rxn-mine {
  background: rgba(224,26,42,.1); border-color: rgba(224,26,42,.3); color: var(--accent-text);
}
.rxn-emoji { font-size: 15px; line-height: 1; }
.rxn-count { font-family: var(--font-head); font-size: 11px; font-weight: 700; min-width: 8px; }

/* ── FORUM DISCORD BADGE ─────────────────────────────────────*/
.forum-discord-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(88,101,242,.1); border: 1px solid rgba(88,101,242,.25);
  border-radius: 4px; padding: 1px 7px; font-size: 11px;
  font-family: var(--font-head); font-weight: 700;
  color: #8891f0; letter-spacing: .04em;
}
.forum-verified-badge { font-size: 11px; opacity: .8; }

/* ── SIGNUP MODAL ────────────────────────────────────────────*/
.signup-modal-box { max-width: 540px; }

.signup-label {
  display: block;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 6px;
  margin-top: 14px;
}
.signup-label:first-child { margin-top: 0; }
.signup-req { color: var(--loss); }
.signup-opt { color: var(--text3); font-weight: 500; }

.signup-radio-group {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.signup-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
}
.signup-radio input { accent-color: var(--accent-text); }

.signup-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text2);
  cursor: pointer;
  margin-bottom: 4px;
}
.signup-check input { accent-color: var(--accent-text); }
.signup-agree-check { margin-top: 12px; font-weight: 600; color: var(--text1); }

.signup-avail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 4px;
}
.signup-avail-head {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 8px;
}

.signup-error {
  background: rgba(231,76,60,.1);
  border: 1px solid rgba(231,76,60,.3);
  border-radius: 6px;
  color: #f08080;
  padding: 10px 14px;
  font-size: 13px;
  margin-top: 8px;
}
.signup-success {
  text-align: center;
  padding: 24px;
}
.signup-success-icon { font-size: 40px; margin-bottom: 12px; }
.signup-success-msg  { font-family: var(--font-head); font-size: 18px; font-weight: 800; color: var(--text1); margin-bottom: 6px; }
.signup-success-sub  { font-size: 13px; color: var(--text2); }

/* ── LIVE TICKER ─────────────────────────────────────────────*/
#ticker {
  /* Moved from a fixed bottom bar to an in-flow strip under the nav
     (2026-10-20). Shadow and border flipped to match the new edge. */
  position: relative;
  height: 42px;
  background: rgba(8,9,12,.97);
  border-bottom: 1px solid rgba(224,26,42,.3);
  box-shadow: 0 2px 20px rgba(224,26,42,.1);
  display: flex;
  align-items: center;
  z-index: 600;
  overflow: hidden;
}
#ticker.hidden { display: none; }

.ticker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-text);
  border-right: 1px solid var(--border);
  flex-shrink: 0;
  white-space: nowrap;
}
.ticker-pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: pulse 1.5s ease infinite;
}
.ticker-viewport {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.ticker-track {
  display: flex;
  gap: 40px;
  animation: tickerScroll 40s linear infinite;
  white-space: nowrap;
  align-items: center;
  height: 42px;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text2);
  cursor: pointer;
  transition: color .15s;
}
.ticker-item:hover { color: var(--accent-text); }
.ticker-item-score { color: var(--text1); }
.ticker-item-final {
  font-size: 9px;
  color: var(--text3);
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 6px;
}
.ticker-dot { color: var(--border2); font-size: 10px; }

.ticker-close {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  padding: 0 14px;
  font-size: 14px;
  flex-shrink: 0;
  transition: color .15s;
  height: 42px;
}
.ticker-close:hover { color: var(--accent-text); }

/* ── RECORDS PAGE ────────────────────────────────────────────*/
.rec-page { display: flex; flex-direction: column; gap: 14px; }

.rec-section-hdr {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 0 10px;
  border-bottom: 1px solid var(--border);
}
.rec-section-title {
  font-family: var(--font-head); font-weight: 900;
  font-size: 16px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text1);
}
.rec-section-sub {
  font-family: var(--font-head); font-weight: 700;
  font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text3);
}

.rec-group-hdr {
  font-family: var(--font-head); font-weight: 800;
  font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text3);
  margin: 14px 0 6px;
  display: flex; align-items: center; gap: 8px;
}
.rec-group-hdr::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.rec-table {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.rec-row {
  display: grid;
  grid-template-columns: 180px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  transition: background .15s;
}
.rec-row:last-child { border-bottom: none; }
.rec-row:hover { background: rgba(224,26,42,.03); }

.rec-stat-lbl {
  font-family: var(--font-head); font-weight: 700;
  font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text2);
}
.rec-holders {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0;
}
.rec-holder {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 10px 4px 6px; border-radius: 6px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
  transition: background .15s, border-color .15s;
}
.rec-holder:hover { background: rgba(224,26,42,.07); border-color: rgba(224,26,42,.2); }
.rec-team-logo  { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.rec-holder-name { font-family: var(--font-body); font-weight: 600; font-size: 13px; color: #fff; letter-spacing: .01em; }
.rec-holder-team {
  font-family: var(--font-head); font-weight: 600;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text3);
}
.rec-holder-sep { font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--text3); padding: 0 2px; }
.rec-value {
  font-family: var(--font-head); font-weight: 900;
  font-size: 22px; color: var(--accent-text);
  letter-spacing: .01em; font-variant-numeric: tabular-nums;
  text-align: right; min-width: 60px;
}

@media (max-width: 640px) {
  .rec-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "lbl val" "holders holders";
    gap: 6px 12px; padding: 12px 14px;
  }
  .rec-stat-lbl { grid-area: lbl; }
  .rec-value    { grid-area: val; font-size: 18px; }
  .rec-holders  { grid-area: holders; }
  .rec-holder-team { display: none; }
}

/* ── SITE FOOTER ─────────────────────────────────────────────*/
#site-footer {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  padding: 20px 16px;
  margin-top: 32px;
  position: relative;
}
#site-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--blue) 70%, transparent);
  opacity: .3;
}
/* the ticker no longer floats over the foot of the page, so the footer
   needs no clearance under it */
.footer-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.footer-logo  { width: 28px; height: 28px; object-fit: contain; }
.footer-brand-text { display: flex; flex-direction: column; gap: 2px; }
.footer-name  {
  font-family: var(--font-head); font-weight: 900; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text);
}
.footer-domain {
  font-family: var(--font-head); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; color: var(--accent-text); text-decoration: none;
  transition: opacity .15s;
}
.footer-domain:hover { opacity: .75; text-decoration: underline; }
.footer-links { display: flex; align-items: center; gap: 4px; flex: 1; flex-wrap: wrap; }
.footer-link  {
  background: none; border: none; color: var(--text3); cursor: pointer;
  font-family: var(--font-head); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px;
  border-radius: 4px; transition: color .15s, background .15s;
}
.footer-link:hover { color: var(--accent-text); background: rgba(224,26,42,.06); }
.footer-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; margin-left: auto; }
.footer-discord {
  display: flex; align-items: center; gap: 6px;
  color: #7289da; text-decoration: none;
  font-family: var(--font-head); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; transition: opacity .15s;
}
.footer-discord:hover { opacity: .8; }
.footer-copy { font-size: 10px; color: var(--text3); font-family: var(--font-head); letter-spacing: .05em; white-space: nowrap; }

@media (max-width: 640px) {
  .footer-inner  { gap: 12px; }
  .footer-right  { margin-left: 0; }
  .team-abbr-str { display: block; }
  .team-name-str { display: none; }
}

/* ── MISC UTILITIES ──────────────────────────────────────────*/
.hidden    { display: none !important; }
.text-win  { color: var(--win);    font-weight: 700; }
.text-loss { color: var(--loss);   font-weight: 700; }
.text-otl  { color: var(--otl);    font-weight: 700; }
.text-gold { color: var(--accent-text); font-weight: 700; }
.text-blue { color: var(--blue);   font-weight: 700; }

/* Stat group buttons */
.stat-group-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.sgbtn {
  background: transparent;
  border: 1px solid var(--border2);
  border-radius: 5px;
  color: var(--text3);
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  cursor: pointer;
  transition: all .15s;
}
.sgbtn:hover  { border-color: var(--text2); color: var(--text2); }
.sgbtn.active { background: rgba(224,26,42,.12); border-color: rgba(224,26,42,.3); color: var(--accent-text); }

/* Period controls */
.period-controls { margin-bottom: 8px; }
.period-pill { }

/* Season selector */
.season-selector-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.season-selector-label {
  font-family: var(--font-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
}
.season-selector {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 6px;
  color: var(--text1);
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: .06em;
  padding: 6px 10px;
  outline: none;
  cursor: pointer;
}
.season-selector:focus { border-color: var(--accent-text); }

/* Goalie stat colors */
.sv-bar {
  background: var(--bg3);
  border-radius: 3px;
  height: 5px;
  overflow: hidden;
  margin-top: 4px;
}
.sv-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--blue));
  border-radius: 3px;
}

/* Trending indicator */
.trend-up   { color: var(--win);  }
.trend-down { color: var(--loss); }

/* Player avatar placeholder */
.avatar-ph {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; flex-shrink: 0;
  border: 1px solid var(--border);
}
.avatar-sm {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border);
}

/* ── Scrollbar ───────────────────────────────────────────────*/
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Selection ──────────────────────────────────────────────*/
::selection { background: rgba(224,26,42,.25); color: #fff; }


/* ── PORTED FROM iH3 ─────────────────────────────────────*/
thead th.r{text-align:right}
thead th.sortable{cursor:pointer}
thead th.sortable:hover{color:var(--text2)}
td.r{text-align:right;color:var(--text2)}
td.hl{color:var(--text);font-weight:500}
td.pts{text-align:right;font-family:var(--font-head);font-weight:800;font-size:16px;color: var(--accent-text)}
td.rank.r1{color:var(--gold)}td.rank.r2{color:#b0bec5}td.rank.r3{color:#a1887f}
.diff-pos{color:var(--win)}.diff-neg{color:var(--loss)}.diff-neu{color:var(--text3)}
.chip{
  display:inline-flex;align-items:center;
  font-family:var(--font-head);font-weight:700;font-size:11px;
  padding:2px 7px;border-radius:3px;letter-spacing:.05em;
}
.cw{background:rgba(46,204,113,.12);color:var(--win)}
.cl{background:rgba(231,76,60,.12);color:var(--loss)}
.cotl{background:rgba(243,156,18,.12);color:var(--otl)}
.cotw{background:rgba(46,204,113,.12);color:var(--win)}
.cwff{background:rgba(46,204,113,.08);color:var(--win)}
.clff{background:rgba(231,76,60,.08);color:var(--loss)}

/* ── LOGO ── */
.lr-rank.r1{color:var(--gold)}
.back-btn{
  font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;padding:8px 14px;border-radius:6px;
  border:1px solid var(--border2);background:transparent;color:var(--text2);
  cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:5px;margin-bottom:14px;
}
.back-btn:hover{color:var(--text);border-color:var(--text2)}
.team-hero{
  background:linear-gradient(135deg,var(--bg2) 0%,var(--bg3) 100%);
  border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;margin-bottom:12px;display:flex;align-items:center;gap:20px;
  position:relative;overflow:hidden;
}
.team-hero::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(224,26,42,.06) 0%,transparent 60%);
}
.team-hero-logo{width:80px;height:80px;object-fit:contain;flex-shrink:0;position:relative;z-index:1}
.team-hero-info{flex:1;position:relative;z-index:1}
.team-name-big{font-family:var(--font-display);font-weight:400;font-size:40px;letter-spacing:.04em;text-transform:uppercase;line-height:.92;margin-bottom:6px}
.team-record{font-size:14px;color:var(--text2)}
.team-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:14px}
.tsg-cell{background:var(--bg2);padding:14px 16px}
.tsg-lbl{font-family:var(--font-head);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:2px}
.tsg-val{font-family:var(--font-display);font-size:34px;font-weight:400;color:var(--text);line-height:.9;letter-spacing:.02em}
.subtabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:14px}
.subtab{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase;padding:10px 16px;border:none;background:transparent;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;transition:color .15s,border-color .15s;margin-bottom:-1px}
.subtab:hover{color:var(--text)}
.section-lbl{font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:10px 0 6px}

/* ── GAME CARDS ── */
.games-list{display:flex;flex-direction:column;gap:8px}
.game-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;transition:border-color .15s;cursor:pointer;
}
.game-card:hover{border-color:var(--border2)}
.game-top{display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;gap:6px;padding:14px 18px 10px}
.gt-l{text-align:left;display:flex;align-items:center;gap:10px;min-width:0}
.gt-r{text-align:right;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.gt-info{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.gt-name{font-family:var(--font-head);font-weight:700;font-size:16px;letter-spacing:.02em;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gt-name.w{color:var(--text)}.gt-name.l{color:var(--text2)}
.score-block{display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:400;font-size:38px;letter-spacing:.02em;line-height:1}
.sn.w{color:var(--text)}.sn.l{color:var(--text3)}.ssep{color:var(--border2);font-size:20px}
.game-footer{border-top:1px solid var(--border);padding:7px 18px;display:flex;align-items:center;justify-content:space-between;background:rgba(8,9,12,.5)}
.game-meta{font-size:11px;color:var(--text3);font-family:var(--font-head);letter-spacing:.04em}
.type-badge{font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:.08em;padding:2px 7px;border-radius:3px}
.tb-REG{background:rgba(184,196,208,.12);color:var(--blue)}
.tb-OT{background:rgba(224,26,42,.12);color:var(--gold)}
.tb-DNF{background:rgba(243,156,18,.12);color:var(--otl)}

/* ── STATE BOX ── */
.state-icon{font-size:36px}
.state-title{font-family:var(--font-head);font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase}
.state-sub{font-size:13px;max-width:320px;line-height:1.5}
#standings-body .rank.r1{position:relative}

/* ── POWER RANKINGS ── */
.pr-rank-num{font-family:var(--font-display);font-weight:400;font-size:24px;line-height:1;letter-spacing:.02em}
.pr-info{flex:1;min-width:0}
.pr-score{font-family:var(--font-display);font-weight:400;font-size:28px;letter-spacing:.02em;line-height:1}
.pr-trend{font-family:var(--font-head);font-weight:700;font-size:12px;padding:3px 8px;border-radius:3px}
.pr-up{background:rgba(46,204,113,.12);color:var(--win)}
.pr-dn{background:rgba(231,76,60,.12);color:var(--loss)}
.pr-nc{background:rgba(102,109,121,.12);color:var(--text3)}

/* ── SCHEDULE ── */
.sched-header{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sched-btn{font-family:var(--font-head);font-weight:700;font-size:12px;padding:7px 13px;border-radius:6px;border:1px solid var(--border2);background:transparent;color:var(--text2);cursor:pointer;transition:all .15s;white-space:nowrap}
.sched-btn:hover{border-color:var(--text2);color:var(--text)}
.sched-btn.today-btn{background:var(--accent);border-color: var(--accent-text);color:#fff}
.sched-btn:disabled{opacity:.35;cursor:default;pointer-events:none}
.sched-date-label{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--text);min-width:180px;text-align:center}
.sched-dl-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 14px;padding:10px 12px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius)}
.sched-dl-label{font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.04em;color:var(--text2);text-transform:uppercase}
.sched-select{font-family:var(--font-head);font-size:12px;font-weight:600;padding:7px 10px;border-radius:6px;border:1px solid var(--border2);background:var(--bg);color:var(--text);cursor:pointer;max-width:220px}
#sched-season-slot{display:flex;align-items:center;justify-content:center;margin-bottom:14px;padding:8px 0;min-height:32px}
#sched-season-slot .season-dropdown{width:100%;max-width:220px}
.sched-night-sep{color:var(--text3);padding:0 4px}
.sched-night{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:12px}
.sched-night-hdr{background:rgba(23,28,42,.7);border-bottom:1px solid var(--border);padding:9px 16px;display:flex;align-items:center;justify-content:space-between}
.sched-night-day{font-family:var(--font-head);font-weight:800;font-size:15px;letter-spacing:.04em;color: var(--accent-text)}
.sched-night-date{font-size:12px;color:var(--text3);font-family:var(--font-head)}
.sched-timeslot-hdr{background:rgba(8,9,12,.8);border-bottom:1px solid rgba(43,44,54,.7);border-top:1px solid rgba(43,44,54,.4);padding:6px 16px;display:flex;align-items:center;justify-content:space-between}
.sched-timeslot-time{font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--blue);letter-spacing:.06em}
.sched-timeslot-label{font-family:var(--font-head);font-size:10px;color:var(--text3);letter-spacing:.07em;text-transform:uppercase}
.sched-col-hdr{display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;padding:4px 16px;gap:8px;border-bottom:1px solid rgba(43,44,54,.8);background:rgba(5,5,7,.5)}
.sched-col-lbl{font-family:var(--font-head);font-weight:700;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.sched-col-lbl.c-away{text-align:left}.sched-col-lbl.c-code{text-align:center}.sched-col-lbl.c-home{text-align:right}
.sched-game{display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;padding:10px 16px;border-bottom:1px solid rgba(43,44,54,.5);gap:8px;transition:background .12s}
.sched-game:last-child{border-bottom:none}
.sched-game:hover{background:rgba(184,196,208,.04)}
.sched-game.clickable{cursor:pointer}
.sched-away{display:flex;align-items:center;gap:8px;min-width:0;justify-content:flex-start}
.sched-home{display:flex;align-items:center;gap:8px;min-width:0;justify-content:flex-end}
.sched-tname{font-family:var(--font-head);font-weight:600;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sched-trecord{font-family:var(--font-head);font-size:10px;color:var(--text3);white-space:nowrap;flex-shrink:0}
.sched-centre{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.sched-code{font-family:var(--font-head);font-weight:700;font-size:12px;color: var(--accent-text);letter-spacing:.08em}
.sched-game-num{font-family:var(--font-head);font-weight:700;font-size:10px;color: var(--accent-text);letter-spacing:.1em;text-transform:uppercase}
.sched-score-centre{font-family:var(--font-head);font-weight:800;font-size:19px;display:flex;align-items:center;gap:5px}
.sched-score-centre .w{color:var(--text)}.sched-score-centre .l{color:var(--text3)}.sched-score-centre .sep{color:var(--border2);font-size:13px}
.sched-tbd{font-size:11px;color:var(--text3);font-family:var(--font-head);letter-spacing:.03em}
/* Playoff best-of-7 night grouping (Tue G1-2 / Wed G3-4 / Thu G5-7) */
.sched-po-night{display:flex;align-items:baseline;gap:10px;padding:7px 16px;background:rgba(5,5,7,.55);border-top:1px solid rgba(43,44,54,.8);border-bottom:1px solid rgba(43,44,54,.6)}
.sched-po-day{font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color: var(--accent-text)}
.sched-po-games{font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.sched-po-cond{color:var(--gold);opacity:.85}
.sched-game-upcoming{cursor:default}
.sched-game-upcoming:hover{background:transparent}
.sched-slot-tag{font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);padding:2px 0}
.sched-slot-tag.sched-slot-cond{color:var(--gold);opacity:.8}
.sched-cancelled{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;text-align:center;background:repeating-linear-gradient(135deg,rgba(255,90,82,.06) 0 14px,transparent 14px 28px)}
.sched-cancelled-tag{font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.22em;color:var(--loss);border:1px solid var(--loss);border-radius:999px;padding:4px 14px;background:rgba(255,90,82,.08)}
.sched-cancelled-note{font-family:var(--font-head);font-size:14px;letter-spacing:.03em;color:var(--text2)}

/* ── MODAL ── */
.modal-scoreboard{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.modal-team{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1;min-width:0}
.modal-team-logo{width:52px;height:52px;object-fit:contain}
.modal-team-name{font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.03em;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.modal-team-record{font-size:11px;color:var(--text3)}
.modal-score{font-family:var(--font-head);font-weight:900;font-size:50px;display:flex;align-items:center;gap:10px;flex-shrink:0}
.modal-score .w{color:var(--text)}.modal-score .l{color:var(--text3)}.modal-score .sep{font-size:26px;color:var(--border2)}
.modal-meta{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding-top:10px;border-top:1px solid var(--border)}
.modal-meta-item{font-family:var(--font-head);font-size:11px;color:var(--text3);letter-spacing:.04em}

/* ── GAME DETAIL MODAL ── */
.gd-scoreboard{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:16px}
.gd-team{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0}
.gd-team-logo{width:48px;height:48px;object-fit:contain}
.gd-team-name{font-family:var(--font-head);font-weight:800;font-size:15px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%}
.gd-team-record{font-size:11px;color:var(--text3)}
.gd-score{font-family:var(--font-head);font-weight:900;font-size:46px;display:flex;align-items:center;gap:8px;flex-shrink:0}
.gd-score .w{color:var(--text)}.gd-score .l{color:var(--text3)}.gd-score .sep{font-size:24px;color:var(--border2)}
.gd-meta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;padding:8px 0 12px;border-bottom:1px solid var(--border);margin-bottom:12px}
.gd-meta-item{font-family:var(--font-head);font-size:11px;color:var(--text3);letter-spacing:.04em}
.gd-team-stats{display:grid;grid-template-columns:1fr auto 1fr;gap:4px;margin-bottom:14px;background:var(--bg3);border-radius:8px;padding:12px 14px}
.gd-ts-val-l{font-family:var(--font-head);font-weight:800;font-size:15px;color: var(--accent-text);text-align:left}
.gd-ts-val-r{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--text2);text-align:right}
.gd-ts-lbl{font-family:var(--font-head);font-size:10px;color:var(--text3);text-align:center;letter-spacing:.07em;text-transform:uppercase;align-self:center}
.gd-bar-row{grid-column:1/-1;display:flex;height:2px;border-radius:1px;overflow:hidden;margin:1px 0}
.gd-section-lbl{font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);padding:8px 0 5px;border-bottom:1px solid var(--border);margin-bottom:6px}
.gd-player-tbl{width:100%;border-collapse:collapse;margin-bottom:12px;font-size:12px}
.gd-goalie-tbl{width:100%;border-collapse:collapse;margin-bottom:8px;font-size:12px}
.gd-pm-pos{color:var(--win)}.gd-pm-neg{color:var(--loss)}.gd-pm-neu{color:var(--text3)}
.gd-svp{color:var(--gold);font-weight:700}
.gd-pts{color:var(--win);font-weight:700}
.stars-row{display:flex;justify-content:space-around;margin-bottom:14px;padding:10px;background:var(--bg3);border-radius:8px;gap:6px}
.star-item{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;min-width:0}
.star-stat{font-size:11px;color:var(--text3)}

/* ── HOME / NEWS ── */
/* ── HERO ── */
.hero-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0,rgba(255,255,255,.022) 1px,transparent 1px,transparent 52px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0,rgba(255,255,255,.022) 1px,transparent 1px,transparent 52px);
}
/* red crown glow behind logo */
.hero-glow-top{
  position:absolute;top:-40px;left:50%;transform:translateX(-50%);
  width:520px;height:220px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(224,26,42,.22) 0%,transparent 70%);
}
.home-hero-logo{
  width:82px;height:82px;object-fit:contain;margin-bottom:16px;
  position:relative;z-index:1;
  filter:drop-shadow(0 0 28px rgba(224,26,42,.55)) drop-shadow(0 0 8px rgba(224,26,42,.3));
  animation:hero-pop .55s cubic-bezier(.22,.68,0,1.2) both;
}
.home-season{
  font-family:var(--font-head);font-weight:700;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--text3);margin-bottom:32px;
  position:relative;z-index:1;
  animation:hero-rise .5s .16s ease both;
}
.news-filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}

/* ── NEWS LIST + CARDS ── */
.rules-badge.green{background:rgba(46,204,113,.15);color:var(--win)}
@media(max-width:640px){
  .home-actions{grid-template-columns:1fr}
  .page-inner{padding:12px 10px 18px}
  .game-top{grid-template-columns:1fr 88px 1fr;padding:10px 12px 8px}
  .score-block{font-size:24px}.gt-name{font-size:13px}
  .team-stat-grid{grid-template-columns:repeat(2,1fr)}
  .leaders-grid{grid-template-columns:1fr}
  .sched-header{flex-wrap:wrap}
  .sched-tname{font-size:11px}
  .team-logo{width:26px;height:26px}
  .game-top .team-logo{display:none}
  .sched-game{grid-template-columns:1fr 90px 1fr;padding:8px 10px}
  .sched-col-hdr{grid-template-columns:1fr 90px 1fr;padding:4px 10px}
  .sched-trecord{display:none}
  .modal-score{font-size:36px}
  .rosters-grid{grid-template-columns:1fr}
}

/* ── PLAYER CARD MODAL — trading card style ── */
.pc-ms-champ-icon{width:64px;height:55px;object-fit:contain}
/* ─ Tabs ─ */
.pc-cs-hdr{background:rgba(25,26,33,.95);padding:4px 12px;font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(224,26,42,.85);border-left:3px solid #e01a2a;display:flex;align-items:center}
.pc-cs-row{display:grid;border-bottom:1px solid rgba(30,38,60,.7);background:rgba(10,13,24,.85)}
.pc-cs-row.alt{background:rgba(14,18,32,.85)}
.pc-cs-cell{padding:7px 4px 5px;text-align:center;border-right:1px solid rgba(50,62,95,.45)}
.pc-cs-cell:last-child{border-right:none}
.pc-cs-val{font-family:var(--font-head);font-weight:800;font-size:17px;line-height:1;color:#e8ecf4}
.pc-cs-lbl{font-family:var(--font-head);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:rgba(152,160,172,.8);margin-top:3px}
.cv-gold{color:#e01a2a}.cv-win{color:#3dd68c}.cv-loss{color:#ff5c5c}.cv-ice{color:#5aaaf0}.cv-dim{color:rgba(152,160,172,.8)}
/* ─ Splits / Games / Position (tabs 2-4) padding wrapper ─ */
.pc-tab-pad{padding:14px 16px}
/* ─ Kept table styles ─ */
.pc-split-tbl{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:12px}
.pc-game-row{display:grid;grid-template-columns:70px 1fr auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid rgba(43,44,54,.4);font-size:13px}
.pc-game-row:last-child{border-bottom:none}
.pc-game-date{font-family:var(--font-head);font-size:11px;color:var(--text3);letter-spacing:.04em}
.pc-game-opp{color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.pc-game-stats{font-family:var(--font-head);font-weight:700;font-size:12px;color:var(--text);white-space:nowrap;text-align:right}
.pc-game-result{font-family:var(--font-head);font-size:10px;font-weight:700;padding:2px 5px;border-radius:3px;margin-left:4px}
.pc-sec-lbl{font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);padding:8px 0 6px;border-bottom:1px solid var(--border);margin-bottom:10px}
.pc-pos-row{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid rgba(43,44,54,.3);font-size:13px}
.pc-pos-row:last-child{border-bottom:none}
.pc-pos-lbl{font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--text2)}
.pc-pos-val{font-family:var(--font-head);font-weight:800;font-size:15px;color:var(--text)}

/* ── EASHL Tier Badges — sprite from assets/eashl_badges.png ── */
/* Sprite is 1031×148px, 6 equal cells of ~171.8px each       */
.eashl-badge{
  background-image:url('assets/eashl_badges.png');
  background-repeat:no-repeat;
  display:block;flex-shrink:0;
}
/* b-sm (64×55px) — milestone tiles */
.eashl-badge.b-sm{width:64px;height:55px;background-size:384px auto}
.eashl-badge.b-sm.t-bronze {background-position:0 center}
.eashl-badge.b-sm.t-silver {background-position:-64px center}
.eashl-badge.b-sm.t-gold   {background-position:-128px center}
.eashl-badge.b-sm.t-plat   {background-position:-192px center}
.eashl-badge.b-sm.t-diamond{background-position:-256px center}
.eashl-badge.b-sm.t-elite  {background-position:-320px center}
/* b-md (86×74px) — power rankings */
.eashl-badge.b-md{width:86px;height:74px;background-size:516px auto}
.eashl-badge.b-md.t-bronze {background-position:0 center}
.eashl-badge.b-md.t-silver {background-position:-86px center}
.eashl-badge.b-md.t-gold   {background-position:-172px center}
.eashl-badge.b-md.t-plat   {background-position:-258px center}
.eashl-badge.b-md.t-diamond{background-position:-344px center}
.eashl-badge.b-md.t-elite  {background-position:-430px center}
/* Tier accent colors for rank numbers & labels */
.t-bronze-c{color:#c98a42}.t-silver-c{color:#cdd8e4}.t-gold-c{color:#f5c840}
.t-plat-c{color:#7ecbf0}.t-diamond-c{color:#c870f0}.t-elite-c{color:#ff7040}

/* ── Milestones tab ── */
.pc-ms-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pc-ms-badge{padding:10px 6px 8px;text-align:center;transition:transform .15s;cursor:default;display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--bg3);border-radius:8px;border:1px solid var(--border)}
.pc-ms-badge:hover{transform:translateY(-2px)}
.pc-ms-label{font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:.07em;text-transform:uppercase;line-height:1.2;color:var(--text2)}
.pc-ms-date{font-size:9px;color:var(--text3);letter-spacing:.02em}
/* Tier accent on label */
.pc-ms-bronze .pc-ms-label{color:#c98a42}
.pc-ms-silver .pc-ms-label{color:#cdd8e4}
.pc-ms-gold   .pc-ms-label{color:#f5c840}
.pc-ms-plat   .pc-ms-label{color:#7ecbf0}
.pc-ms-diamond .pc-ms-label{color:#c870f0}
.pc-ms-elite  .pc-ms-label{color:#ff7040}

/* ── DRAFT BOARD ── */
.dpm-section-label{
  font-family:var(--font-head);font-weight:800;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;color: var(--accent-text);
  margin-bottom:6px;
}
.pc-draft-label{
  font-family:var(--font-head);font-weight:800;font-size:9px;
  letter-spacing:.12em;color: var(--accent-text);text-transform:uppercase;margin-right:4px;
}
.pc-draft-chip{
  font-family:var(--font-head);font-weight:700;font-size:10px;
  letter-spacing:.06em;color:var(--text2);background:var(--bg3);
  border:1px solid var(--border);border-radius:4px;padding:2px 8px;
}

/* ─── v3.4.0 Period & Stat-group Controls ───────────────── */
.period-controls, .stat-group-controls{
  flex-wrap:wrap;
  gap:6px;
  padding:8px 10px;
  background:rgba(8,9,12,.35);
  border:1px solid var(--border);
  border-radius:4px;
  margin-bottom:10px;
  align-items:center;
}
.period-pill, .group-pill{
  font-size:11px !important;
  padding:5px 10px !important;
  letter-spacing:.04em;
}
.period-badge{
  font-family:var(--font-head);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color: var(--accent-text);
  background:rgba(184,196,208,.12);
  border:1px solid var(--accent);
  padding:3px 7px;
  border-radius:3px;
  margin-left:8px;
  text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════════
   v3.5.0 — BROADCAST POLISH
   Appended overrides — original rules above remain untouched
   ═══════════════════════════════════════════════════════════ */

:root{
  --font-display:'Saira Condensed',sans-serif;  /* Oswald was never loaded */
  --shadow-card:0 4px 24px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.03) inset;
  --shadow-card-hi:0 10px 40px rgba(224,26,42,.15), 0 1px 0 rgba(255,255,255,.04) inset;
  --glow-red:0 0 18px rgba(224,26,42,.5), 0 0 36px rgba(224,26,42,.25);
  --chyron-grad:linear-gradient(90deg, rgba(224,26,42,.18) 0%, rgba(224,26,42,.06) 40%, transparent 100%);
}

/* Deeper background atmosphere */
.tk-item{
  display:flex;align-items:center;gap:8px;
  padding:0 18px;height:100%;
  border-right:1px solid rgba(255,255,255,.06);
  font-family:var(--font-display);font-weight:600;
  font-size:13px;letter-spacing:.04em;
  color:var(--text);
}
.tk-kind{
  font-size:9px;font-weight:700;letter-spacing:.14em;
  padding:2px 6px;border-radius:2px;
  text-transform:uppercase;
}
.tk-kind.ot{background:rgba(243,156,18,.14);color:var(--otl)}
.tk-kind.dnf{background:rgba(231,76,60,.14);color:var(--loss)}
.tk-team{
  display:inline-flex;align-items:center;gap:5px;
}
.tk-tname{color:var(--text);font-weight:600}
.tk-tname.win{color:#fff;font-weight:700}
.tk-tname.lose{color:var(--text2)}
.tk-score{
  font-family:var(--font-display);font-weight:700;
  font-size:15px;color:var(--text);
  min-width:14px;text-align:center;
}
.tk-score.win{color: var(--accent-text)}
.tk-sep{color:var(--text3);margin:0 2px}
.tk-vs{
  font-family:var(--font-display);font-size:10px;
  color:var(--text3);letter-spacing:.1em;
  margin:0 4px;font-weight:600;
}
.tk-time{
  font-family:var(--font-display);font-size:11px;
  color:var(--text2);font-weight:500;letter-spacing:.06em;
  margin-left:4px;
}
td.pts{
  font-family:var(--font-display);
  font-size:17px;
  text-shadow:0 0 12px rgba(224,26,42,.25);
}
.pill{
  background:rgba(20,24,36,.5);
  backdrop-filter:blur(8px);
  border:1px solid var(--border2);
  transition:all .18s cubic-bezier(.4,0,.2,1);
}
.team-hero{
  background:linear-gradient(135deg, var(--bg2) 0%, #0a0e1a 60%, #060810 100%);
  box-shadow:var(--shadow-card);
  min-height:120px;
}
.team-hero::before{
  background:
    linear-gradient(135deg, rgba(224,26,42,.1) 0%, transparent 55%),
    radial-gradient(circle at 85% 50%, rgba(184,196,208,.06) 0%, transparent 50%);
}
.team-hero::after{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--accent) 0%, transparent 70%);
  z-index:2;
}
.team-name-big{
  font-family:var(--font-display);
  font-weight:700;font-size:34px;letter-spacing:.03em;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.team-record{
  font-family:var(--font-display);
  font-size:14px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:500;
}

/* ── TEAM STAT GRID ── */
.tsg-val{
  font-family:var(--font-display);
  font-size:28px;font-weight:700;
}
.tsg-lbl{
  font-family:var(--font-display);
  letter-spacing:.14em;font-size:10.5px;
}

/* ── SCHEDULE NIGHT REFINEMENT ── */
.sched-night{
  box-shadow:var(--shadow-card);
}

/* ── HOME HERO BROADCAST UPGRADE ── */
.home-season{
  font-family:var(--font-display) !important;
  letter-spacing:.16em !important;
  position:relative;z-index:1;
}

/* ── NAV ACTIVE INDICATOR — handled in sidebar nav styles above ── */

/* ── POWER RANKING CARDS ── */
.pr-score{
  font-family:var(--font-display);
  font-weight:700;
  text-shadow:0 0 10px currentColor;
  opacity:.9;
}

/* ── NEWS CARD ACCENT ── */
.period-controls, .stat-group-controls{
  background:linear-gradient(180deg, rgba(14,17,26,.6) 0%, rgba(8,9,12,.6) 100%);
  border:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.02) inset;
}
@media(max-width:640px){
  #ticker{height:38px}
  .ticker-label{font-size:10px;padding:0 10px;padding-right:18px}
  .tk-item{font-size:12px;padding:0 14px;gap:6px}
  .tk-score{font-size:14px}
  .tk-team img{width:16px;height:16px}
  .ticker-track{animation-duration:6s}
  .team-name-big{font-size:26px}
  .sec-title{font-size:13px;letter-spacing:.12em}
}

/* Reduced motion respect */
.nav-cell{
  position:relative;
  transition:background .15s, color .15s;
}
.nav-cell:hover{
  background:rgba(224,26,42,.12) !important;
  color: var(--accent-text) !important;
}
/* Slight scale-up on the logo cell to feel tactile */
.nav-cell:hover img{
  transform:scale(1.08);
  transition:transform .15s;
}

/* Leader rows — highlight + slide right on hover */
.tk-item.tk-clickable:hover{
  background:linear-gradient(180deg, rgba(224,26,42,.1) 0%, rgba(224,26,42,.05) 100%);
  box-shadow:inset 0 -2px 0 var(--accent);
}
.tk-item.tk-clickable:hover .tk-tname{
  color:#fff;
}
.tk-item.tk-clickable:hover .tk-score{
  text-shadow:0 0 8px rgba(224,26,42,.5);
}

/* Player-card Games tab rows — slide + highlight */
.pc-game-row[data-nav-game]:hover .pc-game-opp{
  color: var(--accent-text);
}

/* Game modal — HOME/AWAY scoreboard team blocks */
.gd-team[data-nav-team]:hover .gd-team-name,
.modal-team[data-nav-team]:hover .modal-team-name{
  color: var(--accent-text);
  text-shadow:0 0 12px rgba(224,26,42,.4);
}

/* Game modal — three stars */
.gt-r[data-nav-team]:hover .gt-name{
  color: var(--accent-text);
}

/* Player card header — team label */
@media (hover: none){
  .leader-row[data-nav-player]:hover,
  .pc-game-row[data-nav-game]:hover,
  .star-item[data-nav-player]:hover,
  .gd-team[data-nav-team]:hover,
  .modal-team[data-nav-team]:hover{
    transform:none;
  }
  .nav-cell:hover img{transform:none}
  .roster-player[data-nav-player]:hover{padding-left:18px}
}
/* ── Milestone ticker chip ── */
.tk-kind.milestone { background: rgba(224,26,42,.18); color: #e01a2a; }
.tk-ms-player { font-weight: 700; color: var(--text); font-family: var(--font-head); letter-spacing: .02em; }
.tk-ms-sep    { color: var(--text3); font-size: 10px; opacity: .6; }
.tk-ms-label  { color: #e01a2a; font-weight: 600; font-family: var(--font-head); letter-spacing: .03em; }
.tk-ms-team   { color: var(--text3); font-family: var(--font-head); font-size: 11px; }

/* ── Mobile player card improvements ── */
@media (max-width: 480px) {
  .pc-tab           { min-height: 44px; padding: 10px 10px; font-size:10px; }
  .pc-ms-grid       { grid-template-columns: repeat(2, 1fr) !important; }
  .eashl-badge.b-sm { width:52px; height:45px; background-size:312px auto; }
  .eashl-badge.b-sm.t-silver  { background-position:-52px center; }
  .eashl-badge.b-sm.t-gold    { background-position:-104px center; }
  .eashl-badge.b-sm.t-plat    { background-position:-156px center; }
  .eashl-badge.b-sm.t-diamond { background-position:-208px center; }
  .eashl-badge.b-sm.t-elite   { background-position:-260px center; }
  .pc-box           { max-height:min(92vh,640px); }
  .pc-hero          { height:120px; }
  .pc-hero-logo,.pc-avatar-hero { width:72px; height:72px; }
}

/* ═══════════════════════════════════════════════════════════
   v3.7.0 — LEADERBOARD DROPDOWN PANEL
   ═══════════════════════════════════════════════════════════ */
.potn-card{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 16px;
  background:linear-gradient(90deg,rgba(224,26,42,.07) 0%,transparent 80%);
  border-top:1px solid rgba(224,26,42,.18);
  cursor:pointer;transition:background .15s;
}
.potn-card:hover{background:linear-gradient(90deg,rgba(224,26,42,.13) 0%,transparent 80%)}
.potn-label{
  font-family:var(--font-head);font-weight:800;font-size:10px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
  white-space:nowrap;flex-shrink:0;
}
.potn-logo{width:22px;height:22px;object-fit:contain;border-radius:2px;flex-shrink:0}
.potn-name{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--text);white-space:nowrap}
.potn-sep{color:var(--border2);font-size:11px}
.potn-team{font-family:var(--font-head);font-size:12px;color:var(--text3);white-space:nowrap}
.potn-line{
  font-family:var(--font-head);font-weight:800;font-size:12px;
  color:var(--gold);margin-left:auto;white-space:nowrap;letter-spacing:.04em;
}
.potw-card{
  background:linear-gradient(135deg,rgba(224,26,42,.09) 0%,rgba(224,26,42,.05) 100%);
  border:1px solid rgba(224,26,42,.25);
  border-radius:var(--radius);padding:16px 18px;margin-top:6px;
  cursor:pointer;transition:border-color .2s,box-shadow .2s;
}
.potw-card:hover{border-color:rgba(224,26,42,.5);box-shadow:0 4px 20px rgba(224,26,42,.1)}
.potw-title{
  font-family:var(--font-head);font-weight:800;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;
}
.potw-body{display:flex;align-items:center;gap:12px}
.potw-logo{width:38px;height:38px;object-fit:contain;border-radius:4px;flex-shrink:0}
.potw-info{flex:1;min-width:0}
.potw-name{
  font-family:var(--font-head);font-weight:900;font-size:20px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text);line-height:1;
}
.potw-team{font-family:var(--font-head);font-size:12px;color:var(--text3);margin-top:3px;letter-spacing:.04em}
.potw-stats{
  font-family:var(--font-head);font-weight:900;font-size:26px;
  color:var(--gold);flex-shrink:0;text-align:right;line-height:1.1;
}
.potw-split{font-family:var(--font-head);font-size:13px;color:var(--text3);font-weight:600}
@media(max-width:640px){
  .lb-val{font-size:20px;min-width:44px}
  .lb-stat-name{font-size:15px}
  .lb-select{max-width:160px;font-size:11px}
  .potn-card{gap:7px}
  .potn-line{margin-left:0;width:100%}
  .potw-stats{font-size:20px}
  .potw-name{font-size:17px}
}
/* =========================================
   CRIMSON THEME & LOGO BACKGROUND OVERRIDES
   ========================================= */

.home-hero-spacer { display: none; }
.contact-profile-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.contact-donate-text {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.6;
  margin: 0;
}
.contact-footer {
  text-align: center;
  padding: 16px 0 8px;
  border-top: 1px solid var(--border);
}
.contact-footer-text {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text3);
}
.contact-bmc {
  margin-bottom: 16px;
}
.page-bmc {
  text-align: center;
  padding: 28px 0 12px;
}
.contact-footer-links {
  margin-top: 8px;
}
.contact-footer-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent-text);
  opacity: .7;
  padding: 0;
  transition: opacity .15s;
}
.contact-footer-link:hover { opacity: 1; }
.forum-thread-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.forum-thread-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
  position: relative;
  overflow: hidden;
}
.forum-thread-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(224,26,42,.3) 50%, transparent 100%);
  opacity: 0;
  transition: opacity .2s;
}
.forum-thread-card:hover {
  background: rgba(224,26,42,.06);
  border-color: rgba(224,26,42,.2);
  transform: translateX(3px);
}
.forum-thread-card:hover::before { opacity: 1; }
.forum-thread-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.forum-thread-main {
  flex: 1;
  min-width: 0;
}
.forum-thread-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.forum-pin {
  font-size: 12px;
  flex-shrink: 0;
}
.forum-thread-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forum-thread-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text3);
  flex-wrap: wrap;
}
.forum-author {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text2);
}
.forum-author.forum-admin {
  color: var(--accent-text);
}
.forum-cat-tag {
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(184,196,208,.1);
  border: 1px solid rgba(184,196,208,.2);
  color: var(--ice);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.forum-time {
  color: var(--text3);
  font-size: 11px;
}
.forum-thread-stats {
  text-align: right;
  flex-shrink: 0;
  min-width: 60px;
}
.forum-stat-replies {
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: flex-end;
}
.forum-stat-num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 18px;
  color: var(--text);
}
.forum-stat-label {
  font-size: 10px;
  color: var(--text3);
  text-transform: uppercase;
  font-family: var(--font-head);
  letter-spacing: .06em;
}
.forum-stat-last {
  font-size: 10px;
  color: var(--text3);
  margin-top: 2px;
}

/* Thread modal */
.forum-post {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.forum-post:last-child { border-bottom: none; }
.forum-post-admin {
  background: rgba(224,26,42,.03);
  border-left: 3px solid var(--accent);
}
.forum-post-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.forum-post-author {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text);
}
.forum-post-author.forum-admin {
  color: var(--accent-text);
}
.forum-role-badge {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(224,26,42,.15);
  color: var(--accent-text);
  border: 1px solid rgba(224,26,42,.25);
}
.forum-post-time {
  font-size: 11px;
  color: var(--text3);
  margin-left: auto;
}
.forum-post-body {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.65;
}
.forum-replies-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid var(--border);
}
.forum-replies-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* User bar */
.forum-user-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.forum-user-label {
  font-family: var(--font-head);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
}
.forum-user-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  color: var(--accent-text);
  letter-spacing: .03em;
}
.forum-user-change {
  margin-left: auto;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 5px;
  color: var(--text2);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.forum-user-change:hover { background: rgba(255,255,255,.1); color: var(--text); }

/* Toolbar */
.forum-toolbar {
  display: flex;
  margin-bottom: 12px;
}
.forum-form-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 12px;
}
@media (max-width: 640px) {
  .forum-thread-card { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .forum-thread-stats { width: 100%; text-align: left; display: flex; gap: 12px; align-items: baseline; }
  .forum-stat-replies { justify-content: flex-start; }
  .forum-thread-icon { width: 36px; height: 36px; font-size: 15px; }
  .thread-modal-box { max-width: 100%; margin: 0 8px; }
  .forum-post { padding: 14px; }
  .forum-reply-bar { flex-direction: column; }
  .forum-reply-submit { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   v3.8.1 — BOTTOM NAV
   ═══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   PLAYOFF BRACKET — premium broadcast design
   ══════════════════════════════════════════════════════════ */
.playoff-bracket-wrap { margin: 0 0 28px; }
.playoff-bracket {
  margin: 0;
  background: linear-gradient(160deg, #0a0d13 0%, #070a10 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 16px 16px;
  overflow-x: auto;
  position: relative;
}
.playoff-bracket::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(224,26,42,.06) 0%, transparent 70%);
  pointer-events: none;
}

/* ── column headers ── */
.pb-headers {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  min-width: 600px;
}
.pb-hdr {
  flex: 1;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--text3);
  text-align: center;
  text-transform: uppercase;
}
.pb-hdr-finals { color: var(--accent-text); }
.pb-hdr-gap { width: 44px; flex-shrink: 0; }

.pb-subnote {
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text3);
  text-align: center; margin: -4px 0 12px;
}

/* ── 8-team bracket: 3 even columns (QF / SF / Finals), re-seeded so no fixed tree lines ── */
.pb-headers-8 { min-width: 560px; }
.pb-headers-8 .pb-hdr { flex: 1; }
.pb-tree-8 { min-width: 560px; align-items: stretch; gap: 10px; }
.pb-tree-8 .pb-col { flex: 1; }
.pb-tree-8 .pb-col-finals { justify-content: center; }
.pb-seed {
  font-family: var(--font-head); font-weight: 900; font-size: 11px;
  min-width: 15px; text-align: center; color: var(--text3);
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.pb-won .pb-seed { color: var(--gold); }

/* ── tree layout ── */
.pb-tree {
  display: flex;
  align-items: stretch;
  min-width: 600px;
}
.pb-col {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pb-col-finals { justify-content: center; }
.pb-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 5px 0;
}
.pb-slot-mid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
}

/* ── connectors ── */
.pb-conn {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
.pb-line { flex: 1; }

/* Pass-through: horizontal lines aligned to card centers */
.pb-line-pass-top {
  display: flex; align-items: center;
}
.pb-line-pass-top::after {
  content: ''; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--border), var(--border2) 60%, transparent);
}
.pb-line-pass-bot {
  display: flex; align-items: center;
}
.pb-line-pass-bot::after {
  content: ''; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--border), var(--border2) 60%, transparent);
}

/* Bracket connector: L-shape from two semis to one finals */
.pb-conn-bracket .pb-bline-top {
  border-right: 2px solid var(--border2);
  border-bottom: 2px solid var(--border2);
  border-bottom-right-radius: 5px;
}
.pb-conn-bracket .pb-bline-bot {
  border-right: 2px solid var(--border2);
  border-top: 2px solid var(--border2);
  border-top-right-radius: 5px;
}

/* ── card ── */
.pb-card {
  width: 100%;
  border-radius: 9px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: linear-gradient(170deg, #0f1520 0%, #0b1019 100%);
  transition: border-color .2s;
}
.pb-card-live {
  border-color: rgba(224,26,42,.35);
  box-shadow: 0 0 18px rgba(224,26,42,.08), inset 0 0 0 1px rgba(224,26,42,.1);
}
.pb-card-done {
  border-color: rgba(224,26,42,.25);
}
.pb-card-finals {
  border-color: rgba(224,26,42,.3);
  box-shadow: 0 0 24px rgba(224,26,42,.08);
}

/* ── TBD awaiting state ── */
.pb-tbd-slot {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pb-tbd-label {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--text3);
}

/* ── team row ── */
.pb-team {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  transition: background .15s;
}
.pb-divider { height: 1px; background: var(--border); margin: 0; }
.pb-won  { background: linear-gradient(90deg, rgba(224,26,42,.08) 0%, transparent 100%); }
.pb-won .pb-name  { color: var(--gold); }
.pb-won .pb-wins-n { color: var(--gold); font-size: 22px; }
.pb-ahead { background: linear-gradient(90deg, rgba(224,26,42,.06) 0%, transparent 100%); }
.pb-ahead .pb-name { color: var(--text); }
.pb-ahead .pb-wins-n { color: var(--accent2); }
.pb-out { opacity: .38; }

/* logo */
.pb-logo {
  width: 30px; height: 30px;
  object-fit: contain; flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.pb-logo-ph, .pb-logo-tbd {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--bg4); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-size: 8px; font-weight: 900;
  color: var(--text3); flex-shrink: 0; letter-spacing: .04em;
}

/* team info */
.pb-team-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pb-name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .05em;
  color: var(--text2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pb-name-seed {
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--text3);
  font-style: italic;
}
.pb-bye-tag {
  font-family: var(--font-head);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--ice);
  border: 1px solid rgba(74,184,255,.4);
  border-radius: 3px;
  padding: 1px 4px;
  flex-shrink: 0;
  line-height: 1.4;
}

/* score side */
.pb-team-score {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
.pb-pips { display: flex; gap: 4px; align-items: center; }
.pb-pip {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--bg4);
  border: 1px solid var(--border2);
}
.pb-pip-on {
  background: var(--accent);
  border-color: var(--accent-text);
  box-shadow: 0 0 6px rgba(224,26,42,.65);
}
.pb-pip-gold {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 7px rgba(224,26,42,.7);
}
.pb-wins-n {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 20px;
  color: var(--text3);
  min-width: 18px;
  text-align: right;
  line-height: 1;
}

/* series status footer */
.pb-status {
  font-family: var(--font-head);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
  padding: 4px 10px;
  border-top: 1px solid var(--border);
}
.pb-status-pre  { color: var(--text3); background: transparent; }
.pb-status-live { color: var(--accent2); background: rgba(224,26,42,.05); }
.pb-status-final { color: var(--gold); background: rgba(224,26,42,.06); }

/* champion banner */
.pb-champion-banner {
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--gold);
  text-align: center;
  padding: 7px 12px;
  background: linear-gradient(90deg, transparent, rgba(224,26,42,.12), transparent);
  border: 1px solid rgba(224,26,42,.3);
  border-radius: 6px;
  animation: pb-glow-gold 2.5s ease-in-out infinite;
}
.playoff-round-banner {
  background: linear-gradient(90deg, var(--accent), transparent);
  color: var(--text1);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: .12em;
  padding: 6px 16px;
  margin: 12px 0 0;
  border-left: 3px solid var(--accent);
}
.playoff-games-label {
  font-family: var(--font-head);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--text3);
  text-transform: uppercase;
  padding: 4px 16px 6px;
}

/* ── CLIPS ─────────────────────────────────────────────────── */
.clip-video-wrap {
  position: relative;
  width: 100%;
  background: #000;
  aspect-ratio: 16/9;
}
.clip-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.clip-poster {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip-date {
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
  flex-shrink: 0;
}
.clip-caption {
  padding: 2px 12px 10px;
  font-size: 12px;
  color: var(--text2);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Season selector dropdown ─────────────────────────────── */
.season-dropdown {
  background: var(--bg3);
  color: var(--text);
  border: 1px solid var(--border2);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
}
.season-dropdown:focus { outline: none; border-color: var(--accent-text); }


/* ═══════════════════════════════════
   v2 — clean appended styles
   ═══════════════════════════════════ */


/* Nav overlay — covers full viewport behind open menu */
.contact-card-icon {
  width: 54px; height: 54px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,.08);
}
.contact-card-discord .contact-card-icon { background: rgba(88,101,242,.12); border-color: rgba(88,101,242,.25); color: #7289da; }
.contact-card-email   .contact-card-icon { background: rgba(224,26,42,.1);  border-color: rgba(224,26,42,.22);  color: var(--accent-text); }
.contact-char-img {
  width: 72px; height: 72px; object-fit: cover;
  border-radius: 12px; flex-shrink: 0; border: 1px solid var(--border2);
}
.contact-card-email .contact-char-img { border-color: rgba(224,26,42,.3); }

/* ── Season 2 Signup Modal ─────────────────────────────────── */
.signup-modal-sub {
  font-size: 13px; color: var(--text2); margin: 0 0 18px;
  line-height: 1.5;
}
.signup-avail-col { flex: 1; }
.sponsor-rail {
  display: flex; align-items: center; gap: 16px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 16px;
  margin: 0 0 20px; overflow-x: auto;
}
.rail-label {
  font-family: var(--font-head); font-weight: 700; font-size: 10px;
  letter-spacing: .1em; color: var(--text3); white-space: nowrap;
  text-transform: uppercase; flex-shrink: 0;
}
.rail-logos { display: flex; align-items: center; gap: 20px; flex: 1; }
.rail-logo {
  display: flex; align-items: center; opacity: .7;
  transition: opacity .2s;
}
.rail-logo:hover { opacity: 1; }
.rail-cta {
  white-space: nowrap; flex-shrink: 0;
  background: transparent; border: 1px solid var(--border2);
  border-radius: 6px; color: var(--text2); cursor: pointer;
  font-family: var(--font-head); font-size: 11px; font-weight: 600;
  letter-spacing: .05em; padding: 5px 12px;
  transition: border-color .15s, color .15s;
}
.rail-cta:hover { border-color: var(--accent-text); color: var(--accent-text); }

/* ── SPONSORS PAGE ────────────────────────────────────────────── */
.spon-stats-bar {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
  margin: 0 0 36px;
}
.spon-stat {
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 18px 28px; text-align: center;
  min-width: 130px; flex: 1 1 130px; max-width: 180px;
}
.spon-stat-num {
  font-family: var(--font-head); font-size: 28px; font-weight: 900;
  color: var(--accent-text); line-height: 1; margin-bottom: 4px;
}
.spon-stat-label {
  font-size: 11px; font-family: var(--font-head); letter-spacing: .06em;
  text-transform: uppercase; color: var(--text2);
}

/* Current partners list */
.spon-empty {
  text-align: center; padding: 40px 16px;
  background: var(--bg2); border: 1px dashed var(--border2);
  border-radius: var(--radius); margin-bottom: 32px;
}
.spon-empty-icon { font-size: 36px; margin-bottom: 10px; }
.spon-empty-msg { font-size: 14px; color: var(--text2); }
.spon-grid {
  display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px;
}
.spon-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: var(--radius); padding: 24px 20px;
  min-width: 160px; flex: 1 1 160px; max-width: 220px;
  text-decoration: none; transition: border-color .2s, transform .15s;
}
.spon-card:hover { border-color: var(--accent-text); transform: translateY(-2px); }
.spon-card-name { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--text); }
.spon-card-tag { font-size: 12px; color: var(--text2); text-align: center; }
.spon-card-tier {
  font-size: 10px; font-family: var(--font-head); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text);
}

/* Sponsorship tiers */
.spon-tier-price {
  font-family: var(--font-head); font-size: 22px; font-weight: 900;
  color: var(--text); margin-bottom: 4px;
}
@media (max-width: 600px) {
  .spon-stats-bar { gap: 8px; }
  .spon-stat { padding: 14px 16px; min-width: 100px; }
  .spon-stat-num { font-size: 22px; }
  .spon-tiers { flex-direction: column; }
}

/* ── TWITCH / STREAMING PAGE ──────────────────────────────────── */
.twitch-page-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.twitch-page-hdr-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.twitch-offline-badge {
  font-family: var(--font-head); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; color: var(--text3); text-transform: uppercase;
}
.twitch-gn-badge {
  background: rgba(184,196,208,.1); border: 1px solid rgba(184,196,208,.28);
  border-radius: 20px; color: var(--blue); font-family: var(--font-head);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 4px 12px; text-transform: uppercase;
}
.twitch-next-gn {
  font-size: 12px; color: var(--text2); font-family: var(--font-head); letter-spacing: .03em;
}
.twitch-refresh-btn {
  background: var(--bg2); border: 1px solid var(--border2); border-radius: 6px;
  color: var(--text2); cursor: pointer; font-family: var(--font-head);
  font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 6px 14px;
  transition: border-color .15s, color .15s;
}
.twitch-refresh-btn:hover { border-color: #9146ff; color: #9146ff; }

/* Live layout — embed + sidebar */
.twitch-embed-col { display: flex; flex-direction: column; gap: 0; }
.twitch-embed-wrap {
  position: relative; width: 100%; padding-top: 56.25%;
  background: #000; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border);
}
.twitch-embed-wrap iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;
}
.twitch-feat-user { display: flex; align-items: center; gap: 8px; }
.twitch-feat-username {
  font-family: var(--font-head); font-size: 20px; font-weight: 900; color: var(--text);
}
.twitch-uptime {
  font-size: 11px; font-family: var(--font-head); font-weight: 600;
  letter-spacing: .04em; color: var(--text3); margin-left: auto; white-space: nowrap;
}
.twitch-feat-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.twitch-viewers-badge {
  background: rgba(224,26,42,.1); border: 1px solid rgba(224,26,42,.25);
  border-radius: 4px; color: var(--accent-text); font-size: 11px;
  font-family: var(--font-head); font-weight: 700; padding: 3px 8px;
}
.twitch-game-badge {
  background: var(--bg3); border: 1px solid var(--border);
  border-radius: 4px; color: var(--text2); font-size: 11px; padding: 3px 8px;
}
.twitch-open-btn {
  display: inline-block; background: #9146ff; border: none; border-radius: 6px;
  color: #fff; cursor: pointer; font-family: var(--font-head); font-size: 12px;
  font-weight: 700; letter-spacing: .04em; padding: 8px 16px;
  text-decoration: none; transition: opacity .15s; width: fit-content;
}
.twitch-open-btn:hover { opacity: .82; }

/* Sidebar — switcher cards */
.twitch-sidebar-label {
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; color: var(--text3); text-transform: uppercase; margin-top: 4px;
}

/* ── STATS TABLE ────────────────────────────────────────────── */
.stats-tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.stats-tbl {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-body); font-size: 13px; min-width: 720px;
}
.stats-tbl thead th {
  background: var(--bg3); border-bottom: 2px solid var(--border2);
  color: var(--text2); font-family: var(--font-head); font-size: 10px;
  font-weight: 700; letter-spacing: .06em; padding: 10px 10px;
  text-transform: uppercase; white-space: nowrap;
}
.stats-tbl thead th.r { text-align: right; }
.stats-tbl thead th.sortable { cursor: pointer; }
.stats-tbl thead th.sortable:hover { color: var(--accent-text); }
.stats-tbl thead th.sort-asc::after  { content: ' ▲'; color: var(--accent-text); }
.stats-tbl thead th.sort-desc::after { content: ' ▼'; color: var(--accent-text); }
.stats-tbl tbody td {
  border-bottom: 1px solid rgba(43,44,54,.6);
  color: var(--text); padding: 9px 10px; vertical-align: middle;
}
.stats-tbl tbody td.r { text-align: right; font-variant-numeric: tabular-nums; }
.stats-tbl tbody tr:hover td { background: rgba(224,26,42,.04); }
.stats-tbl tbody tr:last-child td { border-bottom: none; }
/* rank + name columns sticky on all screen sizes */
.stats-tbl thead th:nth-child(1),
.stats-tbl thead th:nth-child(3) { position: sticky; background: var(--bg3); z-index: 2; }
.stats-tbl thead th:nth-child(1) { left: 0; }
.stats-tbl thead th:nth-child(3) { left: 66px; }
.stats-tbl tbody td:nth-child(1),
.stats-tbl tbody td:nth-child(3) { position: sticky; background: var(--bg2); z-index: 1; }
.stats-tbl tbody td:nth-child(1) { left: 0; }
.stats-tbl tbody td:nth-child(3) { left: 66px; }
.stats-tbl tbody tr:hover td:nth-child(1),
.stats-tbl tbody tr:hover td:nth-child(3) { background: var(--bg3); }
/* stat-category header row stays visible while scrolling down the table.
   .stats-tbl-wrap is the table's own scroll box — it already scrolls sideways
   (that's what keeps the name column stuck), so bounding ITS height makes the
   sticky header pin to the same box instead of scrolling off with it. */
#skater-table .stats-tbl-wrap,
#goalie-table .stats-tbl-wrap { max-height: calc(100vh - 210px); overflow: auto; }
.stats-tbl thead th { position: sticky; top: 0; z-index: 4; }
@media (min-width: 701px) {
  /* frozen rank+name corner cells ride above both the sticky row and sticky columns */
  .stats-tbl thead th:nth-child(1),
  .stats-tbl thead th:nth-child(3) { top: 0; z-index: 6; }
}

.gd-logo-ph{
  width:48px;height:48px;background:var(--bg3);border-radius:4px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:700;font-size:11px;color:var(--text3);
}

/* ── SCHEDULE — BROADCAST NIGHT VIEW (2026-07-10) ─────────── */
.bcast-slate{position:relative;padding:20px 20px 18px;background:linear-gradient(115deg,#1c1013 0%,#12080a 55%,#08090c 100%);border-bottom:1px solid var(--border);overflow:hidden}
.bcast-slate::before{content:'SBHL';position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--font-head);font-weight:800;font-size:110px;line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(224,26,42,.1);pointer-events:none}
.bcast-slate::after{content:'';position:absolute;left:0;right:0;bottom:0;height:7px;background:var(--trace) repeat-x left center/160px 7px;opacity:.28}
.bcast-eyebrow{font-family:var(--font-cond,'Archivo Narrow'),sans-serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color: var(--accent-text);margin-bottom:5px}
.bcast-main{display:flex;align-items:center;gap:12px}
.bcast-day{font-family:var(--font-head);font-weight:800;font-size:40px;line-height:1;letter-spacing:.02em;color:var(--text1);text-transform:uppercase}
.bcast-chip{font-family:var(--font-cond,'Archivo Narrow'),sans-serif;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:3px 9px;border-radius:3px}
.chip-tonight{background:var(--accent);color:var(--bg)}
.chip-final{background:rgba(184,196,208,.14);color:var(--blue);border:1px solid rgba(184,196,208,.35)}
.chip-up{background:rgba(255,255,255,.05);color:var(--text2);border:1px solid var(--border)}
.bcast-date{margin-top:7px;font-family:var(--font-cond,'Archivo Narrow'),sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text2)}

.pregame-panel,.postgame-panel{padding:16px 20px;border-bottom:1px solid var(--border);background:rgba(224,26,42,.03)}
.pg-label{font-family:var(--font-cond,'Archivo Narrow'),sans-serif;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text3);margin-bottom:8px}
.pg-label::before{content:'';display:inline-block;width:4px;height:4px;background:var(--accent);margin-right:8px;vertical-align:2px}
.pg-headline{font-family:var(--font-head);font-weight:800;font-size:26px;letter-spacing:.02em;text-transform:uppercase;color: var(--accent-text);line-height:1;margin-bottom:12px}
.pg-matchup{display:flex;align-items:center;gap:14px}
.pg-team{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer}
.pg-home{justify-content:flex-end}
.pg-logo{width:44px;height:44px;object-fit:contain;flex-shrink:0}
.pg-tinfo{display:flex;flex-direction:column;min-width:0}
.pg-right{align-items:flex-end;text-align:right}
.pg-tname{font-family:var(--font-head);font-weight:700;font-size:17px;letter-spacing:.03em;text-transform:uppercase;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pg-trec{font-family:var(--font-led);font-weight:600;font-size:12px;color:var(--text2);margin-top:3px}
.pg-at{font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--text3);flex-shrink:0}
.pg-watch{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-cond,'Archivo Narrow'),sans-serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.pg-watch-lbl{color:var(--text3);font-weight:700;letter-spacing:.16em;font-size:10px}
.pg-watch-item{color:var(--text);cursor:pointer}
.pg-watch-item:hover{color: var(--accent-text)}
.pg-watch-line{color:var(--blue);font-family:var(--font-led);font-weight:600}
.pg-watch-sep{color:var(--text3)}

.fh-tiles{display:grid;grid-template-columns:repeat(3,minmax(70px,110px)) 1fr;gap:8px}
.fh-tile{background:rgba(8,9,12,.6);border:1px solid var(--border);border-radius:4px;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0}
.fh-num{font-family:var(--font-led);font-weight:800;font-size:24px;color:var(--text1);line-height:1}
.fh-big{font-family:var(--font-head);font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--text1);text-transform:uppercase;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fh-lbl{font-family:var(--font-cond,'Archivo Narrow'),sans-serif;font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text3)}
.stars-row{margin-top:12px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stars-lbl{grid-column:1/-1;font-family:var(--font-cond,'Archivo Narrow'),sans-serif;font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color: var(--accent-text)}
.star-card{display:flex;align-items:center;gap:8px;background:rgba(8,9,12,.6);border:1px solid var(--border);border-radius:4px;padding:8px 10px;cursor:pointer;min-width:0;transition:border-color .15s}
.star-card:hover{border-color:rgba(224,26,42,.45)}
.star-marks{font-family:var(--font-cond,'Archivo Narrow'),sans-serif;font-weight:700;font-size:10px;letter-spacing:.08em;color: var(--accent-text);flex-shrink:0;min-width:38px}
.star-logo{width:22px;height:22px;object-fit:contain;flex-shrink:0}
.star-info{display:flex;flex-direction:column;min-width:0;flex:1}
.star-name{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.03em;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase}
.star-team{font-size:10px;color:var(--text3);font-family:var(--font-cond,'Archivo Narrow'),sans-serif;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.star-line{font-family:var(--font-led);font-weight:600;font-size:12px;color:var(--blue);flex-shrink:0}

@media(max-width:700px){
  .bcast-day{font-size:29px}
  .bcast-slate{padding:16px 14px 15px}
  .bcast-slate::before{font-size:76px}
  .pg-headline{font-size:20px}
  .pg-tname{font-size:13px}
  .pg-logo{width:34px;height:34px}
  .pg-at{font-size:11px}
  .pregame-panel,.postgame-panel{padding:14px}
  .fh-tiles{grid-template-columns:repeat(3,1fr)}
  .fh-tile.fh-wide{grid-column:1/-1}
  .stars-row{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   SIN BIN — league identity
   Appended overrides. Everything above is the inherited fork.

   Read the logo: chrome block letters cracked with ice, lit
   from behind by the red beacon on top of the box, stencil
   paint on the back wall, steel frame, EST. 2022.

   Four faces, one job each — see the token block at the top.
   Bungee is the only loud one: the hero wordmark and the SBHL
   watermark. The .news-feat-title rule is dormant — renderNews()
   only ever emits .news-card, never .news-card-featured.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. THE BLOCK — Bungee, one weight, three places ──────── */

/* Bungee ships a single weight. Any inherited font-weight
   above 400 makes the browser fake a bold and the bevels mush. */
.hc-headline,
.playoff-hero::before,
.news-feat-title {
  font-family: var(--font-block);
  font-weight: 400;
}

/* Hero wordmark. Sizing lives in the index.html <style> block —
   that block loads after this file, so it wins. Only the surface
   treatment is set here. */
.hc-headline {
  text-shadow:
    0 1px 0 rgba(223,231,239,.22),          /* icy top bevel   */
    0 0 24px rgba(255,59,36,.28),           /* beacon backlight */
    0 3px 0 rgba(0,0,0,.55);
}
.hc-headline .gold {
  color: var(--accent-text);
  font-size: 100%;
  text-shadow: 0 0 26px rgba(255,59,36,.55), 0 3px 0 rgba(0,0,0,.6);
}
@media (max-width: 720px) { .hero-copy { max-width: none; } }

/* Masthead stays condensed — "SIN·BIN·HOCKEY·LEAGUE" is too long
   a string for a signage face without wrapping the bar. */
.mh-wordmark { font-weight: 800; letter-spacing: .1em; }


/* ── 2. THE NEWS — a report filed from the box ─────────────
   Recaps are the one place on this site with real prose, so
   they get a reading face instead of the UI face. Slab, because
   the copy is a game report, not an interface label. */

.news-card-body,
.news-feat-body {
  font-family: var(--font-read);
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--text);
  letter-spacing: .005em;
}
/* Measure goes on the prose, not the container — recap bodies also
   carry full-width widgets (the {{playoff-bracket}} placeholder),
   and capping the container clips them. */
.news-card-body > p,  .news-card-body > ul,  .news-card-body > ol,
.news-feat-body > p,  .news-feat-body > ul,  .news-feat-body > ol {
  max-width: 68ch;
}
.news-card-body  { padding: 16px 18px 18px; }
.news-feat-body  { padding: 14px 20px 22px; }
.news-card-body p, .news-feat-body p { margin-bottom: 11px; }
.news-card-body li, .news-feat-body li { margin-bottom: 5px; }
.news-card-body strong, .news-feat-body strong {
  color: var(--ice); font-weight: 700;
}
.news-card-body em, .news-feat-body em { color: var(--text2); }
/* Scores and records inside prose read as clock, not copy. */
.news-card-body code, .news-feat-body code {
  font-family: var(--font-led); font-weight: 700; font-size: .92em;
  color: var(--accent-text); background: rgba(224,26,42,.08);
  padding: 1px 5px; border-radius: 2px;
}

/* The card is the box: a steel frame with the beacon on its edge. */
.news-card, .news-card-featured {
  position: relative;
  border-radius: 3px;
  border-left: 3px solid var(--bg4);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.news-card::before, .news-card-featured::before {
  content: '';
  position: absolute; left: -3px; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
  opacity: 0; transition: opacity .18s, box-shadow .18s;
}
.news-card:hover::before,
.news-card-featured:hover::before,
.news-card.pinned::before {
  opacity: 1;
  box-shadow: 0 0 12px var(--beacon), 0 0 26px rgba(255,59,36,.35);
}
.news-card.pinned { border-left-color: var(--accent-text); }

/* Header reads as the placard bolted to the glass. */
.news-card-hdr, .news-feat-top {
  background: linear-gradient(180deg, #191a21 0%, #101116 100%);
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
}
.news-cat {
  font-family: var(--font-head);
  font-weight: 800; font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 2px;
  border: 1px solid currentColor;
  background: transparent !important;   /* stamped, not filled */
  opacity: .9;
}
.news-card-title {
  font-family: var(--font-head);
  font-weight: 800; font-size: 17px;
  letter-spacing: .015em; color: var(--text1);
}
/* Pinned cards are marked by the lit beacon rail, not a fourth
   Bungee. A signage face can't wrap a headline in a phone-width
   column without turning it into a wall. */
.news-card.pinned .news-card-title { color: #fff; }
.news-feat-title {
  font-size: 22px; line-height: 1.15; letter-spacing: -.01em;
  text-shadow: 0 1px 0 rgba(223,231,239,.16), 0 0 20px rgba(255,59,36,.2);
}
/* Dateline runs on the penalty clock. */
.news-date {
  font-family: var(--font-led);
  font-weight: 700; font-size: 11px;
  letter-spacing: .06em; color: var(--steel);
  font-variant-numeric: tabular-nums;
}
.news-pin { filter: grayscale(1) brightness(1.6); font-size: 12px; }

/* Tabs: stamped steel, no gradient. (The old rule faded red into
   #b8921a — EHL gold, left over from the fork.) */
.news-tab {
  font-family: var(--font-head);
  border-radius: 2px; letter-spacing: .16em; font-weight: 700;
  backdrop-filter: none;
}
.news-tab.active {
  background: var(--accent);
  border-color: var(--accent-text);
  color: #fff;
  box-shadow: 0 0 14px rgba(255,59,36,.4);
  transform: none;
}
.news-tab:hover { transform: none; border-color: var(--steel); }


/* ── 3. NUMERALS — everything countable runs on the clock ─── */
.news-date, .hss-val.num {
  font-variant-numeric: tabular-nums;
}

/* ── 4. QUALITY FLOOR ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .news-card, .news-card-featured { animation: none !important; }
  .news-card:hover, .news-card-featured:hover { transform: none; }
}

/* ── 5. NARROW ────────────────────────────────────────────── */
@media (max-width: 720px) {
  /* The placard header is chip + title + date on one line at desk
     width; on a phone the title takes its own row underneath. */
  .news-card-hdr, .news-feat-top { row-gap: 9px; }
  .news-card-title { flex: 1 0 100%; order: 3; font-size: 16px; line-height: 1.25; }
  .news-date { margin-left: auto; }

  .news-card-body, .news-feat-body { font-size: 15px; line-height: 1.68; }
  .news-card-body { padding: 14px 15px 16px; }
}

/* Recap bodies embed full-width widgets. Let them scroll sideways
   inside the card rather than clip at the border. */
.news-card-body .playoff-bracket-wrap,
.news-feat-body .playoff-bracket-wrap,
.news-card-body table,
.news-feat-body table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Recap subheads. The prose is slab; the section markers stay in
   the UI face so a long report reads as filed sections rather than
   one column of type. Rule on the right fills the measure. */
.news-card-body h3, .news-feat-body h3,
.news-card-body h4, .news-feat-body h4 {
  font-family: var(--font-head);
  font-weight: 800; font-size: 12px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent-text);
  margin: 22px 0 10px;
  display: flex; align-items: center; gap: 12px;
  max-width: 68ch;
}
.news-card-body h3::after, .news-feat-body h3::after,
.news-card-body h4::after, .news-feat-body h4::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, transparent 100%);
}
.news-card-body > p:first-child, .news-feat-body > p:first-child { margin-top: 2px; }

/* Bullets: a red tick on the rail, not a browser dot. */
.news-card-body ul, .news-feat-body ul { list-style: none; padding-left: 0; }
.news-card-body ul > li, .news-feat-body ul > li {
  position: relative; padding-left: 20px;
}
.news-card-body ul > li::before, .news-feat-body ul > li::before {
  content: ''; position: absolute; left: 2px; top: .72em;
  width: 7px; height: 2px; background: var(--accent);
}


/* ═══════════════════════════════════════════════════════════
   THE LEDGER — structural pass, 2026-08-15
   The type/colour pass gave SBHL its own palette but kept the
   sister league's skeleton, so the two sites still read the
   same. Divergence here is structural: hard chamfered geometry
   instead of soft radii, ruled ledger heads instead of traced
   ones, and accent red demoted to a marking colour — it never
   fills a headline, only rules, tiles and active states.
   ═══════════════════════════════════════════════════════════ */

/* ── GEOMETRY — nothing on this site is rounded ───────────── */
:root { --radius: 0px; }

/* Chamfered corner, cut off the bottom-right like the block
   letters in the logo. One utility, used sparingly. */
.news-card, .news-card-featured, .hs-card, .playoff-hero {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

/* ── SECTION HEADS — ruled, not traced ────────────────────── */
.sec-title { color: var(--text1); gap: 10px; }
.sec-title::before {
  width: 10px; height: 10px; background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 100%, 0 100%);
}
.sec-title::after {
  height: 3px; background: none;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border);
  opacity: 1; -webkit-mask: none; mask: none;
}

/* ── NEWS FILTERS — ruled tabs, not pills ─────────────────── */
#news-tabs {
  justify-content: flex-start; gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.news-tab {
  border-radius: 0; border: none; background: none;
  padding: 9px 16px; margin-bottom: -1px;
  border-bottom: 3px solid transparent;
  letter-spacing: .18em; color: var(--text3);
}
.news-tab:hover { background: none; color: var(--text1); border-bottom-color: var(--border2); }
.news-tab.active {
  background: none; color: var(--text1);
  border-bottom-color: var(--accent-text); box-shadow: none;
}

/* ── SUBSECTION TABS — align to the new 58px masthead, and
   read as ledger columns rather than gradient pills ─────── */
#section-tabs { top: 58px; justify-content: flex-start; padding: 0; }
.stab-group { gap: 0; padding: 0 0 0 8px; }
.stab {
  font-family: var(--font-cond);
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  padding: 11px 16px; border-radius: 0;
  border-bottom: 3px solid transparent;
  color: var(--text3); background: none;
}
.stab:hover { background: none; color: var(--text1); border-bottom-color: var(--border2); }
.stab.active {
  color: var(--text1); background: none; box-shadow: none;
  border-bottom-color: var(--accent-text);
}
@media (max-width: 860px) { #section-tabs { top: 93px; } }

/* Broadcast slate — the last trace tile on the site. Same device
   as the sister league's, only recoloured, so it goes too. */
.bcast-slate::after {
  height: 3px; background: none;
  border-top: 1px solid var(--border2);
  border-bottom: 1px solid var(--border);
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════
   ALL-TIME CAREER (v4.0.0)
   The All-Time period pill on the stats page, and the Career tab
   inside the player card. Career data spans every season in
   seasons.json, so it reads as chrome rather than as this season's
   accent — the gold/ice tone separates it from the red season UI.
   ══════════════════════════════════════════════════════════════ */

/* Career reaches past the season in the dropdown — mark the pill so it doesn't
   read as just another window on the loaded season. */
.period-pill-career{ border-color: var(--blue); color: var(--ice); }
.period-pill-career.active{ background: var(--blue); border-color: var(--blue); color: var(--bg); }

.career-note{
  padding: 4px 10px 8px;
  font-size: 11px; line-height: 1.5;
  color: var(--text3);
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.career-span{ font-family: var(--font-head); font-size: 11px; color: var(--text3); letter-spacing: .04em; white-space: nowrap; }

.lb-badge-career{ background: rgba(184,196,208,.15); color: var(--ice); }
.lb-qual{
  font-family: var(--font-head); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text3); flex-shrink: 0;
}

/* ─ Career tab hero: seasons count + span + every team worn ─ */
.pcc-hero{
  display: flex; align-items: center; gap: 16px;
  padding: 16px; margin: 0;
  background: linear-gradient(90deg, rgba(184,196,208,.09), transparent 70%);
  border-bottom: 1px solid var(--border);
}
.pcc-hero-main{ text-align: center; flex-shrink: 0; min-width: 62px; }
.pcc-big{ font-family: var(--font-head); font-weight: 800; font-size: 40px; line-height: .95; color: var(--ice); }
.pcc-big-lbl{
  font-family: var(--font-head); font-size: 9px; font-weight: 700;
  letter-spacing: .16em; color: var(--text3); margin-top: 3px;
}
.pcc-hero-meta{ min-width: 0; }
.pcc-span{
  font-family: var(--font-head); font-weight: 800; font-size: 17px;
  letter-spacing: .06em; color: var(--text1); margin-bottom: 7px;
}
.pcc-teams{ display: flex; flex-wrap: wrap; gap: 5px; }
.pcc-team{
  font-size: 11px; padding: 2px 8px; border-radius: 3px;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--text2); cursor: pointer; white-space: nowrap;
}
.pcc-team:hover{ color: var(--text1); border-color: var(--blue); }

/* ─ Season-by-season tables ─ */
.pcc-tbl{ font-size: 12px; }
.pcc-tbl th{
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text3);
  text-align: right; padding: 5px 6px; border-bottom: 1px solid var(--border);
}
.pcc-tbl th:first-child, .pcc-tbl th:nth-child(2){ text-align: left; }
.pcc-tbl td{ padding: 5px 6px; text-align: right; border-bottom: 1px solid rgba(43,44,54,.4); color: var(--text); }
.pcc-tbl tr:last-child td{ border-bottom: none; }
.pcc-yr{
  text-align: left !important; font-family: var(--font-head);
  font-weight: 800; color: var(--text1); letter-spacing: .04em; white-space: nowrap;
}
.pcc-tm{
  text-align: left !important; color: var(--text2); cursor: pointer;
  max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pcc-tm:hover{ color: var(--text1); }
.pcc-best td{ background: rgba(224,26,42,.07); }
.pcc-star{ color: var(--accent-text); font-size: 10px; }
.pcc-foot{
  font-size: 11px; line-height: 1.55; color: var(--text3);
  padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border);
}

@media (max-width: 560px){
  .pcc-hero{ gap: 12px; padding: 13px; }
  .pcc-big{ font-size: 32px; }
  .pcc-span{ font-size: 15px; }
  /* The season tables are the widest thing in the card — let them scroll
     themselves rather than pushing the modal body sideways. */
  .pcc-tbl{ display: block; overflow-x: auto; white-space: nowrap; }
}

/* ══════════════════════════════════════════════════════════════
   PLAYER TRADING CARD + CARD SETS  (v4.0.0)
   Ported from ehl/styles.css and recoloured to the SBHL red/chrome
   palette. SBHL cards are CAREER cards — there is no EA OVR grade in
   any SBHL source, so the .tcard-ovr rules are dropped rather than
   carried as dead selectors; the corner slot holds seasons played.
   ══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════
   PLAYER TRADING CARD  (.tcard-*)
   Port of ehl/card-studio.html's flat-first card composition so the
   site card, the studio bench, and the PIL Discord card stay in step
   (cogs/image_engine.py :: _generate_player_card). Tilt/glare are
   web-only sugar and are deliberately excluded from the PNG export.
   ═══════════════════════════════════════════════════════════ */
.tcard-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 12px 22px}
.tcard-stage{perspective:1600px}

.tcard{
  --cw:396px; --ratio:1.4;
  --tc-gold:#dfe7ef; --tc-gold2:#ffffff; --tc-gold-deep:#7e868f;
  --tc-ice:#82d8ff; --tc-text:#edf4ff; --tc-text2:#7c9fce; --tc-text3:#37577f;
  --tc-win:#3dd68c; --tc-loss:#ff5c5c;
  --tc-accent:#ed4245;
  position:relative;width:var(--cw);height:calc(var(--cw) * var(--ratio));
  border-radius:22px;overflow:hidden;background:#020b18;
  container-type:inline-size;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.5);
  transition:transform .18s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}
/* position colours — same values as the Discord reaction-role circles */
.tcard[data-pos="C"] {--tc-accent:#ed4245}
.tcard[data-pos="LW"]{--tc-accent:#57f287}
.tcard[data-pos="RW"]{--tc-accent:#3498db}
.tcard[data-pos="LD"]{--tc-accent:#1abc9c}
.tcard[data-pos="RD"]{--tc-accent:#fee75c}
.tcard[data-pos="G"] {--tc-accent:#9b59b6}

.tcard-bleed{position:absolute;inset:0;overflow:hidden}
.tcard-bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:var(--tc-hero-x,50%) var(--tc-hero-y,42%);
  transform:scale(var(--tc-hero-zoom,1.05));transform-origin:center;
  filter:saturate(1.05) contrast(1.04)}
/* 198 of 201 players have no photo — the logo fallback is the common card, not the edge case */
.tcard-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:
    radial-gradient(70% 50% at 50% 32%,rgba(21,54,102,.85),transparent 70%),
    repeating-linear-gradient(135deg,#08152c 0 16px,#0a1a35 16px 32px)}
/* full-bleed crest, not a floating badge — the logo PNGs are opaque on near-black,
   so a contained logo renders as a visible dark square */
.tcard-fallback img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 40%;opacity:.5}

.tcard-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,16,.10) 0%,rgba(2,6,16,0) 28%,rgba(2,6,16,.45) 52%,rgba(2,6,16,.82) 74%,rgba(2,6,16,.97) 100%)}
.tcard-topshade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,16,.7) 0%,transparent 22%)}

.tcard-foil{position:absolute;inset:0;pointer-events:none;opacity:var(--tc-foil,0);
  background:repeating-linear-gradient(115deg,
    rgba(255,0,128,.32) 0%,rgba(255,210,0,.32) 8%,rgba(0,255,170,.32) 16%,
    rgba(0,170,255,.32) 24%,rgba(180,0,255,.32) 32%,rgba(255,0,128,.32) 40%);
  background-size:280% 280%;background-position:var(--tc-foil-pos,50% 50%);
  mix-blend-mode:color-dodge;filter:saturate(1.4)}
.tcard-foil2{position:absolute;inset:0;pointer-events:none;opacity:var(--tc-foil2,0);
  background:conic-gradient(from var(--tc-foil-rot,0deg) at 50% 30%,
    rgba(255,255,255,0),rgba(223,231,239,.42),rgba(255,255,255,0),rgba(224,26,42,.3),rgba(255,255,255,0));
  mix-blend-mode:soft-light}

/* mask-composite keeps the frame interior transparent — a padding-box gradient
   would paint opaque over the hero (studio build note) */
.tcard-frame{position:absolute;inset:0;pointer-events:none;border-radius:22px;padding:2px;
  background:linear-gradient(150deg,var(--tc-gold-deep) 0%,var(--tc-gold2) 22%,var(--tc-gold-deep) 42%,var(--tc-gold2) 62%,var(--tc-gold-deep) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}
.tcard-edge{position:absolute;inset:8px;pointer-events:none;border-radius:14px;
  border:1px solid rgba(224,26,42,.28);box-shadow:inset 0 0 60px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.4)}
.tcard-grain{position:absolute;inset:0;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tcard-glare{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:overlay;
  background:radial-gradient(220px 220px at var(--tc-gx,50%) var(--tc-gy,50%),rgba(255,255,255,.55),transparent 60%)}

.tcard-badges{position:absolute;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:flex-start;z-index:4}
.tcard-team-badge{width:54px;height:54px;border-radius:50%;padding:7px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#22232c,#08080c);border:1.5px solid rgba(224,26,42,.55);
  box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 0 12px rgba(0,0,0,.5)}
.tcard-team-badge img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.tcard-pos-badge{display:flex;flex-direction:column;align-items:center;gap:5px}
.tcard-pos-badge .tcard-dot{width:34px;height:34px;border-radius:50%;background:var(--tc-accent);
  box-shadow:0 0 0 2px rgba(255,255,255,.18),0 0 16px 2px var(--tc-accent),inset 0 -6px 10px rgba(0,0,0,.35)}
.tcard-pos-badge .tcard-poslbl{font-family:'Saira Condensed',var(--font-head),sans-serif;font-weight:900;font-size:15px;letter-spacing:1px;
  color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.8);line-height:1}
.tcard-rarity{position:absolute;top:24px;left:50%;transform:translateX(-50%);z-index:4;
  font-family:'Saira Condensed',var(--font-body),sans-serif;font-weight:700;font-size:10px;letter-spacing:4px;
  text-transform:uppercase;color:var(--tc-gold2);text-shadow:0 1px 4px rgba(0,0,0,.9);opacity:.9;white-space:nowrap}

/* EHL's OVR badge rules are intentionally absent here — SBHL has no EA
   per-match grades. The corner slot is .tcard-ssn (seasons played),
   defined at the end of this file with the same geometry. */

.tcard-info{position:absolute;left:18px;right:18px;bottom:18px;z-index:4}
.tcard-np-pos{font-family:'Saira Condensed',var(--font-body),sans-serif;font-weight:700;font-size:12px;letter-spacing:5px;
  text-transform:uppercase;color:var(--tc-accent);text-shadow:0 1px 3px rgba(0,0,0,.9);margin-bottom:-2px}
.tcard-np-name{font-family:'Saira Condensed',var(--font-head),sans-serif;font-weight:900;text-transform:uppercase;line-height:.92;color:#fff;
  font-size:clamp(22px,8cqw,44px);text-shadow:0 2px 0 rgba(0,0,0,.5),0 0 26px rgba(0,0,0,.6);
  letter-spacing:.5px;overflow-wrap:anywhere}
.tcard-accentbar{display:block;width:46px;height:4px;margin-top:8px;
  background:linear-gradient(90deg,var(--tc-gold2),var(--tc-gold-deep));border-radius:3px;
  box-shadow:0 0 10px rgba(224,26,42,.5)}
.tcard-np-team{font-family:'Saira Condensed',var(--font-body),sans-serif;font-weight:600;font-size:13px;letter-spacing:2px;
  text-transform:uppercase;color:var(--tc-ice);margin-top:8px;text-shadow:0 1px 3px rgba(0,0,0,.9)}

.tcard-statbar{margin-top:12px;display:flex;border-top:1px solid rgba(224,26,42,.35);
  border-bottom:1px solid rgba(224,26,42,.18);padding:9px 0;
  background:linear-gradient(180deg,rgba(3,9,20,0),rgba(3,9,20,.55))}
.tcard-stat{flex:1;text-align:center;border-right:1px solid rgba(124,159,206,.16)}
.tcard-stat:last-child{border-right:none}
.tcard-stat .tcard-v{font-family:'DM Mono',ui-monospace,monospace;font-weight:500;font-size:20px;color:#fff;
  line-height:1;text-shadow:0 1px 3px rgba(0,0,0,.8)}
.tcard-stat .tcard-v.hl{color:var(--tc-gold2)}
.tcard-stat .tcard-v.pos{color:var(--tc-win)}
.tcard-stat .tcard-v.neg{color:var(--tc-loss)}
.tcard-stat .tcard-k{font-family:'Saira Condensed',var(--font-body),sans-serif;font-weight:700;font-size:9px;
  letter-spacing:2px;color:var(--tc-text2);margin-top:4px;text-transform:uppercase}
.tcard-statsub{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.tcard-statsub .tcard-chip{font-family:'DM Mono',ui-monospace,monospace;font-size:11px;color:var(--tc-text);
  background:rgba(8,20,40,.6);border:1px solid rgba(124,159,206,.18);border-radius:5px;padding:3px 8px;letter-spacing:.5px}
.tcard-statsub .tcard-chip b{color:var(--tc-gold2);font-weight:500}
.tcard-serial{margin-top:10px;display:flex;justify-content:space-between;align-items:center;
  font-family:'DM Mono',ui-monospace,monospace;font-size:9.5px;letter-spacing:1px;color:var(--tc-text2);opacity:.85}
.tcard-serial .tcard-mark{font-family:'Saira Condensed',var(--font-head),sans-serif;font-weight:900;letter-spacing:1px;color:var(--tc-gold2);font-size:12px}

/* ── faces ──
   Front and back are siblings swapped with display. A 3D flip would need
   preserve-3d on .tcard, which is mutually exclusive with the overflow:hidden
   the scaled hero relies on — and would put a transform on the export target. */
.tcard-face{position:absolute;inset:0}
.tcard-back{display:none;background:
  radial-gradient(120% 80% at 50% 0%,#0b2145 0%,#040d1e 62%,#020914 100%)}
.tcard.tcard-flipped .tcard-front{display:none}
.tcard.tcard-flipped .tcard-back{display:block}
.tcard{cursor:pointer}

.tcard-b-wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.tcard-b-wm img{width:126%;height:126%;object-fit:contain;opacity:.04}
.tcard-b-inner{position:absolute;inset:16px;display:flex;flex-direction:column;z-index:2}
.tcard-b-head{padding-bottom:8px;border-bottom:1px solid rgba(224,26,42,.35);margin-bottom:8px}
.tcard-b-name{font-family:'Saira Condensed',var(--font-head),sans-serif;font-weight:900;text-transform:uppercase;color:#fff;
  font-size:clamp(17px,5.4cqw,26px);line-height:1;letter-spacing:.5px;overflow-wrap:anywhere}
.tcard-b-sub{font-family:'Saira Condensed',var(--font-body),sans-serif;font-weight:600;font-size:10px;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--tc-ice);margin-top:5px}
.tcard-b-groups{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;gap:2px;min-height:0}
.tcard-b-lbl{font-family:'Saira Condensed',var(--font-body),sans-serif;font-weight:700;font-size:8.5px;
  letter-spacing:2.4px;text-transform:uppercase;color:var(--tc-gold);opacity:.85;margin-bottom:2px}
.tcard-b-grid{display:grid;gap:0;background:rgba(4,12,26,.5);border-top:1px solid rgba(124,159,206,.14);
  border-bottom:1px solid rgba(124,159,206,.14);padding:5px 0}
.tcard-b-cell{text-align:center;border-right:1px solid rgba(124,159,206,.12);min-width:0}
.tcard-b-cell:last-child{border-right:none}
.tcard-b-v{font-family:'DM Mono',ui-monospace,monospace;font-weight:500;font-size:14px;color:#fff;line-height:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard-b-v.win{color:var(--tc-win)}.tcard-b-v.loss{color:var(--tc-loss)}
.tcard-b-v.gold{color:var(--tc-gold2)}.tcard-b-v.ice{color:var(--tc-ice)}.tcard-b-v.dim{color:var(--tc-text2)}
.tcard-b-k{font-family:'Saira Condensed',var(--font-body),sans-serif;font-weight:700;font-size:8px;
  letter-spacing:1.2px;color:var(--tc-text2);margin-top:3px;text-transform:uppercase}
.tcard-back .tcard-serial{margin-top:8px}

/* ── controls under the card ── */
.tcard-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.tcard-btn{background:transparent;border:1px solid var(--border2);border-radius:6px;color: var(--accent-text);
  cursor:pointer;padding:8px 16px;font-family:var(--font-head);font-weight:800;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;transition:background .15s,border-color .15s}
.tcard-btn:hover{background:var(--bg3);border-color: var(--accent-text)}
.tcard-btn[disabled]{opacity:.55;cursor:default}
.tcard-note{font-size:11px;color:var(--text3);text-align:center;max-width:400px;line-height:1.5}

@media (max-width:640px){
  .tcard{--cw:300px}
  .tcard-b-inner{inset:12px}
  .tcard-b-v{font-size:11px}
  .tcard-b-k{font-size:7px;letter-spacing:.8px}
  .tcard-b-lbl{font-size:7.5px;letter-spacing:1.6px}
  .tcard-wrap{padding:14px 8px 18px}
}

/* EHL's .tcard-exporting rules are omitted — they exist only to make the
   html2canvas PNG capture behave, and SBHL's card page has no download. */

/* ═══════════════════════════════════════════════════════════
   CARD SETS  (#page-cards)
   ═══════════════════════════════════════════════════════════ */
.set-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.set-chip{background:var(--bg2);border:1px solid var(--border);border-radius:20px;color:var(--text2);
  cursor:pointer;padding:6px 14px;font-family:var(--font-head);font-weight:700;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;transition:border-color .15s,color .15s,background .15s;white-space:nowrap}
.set-chip:hover{border-color:var(--border2);color:var(--text)}
.set-chip.on{border-color: var(--accent-text);color: var(--accent-text);background:rgba(224,26,42,.09)}

.set-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
  padding-bottom:10px;border-bottom:1px solid var(--border);margin-bottom:12px}
.set-title{font-family:var(--font-head);font-weight:900;font-size:24px;line-height:1.05;color:var(--text1)}
.set-sub{font-size:12px;color:var(--text3);margin-top:5px;line-height:1.5;max-width:640px}
.set-count{font-family:var(--font-head);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text3);white-space:nowrap}

.set-posrow{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:18px}
.set-pos{background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--text3);
  cursor:pointer;padding:4px 11px;font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:.1em}
.set-pos:hover{color:var(--text2);border-color:var(--border2)}
.set-pos.on{border-color: var(--accent-text);color: var(--accent-text)}

.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:22px 16px;padding-bottom:28px}
.set-grid-sheet{grid-template-columns:repeat(3,minmax(0,1fr));max-width:760px}
.set-cell{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}
/* zoom, not a smaller --cw: the card's badges, nameplate and stat bar are laid out in
   px for a 396px card, so shrinking the width alone makes them collide. zoom scales the
   whole layout, so a thumbnail is the same card at a smaller size. */
.set-cell .tcard{zoom:var(--set-zoom,.52);box-shadow:0 18px 34px -14px rgba(0,0,0,.8),0 0 0 1px rgba(0,0,0,.5)}
.set-role{font-family:var(--font-head);font-weight:700;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color: var(--accent-text);opacity:.85}
.set-line{font-size:12px;color:var(--text2);text-align:center;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.set-line b{color:var(--text1);font-weight:700}

@media (max-width:640px){
  .set-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:18px 10px}
  .set-grid-sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .set-cell{--set-zoom:.39}
  .set-title{font-size:19px}
}

/* Corner slot. EHL puts EA's OVR grade here; SBHL has no per-match grades in any
   source, so the slot carries what SBHL uniquely does have — seasons played.
   Same geometry as .tcard-ovr so the two leagues' cards stay one composition. */
.tcard-ssn{position:absolute;top:74px;left:14px;z-index:4;
  display:flex;flex-direction:column;align-items:center;padding:10px 12px 8px;
  pointer-events:none}
.tcard-ssn::before{content:'';position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
  width:150%;height:150%;border-radius:50%;z-index:-1;
  background:radial-gradient(closest-side,rgba(2,4,8,.74),rgba(2,4,8,.44) 55%,rgba(2,4,8,0) 100%)}
.tcard-ssn-v{font-family:var(--font-head),sans-serif;font-weight:800;font-size:54px;line-height:.82;
  letter-spacing:-1px;color:var(--tc-gold2);
  text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 22px rgba(0,0,0,.85),0 0 42px rgba(0,0,0,.6)}
.tcard-ssn-k{font-family:var(--font-head),sans-serif;font-weight:700;font-size:10px;
  letter-spacing:3.4px;text-transform:uppercase;color:var(--tc-text2);margin-top:3px;
  text-shadow:0 1px 5px rgba(0,0,0,.9)}
/* A long career earns the glow — the band is longevity, not the rarity tier. */
.tcard-ssn[data-band="vet"]  .tcard-ssn-v{text-shadow:0 2px 0 rgba(0,0,0,.45),0 0 20px rgba(224,26,42,.75),0 0 44px rgba(224,26,42,.35),0 0 26px rgba(0,0,0,.7)}
.tcard-ssn[data-band="mid"]  .tcard-ssn-v{color:var(--tc-gold)}
.tcard-ssn[data-band="base"] .tcard-ssn-v{color:var(--tc-text)}

/* ─── Free-agent availability (draft board cards + no-stats modal) ─── */
.draft-avail {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 16px; background: rgba(8,9,12,.3);
  border-top: 1px solid var(--border);
}
.draft-avail-lbl {
  font-family: var(--font-head); font-weight: 800; font-size: 9px;
  letter-spacing: .12em; color: var(--text3); text-transform: uppercase;
}
.draft-avail-days {
  font-family: var(--font-head); font-weight: 700; font-size: 11px;
  letter-spacing: .1em; color: var(--gold);
}
.draft-avail-times {
  font-family: var(--font-head); font-size: 11px;
  letter-spacing: .04em; color: var(--text2);
}
.draft-avail.is-empty .draft-avail-days { color: var(--text3); letter-spacing: .04em; font-weight: 400; }

.dpm-avail { padding: 4px 0 16px; }
.dpm-avail-lbl {
  font-family: var(--font-head); font-weight: 800; font-size: 9px;
  letter-spacing: .12em; color: var(--text3); text-transform: uppercase; margin-bottom: 6px;
}
.dpm-avail-days {
  font-family: var(--font-head); font-weight: 700; font-size: 15px;
  letter-spacing: .1em; color: var(--gold);
}
.dpm-avail-times {
  font-family: var(--font-head); font-size: 12px; color: var(--text2);
  letter-spacing: .04em; margin-top: 3px;
}
.dpm-avail.is-empty .dpm-avail-days { color: var(--text3); font-size: 13px; letter-spacing: .04em; font-weight: 400; }


/* ── HERO QUICK LINKS ───────────────────────────────────────
   A row of doors at the foot of the hero copy. The rule book in
   particular was reported as unfindable; this is the shortest
   path to it from a cold landing. */
.hero-jump {
  /* The hero is position:relative/380px with .hero-copy absolutely placed at
     top-left, and .hero-bg::after draws the floor hairline at bottom:74px.
     The row sits in that bottom band so it reads as part of the poster, and
     being out of .hero-copy's 400px column it never wraps. */
  /* clears .hero-stat-strip, which is absolute at bottom:0 and ~74px tall */
  position: absolute; left: 36px; right: 20px; bottom: 88px; z-index: 4;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.hj-btn {
  font-family: var(--font-cond); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text1);
  background: rgba(10,12,18,.72);
  border: 1px solid var(--border2);
  padding: 9px 16px;
  cursor: pointer;
  backdrop-filter: blur(3px);
  transition: background .15s, border-color .15s, color .15s;
}
.hj-btn:hover, .hj-btn:focus-visible {
  background: var(--accent, #e01a2a);
  border-color: var(--accent, #e01a2a);
  color: #fff;
  outline: none;
}
.hj-live { display: inline-flex; align-items: center; gap: 7px; }
/* the pip only earns its colour when someone is actually streaming —
   app.js puts .live-on on the body when a stream is up */
.hj-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--border2);
}
body.live-on .hj-dot {
  background: var(--accent, #e01a2a);
  box-shadow: 0 0 0 3px rgba(224,26,42,.22);
  animation: hjPulse 1.6s ease-in-out infinite;
}
@keyframes hjPulse { 0%,100%{opacity:1} 50%{opacity:.45} }
@media (max-width: 760px) {
  /* The hero goes height:auto down here, so absolute placement would ride over
     the copy — back into the flow. One scrolling row rather than wrapping:
     five chips at phone width leave a ragged orphan on the second line, and a
     swipeable row is the pattern people already know from app tab bars. */
  .hero-jump {
    position: static; gap: 6px;
    padding: 12px 14px 14px;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hero-jump::-webkit-scrollbar { display: none; }
  .hj-btn { font-size: 11px; padding: 8px 12px; letter-spacing: .1em; flex: 0 0 auto; }
}

/* ── FREE AGENT BOARD ───────────────────────────────────────
   Position groups, because "who is left at RD" is the question
   a GM actually arrives with. One table head per group; goalies
   get their own columns. */
.fa-group { margin-bottom: 26px; }
.fa-group-hdr {
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--border2);
  margin-bottom: 0;
}
.fa-group-pos {
  font-family: var(--font-head); font-size: 12px; font-weight: 800;
  letter-spacing: .1em;
  color: #fff; background: var(--accent, #e01a2a);
  padding: 3px 9px;
}
.fa-group-name {
  font-family: var(--font-cond); font-size: 12px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--text2);
}
.fa-group-count {
  margin-left: auto;
  font-family: var(--font-head); font-size: 11px; color: var(--text3);
}
.fa-table tbody tr { cursor: pointer; }
.fa-table .fa-name { font-weight: 700; white-space: nowrap; }
.fa-alt {
  margin-left: 7px; padding: 1px 5px;
  font-family: var(--font-head); font-size: 9px; letter-spacing: .08em;
  color: var(--text3); border: 1px solid var(--border2);
}
.fa-av { display: inline-flex; flex-direction: column; line-height: 1.3; }
.fa-av b {
  font-family: var(--font-cond); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; color: var(--text2);
}
.fa-av i {
  font-style: normal; font-family: var(--font-head);
  font-size: 10px; color: var(--text3);
}
.fa-av-none, .fa-new { color: var(--text3); }
.fa-tag {
  display: inline-block; padding: 2px 7px;
  font-family: var(--font-head); font-size: 10px; font-weight: 700;
  letter-spacing: .08em;
  border: 1px solid var(--border2); color: var(--text2);
}
.fa-tag.is-ecu { border-color: rgba(224,26,42,.55); color: var(--accent, #e01a2a); }
.fa-tag.is-last { border-color: var(--border2); color: var(--text2); }
.fa-key {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-left: 12px; font-size: 11px; color: var(--text3);
}
@media (max-width: 760px) {
  /* the two stat columns a phone can lose without changing the decision */
  .fa-table th:nth-child(9), .fa-table td:nth-child(9),
  .fa-table th:nth-child(8), .fa-table td:nth-child(8) { display: none; }
  .fa-key { display: none; }
}



/* ── LEAGUE NEWS — THE PAPER ────────────────────────────────
   One story per sheet, flipped at the foot. The sheet has a
   fixed height so the page below it never moves: a 15KB recap
   and a two-line announcement occupy the same frame. */
.news-paper {
  border: 1px solid var(--border);
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  outline: none;
}
.news-paper:focus-visible { box-shadow: 0 0 0 2px rgba(224,26,42,.45); }
.np-stage {
  position: relative;
  height: clamp(480px, 86vh, 1000px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
/* a story dealt over sheets never scrolls — the flip is the scroll */
.np-stage.np-paged { overflow-y: hidden; }
.np-page { animation: npIn .17s ease both; }
.np-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
  position: sticky; top: 0; z-index: 4;
}
.np-title {
  font-family: var(--font-head); font-size: 14px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text1);
  margin: 0; flex: 1 1 auto;
}
.np-date {
  font-family: var(--font-head); font-size: 11px; letter-spacing: .08em;
  color: var(--text3); white-space: nowrap;
}
.np-body { padding: 13px 16px; }
.np-foot { padding: 0 16px 14px; }

/* the flip — the outgoing sheet slides off, the new one slides in behind it */
@keyframes npIn  { from { opacity: 0; transform: translateX(var(--np-from, 18px)); }
                   to   { opacity: 1; transform: none; } }
@keyframes npOut { from { opacity: 1; transform: none; }
                   to   { opacity: 0; transform: translateX(var(--np-to, -18px)); } }
.np-in-right { --np-from:  26px; }
.np-in-left  { --np-from: -26px; }
.np-out-left  { animation: npOut .16s ease both; --np-to: -26px; }
.np-out-right { animation: npOut .16s ease both; --np-to:  26px; }
@media (prefers-reduced-motion: reduce) {
  .np-page, .np-out-left, .np-out-right { animation: none; }
}

.np-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 10px 14px;
  border-top: 1px solid var(--border2);
  background: var(--bg2);
}
.np-flip {
  font-family: var(--font-head); font-size: 18px; line-height: 1;
  color: var(--text1); background: transparent;
  border: 1px solid var(--border2); padding: 6px 18px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.np-flip:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; }
.np-flip:disabled { opacity: .28; cursor: default; }
.np-meta { display: flex; align-items: baseline; gap: 10px; }
.np-count {
  font-family: var(--font-led, var(--font-head)); font-size: 13px;
  letter-spacing: .1em; color: var(--text1);
}
.np-hint {
  font-family: var(--font-cond); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text3);
}
@media (max-width: 760px) {
  .np-stage { height: clamp(440px, 78vh, 760px); }
  .np-title { font-size: 12px; }
  .np-flip { padding: 6px 14px; }
}