/* ═══════════════════════════════════════════════════════════════
   EHL — Electronic Hockey League  |  styles.css  v1.0.0
   Design: Broadcast-grade digital sports — navy + gold + ice blue
   ═══════════════════════════════════════════════════════════════ */

/* ── VARIABLES ─────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:    #020b18;
  --bg2:   #071428;
  --bg3:   #0c1e3a;
  --bg4:   #112549;

  /* Borders */
  --border:  #1a3262;
  --border2: #254880;

  /* Accent: EHL Gold */
  --accent:  #e8b923;
  --accent2: #f5d460;

  /* Secondary: Ice Blue */
  --blue:    #4fc3f7;
  --ice:     #82d8ff;

  /* Text */
  --text:  #d8e8f8;
  --text1: #edf4ff;
  --text2: #6a90c0;
  --text3: #2e4d80;

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

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

  /* Fonts */
  --font-head: 'Orbitron', sans-serif;
  --font-body: 'Exo 2', sans-serif;

  /* Glow helpers */
  --glow-gold: 0 0 18px rgba(232,185,35,.35);
  --glow-ice:  0 0 18px rgba(79,195,247,.25);
}

/* ── 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(232,185,35,.07)  0%, transparent 65%),
    radial-gradient(ellipse 70%  50% at 95% 85%,  rgba(79,195,247,.05)  0%, transparent 55%),
    radial-gradient(ellipse 50%  40% at 5%  70%,  rgba(232,185,35,.03)  0%, transparent 55%);
}

/* Hex-grid overlay — faint circuit board feel */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34zm0-8l-20-11.5V34.5L28 23l20 11.5v12z' fill='none' stroke='%234fc3f7' stroke-width='.6'/%3E%3C/svg%3E");
}

/* Scanline shimmer overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  opacity: .018;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(79,195,247,.6) 2px,
    rgba(79,195,247,.6) 3px
  );
}

/* ── TOP BAR ─────────────────────────────────────────────────*/
#topbar {
  background: rgba(2,11,24,.96);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(232,185,35,.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); }

.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(232,185,35,.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(232,185,35,.1); }
.tnav-item.active { color: var(--accent); background: rgba(232,185,35,.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(232,185,35,.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(232,185,35,.05);
  border: 1px solid rgba(232,185,35,.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(232,185,35,.12);
  border-color: rgba(232,185,35,.3);
  color: var(--accent);
}
.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(232,185,35,.1); }
.nav-item.active { color: var(--accent); background: rgba(232,185,35,.14); }
.nav-icon-wrap {
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; background: rgba(232,185,35,.04);
  border: 1px solid rgba(232,185,35,.08);
  flex-shrink: 0; transition: background .15s, border-color .15s, color .15s;
  color: var(--text3);
}
.nav-item:hover .nav-icon-wrap { background: rgba(232,185,35,.1); border-color: rgba(232,185,35,.2); color: var(--text2); }
.nav-item.active .nav-icon-wrap { background: rgba(232,185,35,.15); border-color: rgba(232,185,35,.32); color: var(--accent); }
.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(232,185,35,.06); margin: 6px 16px; flex-shrink: 0; }
.nav-panel-footer {
  margin-top: auto; padding: 16px 20px;
  border-top: 1px solid rgba(232,185,35,.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(2,11,24,.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;
}
#section-tabs::-webkit-scrollbar { display: none; }
#section-tabs.visible, #section-tabs.active { display: flex; }
.stab-group {
  display: none;
  gap: 0;
  padding: 0 14px;
  flex-shrink: 0;
}
.stab-group.visible, .stab-group.active { display: flex; }
.stab {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 10px 14px;
  border: none;
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.stab:hover  { color: var(--text2); }
.stab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ── 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: 900;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 20px 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sec-title::before {
  content: '';
  width: 3px;
  height: 14px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: var(--glow-gold);
  flex-shrink: 0;
}
.sec-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border) 0%, 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); box-shadow: 0 0 0 2px rgba(232,185,35,.12); }
.input-search::placeholder { color: var(--text3); }

.pill {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 20px;
  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); color: #000; 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: #000; 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); }
.stat-table th.sort-asc::after  { content: ' ↑'; color: var(--accent); }
.stat-table th.sort-desc::after { content: ' ↓'; color: var(--accent); }

.stat-table td {
  padding: 9px 12px;
  text-align: right;
  border-bottom: 1px solid rgba(26,50,98,.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(232,185,35,.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); }

/* 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(26,50,98,.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(232,185,35,.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(232,185,35,.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(26,50,98,.5); transition: background .1s; }
.tbl-wrap tbody tr:last-child { border-bottom: none; }
.tbl-wrap tbody tr:hover { background: rgba(232,185,35,.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); }
.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) !important; font-weight: 800; font-family: var(--font-head); }

/* ── PLAYERS PAGE SPLIT LAYOUT ───────────────────────────────*/
.players-page-inner { max-width: none; }
.players-split-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.players-main { flex: 1; min-width: 0; }
.players-sidebar {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 64px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.players-sidebar::-webkit-scrollbar { width: 4px; }
.players-sidebar::-webkit-scrollbar-track { background: transparent; }
.players-sidebar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; }
@media (max-width: 700px) {
  .players-split-layout { flex-direction: column-reverse; }
  .players-sidebar { width: 100%; position: static; max-height: none; }
}

/* ── 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);
  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(232,185,35,.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); }
.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(232,185,35,.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(232,185,35,.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);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(26,32,48,.4);transition:background .12s;}
.lb-row:last-child{border-bottom:none}
.lb-row:hover{background:rgba(232,185,35,.05)}
.lb-row-top{background:rgba(240,180,41,.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)}
.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);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); }

/* ── 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(232,185,35,.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(232,185,35,.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);
  background: rgba(232,185,35,.1);
  border: 1px solid rgba(232,185,35,.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(232,185,35,.3);
}
.action-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 22px rgba(232,185,35,.5);
}

.action-btn-secondary {
  background: rgba(232,185,35,.1);
  color: var(--accent);
  border: 1px solid rgba(232,185,35,.3);
}
.action-btn-secondary:hover {
  background: rgba(232,185,35,.18);
  border-color: rgba(232,185,35,.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: linear-gradient(135deg, var(--accent), #b8921a);
  border-color: var(--accent); color: #000;
  box-shadow: 0 3px 12px rgba(232,185,35,.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(232,185,35,.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(2,11,24,.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(232,185,35,.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(2,11,24,.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(79,195,247,.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(232,185,35,.14);  color: var(--accent); }
.nc-general       { background: rgba(90,100,120,.12);  color: var(--text2); }
.nc-gameday       { background: rgba(232,185,35,.14);  color: var(--accent); }
.nc-weekly        { background: rgba(79,195,247,.14);  color: var(--ice); }
.nc-playoff       { background: rgba(232,185,35,.14);  color: var(--accent); }

.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); color: var(--accent); }
.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);
  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(232,185,35,.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); }
.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(232,185,35,.14); color: var(--accent); 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-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); 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); }
.star-rank {
  font-family: var(--font-head);
  font-size: 20px;
  color: var(--accent);
  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(232,185,35,.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(232,185,35,.15); border-color: rgba(232,185,35,.3); color: var(--accent); }

.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(232,185,35,.1);
  color: var(--accent);
  border: 1px solid rgba(232,185,35,.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(232,185,35,.4);
  object-fit: cover;
  box-shadow: 0 0 20px rgba(232,185,35,.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);
  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(232,185,35,.1);
  border: 1px solid rgba(232,185,35,.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); border-bottom-color: var(--accent); }
.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);
}
.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); }

/* ── MODALS ──────────────────────────────────────────────────*/
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(2,11,24,.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(232,185,35,.1);
  animation: modalIn .22s ease;
}
.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);
}
.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;
}
.modal-close:hover { background: rgba(232,185,35,.12); border-color: rgba(232,185,35,.25); color: var(--accent); }

.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);
  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);
  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(26,50,98,.4); font-size: 14px;
  transition: background .1s;
}
.roster-player:last-child { border-bottom: none; }
.roster-player:hover { background: rgba(232,185,35,.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; }
.pos-tag { font-family: var(--font-head); font-weight: 700; font-size: 10px; letter-spacing: .06em; padding: 2px 6px; border-radius: 3px; background: rgba(61,142,240,.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(79,195,247,.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; }

.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); 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);
}

.roster-player-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(26,50,98,.4);
  transition: background .12s;
  cursor: pointer;
}
.roster-player-row:hover { background: rgba(232,185,35,.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(79,195,247,.25); background: rgba(79,195,247,.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(232,185,35,.12); color: var(--accent); border: 1px solid rgba(232,185,35,.25); }
.rp-badge-agm { background: rgba(79,195,247,.1);  color: var(--blue);   border: 1px solid rgba(79,195,247,.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); }
.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);
  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-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);
}
.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(232,185,35,.1);
  color: var(--accent);
  border: 1px solid rgba(232,185,35,.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(232,185,35,.15);
  color: var(--accent);
  border-color: rgba(232,185,35,.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);
  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(232,185,35,.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);
  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); 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); }
.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);
}

.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); box-shadow: 0 0 0 2px rgba(232,185,35,.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(232,185,35,.1);
  color: var(--accent);
  border: 1px solid rgba(232,185,35,.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); }
.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(232,185,35,.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(232,185,35,.12);
  color: var(--accent);
  border: 1px solid rgba(232,185,35,.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(232,185,35,.4); background: rgba(232,185,35,.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(232,185,35,.4); background: rgba(232,185,35,.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(232,185,35,.1); color: var(--accent); }
.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); }
.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(61,142,240,.12); color: var(--blue); }
.draft-pos-badge.goalie { background: rgba(232,185,35,.12); color: var(--gold); }
.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); }
.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(2,11,24,.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); }

/* ── 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(232,185,35,.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);
  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(232,185,35,.1);
  border: 1px solid rgba(232,185,35,.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); border-bottom-color: var(--accent); }

/* ── 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(232,185,35,.08); border-color: rgba(232,185,35,.3); }
.rxn-btn.rxn-mine {
  background: rgba(232,185,35,.1); border-color: rgba(232,185,35,.3); color: var(--accent);
}
.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); }

.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); }
.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 {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 42px;
  background: rgba(2,11,24,.97);
  border-top: 1px solid rgba(232,185,35,.3);
  box-shadow: 0 -2px 20px rgba(232,185,35,.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);
  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); }
.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); }

/* ── 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(232,185,35,.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(232,185,35,.07); border-color: rgba(232,185,35,.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);
  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;
}
body:has(#ticker:not(.hidden)) #site-footer { margin-bottom: 42px; }
.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-name  {
  font-family: var(--font-head); font-weight: 900; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text);
}
.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); background: rgba(232,185,35,.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); 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(232,185,35,.12); border-color: rgba(232,185,35,.3); color: var(--accent); }

/* 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); }

/* 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(232,185,35,.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)}
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(232,65,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(11,13,20,.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(61,142,240,.12);color:var(--blue)}
.tb-OT{background:rgba(240,180,41,.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(90,100,120,.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);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-bottom: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-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)}
.sched-night-date{font-size:12px;color:var(--text3);font-family:var(--font-head)}
.sched-timeslot-hdr{background:rgba(11,13,20,.8);border-bottom:1px solid rgba(26,32,48,.7);border-top:1px solid rgba(26,32,48,.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(26,32,48,.8);background:rgba(6,7,9,.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(26,32,48,.5);gap:8px;transition:background .12s}
.sched-game:last-child{border-bottom:none}
.sched-game:hover{background:rgba(61,142,240,.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);letter-spacing:.08em}
.sched-game-num{font-family:var(--font-head);font-weight:700;font-size:10px;color:var(--accent);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}

/* ── 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-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(232,65,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(232,65,42,.55)) drop-shadow(0 0 8px rgba(232,65,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(20,26,44,.95);padding:4px 12px;font-family:var(--font-head);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(212,168,67,.85);border-left:3px solid #d4a843;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(110,120,145,.8);margin-top:3px}
.cv-gold{color:#d4a843}.cv-win{color:#3dd68c}.cv-loss{color:#ff5c5c}.cv-ice{color:#5aaaf0}.cv-dim{color:rgba(110,120,145,.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(26,32,48,.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(26,32,48,.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);
  margin-bottom:6px;
}
.pc-draft-label{
  font-family:var(--font-head);font-weight:800;font-size:9px;
  letter-spacing:.12em;color:var(--accent);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(11,13,20,.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);
  background:rgba(80,140,255,.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:'Oswald',sans-serif;
  --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(232,65,42,.15), 0 1px 0 rgba(255,255,255,.04) inset;
  --glow-red:0 0 18px rgba(232,65,42,.5), 0 0 36px rgba(232,65,42,.25);
  --chyron-grad:linear-gradient(90deg, rgba(232,65,42,.18) 0%, rgba(232,65,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)}
.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(232,65,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(232,65,42,.1) 0%, transparent 55%),
    radial-gradient(circle at 85% 50%, rgba(61,142,240,.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,10,16,.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(232,65,42,.12) !important;
  color:var(--accent) !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(232,65,42,.1) 0%, rgba(232,65,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(232,65,42,.5);
}

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

/* 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-shadow:0 0 12px rgba(232,65,42,.4);
}

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

/* 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(212,168,67,.18); color: #d4a843; }
.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: #d4a843; 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(240,180,41,.07) 0%,transparent 80%);
  border-top:1px solid rgba(240,180,41,.18);
  cursor:pointer;transition:background .15s;
}
.potn-card:hover{background:linear-gradient(90deg,rgba(240,180,41,.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(240,180,41,.09) 0%,rgba(232,65,42,.05) 100%);
  border:1px solid rgba(240,180,41,.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(240,180,41,.5);box-shadow:0 4px 20px rgba(240,180,41,.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);
  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(232,65,42,.3) 50%, transparent 100%);
  opacity: 0;
  transition: opacity .2s;
}
.forum-thread-card:hover {
  background: rgba(232,65,42,.06);
  border-color: rgba(232,65,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);
}
.forum-cat-tag {
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(61,142,240,.1);
  border: 1px solid rgba(61,142,240,.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(232,65,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);
}
.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(232,65,42,.15);
  color: var(--accent);
  border: 1px solid rgba(232,65,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);
  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(232,65,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); }
.pb-hdr-gap { width: 44px; flex-shrink: 0; }

/* ── 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(232,65,42,.35);
  box-shadow: 0 0 18px rgba(232,65,42,.08), inset 0 0 0 1px rgba(232,65,42,.1);
}
.pb-card-done {
  border-color: rgba(240,180,41,.25);
}
.pb-card-finals {
  border-color: rgba(240,180,41,.3);
  box-shadow: 0 0 24px rgba(240,180,41,.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(240,180,41,.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(232,65,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);
  box-shadow: 0 0 6px rgba(232,65,42,.65);
}
.pb-pip-gold {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 7px rgba(240,180,41,.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(232,65,42,.05); }
.pb-status-final { color: var(--gold); background: rgba(240,180,41,.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(240,180,41,.12), transparent);
  border: 1px solid rgba(240,180,41,.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); }


/* ═══════════════════════════════════
   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(232,65,42,.1);  border-color: rgba(232,65,42,.22);  color: var(--accent); }
.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(232,65,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); color: var(--accent); }

/* ── 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); 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); 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);
}

/* 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(61,142,240,.1); border: 1px solid rgba(61,142,240,.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-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(232,65,42,.1); border: 1px solid rgba(232,65,42,.25);
  border-radius: 4px; color: var(--accent); 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); }
.stats-tbl thead th.sort-asc::after  { content: ' ▲'; color: var(--accent); }
.stats-tbl thead th.sort-desc::after { content: ' ▼'; color: var(--accent); }
.stats-tbl tbody td {
  border-bottom: 1px solid rgba(26,50,98,.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(232,185,35,.04); }
.stats-tbl tbody tr:last-child td { border-bottom: none; }
/* rank + name columns sticky on wide screens */
@media (min-width: 701px) {
  .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); }
}