/* RWHA — dark editorial-sports aesthetic
   Typeface system: Archivo Black (display) + Archivo (body) + JetBrains Mono (numerics)
   Color philosophy: ink black, paper white, single hot accent per page (team color).
*/

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Archivo:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* Surfaces — dark canvas with cool-grey elevations.
     Borrowed wholesale from the Command Zero palette: same near-black
     base, same cool-grey rises. Anything that used to read "warm paper"
     is now a clean white so the new emerald accent reads cleanly. */
  --ink:        #0A0A0B;       /* page background */
  --ink-2:      #131316;       /* card background */
  --ink-3:      #1C1C21;       /* hover / elevated */
  --ink-4:      #2C323A;       /* divider (slightly cooler than before) */
  --paper:      #FFFFFF;       /* primary text — cool white, was warm #F5F2EA */
  --paper-dim:  #C4C3BD;       /* secondary text */
  --paper-2:    #9A9590;       /* tertiary text */
  --paper-3:    #6F6C67;       /* quaternary / disabled */

  /* Brand — accent green replaces the old orange. The site cascades
     `--hot` through `--team` so non-team pages pick this up automatically;
     team pages still override `--team` inline with the team's own colors. */
  --hot:        #3AB57C;       /* RWHA emerald — opaque, for text + borders */
  --hot-dim:    #2A8A5D;       /* darker forest, for hovers/pressed */
  --hot-soft:   rgba(58, 181, 124, 0.16);   /* translucent fill — chip backgrounds, badges, tinted hovers */
  --hot-edge:   rgba(58, 181, 124, 0.40);   /* translucent edge — borders that should still read as "the accent" */
  --signal:     #F5C542;       /* warning amber (was #FACC15) */
  --good:       #3AB57C;       /* positive — same as accent */
  --bad:        #FA4616;       /* critical red-orange (was #F43F5E) */

  /* Per-page team accent (overridden inline) */
  --team:       var(--hot);
  --team-2:     var(--ink-2);
  --team-3:     var(--paper);

  /* Type */
  --display: 'Archivo Black', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono:    'JetBrains Mono', 'SF Mono', monospace;

  /* Layout */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 4px 16px rgba(0,0,0,0.35);
  --shadow-2: 0 1px 0 rgba(255,255,255,0.04) inset, 0 12px 32px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;                     /* fallback for older browsers */
  min-height: 100dvh;                    /* dynamic viewport — accounts for iOS URL bar */
  /* iOS Safari housekeeping. Prevents text auto-resize in landscape,
     kills the blue tap-flash on buttons/links, and lets fixed elements
     extend into the notched safe area. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  /* Subtle grain overlay */
  background-image:
    radial-gradient(at 20% 0%, rgba(255,76,0,0.04) 0%, transparent 35%),
    radial-gradient(at 90% 5%, rgba(124,58,237,0.03) 0%, transparent 40%);
}

/* Subtle film grain overlay for the whole page */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--team); }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

img { max-width: 100%; display: block; }

/* ============ HEADER ============ */
.site-header {
  position: sticky; top: 0;
  z-index: 100;
  background: rgba(10,10,11,0.85);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--ink-4);
}

.site-header__inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px 24px;
  /* Notched-device safe-area padding (iPhone X+ in landscape). The max()
     keeps the desktop 24px floor — env() resolves to 0 on non-notched
     devices, so this is a no-op everywhere else. */
  padding-left:  max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}

.brand {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.brand__mark {
  width: 64px; height: 64px;
  position: relative;
  display: block;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4));
}
.brand__mark img { width: 100%; height: 100%; display: block; object-fit: contain; }

.brand__name {
  display: flex; flex-direction: column; line-height: 1;
}
.brand__name b { font-size: 20px; letter-spacing: 0; }
.brand__name small {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--paper-dim);
  margin-top: 4px;
}

/* Primary nav */
.nav {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 1;
}

.nav__item {
  position: relative;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--paper-dim);
  border-radius: var(--r-sm);
  transition: color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
.nav__item:hover { color: var(--paper); background: var(--ink-3); }
.nav__item.is-active { color: var(--paper); }
.nav__item.is-active::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: -15px; height: 2px;
  background: var(--team);
}

.nav__item--has-menu::after {
  content: '⌄'; margin-left: 6px; font-size: 11px; color: var(--paper-3);
}

/* Slag Heap — pushed to the right end of the nav with a thin divider
   so it reads as a related-but-separate destination (the GM-only
   community space) without looking like an already-pressed button.
   All hover / active states inherit from .nav__item so the menu feels
   uniform; only the position and the divider mark it as distinct. */
.nav__item--slag {
  margin-left: auto;
  position: relative;
  padding-left: 26px;
}
.nav__item--slag::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: var(--ink-4);
}

/* Drop-down */
.dd {
  position: relative;
}
.dd__menu {
  position: absolute; top: 100%; left: 0; min-width: 240px;
  margin-top: 6px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: 6px;
  display: none;
  z-index: 200;
}
.dd:hover .dd__menu, .dd:focus-within .dd__menu { display: block; }
.dd__menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  font-size: 13px; color: var(--paper-dim);
  border-radius: var(--r-sm);
}
.dd__menu a:hover { color: var(--paper); background: var(--ink-3); }
.dd__menu .dd__group {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--paper-3);
  padding: 12px 10px 6px;
  border-top: 1px solid var(--ink-4);
  margin-top: 4px;
}
.dd__menu .dd__group:first-child { border-top: 0; margin-top: 0; padding-top: 6px; }

/* Search */
.header-utils { display: flex; align-items: center; gap: 12px; }
.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  padding: 8px 12px;
  border-radius: var(--r-md);
  width: 220px;
  font-size: 13px;
  color: var(--paper-dim);
  transition: border-color 120ms ease;
}
.search:focus-within { border-color: var(--team); }
.search input { background: none; border: 0; outline: 0; color: var(--paper); flex: 1; font-size: 13px; }
.search input::placeholder { color: var(--paper-3); }
.search__kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  background: var(--ink-4);
  border-radius: 3px;
  color: var(--paper-2);
}
.btn-login {
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  background: var(--paper); color: var(--ink);
  padding: 9px 16px; border-radius: var(--r-md);
  transition: transform 120ms ease;
}
.btn-login:hover { transform: translateY(-1px); color: var(--ink); }

/* Signed-in state for the header sign-in button. Translucent fill + team-color
   text + soft team-color edge so it reads as the accent without being a
   solid block. Same pattern is used by every "active pill" rule below. */
.btn-login.btn-login--active {
  background: color-mix(in srgb, var(--team) 16%, transparent);
  color: var(--team);
  border: 1px solid color-mix(in srgb, var(--team) 40%, transparent);
}
.btn-login.btn-login--active::before {
  content: ''; display: inline-block; vertical-align: middle;
  width: 8px; height: 8px; margin-right: 8px;
  background: #22D3A1; border-radius: 50%;
  box-shadow: 0 0 8px rgba(34,211,161,0.6);
}

/* ----- Auth sign-in modal ----- */
.auth-modal {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
}
.auth-modal.is-open { display: block; }
body.auth-modal-open { overflow: hidden; }
.auth-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8,8,9,0.72);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.auth-modal__panel {
  position: relative;
  max-width: 460px; width: calc(100% - 40px);
  margin: 8vh auto 0;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), 0 24px 64px rgba(0,0,0,0.6);
  overflow: hidden;
}
.auth-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ink-4);
}
.auth-modal__head h2 {
  margin: 0;
  font-family: var(--display); font-weight: 900; font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.auth-modal__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 26px; line-height: 1;
  color: var(--paper-3);
  padding: 4px 10px; border-radius: var(--r-sm);
  transition: color 120ms ease, background 120ms ease;
}
.auth-modal__close:hover { color: var(--paper); background: var(--ink-3); }

.auth-modal__form {
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
}
.auth-modal__status {
  margin: 0;
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3);
}
/* Shown in place of the password field when the picked team has no
   credential yet — points the GM at the Commissioner for a claim link
   rather than letting anyone self-serve. */
.auth-modal__needs-claim {
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(234,179,8,0.10);
  border: 1px solid rgba(234,179,8,0.30);
  color: var(--paper);
  font-size: 13px; line-height: 1.45;
}
.auth-modal__needs-claim strong { display: block; margin-bottom: 4px; color: #fde68a; }
.auth-modal__needs-claim p { margin: 0; color: var(--paper-dim); }
.auth-modal__field {
  display: flex; flex-direction: column; gap: 6px;
}
.auth-modal__field > span {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-3);
}
.auth-modal__field select,
.auth-modal__field input {
  width: 100%;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  color: var(--paper);
  font: inherit; font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  transition: border-color 120ms ease, background 120ms ease;
}
.auth-modal__field select:focus,
.auth-modal__field input:focus {
  outline: 0; border-color: var(--team);
}
.auth-modal__error {
  background: rgba(244,63,94,0.1);
  border: 1px solid rgba(244,63,94,0.35);
  color: #F87171;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: var(--r-sm);
}
.auth-modal__actions {
  display: flex; justify-content: flex-end; gap: 10px;
}
.auth-modal__submit {
  font: inherit; font-weight: 700; font-size: 13px; letter-spacing: 0.02em;
  background: var(--team); color: #fff;
  border: 0; padding: 11px 22px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.auth-modal__submit:hover:not(:disabled) { transform: translateY(-1px); }
.auth-modal__submit:disabled { opacity: 0.6; cursor: progress; }
.auth-modal__hint {
  margin: 0;
  font-size: 12px; line-height: 1.4;
  color: var(--paper-3);
}

/* Tiny dropdown under the signed-in button. */
.auth-menu {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  padding: 12px;
  min-width: 180px;
  z-index: 1001;
}
.auth-menu__id { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--ink-4); }
.auth-menu__name { font-family: var(--display); font-weight: 800; color: var(--paper); }
.auth-menu__gm { font-family: var(--mono); font-size: 11px; color: var(--paper-3); margin-top: 2px; }
.auth-menu__item,
.auth-menu__signout {
  width: 100%; text-align: left;
  background: transparent; color: var(--paper-dim);
  border: 0; padding: 8px 10px;
  font: inherit; font-size: 13px;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.auth-menu__item:hover,
.auth-menu__signout:hover { background: var(--ink-3); color: var(--paper); }
.auth-modal__success {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: rgba(34,211,161,0.12);
  color: #6ee7b7;
  font-size: 13px;
}

/* ============ Roster editor modal (rosterm) ============
   Inline replacement for the old WebClientRoster.php link. Lives in auth/
   roster_editor.js. Wide modal — fills most of viewport so the 10-game grid
   fits without scrolling on a typical laptop. */
.rosterm {
  position: fixed; inset: 0; z-index: 1000;
  display: none;
}
.rosterm.is-open { display: block; }
body.rosterm-open { overflow: hidden; }
.rosterm__backdrop {
  position: absolute; inset: 0;
  background: rgba(8,8,9,0.78);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.rosterm__panel {
  position: relative;
  max-width: 1280px; width: calc(100% - 48px);
  height: calc(100vh - 80px);
  margin: 40px auto 0;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), 0 24px 64px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.rosterm__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ink-4);
}
.rosterm__head h2 {
  margin: 0;
  font-family: var(--display); font-weight: 900; font-size: 20px;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.rosterm__sub {
  margin: 4px 0 0;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-3);
}
.rosterm__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 28px; line-height: 1;
  color: var(--paper-3);
  padding: 2px 12px; border-radius: var(--r-sm);
  transition: color 120ms ease, background 120ms ease;
}
.rosterm__close:hover { color: var(--paper); background: var(--ink-3); }

.rosterm__body {
  flex: 1; overflow: auto;
  padding: 0;
}
.rosterm__loading, .rosterm__empty {
  padding: 40px 22px;
  text-align: center;
  color: var(--paper-dim);
  font-size: 14px;
}
.rosterm__empty p { margin: 0 0 10px; line-height: 1.5; }

.rosterm__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  border-top: 1px solid var(--ink-4);
  background: var(--ink);
}
.rosterm__legend {
  display: inline-flex; gap: 14px; align-items: center;
  font-family: var(--mono); font-size: 11px; color: var(--paper-3);
}
.rosterm__legend .chip {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  margin-right: 4px;
  border-radius: 3px;
  font-family: var(--display); font-weight: 800; font-size: 10px;
  color: #fff;
}
.rosterm__legend .chip.dress   { background: #22D3A1; color: #052e22; }
.rosterm__legend .chip.scratch { background: #F59E0B; color: #2b1d05; }
.rosterm__legend .chip.farm    { background: #64748B; }
.rosterm__hint {
  font-family: var(--mono); font-size: 11px; color: var(--paper-3);
  letter-spacing: 0.04em;
}

/* ===== Sticky validation strip ===== */
.rosterm__valstrip {
  position: sticky; top: 0; z-index: 3;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 22px;
  background: var(--ink-3);
  border-bottom: 1px solid var(--ink-4);
}
.vbadge {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.vbadge__label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-3);
}
.vbadge__count {
  display: flex; align-items: baseline; gap: 3px;
  font-family: var(--display);
  color: var(--paper);
}
.vbadge__count strong { font-size: 16px; font-weight: 900; }
.vbadge__count span   { font-size: 11px; color: var(--paper-3); }
.vbadge--ok   { border-left: 3px solid #22D3A1; }
.vbadge--ok .vbadge__count strong { color: #22D3A1; }
.vbadge--warn { border-left: 3px solid #F59E0B; background: rgba(245,158,11,0.06); }
.vbadge--warn .vbadge__count strong { color: #F59E0B; }
.vbadge--error { border-left: 3px solid #F43F5E; background: rgba(244,63,94,0.08); }
.vbadge--error .vbadge__count strong { color: #F43F5E; }

/* ===== Warnings / suggestions banner ===== */
.rosterm__warnings { display: none; }
.rosterm__warnings.is-active {
  display: block;
  background: rgba(245,158,11,0.06);
  border-bottom: 1px solid var(--ink-4);
  padding: 10px 22px 12px;
}
.rosterm__warnhead {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.rosterm__warntitle {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #F59E0B;
}
.rosterm__warncount {
  font-family: var(--mono); font-size: 10px;
  color: var(--paper-3); letter-spacing: 0.10em; text-transform: uppercase;
}
.rosterm__issues {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.rosterm__issue {
  display: grid;
  grid-template-columns: minmax(0, auto) 1fr;
  gap: 8px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  font-size: 12px;
  align-items: baseline;
}
.rosterm__issue--error { background: rgba(244,63,94,0.08); border-left: 2px solid #F43F5E; }
.rosterm__issue--warn  { background: rgba(245,158,11,0.07); border-left: 2px solid #F59E0B; }
.rosterm__issuemsg {
  font-family: var(--display); font-weight: 700;
  color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rosterm__issuesuggest {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-dim); letter-spacing: 0.02em;
}

/* ===== Game-tab issue dots ===== */
.rosterm__tab { position: relative; }
.rosterm__tabdot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.rosterm__tabdot--warn  { background: #F59E0B; }
.rosterm__tabdot--error { background: #F43F5E; }
.rosterm__tab.is-active .rosterm__tabdot { box-shadow: 0 0 0 2px var(--team); }

/* ===== Game-tab + copy controls strip ===== */
.rosterm__gamestrip {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 22px;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-4);
  flex-wrap: wrap;
}
.rosterm__tabs {
  display: flex; gap: 4px;
  flex-wrap: wrap;
}
.rosterm__tab {
  appearance: none; background: var(--ink-2); border: 1px solid var(--ink-4);
  color: var(--paper-dim);
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.rosterm__tab small {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 9px; font-weight: 600;
  color: var(--paper-3); letter-spacing: 0.06em; text-transform: none;
}
.rosterm__tab:hover:not(:disabled) { background: var(--ink-3); color: var(--paper); }
.rosterm__tab.is-active {
  background: color-mix(in srgb, var(--team) 16%, transparent);
  border-color: color-mix(in srgb, var(--team) 40%, transparent);
  color: var(--team);
}
.rosterm__tab.is-active small { color: rgba(255,255,255,0.75); }
.rosterm__tab:disabled { opacity: 0.35; cursor: not-allowed; }

.rosterm__copy {
  display: flex; align-items: center; gap: 6px;
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--paper-3);
}
.rosterm__copylabel strong { color: var(--paper); font-family: var(--display); font-weight: 800; }
.rosterm__copygrouplabel { color: var(--paper-3); }
.rosterm__copybtn {
  appearance: none; border: 1px solid var(--ink-4); background: var(--ink-2);
  color: var(--paper-dim);
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-family: var(--display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.05em; text-transform: lowercase;
  cursor: pointer;
}
.rosterm__copybtn:hover:not(:disabled) { background: var(--ink-3); color: var(--paper); }
.rosterm__copybtn:disabled { opacity: 0.4; cursor: not-allowed; }
.rosterm__copyselect {
  appearance: none;
  background: var(--ink-2); border: 1px solid var(--ink-4); color: var(--paper);
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 11px;
}

/* ===== Three drop-zone columns =====
   The zones row fills the remaining modal height but does NOT scroll itself.
   Each column body scrolls independently, so the destination drop area is
   always visible no matter where you grabbed the dragged card from. */
.rosterm__zones {
  flex: 1;
  overflow: hidden;       /* parent doesn't scroll; columns do */
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr;
  gap: 16px;
  padding: 16px 22px;
  min-height: 0;          /* let the grid actually shrink-to-fit in a flex parent */
}
.rosterm__zone {
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  min-height: 0;          /* same rationale: allow inner flex to size correctly */
  height: 100%;           /* belt + suspenders alongside grid's default stretch */
  overflow: hidden;       /* clip rounded corners against the scrolling body */
}
.rosterm__zoneh {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--ink-4);
}
.rosterm__zoneh h3 {
  margin: 0;
  font-family: var(--display); font-weight: 900; font-size: 14px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--paper);
}
.rosterm__zonesub {
  margin: 2px 0 0;
  font-family: var(--mono); font-size: 10px;
  color: var(--paper-3); letter-spacing: 0.02em;
}
.rosterm__zonecount {
  text-align: right; line-height: 1.1;
}
.rosterm__zonecount strong {
  display: block;
  font-family: var(--display); font-weight: 900; font-size: 22px;
  color: var(--paper);
}
.rosterm__zonecount small {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--paper-3);
}
.rosterm__zonebody {
  flex: 1; padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
  /* Each column scrolls independently so the dropzone is always reachable
     no matter how full or empty its neighbour is. */
  overflow-y: auto;
  /* Floor on the visible drop area for empty/filtered columns. The flex
     parent supplies the real height; this just protects us if the modal
     shrinks unexpectedly. */
  min-height: 120px;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.rosterm__zonebody.is-over {
  background: rgba(34,211,161,0.10);
  box-shadow: inset 0 0 0 2px var(--team);
}
.rosterm__zoneempty {
  margin: auto;
  font-family: var(--mono); font-size: 11px; color: var(--paper-3);
  text-align: center;
  /* Take no pointer events so the parent zone always wins drag-over hits. */
  pointer-events: none;
}
.rosterm__zonenote {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--mono); font-size: 10px;
  color: var(--paper-3);
  font-style: italic;
  text-align: center;
  pointer-events: none;
}

/* ===== Filter bar ===== */
.rosterm__filters {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 22px;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-4);
  flex-wrap: wrap;
}
.rosterm__flabel {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-3);
  margin-right: 4px;
}
.rosterm__fbtn {
  appearance: none; cursor: pointer;
  background: var(--ink-2); border: 1px solid var(--ink-4);
  color: var(--paper-dim);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-family: var(--display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.05em;
  transition: background 100ms ease, color 100ms ease;
}
.rosterm__fbtn:hover { background: var(--ink-3); color: var(--paper); }
.rosterm__fbtn.is-active {
  background: color-mix(in srgb, var(--team) 16%, transparent);
  border-color: color-mix(in srgb, var(--team) 40%, transparent);
  color: var(--team);
}
.rosterm__selcount {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--paper-3);
  letter-spacing: 0.04em;
}

/* ===== Selected card state ===== */
.pcard.is-selected {
  background: rgba(34,211,161,0.08);
  box-shadow: 0 0 0 2px var(--team);
}
.pcard.is-selected.is-dirty { box-shadow: 0 0 0 2px var(--team), 0 0 0 4px rgba(34,211,161,0.25); }

/* ===== Player cards (draggable) ===== */
.pcard {
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  cursor: grab;
  user-select: none;
  transition: background 100ms ease, transform 80ms ease, box-shadow 100ms ease;
}
.pcard:hover { background: var(--ink-4); }
.pcard.is-dragging { opacity: 0.45; cursor: grabbing; }
.pcard.is-dirty {
  box-shadow: 0 0 0 2px var(--team);
}
.pcard__top {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
}
.pcard__name {
  font-family: var(--display); font-weight: 700; font-size: 13px;
  color: var(--paper);
}
.pcard__ovr {
  font-family: var(--display); font-weight: 900; font-size: 13px;
  color: var(--team);
}
.pcard__bot {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font-family: var(--mono); font-size: 10px; color: var(--paper-3);
}
.pcard__pos {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 16px; padding: 0 4px;
  border-radius: 3px;
  font-family: var(--display); font-weight: 800; font-size: 9px;
  letter-spacing: 0.04em;
  color: #fff;
}
.pcard__pos--c  { background: #2563EB; }
.pcard__pos--lw { background: #16A34A; }
.pcard__pos--rw { background: #DC2626; }
.pcard__pos--d  { background: #7C3AED; }
.pcard__pos--g  { background: #F59E0B; color: #2b1d05; }
.pcard__salary { color: var(--paper-dim); }
.pcard__inj {
  color: #F87171;
  background: rgba(244,63,94,0.12);
  padding: 1px 5px; border-radius: 3px;
  font-weight: 700;
}

@media (max-width: 980px) {
  .rosterm__zones { grid-template-columns: 1fr; }
  .rosterm__valstrip { grid-template-columns: repeat(4, 1fr); }
}

/* ===== Legacy slice-2 table (still referenced by the old code path) ===== */
.rosterm__table {
  width: 100%; border-collapse: collapse;
  font-size: 13px;
}
.rosterm__table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--ink-3);
  border-bottom: 1px solid var(--ink-4);
  padding: 10px 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--paper-dim);
  text-align: center;
}
.rosterm__table thead th.name { text-align: left; padding-left: 22px; min-width: 200px; }
.rosterm__table thead th.game small { display: block; margin-top: 2px; font-size: 9px; color: var(--paper-3); font-weight: 600; }
.rosterm__table tbody.group .grouphead td {
  padding: 14px 22px 8px;
  font-family: var(--mono); font-size: 10px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--team);
  border-top: 1px solid var(--ink-4);
  background: var(--ink-3);
}
.rosterm__table tbody.group .grouphead small {
  margin-left: 8px; color: var(--paper-3); font-weight: 500; letter-spacing: 0.04em;
}
.rosterm__table tbody tr:not(.grouphead) td {
  border-bottom: 1px solid var(--ink-4);
  padding: 8px;
  text-align: center;
}
.rosterm__table tbody tr:hover td { background: var(--ink-3); }
.rosterm__table td.name {
  text-align: left; padding: 10px 14px 10px 22px;
  color: var(--paper); font-family: var(--display); font-weight: 700;
}
.rosterm__table td.name small {
  display: block;
  margin-top: 2px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--paper-3); letter-spacing: 0.06em;
}
.rosterm__table td.meta { text-align: right; padding-right: 22px; }
.rosterm__table .inj {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: #F87171;
  background: rgba(244,63,94,0.1);
  padding: 2px 6px; border-radius: 3px;
}

/* Cells render as <button> now so they're keyboard-reachable and clickable.
   Strip the UA button chrome and lay them out like the original chips. */
.rosterm__table .cell,
.rosterm__legend .cell.legend {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border: 0; padding: 0;
  border-radius: 4px;
  font-family: var(--display); font-weight: 800; font-size: 11px;
  color: #fff;
  cursor: pointer;
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.rosterm__legend .cell.legend { cursor: default; margin-right: 4px; }
.rosterm__table .cell.dress   { background: #22D3A1; color: #052e22; }
.rosterm__table .cell.scratch { background: #F59E0B; color: #2b1d05; }
.rosterm__table .cell.farm    { background: #64748B; }
.rosterm__table .cell.unset   { background: var(--ink-4); color: var(--paper-3); }
.rosterm__legend .cell.legend.dress   { background: #22D3A1; color: #052e22; }
.rosterm__legend .cell.legend.scratch { background: #F59E0B; color: #2b1d05; }
.rosterm__legend .cell.legend.farm    { background: #64748B; }

.rosterm__table .cell:hover:not(:disabled) {
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.rosterm__table .cell:focus-visible {
  outline: 2px solid var(--team);
  outline-offset: 2px;
}
.rosterm__table .cell.is-dirty {
  box-shadow: 0 0 0 2px var(--team), 0 2px 6px rgba(0,0,0,0.3);
}
.rosterm__table .cell.is-disabled,
.rosterm__table .cell:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Player-name button (clicking it cycles all 10 slots for that player). */
.rosterm__table .name-btn {
  background: transparent; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
  display: block; width: 100%;
}
.rosterm__table .name-btn:hover { color: var(--team); }
.rosterm__table .name-btn:focus-visible {
  outline: 2px solid var(--team); outline-offset: 3px; border-radius: 3px;
}
.rosterm__table .name-btn small {
  display: block; margin-top: 2px;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--paper-3); letter-spacing: 0.06em;
}

/* Totals row in <tfoot> */
.rosterm__table tfoot .total {
  font-family: var(--mono); font-size: 11px; color: var(--paper-dim);
  border-top: 1px solid var(--ink-4);
  background: var(--ink-3);
  padding: 8px;
}
.rosterm__table tfoot .total strong {
  font-family: var(--display); font-size: 13px; color: var(--paper);
}
.rosterm__table tfoot .total.is-low {
  color: #F59E0B;
  background: rgba(245,158,11,0.08);
}
.rosterm__table tfoot .total.is-low strong { color: #F59E0B; }
.rosterm__table tfoot .totals-label {
  text-align: left; padding-left: 22px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--paper-3); letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink-3); border-top: 1px solid var(--ink-4);
}

/* Save button + footer error state */
.rosterm__save {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--team); color: #fff;
  padding: 10px 18px; border-radius: var(--r-sm);
  transition: background 120ms ease, transform 80ms ease;
}
.rosterm__save:hover:not(:disabled) { transform: translateY(-1px); }
.rosterm__save:disabled {
  background: var(--ink-4); color: var(--paper-3);
  cursor: not-allowed;
}
.rosterm__hint.is-error { color: #F87171; }

/* ============ Lines editor modal (linesm) ============
   Inline replacement for the old WebClientLines.php link. Lives in
   auth/lines_editor.js. Two-pane layout: pool of dressed players on the
   left, line groups (5v5/PP/PK/Goalies) on the right. */
.linesm { position: fixed; inset: 0; z-index: 1000; display: none; }
.linesm.is-open { display: block; }
body.linesm-open { overflow: hidden; }
.linesm__backdrop {
  position: absolute; inset: 0;
  background: rgba(8,8,9,0.78);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.linesm__panel {
  position: relative;
  max-width: 1440px; width: calc(100% - 48px);
  height: calc(100vh - 80px);
  margin: 40px auto 0;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), 0 24px 64px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.linesm__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ink-4);
}
.linesm__head h2 {
  margin: 0;
  font-family: var(--display); font-weight: 900; font-size: 20px;
  letter-spacing: -0.01em; color: var(--paper);
}
.linesm__sub {
  margin: 4px 0 0;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-3);
}
.linesm__close {
  background: transparent; border: 0; cursor: pointer;
  font-size: 28px; line-height: 1; color: var(--paper-3);
  padding: 2px 12px; border-radius: var(--r-sm);
}
.linesm__close:hover { color: var(--paper); background: var(--ink-3); }

/* warnings banner (same look as rosterm) */
/* Banner chrome is reserved permanently at a fixed 95px height (was 140 —
   reduced by ~1/3 per request) so toggling between "valid" and "has issues"
   never shifts the modal body. Header pinned at the top; issues list
   scrolls within. */
.linesm__warnings {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--ink-4);
  padding: 10px 22px 12px;
  height: 95px;
  overflow: hidden;
  background: rgba(34,211,161,0.05);   /* default backdrop for the valid state */
}
.linesm__warnings.is-active {
  background: rgba(245,158,11,0.06);   /* amber theme when issues present */
}

/* Valid-state placeholder — pumped up so the affirmative state reads at a
   glance: bigger circle, larger checkmark, larger message text. The reduced
   95px chrome easily holds it. */
.linesm__valid {
  flex: 1;
  display: flex;
  align-items: center; justify-content: center;
  gap: 14px;
  color: #5EE3B5;
  font-family: var(--display); font-weight: 700; font-size: 16px;
  letter-spacing: 0.02em;
}
.linesm__valid__icon {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(34, 211, 161, 0.18);
  border: 1.5px solid rgba(94, 227, 181, 0.55);
  color: #5EE3B5;
  font-family: var(--display); font-weight: 900; font-size: 20px;
  text-shadow: 0 0 8px rgba(94, 227, 181, 0.5);
  box-shadow: 0 0 16px rgba(34, 211, 161, 0.18);
}
.linesm__valid__msg {
  color: var(--paper);
  font-weight: 600;
}
.linesm__warnhead {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px;
  flex-shrink: 0;
}
.linesm__warntitle {
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #F59E0B;
}
.linesm__warncount {
  font-family: var(--mono); font-size: 10px; color: var(--paper-3);
  letter-spacing: 0.10em; text-transform: uppercase;
}
.linesm__issues {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
  overflow-y: auto;
  min-height: 0;     /* allow flex child to shrink so overflow kicks in */
  /* Lean scrollbar on Webkit so the banner doesn't dominate visually. */
  scrollbar-width: thin;
  scrollbar-color: var(--ink-4) transparent;
}
.linesm__issues::-webkit-scrollbar         { width: 6px; }
.linesm__issues::-webkit-scrollbar-track   { background: transparent; }
.linesm__issues::-webkit-scrollbar-thumb   { background: var(--ink-4); border-radius: 3px; }
.linesm__issue {
  display: grid; grid-template-columns: minmax(0, auto) 1fr; gap: 8px;
  padding: 4px 8px; border-radius: var(--r-sm); font-size: 12px; align-items: baseline;
}
.linesm__issue--error { background: rgba(244,63,94,0.08); border-left: 2px solid #F43F5E; }
.linesm__issue--warn  { background: rgba(245,158,11,0.07); border-left: 2px solid #F59E0B; }
.linesm__issuemsg { font-family: var(--display); font-weight: 700; color: var(--paper); }
.linesm__issuesuggest { font-family: var(--mono); font-size: 11px; color: var(--paper-dim); letter-spacing: 0.02em; }

/* ===== Roster-validity gate ===== */
.linesm__gate { display: none; }
.linesm__gate.is-active {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  background: rgba(244,63,94,0.10);
  border-bottom: 1px solid var(--ink-4);
  padding: 10px 22px;
}
.linesm__gate__msg {
  font-family: var(--mono); font-size: 12px; color: var(--paper);
  letter-spacing: 0.02em;
}
.linesm__gate__msg strong {
  font-family: var(--display); font-weight: 800; color: #F43F5E;
  margin-right: 6px;
}
.linesm__gate__btn {
  appearance: none; cursor: pointer;
  background: #F43F5E; color: #fff; border: 0;
  padding: 8px 14px; border-radius: var(--r-sm);
  font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
}
.linesm__gate__btn:hover { filter: brightness(1.1); }

/* Full-body gate panel: shown when the *current* day's roster is invalid
   (in addition to the persistent banner above). */
.linesm__gate__panel {
  grid-column: 1 / -1;
  margin: auto;
  max-width: 560px; text-align: center;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  padding: 32px 28px;
}
.linesm__gate__panel h3 {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: 900; font-size: 18px;
  color: #F43F5E; letter-spacing: 0.02em;
}
.linesm__gate__panel p {
  margin: 0 0 14px;
  font-size: 13px; color: var(--paper-dim);
  line-height: 1.5;
}
.linesm__gate__issues {
  list-style: none; padding: 0; margin: 0 0 16px;
  text-align: left;
  display: flex; flex-direction: column; gap: 4px;
}
.linesm__gate__issues li {
  background: rgba(244,63,94,0.08);
  border-left: 2px solid #F43F5E;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 12px;
  color: var(--paper);
}
.linesm__gate__more {
  font-family: var(--mono); font-size: 11px; color: var(--paper-3);
  margin-bottom: 16px;
}
.linesm__gate__btn--prominent {
  padding: 12px 22px; font-size: 13px;
}

/* ===== "Computer Lines" auto-fill button ===== */
.linesm__autofill {
  appearance: none; cursor: pointer;
  background: linear-gradient(135deg, var(--team), color-mix(in oklab, var(--team), #ffffff 15%));
  color: #fff; border: 0;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  display: inline-flex; flex-direction: column; align-items: center;
  line-height: 1.1;
  margin-right: 10px;
}
.linesm__autofill:hover:not(:disabled) { filter: brightness(1.08); }
.linesm__autofill:disabled { opacity: 0.4; cursor: not-allowed; }
.linesm__autofill__sub {
  font-family: var(--mono); font-weight: 600; font-size: 8px;
  letter-spacing: 0.18em; opacity: 0.85;
  margin-top: 2px;
}

/* game-day tabs + copy controls */
.linesm__gamestrip {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 22px;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-4);
  flex-wrap: wrap;
}
.linesm__tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.linesm__tab {
  appearance: none; background: var(--ink-2); border: 1px solid var(--ink-4);
  color: var(--paper-dim);
  padding: 6px 12px; border-radius: var(--r-sm);
  font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.06em; cursor: pointer;
  position: relative;
}
.linesm__tab small { display: block; margin-top: 2px; font-family: var(--mono); font-size: 9px; font-weight: 600; color: var(--paper-3); letter-spacing: 0.06em; text-transform: none; }
.linesm__tab:hover:not(:disabled) { background: var(--ink-3); color: var(--paper); }
.linesm__tab.is-active { background: color-mix(in srgb, var(--team) 16%, transparent); border-color: color-mix(in srgb, var(--team) 40%, transparent); color: var(--team); }
.linesm__tab.is-active small { color: rgba(255,255,255,0.75); }
.linesm__tab:disabled { opacity: 0.35; cursor: not-allowed; }
.linesm__tabdot {
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; margin-right: 4px; vertical-align: middle;
}
.linesm__tabdot--warn  { background: #F59E0B; }
.linesm__tabdot--error { background: #F43F5E; }
.linesm__tabdirty {
  display: inline-block; color: var(--team);
  font-size: 14px; line-height: 1; margin-right: 3px;
  transform: translateY(-1px);
}

.linesm__copy {
  display: flex; align-items: center; gap: 6px; margin-left: auto;
  font-family: var(--mono); font-size: 11px; color: var(--paper-3);
}
.linesm__copylabel strong { color: var(--paper); font-family: var(--display); font-weight: 800; }
.linesm__copybtn {
  appearance: none; border: 1px solid var(--ink-4); background: var(--ink-2);
  color: var(--paper-dim);
  padding: 5px 10px; border-radius: var(--r-sm);
  font-family: var(--display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.05em; text-transform: lowercase; cursor: pointer;
}
.linesm__copybtn:hover:not(:disabled) { background: var(--ink-3); color: var(--paper); }
.linesm__copybtn:disabled { opacity: 0.4; cursor: not-allowed; }
.linesm__copyselect {
  appearance: none; background: var(--ink-2); border: 1px solid var(--ink-4); color: var(--paper);
  padding: 5px 8px; border-radius: var(--r-sm);
  font-family: var(--mono); font-size: 11px;
}

/* filter strip */
.linesm__filters {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 22px;
  background: var(--ink);
  border-bottom: 1px solid var(--ink-4);
  flex-wrap: wrap;
}
.linesm__flabel {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-3);
  margin-right: 4px;
}
.linesm__fbtn {
  appearance: none; cursor: pointer;
  background: var(--ink-2); border: 1px solid var(--ink-4); color: var(--paper-dim);
  padding: 4px 10px; border-radius: var(--r-sm);
  font-family: var(--display); font-weight: 700; font-size: 11px;
  letter-spacing: 0.05em;
}
.linesm__fbtn:hover { background: var(--ink-3); color: var(--paper); }
.linesm__fbtn.is-active { background: color-mix(in srgb, var(--team) 16%, transparent); border-color: color-mix(in srgb, var(--team) 40%, transparent); color: var(--team); }

/* main body: two columns */
.linesm__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 2.1fr;
  gap: 16px;
  padding: 16px 22px;
  overflow: hidden;
  min-height: 0;
}
.linesm__loading, .linesm__empty {
  padding: 40px 22px; text-align: center;
  color: var(--paper-dim); font-size: 14px;
}
.linesm__empty p { margin: 0 0 10px; line-height: 1.5; }

.linesm__pool {
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 0;
}
.linesm__poolh {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--ink-4);
}
.linesm__poolh h3 {
  margin: 0; font-family: var(--display); font-weight: 900; font-size: 14px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--paper);
}
.linesm__poolcount {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-3);
}
.linesm__poolbody {
  flex: 1; overflow-y: auto;
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
  transition: background 120ms ease, box-shadow 120ms ease;
}
.linesm__poolbody.is-over {
  background: rgba(34,211,161,0.10);
  box-shadow: inset 0 0 0 2px var(--team);
}
.linesm__zoneempty, .linesm__zonenote {
  font-family: var(--mono); font-size: 11px; color: var(--paper-3);
  text-align: center; padding: 6px 0;
  pointer-events: none;
}

/* player card (same vocabulary as rosterm__pcard but distinct class for clarity) */
.lcard {
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  cursor: grab; user-select: none;
  transition: background 100ms ease, transform 80ms ease, box-shadow 100ms ease;
}
.lcard:hover { background: var(--ink-4); }
.lcard.is-dragging { opacity: 0.45; cursor: grabbing; }
.lcard__top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lcard__name { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--paper); }
.lcard__ovr { font-family: var(--display); font-weight: 900; font-size: 13px; color: var(--team); }
.lcard__bot {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font-family: var(--mono); font-size: 10px; color: var(--paper-3);
}
.lcard__pos {
  display: inline-grid; place-items: center;
  min-width: 22px; height: 16px; padding: 0 4px;
  border-radius: 3px;
  font-family: var(--display); font-weight: 800; font-size: 9px;
  letter-spacing: 0.04em; color: #fff;
}
.lcard__pos--c  { background: #2563EB; }
.lcard__pos--lw { background: #16A34A; }
.lcard__pos--rw { background: #DC2626; }
.lcard__pos--d  { background: #7C3AED; }
.lcard__pos--g  { background: #F59E0B; color: #2b1d05; }
.lcard__inj {
  color: #F87171; background: rgba(244,63,94,0.12);
  padding: 1px 5px; border-radius: 3px; font-weight: 700;
}

/* line groups (right column) */
/* Right column wraps the line groups + strategy + pull-goalie sections so
   they share one scroll container — users can flow through every settings
   block without juggling nested scrolls. */
.linesm__rightcol {
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  padding-right: 4px;   /* keep scrollbar from eating section border */
  min-height: 0;
}
.linesm__groups {
  display: flex; flex-direction: column; gap: 16px;
}

/* ===== Strategy by Score State panel ===== */
.linesm__section--strat .strat__hint {
  margin: -2px 0 12px;
  font-family: var(--mono); font-size: 11px; color: var(--paper-3);
  line-height: 1.5;
}
.strat__grid {
  display: flex; flex-direction: column; gap: 6px;
}
.strat__row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 110px minmax(0, 1.4fr);
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: linear-gradient(180deg, var(--gun-1) 0%, var(--gun-2) 100%);
  border: 1px solid var(--gun-edge);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.strat__head {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.strat__name {
  font-family: var(--display); font-weight: 900; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gun-text-hi);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.40);
}
.strat__desc {
  font-family: var(--mono); font-size: 10px;
  color: var(--gun-text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.strat__threshold {
  display: flex; align-items: center; justify-content: center;
}
.strat__threshold-na {
  font-family: var(--mono); font-size: 10px;
  color: var(--paper-3); letter-spacing: 0.08em; text-transform: uppercase;
}
.strat__weights {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; justify-content: flex-end;
}

/* ===== Pull Goalie panel ===== */
.pullg__grid {
  display: flex; flex-direction: column; gap: 6px;
}
.pullg__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 8px 12px;
  background: linear-gradient(180deg, var(--gun-1) 0%, var(--gun-2) 100%);
  border: 1px solid var(--gun-edge);
  border-radius: var(--r-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.pullg__label {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  color: var(--gun-text-hi);
  letter-spacing: 0.04em;
}
.pullg__stepper {
  display: flex; align-items: center; justify-content: flex-end;
}
.linesm__section {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: 12px 14px 14px;
}
.linesm__sectionh h3 {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: 900; font-size: 13px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--paper-dim);
}
/* Each "section" (5v5 / PP / PK / Goalies) lays out its peer lines in a grid.
 * 5v5 has 4 line cards → 2-col grid. PP/PK have 2 → 2-col grid. Goalies has
 * 1 → single full-width card. */
.linesm__linegrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}
.linesm__linegrid--G { grid-template-columns: minmax(0, 1fr); }

/* The line "card" itself — title bar + stacked slot rows. */
.linesm__linecard {
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.linesm__linecard__head {
  background: var(--ink-4);
  color: var(--paper-dim);
  padding: 6px 10px;
  font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
}
.linesm__linecard__slots {
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
}

/* ===== Intensity strip (Phy / DF / OF / Time%) — gunmetal theme =====
   Brushed-steel palette intentionally distinct from the surrounding
   dark UI so the controls read as physical, dial-like inputs. */
:root {
  --gun-1: #2E363B;   /* primary strip background, top */
  --gun-2: #232A2E;   /* primary strip background, bottom */
  --gun-3: #4A5560;   /* stepper face, top */
  --gun-4: #353E47;   /* stepper face, bottom */
  --gun-5: #5A6571;   /* stepper border idle */
  --gun-6: #7D8B98;   /* stepper border hover (cool steel) */
  --gun-edge: #3F4A50;/* strip top edge */
  --gun-text-dim: #9CA9B2;
  --gun-text:     #E8EFF3;
  --gun-text-hi:  #F4F8FB;
}
.lcard__int {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 8px 12px;
  background: linear-gradient(180deg, var(--gun-1) 0%, var(--gun-2) 100%);
  border-top: 1px solid var(--gun-edge);
  /* subtle inner highlight at the very top edge for the brushed look */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  font-family: var(--mono); font-size: 11px;
  color: var(--gun-text-dim);
}
.lcard__int + .lcard__int {
  border-top: 1px dashed rgba(125, 139, 152, 0.25);
}
.lcard__int__section {
  font-family: var(--display); font-weight: 900; font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gun-text-hi);
  min-width: 62px;
  /* lightly engraved label */
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
.lcard__int__field {
  display: inline-flex; align-items: center; gap: 4px;
}
.lcard__int__name {
  color: var(--gun-text-dim);
  margin-right: 2px;
  font-weight: 600;
}
.lcard__int__btn {
  width: 22px; height: 22px;
  border-radius: 4px;
  border: 1px solid var(--gun-5);
  background: linear-gradient(180deg, var(--gun-3) 0%, var(--gun-4) 100%);
  color: var(--gun-text-hi);
  font-family: var(--mono); font-weight: 700; font-size: 13px; line-height: 1;
  cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background 90ms ease, border-color 90ms ease, transform 60ms ease;
  /* faux 3D metal: top highlight + bottom shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 1px 1px rgba(0, 0, 0, 0.25);
}
.lcard__int__btn:hover:not([disabled]) {
  background: linear-gradient(180deg, #5A6571 0%, #424C56 100%);
  border-color: var(--gun-6);
  color: #FFF;
}
.lcard__int__btn:active:not([disabled]) {
  background: linear-gradient(180deg, #353E47 0%, #2A323A 100%);
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.35),
    inset 0 0 0 1px rgba(0, 0, 0, 0.18);
}
.lcard__int__btn[disabled] {
  opacity: 0.32;
  cursor: not-allowed;
  box-shadow: none;
}
.lcard__int__val {
  min-width: 24px;
  text-align: center;
  font-weight: 700; font-size: 12px;
  color: var(--gun-text-hi);
  /* LCD-style readout: pin to a dark recessed plate */
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 3px;
  padding: 1px 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.40);
}
.lcard__int__sum {
  font-family: var(--mono); font-weight: 700; font-size: 10px;
  padding: 2px 7px;
  border-radius: 3px;
  letter-spacing: 0.06em;
  border: 1px solid transparent;
}
.lcard__int__sum--ok {
  background: linear-gradient(180deg, #1B3B30 0%, #122E25 100%);
  color: #5EE3B5;
  border-color: #2A6B4F;
  text-shadow: 0 0 4px rgba(94, 227, 181, 0.4);
}
.lcard__int__sum--error {
  background: linear-gradient(180deg, #461A20 0%, #2E0F13 100%);
  color: #FCA5A5;
  border-color: #B0353F;
  box-shadow: 0 0 6px rgba(244, 63, 94, 0.35), 0 0 2px rgba(244, 63, 94, 0.55);
  animation: int-sum-pulse 1.8s ease-in-out infinite;
}
@keyframes int-sum-pulse {
  0%, 100% { box-shadow: 0 0 4px rgba(244, 63, 94, 0.30), 0 0 1px rgba(244, 63, 94, 0.45); }
  50%      { box-shadow: 0 0 10px rgba(244, 63, 94, 0.55), 0 0 3px rgba(244, 63, 94, 0.70); }
}

/* One slot row: label on the left, card on the right. */
.linesm__slot {
  display: grid;
  grid-template-columns: 44px 1fr;   /* was 34px — wider to seat the bolder label */
  align-items: stretch; gap: 8px;
  min-height: 32px;
  transition: background 100ms ease, box-shadow 100ms ease;
}
.linesm__slot.is-over {
  outline: 2px solid var(--team);
  outline-offset: -2px;
  border-radius: 4px;
  background: rgba(34,211,161,0.10);
}
/* Position chip on each slot row — same palette as the pool-card position
   chips so the same vocabulary reads everywhere (C blue, LW green, RW red,
   D purple, G amber). 'W' and 'F' are STHS wildcards (any winger / any
   forward) and use a neutral slate so the user knows they accept multiple
   positions. */
.linesm__slot__label {
  display: inline-grid; place-items: center;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 3px;
  color: var(--paper-dim);
  font-family: var(--display); font-weight: 900; font-size: 14px;  /* was 11px / weight 800 */
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.linesm__slot[data-pos="C"]  .linesm__slot__label { background: #2563EB; border-color: #1E40AF; color: #fff; }
.linesm__slot[data-pos="LW"] .linesm__slot__label { background: #16A34A; border-color: #15803D; color: #fff; }
.linesm__slot[data-pos="RW"] .linesm__slot__label { background: #DC2626; border-color: #991B1B; color: #fff; }
.linesm__slot[data-pos="D"]  .linesm__slot__label { background: #7C3AED; border-color: #5B21B6; color: #fff; }
.linesm__slot[data-pos="G"]  .linesm__slot__label { background: #F59E0B; border-color: #B45309; color: #2b1d05; text-shadow: none; }
.linesm__slot[data-pos="W"]  .linesm__slot__label { background: #64748B; border-color: #475569; color: #fff; }
.linesm__slot[data-pos="F"]  .linesm__slot__label { background: #64748B; border-color: #475569; color: #fff; }
.linesm__slot__placeholder {
  display: flex; align-items: center; padding: 0 10px;
  background: var(--ink-2);
  border: 1px dashed var(--ink-4);
  border-radius: 3px;
  color: var(--paper-3);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.linesm__slot__card {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto auto auto auto;
  align-items: center; gap: 8px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 3px;
  padding: 4px 8px;
  cursor: grab; user-select: none;
  font-family: var(--display); font-weight: 700; font-size: 13px;
}
.linesm__slot__card.is-dragging { opacity: 0.45; cursor: grabbing; }
.linesm__slot__name {
  color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.linesm__slot__nat {
  /* Use the same colour vocabulary as pool position badges. */
  display: inline-grid; place-items: center;
  min-width: 22px; height: 16px; padding: 0 5px;
  border-radius: 3px;
  font-family: var(--display); font-weight: 800; font-size: 9px;
  letter-spacing: 0.04em; color: #fff;
}
.linesm__slot__nats { display: inline-flex; gap: 3px; }
.linesm__slot__oop {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #FACC15; color: #1c1300;
  font-family: var(--display); font-weight: 900; font-size: 12px;
  line-height: 1;
  cursor: help;
  /* Glow: doubled-up box-shadow gives a soft halo. Animation pulses the
     halo so the warning stands out at a glance without flashing distractingly. */
  box-shadow:
    0 0 0 2px rgba(250, 204, 21, 0.45),
    0 0 8px  rgba(250, 204, 21, 0.85),
    0 0 14px rgba(250, 204, 21, 0.55);
  animation: linesm-oop-glow 1.6s ease-in-out infinite;
}
@keyframes linesm-oop-glow {
  0%, 100% {
    box-shadow:
      0 0 0 2px rgba(250, 204, 21, 0.35),
      0 0 6px  rgba(250, 204, 21, 0.6),
      0 0 10px rgba(250, 204, 21, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 3px rgba(250, 204, 21, 0.55),
      0 0 12px rgba(250, 204, 21, 0.95),
      0 0 22px rgba(250, 204, 21, 0.55);
  }
}
.linesm__slot__ovr {
  font-family: var(--display); font-weight: 900; font-size: 11px; color: var(--team);
  min-width: 22px; text-align: right;
}
.linesm__slot__x {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--paper-3); font-size: 16px; line-height: 1;
  padding: 0 4px; border-radius: 2px;
}
.linesm__slot__x:hover { color: #F87171; background: var(--ink-3); }

/* Slot severity states — tint the card itself, leave the label calm. */
.linesm__slot--oop .linesm__slot__card {
  border-color: #FACC15;
  background: rgba(250, 204, 21, 0.06);
}
.linesm__slot--orphan .linesm__slot__card {
  border-color: #F43F5E;
  background: rgba(244,63,94,0.10);
}
.linesm__slot__warn {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: #F43F5E; letter-spacing: 0.04em; text-transform: uppercase;
}

/* footer */
.linesm__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 22px;
  border-top: 1px solid var(--ink-4);
  background: var(--ink);
}
.linesm__hint {
  font-family: var(--mono); font-size: 11px; color: var(--paper-3);
  letter-spacing: 0.04em;
}
.linesm__hint.is-error { color: #F87171; }
.linesm__save {
  appearance: none; border: 0; cursor: pointer;
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--team); color: #fff;
  padding: 10px 18px; border-radius: var(--r-sm);
}
.linesm__save:hover:not(:disabled) { transform: translateY(-1px); }
.linesm__save:disabled { background: var(--ink-4); color: var(--paper-3); cursor: not-allowed; }

@media (max-width: 980px) {
  .linesm__body { grid-template-columns: 1fr; grid-template-rows: 220px 1fr; }
  .linesm__linegrid { grid-template-columns: minmax(0, 1fr); }
}

/* Editor-link state variants driven by auth.js. No "Signed in" badge — the
   absence of a hint is itself the affirmative signal. */
.editor-link.editor-link--guest .editor-link__btn { opacity: 0.85; }
.editor-link.editor-link--other-team .editor-link__btn { opacity: 0.55; pointer-events: auto; }

/* Editor-link affordance — just a button, not a full-width row. Multiple
   editor-links (Lines + Game Strategy on the Lines panel) sit side by side.
   The hint paragraph beneath only shows when it has text (i.e. when the
   user isn't signed in correctly). */
.editor-link {
  display: inline-flex; flex-direction: column;
  align-items: flex-start; gap: 4px;
  margin: 0 12px 12px 0;
  vertical-align: top;
}
.editor-link__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--team);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: transform 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}
.editor-link__btn:hover {
  transform: translateY(-1px);
  color: var(--ink);
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
}
.editor-link__arrow { font-size: 14px; opacity: 0.85; }
.editor-link__hint {
  margin: 0;
  font-size: 11px; color: var(--paper-3);
  letter-spacing: 0.01em;
  line-height: 1.4;
}
/* Collapse the hint when empty (i.e. when signed in as the right team). */
.editor-link__hint:empty { display: none; }

/* ====================================================================
   Mobile nav — hamburger button shown ≤1100px, opens a right-side drawer
   that overlays the page. Backed by JS in auth.js that toggles the
   `.nav-open` class on <body>.
   ==================================================================== */

/* Hamburger button — hidden on desktop, shown on mobile breakpoint. */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  color: var(--paper);
  cursor: pointer;
  padding: 8px 10px;
  width: 40px; height: 40px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 1600;
  position: relative;
}
.menu-toggle:hover { background: var(--ink-3); }
.menu-toggle:focus-visible { outline: 2px solid var(--team, #2563eb); outline-offset: 2px; }
.menu-toggle__bar {
  display: block;
  width: 20px; height: 2px;
  background: var(--paper);
  border-radius: 1px;
  transition: transform 200ms ease, opacity 160ms ease;
}
/* Animate to an X when the menu is open. */
body.nav-open .menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .menu-toggle__bar:nth-child(2) { opacity: 0; }
body.nav-open .menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Close button — only visible inside the drawer on mobile. */
.nav__close {
  display: none;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 50%;
  color: var(--paper);
  font-size: 22px; line-height: 1;
  cursor: pointer;
  width: 40px; height: 40px;
  padding: 0;
  margin: 0 14px 8px auto;     /* right-aligned, with breathing room */
  flex-shrink: 0;
}
.nav__close:hover { color: var(--paper); background: var(--ink-4); }

@media (max-width: 1100px) {
  .header-utils .search { display: none; }
  .menu-toggle { display: flex; }

  /* iOS Safari trap: ANY of these properties on an ancestor create a
     containing block for `position: fixed` descendants:
       - `transform` (any value other than `none`)
       - `filter`, `backdrop-filter` (any value other than `none`)
       - `perspective`, `will-change: transform`, `contain: paint`
     `.site-header` had `backdrop-filter: blur(...)` for the frosted
     glass — that meant the drawer's `position: fixed` was resolving
     against the header's ~70px box instead of the viewport, so the
     drawer looked like a tiny floating panel near the top.
       Three fixes, layered:
       1. auth.js detaches the drawer from <header> at runtime so its
          containing block is always <body> → viewport. (Primary.)
       2. Below, we drop `backdrop-filter` and un-stick the header on
          mobile, so even pre-JS the layout is safe. (Belt + suspenders.)
       3. The drawer's slide is animated via `right` (not `transform`)
          so it doesn't create its own containing block either. */
  .site-header {
    position: static;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--ink);   /* solid, since we lost the blur */
  }

  /* Mobile nav as a FULL-VIEWPORT overlay (not an off-canvas drawer).
     This is deliberately the simplest possible layout that survives any
     iOS containing-block quirk:
       - `width: 100vw` and `height: 100dvh` use viewport units, so they
         ignore the containing block's size entirely. Even if some
         ancestor's `transform/filter/backdrop-filter` constrained the
         containing block to a tiny box, the drawer would still measure
         a full viewport in each dimension.
       - `inset: 0` then anchors it at the top-left of whatever
         containing block it ended up in. Combined with the JS that
         detaches it to <body>, the containing block IS the viewport.
       - No slide animation; just display:none / display:flex. Removes
         any chance the user catches it mid-transition with weird
         visuals on slower iPhones. */
  .nav {
    display: none                                                       !important;
    position: fixed                                                     !important;
    top: 0                                                              !important;
    left: 0                                                             !important;
    right: 0                                                            !important;
    bottom: 0                                                           !important;
    width: 100vw                                                        !important;
    height: 100vh                                                       !important;
    height: 100dvh                                                      !important;
    margin: 0                                                           !important;
    background: var(--ink)                                            !important;
    flex-direction: column                                              !important;
    align-items: stretch                                                !important;
    gap: 0                                                              !important;
    padding: max(12px, env(safe-area-inset-top)) env(safe-area-inset-right) max(28px, env(safe-area-inset-bottom)) 0   !important;
    overflow-y: auto                                                    !important;
    overflow-x: hidden                                                  !important;
    -webkit-overflow-scrolling: touch;
    z-index: 2000                                                       !important;
    transform: none                                                     !important;
    flex: 0 0 auto                                                      !important;
  }
  body.nav-open .nav { display: flex !important; }
  body.nav-open      { overflow: hidden; }

  .nav__close { display: block; }

  /* Stack nav items vertically; full-width touch targets. */
  .nav__item {
    padding: 14px 22px;
    border-bottom: 1px solid var(--ink-4);
    border-radius: 0;
    width: 100%;
    text-align: left;
    font-size: 15px;
  }
  .nav__item.is-active::after {
    /* Move the underline accent to the left edge so it doesn't get cut off. */
    left: 0; right: auto; top: 0; bottom: 0;
    width: 3px; height: auto;
  }
  .nav__item--has-menu::after {
    /* Push the caret to the right side of each menu trigger. */
    margin-left: auto;
    float: right;
    font-size: 13px;
  }

  /* Slag Heap — keep distinct treatment, but as a full-width pill. */
  .nav__item--slag {
    margin: 10px 14px 4px;
    padding: 12px 18px;
    border-radius: var(--r-sm);
    border: 1px solid rgba(96, 132, 168, 0.32);
  }
  .nav__item--slag::before { display: none; }

  /* Dropdowns open inline (hover doesn't make sense on touch). */
  .dd { display: block; }
  .dd__menu {
    position: static;
    display: block;
    box-shadow: none;
    border: 0;
    background: var(--ink-2);
    padding: 4px 0;
    margin: 0;
    min-width: 0;
    border-radius: 0;
    border-bottom: 1px solid var(--ink-4);
  }
  .dd__menu a {
    padding: 10px 28px;
    border-bottom: 0;
    font-size: 13px;
  }
  .dd__menu a:hover { background: var(--ink-3); }
  .dd__group {
    padding: 10px 22px 4px;
    font-family: var(--mono); font-size: 9px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--paper-3);
  }
}

/* ============ MAIN GRID ============ */
.page {
  max-width: 1440px;
  margin: 0 auto;
  padding: 28px 24px 80px;
}
@media (max-width: 768px) { .page { padding: 16px 12px 60px; } }

/* ============ HERO STRIP — ticker of recent games ============ */
.scoreticker {
  margin-bottom: 32px;
  border-top: 1px solid var(--ink-4);
  border-bottom: 1px solid var(--ink-4);
  padding: 14px 0;
  position: relative;
  overflow: hidden;
}
.scoreticker::before, .scoreticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px;
  z-index: 2; pointer-events: none;
}
.scoreticker::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.scoreticker::after { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }

.scoreticker__label {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  z-index: 3;
  background: var(--ink); padding: 4px 12px 4px 0;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--hot);
}
.scoreticker__label::before {
  content: '●'; margin-right: 6px;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: 0.3 } }

.scoreticker__rail {
  display: flex; gap: 32px; padding-left: 110px;
  font-family: var(--mono); font-size: 13px;
  white-space: nowrap;
  animation: scroll 60s linear infinite;
}
.scoreticker__rail:hover { animation-play-state: paused; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.tick {
  display: inline-flex; align-items: center; gap: 12px;
}
/* When the ticker item is a link (game sheet exists for that game), inherit
   colors and keep the inline-flex layout so it sits identical to the <div>
   form. Tiny hover affordance so users learn the items are clickable. */
a.tick { color: inherit; text-decoration: none; padding: 4px 8px;
         border-radius: var(--r-sm); transition: background 120ms ease; }
a.tick:hover { background: var(--ink-3); }
.tick__team { display: inline-flex; align-items: center; gap: 6px; }
.tick__abbre { font-weight: 700; color: var(--paper); }
.tick__score { font-weight: 700; color: var(--paper); padding: 0 4px; }
.tick__score.is-loser { color: var(--paper-3); }
.tick__sep { color: var(--paper-3); }
.tick__ot { font-size: 9px; padding: 2px 5px; background: var(--ink-3); border-radius: 3px; color: var(--paper-dim); }
.tick__divider { color: var(--ink-4); margin: 0 8px; }

/* ============ HERO ============ */
.hero {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }

.hero__main {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  padding: 40px;
  overflow: hidden;
  min-height: 380px;
}

/* Big team color blob in the corner */
.hero__main::before {
  content: '';
  position: absolute; top: -100px; right: -100px;
  width: 500px; height: 500px;
  background: radial-gradient(circle, var(--team) 0%, transparent 65%);
  opacity: 0.18;
  pointer-events: none;
}

.hero__eyebrow {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--team);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.hero__eyebrow::before {
  content: ''; width: 24px; height: 2px;
  background: var(--team);
}

.hero__headline {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(36px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 20px;
}
.hero__headline em { font-style: normal; color: var(--team); letter-spacing: -0.015em; }

.hero__deck {
  font-size: 17px; line-height: 1.5;
  color: var(--paper-dim);
  max-width: 560px;
  margin-bottom: 32px;
}

.hero__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--ink-4);
  padding-top: 20px;
  position: relative;
}
@media (max-width: 600px) { .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

.hero__stat label {
  display: block;
  font-family: var(--mono);
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 6px;
}
.hero__stat .val {
  font-family: var(--display);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.hero__stat .sub { font-size: 12px; color: var(--paper-dim); margin-top: 2px; }

/* Hero side: news strip */
.hero__side {
  display: flex; flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.section-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ink-4);
  display: flex; align-items: center; justify-content: space-between;
}
.section-head h3 {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper);
  display: flex; align-items: center; gap: 10px;
}
.section-head h3::before {
  content: ''; width: 6px; height: 6px;
  background: var(--team); border-radius: 50%;
}
.section-head a {
  font-family: var(--mono);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--paper-dim);
}
.section-head a::after { content: ' →'; transition: transform 120ms ease; display: inline-block; }
.section-head a:hover { color: var(--team); }
.section-head a:hover::after { transform: translateX(2px); }

.news-list { flex: 1; }
.news-item {
  padding: 16px 20px;
  border-bottom: 1px solid var(--ink-4);
  display: block;
  transition: background 120ms ease;
}
.news-item:hover { background: var(--ink-3); }
.news-item:last-child { border-bottom: 0; }
.news-item__time {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 4px;
}
.news-item__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.news-item__excerpt {
  font-size: 13px; color: var(--paper-dim); margin-top: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============ SECTION HEADERS (between modules) ============ */
.module-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 56px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink-4);
}
.module-head h2 {
  font-family: var(--display);
  font-weight: 900;
  font-size: 32px;
  letter-spacing: -0.02em;
}
.module-head h2 em { font-style: normal; color: var(--team); letter-spacing: 0.01em; }
.module-head__num {
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--paper-3);
}

/* ============ GAME CARDS ROW ============ */
.gamecards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .gamecards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px)  { .gamecards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .gamecards { grid-template-columns: 1fr; } }

.gamecard {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: border-color 120ms ease, transform 120ms ease;
}
.gamecard:hover { border-color: var(--paper-3); transform: translateY(-2px); }

.gamecard__head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  color: var(--paper-3); text-transform: uppercase;
  margin-bottom: 14px;
}
.gamecard__head .final { color: var(--paper-dim); font-weight: 700; }
.gamecard__head .ot { color: var(--signal); }

.gamecard__row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}
.gamecard__row.is-loser .gamecard__abbre, .gamecard__row.is-loser .gamecard__name, .gamecard__row.is-loser .gamecard__score { color: var(--paper-3); }

.gamecard__chip {
  width: 32px; height: 32px; border-radius: 6px;
  font-family: var(--display); font-weight: 900; font-size: 11px;
  letter-spacing: -0.02em;
  display: grid; place-items: center;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
.gamecard__name {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.gamecard__abbre {
  font-family: var(--mono); font-size: 10px; color: var(--paper-3);
  font-weight: 600; letter-spacing: 0.08em;
}
.gamecard__score {
  font-family: var(--display); font-weight: 900; font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--paper);
}

.gamecard__upcoming {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  padding: 22px 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-3);
}
.gamecard__vs {
  font-family: var(--display); font-weight: 900; font-size: 20px;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--paper-2);
}

/* ============ TWO-COL CONTENT (leaders + standings) ============ */
.two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  margin-top: 24px;
  align-items: start;          /* each column sizes to its own content */
}
@media (max-width: 1000px) { .two-col { grid-template-columns: 1fr; } }

/* Leaders board */
.leaders {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.leaders__tabs {
  display: flex;
  border-bottom: 1px solid var(--ink-4);
}
.leaders__tab {
  flex: 1;
  padding: 14px 12px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-3);
  border-right: 1px solid var(--ink-4);
  transition: color 120ms ease, background 120ms ease;
  position: relative;
}
.leaders__tab:last-child { border-right: 0; }
.leaders__tab:hover { color: var(--paper-dim); }
.leaders__tab.is-active {
  color: var(--paper); background: var(--ink-3);
}
.leaders__tab.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--team);
}

.leaders__panel { display: none; }
.leaders__panel.is-active { display: block; }

/* Conference-switcher panels mirror the leaders tab/panel pattern so the
   standings only show one conference at a time. Without this, the
   side-by-side leaders + standings grid stretched the row to fit ALL
   teams stacked, making the leaders column run all the way down the
   page beside it. */
.standings__panel { display: none; }
.standings__panel.is-active { display: block; }

/* Conference tabs — same look as the leaders tabs but use a distinct
   class (.conf-tab) so the leaders-tab click handler in js/home.js
   doesn't fire when a conference is picked (it would have wiped every
   leaders panel because there's no matching data-tab value). */
.conf-tabs {
  display: flex;
  border-bottom: 1px solid var(--ink-4);
}
.conf-tab {
  flex: 1;
  padding: 14px 12px;
  font-family: var(--mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-3);
  border: 0;
  border-right: 1px solid var(--ink-4);
  background: transparent;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
  position: relative;
}
.conf-tab:last-child { border-right: 0; }
.conf-tab:hover { color: var(--paper-dim); }
.conf-tab.is-active {
  color: var(--paper); background: var(--ink-3);
}
.conf-tab.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--team);
}

.leaders__row {
  display: grid;
  grid-template-columns: 28px 32px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ink-4);
  transition: background 120ms ease;
}
.leaders__row:last-child { border-bottom: 0; }
.leaders__row:hover { background: var(--ink-3); }

.leaders__rank {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  color: var(--paper-3);
  text-align: right;
}
.leaders__row.is-top .leaders__rank { color: var(--team); }

.leaders__chip {
  width: 28px; height: 28px; border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-size: 9px;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  letter-spacing: -0.01em;
}

.leaders__name {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 8px;
}
.leaders__name small {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--paper-3); letter-spacing: 0.06em;
}

.leaders__pos {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--paper-3); letter-spacing: 0.06em;
}

.leaders__stat {
  font-family: var(--mono); font-weight: 700;
  font-size: 14px; color: var(--paper);
  text-align: right;
}
.leaders__stat .breakdown {
  display: block;
  font-size: 10px; color: var(--paper-3); font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.05em;
}

/* Standings */
.standings {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.standings__group {
  border-bottom: 1px solid var(--ink-4);
}
.standings__group:last-child { border-bottom: 0; }

.standings__grouphead {
  padding: 12px 20px;
  background: var(--ink-3);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--paper-dim);
  display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--ink-4);
}
.standings__grouphead small { color: var(--paper-3); font-weight: 500; }

.standings__row {
  display: grid;
  /* 8 columns: pos | chip | name | GP | W | L | OTL | PTS — must match
     the header grid in build_home.py (was 7 cols, which is why every
     PTS column showed the OTL value instead of the real points). */
  grid-template-columns: 22px 32px 1fr 36px 36px 36px 36px 50px;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--ink-4);
  transition: background 120ms ease;
  font-family: var(--mono); font-size: 12px;
}
.standings__row:last-child { border-bottom: 0; }
.standings__row:hover { background: var(--ink-3); }
.standings__row.is-cutoff { border-bottom: 2px solid var(--team); }

.standings__row .pos {
  color: var(--paper-3); text-align: right; font-weight: 700;
}
.standings__row .name {
  font-family: var(--body); color: var(--paper);
  font-weight: 600; font-size: 13px;
  letter-spacing: -0.005em;
}
.standings__row .num { text-align: right; color: var(--paper-dim); }
.standings__row .pts { text-align: right; color: var(--paper); font-weight: 700; font-size: 14px; }
.standings__row .streak {
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  text-align: center;
  font-weight: 700; letter-spacing: 0.05em;
}
.streak.win  { color: var(--good); background: rgba(34,211,161,0.1); }
.streak.loss { color: var(--bad);  background: rgba(244,63,94,0.1); }
.streak.otl  { color: var(--signal); background: rgba(250,204,21,0.1); }

/* Power ranking strip */
.powerrank {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
  position: relative;          /* anchor the scroll buttons */
}

/* Scroll buttons over the rail — visible affordance for users without
   horizontal-scrolling mice or trackpads. Hidden via opacity (not
   display:none) so layout doesn't shift, and faded out at the rail edges. */
.powerrank__nav {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 5;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink-4);
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.85);   /* near-opaque so card edges don't peek through */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--paper);
  font-family: var(--display);
  font-size: 22px; font-weight: 900; line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: opacity 160ms ease, transform 120ms ease, background 120ms ease;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
}
.powerrank__nav:hover { background: var(--ink-3); transform: translateY(-50%) scale(1.08); }
.powerrank__nav--prev { left: 10px; }
.powerrank__nav--next { right: 10px; }
.powerrank__nav.is-disabled {
  opacity: 0;
  pointer-events: none;
}
.powerrank__head { padding: 16px 20px; border-bottom: 1px solid var(--ink-4); }
.powerrank__head h3 {
  font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: -0.02em;
}
.powerrank__head h3 em { font-style: normal; color: var(--team); letter-spacing: 0.01em; }
.powerrank__head p { font-size: 13px; color: var(--paper-dim); margin-top: 4px; }

.powerrank__rail {
  display: flex; overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.powerrank__rail::-webkit-scrollbar { height: 6px; }
.powerrank__rail::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 3px; }

.prteam {
  flex: 0 0 180px;
  scroll-snap-align: start;
  padding: 20px 18px;
  border-right: 1px solid var(--ink-4);
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  transition: background 120ms ease;
}
.prteam:hover { background: var(--ink-3); }

/* Team-logo chip — circular, tinted in the team's color so a rail of 22
   teams reads as related-but-varied rather than a rainbow of solid hits.
   The numbered .prteam__pip sits in the bottom-right corner so the
   absolute rank stays visible even after you've scrolled past the
   leading group. */
.prteam__logo {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--prc, var(--paper-3)) 22%, var(--ink-2));
  border: 2px solid color-mix(in srgb, var(--prc, var(--paper-3)) 50%, transparent);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.prteam__logo img {
  width: 42px; height: 42px;
  object-fit: contain;
  display: block;
}
.prteam__pip {
  position: absolute; right: -6px; bottom: -4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--prc, var(--paper-3));
  color: #fff;
  font-family: var(--display);
  font-size: 12px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink-2);
}

.prteam__name {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em;
  margin-top: 4px;
}
.prteam__rec {
  font-family: var(--mono); font-size: 11px; color: var(--paper-dim);
  font-weight: 500;
}
.prteam__change {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.prteam__change.up    { color: var(--good); }
.prteam__change.down  { color: var(--bad); }
.prteam__change.flat  { color: var(--paper-3); }


/* ============ FOOTER ============ */
.footer {
  margin-top: 96px;
  padding: 48px 24px 32px;
  border-top: 1px solid var(--ink-4);
  background: var(--ink-2);
}
.footer__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
}
@media (max-width: 768px) { .footer__inner { grid-template-columns: 1fr; gap: 32px; } }

.footer__about h4 {
  font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.footer__about p { font-size: 13px; color: var(--paper-dim); max-width: 320px; }

.footer__col h5 {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-3); margin-bottom: 12px;
}
.footer__col a { display: block; padding: 4px 0; font-size: 13px; color: var(--paper-dim); }
.footer__col a:hover { color: var(--team); }

.footer__bottom {
  max-width: 1440px; margin: 32px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--ink-4);
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; color: var(--paper-3);
  letter-spacing: 0.05em;
}

/* ============ TEAM PAGE ============ */
.team-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-4);
  background: var(--ink-2);
  padding: 48px 40px;
  margin-bottom: 32px;
  min-height: 280px;
}
.team-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, var(--team) 0%, transparent 65%),
    radial-gradient(circle at 80% 50%, var(--team-2) 0%, transparent 70%);
  opacity: 0.16;
  pointer-events: none;
}
.team-hero::after {
  content: '';
  position: absolute; right: -200px; top: -180px;
  width: 600px; height: 600px;
  background: radial-gradient(circle, var(--team) 0%, transparent 60%);
  opacity: 0.18;
  pointer-events: none;
}

.team-hero__inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 32px;
  align-items: center;
}
@media (max-width: 900px) {
  .team-hero { padding: 32px 24px; }
  .team-hero__inner { grid-template-columns: 1fr; gap: 24px; }
}

.team-hero__crest {
  width: 140px; height: 140px;
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
  /* Letter-fallback styles (when no logo image is provided) */
  font-family: var(--display); font-weight: 900;
  font-size: 68px; letter-spacing: -0.04em;
  color: #fff;
  text-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
/* When a letter is shown alone, give it the team color box treatment */
.team-hero__crest:not(:has(img)) {
  background: var(--team);
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.2);
}
/* When a logo image is shown, give it more room and drop the box treatment.
   Logos vary in aspect ratio (some are square, some wide), so let the container
   adapt to the logo's natural proportions while keeping a consistent visual height. */
.team-hero__crest:has(img) {
  width: auto;
  min-width: 160px;
  max-width: 240px;
  height: 160px;
}
.team-hero__crest img {
  display: block;
  max-width: 240px;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.5));
}

.team-hero__id {
  display: flex; flex-direction: column; gap: 4px;
}
.team-hero__div {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-dim);
  display: flex; align-items: center; gap: 8px;
}
.team-hero__div::before {
  content: ''; width: 18px; height: 1px; background: var(--team);
}
.team-hero__name {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(48px, 6vw, 88px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 4px 0;
  text-transform: uppercase;
}
.team-hero__city {
  font-family: var(--body); font-style: italic; font-weight: 500;
  font-size: 21px; letter-spacing: -0.005em;
  color: var(--paper-dim);
}
.team-hero__meta {
  margin-top: 16px;
  display: flex; gap: 20px;
  font-size: 13px; color: var(--paper-dim);
}
.team-hero__meta b { color: var(--paper); font-weight: 600; }
.team-hero__meta > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }

/* Season selector dropdown that sits inline with GM / Power Rank / Streak. */
.team-hero__season { gap: 8px !important; }
.team-hero__season label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--paper-3);
}
.team-hero__season-sel {
  appearance: none; -webkit-appearance: none;
  background: var(--ink-2); color: var(--paper);
  border: 1px solid var(--ink-4); border-radius: var(--r-sm);
  padding: 6px 28px 6px 10px;
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  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 fill='%23B8B5AC' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.team-hero__season-sel:hover  { border-color: var(--paper-3); background-color: var(--ink-3); }
.team-hero__season-sel:focus  { outline: none; border-color: var(--team, var(--paper)); }

/* "Viewing the 2024-25 archive" banner under the team name. Subtle, but
   makes it impossible to misread an old season as live data. */
.team-hero__archive-note {
  margin-top: 10px;
  padding: 8px 12px;
  background: rgba(245, 158, 11, 0.08);          /* warm amber tint */
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: var(--r-sm);
  font-size: 12px; color: #F59E0B;
  letter-spacing: 0.02em;
  display: inline-block;
}
.team-hero__archive-note b { color: var(--paper); font-weight: 700; }
.team-hero__archive-note[hidden] { display: none; }

.team-hero__record {
  text-align: right;
}
@media (max-width: 900px) { .team-hero__record { text-align: left; } }

.team-hero__rec-big {
  font-family: var(--display); font-weight: 900;
  font-size: 56px; letter-spacing: -0.02em;
  line-height: 1; color: var(--paper);
}
.team-hero__rec-label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-3);
  margin-top: 4px;
}
.team-hero__pts {
  margin-top: 16px;
  display: flex; gap: 20px; justify-content: flex-end;
}
@media (max-width: 900px) { .team-hero__pts { justify-content: flex-start; } }
.team-hero__pts > div { text-align: center; }
.team-hero__pts label {
  display: block;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--paper-3); margin-bottom: 2px;
}
.team-hero__pts .v {
  font-family: var(--display); font-weight: 700; font-size: 22px;
  letter-spacing: -0.02em; color: var(--paper);
}

/* Team page tabs */
.tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid var(--ink-4);
  margin-bottom: 24px;
  overflow-x: auto;
}
.tabs__btn {
  padding: 14px 20px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--paper-3);
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.tabs__btn:hover { color: var(--paper-dim); }
.tabs__btn.is-active {
  color: var(--paper);
  border-bottom-color: var(--team);
}
.tabs__panel { display: none; }
.tabs__panel.is-active { display: block; }

/* Roster table */
.roster {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.roster table { width: 100%; border-collapse: collapse; }
.roster thead th {
  text-align: left;
  padding: 14px 12px;
  background: var(--ink-3);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-dim);
  border-bottom: 1px solid var(--ink-4);
  cursor: pointer;
  user-select: none;
}
.roster thead th:hover { color: var(--paper); }
.roster thead th.is-numeric { text-align: right; }
.roster thead th.sort-asc::after { content: ' ▲'; font-size: 8px; color: var(--team); }
.roster thead th.sort-desc::after { content: ' ▼'; font-size: 8px; color: var(--team); }
.roster tbody td {
  padding: 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--ink-4);
}
.roster tbody td.is-numeric { text-align: right; font-family: var(--mono); }
.roster tbody tr:last-child td { border-bottom: 0; }
.roster tbody tr { transition: background 120ms ease; }
.roster tbody tr:hover { background: var(--ink-3); }
.roster .player-name {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--paper);
}
.roster .player-name a { color: var(--paper); }
.roster .player-name a:hover { color: var(--team); }
.roster .player-name small {
  display: block;
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  color: var(--paper-3); margin-top: 2px;
  letter-spacing: 0.05em;
}
.roster .pos-badge {
  display: inline-block;
  padding: 2px 8px; border-radius: 3px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--ink-3); color: var(--paper-dim);
}
.roster .ovr {
  display: inline-block;
  width: 36px; padding: 4px 0;
  border-radius: 4px;
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  text-align: center;
}
.roster .ovr.elite  { background: rgba(255,76,0,0.18); color: #FF8550; }
.roster .ovr.high   { background: rgba(34,211,161,0.12); color: var(--good); }
.roster .ovr.mid    { background: rgba(250,204,21,0.10); color: var(--signal); }
.roster .ovr.low    { background: var(--ink-3); color: var(--paper-dim); }

/* Inline-ratings roster layout (Phase 8: roster page rework). Each
   skater row carries all 17 individual ratings as numeric cells; goalies
   get their own 15-column table. The table is wide — wrapping it in
   roster--inline gives a horizontal scroll on narrow screens.
   ----------------------------------------------------------------- */
.roster--inline {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.roster-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
}
.roster-table th, .roster-table td {
  padding: 6px 6px;
  border-bottom: 1px solid var(--ink-3);
  text-align: left;
  white-space: nowrap;
}
.roster-table th {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--paper-dim);
  background: var(--ink-2);
  position: sticky; top: 0;
  border-bottom: 1px solid var(--ink-4);
}
.roster-table tbody tr:hover td { background: rgba(255,255,255,0.02); }
.roster-table td.is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.roster-table td.rt {
  text-align: center;
  width: 32px; padding: 6px 4px;
  font-size: 12px; font-weight: 600;
}
/* Rating colour chips inside .rt cells — same palette as .ovr but
   smaller, since they appear 15-17× per row. */
.roster-table td.rt--elite { color: #FF8550; }
.roster-table td.rt--high  { color: var(--good); }
.roster-table td.rt--mid   { color: var(--signal); }
.roster-table td.rt--low   { color: var(--paper-3); }

.roster-table .player-name { font-family: var(--body); white-space: normal; min-width: 200px; }
.roster-table .player-name .player-link { color: var(--paper); font-weight: 700; text-decoration: none; }
.roster-table .player-name .player-link:hover { color: var(--team); text-decoration: underline; }
.roster-table .player-name small {
  display: block; margin-top: 2px;
  color: var(--paper-3); font-size: 11px; font-family: var(--mono);
}

/* "— SCRATCH —" boundary row inside the Pro table. Spans full width,
   keeps the divider visible across position filters. */
.roster-table .roster-divider td {
  background: var(--ink-2);
  text-align: center;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--paper-3); letter-spacing: 0.2em;
  padding: 8px 0;
  border-top: 1px solid var(--ink-4);
  border-bottom: 1px solid var(--ink-4);
}

.roster-subhead {
  font-family: var(--display); font-size: 14px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-dim);
  margin: 12px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink-4);
}

/* roster-hidden gate (from position filter) keeps existing semantics. */
.roster-table .roster-hidden { display: none; }

/* Lines panel */
.lines {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .lines { grid-template-columns: 1fr; } }

.line-block {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: 16px 20px;
}
.line-block h4 {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.line-block h4 .pill {
  background: var(--team); color: #fff;
  padding: 3px 7px; border-radius: 3px;
  font-size: 9px;
}
.line-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--ink-4);
}
.line-row.def { grid-template-columns: repeat(2, 1fr); }
.line-row.duo { grid-template-columns: repeat(2, 1fr); }
.line-slot {
  display: flex; flex-direction: column;
}
.line-slot label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; color: var(--paper-3); text-transform: uppercase;
  margin-bottom: 3px;
  align-self: flex-start;       /* pill width = content, not column */
}
/* Position-coloured label pills — same palette as the pool / slot chips
   so the same vocabulary reads everywhere (C blue, LW green, RW red,
   D purple, G amber, W/F slate for wildcards). */
.line-slot[data-pos] label {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 3px;
  color: #fff;
  letter-spacing: 0.06em;
}
.line-slot[data-pos="C"]  label { background: #2563EB; }
.line-slot[data-pos="LW"] label { background: #16A34A; }
.line-slot[data-pos="RW"] label { background: #DC2626; }
.line-slot[data-pos="D"]  label { background: #7C3AED; }
.line-slot[data-pos="G"]  label { background: #F59E0B; color: #2b1d05; }
.line-slot[data-pos="W"]  label,
.line-slot[data-pos="F"]  label { background: #64748B; }
.line-slot .name {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  letter-spacing: -0.005em; color: var(--paper);
}

/* Game schedule list (team page) */
.tschedule {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 800px) { .tschedule { grid-template-columns: 1fr; } }

.tsch-block {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tsch-block h4 {
  padding: 14px 16px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper); border-bottom: 1px solid var(--ink-4);
  display: flex; align-items: center; gap: 8px;
}
.tsch-block h4::before {
  content: ''; width: 6px; height: 6px; background: var(--team); border-radius: 50%;
}

.tgame {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--ink-4);
  font-size: 13px;
  transition: background 120ms ease;
}
.tgame:last-child { border-bottom: 0; }
.tgame:hover { background: var(--ink-3); }
/* When .tgame is rendered as <a> (game sheet exists), keep it block-level
   and remove link decoration so it looks identical to the <div> form. We
   add a "›" indicator on the right edge so users can see at a glance
   which rows are clickable (the upcoming-game rows are non-link <div>s
   and don't get the chevron). */
a.tgame {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  padding-right: 28px;                              /* room for the › */
}
a.tgame::after {
  content: '›';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--paper-3);
  transition: color 120ms ease, transform 120ms ease;
}
a.tgame:hover {
  background: var(--ink-3);
}
a.tgame:hover::after {
  color: var(--team, var(--paper));
  transform: translateY(-50%) translateX(3px);
}

/* A played game whose sheet hasn't been ingested yet — fade so it's
   obvious the row is intentionally non-clickable, not a broken link. */
.tgame--no-sheet {
  opacity: 0.45;
  cursor: default;
}
.tgame--no-sheet::after {
  content: 'no sheet';
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--paper-3);
  text-transform: uppercase;
}
.tgame--no-sheet { position: relative; padding-right: 70px; }

/* Schedule tab — the G#NN cell becomes a link when a sheet is ingested. */
.sched-sheet-link {
  color: var(--team, var(--paper-dim));
  text-decoration: none;
  font-weight: 600;
  transition: color 120ms ease;
}
.sched-sheet-link:hover { color: var(--paper); text-decoration: underline; }
.tgame__day {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--paper-3); letter-spacing: 0.05em;
}
.tgame__opp {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  display: flex; align-items: center; gap: 8px;
}
.tgame__opp .vs {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--paper-3);
  width: 16px;
}
.tgame__result {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  padding: 3px 8px; border-radius: 3px;
}
.tgame__result.win  { color: var(--good); background: rgba(34,211,161,0.12); }
.tgame__result.loss { color: var(--bad);  background: rgba(244,63,94,0.12); }
.tgame__result.otl  { color: var(--signal); background: rgba(250,204,21,0.12); }
.tgame__score {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--paper);
}

/* Stats grid for team page */
.statgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 1000px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }

.statbox {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
}
.statbox::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--team); opacity: 0.7;
}
.statbox label {
  display: block;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-3); margin-bottom: 4px;
}
.statbox .v {
  font-family: var(--display); font-weight: 900; font-size: 30px;
  letter-spacing: -0.02em; color: var(--paper);
  line-height: 1.05;
}
.statbox .sub {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-dim); font-weight: 500; margin-top: 4px;
}
.statbox .rank {
  position: absolute; top: 16px; right: 16px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  color: var(--team); letter-spacing: 0.08em;
}

/* Empty state / TBA badge for prototype */
.tba {
  display: inline-block;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  padding: 3px 8px; border-radius: 3px;
  background: rgba(250,204,21,0.1);
  color: var(--signal);
  letter-spacing: 0.05em;
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeUp 600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.animate-in:nth-child(2) { animation-delay: 60ms; }
.animate-in:nth-child(3) { animation-delay: 120ms; }
.animate-in:nth-child(4) { animation-delay: 180ms; }
.animate-in:nth-child(5) { animation-delay: 240ms; }

/* Mobile fixups */
@media (max-width: 768px) {
  .hero__main { padding: 24px; }
  .module-head h2 { font-size: 24px; }
  .standings__row {
    grid-template-columns: 22px 1fr 36px 50px;
    font-size: 11px;
  }
  .standings__row .gp, .standings__row .l, .standings__row .otl, .standings__row .chip-wrap { display: none; }
}

/* ============ STANDINGS PAGE ============ */
.page-head {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ink-4);
}
.page-head__eyebrow {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--team);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.page-head__eyebrow::before {
  content: ''; width: 24px; height: 2px; background: var(--team);
}
.page-head__title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(40px, 5vw, 64px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--paper);
  margin-bottom: 12px;
}
.page-head__deck {
  font-size: 16px; line-height: 1.5;
  color: var(--paper-dim);
  max-width: 720px;
}

.view-tabs {
  display: flex; gap: 0;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: 4px;
  margin-bottom: 24px;
  width: fit-content;
  flex-wrap: wrap;
}
.view-tab {
  padding: 10px 18px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-3);
  border-radius: var(--r-sm);
  transition: color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
.view-tab:hover { color: var(--paper-dim); }
.view-tab.is-active {
  color: var(--paper);
  background: var(--ink-3);
}

.view-panel { display: none; }
.view-panel.is-active { display: block; }

/* === Standings table === */
.standings-table {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 16px;
}

.stdrow {
  display: grid;
  grid-template-columns:
    36px      /* rank */
    32px      /* chip */
    minmax(140px, 1.4fr)  /* team name */
    repeat(4, 38px)        /* GP W L OT */
    52px                   /* PTS */
    48px                   /* P% */
    repeat(2, 42px)        /* GF GA */
    52px                   /* DIFF */
    62px                   /* STRK */
    72px                   /* L10 */
    72px                   /* HOME */
    72px;                  /* ROAD */
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--ink-4);
  font-family: var(--mono); font-size: 12px;
  color: var(--paper-dim);
  transition: background 120ms ease;
  text-decoration: none;
}
.stdrow:last-child { border-bottom: 0; }
.stdrow:hover {
  background: var(--ink-3);
  color: var(--paper);
}
.stdrow--head {
  background: var(--ink-3);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-2);
  padding: 12px 18px;
  pointer-events: none;
  user-select: none;
}
.stdrow--head [class] { pointer-events: auto; }

.stdrow__rank {
  text-align: right;
  font-weight: 700;
  color: var(--paper-3);
}
.stdrow:hover .stdrow__rank { color: var(--team); }

.stdrow__team {
  display: flex; flex-direction: column;
  gap: 1px;
  min-width: 0;  /* allow truncation */
}
.stdrow__name {
  font-family: var(--body); font-weight: 600; font-size: 14px;
  color: var(--paper);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stdrow__team small {
  font-size: 10px; color: var(--paper-3);
  letter-spacing: 0.05em;
}

.stdrow__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.stdrow__pts {
  color: var(--paper);
  font-weight: 700;
  font-size: 14px;
}

.stdrow__streak { display: flex; justify-content: center; }

.stdrow.is-playoff-cutoff { border-bottom: 2px solid var(--team); }
.stdrow.is-wildcard-cutoff { border-bottom: 2px dashed var(--paper-3); }

/* Striped rows (overall view only) */
.standings-table--zebra .stdrow:not(.stdrow--head):nth-child(even) {
  background: rgba(255,255,255,0.015);
}

.standings-note {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3);
  letter-spacing: 0.05em;
  margin-top: 12px; margin-bottom: 32px;
}

/* Conference grid */
.conf-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 16px;
}
.conf-block { display: flex; flex-direction: column; }
.conf-head {
  font-family: var(--display); font-weight: 900;
  font-size: 28px;
  letter-spacing: -0.015em;
  margin-bottom: 16px;
  display: flex; align-items: baseline; gap: 12px;
}
.conf-head small {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--paper-3);
}

/* Division blocks */
.div-block { margin-bottom: 32px; }
.div-head {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: 14px;
}
.div-conf {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--team);
  padding: 4px 10px;
  background: rgba(255,76,0,0.1);
  border-radius: 3px;
}
.div-name {
  font-family: var(--display); font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.015em;
  color: var(--paper);
}
.div-count {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3);
  letter-spacing: 0.05em;
  margin-left: auto;
}

.wc-head {
  font-family: var(--display); font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--paper);
  display: flex; align-items: baseline; gap: 10px;
}
.wc-head small {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--paper-3);
}

/* Responsive: hide less-critical columns at narrow widths */
@media (max-width: 1100px) {
  .stdrow {
    grid-template-columns:
      32px 28px minmax(120px, 1.4fr)
      32px 32px 32px 32px 48px 44px
      36px 36px 44px 56px;
    gap: 6px;
    padding: 10px 14px;
  }
  .stdrow__hide-md { display: none; }
}

@media (max-width: 700px) {
  .stdrow {
    grid-template-columns: 28px 26px minmax(100px, 1fr) 28px 28px 28px 40px 44px;
    font-size: 11px;
    gap: 4px;
    padding: 9px 10px;
  }
  /* Hide GA, DIFF, P%, STRK on mobile */
  .stdrow > *:nth-child(7),  /* OT */
  .stdrow > *:nth-child(9),  /* P% */
  .stdrow > *:nth-child(10), /* GF */
  .stdrow > *:nth-child(11), /* GA */
  .stdrow > *:nth-child(12), /* DIFF */
  .stdrow > *:nth-child(13)  /* STRK */
  { display: none; }
}

/* ============ SCHEDULE PAGE ============ */
.schedule-filters {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin-bottom: 24px;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.filter-label {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--paper-3);
}

.filter-select {
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  padding: 9px 12px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--paper);
  cursor: pointer;
  min-width: 200px;
  transition: border-color 120ms ease;
}
.filter-select:hover, .filter-select:focus {
  border-color: var(--paper-3);
  outline: none;
}

.filter-pills {
  display: flex;
  gap: 0;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  padding: 3px;
}
.filter-pill {
  padding: 7px 14px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-3);
  border-radius: 3px;
  transition: color 120ms ease, background 120ms ease;
}
.filter-pill:hover { color: var(--paper-dim); }
.filter-pill.is-active {
  color: var(--paper);
  background: var(--ink-4);
}

.filter-stats {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3);
  letter-spacing: 0.05em;
}

/* Week blocks */
.week-block {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  margin-bottom: 16px;
  overflow: hidden;
}

.week-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--ink-3);
  border-bottom: 1px solid var(--ink-4);
}
.week-head__label {
  font-family: var(--display); font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--paper);
  margin-right: 12px;
}
.week-head__range {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-3);
}
.week-head__counts {
  display: flex;
  gap: 8px;
  align-items: center;
}
.week-head__count {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-dim);
  margin-right: 8px;
}
.week-head__pill {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
}
.week-head__pill--final {
  background: rgba(34,211,161,0.12);
  color: var(--good);
}
.week-head__pill--upcoming {
  background: rgba(250,204,21,0.12);
  color: var(--signal);
}

.week-games { display: flex; flex-direction: column; }

/* Schedule game row */
.sg-row {
  display: grid;
  grid-template-columns:
    60px        /* game # */
    44px        /* day */
    minmax(180px, 1fr)  /* visitor team */
    24px        /* @ */
    minmax(180px, 1fr)  /* home team */
    140px;      /* score / time */
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--ink-4);
  font-size: 13px;
  text-decoration: none;
  color: var(--paper-dim);
  transition: background 120ms ease;
}
.sg-row:last-child { border-bottom: 0; }
.sg-row:hover { background: var(--ink-3); color: var(--paper); }

.sg-row--upcoming { background: rgba(250,204,21,0.02); }

.sg-num {
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  color: var(--paper-3); letter-spacing: 0.05em;
}
.sg-day {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--paper-2); letter-spacing: 0.05em;
}

.sg-team {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.sg-team--home { /* could be styled differently if desired */ }

.sg-team__name {
  font-family: var(--display); font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sg-team__name.is-loser { color: var(--paper-3); }

.sg-at {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-3);
  text-align: center;
}

/* Score display */
.sg-score {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}
.sg-score__num {
  font-family: var(--display); font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--paper);
  min-width: 22px;
  text-align: center;
}
.sg-score__num.is-loser { color: var(--paper-3); }

.sg-badge {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 3px;
  margin-left: 4px;
}
.sg-badge--ot {
  background: rgba(250,204,21,0.12);
  color: var(--signal);
}
.sg-badge--so {
  background: rgba(124,58,237,0.18);
  color: #C4B5FD;
}

.sg-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.sg-time__label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--signal);
}
.sg-time__day {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--paper-2);
}

/* Mobile adjustments */
@media (max-width: 800px) {
  .schedule-filters { gap: 14px; padding: 12px; }
  .filter-stats { margin-left: 0; flex-basis: 100%; }
  .filter-select { min-width: 100%; }
  
  .sg-row {
    grid-template-columns: 36px minmax(110px, 1fr) 16px minmax(110px, 1fr) 90px;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
  }
  .sg-num { display: none; }
  .sg-team__name { font-size: 13px; }
  .sg-score__num { font-size: 18px; }
  .week-head { padding: 10px 14px; }
  .week-head__label { font-size: 15px; }
}

/* ============================================================
 * Strategy & Goalie-Pull editor modal (.stratm)
 *
 * Single-column layout — narrower than the lines modal since it doesn't
 * need a pool/groups split. Reuses .linesm__warnings, .linesm__section,
 * .strat__*, .pullg__*, and .lcard__int__* classes for the inner content.
 * ============================================================ */
.stratm { position: fixed; inset: 0; z-index: 1000; display: none; }
.stratm.is-open { display: block; }
body.stratm-open { overflow: hidden; }
.stratm__backdrop {
  position: absolute; inset: 0;
  background: rgba(8,8,9,0.78);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.stratm__panel {
  position: relative;
  max-width: 1100px; width: calc(100% - 48px);
  height: calc(100vh - 80px);
  margin: 40px auto 0;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), 0 24px 64px rgba(0,0,0,0.6);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.stratm__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ink-4);
}
.stratm__head h2 {
  margin: 0;
  font-family: var(--display); font-weight: 900; font-size: 20px;
  letter-spacing: -0.01em; color: var(--paper);
}
.stratm__sub {
  margin: 2px 0 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--paper-3);
}
.stratm__close {
  background: transparent; border: 0;
  color: var(--paper-dim);
  font-size: 24px; line-height: 1; padding: 4px 8px;
  cursor: pointer; border-radius: var(--r-sm);
  transition: background 100ms ease, color 100ms ease;
}
.stratm__close:hover { background: var(--ink-3); color: var(--paper); }

.stratm__gamestrip {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--ink-4);
  background: var(--ink-3);
}
.stratm__tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.stratm__tab {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 10px;
  background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: var(--r-sm);
  font-family: var(--display); font-weight: 800; font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--paper-dim);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.stratm__tab:hover:not([disabled]) { background: var(--ink-3); color: var(--paper); border-color: var(--paper-3); }
.stratm__tab.is-active { background: color-mix(in srgb, var(--team) 16%, transparent); color: var(--team); border-color: color-mix(in srgb, var(--team) 40%, transparent); }
.stratm__tab[disabled] { opacity: 0.35; cursor: not-allowed; }
.stratm__tab small {
  font-family: var(--mono); font-weight: 600; font-size: 9px;
  letter-spacing: 0.04em; text-transform: none;
  color: inherit; opacity: 0.7;
}
.stratm__tabdot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 4px; vertical-align: middle;
}
.stratm__tabdot--error { background: #F43F5E; box-shadow: 0 0 4px rgba(244,63,94,0.6); }
.stratm__tabdirty {
  display: inline-block; color: var(--team); font-weight: 900; margin-right: 2px;
}

.stratm__copy {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--paper-dim);
}
.stratm__copylabel strong { color: var(--paper); }
.stratm__copygrouplabel { color: var(--paper-3); }
.stratm__copybtn {
  background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: var(--r-sm);
  color: var(--paper); padding: 4px 8px;
  font-family: var(--mono); font-size: 11px;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease;
}
.stratm__copybtn:hover:not([disabled]) { background: var(--ink-3); border-color: var(--team); }
.stratm__copybtn[disabled] { opacity: 0.35; cursor: not-allowed; }
.stratm__copyselect {
  background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: var(--r-sm);
  color: var(--paper); padding: 4px 8px;
  font-family: var(--mono); font-size: 11px;
}

.stratm__body {
  flex: 1;
  padding: 16px 22px;
  overflow: hidden;
  min-height: 0;
}
.stratm__rightcol {
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 16px;
  padding-right: 4px;
  height: 100%;
  min-height: 0;
}
.stratm__loading, .stratm__empty {
  padding: 40px 22px; text-align: center;
  color: var(--paper-dim); font-size: 14px;
}
.stratm__empty p { margin: 0 0 10px; line-height: 1.5; }

.stratm__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  border-top: 1px solid var(--ink-4);
  background: var(--ink-2);
}
.stratm__hint {
  font-family: var(--mono); font-size: 11px; color: var(--paper-dim);
  flex: 1;
}
.stratm__hint.is-error { color: #F87171; }
.stratm__save {
  background: var(--team); border: 0; border-radius: var(--r-sm);
  color: #fff;
  padding: 8px 18px;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 100ms ease, filter 100ms ease;
}
.stratm__save:hover:not([disabled]) { filter: brightness(1.1); }
.stratm__save[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Cross-modal switch buttons in the header (Lines ↔ Game Strategy).
   Prominent — team-colour outlined, capped uppercase display font, with a
   small ⇄ glyph to telegraph the "switch context" affordance. */
.linesm__headactions, .stratm__headactions {
  display: flex; align-items: center; gap: 10px;
}
.linesm__switch, .stratm__switch {
  position: relative;
  background: var(--ink-3);
  border: 1.5px solid var(--team);
  border-radius: var(--r-sm);
  color: var(--paper);
  padding: 9px 16px;
  font-family: var(--display); font-weight: 900; font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25);
  transition: background 120ms ease, color 120ms ease, box-shadow 160ms ease, transform 80ms ease;
}
.linesm__switch::after, .stratm__switch::after {
  content: ' ⇄';
  font-family: var(--mono); font-weight: 700;
  margin-left: 4px;
  opacity: 0.85;
}
.linesm__switch:hover, .stratm__switch:hover {
  background: var(--team);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.30),
    0 0 14px rgba(255, 255, 255, 0.06);
}
.linesm__switch:active, .stratm__switch:active {
  transform: translateY(1px);
}

/* ============================================================
 * Player detail pages — used by players/<id>.html
 *
 * Layout:
 *   - player-hero: a large team-coloured banner with the player's
 *     name, position chips, team link, jersey, age, country, OVR
 *   - statgrid / statbox / module-head are shared with team pages
 *   - ratings-grid: attribute bars (Scoring/Passing/Defense/etc.)
 *   - bio-grid: paired label/value fields for contract + biography
 * ============================================================ */
.player-hero {
  background: linear-gradient(135deg, var(--team) 0%, color-mix(in srgb, var(--team) 60%, #000) 100%);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  margin-bottom: 22px;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.player-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 30%, rgba(255,255,255,0.08), transparent 60%);
  pointer-events: none;
}
.player-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;        /* photo | id | OVR */
  align-items: center;
  gap: 24px;
}

/* NHL headshot. The .player-hero__photo wrapper holds the <img> plus a
   fallback <span> with the player's initials; we toggle .is-broken from
   auth.js (or set it server-side when we have no NHLID) to swap which
   one is visible. The wrapper preserves the layout slot regardless of
   which is showing, so the hero never jumps as images load/fail. */
.player-hero__photo {
  position: relative;
  width: 128px; height: 128px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  border: 3px solid rgba(255, 255, 255, 0.12);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.player-hero__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;                 /* heads centered, not chins */
  display: block;
  background: #2A2A31;                         /* tint while loading */
}
.player-hero__photo-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display);
  font-size: 44px; font-weight: 900; letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(0, 0, 0, 0.45);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
/* When img loaded successfully, hide the fallback. When .is-broken (no
   NHLID, or onerror fired), the fallback shows and the img is removed
   by auth.js or never emitted. */
.player-hero__photo:not(.is-broken) .player-hero__photo-fallback { display: none; }
.player-hero__photo.is-broken img { display: none; }

@media (max-width: 640px) {
  .player-hero__inner { grid-template-columns: auto 1fr; row-gap: 16px; }
  .player-hero__photo { width: 88px; height: 88px; }
  .player-hero__photo-fallback { font-size: 32px; }
  .player-hero__ovr { grid-column: 1 / -1; justify-self: end; }   /* stack OVR below */
}
.player-hero__pos {
  display: flex; gap: 6px;
  margin-bottom: 8px;
}
.player-hero__name {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: 900;
  font-size: 44px; line-height: 1.02; letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.player-hero__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  letter-spacing: 0.04em;
}
.player-hero__sep { opacity: 0.5; }
.player-hero__team {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  background: rgba(0, 0, 0, 0.30);
  border-radius: 999px;
  color: #fff;
  text-decoration: none;
  transition: background 100ms ease;
}
.player-hero__team:hover { background: rgba(0, 0, 0, 0.50); color: #fff; }
.player-hero__team img {
  display: block;
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(0,0,0,0.20);
}
.player-hero__team--noimg { padding: 4px 12px; }
.player-hero__flags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 10px;
}
.player-hero__flag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.30);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
}
.player-hero__ovr {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: var(--r-md);
  padding: 14px 22px;
  min-width: 110px;
}
.player-hero__ovr label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.player-hero__ovr-val {
  font-family: var(--display); font-weight: 900;
  font-size: 56px; line-height: 1; letter-spacing: -0.02em;
}

/* Attribute ratings bars */
.ratings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px 18px;
  margin: 0 0 24px;
}
.rating {
  display: grid;
  grid-template-columns: 110px 1fr 32px;
  align-items: center;
  gap: 10px;
}
.rating__label {
  font-family: var(--mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--paper-dim);
}
.rating__bar {
  height: 8px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 999px;
  overflow: hidden;
}
.rating__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--team), color-mix(in srgb, var(--team) 70%, #fff));
  border-radius: 999px;
}
.rating__val {
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  text-align: right;
  color: var(--paper);
}

/* Contract + bio grid */
.bio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 24px;
  margin: 0 0 24px;
  padding: 18px 22px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
}
.bio__field { display: flex; flex-direction: column; gap: 2px; }
.bio__field label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--paper-3);
}
.bio__val {
  font-family: var(--display); font-weight: 700; font-size: 16px;
  color: var(--paper);
}

/* Player-link styling — applied wherever roster/lines/leaderboards
   mention a player by name. Subtle until hovered so dense tables
   don't read as a wall of links. */
.player-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
  transition: color 100ms ease, border-color 100ms ease;
}
.player-link:hover {
  color: var(--team);
  border-bottom-color: var(--team);
}

/* player-cell-link wraps the team chip + player name as a single
   clickable target inside stats / leaders tables. Previously only the
   name text was clickable; users who clicked the chip or the gap saw
   nothing happen. The wrapper makes the entire cell area navigate. */
.player-cell-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--display); font-weight: 700;
  padding: 2px 0;
}
.player-cell-link__name {
  border-bottom: 1px dotted transparent;
  transition: color 100ms ease, border-color 100ms ease;
}
.player-cell-link:hover .player-cell-link__name {
  color: var(--team);
  border-bottom-color: var(--team);
}

/* Prospects table — outbound link + NHL rights chip (Phase 8). */
.prospect-link {
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px dotted transparent;
  transition: color 100ms ease, border-color 100ms ease;
}
.prospect-link:hover {
  color: var(--team);
  border-bottom-color: var(--team);
}
.prospect-link__ext {
  font-family: var(--mono);
  font-size: 10px;
  margin-left: 4px;
  color: var(--paper-3);
}
.prospect-nhl-rights {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--paper);
  letter-spacing: 0.08em;
}

/* Tag the player-profile "Current Season" headings with the league they
   apply to (RWHA / NHL / AHL / CHL / etc.) so the dual blocks read as
   distinct sections instead of duplicate "Current Season" headings. */
.player-realleague-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--team) 16%, transparent);
  color: var(--team);
  border: 1px solid color-mix(in srgb, var(--team) 36%, transparent);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  vertical-align: middle;
}

@media (max-width: 720px) {
  .player-hero { padding: 20px; }
  .player-hero__inner { grid-template-columns: 1fr; }
  .player-hero__name { font-size: 32px; }
  .player-hero__ovr-val { font-size: 44px; }
}

/* Empty-state card used by the League page when an entire section has
   no data yet (e.g. no trades on record, no draft pool). */
.empty-state {
  padding: 36px 28px;
  text-align: center;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  margin: 0 0 24px;
}
.empty-state h4 {
  margin: 0 0 6px;
  font-family: var(--display); font-weight: 800; font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--paper);
}
.empty-state p {
  margin: 0;
  font-family: var(--mono); font-size: 12px;
  color: var(--paper-3);
  letter-spacing: 0.02em;
}
.muted-note {
  margin: 8px 0 0;
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3);
}

/* ===== League-wide header search dropdown =====
   Position is computed at runtime by search.js (it pins the dropdown
   below the input every time it opens / on resize). */
.site-search__dropdown {
  position: fixed;
  z-index: 1500;
  display: none;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.site-search__dropdown.is-open { display: block; }

.site-search__item {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--ink-4);
  transition: background 80ms ease;
}
.site-search__item:last-child { border-bottom: 0; }
.site-search__item:hover,
.site-search__item.is-active {
  background: var(--ink-3);
}
.site-search__kind {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--paper-3);
  text-align: center;
}
.site-search__kind--skater { background: rgba(37, 99, 235, 0.18);  color: #93c5fd; }
.site-search__kind--goalie { background: rgba(245, 158, 11, 0.20); color: #fcd34d; }
.site-search__kind--team   { background: rgba(34, 211, 161, 0.18); color: #6ee7b7; }
.site-search__name {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--paper);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-search__sub {
  font-family: var(--mono); font-size: 10px;
  color: var(--paper-3);
  letter-spacing: 0.02em;
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden; text-overflow: ellipsis;
}
.site-search__empty {
  padding: 16px 18px;
  font-family: var(--mono); font-size: 12px;
  color: var(--paper-3);
  text-align: center;
}
.site-search__empty strong { color: var(--paper); font-weight: 700; }

/* UFA pill — surfaces alongside the player's name in the search dropdown
   when their TeamName is null (unsigned). Styled distinct from the kind
   badge so the eye reads "Player" + "free agent" as two facts, not one. */
.site-search__ufa {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 3px;
  background: rgba(245, 158, 11, 0.22);
  color: #fcd34d;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.12em;
  vertical-align: middle;
  border: 1px solid rgba(245, 158, 11, 0.45);
}

/* ===== News & Announcements =====
   Two rendering surfaces:
     .news-feed / .news-item — full archive on league.html (HTML body
                               rendered verbatim from STHS)
     .newscards / .newscard  — compact 5-card widget on the home page
                               (title + plain-text snippet only) */
.news-feed {
  display: flex; flex-direction: column; gap: 14px;
}
.news-item {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-left: 3px solid var(--team);
  border-radius: var(--r-md);
  padding: 16px 20px;
  scroll-margin-top: 88px;
  transition: background 240ms ease, border-color 240ms ease;
}
.news-item:target {
  background: color-mix(in srgb, var(--team) 12%, var(--ink-2));
  border-color: var(--team);
}
.news-item__permalink {
  font-family: var(--mono); font-size: 12px;
  color: var(--paper-3);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 3px;
  opacity: 0.5;
  transition: opacity 160ms ease, color 160ms ease, background 160ms ease;
}
.news-item__permalink:hover {
  opacity: 1;
  color: var(--team);
  background: rgba(255,255,255,0.04);
}
.news-item__delete {
  appearance: none;
  border: 1px solid rgba(244,63,94,0.35);
  background: rgba(244,63,94,0.10);
  color: #f87171;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.news-item__delete:hover:not(:disabled) {
  background: rgba(244,63,94,0.22);
  color: #fecaca;
  border-color: rgba(244,63,94,0.6);
}
.news-item__delete:disabled { opacity: 0.5; cursor: wait; }

/* Edit button — same chip shape as Delete but in the site accent so the
   two actions read as "neutral" + "destructive" at a glance. */
.news-item__edit {
  appearance: none;
  border: 1px solid var(--hot-edge);
  background: var(--hot-soft);
  color: var(--hot);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.news-item__edit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--hot) 28%, transparent);
  color: var(--paper);
  border-color: var(--hot);
}
.news-item__edit:disabled { opacity: 0.5; cursor: wait; }
.news-item__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-bottom: 6px;
}
.news-item__owner {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}
.news-item__owner--commish { background: rgba(34,211,161,0.18); color: #6ee7b7; }
.news-item__owner--gm      { background: rgba(37,99,235,0.18);  color: #93c5fd; }
.news-item__poster {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3);
  letter-spacing: 0.04em;
}
.news-item__time {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3);
}
.news-item__title {
  margin: 4px 0 10px;
  font-family: var(--display); font-weight: 800; font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--paper);
  line-height: 1.25;
}
.news-item__body {
  font-family: var(--body); font-size: 14px; line-height: 1.55;
  color: var(--paper-dim);
}
.news-item__body p     { margin: 0 0 10px; }
.news-item__body p:last-child { margin-bottom: 0; }
.news-item__body a     { color: var(--team); text-decoration: underline; }
.news-item__body strong { color: var(--paper); }
.news-item__body img   { max-width: 100%; height: auto; border-radius: var(--r-sm); }

/* Home-page widget */
.newscards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
.newscard {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-left: 3px solid var(--team);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: background 100ms ease, transform 100ms ease;
}
.newscard:hover {
  background: var(--ink-3);
  transform: translateY(-1px);
}
.newscard__head {
  display: flex; align-items: baseline; gap: 8px;
}
.newscard__owner {
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
}
.newscard__owner--commish { background: rgba(34,211,161,0.18); color: #6ee7b7; }
.newscard__owner--gm      { background: rgba(37,99,235,0.18);  color: #93c5fd; }
.newscard__time {
  margin-left: auto;
  font-family: var(--mono); font-size: 10px;
  color: var(--paper-3);
}
.newscard__title {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--paper);
  letter-spacing: -0.005em;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.newscard__snippet {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.module-head__more {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px;
  color: var(--team);
  text-decoration: none;
}
.module-head__more:hover { text-decoration: underline; }

/* ===== Roster panel: bucketed sub-tabs + position filter =====
   The Roster tab on a team page now has three buckets (Pro Roster, Pro
   Scratch, Farm) each rendered as a single unified table containing both
   skaters and goalies, filterable by position chip. */

/* Colour the .pos-badge chips to match the league-wide palette. */
.roster .pos-badge { margin-right: 2px; }
.roster .pos-badge--c   { background: #2563EB; color: #fff; }
.roster .pos-badge--lw  { background: #16A34A; color: #fff; }
.roster .pos-badge--rw  { background: #DC2626; color: #fff; }
.roster .pos-badge--d   { background: #7C3AED; color: #fff; }
.roster .pos-badge--g   { background: #F59E0B; color: #2b1d05; }

/* Bucket sub-tab strip and position filter strip share the .subtabs__btn
   look but live in different rows. */
[data-panel="roster"] .pos-filter {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 0 0 12px;
  margin: 12px 0;
  border-bottom: 1px solid var(--ink-4);
}
[data-panel="roster"] .pos-filter .subtabs__btn {
  /* Tighter padding than the bucket strip so the filter visually nests */
  font-size: 11px;
}

/* Bucket count chip inside each sub-tab label */
.subtabs__count {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ink-3);
  color: var(--paper-3);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
}
.subtabs__btn.is-active .subtabs__count {
  background: color-mix(in srgb, var(--team) 20%, transparent);
  color: var(--team);
  border: 1px solid color-mix(in srgb, var(--team) 40%, transparent);
}

/* Show only the active bucket */
.roster-bucket               { display: none; }
.roster-bucket.is-active     { display: block; }

/* Filter hides rows but keeps them in the DOM (so sort + bucket switch
   don't re-render the entire panel). */
.roster tbody tr.roster-hidden { display: none; }
.roster tbody tr.stats-pos-hidden { display: none; }

/* Stats sub-panel position-filter chip row sits just under the RWHA/Pro
   toggle. Same chip vocabulary as the Roster tab, but slightly tighter so
   it reads as a secondary control rather than another tabset. */
.subtabs.subtabs--filter {
  flex-wrap: wrap;
  margin: 14px 0 6px;
  gap: 4px;
}
.subtabs.subtabs--filter .subtabs__btn {
  font-size: 10px;
  padding: 6px 10px;
  letter-spacing: 0.08em;
}

/* ===== Ratings overlay =====
   Click any element annotated with data-show-ratings="<key>" — typically a
   roster row or a lines-pool card — and ratings_overlay.js mounts this
   modal centred on the viewport. */
.ratings-modal {
  position: fixed; inset: 0;
  z-index: 2000;
  display: none;
}
.ratings-modal.is-open { display: block; }
body.ratings-modal-open { overflow: hidden; }
.ratings-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 8, 9, 0.78);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}
.ratings-modal__panel {
  position: relative;
  max-width: 720px; width: calc(100% - 48px);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  margin: 40px auto;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  padding: 24px 28px 28px;
}
.ratings-modal__close {
  position: absolute; top: 14px; right: 16px;
  background: transparent; border: 0;
  color: var(--paper-dim);
  font-size: 26px; line-height: 1;
  padding: 4px 8px; cursor: pointer; border-radius: var(--r-sm);
}
.ratings-modal__close:hover { background: var(--ink-3); color: var(--paper); }
.ratings-modal__loading {
  padding: 40px;
  text-align: center;
  color: var(--paper-dim);
  font-family: var(--mono); font-size: 12px;
}

.ratings-modal__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink-4);
  margin-bottom: 18px;
}
.ratings-modal__pos {
  display: flex; gap: 4px;
  margin-bottom: 6px;
}
.ratings-modal__name {
  margin: 0 0 4px;
  font-family: var(--display); font-weight: 900; font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.ratings-modal__meta {
  font-family: var(--mono); font-size: 12px;
  color: var(--paper-dim);
  letter-spacing: 0.04em;
}
.ratings-modal__more {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--mono); font-size: 11px;
  color: var(--team);
  text-decoration: none;
}
.ratings-modal__more:hover { text-decoration: underline; }
.ratings-modal__ovr {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 12px;
  font-family: var(--display); font-weight: 900; font-size: 32px;
  letter-spacing: -0.02em;
}

.ratings-modal__bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px 28px;
}
.ratings-modal__group-name {
  font-family: var(--display); font-weight: 800; font-size: 11px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 8px;
}
.ratings-modal__rating {
  display: grid;
  grid-template-columns: 100px 1fr 28px;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.ratings-modal__rating-label {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-dim);
  letter-spacing: 0.03em;
}
.ratings-modal__rating-bar {
  height: 8px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: 999px;
  overflow: hidden;
}
.ratings-modal__rating-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--team), color-mix(in srgb, var(--team) 70%, #fff));
  border-radius: 999px;
}
.ratings-modal__rating-val {
  font-family: var(--mono); font-weight: 700; font-size: 12px;
  color: var(--paper);
  text-align: right;
}

@media (max-width: 720px) {
  .ratings-modal__panel { padding: 20px; margin: 20px auto; }
  .ratings-modal__head { grid-template-columns: 1fr; }
  .ratings-modal__ovr { justify-self: start; }
}

/* ============================================================
   Stats page — regular / playoff toggle
   ============================================================ */
.stats-toggle-bar {
  display: inline-flex;
  gap: 0;
  margin: 0 0 28px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: 999px;
  padding: 4px;
}
.stats-toggle__btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--paper-3);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.stats-toggle__btn:hover:not(.is-active):not(.is-disabled) {
  color: var(--paper);
}
.stats-toggle__btn.is-active {
  background: var(--team, #2563eb);
  color: var(--paper);
}
.stats-toggle__btn.is-disabled,
.stats-toggle__btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.stats-page[data-stats-mode="regular"] .stats-block[data-stats-mode="playoff"],
.stats-page[data-stats-mode="playoff"] .stats-block[data-stats-mode="regular"] {
  display: none;
}

/* ============================================================
   COMMISSIONER UI — login bar, modals, post editor.
   ============================================================ */
#commish-mount { margin: 0 0 16px; }
.commish-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
}
.commish-bar__badge {
  font-family: var(--mono);
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6ee7b7;
  background: rgba(34, 211, 161, 0.16);
  padding: 4px 10px; border-radius: 999px;
}
.commish-btn {
  appearance: none; border: 1px solid transparent; cursor: pointer;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 14px; border-radius: var(--r-sm);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.commish-btn--primary {
  background: var(--team, #2563eb); color: var(--paper); border-color: var(--team, #2563eb);
}
.commish-btn--primary:hover { filter: brightness(1.08); }
.commish-btn--primary[disabled] { opacity: 0.55; cursor: not-allowed; }
.commish-btn--ghost {
  background: transparent; color: var(--paper-dim);
  border-color: var(--ink-4);
}
.commish-btn--ghost:hover { color: var(--paper); border-color: var(--ink-5); }
.commish-btn--link {
  border-color: transparent; padding-left: 0; padding-right: 0;
}
.commish-btn--link:hover { color: var(--paper); }

/* --- modal --------------------------------------------------- */
.commish-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.commish-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.commish-modal__panel {
  position: relative; z-index: 1;
  width: 100%; max-width: 520px;
  max-height: calc(100vh - 80px);
  display: flex; flex-direction: column;
  background: var(--ink);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.commish-modal--wide .commish-modal__panel { max-width: 900px; }
.commish-modal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--ink-4);
}
.commish-modal__head h2 {
  margin: 0;
  font-family: var(--display); font-size: 18px; font-weight: 800;
  letter-spacing: -0.005em; color: var(--paper);
}
.commish-modal__close {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  color: var(--paper-3); font-size: 26px; line-height: 1; padding: 4px 8px;
}
.commish-modal__close:hover { color: var(--paper); }
.commish-modal__body { padding: 22px; overflow: auto; }
.commish-modal__foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 16px 22px;
  border-top: 1px solid var(--ink-4);
  background: var(--ink-2);
}

/* --- form --------------------------------------------------- */
.commish-form { display: flex; flex-direction: column; gap: 14px; }
.commish-field { display: flex; flex-direction: column; gap: 6px; }
.commish-field > span {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-dim);
}
.commish-field input[type="password"],
.commish-field input[type="text"] {
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  color: var(--paper);
  font-family: var(--body); font-size: 14px;
}
.commish-field input:focus {
  outline: none; border-color: var(--team, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}
.commish-help { margin: 0 0 4px; color: var(--paper-dim); font-size: 13px; }
.commish-error { margin: 0; color: #f87171; font-size: 13px; }
.commish-success { margin: 0; color: #6ee7b7; font-size: 13px; }

/* --- editor area -------------------------------------------- */
.commish-editor-wrap {
  background: #fff; color: #111;
  border: 1px solid var(--ink-4); border-radius: var(--r-sm);
  overflow: hidden;
}
.commish-editor-wrap .ck.ck-editor__main > .ck-editor__editable {
  min-height: 260px;
}
.commish-editor-loading {
  padding: 16px;
  font-family: var(--mono); font-size: 12px; color: var(--paper-3);
  background: var(--ink-2);
}

/* --- rendered news body (.ck-content) -----------------------
   The Commissioner's posts come out as a chunk of CKEditor HTML
   wrapped in .news-item__body. We add ck-content rules so image
   alignment + resize classes from the editor visualise correctly
   on the public site. */
.news-item__body.ck-content img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.news-item__body.ck-content .image { display: table; clear: both; text-align: center; margin: 0.9em auto; }
.news-item__body.ck-content .image-inline { display: inline-flex; max-width: 100%; align-items: flex-start; }
.news-item__body.ck-content .image-inline img,
.news-item__body.ck-content .image img { max-width: 100%; height: auto; }
.news-item__body.ck-content .image.image-style-align-left  { float: left;  margin-right: 1em; }
.news-item__body.ck-content .image.image-style-align-right { float: right; margin-left: 1em; }
.news-item__body.ck-content .image.image-style-align-center { margin-left: auto; margin-right: auto; }
.news-item__body.ck-content .image.image_resized,
.news-item__body.ck-content img.image_resized { max-width: 100%; }
.news-item__body.ck-content h2,
.news-item__body.ck-content h3,
.news-item__body.ck-content h4 {
  color: var(--paper);
  margin: 16px 0 8px;
  font-family: var(--display);
}
.news-item__body.ck-content blockquote {
  border-left: 3px solid var(--ink-5);
  padding-left: 12px; margin: 12px 0; color: var(--paper-dim);
}
.news-item__body.ck-content code {
  background: var(--ink-3); padding: 1px 6px; border-radius: 3px;
  font-family: var(--mono); font-size: 0.92em;
}
.news-item__body.ck-content table {
  border-collapse: collapse; margin: 10px 0;
}
.news-item__body.ck-content table td,
.news-item__body.ck-content table th {
  border: 1px solid var(--ink-4); padding: 6px 10px;
}

/* ============================================================
   CLAIM PAGE — one-off invite landing (claim.html)
   ============================================================ */
.claim-card {
  max-width: 540px;
  margin: 60px auto;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.claim-card__head {
  padding: 24px 28px 4px;
  border-bottom: 1px solid var(--ink-4);
}
.claim-card__head h1 {
  margin: 0 0 6px;
  font-family: var(--display); font-weight: 800; font-size: 24px;
  letter-spacing: -0.01em; color: var(--paper);
}
.claim-card__deck {
  margin: 0 0 18px;
  color: var(--paper-dim); font-size: 14px;
}
.claim-card__body { padding: 22px 28px 28px; }

.claim-state {
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-dim);
}
.claim-state--loading {
  font-family: var(--mono); font-size: 12px;
  color: var(--paper-3);
}
.claim-state--error h2 {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: #f87171;
}
.claim-state--error p { margin: 0 0 10px; }

.claim-form { display: flex; flex-direction: column; gap: 14px; }
.claim-form__hint {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(34,211,161,0.10);
  border: 1px solid rgba(34,211,161,0.25);
  color: var(--paper); font-size: 13px; line-height: 1.5;
}
.claim-form__field {
  display: flex; flex-direction: column; gap: 6px;
}
.claim-form__field > span {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--paper-dim);
}
.claim-form__field input {
  padding: 10px 12px;
  background: var(--ink);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  color: var(--paper);
  font-family: var(--body); font-size: 14px;
}
.claim-form__field input:focus {
  outline: none;
  border-color: var(--team, #2563eb);
  box-shadow: 0 0 0 3px rgba(37,99,235,0.18);
}
.claim-form__error { color: #f87171; font-size: 13px; }
.claim-form__submit {
  appearance: none; border: 0;
  background: var(--team, #2563eb); color: var(--paper);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 18px; border-radius: var(--r-sm);
  cursor: pointer;
}
.claim-form__submit:hover:not(:disabled) { filter: brightness(1.08); }
.claim-form__submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* ============================================================
   Commissioner — Manage team passwords table
   ============================================================ */
.commish-team-creds__loading {
  padding: 16px;
  font-family: var(--mono); font-size: 12px;
  color: var(--paper-3);
  text-align: center;
}
.commish-team-creds__table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
}
.commish-team-creds__table thead th {
  text-align: center;
  padding: 10px 8px;
  background: var(--ink-3);
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--paper-dim);
  border-bottom: 1px solid var(--ink-4);
}
.commish-team-creds__table tbody td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--ink-3);
  font-size: 13px;
  color: var(--paper);
  vertical-align: middle;
  text-align: center;
}
.commish-team-creds__name {
  font-family: var(--display); font-weight: 700; color: var(--paper);
}
.commish-team-creds__table tbody td small {
  color: var(--paper-3); font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.04em;
}
.commish-team-creds__table tbody tr:hover { background: var(--ink-3); }
.commish-team-creds__table .commish-btn {
  font-size: 10px; padding: 6px 10px;
  margin-left: 6px;
}

.commish-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
}

.commish-link-output {
  width: 100%;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  color: var(--paper);
  font-family: var(--mono); font-size: 12px;
}

/* ============================================================
   SLAG HEAP — forum styling. All views (index / board / topic)
   share the .forum-* namespace; the dynamic content lands inside
   #forum-view rendered by forum.js.
   ============================================================ */
.forum-shell { display: block; }
.forum-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--paper-dim);
}
.forum-state h2 {
  margin: 0 0 12px;
  font-family: var(--display); font-weight: 800; font-size: 22px;
  color: var(--paper);
}
.forum-state--gate { background: var(--ink-2); border: 1px solid var(--ink-4); border-radius: var(--r-lg); }
.forum-state--error h2 { color: #f87171; }

.forum-breadcrumbs {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px;
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3);
  letter-spacing: 0.05em;
  margin: 0 0 14px;
}
.forum-crumb {
  color: var(--paper-dim);
  text-decoration: none;
}
.forum-crumb:hover { color: var(--paper); text-decoration: underline; }
.forum-crumb--current { color: var(--paper); }
.forum-crumb__sep { color: var(--paper-3); padding: 0 4px; }

.forum-category { margin: 0 0 28px; }

.forum-board-row { cursor: pointer; }
.forum-board-row:hover { background: var(--ink-3); }
.forum-board__name strong { display: block; color: var(--paper); font-family: var(--display); font-weight: 700; font-size: 15px; }
.forum-board__name small { display: block; margin-top: 2px; font-size: 12px; color: var(--paper-3); font-family: var(--body); }
.forum-board__counts div { font-weight: 700; color: var(--paper); }
.forum-board__counts small { display: block; color: var(--paper-3); font-family: var(--mono); font-size: 11px; }
.forum-board__last a { color: var(--paper); text-decoration: none; font-weight: 600; }
.forum-board__last a:hover { color: var(--team, #2563eb); text-decoration: underline; }
.forum-board__last small { display: block; color: var(--paper-3); font-family: var(--mono); font-size: 11px; margin-top: 2px; }

/* --- board view --------------------------------------------- */
.forum-board-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  margin: 0 0 16px;
}
.forum-board-head__title {
  margin: 0;
  font-family: var(--display); font-weight: 800; font-size: 22px;
  color: var(--paper);
}
.forum-board-head__deck { margin: 4px 0 0; color: var(--paper-dim); font-size: 13px; }

.forum-topic-row td { vertical-align: top; }
.forum-topic__title { padding-left: 12px; }
.forum-topic__link {
  color: var(--paper); text-decoration: none;
  font-family: var(--display); font-weight: 700; font-size: 15px;
}
.forum-topic__link:hover { color: var(--team, #2563eb); text-decoration: underline; }
.forum-topic__title small { display: block; margin-top: 2px; color: var(--paper-3); font-family: var(--mono); font-size: 11px; }
.forum-topic__last { font-size: 13px; color: var(--paper-dim); }
.forum-topic__last small { color: var(--paper-3); font-family: var(--mono); font-size: 11px; }

.forum-pin, .forum-lock { font-size: 13px; margin-right: 6px; vertical-align: middle; }

/* Unread indicator (Phase 8 — slag heap UX). Small green dot in front
   of board/topic names that have a last_post_at newer than the user's
   last-seen timestamp for that node. State lives in localStorage so it
   persists across sessions; cleared by visiting the relevant board /
   topic. */
.forum-unread-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--good, #3AB57C);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--good, #3AB57C) 25%, transparent);
  vertical-align: middle;
  flex: 0 0 8px;
}
/* Slightly nudge an unread row so the dot reads as deliberate. */
.forum-board-row.is-unread .forum-board__name strong,
.forum-topic-row.is-unread .forum-topic__link {
  color: var(--paper);
}

.forum-empty {
  text-align: center; padding: 30px;
  color: var(--paper-3); font-style: italic;
}

/* --- topic view --------------------------------------------- */
.forum-topic-head {
  background: var(--ink-2); border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 0 0 16px;
}
.forum-topic-head__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.forum-topic-head__title {
  margin: 0;
  font-family: var(--display); font-weight: 800; font-size: 22px;
  color: var(--paper);
}
.forum-topic-head__sub {
  margin-top: 4px;
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3); letter-spacing: 0.04em;
}
.forum-mod-tools {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--ink-4);
}

.forum-post {
  background: var(--ink-2); border: 1px solid var(--ink-4);
  border-left: 3px solid var(--team, #2563eb);
  border-radius: var(--r-md);
  padding: 14px 18px;
  margin: 0 0 12px;
  scroll-margin-top: 88px;
}
.forum-post:target { box-shadow: 0 0 0 2px color-mix(in srgb, var(--team) 60%, transparent); }
.forum-post__head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--ink-4);
}
.forum-post__author { font-family: var(--display); font-weight: 700; color: var(--paper); }
.forum-author--archived {
  color: var(--paper-3);
  font-style: italic;
}
.forum-post__time { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--paper-3); }
.forum-post__permalink {
  color: var(--paper-3); font-family: var(--mono); font-size: 12px;
  padding: 2px 6px; border-radius: 3px; opacity: 0.55;
  text-decoration: none;
  transition: opacity 160ms, color 160ms, background 160ms;
}
.forum-post__permalink:hover { opacity: 1; color: var(--team); background: rgba(255,255,255,0.04); }
.forum-post__edited { color: var(--paper-3); font-style: italic; font-size: 11px; }
.forum-post__admin { display: inline-flex; gap: 4px; margin-left: 4px; }
.forum-post__admin .forum-btn { font-size: 10px; padding: 4px 8px; }

.forum-post__body {
  color: var(--paper-dim); font-family: var(--body); font-size: 14px; line-height: 1.55;
}
.forum-post__body p { margin: 0 0 10px; }
.forum-post__body p:last-child { margin-bottom: 0; }
.forum-post__body a { color: var(--team); text-decoration: underline; }
.forum-post__body strong { color: var(--paper); }
.forum-post__body img { max-width: 100%; height: auto; border-radius: var(--r-sm); }
.forum-post__body blockquote {
  border-left: 3px solid var(--ink-5);
  padding: 6px 10px;
  margin: 8px 0;
  color: var(--paper-3);
  background: var(--ink);
}

/* --- pager + buttons ---------------------------------------- */
.forum-pager {
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center; margin: 18px 0;
}
.forum-pager__btn {
  appearance: none;
  background: var(--ink-2); border: 1px solid var(--ink-4);
  color: var(--paper-dim);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 6px 10px; border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
}
.forum-pager__btn:hover:not(.is-disabled):not(.is-active) { color: var(--paper); }
.forum-pager__btn.is-active { background: var(--team, #2563eb); color: var(--paper); border-color: var(--team, #2563eb); }
.forum-pager__btn.is-disabled { opacity: 0.45; cursor: not-allowed; }
.forum-pager__gap { color: var(--paper-3); padding: 0 4px; }

/* ============================================================
   Standings season bar (Phase 7 — historical seasons).
   Sits between the page header and the Overall/Conference/Division
   tabs. Selector dropdown + Regular/Playoffs toggle + a banner that
   appears only when a historical season is loaded.
   ============================================================ */
.standings-season-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 8px 0 18px;
  padding: 12px 16px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-dim); letter-spacing: 0.06em;
}
.standings-season-bar__lbl {
  display: inline-flex; align-items: center; gap: 8px;
  text-transform: uppercase;
}
.standings-season-bar__sel {
  appearance: none;
  background: var(--ink-3); border: 1px solid var(--ink-4);
  color: var(--paper);
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  padding: 5px 28px 5px 10px; border-radius: var(--r-sm);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper-dim) 50%),
                    linear-gradient(135deg, var(--paper-dim) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.standings-season-bar__sel:hover { border-color: var(--ink-5); }
.standings-season-bar__sel:focus-visible { outline: 2px solid var(--team); outline-offset: 1px; }
.standings-season-bar__playoff-toggle {
  display: inline-flex; align-items: center; gap: 0;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.standings-season-bar__btn {
  appearance: none;
  background: transparent; border: 0; cursor: pointer;
  color: var(--paper-dim);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px;
}
.standings-season-bar__btn.is-active {
  background: var(--team, #2563eb); color: var(--paper);
}
.standings-season-bar__btn:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.standings-season-bar__btn:hover:not(.is-active):not(:disabled) { color: var(--paper); }
.standings-season-bar__banner {
  flex: 1 1 100%;
  margin: 4px 0 0;
  padding: 8px 12px;
  background: rgba(58,181,124,0.10);
  border: 1px dashed rgba(58,181,124,0.40);
  border-radius: var(--r-sm);
  color: var(--paper-2);
  text-transform: none; letter-spacing: 0;
  font-family: var(--body); font-size: 13px;
}

/* ============================================================
   Generic client-side paginator (league.html: Prospects /
   Free Agents / Unassigned). Reuses forum-pager visual language.
   ============================================================ */
.paginator { margin-top: 4px; }
.paginator-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-dim);
  letter-spacing: 0.06em;
}
.paginator-size-label {
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: uppercase;
}
.paginator-size {
  appearance: none;
  background: var(--ink-2); border: 1px solid var(--ink-4);
  color: var(--paper);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 4px 24px 4px 8px; border-radius: var(--r-sm);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--paper-dim) 50%),
                    linear-gradient(135deg, var(--paper-dim) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.paginator-size:hover { border-color: var(--ink-5); }
.paginator-size:focus-visible { outline: 2px solid var(--team); outline-offset: 1px; }
.paginator-count {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3); letter-spacing: 0.04em;
  text-transform: none;
}

.paginator-pages {
  display: flex; flex-wrap: wrap; gap: 4px;
  justify-content: center; margin: 14px 0 4px;
}
.paginator-btn {
  appearance: none;
  background: var(--ink-2); border: 1px solid var(--ink-4);
  color: var(--paper-dim);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  padding: 6px 10px; border-radius: var(--r-sm);
  text-decoration: none;
  cursor: pointer;
}
.paginator-btn:hover:not(.is-disabled):not(.is-active) { color: var(--paper); }
.paginator-btn.is-active {
  background: var(--team, #2563eb);
  color: var(--paper);
  border-color: var(--team, #2563eb);
}
.paginator-btn.is-disabled { opacity: 0.45; cursor: not-allowed; }
.paginator-gap { color: var(--paper-3); padding: 0 4px; }

.forum-btn {
  appearance: none; border: 1px solid transparent; cursor: pointer;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 8px 12px; border-radius: var(--r-sm);
  transition: background 160ms, color 160ms, border-color 160ms;
}
.forum-btn--primary { background: var(--team, #2563eb); color: var(--paper); border-color: var(--team, #2563eb); }
.forum-btn--primary:hover { filter: brightness(1.08); }
.forum-btn--ghost { background: transparent; color: var(--paper-dim); border-color: var(--ink-4); }
.forum-btn--ghost:hover { color: var(--paper); border-color: var(--ink-5); }
.forum-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.forum-reply-btn { display: inline-block; margin: 14px 0; }

.forum-locked-note {
  background: rgba(234,179,8,0.08);
  border: 1px solid rgba(234,179,8,0.25);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  color: var(--paper-dim);
  font-size: 13px;
}

.forum-topics td { vertical-align: top; }

/* ============================================================
   Forum author byline (team · GM) + moderator UI bits
   ============================================================ */
.forum-author__team { color: var(--paper); font-weight: 700; }
.forum-author__gm {
  color: var(--paper-3);
  font-family: var(--mono); font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.forum-mod-tools__label {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--paper-3);
  margin-right: 4px;
  align-self: center;
}

/* Toggle pill used in the admin team-creds table for the Mod column. */
.commish-pill--toggle {
  cursor: pointer;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.04);
  color: var(--paper-3);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.commish-pill--toggle:hover { color: var(--paper); border-color: var(--ink-5); }
.commish-pill--toggle.is-on {
  background: rgba(34,211,161,0.18);
  color: #6ee7b7;
  border-color: rgba(34,211,161,0.4);
}
.commish-pill--toggle.is-on:hover {
  background: rgba(244,63,94,0.22);
  color: #fecaca;
  border-color: rgba(244,63,94,0.5);
}

/* ============================================================
   Forum — Move Topic modal
   ============================================================ */
.forum-move-list {
  display: flex; flex-direction: column; gap: 16px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 6px;
}
.forum-move-group__name {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-3);
  padding: 0 4px 6px;
  border-bottom: 1px solid var(--ink-4);
  margin-bottom: 6px;
}
.forum-move-option {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  background: var(--ink-2);
  cursor: pointer;
  margin-bottom: 6px;
  transition: border-color 160ms ease, background 160ms ease;
}
.forum-move-option:hover:not(.is-current) {
  border-color: var(--team, #2563eb);
  background: var(--ink-3);
}
.forum-move-option.is-chosen {
  border-color: var(--team, #2563eb);
  background: color-mix(in srgb, var(--team, #2563eb) 12%, var(--ink-2));
}
.forum-move-option.is-current {
  opacity: 0.55;
  cursor: not-allowed;
}
.forum-move-option input[type="radio"] {
  margin: 0;
  accent-color: var(--team, #2563eb);
}
.forum-move-option__name {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--paper);
}
.forum-move-option__count {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3);
  letter-spacing: 0.04em;
}
.forum-move-option__here {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: #fde68a;
  background: rgba(234,179,8,0.15);
  padding: 2px 8px; border-radius: 999px;
}

/* ============================================================
   Forum polls — composer setup + topic-view block
   ============================================================ */

/* Composer: "Attach a poll" toggle + collapsible setup fieldset */
.forum-poll-toggle { margin-top: 6px; }
.forum-poll-toggle__row {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: 13px;
  color: var(--paper-2); cursor: pointer;
}
.forum-poll-toggle__row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

.forum-poll-config {
  margin: 10px 0 4px;
  padding: 14px 16px 16px;
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.02);
}
.forum-poll-config legend {
  padding: 0 8px; margin-left: 4px;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-2);
}
.forum-poll-hint {
  color: var(--paper-3); font-weight: 400;
  font-family: var(--body); font-size: 11px;
  text-transform: none; letter-spacing: 0;
  margin-left: 6px;
}
.forum-poll-inline {
  flex-direction: row !important;
  align-items: center; gap: 10px;
}
.forum-poll-inline input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex: 0 0 auto; }
.forum-poll-inline > span { font-weight: 500; color: var(--paper-2); }

.forum-poll-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.forum-poll-option-row { display: flex; gap: 6px; align-items: center; }
.forum-poll-option-row input[type="text"] { flex: 1; }
.forum-poll-option-remove {
  width: 28px; height: 28px;
  background: transparent; color: var(--paper-3);
  border: 1px solid var(--ink-4); border-radius: var(--r-sm);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, border-color 0.15s;
}
.forum-poll-option-remove:hover { color: var(--hot); border-color: var(--hot-edge); }
.forum-poll-add { align-self: flex-start; }
.forum-poll-add:disabled { opacity: 0.5; cursor: not-allowed; }

/* Topic-view poll block */
.forum-poll {
  margin: 16px 0 20px;
  padding: 18px 20px;
  background: linear-gradient(135deg, var(--ink-2), var(--ink-3) 80%);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
}
.forum-poll__head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 8px 16px;
  margin-bottom: 14px;
}
.forum-poll__question {
  margin: 0;
  flex: 1 1 240px;
  font-family: var(--display); font-weight: 700; font-size: 17px;
  color: var(--paper); line-height: 1.3;
}
.forum-poll__meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3); letter-spacing: 0.04em;
}
.forum-poll__badge {
  padding: 3px 9px; border-radius: 999px;
  font-weight: 700;
  background: color-mix(in srgb, var(--team) 18%, transparent);
  color: var(--team);
  border: 1px solid color-mix(in srgb, var(--team) 40%, transparent);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.forum-poll__badge--open { background: rgba(58,181,124,0.12); color: #6fd6a2; border-color: rgba(58,181,124,0.35); }
.forum-poll__badge--closed { background: rgba(255,255,255,0.06); color: var(--paper-3); border-color: var(--ink-4); }
.forum-poll__counter { font-weight: 700; color: var(--paper-2); }
.forum-poll__note {
  font-style: italic; color: var(--paper-3);
  letter-spacing: 0.04em;
}
.forum-poll__note--block {
  display: block; margin: 12px 0 0;
  font-family: var(--body); font-size: 13px; text-align: center;
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed var(--ink-4); border-radius: var(--r-sm);
}

.forum-poll__form { display: flex; flex-direction: column; gap: 8px; }
.forum-poll__opt {
  position: relative;
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "ctrl text"
    "ctrl bar";
  gap: 4px 10px;
  padding: 10px 12px;
  background: var(--ink-3);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.forum-poll__opt:hover:not(.is-readonly) { border-color: color-mix(in srgb, var(--team) 55%, var(--ink-4)); }
.forum-poll__opt.is-mine { border-color: var(--team); background: color-mix(in srgb, var(--team) 8%, var(--ink-3)); }
.forum-poll__opt.is-readonly { cursor: default; }
.forum-poll__opt-control { grid-area: ctrl; display: flex; align-items: center; justify-content: center; }
.forum-poll__opt-control input { width: 16px; height: 16px; cursor: pointer; }
.forum-poll__opt-control input:disabled { cursor: default; }
.forum-poll__opt-text {
  grid-area: text;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px;
}
.forum-poll__opt-label {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  color: var(--paper); line-height: 1.3;
}
.forum-poll__opt-stats {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3); letter-spacing: 0.04em;
  white-space: nowrap;
}
.forum-poll__opt-bar {
  grid-area: bar;
  position: relative;
  height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 999px; overflow: hidden;
}
.forum-poll__opt-bar-fill {
  display: block; height: 100%;
  background: color-mix(in srgb, var(--team) 55%, transparent);
  border-radius: 999px;
  transition: width 0.35s ease;
}
.forum-poll__opt-bar-fill.is-mine { background: var(--team); }

.forum-poll__actions {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px;
}
.forum-poll__submit { padding: 7px 18px; font-size: 13px; }
.forum-poll__status {
  margin: 0;
  font-family: var(--mono); font-size: 12px;
  color: var(--hot);
}

/* ============================================================
   iOS Safari / iPadOS — form-input zoom + drawer safe-area
   ============================================================ */

/* iOS Safari auto-zooms a page when an input with font-size < 16px gets
   focused — which then leaves the page zoomed-in afterwards. Force every
   text-input to render at 16px on touch viewports so focus stays put. */
@media (max-width: 1100px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], textarea, select {
    font-size: 16px !important;
  }
}

/* Mobile nav drawer — extend right-edge padding into the safe-area on
   notched iPhones held in landscape, otherwise the drawer's content
   tucks under the camera/rounded corner. */
@media (max-width: 1100px) {
  .nav {
    padding-right: env(safe-area-inset-right);
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}

/* Momentum scrolling inside scrollable containers. iOS used to need
   `-webkit-overflow-scrolling: touch` explicitly; harmless on newer
   versions and on every other browser. */
.nav,
.commish-modal__body,
.auth-modal__panel,
.rosterm,
.linesm,
.strategym,
.ratings-modal__panel,
.forum-move-list {
  -webkit-overflow-scrolling: touch;
}

/* Page bottom padding includes the home-indicator gap on notched
   devices so content isn't covered. */
.page {
  padding-bottom: max(80px, calc(80px + env(safe-area-inset-bottom)));
}

/* ====================================================================
   In-site Game Recap pages — /recent/<n>.html
   Emitted by build_recaps.py from RWHA-STHS.db.TodayGame. The page sits
   in the same theme as the rest of the site (dark canvas + emerald
   accent) and is preferred over the STHS .php sheets for games that
   have been recap'd. .php sheets still link from "View full STHS sheet".
   ==================================================================== */

.recap-hero {
  background: linear-gradient(135deg, var(--ink-2), var(--ink-3) 80%);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.recap-hero__head {
  display: flex; gap: 14px; align-items: center;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-2);
  margin-bottom: 18px;
}
.recap-hero__badge {
  background: var(--hot-soft);
  color: var(--hot);
  border: 1px solid var(--hot-edge);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  font-weight: 800;
}
.recap-hero__teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.recap-hero__team {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: var(--r-md);
  opacity: 0.7;                            /* loser dim */
  transition: opacity 200ms ease;
}
.recap-hero__team.is-winner { opacity: 1; }
.recap-hero__chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--r-md);
  font-family: var(--display);
  font-size: 16px; font-weight: 900;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.recap-hero__teamname {
  font-family: var(--display);
  font-size: 22px; font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.recap-hero__location {
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.15em;
  color: var(--paper-3);
  text-transform: uppercase;
}
.recap-hero__score {
  font-family: var(--display);
  font-size: 56px; font-weight: 900;
  line-height: 1;
  color: var(--paper);
}
.recap-hero__team.is-winner .recap-hero__score { color: var(--hot); }
.recap-hero__sths {
  display: inline-block;
  margin-top: 22px;
  padding: 8px 14px;
  font-family: var(--mono);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: transparent;
  color: var(--paper-dim);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: border-color 120ms, color 120ms;
}
.recap-hero__sths:hover { border-color: var(--hot); color: var(--hot); }

.recap-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.recap-stats .statbox label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--paper-3); margin-bottom: 12px;
  display: block;
}
.recap-stats__split {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px;
  font-family: var(--mono);
}
.recap-stats__split span { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.recap-stats__split b {
  font-size: 32px; font-weight: 800; color: var(--paper);
  font-family: var(--display);
  font-variant-numeric: tabular-nums;
}
.recap-stats__split small {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; color: var(--paper-3); text-transform: uppercase;
}
.recap-stats__sep {
  font-family: var(--mono); font-size: 11px;
  color: var(--paper-3); letter-spacing: 0.1em;
}

.recap-scoring {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.recap-scoring__team {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: 16px 20px;
}
.recap-scoring__team h4 {
  font-family: var(--display);
  font-size: 14px; font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--paper);
  padding-bottom: 10px;
  margin: 0 0 14px;
  border-bottom: 2px solid var(--hot);
}
.recap-scorer {
  display: block;
  font-size: 14px;
  color: var(--paper-dim);
  padding: 6px 0;
}
.recap-scorer small {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--paper-3);
  margin-left: 8px;
}
.recap-empty {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--paper-3);
  text-transform: uppercase;
}

.recap-goalies {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}
.recap-goalie {
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
  padding: 14px 18px;
}
.recap-goalie__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 8px;
}
.recap-goalie__name {
  font-family: var(--display);
  font-size: 16px; font-weight: 800;
  color: var(--paper);
}
.recap-goalie__dec {
  font-family: var(--mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 3px;
  background: var(--ink-3);
  color: var(--paper-3);
}
.recap-goalie__dec--win  { background: var(--hot-soft); color: var(--hot); border: 1px solid var(--hot-edge); }
.recap-goalie__dec--loss { background: var(--bad);  color: var(--paper); }
.recap-goalie__dec--otl  { background: var(--ink-4); color: var(--signal); }
.recap-goalie__stats {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--paper-dim);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.recap-goalie__stats b { color: var(--paper); }
.recap-goalie__sep { color: var(--paper-3); }
.recap-goalie__record { color: var(--paper-3); }
.recap-goalie__line { font-family: var(--mono); font-size: 12px; color: var(--paper-dim); }

.recap-stars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.recap-star {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--ink-2);
  border: 1px solid var(--ink-4);
  border-radius: var(--r-md);
}
.recap-star__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--hot-soft);
  color: var(--hot);
  border: 1px solid var(--hot-edge);
  font-family: var(--display);
  font-size: 16px; font-weight: 900;
}
.recap-star__name {
  font-family: var(--display);
  font-size: 15px; font-weight: 700;
  color: var(--paper);
}
.recap-star__team {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--paper-3);
  text-transform: uppercase;
  margin-left: auto;
}

@media (max-width: 720px) {
  .recap-hero { padding: 18px 16px; }
  .recap-hero__teams { grid-template-columns: 1fr; gap: 10px; }
  .recap-hero__score { font-size: 40px; }
  .recap-stats, .recap-scoring, .recap-goalies, .recap-stars { grid-template-columns: 1fr; }
}